/* =======================================================
   IRON SHARP MEDIA , STYLES
   Palette tuned to the logo: deep black, chrome silver,
   teal/cyan glow accent. Modern serif headlines + Inter body.
   ======================================================= */

:root{
  /* Core */
  --ink:        #050608;        /* deepest background */
  --coal:       #0E1116;        /* card surface */
  --smoke:      #1A1F27;        /* borders, inset surfaces */
  --steel:      #2A323D;        /* hover surfaces */

  /* Brand accent (matches logo teal/cyan glow) */
  --teal:       #3FD9E0;
  --teal-lo:    #2BA9B0;
  --teal-glow:  rgba(63, 217, 224, 0.35);

  /* Chrome / type */
  --chrome-1:   #F2F5F8;
  --chrome-2:   #C7CCD3;
  --chrome-3:   #8C939B;

  /* Text */
  --bone:       #F2F5F8;
  --silver:     #B6BFC9;
  --silver-mid: #8A929C;
  --silver-low: #5C6470;

  /* Layout */
  --radius:     10px;
  --radius-lg:  16px;
  --max:        1180px;
  --gut:        clamp(20px, 4vw, 40px);

  /* Transitions */
  --t:          200ms ease;
}

/* =======================================================
   RESET / BASE
   ======================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  position:relative;
}

/* Global grain overlay · adds texture depth without hurting perf */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:240px 240px;
}
@media (prefers-reduced-motion: reduce){
  body::before{ opacity:0.02; }
}
img,svg{ max-width:100%; height:auto; display:block; }
img{ -webkit-user-drag:none; user-select:none; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,select,textarea,button{ font-family:inherit; }

::selection{ background:var(--teal); color:#000; }

/* =======================================================
   LAYOUT PRIMITIVES
   ======================================================= */
.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut); }

.section{ padding:96px 0; position:relative; }
.section-dark{ background:var(--ink); }
.section-darker{ background:#030406; border-top:1px solid var(--smoke); border-bottom:1px solid var(--smoke); }

@media (min-width: 768px){
  .section{ padding:128px 0; }
}

/* =======================================================
   TYPE
   ======================================================= */
.display-1{
  font-family:'Fraunces', Georgia, serif;
  font-weight:700;
  font-size:clamp(2.8rem, 7.5vw, 7rem);
  line-height:0.98;
  letter-spacing:-0.028em;
  margin:0;
}
.display-2{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:clamp(2.35rem, 5.5vw, 4.75rem);
  line-height:1.04;
  letter-spacing:-0.022em;
  margin:0;
}
.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--silver);
  max-width:640px;
  margin:18px auto 0;
  line-height:1.55;
}
.body-lg{ font-size:1.1rem; color:var(--silver); }

.eyebrow{
  font-family:'Inter', sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 14px;
  display:inline-flex;
  align-items:center;
}
.eyebrow::before{
  content:''; display:inline-block;
  width:28px; height:1px;
  background:var(--teal);
  margin-right:14px;
}
.eyebrow-light{ color:var(--chrome-2); }
.eyebrow-light::before{ background:var(--chrome-2); }
.eyebrow-steel{ color:var(--teal); }

.text-steel{ color:var(--teal); }
.text-link{
  color:var(--bone);
  border-bottom:1px solid var(--teal-lo);
  transition:color var(--t), border-color var(--t);
}
.text-link:hover{ color:var(--teal); border-color:var(--teal); }

.micro{
  font-size:13px; color:var(--silver-mid);
  margin-top:12px;
}
.micro-light{ color:var(--chrome-2); }

.section-head{ text-align:center; max-width:720px; margin:0 auto 56px; }
.section-sub{
  font-size:1.05rem; color:var(--silver);
  margin-top:18px; line-height:1.6;
}

/* =======================================================
   BUTTONS
   ======================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 28px;
  font-weight:700; font-size:14px;
  letter-spacing:0.08em; text-transform:uppercase;
  border-radius:var(--radius);
  transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
  white-space:nowrap;
  border:1px solid transparent;
}
.btn-sm{ padding:11px 18px; font-size:12px; }
.btn-block{ display:flex; width:100%; }

.btn-primary{
  background:linear-gradient(180deg, var(--teal) 0%, var(--teal-lo) 100%);
  color:#03252b;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 30px -14px var(--teal-glow);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 18px 40px -14px var(--teal-glow);
  filter:brightness(1.08);
}

.btn-ghost{
  background:transparent;
  color:var(--bone);
  border-color:rgba(182,191,201,0.35);
}
.btn-ghost:hover{
  border-color:var(--teal);
  color:var(--teal);
}

/* =======================================================
   NAV
   ======================================================= */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background var(--t), backdrop-filter var(--t), border-color var(--t);
  border-bottom:1px solid transparent;
}
#nav.scrolled{
  background:rgba(5,6,8,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--smoke);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ height:36px; width:36px; object-fit:contain; }
.brand-word{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:0.06em;
  background:linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-3) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:none;
}
@media (min-width: 480px){ .brand-word{ display:inline; } }
.brand-accent{
  background:linear-gradient(180deg, var(--teal) 0%, var(--teal-lo) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.nav-links{ display:none; align-items:center; gap:26px; }
.nav-links a{
  font-size:14px; font-weight:500;
  color:var(--silver);
  transition:color var(--t);
}
.nav-links a:hover{ color:var(--bone); }

.nav-cta{ display:none; }

@media (min-width: 980px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
}

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:44px; height:44px;
  gap:5px;
  padding:8px;
  cursor:pointer;
  background:transparent;
  border-radius:8px;
  transition:background var(--t);
  position:relative;
  z-index:51;
}
.nav-toggle:hover{ background:rgba(255,255,255,0.04); }
.nav-toggle span{
  display:block; width:24px; height:2px;
  background:var(--bone);
  border-radius:2px;
  pointer-events:none;
  transition:transform 220ms ease, opacity 160ms ease, background 160ms ease;
  transform-origin:center;
}
/* Hamburger -> X when expanded */
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
  background:var(--teal);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
  background:var(--teal);
}
@media (min-width: 980px){ .nav-toggle{ display:none; } }

.mobile-backdrop{
  position:fixed; inset:0;
  background:rgba(2,3,4,0.6);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:48;
  opacity:0;
  pointer-events:none;
  transition:opacity 200ms ease;
}
.mobile-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

.mobile-menu{
  position:fixed; top:68px; left:0; right:0;
  background:rgba(3,4,6,0.98);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--smoke);
  border-bottom:1px solid var(--smoke);
  padding:24px var(--gut) 28px;
  display:flex; flex-direction:column; gap:6px;
  z-index:49;
  max-height:calc(100vh - 68px);
  overflow-y:auto;
  transform:translateY(-12px);
  opacity:0;
  visibility:hidden;
  transition:transform 220ms ease, opacity 200ms ease, visibility 0s linear 220ms;
}
.mobile-menu.is-open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  transition:transform 220ms ease, opacity 200ms ease, visibility 0s linear 0s;
}
.mobile-menu a{
  font-size:18px; font-weight:600;
  color:var(--bone);
  padding:14px 4px;
  border-bottom:1px solid var(--smoke);
}
.mobile-menu a:last-child{ border-bottom:0; }
.mobile-menu a:not(.btn):hover,
.mobile-menu a:not(.btn):active{ color:var(--teal); }
.mobile-menu .btn{
  margin-top:14px;
  align-self:stretch;
  border-bottom:0;
}

/* Lock body scroll when menu is open */
body.menu-open{ overflow:hidden; }

/* =======================================================
   HERO
   ======================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:140px 0 80px;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 28%, rgba(63,217,224,0.18) 0%, rgba(0,0,0,0) 65%),
    radial-gradient(ellipse 110% 75% at 80% 100%, rgba(63,217,224,0.08) 0%, rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 80% 60% at 12% 90%, rgba(122,176,207,0.05) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #02040A 0%, #050608 55%, #03050A 100%);
}

/* Aurora , soft diagonal teal sweep, like light passing across the dark */
.hero-aurora{
  position:absolute; inset:-10%;
  background:
    linear-gradient(118deg,
      transparent 30%,
      rgba(63,217,224,0.08) 47%,
      rgba(166,207,227,0.06) 52%,
      rgba(63,217,224,0.05) 56%,
      transparent 72%);
  filter:blur(40px);
  opacity:0.85;
  pointer-events:none;
  z-index:1;
}
@media (min-width: 768px){
  .hero-aurora{ filter:blur(60px); }
}

/* Subtle dotted grid, masked to fade out toward the edges */
.hero-grid{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(166,207,227,0.10) 1px, transparent 1.4px);
  background-size:32px 32px;
  background-position:center center;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 78%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 78%);
  opacity:0.65;
  pointer-events:none;
  z-index:1;
}
@media (min-width: 768px){
  .hero-grid{ background-size:40px 40px; }
}

/* Single thin diagonal accent , the only nod to the sword, very subtle */
.hero-streak{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
}
.hero-streak::before,
.hero-streak::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:140%;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    transparent 25%,
    rgba(63,217,224,0.18) 50%,
    transparent 75%,
    transparent 100%);
  transform-origin:center center;
}
.hero-streak::before{
  transform:translate(-50%, -50%) rotate(-22deg);
  opacity:0.9;
}
.hero-streak::after{
  transform:translate(-50%, -50%) rotate(22deg);
  opacity:0.45;
  background:linear-gradient(90deg,
    transparent 0%,
    transparent 40%,
    rgba(166,207,227,0.10) 50%,
    transparent 60%,
    transparent 100%);
}
.hero-inner{ position:relative; z-index:3; }
.hero-grain{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  opacity:0.5;
}
.hero-rule{
  position:absolute; right:24px; top:0; bottom:0;
  width:1px; background:linear-gradient(180deg, transparent, var(--teal-lo) 50%, transparent);
  opacity:0.4;
  display:none;
}
@media (min-width: 768px){ .hero-rule{ display:block; } }

.hero-inner{ position:relative; z-index:2; }
.hero-inner .eyebrow{ justify-content:center; display:flex; margin-bottom:24px; }
.hero-inner .lede{ margin-top:24px; }

.hero-mark{
  margin-top:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.hero-mark img{
  width:220px;
  height:auto;
  max-width:72vw;
  /* drop-shadow follows the logo's actual silhouette , no rectangular frame */
  filter:
    drop-shadow(0 6px 18px rgba(63,217,224,0.30))
    drop-shadow(0 18px 44px rgba(63,217,224,0.20))
    drop-shadow(0 28px 70px rgba(0,0,0,0.55));
  transition: transform 400ms cubic-bezier(0.2,0.7,0.3,1), filter 400ms ease;
}
.hero-mark img:hover{
  transform:translateY(-3px);
  filter:
    drop-shadow(0 8px 22px rgba(63,217,224,0.45))
    drop-shadow(0 20px 56px rgba(63,217,224,0.30))
    drop-shadow(0 28px 70px rgba(0,0,0,0.55));
}
@media (min-width: 600px){ .hero-mark img{ width:300px; } }
@media (min-width: 880px){ .hero-mark img{ width:380px; } }
@media (min-width: 1200px){ .hero-mark img{ width:440px; } }

/* Logo-first hero: dominant brand visual at the top, supporting copy below */
.hero-mark-lead{ margin-bottom:30px; }
@media (min-width: 768px){ .hero-mark-lead{ margin-bottom:38px; } }
.hero-tagline{
  margin: 0 auto 22px;
  justify-content: center;
  display: inline-flex;
}
@media (min-width: 768px){ .hero-tagline{ margin-bottom:26px; } }

.hero-ctas{
  margin-top:32px;
  display:flex; gap:14px; justify-content:center;
  flex-wrap:wrap;
}
.hero-ctas .btn{ width:100%; max-width:280px; }
@media (min-width: 540px){ .hero-ctas .btn{ width:auto; } }

/* .hero-trust no longer used , removed in logo-first hero rebuild */

/* =======================================================
   TRUST BAR + PROOF ROW
   ======================================================= */
.trust-bar{
  background:var(--coal);
  border-top:1px solid var(--smoke);
  border-bottom:1px solid var(--smoke);
  padding:32px 0;
  text-align:center;
}
.trust-text{
  margin:0 auto;
  max-width:760px;
  color:var(--silver);
  font-size:14px;
  letter-spacing:0.04em;
  line-height:1.6;
}
.trust-text strong{ color:var(--bone); font-weight:600; }

.proof-row{
  margin:22px 0 0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px 28px;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--silver-mid);
  font-weight:600;
}
.proof-row li{
  position:relative;
  padding-left:18px;
}
.proof-row li::before{
  content:'';
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 2px rgba(63,217,224,0.18);
}

/* =======================================================
   WHO THIS IS FOR
   ======================================================= */
.section-tight{ padding:80px 0; }
@media (min-width: 768px){ .section-tight{ padding:96px 0; } }

.who-grid{
  display:grid; gap:40px;
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width: 880px){
  .who-grid{ grid-template-columns:5fr 7fr; gap:60px; }
}
.who-head .display-2{ margin-top:6px; }
.who-head .section-sub{ text-align:left; margin-top:18px; }

.who-list{
  display:flex; flex-direction:column;
  gap:0;
  border-top:1px solid var(--smoke);
}
.who-list li{
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 4px;
  border-bottom:1px solid var(--smoke);
  color:var(--silver);
  font-size:1rem;
  line-height:1.55;
  transition:padding-left 200ms ease, color 200ms ease;
}
.who-list li:hover{
  padding-left:8px;
  color:var(--bone);
}
.who-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; flex-shrink:0;
  background:rgba(63,217,224,0.12);
  color:var(--teal);
  font-weight:700;
  font-size:13px;
  border:1px solid rgba(63,217,224,0.3);
  margin-top:1px;
}

/* =======================================================
   SERVICES
   ======================================================= */
.services-grid{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width: 720px){
  .services-grid{ grid-template-columns:repeat(3, 1fr); }
}

.service-card{
  background:linear-gradient(180deg, var(--coal) 0%, #0A0D12 100%);
  border:1px solid var(--smoke);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  display:flex; flex-direction:column;
  transition:border-color var(--t), transform var(--t), box-shadow var(--t);
  position:relative;
}
.service-card:hover{
  border-color:rgba(63,217,224,0.35);
  transform:translateY(-3px);
  box-shadow: 0 20px 50px -20px rgba(63,217,224,0.18);
}
.service-featured{
  border-color:rgba(63,217,224,0.55);
  box-shadow: 0 0 0 1px rgba(63,217,224,0.25), 0 24px 60px -20px var(--teal-glow);
  position:relative;
}
.service-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--teal), var(--teal-lo));
  color:#03252b;
  font-size:10px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase;
  padding:5px 12px; border-radius:6px;
  white-space:nowrap;
}

.card-num{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:42px;
  color:var(--teal);
  margin:0 0 6px; line-height:1;
}
.card-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:24px;
  color:var(--bone);
  margin:0 0 14px;
  line-height:1.15;
}
.card-body{
  color:var(--silver);
  font-size:15px;
  margin:0 0 18px;
  line-height:1.6;
}
.card-list{
  display:flex; flex-direction:column; gap:8px;
  margin:0 0 24px;
  font-size:14px;
  color:var(--silver);
}
.card-list li{
  position:relative; padding-left:18px;
}
.card-list li::before{
  content:'›';
  position:absolute; left:0; top:0;
  color:var(--teal); font-weight:700;
}

.card-foot{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--smoke);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.card-price{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:28px;
  color:var(--bone);
  margin:0;
}
.card-from{
  font-family:'Inter', sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--silver-mid);
  display:block;
  line-height:1;
  margin-bottom:2px;
}
.card-mo{
  font-size:14px; color:var(--silver-mid);
  font-weight:500;
}

.services-note{
  text-align:center;
  margin-top:40px;
  color:var(--silver-mid);
  font-size:14px;
}
.services-note a{
  color:var(--teal); border-bottom:1px solid var(--teal-lo);
}

/* =======================================================
   FEATURED CENTERPIECE
   ======================================================= */
.work-feature{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  background:linear-gradient(180deg, var(--coal) 0%, #060A10 100%);
  border:1px solid var(--smoke);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:32px;
  position:relative;
  transition:border-color var(--t), transform var(--t), box-shadow var(--t);
  text-decoration:none;
  color:inherit;
}
.work-feature:hover{
  border-color:rgba(63,217,224,0.5);
  transform:translateY(-3px);
  box-shadow:0 30px 70px -25px var(--teal-glow);
}
@media (min-width: 880px){
  .work-feature{
    grid-template-columns:5fr 7fr;
    align-items:stretch;
  }
}
.work-feature-img{
  position:relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(63,217,224,0.06) 0%, rgba(0,0,0,0) 70%),
    #020306;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  /* Cap height on mobile so a portrait flyer doesn't take over the screen */
  max-height:78vh;
}
.work-feature-img::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 75%, rgba(5,6,8,0.35) 100%);
  pointer-events:none;
}
.work-feature-img img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transition:transform 600ms ease;
  display:block;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,0.5));
}
@media (min-width: 880px){
  .work-feature-img{
    align-self:stretch;
    padding:24px;
    max-height:none;
  }
}
.work-feature:hover .work-feature-img img{ transform:scale(1.025); }

.work-feature-meta{
  padding:32px 28px;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
}
@media (min-width: 880px){
  .work-feature-meta{ padding:48px 44px; }
}
.work-feature-badge{
  align-self:flex-start;
  display:inline-block;
  font-size:10px; font-weight:800;
  letter-spacing:0.22em; text-transform:uppercase;
  color:#03252b;
  background:linear-gradient(180deg, var(--teal), var(--teal-lo));
  padding:6px 12px; border-radius:6px;
  margin-bottom:6px;
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset;
}
.work-feature-meta .tag{
  font-size:11px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--teal);
  display:block;
}
.work-feature-title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:700;
  font-size:clamp(2rem, 3.6vw, 2.8rem);
  line-height:1.05;
  letter-spacing:-0.015em;
  color:var(--bone);
  margin:0;
}
.work-feature-client{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-size:1.1rem;
  color:var(--silver);
  margin:0;
}
.work-feature-line{
  margin:6px 0 0;
  font-size:1rem;
  line-height:1.6;
  color:var(--silver);
}
.work-feature-points{
  margin:8px 0 0;
  display:flex; flex-direction:column; gap:8px;
  border-top:1px solid var(--smoke);
  padding-top:18px;
}
.work-feature-points li{
  position:relative;
  padding-left:20px;
  font-size:14px;
  line-height:1.5;
  color:var(--silver);
}
.work-feature-points li::before{
  content:'›';
  position:absolute; left:0; top:-1px;
  color:var(--teal);
  font-weight:700;
  font-size:18px;
}
.work-feature-cta{
  margin-top:14px;
  font-size:13px; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--teal);
  align-self:flex-start;
  transition:gap var(--t), letter-spacing var(--t);
}
.work-feature:hover .work-feature-cta{
  letter-spacing:0.22em;
}

/* =======================================================
   WORK GRID
   ======================================================= */
.work-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width: 600px){
  .work-grid{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-flow:dense;
  }
}
@media (min-width: 960px){
  .work-grid{
    grid-template-columns:repeat(3, 1fr);
  }
  .work-tall{ grid-row:span 2; }
}

.work-card{
  position:relative;
  display:block;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--smoke);
  background:var(--coal);
  aspect-ratio:4/3;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
}
.work-tall{ aspect-ratio:4/6; }
/* On mobile (single-column), let tall cards stay tall but cap height so they don't dominate */
@media (max-width: 599px){
  .work-tall{ aspect-ratio:4/5; }
}
.work-card img{
  width:100%; height:100%;
  max-width:100%;
  object-fit:cover;
  transition:transform 600ms ease;
}
.work-card:hover{
  border-color:rgba(63,217,224,0.5);
  transform:translateY(-2px);
  box-shadow: 0 24px 50px -24px var(--teal-glow);
}
.work-card:hover img{ transform:scale(1.04); }
.work-meta{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px;
  background:linear-gradient(180deg, transparent 0%, rgba(5,6,8,0.85) 60%, rgba(5,6,8,0.95) 100%);
}
.work-meta .tag{
  font-size:10px; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal);
  display:block; margin-bottom:6px;
}
.work-meta h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:18px;
  color:var(--bone);
  margin:0 0 6px;
}
.work-line{
  margin:0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--silver);
  max-width:90%;
}

.work-note{
  text-align:center;
  margin-top:32px;
  font-size:13px;
  color:var(--silver-mid);
}
.work-note code{
  font-family:'SF Mono', Menlo, monospace;
  background:var(--smoke);
  color:var(--bone);
  padding:2px 8px; border-radius:4px;
  font-size:12px;
}

/* =======================================================
   EXPANDABLE "MORE WORK" GRID
   ======================================================= */
.work-grid-extra{
  margin-top:16px;
  display:none;          /* collapsed by default */
}
.work-grid-extra.is-open{
  display:grid;
  animation: workExpand 380ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
@keyframes workExpand{
  0%   { opacity:0; transform:translateY(-12px); }
  100% { opacity:1; transform:translateY(0); }
}

.work-more-wrap{
  margin-top:36px;
  text-align:center;
}
.work-more-btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:13px 22px;
  background:transparent;
  color:var(--bone);
  border:1px solid rgba(182,191,201,0.35);
  border-radius:12px;
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 200ms ease;
}
.work-more-btn:hover{
  border-color:var(--teal);
  color:var(--teal);
  background:rgba(63,217,224,0.04);
}
.work-more-btn:active{ transform:translateY(1px); }
.work-more-plus{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  font-size:18px; font-weight:800; line-height:1;
  background:rgba(63,217,224,0.16);
  color:var(--teal);
  border:1px solid rgba(63,217,224,0.32);
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.3, 1), background 200ms ease;
  /* Optical adjustment so the + appears centered */
  padding-bottom:2px;
}
.work-more-btn:hover .work-more-plus{
  background:rgba(63,217,224,0.28);
}
/* When expanded, rotate "+" by 45deg so it becomes "×" */
.work-more-btn[aria-expanded="true"] .work-more-plus{
  transform: rotate(45deg);
}

/* =======================================================
   WEBSITES BUILT
   ======================================================= */
.sites-grid{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width: 640px){ .sites-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 1100px){ .sites-grid{ grid-template-columns:repeat(4, 1fr); } }

.status-pill{
  display:inline-block;
  font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--teal);
  background:rgba(63,217,224,0.1);
  border:1px solid rgba(63,217,224,0.3);
  padding:2px 7px; border-radius:4px;
  margin-left:6px;
  vertical-align:middle;
  position:relative; top:-1px;
}

.site-card{
  background:var(--coal);
  border:1px solid var(--smoke);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
  display:flex; flex-direction:column;
}
.site-card:hover{
  border-color:rgba(63,217,224,0.5);
  transform:translateY(-3px);
  box-shadow: 0 24px 50px -24px var(--teal-glow);
}
.site-thumb{
  aspect-ratio:16/10;
  background:#020306;
  border-bottom:1px solid var(--smoke);
  overflow:hidden;
}
.site-thumb img{
  width:100%; height:100%;
  max-width:100%;
  object-fit:cover;
}

/* Static (non-link) site card , no hover lift, subtle muted treatment */
.site-card-static{
  cursor:default;
}
.site-card-static:hover{
  transform:none;
  border-color:var(--smoke);
  box-shadow:none;
}
.site-card-static .site-url{
  color:var(--silver-low);
  font-style:italic;
}
/* Explanatory note inside a static card (e.g. private portal description) */
.site-note{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--silver);
}
.site-note::before{
  content:'';
  display:block;
  width:24px; height:1px;
  background:var(--teal);
  margin:0 0 10px;
  opacity:0.65;
}
.site-meta{ padding:20px; }
.site-tag{
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal); margin:0 0 6px;
  font-weight:700;
}
.site-meta h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:19px;
  color:var(--bone);
  margin:0 0 8px;
}
.site-url{
  font-size:13px;
  color:var(--silver-mid);
  margin:0;
  letter-spacing:0.02em;
}
.site-card:hover .site-url{ color:var(--teal); }

/* =======================================================
   TESTIMONIALS / PULL QUOTE
   ======================================================= */
.section-quote{
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(63,217,224,0.08) 0%, rgba(0,0,0,0) 70%),
    var(--ink);
  padding:80px 0;
  border-top:1px solid var(--smoke);
  border-bottom:1px solid var(--smoke);
}
.quote-inner{
  text-align:center;
  max-width:780px;
}
.pull-quote{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  line-height:1.3;
  color:var(--bone);
  margin:24px 0 18px;
}
.quote-attribution{
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--silver-mid);
  margin:0;
}
.quote-note{
  font-size:12px;
  color:var(--silver-low);
  margin-top:32px;
}

/* Client Results section */
.results-headline{
  margin-top:18px;
}
.results-body{
  font-size:1.05rem;
  color:var(--silver);
  line-height:1.65;
  margin:24px auto 0;
  max-width:680px;
}
.results-body strong{ color:var(--bone); font-weight:600; }
.results-tagline{
  margin-top:14px;
  font-size:1rem;
}
.results-tagline em{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  color:var(--bone);
  font-size:1.1rem;
}

/* =======================================================
   ABOUT
   ======================================================= */
.about-grid{
  display:grid; gap:48px;
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width: 880px){
  .about-grid{ grid-template-columns:5fr 7fr; gap:64px; }
}

.portrait-frame{
  position:relative;
  aspect-ratio:3 / 4;
  width:100%;
  max-width:540px;
  margin:0 auto;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--smoke);
  background:#0A0D12;
}
.portrait-frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}
@media (min-width: 880px){
  .portrait-frame{
    max-width:none;
    margin:0;
  }
}
.portrait-rule{
  position:absolute; top:0; right:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--teal) 0%, var(--teal-lo) 100%);
}
.portrait-caption{
  position:absolute; left:18px; right:18px; bottom:14px;
  background:linear-gradient(180deg, transparent 0%, rgba(5,6,8,0.85) 100%);
  padding-top:60px;
}
.portrait-name{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:0.08em;
  font-size:18px;
  color:var(--bone);
  margin:0;
}
.portrait-role{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal);
  margin:2px 0 0;
  font-weight:600;
}

.about-body p{ margin:0 0 16px; color:var(--silver); font-size:1rem; line-height:1.7; }
.about-body .body-lg{ margin-top:24px; }
.about-body em{ color:var(--bone); font-style:italic; }

.about-stats{
  display:grid; gap:24px;
  grid-template-columns:repeat(3, 1fr);
  margin:32px 0 24px;
  padding:24px 0;
  border-top:1px solid var(--smoke);
  border-bottom:1px solid var(--smoke);
}
.about-stats div{ display:flex; flex-direction:column; }
.about-stats strong{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:22px;
  color:var(--bone);
  line-height:1.05;
  margin-bottom:8px;
}
.about-stats span{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--silver-mid);
}
/* Prose variant , stack vertically on mobile so the longer descriptive lines
   read cleanly, then return to a 3-column grid on tablet and up. */
.about-stats-prose{
  grid-template-columns:1fr;
  gap:18px;
}
.about-stats-prose div{
  padding:8px 0;
  border-bottom:1px dashed var(--smoke);
}
.about-stats-prose div:last-child{ border-bottom:0; }
.about-stats-prose span{
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:none;
  color:var(--silver);
  line-height:1.5;
}
@media (min-width: 720px){
  .about-stats-prose{
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .about-stats-prose div{
    padding:0;
    border-bottom:0;
  }
}

.about-cta{ margin-top:8px; }

/* =======================================================
   PROCESS
   ======================================================= */
.process-list{
  display:grid; gap:14px;
  max-width:820px; margin:0 auto;
}
.process-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:flex-start;
  background:var(--coal);
  border:1px solid var(--smoke);
  border-radius:var(--radius-lg);
  padding:28px;
  transition:border-color var(--t);
}
.process-list li:hover{ border-color:rgba(63,217,224,0.35); }
.process-num{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:48px;
  line-height:0.9;
  color:var(--teal);
  min-width:60px;
}
.process-list h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:20px;
  color:var(--bone);
  margin:6px 0 8px;
}
.process-list p{
  margin:0; color:var(--silver); font-size:15px; line-height:1.6;
}

/* =======================================================
   CTA BAND
   ======================================================= */
.cta-band{
  position:relative;
  padding:120px 0;
  background:#030406;
  overflow:hidden;
  text-align:center;
  border-top:1px solid var(--smoke);
  border-bottom:1px solid var(--smoke);
}
.cta-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
}
.cta-glow-1{
  right:-100px; top:50%; transform:translateY(-50%);
  width:520px; height:520px;
  background:rgba(63,217,224,0.18);
}
.cta-glow-2{
  left:-100px; bottom:0;
  width:380px; height:380px;
  background:rgba(63,217,224,0.08);
}
.cta-inner{ position:relative; z-index:2; }
.cta-inner .eyebrow{ justify-content:center; display:flex; }
.cta-inner .lede{ margin-top:24px; }
.cta-inner .hero-ctas{ margin-top:40px; }

/* =======================================================
   CONTACT
   ======================================================= */
.contact-grid{
  display:grid; gap:48px;
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width: 880px){
  .contact-grid{ grid-template-columns:1fr 1fr; gap:64px; }
}

.contact-info .display-2{ margin-top:0; }
.contact-info .body-lg{ margin:18px 0 32px; }

.contact-direct{
  display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--smoke);
}
.contact-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  border-bottom:1px solid var(--smoke);
  transition:padding-left var(--t);
}
.contact-row:hover{ padding-left:8px; }
.contact-label{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--silver-mid);
  font-weight:600;
}
.contact-label small{
  display:block;
  font-size:9px;
  letter-spacing:0.16em;
  color:var(--silver-low);
  margin-top:2px;
  font-weight:500;
  text-transform:none;
}
.contact-value{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:18px;
  color:var(--bone);
}
.contact-row:hover .contact-value{ color:var(--teal); }

.contact-tagline{
  margin-top:24px;
  color:var(--silver-mid);
  font-size:14px;
}

/* Form */
.contact-form{
  background:var(--coal);
  border:1px solid var(--smoke);
  border-radius:var(--radius-lg);
  padding:32px;
}
.field{ display:flex; flex-direction:column; margin-bottom:18px; }
.field label{
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--silver);
  font-weight:600;
  margin-bottom:8px;
}
.field label span{ color:var(--teal); }
.field input,
.field select,
.field textarea{
  background:#06080B;
  border:1px solid var(--smoke);
  color:var(--bone);
  padding:14px 16px;
  border-radius:8px;
  font-size:15px;
  transition:border-color var(--t), box-shadow var(--t);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(63,217,224,0.18);
}
.field textarea{ resize:vertical; min-height:120px; }

.field-row{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media (min-width: 540px){
  .field-row{ grid-template-columns:1fr 1fr; }
}

.hp{ position:absolute; left:-10000px; height:0; overflow:hidden; }

.form-status{
  margin:14px 0 0; font-size:14px; min-height:1.4em;
  text-align:center;
}
.form-status.is-success{ color:var(--teal); }
.form-status.is-error{ color:#ff6b6b; }

.form-fineprint{
  margin-top:14px;
  font-size:12px; color:var(--silver-low);
  text-align:center;
}

/* =======================================================
   FOOTER
   ======================================================= */
.footer{
  background:#020304;
  padding:56px 0 0;
  border-top:1px solid var(--smoke);
}
.footer-inner{
  display:grid; gap:32px;
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width: 760px){
  .footer-inner{ grid-template-columns:auto 1fr auto; }
}

.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-word{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:0.06em;
  background:linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-3) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0;
}
.footer-sub{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--silver-mid);
  margin:4px 0 0;
}

.footer-nav{
  display:flex; flex-wrap:wrap; gap:22px;
  justify-content:center;
}
.footer-nav a{
  font-size:14px; color:var(--silver);
  transition:color var(--t);
}
.footer-nav a:hover{ color:var(--bone); }

.footer-meta{ text-align:right; }
.footer-meta p{ margin:0 0 4px; font-size:13px; color:var(--silver); }
.footer-meta a{ color:var(--bone); transition:color var(--t); }
.footer-meta a:hover{ color:var(--teal); }
.footer-sister{
  font-size:12px !important;
  color:var(--silver-mid) !important;
  margin-top:6px !important;
}

.footer-rule{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--smoke), transparent);
  margin-top:40px;
}

.footer-bottom{
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center;
  padding:20px 0;
  font-size:12px;
  color:var(--silver-low);
  gap:8px;
}
.footer-scripture{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:13px !important;
  color:var(--silver-mid) !important;
  margin:0;
}

/* =======================================================
   INDUSTRY MARQUEE
   Auto-scrolling band of industries between hero and trust bar.
   Pure CSS infinite loop , duplicated track for seamless wrap.
   ======================================================= */
.marquee{
  position:relative;
  background:#020306;
  border-top:1px solid var(--smoke);
  border-bottom:1px solid var(--smoke);
  padding:18px 0;
  overflow:hidden;
}
.marquee-fade{
  position:absolute; top:0; bottom:0;
  width:90px;
  z-index:2;
  pointer-events:none;
}
.marquee-fade-l{ left:0;  background:linear-gradient(90deg, #020306 0%, transparent 100%); }
.marquee-fade-r{ right:0; background:linear-gradient(-90deg, #020306 0%, transparent 100%); }

.marquee-track{
  display:flex;
  width:max-content;
  animation:marqueeScroll 38s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }

.marquee-list{
  display:flex; align-items:center; gap:34px;
  margin:0; padding:0 17px;
  list-style:none;
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:clamp(1.1rem, 2.2vw, 1.55rem);
  letter-spacing:-0.005em;
  color:var(--silver);
}
.marquee-list li{
  white-space:nowrap;
  transition:color var(--t);
}
.marquee-list li:hover{ color:var(--teal); }
.marquee-dot{
  color:var(--teal-lo) !important;
  font-weight:400 !important;
  font-size:0.9em;
  opacity:0.7;
}

@keyframes marqueeScroll{
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* =======================================================
   SCROLL REVEAL
   Fades + slides element up when it enters the viewport.
   JS adds .reveal-in once Intersection Observer fires.
   ======================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 700ms cubic-bezier(0.2, 0.7, 0.3, 1),
             transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change:opacity, transform;
}
.reveal.reveal-in{
  opacity:1;
  transform:translateY(0);
}
/* Stagger when applied to grid children , give each item a slight delay */
.reveal-stagger > .reveal{ transition-delay:0ms; }
.reveal-stagger > .reveal:nth-child(2){ transition-delay:80ms; }
.reveal-stagger > .reveal:nth-child(3){ transition-delay:160ms; }
.reveal-stagger > .reveal:nth-child(4){ transition-delay:240ms; }
.reveal-stagger > .reveal:nth-child(5){ transition-delay:320ms; }
.reveal-stagger > .reveal:nth-child(6){ transition-delay:400ms; }

/* =======================================================
   MOUSE-FOLLOWING HERO GLOW
   JS sets --mx/--my as percentages from the hero element.
   The teal radial gradient repositions to where the cursor is.
   ======================================================= */
.hero{
  --mx: 50%;
  --my: 30%;
}
.hero-bg{
  background:
    radial-gradient(ellipse 60% 45% at var(--mx) var(--my), rgba(63,217,224,0.22) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(ellipse 110% 75% at 80% 100%, rgba(63,217,224,0.08) 0%, rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 80% 60% at 12% 90%, rgba(122,176,207,0.05) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #02040A 0%, #050608 55%, #03050A 100%);
  transition:background-position 200ms ease;
}

/* =======================================================
   CARD CURSOR TILT (3D feel)
   JS sets --tx/--ty per card based on cursor position.
   Cards rotate slightly toward the cursor with a perspective transform.
   ======================================================= */
.tilt{
  --tx: 0deg;
  --ty: 0deg;
  transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(var(--ty)) rotateY(var(--tx)) translateZ(0);
  transition:transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1), border-color var(--t), box-shadow var(--t);
}
.tilt.tilt-active{
  transition:transform 80ms linear, border-color var(--t), box-shadow var(--t);
}
/* Service cards inherit a stronger lift on hover too */
.service-card.tilt:hover{
  border-color:rgba(63,217,224,0.45);
}

/* =======================================================
   HERO LOGO GENTLE FLOAT
   ======================================================= */
@keyframes heroFloat{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}
.hero-mark img{
  animation:heroFloat 6s ease-in-out infinite;
}
.hero-mark img:hover{ animation-play-state:paused; }

/* =======================================================
   CINEMATIC UPGRADE v2
   ======================================================= */

/* ---- Scroll progress bar ---- */
.scroll-progress{
  position:fixed; top:0; left:0;
  height:3px; width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--teal-lo), var(--teal));
  box-shadow:0 0 12px rgba(63,217,224,0.5);
  z-index:60;
  pointer-events:none;
  will-change:transform;
}

/* ---- Hero atmospheric orbs (drifting depth) ---- */
.hero-orbs{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.hero-orbs span{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.55;
  will-change:transform;
}
.hero-orbs span:nth-child(1){
  width:42vw; max-width:520px; aspect-ratio:1;
  background:radial-gradient(circle, rgba(63,217,224,0.22) 0%, rgba(63,217,224,0) 68%);
  top:-6%; left:2%;
  animation:orbDrift1 20s ease-in-out infinite;
}
.hero-orbs span:nth-child(2){
  width:34vw; max-width:420px; aspect-ratio:1;
  background:radial-gradient(circle, rgba(122,176,207,0.16) 0%, rgba(122,176,207,0) 68%);
  bottom:-8%; right:4%;
  animation:orbDrift2 26s ease-in-out infinite;
}
.hero-orbs span:nth-child(3){
  width:28vw; max-width:340px; aspect-ratio:1;
  background:radial-gradient(circle, rgba(63,217,224,0.14) 0%, rgba(63,217,224,0) 70%);
  top:46%; left:58%;
  animation:orbDrift3 32s ease-in-out infinite;
}
@keyframes orbDrift1{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(46px,38px,0); }
}
@keyframes orbDrift2{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(-52px,-30px,0); }
}
@keyframes orbDrift3{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(30px,-44px,0); }
}

/* ---- Animated aurora drift (was static) ---- */
.hero-aurora{
  animation:auroraDrift 24s ease-in-out infinite;
  will-change:transform, opacity;
}
@keyframes auroraDrift{
  0%,100%{ transform:translateX(-2%) translateY(0); opacity:0.8; }
  50%    { transform:translateX(3%) translateY(-1.5%); opacity:1; }
}

/* ---- Hero logo breathing glow ---- */
.hero-mark-lead{ position:relative; }
.hero-mark-lead::before{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:118%; height:118%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(63,217,224,0.20) 0%, rgba(63,217,224,0) 62%);
  z-index:-1;
  pointer-events:none;
  animation:logoGlowPulse 5.5s ease-in-out infinite;
}
@keyframes logoGlowPulse{
  0%,100%{ opacity:0.45; transform:translate(-50%,-50%) scale(0.92); }
  50%    { opacity:1;    transform:translate(-50%,-50%) scale(1.06); }
}

/* ---- Cursor spotlight inside cards (Huly-style) ---- */
/* JS sets --sx / --sy as the cursor position within the card. */
.service-card, .work-card, .site-card{
  --sx:50%; --sy:50%;
}
.service-card::before, .work-card::before, .site-card::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(220px circle at var(--sx) var(--sy),
            rgba(63,217,224,0.12) 0%, rgba(63,217,224,0) 60%);
  opacity:0;
  transition:opacity 300ms ease;
  pointer-events:none;
  z-index:1;
}
.service-card.spotlight-on::before,
.work-card.spotlight-on::before,
.site-card.spotlight-on::before{ opacity:1; }
/* keep card content above the spotlight layer */
.service-card > *, .site-card > *{ position:relative; z-index:2; }
.work-card .work-meta{ z-index:2; }

/* ---- Premium portfolio wall: sheen sweep on hover ---- */
.work-card .work-sheen{
  content:'';
  position:absolute; top:0; left:-60%;
  width:50%; height:100%;
  background:linear-gradient(100deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.07) 50%,
            rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  z-index:3;
  transition:left 0s;
}
.work-card:hover .work-sheen{
  left:130%;
  transition:left 850ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* slightly stronger glow + lift on the portfolio wall */
.work-card:hover{
  box-shadow:0 26px 60px -22px var(--teal-glow), 0 0 0 1px rgba(63,217,224,0.4) inset;
}
/* meta lifts a touch on hover for a gallery feel */
.work-card .work-meta{ transition:transform 350ms cubic-bezier(0.2,0.7,0.3,1); }
.work-card:hover .work-meta{ transform:translateY(-4px); }

/* ---- Magnetic CTA buttons ---- */
.btn-magnetic{
  will-change:transform;
  transition:transform 250ms cubic-bezier(0.2, 0.7, 0.3, 1),
             box-shadow var(--t), background var(--t), filter var(--t);
}

/* =======================================================
   WEBSITE-FIRST REBUILD ADDITIONS
   ======================================================= */

/* ---- Hero: larger brand logo, balanced against the headline ---- */
.hero .hero-mark-brand img{
  width:clamp(150px, 19vw, 235px);
  max-width:62vw;
}
.hero-mark-brand{ margin-bottom:20px; position:relative; }
@media (min-width:768px){ .hero-mark-brand{ margin-bottom:26px; } }
.hero-mark-brand::before{
  content:'';
  position:absolute; left:50%; top:50%;
  width:150%; height:150%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(63,217,224,0.20) 0%, rgba(63,217,224,0) 62%);
  z-index:-1; pointer-events:none;
  animation:logoGlowPulse 5.5s ease-in-out infinite;
}

/* ---- Hero: floating website mockup cards (all breakpoints) ---- */
/* Mobile: two mocks peek from opposite corners. Tablet+: all three. Desktop+: larger.
   Outer .hero-mock handles position, entrance fade, and JS mouse parallax.
   Inner .hero-mock-inner handles the looping float and the visual frame. */
.hero-mocks{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; display:block; }

.hero-mock{
  position:absolute;
  display:block;
  pointer-events:none;
  opacity:0;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.hero-mock-inner{
  display:block;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(63,217,224,0.22);
  background:#06080B;
  box-shadow:
    0 40px 80px -28px rgba(0,0,0,0.92),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 60px -14px var(--teal-glow);
  will-change: transform;
}
.hero-mock-bar{
  display:flex; align-items:center; gap:5px;
  padding:7px 10px; background:#0C0F14; border-bottom:1px solid var(--smoke);
}
.hero-mock-bar i{ width:7px; height:7px; border-radius:50%; background:var(--steel); display:block; }
.hero-mock img{ width:100%; display:block; }

/* Mobile base: only mock-1 (top-left peek) and mock-5 (bottom-right peek).
   Others hidden to keep the small viewport uncluttered. */
.hero-mock-1{ top:3%; left:-16%; animation: mockFadeIn1 1.4s cubic-bezier(.2,.7,.2,1) 200ms forwards; }
.hero-mock-1 .hero-mock-inner{ width:180px; animation: mockFloatA 14s ease-in-out infinite; }

.hero-mock-5{ bottom:14%; right:-18%; animation: mockFadeIn1 1.4s cubic-bezier(.2,.7,.2,1) 400ms forwards; }
.hero-mock-5 .hero-mock-inner{ width:200px; animation: mockFloatB 17s ease-in-out -4s infinite; }

.hero-mock-2, .hero-mock-3, .hero-mock-4, .hero-mock-6, .hero-mock-7, .hero-mock-8{ display:none; }

/* Tablet: 5 mocks (4 corners + Blackridge mid-left small). */
@media (min-width:768px){
  .hero-mock-1{ top:6%; left:-6%; }
  .hero-mock-1 .hero-mock-inner{ width:230px; }

  .hero-mock-2{ display:block; top:5%; right:-5%; animation: mockFadeIn2 1.4s cubic-bezier(.2,.7,.2,1) 550ms forwards; }
  .hero-mock-2 .hero-mock-inner{ width:210px; animation: mockFloatB 17s ease-in-out -3s infinite; }

  .hero-mock-3{ display:block; bottom:12%; left:-2%; animation: mockFadeIn2 1.4s cubic-bezier(.2,.7,.2,1) 700ms forwards; }
  .hero-mock-3 .hero-mock-inner{ width:190px; animation: mockFloatA 15s ease-in-out -7s infinite; }

  .hero-mock-5{ bottom:8%; right:-5%; }
  .hero-mock-5 .hero-mock-inner{ width:245px; }

  .hero-mock-6{ display:block; top:40%; left:-8%; animation: mockFadeIn3 1.4s cubic-bezier(.2,.7,.2,1) 900ms forwards; }
  .hero-mock-6 .hero-mock-inner{ width:160px; animation: mockFloatA 16s ease-in-out -11s infinite; }
}

/* Desktop: all 8 visible, staged at true edges plus interior peeks. */
@media (min-width:1200px){
  .hero-mock-1{ top:12%; left:-1%; }
  .hero-mock-1 .hero-mock-inner{ width:300px; }

  .hero-mock-2{ top:5%; right:-2%; }
  .hero-mock-2 .hero-mock-inner{ width:260px; }

  .hero-mock-3{ bottom:18%; left:-3%; }
  .hero-mock-3 .hero-mock-inner{ width:215px; }

  .hero-mock-4{ display:block; top:46%; right:-5%; animation: mockFadeIn3 1.4s cubic-bezier(.2,.7,.2,1) 850ms forwards; }
  .hero-mock-4 .hero-mock-inner{ width:190px; animation: mockFloatC 19s ease-in-out -10s infinite; }

  .hero-mock-5{ bottom:6%; right:-1%; }
  .hero-mock-5 .hero-mock-inner{ width:320px; }

  .hero-mock-6{ top:36%; left:-8%; }
  .hero-mock-6 .hero-mock-inner{ width:175px; }

  .hero-mock-7{ display:block; top:-4%; left:26%; animation: mockFadeIn3 1.4s cubic-bezier(.2,.7,.2,1) 1000ms forwards; }
  .hero-mock-7 .hero-mock-inner{ width:150px; animation: mockFloatB 18s ease-in-out -13s infinite; }

  .hero-mock-8{ display:block; bottom:-3%; right:28%; animation: mockFadeIn3 1.4s cubic-bezier(.2,.7,.2,1) 1150ms forwards; }
  .hero-mock-8 .hero-mock-inner{ width:160px; animation: mockFloatA 20s ease-in-out -15s infinite; }
}

/* Wide screens: larger still. */
@media (min-width:1500px){
  .hero-mock-1{ left:3%; }
  .hero-mock-1 .hero-mock-inner{ width:320px; }
  .hero-mock-2{ right:2%; }
  .hero-mock-2 .hero-mock-inner{ width:280px; }
  .hero-mock-3{ left:2%; }
  .hero-mock-3 .hero-mock-inner{ width:235px; }
  .hero-mock-4{ right:0%; }
  .hero-mock-4 .hero-mock-inner{ width:205px; }
  .hero-mock-5{ right:2%; }
  .hero-mock-5 .hero-mock-inner{ width:340px; }
  .hero-mock-6{ left:-4%; }
  .hero-mock-6 .hero-mock-inner{ width:190px; }
  .hero-mock-7 .hero-mock-inner{ width:160px; }
  .hero-mock-8 .hero-mock-inner{ width:170px; }
}

@keyframes mockFadeIn1 { from { opacity:0; } to { opacity:0.58; } }
@keyframes mockFadeIn2 { from { opacity:0; } to { opacity:0.50; } }
@keyframes mockFadeIn3 { from { opacity:0; } to { opacity:0.38; } }

@keyframes mockFloatA{
  0%,100%{ transform: rotate(-7deg)   translate3d(0,0,0)        scale(1); }
  50%    { transform: rotate(-6.2deg) translate3d(2px,-22px,0)  scale(1.012); }
}
@keyframes mockFloatB{
  0%,100%{ transform: rotate(6deg)   translate3d(0,0,0)         scale(1); }
  50%    { transform: rotate(5.2deg) translate3d(-3px,-26px,0)  scale(1.015); }
}
@keyframes mockFloatC{
  0%,100%{ transform: rotate(5deg)   translate3d(0,0,0)         scale(1); }
  50%    { transform: rotate(5.6deg) translate3d(2px,-16px,0)   scale(0.99); }
}

/* ---- Featured website builds (browser-mockup cards) ---- */
.builds-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:680px){ .builds-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .builds-grid{ grid-template-columns:repeat(3,1fr); } }

.build-card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--coal) 0%, #0A0D12 100%);
  border:1px solid var(--smoke);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
}
.build-card:hover{
  transform:translateY(-4px);
  border-color:rgba(63,217,224,0.5);
  box-shadow:0 30px 70px -28px var(--teal-glow);
}
.build-frame{ display:block; background:#06080B; }
.build-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:linear-gradient(180deg, #11151B, #0C0F14);
  border-bottom:1px solid var(--smoke);
}
.build-dots{ display:inline-flex; gap:6px; flex-shrink:0; }
.build-dots i{ width:9px; height:9px; border-radius:50%; background:var(--steel); display:block; }
.build-addr{
  flex:1; min-width:0;
  font-family:'SF Mono', Menlo, monospace;
  font-size:11px; color:var(--silver-mid);
  background:#06080B; border:1px solid var(--smoke); border-radius:6px;
  padding:5px 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.build-shot{ display:block; aspect-ratio:16/10; overflow:hidden; background:#020306; }
.build-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform 600ms ease; }
.build-card:hover .build-shot img{ transform:scale(1.04); }
.build-meta{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1; }
.build-tag{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--teal); font-weight:700; margin:0; }
.build-name{ font-family:'Fraunces',serif; font-weight:600; font-size:20px; color:var(--bone); margin:0; }
.build-desc{ font-size:14px; color:var(--silver); line-height:1.55; margin:0 0 4px; }
.build-meta .btn{ margin-top:auto; align-self:flex-start; }

.builds-more-label{
  text-align:center; margin:48px 0 22px;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--silver-mid); font-weight:700;
}

/* ---- Website build price card ---- */
.price-card{
  max-width:920px; margin:0 auto;
  display:grid; gap:0; grid-template-columns:1fr;
  background:linear-gradient(180deg, var(--coal) 0%, #070B10 100%);
  border:1px solid rgba(63,217,224,0.4);
  border-radius:var(--radius-lg);
  box-shadow:0 0 0 1px rgba(63,217,224,0.16), 0 30px 70px -30px var(--teal-glow);
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t);
}
.price-card:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(63,217,224,0.3), 0 36px 80px -28px var(--teal-glow);
}
@media (min-width:760px){ .price-card{ grid-template-columns:1.05fr 1fr; } }
.price-lead{ padding:34px 30px; }
@media (min-width:760px){ .price-lead{ padding:44px 40px; } }
.price-figure{
  font-family:'Fraunces',serif; font-weight:700;
  font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; color:var(--bone);
  margin:6px 0 0;
}
.price-from{
  display:block; font-family:'Inter',sans-serif;
  font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--silver-mid); margin-bottom:6px; line-height:1;
}
.price-desc{ color:var(--silver); font-size:15px; line-height:1.6; margin:18px 0 24px; }
.price-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:520px){ .price-ctas .btn{ width:100%; } }
.price-includes{
  padding:34px 30px;
  background:rgba(255,255,255,0.015);
  border-top:1px solid var(--smoke);
}
@media (min-width:760px){
  .price-includes{ padding:44px 40px; border-top:0; border-left:1px solid var(--smoke); }
}
.price-includes-title{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal); font-weight:700; margin:0 0 16px;
}
.price-includes .card-list{ margin:0; font-size:14.5px; }

.price-note{
  max-width:780px; margin:24px auto 0; text-align:center;
  font-size:13px; line-height:1.6; color:var(--silver-mid);
}

/* ---- Monthly care plans ---- */
.care-head{ text-align:center; max-width:720px; margin:72px auto 48px; }
.care-head .eyebrow{ justify-content:center; display:inline-flex; }
.care-title{ margin-top:6px; }
.care-grid{ display:grid; gap:20px; grid-template-columns:1fr; align-items:start; }
@media (min-width:760px){ .care-grid{ grid-template-columns:repeat(3,1fr); } }
.care-price{
  font-family:'Fraunces',serif; font-weight:700;
  font-size:40px; line-height:1; color:var(--bone); margin:0 0 8px;
}
.care-best{
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic;
  font-size:1.02rem; color:var(--silver); margin:0 0 18px; line-height:1.4;
}
.care-card .card-list{ margin-bottom:24px; }

/* ---- Process: AI-assisted workflow note ---- */
.process-note{
  max-width:820px; margin:28px auto 0;
  background:var(--coal); border:1px solid var(--smoke);
  border-left:3px solid var(--teal);
  border-radius:var(--radius);
  padding:22px 26px;
  font-size:14.5px; line-height:1.65; color:var(--silver);
}
.process-note strong{
  display:block; margin-bottom:6px;
  color:var(--bone); font-weight:700;
  font-family:'Fraunces',serif; font-size:16px; letter-spacing:0.01em;
}

/* =======================================================
   SECTION MARK (ISM logo as inline left-of-title bullet)
   ======================================================= */
/* Small ISM logo mark sits inline to the LEFT of each section H2 / H3 */
.section-head .display-2::before,
.care-head .care-title::before,
.who-head .display-2::before,
.about-body .display-2::before,
.quote-inner .display-2::before,
.cta-inner .display-1::before,
.contact-info .display-2::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  background: url('assets/logo-mark.png') center / contain no-repeat;
  filter: drop-shadow(0 4px 14px rgba(63, 217, 224, 0.28));
  vertical-align: -0.1em;
  margin-right: 0.42em;
  transform: translateY(0);
}

/* Card-list bullet swap: use the ISM logo mark instead of the ">" chevron */
.card-list li {
  position: relative;
  padding-left: 26px;
  list-style: none;
}
.card-list li::before {
  content: '' !important;
  position: absolute;
  left: 0; top: 0.35em;
  width: 16px; height: 16px;
  background: url('assets/logo-mark.png') center / contain no-repeat !important;
  filter: drop-shadow(0 2px 6px rgba(63, 217, 224, 0.35));
  color: transparent !important;
  font-size: 0 !important;
  transform: none !important;
}
@media (max-width: 640px) {
  .card-list li { padding-left: 22px; }
  .card-list li::before { width: 13px; height: 13px; top: 0.4em; }
}

/* Hide the text eyebrow (still readable for screen readers + search engines) */
.section-head > .eyebrow,
.care-head > .eyebrow,
.who-head > .eyebrow,
.about-body > .eyebrow,
.quote-inner > .eyebrow,
.cta-inner > .eyebrow,
.contact-info > .eyebrow {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
}

/* Hero tagline stays visible (it's info content, not a decorative label) */
.hero-tagline {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  padding: initial !important;
  margin: initial !important;
  border: initial !important;
}

/* Smaller mark on tighter mobile layouts */
@media (max-width: 640px) {
  .section-head::before,
  .price-lead::before,
  .care-head::before,
  .who-head::before,
  .about-body::before,
  .quote-inner::before,
  .cta-inner::before,
  .contact-info::before {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
  }
}

/* =======================================================
   FAQ (Frequently Asked)
   ======================================================= */
.faq-list{
  max-width:820px; margin:0 auto;
  display:flex; flex-direction:column; gap:12px;
}
.faq-item{
  background:var(--coal); border:1px solid var(--smoke);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.faq-item[open]{
  border-color:rgba(63,217,224,0.35);
  box-shadow:0 12px 40px -20px var(--teal-glow);
}
.faq-item summary{
  list-style:none; cursor:pointer;
  padding:22px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:var(--bone);
  font-family:'Fraunces',serif; font-weight:600; letter-spacing:0.005em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-q{ font-size:17px; line-height:1.4; }
.faq-plus{
  flex:0 0 auto;
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--smoke);
  color:var(--teal); font-size:18px; font-weight:600; line-height:1;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.faq-item[open] .faq-plus{
  transform:rotate(45deg);
  background:rgba(63,217,224,0.08);
  border-color:var(--teal-lo);
}
.faq-item summary:hover .faq-plus{ border-color:var(--teal-lo); }
.faq-a{
  padding:0 24px 22px;
  color:var(--silver);
  font-size:15.5px; line-height:1.7;
}
.faq-a p{ margin:0; }
.faq-a strong{ color:var(--bone); }
.faq-cta{
  max-width:820px; margin:32px auto 0; text-align:center;
  color:var(--silver); font-size:15px;
}
@media (max-width: 640px){
  .faq-item summary{ padding:18px 18px; gap:12px; }
  .faq-q{ font-size:16px; }
  .faq-a{ padding:0 18px 18px; font-size:15px; }
}

/* Contact section · service area block */
.contact-area{
  margin-top:22px;
  padding:16px 18px;
  background:var(--coal); border:1px solid var(--smoke);
  border-left:3px solid var(--teal);
  border-radius:var(--radius);
  color:var(--silver);
  font-size:14.5px; line-height:1.6;
}
.contact-area strong{ color:var(--bone); }

/* =======================================================
   DEPTH + DETAIL PASS (Huly + Apple inspired)
   ======================================================= */

/* Section transitions · subtle teal gradient hairline where two dark sections meet */
.section-dark + .section-darker,
.section-darker + .section-dark {
  position: relative;
}
.section-dark + .section-darker::before,
.section-darker + .section-dark::before {
  content: '';
  position: absolute;
  left: 50%; top: -1px;
  width: min(560px, 60vw); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(63,217,224,0.32), transparent);
  pointer-events: none;
}

/* Deeper section-head presence with richer typography */
.section-head {
  padding-top: 8px;
}
.section-head .display-2 {
  letter-spacing: -0.014em;
}

/* Deeper build card shadow + inner glow on hover */
.build-card {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #0F131A 0%, #0A0E13 100%);
  box-shadow:
    0 24px 60px -32px rgba(0,0,0,0.85),
    0 2px 0 rgba(255,255,255,0.03) inset,
    0 0 0 1px rgba(63,217,224,0.02);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.build-card:hover {
  border-color: rgba(63,217,224,0.22);
  box-shadow:
    0 40px 80px -32px rgba(0,0,0,0.9),
    0 0 0 1px rgba(63,217,224,0.20),
    0 0 60px -12px rgba(63,217,224,0.18);
}

/* Deeper service card presence */
.service-card {
  border: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(180deg, rgba(20,26,34,0.7), rgba(10,14,20,0.9));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 20px 50px -28px rgba(0,0,0,0.75),
    0 1px 0 rgba(255,255,255,0.04) inset;
}
.service-card.service-featured {
  border-color: rgba(63,217,224,0.28);
  box-shadow:
    0 24px 60px -24px rgba(0,0,0,0.85),
    0 0 0 1px rgba(63,217,224,0.20),
    0 0 80px -20px rgba(63,217,224,0.22);
}

/* Price card · richer glass depth */
.price-card {
  border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(63,217,224,0.06), transparent 60%),
    linear-gradient(180deg, rgba(20,26,34,0.75), rgba(10,14,20,0.95));
  backdrop-filter: blur(10px);
  box-shadow:
    0 30px 80px -32px rgba(0,0,0,0.85),
    0 0 0 1px rgba(63,217,224,0.05),
    0 1px 0 rgba(255,255,255,0.05) inset;
}
.price-card:hover {
  box-shadow:
    0 40px 100px -32px rgba(0,0,0,0.9),
    0 0 0 1px rgba(63,217,224,0.18),
    0 0 100px -24px rgba(63,217,224,0.20),
    0 1px 0 rgba(255,255,255,0.07) inset;
}

/* Care cards · subtle glass */
.care-card {
  border: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(180deg, rgba(20,26,34,0.65), rgba(10,14,20,0.85));
  backdrop-filter: blur(6px);
}
.care-card.service-featured {
  border-color: rgba(63,217,224,0.28);
  transform: translateY(-4px);
}

/* Trust bar upgrade · bento-style tiles */
.trust-bar {
  position: relative;
}
.trust-bar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63,217,224,0.18), transparent);
  pointer-events: none;
}
.proof-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px !important;
  padding: 0 !important;
}
.proof-row li {
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(20,26,34,0.6), rgba(10,14,20,0.85)) !important;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  color: var(--bone) !important;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
  list-style: none !important;
}
.proof-row li::before {
  display: none !important;
}
.proof-row li:hover {
  border-color: rgba(63,217,224,0.28);
  transform: translateY(-2px);
}
@media (max-width: 720px) {
  .proof-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Process list · connector line between numbered steps */
.process-list {
  position: relative;
}
.process-list li {
  position: relative;
}

/* Who this is for · richer checkmark rows */
.who-list li {
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(20,26,34,0.55), rgba(10,14,20,0.75));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: border-color .25s ease, transform .2s ease;
}
.who-list li:hover {
  border-color: rgba(63,217,224,0.24);
  transform: translateX(3px);
}
.who-check {
  color: var(--teal) !important;
  font-weight: 700;
  margin-right: 10px;
}

/* Hero: bigger, cleaner headline */
.hero .display-1 {
  letter-spacing: -0.02em;
  text-shadow: 0 1px 30px rgba(0,0,0,0.35);
}

/* Testimonial section (uses .results-* structure, upgraded) */
.testimonial {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 40px 44px;
  border-radius: 20px;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(63,217,224,0.10), transparent 60%),
    linear-gradient(180deg, rgba(20,26,34,0.75), rgba(10,14,20,0.95));
  border: 1px solid rgba(63,217,224,0.18);
  box-shadow:
    0 30px 80px -32px rgba(0,0,0,0.85),
    0 0 100px -30px rgba(63,217,224,0.14);
  text-align: center;
  position: relative;
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: -8px; left: 32px;
  font-family: 'Fraunces', serif;
  font-size: 96px; line-height: 1;
  color: rgba(63,217,224,0.35);
  font-weight: 700;
}
.testimonial-stars {
  color: var(--teal);
  font-size: 18px; letter-spacing: 4px;
  margin-bottom: 14px;
}
.testimonial-quote {
  font-family: 'Fraunces', serif;
  font-size: 22px; line-height: 1.5;
  color: var(--bone);
  font-weight: 500;
  margin: 0 0 20px;
  font-style: italic;
}
.testimonial-attr {
  font-family: 'Inter', sans-serif;
  font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}
.testimonial-attr strong {
  color: var(--bone);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.testimonial-attr .dot {
  color: var(--teal);
  margin: 0 10px;
}
@media (max-width: 640px) {
  .testimonial { padding: 30px 22px; margin-top: 30px; }
  .testimonial-quote { font-size: 18px; }
  .testimonial::before { font-size: 72px; top: -4px; left: 18px; }
}

/* =======================================================
   MAJOR MAKEOVER v2 (Huly + Apple layer)
   ======================================================= */


/* ---- Hero overhaul ---- */


/* Hero: bigger, gradient-swept "Business Look Sharp" */
.text-steel {
  background: linear-gradient(120deg, #A5F3F7 0%, #6EE7EE 20%, #3FD9E0 50%, #6EE7EE 80%, #A5F3F7 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: text-sweep 6.5s linear infinite;
  filter: drop-shadow(0 4px 20px rgba(63, 217, 224, 0.35));
}
@keyframes text-sweep {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Hero stat row */
.hero-stats {
  display: flex; justify-content: center; gap: clamp(24px, 5vw, 60px);
  margin: 44px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 780px;
  flex-wrap: wrap;
}
.hero-stat {
  text-align: center;
  min-width: 110px;
}
.hero-stat-num {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  background: linear-gradient(180deg, #A5F3F7 0%, #3FD9E0 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 10px;
  font-weight: 500;
}
@media (max-width: 640px) {
  .hero-stats { gap: 16px; padding-top: 24px; margin-top: 30px; }
  .hero-stat { min-width: 90px; }
  .hero-stat-label { font-size: 9.5px; letter-spacing: 0.22em; }
}

/* Hero: bigger primary logo mark presence with animated rings */
.hero-mark-brand {
  position: relative;
}
.hero-mark-brand::before,
.hero-mark-brand::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  border: 1px solid rgba(63, 217, 224, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ring-pulse 5s ease-in-out infinite;
  pointer-events: none;
}
.hero-mark-brand::before {
  width: 320px; height: 320px;
  animation-delay: 0s;
}
.hero-mark-brand::after {
  width: 480px; height: 480px;
  animation-delay: 1.4s;
  border-color: rgba(63, 217, 224, 0.09);
}
@keyframes ring-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.35; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 0.7; }
}
@media (max-width: 640px) {
  .hero-mark-brand::before { width: 200px; height: 200px; }
  .hero-mark-brand::after  { width: 300px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark-brand::before, .hero-mark-brand::after { animation: none; opacity: 0.3; }
  .text-steel { animation: none; }
}

/* Hero: refined CTA glow */
.btn.btn-primary {
  position: relative;
  box-shadow:
    0 12px 32px -12px rgba(63, 217, 224, 0.55),
    0 1px 0 rgba(255,255,255,0.35) inset;
}
.btn.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 40px 4px rgba(63, 217, 224, 0.35);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.btn.btn-primary:hover::after { opacity: 1; }

/* ---- Section headers upgrade ---- */
.section-head {
  padding-top: 8px;
  max-width: 820px !important;
}
.section-head .display-2 + .section-sub {
  margin-top: 24px;
  font-size: 1.18rem;
  color: var(--silver);
  max-width: 640px;
  margin-left: auto; margin-right: auto;
  line-height: 1.55;
}

/* ---- Nav polish ---- */
#nav {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(5, 6, 8, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav-inner .brand-word {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Card lift on scroll · subtle parallax feel */
.build-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
.build-card:hover { transform: translateY(-6px); }
.site-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s ease; }
.site-card:hover { transform: translateY(-4px); }

/* Section transitions · brighter gradient */
.section-dark + .section-darker::before,
.section-darker + .section-dark::before {
  width: min(720px, 65vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63,217,224,0.42), transparent);
}
.section-dark + .section-darker::after,
.section-darker + .section-dark::after {
  content: '';
  position: absolute;
  left: 50%; top: 4px;
  width: 8px; height: 8px;
  transform: translateX(-50%);
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 24px 4px rgba(63, 217, 224, 0.6);
  opacity: 0.85;
  pointer-events: none;
}


/* =======================================================
   RESPONSIVE POLISH (v3) · tighten every viewport
   ======================================================= */

/* ---- Nav: prevent wordmark from wrapping at tight desktop widths ---- */
.nav-inner {
  gap: 12px;
  padding: 0 var(--gut);
}
@media (min-width: 980px) and (max-width: 1180px) {
  .nav-links { gap: 18px; }
  .brand-word { font-size: 15px; letter-spacing: 0.05em; }
  .nav-cta { padding: 10px 14px; font-size: 12px; }
}
@media (min-width: 1180px) {
  .nav-links { gap: 24px; }
}
.brand-word {
  white-space: nowrap;   /* never wrap the wordmark */
}

/* ---- Hero mocks on mobile: push further off-screen so they don't touch copy ---- */
@media (max-width: 767px) {
  .hero-mock-1 { top: 2% !important; left: -30% !important; }
  .hero-mock-1 .hero-mock-inner { width: 160px !important; }
  .hero-mock-5 { bottom: 8% !important; right: -32% !important; }
  .hero-mock-5 .hero-mock-inner { width: 180px !important; }
}

/* ---- Section padding: tighter top on mobile so headings don't float alone ---- */
@media (max-width: 767px) {
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 32px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .section { padding: 96px 0; }
}

/* ---- Section head max-width smaller on mobile so heading + logo bullet balance ---- */
@media (max-width: 640px) {
  .section-head { padding: 0 4px; }
  .section-head .display-2::before,
  .care-head .care-title::before,
  .who-head .display-2::before,
  .about-body .display-2::before,
  .quote-inner .display-2::before,
  .cta-inner .display-1::before,
  .contact-info .display-2::before {
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.32em;
  }
}

/* ---- Testimonial attribution: keep name + brand together on one line if possible ---- */
.testimonial-attr {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.4;
}
.testimonial-attr .dot {
  margin: 0 !important;
}
@media (max-width: 480px) {
  .testimonial-attr { gap: 6px; font-size: 11.5px; }
  .testimonial-attr strong { font-size: 12.5px; }
}

/* ---- Hero stats row on tablet: tighten gaps ---- */
@media (min-width: 641px) and (max-width: 900px) {
  .hero-stats { gap: 20px; }
  .hero-stat { min-width: 90px; }
}

/* ---- Hero H1: prevent single-word orphan lines on mid widths ---- */
.hero .display-1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .hero .display-1 { max-width: 22ch; } }
@media (min-width: 1280px) { .hero .display-1 { max-width: 26ch; } }

/* ---- Contact grid: stack cleanly on tablet portrait ---- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
}

/* ---- Care cards + services grid: 1 column on mobile, 2 on tablet, 3 on desktop ---- */
.care-grid, .services-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) and (max-width: 979px) {
  .care-grid, .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card.service-featured { grid-column: 1 / -1; }  /* flagship spans full row on tablet */
}
@media (min-width: 980px) {
  .care-grid, .services-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ---- Builds grid: 1 col mobile, 2 col tablet, 3 col desktop ---- */
.builds-grid, .sites-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .builds-grid { grid-template-columns: repeat(2, 1fr); }
  .sites-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .builds-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .sites-grid  { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Absolute nothing overflows horizontally ---- */
html, body { overflow-x: hidden; }
.container { max-width: 100%; }
@media (min-width: 640px)  { .container { max-width: min(var(--max), calc(100% - 32px)); } }

/* ---- Mobile menu: increase tap target ---- */
@media (max-width: 979px) {
  .mobile-menu a { padding: 14px 0; font-size: 16px; }
}

/* ---- Focus rings visible everywhere (iPad Safari + keyboard on Mac) ---- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =======================================================
   ACCESSIBILITY
   ======================================================= */
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .marquee-track{ animation:none; }
  .hero-mark img{ animation:none; }
  .hero-orbs, .hero-mark-lead::before{ animation:none; }
  .hero-mock, .hero-mark-brand::before{ animation:none; }
  .tilt{ transform:none !important; }
  .scroll-progress{ display:none; }
  .work-card .work-sheen{ display:none; }
}