/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/dfb4a1e0-b12b-419c-b724-a7f8bbaefccd.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/da7fdb2c-98ce-4312-b872-e703a10e25a6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/2fce04b4-49b9-4d7c-ab99-a90b5bd1558a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/31261e84-cce3-4f0b-8041-a5449bc62974.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/61f6018d-4ec8-45a6-ba0f-efc5a7a5af6e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/022f1f3a-7270-4605-909f-f629f6607ca1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/c288bd94-7cc9-42ed-a082-464325200d7b.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/894fd62b-8a8c-4b86-8099-b29073109f93.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/a576067e-db20-4a53-953e-ab6610a2d450.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/63d3494a-d1fc-4e70-9c50-413ac560d220.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/47603304-94ec-4ced-9855-7fa9a0d6846e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/a454f0c6-f08f-42c4-ba07-19dd04c9b528.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/a159fb72-490b-4ead-bc64-c0e47822e3c8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/022f1d63-ab73-44fa-8638-37f9811deb2d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/bce6391c-9887-4466-88ed-f253403b5e8d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/8a12af7c-5fd9-430d-a399-2997faa82de7.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/8b7945e9-d14a-40cf-873b-4b19391b9f28.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/ba3661dd-87fc-432d-8c37-1499adc53aa6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/7ee39bc6-2df5-4965-a7c0-bf49fd6c2d50.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---- */


/* Fonts via Google Fonts CDN (was bundled woff2 blobs) */


/* ---- */


  :root{
    /* base palette — warm near-black, candlelit room at night */
    --bg-0: #0f0e0b;         /* deepest, warm */
    --bg-1: #16140f;
    --bg-2: #1d1a14;
    --bg-3: #26221c;
    --bg-glass: rgba(29,26,20,.72);

    /* warm sepia tones for the trellis lattice (architect's graphite on aged paper) */
    --lath-tone:   #6b5a3b;
    --lath-tone-2: #8a7349;
    --lath-tone-3: #b09565;

    /* warm honey-amber for editorial accents (NOT for the vine) */
    --warm-100: #f7e2b0;
    --warm-200: #f0c870;
    --warm-300: #d4a23c;
    --warm-400: #a87b1f;
    --warm-glow: rgba(212,162,60,.30);
    --warm-soft: rgba(212,162,60,.10);

    --line: rgba(255,255,255,.07);
    --line-2: rgba(255,255,255,.12);
    --line-3: rgba(255,255,255,.2);

    --fg-0: #f5f7f5;
    --fg-1: #e6ebe7;
    --fg-2: #a8b3ad;
    --fg-3: #7a847b;
    --fg-4: #434d47;

    /* emerald system — controlled, not neon */
    --em-50:  #e6f6ef;
    --em-100: #b6e6ce;
    --em-200: #7fd3ae;
    --em-300: #3dbf8c;
    --em-400: #13a673;
    --em-500: #0a8a5f;
    --em-600: #0a6f4d;
    --em-700: #0b543c;
    --em-800: #0d3d2d;

    --accent: var(--em-300);
    --accent-soft: rgba(61,191,140,.14);
    --accent-glow: rgba(61,191,140,.28);
    --accent-2: #7fd3ae;

    --sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --serif: 'Fraunces', 'Times New Roman', serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;

    --ease: cubic-bezier(.2,.8,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);

    --rad-sm: 6px;
    --rad:    10px;
    --rad-lg: 18px;
  }

  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-padding-top:80px;overflow-x:hidden}.logos,.why,.services,.process,.proof,.team,.cta{content-visibility:auto;contain-intrinsic-size:auto 600px;contain:content}
  body{
    background:var(--bg-0);
    color:var(--fg-1);
    font-family:var(--sans);
    font-size:16px;line-height:1.55;
    overflow-x:hidden;
    font-feature-settings:"ss01","cv11";
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
  img,svg{display:block;max-width:100%}
  ::selection{background:var(--accent);color:var(--bg-0)}

  /* subtle grain */
  body.grain::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
    opacity:.035;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* global soft ambient light — warm candlelit wash */
  body::before{
    content:"";position:fixed;inset:-20% -20% auto -20%;height:80vh;z-index:0;
    pointer-events:none;
    background:
      radial-gradient(60% 60% at 50% 0%, rgba(212,162,60,.08), transparent 70%),
      radial-gradient(45% 55% at 85% 10%, rgba(160,110,40,.07), transparent 70%);
    filter:blur(8px);
  }

  .wrap{max-width:1280px;margin:0 auto;padding:0 32px}
  .wrap-lg{max-width:1440px;margin:0 auto;padding:0 32px}
  .wrap-sm{max-width:960px;margin:0 auto;padding:0 32px}

  /* ============ NAV ============ */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    padding:14px 0;
    transition:background .15s ease, border-color .15s ease;
    border-bottom:1px solid transparent;
  }
  .nav.stuck{
    padding:10px 0;background:var(--bg-glass);
    ;
    -webkit-;
    border-color:var(--line);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;letter-spacing:-.01em}
  .logo-mark{width:22px;height:22px;position:relative}
  .logo-mark svg{width:100%;height:100%}
  .nav-links{display:flex;gap:32px;align-items:center}
  .nav-links a{font-size:13.5px;color:var(--fg-2);transition:color .2s;letter-spacing:.005em}
  .nav-links a:hover{color:var(--fg-0)}
  .nav-cta{
    font-size:13px;font-weight:500;
    padding:9px 18px;border-radius:999px;
    background:var(--fg-0);color:var(--bg-0);
    transition:transform .25s var(--ease), background .25s;
  }
  .nav-cta:hover{transform:translateY(-1px);background:#fff}

  /* ============ HERO ============ */
  .hero{
    position:relative;min-height:100vh;
    padding:120px 0 60px;    display:flex;flex-direction:column;justify-content:flex-end;
    overflow:hidden;
    isolation:isolate;
  }
  .hero::before{
    /* soft center glow */
    content:"";position:absolute;inset:auto 0 -10% 0;height:70%;z-index:-1;
    background:
      radial-gradient(60% 80% at 50% 100%, rgba(61,191,140,.14), transparent 70%),
      radial-gradient(100% 60% at 50% 100%, rgba(10,111,77,.22), transparent 70%);
  }
  /* grid paper */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:-1;opacity:.45;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:80px 80px;
    mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 80%);
  }

  /* warm lamp: soft amber pool of light suggesting a candle/lamp in the room.
     Sits behind vine + headline; carries the atmospheric mood. */
  .lamp{
    position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  }
  .lamp::before{
    content:"";position:absolute;
    left:-12%;top:30%;width:68%;height:80%;
    background:
      radial-gradient(closest-side, rgba(212,162,60,.22) 0%, rgba(212,162,60,.07) 38%, transparent 72%),
      radial-gradient(closest-side at 38% 42%, rgba(247,193,90,.12) 0%, transparent 60%);
    filter:blur(4px);
    transform:translateY(-22%);
  }
  .lamp::after{
    content:"";position:absolute;inset:0;
    background:
      /* upper-right warm vignette */
      radial-gradient(40% 50% at 95% 0%, rgba(168,123,32,.10), transparent 75%),
      /* bottom-left warm spill */
      radial-gradient(45% 50% at 8% 95%, rgba(168,123,32,.06), transparent 75%),
      /* cool darkening at top */
      radial-gradient(80% 40% at 50% 0%, rgba(0,0,0,.25), transparent 70%);
    filter:blur(6px);
  }

  /* the vine motif — SVG container, grows upward */
  .vine{
    position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:visible;
  }
  .vine svg{position:absolute;left:50%;bottom:-40px;transform:translate(calc(-50% + var(--vx, 0px)), var(--vy, 0px));width:max(1400px, 120%);height:auto;opacity:.95;;will-change:transform}
  .vine.revealed svg{}
  .firefly{
    position:absolute;width:4px;height:4px;border-radius:50%;
    background:var(--warm-200);
    
    pointer-events:none;opacity:0;
    animation:firefly 8s ease-in-out infinite;
  }
  @keyframes firefly{
    0%,100%{opacity:0;transform:translate(0,0)}
    20%{opacity:.9}
    50%{opacity:.5;transform:translate(var(--dx,30px), var(--dy,-40px))}
    80%{opacity:.9}
  }
  .vine .stem{fill:none;stroke:url(#vineStroke);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}
  /* three weight tiers — primary (tapered in 4 segments), secondary, tertiary */
  .vine .stem-primary-1{stroke-width:8}
  .vine .stem-primary-2{stroke-width:6}
  .vine .stem-primary-3{stroke-width:4}
  .vine .stem-primary-4{stroke-width:2.5}
  .vine .stem-secondary{stroke-width:3.5}
  .vine .stem-tertiary{stroke-width:1.8}
  .vine .stem-coil{stroke-width:1.6;stroke-linejoin:round}
  /* legacy stem classes (back-compat) */
  .vine .stem-primary{stroke-width:5}
  .vine .stem-tendril2{stroke-width:1.5}
  /* leaves: deep botanical with warm edge highlight (candlelight catches the edge) */
  /* Initial state: invisible. Reveal via .revealed class when parent stem reaches the leaf's position. */
  .vine .leaf{
    fill:url(#vineLeaf);
    stroke:#c4a572;stroke-width:.35;stroke-opacity:.5;
    opacity:0;
    transition:opacity .7s cubic-bezier(.16,1,.3,1);
  }
  .vine .leaf.revealed{opacity:.95}
  /* ~20% of leaves catch candlelight more — brighter rim, suggests light from the left */
  .vine .leaf-lit{
    stroke:#f0c870;stroke-width:0.55;stroke-opacity:0.85;
    
  }
  .vine .leaf-floating{opacity:0}
  .vine .leaf-floating.revealed{opacity:.72;stroke-opacity:.35}
  /* tiny seedling bulbs at growing tips — small bright glow, the only "centered light" */
  .vine .seedling{fill:url(#seedlingGlow);opacity:0;transition:opacity .9s ease-out}
  .vine .seedling.revealed{opacity:1}
  .vine .node{display:none}

  /* === ambient motion === */
  /* Lamp pulse — soft scale + opacity swell, simulates a candle's breath */
  @keyframes lampPulse{
    0%, 100%{opacity:.85;transform:scale(1)}
    50%{opacity:1;transform:scale(1.045)}
  }
  .lamp{transform-origin:30% 60%}

  /* === load sequencing: leaves/buds/seedlings start hidden, fade in via .revealed === */
  /* (per-class transitions defined on each base rule) */

  /* === cursor halo: warm 100px amber pool that follows the cursor with lag === */
  .cursor-halo{display:none;
    position:absolute;left:0;top:0;width:100px;height:100px;
    border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(closest-side, rgba(247,193,90,0.16), rgba(212,162,60,0.07) 50%, transparent 78%);
    opacity:0;
    transition:opacity .4s ease;
    transform:translate(-9999px, -9999px);
    
    
  }
  /* leaf transform is set via attribute (with lean composed in via JS); transitions stay on the attribute */
  .vine .leaf{transition:opacity .7s cubic-bezier(.16,1,.3,1)}
  /* "leaf-greet" pulse when "grow" italic is hovered */
  .vine .leaf-greet{animation:leafGreet .7s cubic-bezier(.4,.0,.2,1)}
  @keyframes leafGreet{
    0%, 100%{filter:none}
    50%{filter:drop-shadow(0 0 8px rgba(247,193,90,0.55))}
  }
  /* small amber sparkle particle that drifts up + fades when cursor passes near vine */
  .vine-sparkle{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:radial-gradient(closest-side, #f7e2b0 0%, #d4a23c 40%, transparent 80%);
    pointer-events:none;z-index:2;
    
    opacity:0.95;
    animation:sparkleDrift .8s ease-out forwards;
  }
  @keyframes sparkleDrift{
    0%{transform:translate(0,0) scale(1);opacity:.95}
    100%{transform:translate(var(--sx, 0px), var(--sy, -22px)) scale(.4);opacity:0}
  }

  /* CTA hover: under-glow grows */
  .btn-primary.btn-grown{
    box-shadow:
      0 1px 0 rgba(255,255,255,.5) inset,
      0 0 0 1px rgba(255,255,255,.2) inset,
      0 -10px 22px -10px rgba(212,162,60,.7) inset,
      0 28px 60px -14px rgba(212,162,60,.75),
      0 4px 14px rgba(0,0,0,.4) !important;
  }
  
  

  /* Mouse parallax: 3 layers. Back lattice moves least, mid moves more, leaves move full. */
  .vine .parallax-back{
    transform:translate(calc(var(--vx, 0px) * -0.7), calc(var(--vy, 0px) * -0.7));
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .vine .parallax-mid{
    transform:translate(calc(var(--vx, 0px) * -0.4), calc(var(--vy, 0px) * -0.4));
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  /* Falling leaf cleanup */
  .vine .leaf.falling{
    pointer-events:none;
    animation:leafFall 4.5s cubic-bezier(.45,.05,.55,.95) forwards;
  }
  @keyframes leafFall{
    0%{opacity:.85}
    85%{opacity:.4}
    100%{opacity:0}
  }

  /* === interactive: "grow" italic on hover === */
  .h1 em{
    display:inline-block;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
    transform-origin:center;
    cursor:default;
    padding:0.15em 0.05em;
    margin:-0.15em -0.05em;
  }
  .h1 em:hover{
    transform:scale(1.04);
    filter:drop-shadow(0 0 18px rgba(247,193,90,0.45)) drop-shadow(0 0 32px rgba(212,162,60,0.25));
  }

  /* trellis lattice — warm sepia constructed-slat trellis.
     Two depth layers: back darker, front lighter — overlap reads as depth without per-element filters. */
  .vine .lath{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke:var(--lath-tone)}
  .vine .lattice-back .lath{stroke:var(--lath-tone);stroke-width:3.0;opacity:.13}
  .vine .lattice-front-layer .lath{stroke:var(--lath-tone-3);stroke-width:3.2;opacity:.21}
  .vine .lattice-front .lath{stroke:var(--lath-tone-3);stroke-width:3.0;opacity:.23}
  /* per-wrap dark stripe: slightly wider + darker, drawn beneath each wrap fragment so the
     extra perpendicular width reads as the slat's shadow cast on the vine surface */
  .vine .lath-shadow{
    fill:none;
    stroke:#0a0805;
    stroke-width:5.2;
    stroke-linecap:round;
    opacity:.55;
    vector-effect:non-scaling-stroke;
  }
  /* perimeter frame: heavier rectangular wooden frame around the lattice panel */
  .vine .rail{fill:none;stroke:var(--lath-tone-2);stroke-width:2.6;stroke-linecap:square;opacity:.78;vector-effect:non-scaling-stroke}
  .vine .rail-cross{opacity:.45;stroke-width:1.5}

  /* very faint wood-grain texture overlay on lattice (5-8% opacity) */
  .vine .grain-overlay{opacity:.06}

  /* amber buds — small flower nodes along vine, echo the lamp warmth */
  .vine .bud{fill:var(--warm-300);opacity:0;transition:opacity .6s ease-out}
  .vine .bud.revealed{opacity:.9}
  .vine .bud-outer{fill:var(--warm-300);opacity:0;transition:opacity .6s ease-out}
  .vine .bud-outer.revealed{opacity:.18}

  /* vine origin — small wooden knot + soft warm halo. NOT a button. */
  .vine .vine-origin .origin-node{fill:var(--warm-200);opacity:.85}

  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--warm-200);
    padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;
    background:rgba(168,123,32,.10);
    ;
  }
  .eyebrow .pulse{width:6px;height:6px;border-radius:50%;background:var(--warm-300);box-shadow:0 0 0 4px rgba(212,162,60,.20);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 8px rgba(212,162,60,0)}}

  .h1{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(56px, 9.2vw, 148px);
    line-height:.94;letter-spacing:-.035em;
    color:var(--fg-0);
    margin-top:26px;
    font-variation-settings:"opsz" 144, "SOFT" 30;
  }
  .h1 em{
    font-style:italic;font-weight:300;
    color:transparent;
    background:linear-gradient(180deg, var(--warm-200) 0%, var(--warm-300) 100%);
    -webkit-background-clip:text;background-clip:text;
  }
  .h1 .under{
    position:relative;white-space:nowrap;
  }
  .h1 .under::after{
    content:"";position:absolute;left:2%;right:2%;bottom:6%;height:.08em;
    background:linear-gradient(90deg, transparent, var(--warm-300), transparent);
    opacity:.6;
  }

  .hero-meta{
    margin-top:36px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;
  }
  .sub{
    font-size:clamp(15px, 1.4vw, 18px);color:var(--fg-2);max-width:520px;line-height:1.6;
    font-weight:400;
  }
  .sub b{color:var(--fg-0);font-weight:500}

  .hero-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-size:14px;font-weight:500;letter-spacing:-.005em;
    padding:14px 22px;border-radius:999px;
    transition:background .12s, color .12s, border-color .12s;
    white-space:nowrap;
  }
  /* LIQUID GLASS — primary CTA */
  .btn-primary{
    position:relative;isolation:isolate;overflow:hidden;
    color:var(--fg-0);
    background:
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 40%, rgba(212,162,60,.20) 100%),
      rgba(29,26,20,.45);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.35) inset,
      0 0 0 1px rgba(255,255,255,.10) inset,
      0 -10px 20px -10px rgba(212,162,60,.42) inset,
      0 14px 40px -12px rgba(212,162,60,.45),
      0 2px 10px rgba(0,0,0,.4);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  /* glossy top highlight */
  .btn-primary::before{
    content:"";position:absolute;inset:1px 1px auto 1px;height:55%;
    border-radius:999px 999px 200px 200px / 999px 999px 50px 50px;
    background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.04) 70%, transparent);
    opacity:.85;pointer-events:none;z-index:-1;
    
  }
  /* moving specular sheen */
  .btn-primary::after{
    content:"";position:absolute;inset:-2px;border-radius:inherit;
    background:linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,.4) 45%,
      rgba(247,193,90,.32) 50%,
      rgba(255,255,255,.4) 55%,
      transparent 70%);
    background-size:220% 100%;background-position:120% 0;
    mix-blend-mode:overlay;opacity:.9;pointer-events:none;z-index:-1;
    transition:background-position .9s var(--ease);
  }
  .btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.5) inset,
      0 0 0 1px rgba(255,255,255,.18) inset,
      0 -10px 22px -10px rgba(212,162,60,.55) inset,
      0 22px 50px -14px rgba(212,162,60,.6),
      0 4px 14px rgba(0,0,0,.4);
  }
  .btn-primary:hover::after{background-position:-20% 0}
  .btn-primary .arrow{transition:transform .25s var(--ease)}
  .btn-primary:hover .arrow{transform:translateX(3px)}
  .btn-ghost{
    color:var(--fg-1);border:1px solid var(--line-2);background:rgba(255,255,255,.02);
  }
  .btn-ghost:hover{border-color:var(--line-3);background:rgba(255,255,255,.05);color:var(--fg-0)}.btn-demo{position:relative;color:var(--fg-0);border:1px solid rgba(61,191,140,.7);background:linear-gradient(180deg,rgba(61,191,140,.18),rgba(61,191,140,.05) 60%,rgba(10,111,77,.12) 100%);box-shadow:0 0 0 1px rgba(61,191,140,.18) inset, 0 6px 22px -10px rgba(61,191,140,.45), 0 12px 40px -18px rgba(10,111,77,.5);transition:transform .25s var(--ease), background .25s, border-color .25s, box-shadow .3s}.btn-demo:hover{transform:translateY(-1px);border-color:rgba(127,211,174,1);background:linear-gradient(180deg,rgba(61,191,140,.28),rgba(61,191,140,.08) 60%,rgba(10,111,77,.18) 100%);box-shadow:0 0 0 1px rgba(127,211,174,.4) inset, 0 10px 30px -10px rgba(61,191,140,.7), 0 22px 56px -18px rgba(10,111,77,.65)}.btn-demo .arrow{transition:transform .25s var(--ease)}.btn-demo:hover .arrow{transform:translateX(3px)}.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#7fd3ae;box-shadow:0 0 0 0 rgba(61,191,140,.7), 0 0 8px rgba(127,211,174,.7);animation:livePulse 1.6s ease-in-out infinite;flex-shrink:0}@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(61,191,140,.55)}70%{box-shadow:0 0 0 9px rgba(61,191,140,0)}100%{box-shadow:0 0 0 0 rgba(61,191,140,0)}}.nav-demo{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#7fd3ae !important;transition:color .2s;letter-spacing:.005em}.nav-demo:hover{color:#3dbf8c !important}

  /* hero bottom strip: mini stats + play button */
  .hero-strip{
    margin-top:80px;
    border-top:1px solid var(--line);
    padding-top:26px;
    display:grid;grid-template-columns:repeat(4, 1fr);gap:28px;
    align-items:center;
  }
  .stat{display:flex;flex-direction:column;gap:4px}
  .stat .v{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.02em;color:var(--fg-0);line-height:1}
  .stat .v sup{font-size:14px;color:var(--em-200);vertical-align:top;font-family:var(--sans);font-weight:500;margin-left:2px}
  .stat .l{font-size:11.5px;color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono)}
  .play{
    width:56px;height:56px;border-radius:50%;
    border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
    color:var(--fg-1);transition:background .25s, border-color .25s, transform .25s var(--ease);
    position:relative;justify-self:end;
  }
  .play:hover{background:var(--accent);color:var(--bg-0);border-color:var(--accent);transform:scale(1.04)}
  .play svg{width:16px;height:16px;margin-left:2px}

  /* ============ LOGO STRIP ============ */
  .logos{
    padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  }
  .logos-inner{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:40px}
  .logos .label{font-family:var(--mono);font-size:11.5px;color:var(--fg-3);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
  .marquee{
    overflow:hidden;position:relative;
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track{
    display:flex;align-items:center;gap:36px;
    width:max-content;
    animation:marquee 44s linear infinite;contain:layout style paint;transform:translateZ(0);
    
  }
  .marquee-track span{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--fg-2);letter-spacing:-.01em;white-space:nowrap;transition:color .2s}
  .marquee-track span:hover{color:var(--fg-0)}
  .marquee-track .dot{color:var(--em-500);font-style:normal;font-family:var(--sans);font-size:16px}
  @keyframes marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }
  .marquee:hover .marquee-track{animation-play-state:paused}

  /* ============ SECTION PRIMITIVES ============ */
  section{position:relative}
  .section{padding:140px 0;position:relative}
  body[data-density="tight"] .section{padding:100px 0}
  body[data-density="airy"] .section{padding:180px 0}

  .section-label{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--em-200);
    margin-bottom:26px;
  }
  .section-label::before{
    content:"";width:22px;height:1px;background:var(--em-300);
  }

  .section-title{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(40px, 6vw, 80px);
    line-height:1;letter-spacing:-.03em;color:var(--fg-0);
    max-width:960px;
  }
  .section-title em{
    font-style:italic;color:transparent;
    background:linear-gradient(180deg, var(--em-200), var(--em-400));
    -webkit-background-clip:text;background-clip:text;
  }
  .section-lead{
    margin-top:22px;font-size:18px;color:var(--fg-2);max-width:600px;line-height:1.55;
  }

  /* ============ WHY US — feature blocks (no bento) ============ */
  .why{
    background:linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 60%, var(--bg-0) 100%);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .why-grid{
    margin-top:80px;
    display:grid;
    grid-template-columns:1.4fr 1fr;
    grid-template-rows:auto auto;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--rad-lg);
    overflow:hidden;
  }
  .why-cell{
    background:var(--bg-1);padding:48px;position:relative;overflow:hidden;
    transition:background .4s;
  }
  .why-cell:hover{background:var(--bg-2)}
  .why-cell h3{
    font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;
    letter-spacing:-.015em;margin-bottom:14px;color:var(--fg-0);
  }
  .why-cell p{color:var(--fg-2);font-size:15px;line-height:1.6;max-width:460px}
  .why-cell .lbl{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--em-200);margin-bottom:20px;display:flex;align-items:center;gap:10px;
  }
  .why-cell .lbl .n{color:var(--fg-3)}
  .why-cell .viz{margin-top:32px;height:180px;position:relative}

  /* viz 1: speed meter */
  .viz-speed{
    position:absolute;inset:0;
    display:flex;align-items:flex-end;gap:8px;padding:18px 0;
  }
  .viz-speed .bar{flex:1;background:linear-gradient(180deg, var(--em-300), var(--em-600));border-radius:3px 3px 0 0;position:relative}
  .viz-speed .bar::after{content:attr(data-v);position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;color:var(--fg-3);letter-spacing:.1em}
  .viz-speed .bar.us{background:linear-gradient(180deg, var(--em-200), var(--em-400));box-shadow:0 0 30px var(--accent-glow)}
  .viz-speed .bar.us::before{content:"trellis";position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;color:var(--em-200);letter-spacing:.1em;text-transform:uppercase}
  .viz-speed .bar.them::before{content:attr(data-l);position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;color:var(--fg-4);letter-spacing:.1em;text-transform:uppercase}

  /* viz 2: code snippet */
  .viz-code{
    position:absolute;inset:0;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--rad);
    padding:16px 18px;font-family:var(--mono);font-size:12px;line-height:1.9;overflow:hidden;
  }
  .viz-code .ln{display:grid;grid-template-columns:24px 1fr;gap:10px;color:var(--fg-2)}
  .viz-code .n{color:var(--fg-4);text-align:right;user-select:none}
  .viz-code .kw{color:var(--em-200)}
  .viz-code .str{color:#c9b77a}
  .viz-code .c{color:var(--fg-4)}

  /* viz 3: trellis growth chart */
  .viz-growth{position:absolute;inset:0}
  .viz-growth svg{width:100%;height:100%}
  .viz-growth .axis{stroke:var(--line-2);stroke-width:1}
  .viz-growth .line{fill:none;stroke:var(--em-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--accent-glow))}
  .viz-growth .area{fill:url(#growthFill);opacity:.6}
  .viz-growth .dot{fill:var(--em-200);stroke:var(--bg-1);stroke-width:2}
  .viz-growth .label{font-family:var(--mono);font-size:9px;fill:var(--fg-3);letter-spacing:.1em;text-transform:uppercase}

  /* viz 4: availability dial */
  .viz-dial{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;gap:28px}
  .dial{width:140px;height:140px;position:relative}
  .dial svg{transform:rotate(-90deg)}
  .dial .track{fill:none;stroke:var(--line-2);stroke-width:4}
  .dial .prog{fill:none;stroke:var(--em-300);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 8px var(--accent-glow))}
  .dial .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .dial .ctr .n{font-family:var(--serif);font-size:34px;color:var(--fg-0);line-height:1}
  .dial .ctr .l{font-family:var(--mono);font-size:10px;color:var(--fg-3);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
  .dial-list{display:flex;flex-direction:column;gap:8px}
  .dial-list .r{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--fg-2);font-family:var(--mono);letter-spacing:.04em}
  .dial-list .r .d{width:6px;height:6px;border-radius:50%;background:var(--em-300)}
  .dial-list .r.booked .d{background:var(--fg-4)}
  .dial-list .r.booked{color:var(--fg-3)}

  /* viz 4 replacement: direct-line team graphic */
  .viz-team{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:26px}
  .viz-team .team-row{display:flex;align-items:center;gap:20px}
  .viz-team .avatar{
    width:72px;height:72px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:-.01em;
    color:var(--fg-0);background:var(--bg-2);
    border:1px solid var(--line-2);
    box-shadow:0 10px 20px -10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;
    position:relative;
  }
  .viz-team .avatar.us{
    background:linear-gradient(140deg, var(--em-500), var(--em-700));
    border-color:var(--em-400);
    color:var(--fg-0);
    box-shadow:0 10px 24px -8px var(--accent-glow), 0 1px 0 rgba(255,255,255,.15) inset;
  }
  .viz-team .line{
    flex:1;height:2px;
    background:linear-gradient(90deg, var(--line-2), var(--em-300), var(--em-200));
    border-radius:2px;position:relative;overflow:hidden;
  }
  .viz-team .line::before{
    content:"";position:absolute;top:0;left:-30%;height:100%;width:30%;
    background:linear-gradient(90deg, transparent, var(--em-100), transparent);
    animation:teamPulse 2.8s var(--ease) infinite;
  }
  @keyframes teamPulse{to{left:120%}}
  .viz-team .team-caption{
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--fg-3);
  }

  /* viz 4: direct-message thread */
  .viz-chat{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;justify-content:center;padding:4px 0}
  .vc-msg{display:flex;align-items:flex-end;gap:10px;max-width:85%}
  .vc-us{align-self:flex-end;flex-direction:row}
  .vc-av{
    width:28px;height:28px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:12px;color:var(--fg-1);
    background:var(--bg-2);border:1px solid var(--line-2);
  }
  .vc-av.us{background:linear-gradient(140deg,var(--em-500),var(--em-700));border-color:var(--em-400);color:var(--fg-0)}
  .vc-bubble{
    font-size:13px;line-height:1.45;color:var(--fg-1);
    padding:9px 14px;border-radius:14px;
    background:var(--bg-2);border:1px solid var(--line-2);
    max-width:240px;
  }
  .vc-us .vc-bubble{background:rgba(61,191,140,.14);border-color:rgba(127,211,174,.25);color:var(--em-100)}
  .vc-typing{
    align-self:flex-start;margin-left:38px;
    display:flex;gap:4px;padding:9px 12px;border-radius:14px;
    background:var(--bg-2);border:1px solid var(--line-2);width:fit-content;
  }
  .vc-typing span{width:5px;height:5px;border-radius:50%;background:var(--fg-3);animation:vcType 1.2s ease-in-out infinite}
  .vc-typing span:nth-child(2){animation-delay:.15s}
  .vc-typing span:nth-child(3){animation-delay:.3s}
  @keyframes vcType{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

  /* cell 05: wide, spans both columns */
  .why-cell.wide{grid-column:1 / -1}
  .why-cell.wide .wide-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
  .why-cell.wide .wide-copy h3{margin-bottom:14px}
  .why-cell.wide .wide-viz{margin-top:0;height:320px;position:relative}

  /* phones comparison */
  .viz-phones{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:28px}
  .phone{
    position:relative;width:150px;height:300px;border-radius:24px;
    background:var(--bg-0);border:1px solid var(--line-2);
    box-shadow:0 24px 48px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
    padding:6px;display:flex;flex-direction:column;
  }
  .phone.them{transform:rotate(-4deg);opacity:.72}
  .phone.us{transform:rotate(3deg);border-color:var(--em-500);box-shadow:0 30px 60px -20px var(--accent-glow), 0 0 0 1px rgba(127,211,174,.15) inset}
  .ph-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:42px;height:12px;background:#000;border-radius:0 0 10px 10px;z-index:2}
  .ph-screen{
    flex:1;background:var(--bg-1);border-radius:18px;padding:22px 10px 10px;overflow:hidden;
    display:flex;flex-direction:column;gap:7px;position:relative;
  }
  .ph-label{
    position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4);white-space:nowrap;
  }
  .ph-label.us{color:var(--em-200)}

  /* "competitor" broken phone */
  .ph-url-broken{font-family:var(--mono);font-size:7px;color:var(--fg-3);letter-spacing:0;word-break:break-all;opacity:.7}
  .ph-broken-h{font-family:Arial, sans-serif;font-weight:700;font-size:10px;line-height:1.1;color:#c9c9c9;word-break:break-word;letter-spacing:-.01em}
  .ph-broken-row{display:flex;gap:3px;flex-wrap:wrap}
  .ph-broken-chip{font-family:Arial,sans-serif;font-size:6.5px;padding:2px 4px;background:#2a2a2a;color:#b0b0b0;border-radius:2px;white-space:nowrap}
  .ph-broken-btn{font-family:Arial,sans-serif;font-weight:700;font-size:9px;background:#4a4a4a;color:#fff;padding:6px 0;text-align:center;border-radius:2px;width:65%;letter-spacing:-.02em}
  .ph-broken-text{height:5px;background:#2a2a2a;border-radius:1px}
  .ph-broken-text.short{width:60%}

  /* "us" clean phone */
  .ph-url{font-family:var(--mono);font-size:7.5px;color:var(--fg-4);letter-spacing:.02em;text-align:center}
  .ph-eyebrow{font-family:var(--mono);font-size:6.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--em-200);margin-top:6px}
  .ph-h{font-family:var(--serif);font-weight:300;font-size:14px;line-height:1.05;letter-spacing:-.02em;color:var(--fg-0)}
  .ph-h em{font-style:italic;color:transparent;background:linear-gradient(180deg,var(--em-200),var(--em-400));-webkit-background-clip:text;background-clip:text}
  .ph-btn{font-family:var(--sans);font-weight:500;font-size:9px;background:var(--fg-0);color:var(--bg-0);padding:8px 0;text-align:center;border-radius:999px;margin-top:4px}
  .ph-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:auto}
  .ph-tile{aspect-ratio:4/3;border-radius:4px;background:linear-gradient(135deg,var(--bg-2),var(--bg-3));border:1px solid var(--line)}
  .ph-tile.alt{background:linear-gradient(135deg,var(--em-700),var(--em-500));border-color:var(--em-500)}

  @media (max-width: 900px){
    .why-cell.wide .wide-inner{grid-template-columns:1fr;gap:32px}
    .why-cell.wide .wide-viz{height:420px}
  }

  /* ==== MOBILE FIXES for cell 01 (first-impression) & cell 04 (phones) ==== */
  @media (max-width: 720px){
    /* Cell 01: stack site preview above the scoreboard instead of side-by-side */
    .viz-first{flex-direction:column;gap:18px;position:relative;inset:auto;padding:4px 0}
    .vf-site{width:100%}
    .vf-scoreboard{flex-direction:row;justify-content:flex-start;gap:40px;padding-left:0;min-width:0}
    .vf-score .v{font-size:26px}
    .why-cell.feat .viz{min-height:0;margin-top:28px}
    .why-cell.feat{grid-row:auto}
    .why-cell.feat h3{font-size:30px}

    /* Cell 04: give phones room + scale so they don't crush */
    .why-cell.wide .wide-viz{height:auto;min-height:340px;padding:10px 0 30px}
    .viz-phones{position:relative;inset:auto;gap:16px;flex-wrap:nowrap}
    .phone{width:128px;height:256px;border-radius:20px}
    .ph-screen{padding:18px 8px 8px;gap:6px}
    .ph-broken-h{font-size:9px}
    .ph-h{font-size:12px}
    .ph-label{font-size:8px}
  }

  @media (max-width: 420px){
    .phone{width:114px;height:230px}
    .viz-phones{gap:10px}
    .vf-score .v{font-size:22px}
    .vf-scoreboard{gap:28px}
  }

  /* viz 1 replacement: polished-site preview */
  .viz-first{position:absolute;inset:0;display:flex;gap:24px;align-items:stretch}
  .vf-site{
    flex:1;background:var(--bg-0);border:1px solid var(--line-2);border-radius:10px;
    overflow:hidden;display:flex;flex-direction:column;
    box-shadow:0 20px 40px -15px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  }
  .vf-bar{height:22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:5px;padding:0 12px;background:rgba(255,255,255,.02);position:relative}
  .vf-bar i{width:7px;height:7px;border-radius:50%;display:block}
  .vf-bar i:nth-child(1){background:#e57a68}
  .vf-bar i:nth-child(2){background:#e5b568}
  .vf-bar i:nth-child(3){background:#8ccc9a}
  .vf-url{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;color:var(--fg-4);letter-spacing:.05em}
  .vf-body{flex:1;padding:16px 18px;display:flex;flex-direction:column;gap:14px;position:relative}
  .vf-body::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(60% 60% at 70% 20%, rgba(61,191,140,.18), transparent 60%),
      radial-gradient(40% 40% at 20% 80%, rgba(10,111,77,.2), transparent 60%);
  }
  .vf-hero{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
  .vf-eyebrow{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--em-200)}
  .vf-h{font-family:var(--serif);font-weight:300;font-size:20px;letter-spacing:-.02em;line-height:1.05;color:var(--fg-0)}
  .vf-h em{font-style:italic;color:transparent;background:linear-gradient(180deg,var(--em-200),var(--em-400));-webkit-background-clip:text;background-clip:text}
  .vf-ctas{display:flex;gap:6px;margin-top:4px}
  .vf-btn{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;white-space:nowrap}
  .vf-btn-p{background:var(--fg-0);color:var(--bg-0)}
  .vf-btn-g{background:transparent;color:var(--fg-2);border:1px solid var(--line-2)}
  .vf-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto;position:relative;z-index:1}
  .vf-tile{aspect-ratio:4/3;border-radius:4px;background:linear-gradient(135deg, var(--bg-2), var(--bg-3));border:1px solid var(--line)}
  .vf-tile:nth-child(2){background:linear-gradient(135deg, var(--em-700), var(--em-500));border-color:var(--em-500)}

  .vf-scoreboard{
    display:flex;flex-direction:column;justify-content:center;gap:24px;
    padding-left:4px;min-width:110px;
  }
  .vf-score .v{font-family:var(--serif);font-weight:400;font-size:30px;color:var(--fg-0);letter-spacing:-.02em;line-height:1}
  .vf-score .v sup{font-size:14px;color:var(--em-200);font-family:var(--sans);font-weight:500;margin-left:2px;vertical-align:top}
  .vf-score .l{font-family:var(--mono);font-size:10px;color:var(--fg-3);letter-spacing:.12em;text-transform:uppercase;margin-top:6px}

  /* first cell spans 2 rows (tall feature) */
  .why-cell.feat{grid-row:1/3;display:flex;flex-direction:column}
  .why-cell.feat .viz{flex:1;min-height:300px;margin-top:36px;display:flex;flex-direction:column;gap:20px}
  .why-cell.feat .viz .viz-first{position:relative;inset:auto;flex:0 0 auto;height:280px}
  .why-cell.feat h3{font-size:40px}

  /* claim cards beneath the first-impression viz */
  .vf-claims{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    margin-top:4px;
  }
  .vf-claim{
    display:flex;flex-direction:column;gap:12px;
    padding:18px 18px 20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18)), var(--bg-2);
    transition:transform .25s var(--ease), border-color .25s, background .25s;
  }
  .vf-claim:hover{border-color:rgba(255,255,255,.16);transform:translateY(-1px)}
  .vf-claim-icon{width:22px;height:22px;color:var(--em-300);stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .vf-claim-text{
    font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.25;letter-spacing:-.01em;
    color:var(--fg-0);
  }
  @media (max-width:720px){
    .vf-claims{grid-template-columns:1fr;gap:10px}
    .vf-claim{padding:14px 16px 16px}
    .vf-claim-text{font-size:16px}
  }

  /* ============ WORK ============ */
  .work{padding:140px 0;border-bottom:1px solid var(--line);position:relative}
  .work-head{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap;margin-bottom:72px}
  .work-filter{display:flex;gap:6px;font-family:var(--mono);font-size:12px}
  .work-filter button{
    padding:8px 14px;border-radius:999px;color:var(--fg-2);border:1px solid var(--line-2);
    letter-spacing:.06em;transition:all .25s;
  }
  .work-filter button.on{background:var(--fg-0);color:var(--bg-0);border-color:var(--fg-0)}
  .work-filter button:not(.on):hover{color:var(--fg-0);border-color:var(--line-3)}

  .work-grid{
    display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
  }
  .proj{
    position:relative;overflow:hidden;border-radius:var(--rad-lg);
    border:1px solid var(--line);background:var(--bg-1);
    transition:transform .5s var(--ease), border-color .4s;
    cursor:pointer;
  }
  .proj:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .proj .shot{
    aspect-ratio:4/3;position:relative;overflow:hidden;
    background:linear-gradient(135deg, var(--bg-2), var(--bg-3));
  }
  .proj .shot::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 30% 20%, rgba(61,191,140,.22), transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(10,111,77,.28), transparent 55%);
    
  }
  .proj .shot .mock{
    position:absolute;inset:18% 14% 0 14%;
    border-radius:12px 12px 0 0;
    background:var(--bg-0);
    border:1px solid var(--line-2);
    border-bottom:none;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
    display:flex;flex-direction:column;
  }
  .proj .shot .mock .bar{height:18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:4px;padding:0 10px;background:rgba(255,255,255,.02)}
  .proj .shot .mock .bar i{width:6px;height:6px;border-radius:50%;background:var(--fg-4);display:block}
  .proj .shot .mock .bar i:nth-child(1){background:#e57a68}
  .proj .shot .mock .bar i:nth-child(2){background:#e5b568}
  .proj .shot .mock .bar i:nth-child(3){background:#8ccc9a}
  .proj .shot .mock .content{flex:1;padding:14px;display:flex;flex-direction:column;gap:6px}
  .proj .shot .mock .content .h{font-family:var(--serif);font-size:16px;color:var(--fg-0);letter-spacing:-.01em;line-height:1.1}
  .proj .shot .mock .content .p{height:4px;border-radius:2px;background:var(--line-2);width:60%}
  .proj .shot .mock .content .p.s{width:40%}
  .proj .shot .mock .content .row{display:flex;gap:6px;margin-top:auto}
  .proj .shot .mock .content .row .pill{height:14px;border-radius:99px;flex:1;background:var(--bg-3);border:1px solid var(--line)}
  .proj .shot .mock .content .row .pill.ac{background:var(--em-500);border-color:var(--em-400)}

  .proj .info{padding:22px 22px 26px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
  .proj .info h3{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.015em;color:var(--fg-0);line-height:1.15;margin-bottom:4px}
  .proj .info .tags{font-family:var(--mono);font-size:11px;color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase}
  .proj .info .go{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    color:var(--fg-1);transition:all .3s var(--ease);
  }
  .proj:hover .info .go{background:var(--accent);color:var(--bg-0);border-color:var(--accent);transform:rotate(-45deg)}
  .proj .metric{
    position:absolute;top:18px;left:18px;z-index:2;
    padding:6px 10px;border-radius:999px;
    background:rgba(8,24,20,.8);;
    border:1px solid var(--line-2);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
    color:var(--em-200);
  }
  .proj .metric b{color:var(--fg-0);font-weight:500}

  /* spans — asymmetric */
  .proj.p1{grid-column:span 7}
  .proj.p2{grid-column:span 5}
  .proj.p3{grid-column:span 5}
  .proj.p4{grid-column:span 7}
  .proj.p1 .shot, .proj.p4 .shot{aspect-ratio:16/10}

  /* ============ SERVICES ============ */
  .services{padding:140px 0;border-bottom:1px solid var(--line);position:relative;background:linear-gradient(180deg, var(--bg-0), var(--bg-1))}
  .svc-list{margin-top:60px;border-top:1px solid var(--line)}
  .svc{
    display:grid;grid-template-columns:80px 1.5fr 2fr 160px 40px;gap:40px;
    padding:32px 0;border-bottom:1px solid var(--line);
    align-items:center;
    transition:background .3s, padding .3s var(--ease);
    cursor:pointer;position:relative;
  }
  .svc::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg, transparent, rgba(61,191,140,.04) 50%, transparent);
    opacity:0;transition:opacity .4s;
  }
  .svc:hover{padding-left:20px;padding-right:20px}
  .svc:hover::before{opacity:1}
  .svc .num{font-family:var(--mono);font-size:12px;color:var(--fg-3);letter-spacing:.14em}
  .svc .nm{font-family:var(--serif);font-size:28px;font-weight:400;letter-spacing:-.015em;line-height:1.1;color:var(--fg-0);position:relative;z-index:1}
  .svc .nm em{font-style:italic;color:var(--em-200)}
  .svc-badge{display:block;width:fit-content;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--em-200);background:rgba(61,191,140,.08);border:1px solid rgba(61,191,140,.2);padding:4px 10px;border-radius:100px;margin-bottom:8px}
  .svc .ds{color:var(--fg-2);font-size:14.5px;line-height:1.55;max-width:460px;position:relative;z-index:1}
  .svc .pr{text-align:right;font-family:var(--mono);font-size:13px;color:var(--fg-1);position:relative;z-index:1}
  .svc .pr .v{display:block;font-family:var(--serif);font-size:22px;color:var(--fg-0);letter-spacing:-.01em;margin-bottom:2px}
  .svc .pr small{font-size:10.5px;color:var(--fg-3);letter-spacing:.14em;text-transform:uppercase;display:block}
  .svc .plus{font-family:var(--mono);font-size:22px;color:var(--fg-3);text-align:right;transition:color .25s, transform .3s var(--ease);position:relative;z-index:1}
  .svc:hover .plus{color:var(--em-200);transform:rotate(45deg)}

  /* ============ PROCESS (growth rail) ============ */
  .process{padding:140px 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
  .process .backvine{
    position:absolute;right:-60px;top:0;bottom:0;width:520px;opacity:.5;pointer-events:none;
  }
  .process .backvine svg{width:100%;height:100%}
  .process .backvine .stem{fill:none;stroke:var(--em-700);stroke-width:1.2;stroke-linecap:round}
  .process .backvine .leaf{fill:var(--em-800);opacity:.6}

  .proc-grid{margin-top:80px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden}
  .proc{background:var(--bg-1);padding:40px 32px 44px;position:relative;transition:background .35s}
  .proc:hover{background:var(--bg-2)}
  .proc .st{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--em-200);margin-bottom:24px;display:flex;justify-content:space-between;align-items:center}
  .proc .st .dur{color:var(--fg-3)}
  .proc .icon{width:40px;height:40px;margin-bottom:24px;color:var(--em-200)}
  .proc h3{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.015em;color:var(--fg-0);margin-bottom:10px;line-height:1.1}
  .proc p{color:var(--fg-2);font-size:13.5px;line-height:1.6}
  .proc .rule{
    position:absolute;top:50%;right:-1px;width:16px;height:16px;border-radius:50%;
    background:var(--bg-0);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
    transform:translate(50%, -50%);z-index:2;color:var(--em-300);font-size:10px;
  }
  .proc:last-child .rule{display:none}

  /* ============ QUOTE ============ */
  .quote{padding:160px 0;border-bottom:1px solid var(--line);position:relative;background:radial-gradient(ellipse at center top, rgba(10,111,77,.12), transparent 60%)}
  .quote-inner{max-width:960px;margin:0 auto;padding:0 32px;text-align:left}
  .quote .mark{font-family:var(--serif);font-size:160px;line-height:.6;color:var(--em-300);opacity:.3;height:60px;margin-bottom:10px}
  .quote blockquote{
    font-family:var(--serif);font-weight:300;font-style:italic;
    font-size:clamp(28px, 3.8vw, 52px);line-height:1.18;letter-spacing:-.02em;
    color:var(--fg-0);max-width:880px;
  }
  .quote blockquote em{font-style:italic;color:var(--em-200);font-weight:400;position:relative}
  .quote blockquote em::after{
    content:"";position:absolute;left:2%;right:2%;bottom:.04em;height:.05em;
    background:linear-gradient(90deg, transparent, var(--warm-200) 20%, var(--warm-300) 50%, var(--warm-200) 80%, transparent);
    opacity:.85;
    box-shadow:0 0 14px rgba(212,162,60,.45), 0 0 6px rgba(247,193,90,.5);
    border-radius:2px;
  }
  .quote .cite{margin-top:40px;display:flex;align-items:center;gap:16px;color:var(--fg-2);font-size:14px}
  .quote .cite .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg, var(--em-400), var(--em-700));border:1px solid var(--line-2)}
  .quote .cite b{color:var(--fg-0);font-weight:500;font-family:var(--sans)}

  /* ============ CTA ============ */
  .cta{padding:160px 0 100px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .cta::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(50% 60% at 50% 100%, rgba(61,191,140,.16), transparent 70%),
      radial-gradient(80% 60% at 50% 120%, rgba(10,111,77,.28), transparent 70%);
  }
  .cta .vine-big{
    position:absolute;inset:auto 0 -10% 0;height:65%;z-index:-1;opacity:.7;
    display:flex;justify-content:center;
  }
  .cta .vine-big svg{width:min(1200px,95%);height:auto}
  .cta .vine-big .stem{fill:none;stroke:url(#ctaVineStroke);stroke-width:1.2;stroke-linecap:round}
  .cta .vine-big .leaf{fill:url(#ctaVineLeaf);opacity:.7}

  .cta h2{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(56px, 9vw, 140px);line-height:1.05;letter-spacing:-.035em;
    color:var(--fg-0);max-width:1200px;
  }
  .cta h2 em{font-style:italic;color:transparent;background:linear-gradient(180deg, var(--em-200), var(--em-400));-webkit-background-clip:text;background-clip:text}
  .cta .r{margin-top:50px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
  .cta .avail{
    padding:10px 16px;border-radius:999px;
    background:var(--accent-soft);color:var(--em-100);border:1px solid rgba(61,191,140,.3);
    font-family:var(--mono);font-size:12px;letter-spacing:.1em;display:inline-flex;align-items:center;gap:10px;
  }
  .cta .avail .pulse{width:6px;height:6px;border-radius:50%;background:var(--em-300);box-shadow:0 0 0 4px rgba(61,191,140,.18);animation:pulse 2.4s ease-in-out infinite}

  /* ============ FOOTER ============ */
  footer{padding:60px 0 40px;background:var(--bg-0);color:var(--fg-3)}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
  .foot-grid .about{max-width:320px}
  .foot-grid .about .mk{display:flex;align-items:center;gap:10px;color:var(--fg-0);font-weight:600;margin-bottom:14px}
  .foot-grid .about .mk svg{width:22px;height:22px}
  .foot-grid p{font-size:13.5px;line-height:1.6;color:var(--fg-2)}
  .foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin-bottom:16px}
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .foot-col a{color:var(--fg-1);font-size:14px;transition:color .2s}
  .foot-col a:hover{color:var(--em-200)}
  .foot-bottom{padding-top:30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-family:var(--mono);font-size:11.5px;color:var(--fg-3);letter-spacing:.05em}

  /* responsive */
  @media (max-width:1100px){
    .why-grid{grid-template-columns:1fr 1fr}
    .why-cell.feat{grid-row:auto;grid-column:1/-1}
    .proj.p1,.proj.p2,.proj.p3,.proj.p4{grid-column:span 12}
    .svc{grid-template-columns:50px 1fr 150px;gap:20px}
    .svc .ds, .svc .plus{display:none}
  }
  @media (max-width:800px){
    .nav-links{display:none}
    .hero-meta{grid-template-columns:1fr}
    .hero-strip{grid-template-columns:1fr 1fr}
    .hero-strip .play{grid-column:1/-1;justify-self:start}
    .why-grid{grid-template-columns:1fr}
    .work-grid{grid-template-columns:1fr}
    .proc-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .logos .row{gap:32px}
    .logos .row span{font-size:18px}
  }
  @media (max-width:800px){
    .hero{min-height:100svh;padding:100px 0 40px}
    .vine svg{bottom:-20px;width:max(900px, 180%);opacity:.7}
    .hero-strip{margin-top:48px;gap:16px;padding-top:20px}
    .stat .v{font-size:24px}
    .stat .l{font-size:12px}
    .lamp::before{left:-20%;top:10%;width:90%;height:100%}
    .eyebrow{font-size:10.5px;padding:6px 12px}
  }
  @media (max-width:480px){
    .hero{padding:90px 0 28px}
    .wrap-lg{padding:0 20px}
    .h1{margin-top:18px}
    .hero-meta{margin-top:24px;gap:24px}
    .sub{font-size:14px}
    .hero-ctas{gap:12px}
    .btn{padding:12px 18px;font-size:13px}
    .hero-strip{margin-top:36px;grid-template-columns:1fr 1fr;gap:12px}
    .hero-strip .play{grid-column:1/-1}
    .vine svg{width:max(800px, 220%);bottom:0;opacity:.55}
  }

  /* First-project showcase (replaces portfolio grid until we have real work) */
  .first-project{
    display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
    padding:40px 0;margin-top:40px;
  }
  .fp-left .fp-tag{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--em-200);
    padding:7px 14px;border-radius:999px;
    background:rgba(61,191,140,.1);border:1px solid rgba(127,211,174,.24);
    backdrop-filter:blur(10px);
  }
  .fp-left .fp-tag .pulse{width:6px;height:6px;border-radius:50%;background:var(--em-300);box-shadow:0 0 0 4px rgba(61,191,140,.18);animation:pulse 2.4s ease-in-out infinite}
  .fp-h{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(40px, 5.2vw, 72px);line-height:1;letter-spacing:-.03em;
    color:var(--fg-0);margin:26px 0 22px;
  }
  .fp-h em{font-style:italic;color:transparent;background:linear-gradient(180deg,var(--em-200),var(--em-400));-webkit-background-clip:text;background-clip:text}
  .fp-p{color:var(--fg-2);font-size:16px;line-height:1.65;max-width:460px;margin-top:14px}
  .fp-card{
    background:var(--bg-1);
    border:1px solid var(--line);border-radius:var(--rad-lg);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
    overflow:hidden;
  }
  .fp-card-head{
    display:flex;align-items:center;gap:14px;padding:12px 16px;
    border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
  }
  .fp-dots{display:flex;gap:6px}
  .fp-dots i{width:10px;height:10px;border-radius:50%;background:var(--fg-4);display:block}
  .fp-dots i:nth-child(1){background:#e57a68}
  .fp-dots i:nth-child(2){background:#e5b568}
  .fp-dots i:nth-child(3){background:#8ccc9a}
  .fp-url{font-family:var(--mono);font-size:12px;color:var(--fg-3);letter-spacing:.04em}
  .fp-card-body{padding:28px 30px;font-family:var(--mono);font-size:13.5px;line-height:2;color:var(--fg-2);min-height:220px}
  .fp-line{display:grid;grid-template-columns:28px 1fr;gap:12px}
  .fp-n{color:var(--fg-4);text-align:right;user-select:none}
  .fp-kw{color:var(--em-200)}
  .fp-c{color:var(--fg-4)}
  .fp-cursor{display:inline-block;width:8px;background:var(--em-300);color:transparent;animation:blink 1.1s step-end infinite;margin:0 1px}
  @keyframes blink{50%{opacity:0}}
  @media(max-width:900px){.first-project{grid-template-columns:1fr;gap:40px}}

  /* ============ VISUAL POLISH ============ */

  /* aurora blobs — slow colour-shifting gradients in hero */
  .aurora{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:.5;filter:blur(40px) saturate(140%);display:none;will-change:transform}
  .aurora .blob{position:absolute;border-radius:50%;will-change:transform}
  .aurora .b1{width:480px;height:480px;left:-5%;top:-15%;background:radial-gradient(circle, rgba(61,191,140,.55), transparent 60%);animation:auroraA 28s ease-in-out infinite}
  .aurora .b2{width:400px;height:400px;right:-5%;top:15%;background:radial-gradient(circle, rgba(127,211,174,.35), transparent 60%);animation:auroraB 34s ease-in-out infinite}
  .aurora .b3{width:560px;height:560px;left:25%;bottom:-25%;background:radial-gradient(circle, rgba(10,111,77,.55), transparent 60%);animation:auroraC 40s ease-in-out infinite}
  @keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,60px) scale(1.15)}}
  @keyframes auroraB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,80px) scale(1.1)}}
  @keyframes auroraC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.2)}}

  /* cursor spotlight — ultra-subtle emerald glow following cursor */
  .spotlight{display:none;
    position:fixed;top:0;left:0;width:560px;height:560px;pointer-events:none;z-index:1;
    background:radial-gradient(circle, rgba(61,191,140,.10), rgba(61,191,140,.04) 40%, transparent 70%);
    transform:translate(-50%,-50%);
    transition:opacity .5s;opacity:0;
    
  }
  body.hasCursor .spotlight{opacity:1}
  @media (hover: none){.spotlight{display:none}}

  /* scroll reveal — sections & elements fade + rise in */
  [data-reveal]{opacity:0;transform:translate3d(0,20px,0);transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
  [data-reveal].in{opacity:1;transform:none}
  [data-reveal-stagger] > *{opacity:0;transform:translate3d(0,16px,0);transition:opacity .45s var(--ease-out), transform .45s var(--ease-out)}
  [data-reveal-stagger].in > *{opacity:1;transform:none}
  [data-reveal-stagger].in > *:nth-child(1){transition-delay:.05s}
  [data-reveal-stagger].in > *:nth-child(2){transition-delay:.15s}
  [data-reveal-stagger].in > *:nth-child(3){transition-delay:.25s}
  [data-reveal-stagger].in > *:nth-child(4){transition-delay:.35s}
  [data-reveal-stagger].in > *:nth-child(5){transition-delay:.45s}
  [data-reveal-stagger].in > *:nth-child(6){transition-delay:.55s}
  @media (prefers-reduced-motion: reduce){
    [data-reveal],[data-reveal-stagger] > *{opacity:1;transform:none;transition:none}
  }

  /* shimmer sweep for feature surfaces */
  .shimmer{position:relative;overflow:hidden}
  .shimmer::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
    transform:translateX(-100%);transition:transform 1.1s var(--ease-out);
  }
  .shimmer:hover::after{transform:translateX(100%)}

  /* tilt cards — 3d lift on hover */
  .tilt{transform-style:preserve-3d}
  .tilt-inner{}

  /* section divider with glyph */
  .divider{
    display:flex;align-items:center;justify-content:center;gap:18px;
    padding:0 0 0 0;margin:0 auto;max-width:1280px;
  }
  .divider .l{flex:1;height:1px;background:linear-gradient(90deg, transparent, var(--line-2), transparent)}
  .divider svg{width:28px;height:28px;color:var(--em-300);opacity:.85;filter:drop-shadow(0 0 10px var(--accent-glow))}

  /* magnetic button — the CSS helper; JS does the math */
  .btn.magnetic{transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s}

  /* h1 letter shimmer on hover */
  .h1 .shim{display:inline-block;background:linear-gradient(90deg, var(--fg-0) 0%, var(--fg-0) 40%, var(--em-200) 50%, var(--fg-0) 60%, var(--fg-0) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.4s var(--ease-out)}
  .h1:hover .shim{background-position:0 0}

  /* floating micro-particles in the CTA section */
  .cta-dust{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
  .cta-dust i{position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;background:var(--em-200);opacity:.5;box-shadow:0 0 8px var(--accent-glow);animation:dust 12s linear infinite}
  @keyframes dust{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.7}90%{opacity:.7}100%{transform:translateY(-80vh) translateX(var(--dx,20px));opacity:0}}

  /* animated underline on nav */
  .nav-links a{position:relative;padding:4px 0}
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--warm-300);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:left}

  /* F5: top-right nav CTA arrow nudge */
  .nav-cta{display:inline-flex;align-items:center;gap:6px}
  .nav-cta .arrow,.nav-cta::after{
    display:inline-block;transition:transform .25s var(--ease);
  }
  .nav-cta:hover{background:#fff}

  /* ============ AMBIENT MOTION — added per design spec ============ */

  /* C3: vine breathing — whole vine layer scales 1.000 ↔ 1.004 / 12s, transform-origin at root */
  .vine{transform-origin:80% 100%;;will-change:transform}
  @keyframes vineBreathe{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.004)}
  }

  /* C5: heat-haze — DISABLED for perf. Turbulence+displacement on a blurred element thrashes
     the compositor. Visual approximation is handled by the existing 7s lamp opacity/scale pulse. */
  /* .lamp{filter:url(#heatHaze)} */

  /* C7: constellation glints */
  .vine .glint{
    fill:var(--warm-100);
    opacity:.10;
    filter:drop-shadow(0 0 3px rgba(247,193,90,.45));
    transition:opacity .9s ease;
    
  }
  .vine .glint.lit{opacity:.62}

  /* C8: sap pulse — single continuous path overlaid on primary, brightness moves root→tip */
  .vine .sap-pulse-path{
    fill:none;
    stroke:#f0c870;
    stroke-width:11;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:60 1000;
    stroke-dashoffset:1000;
    opacity:0;
    
    filter:blur(1.5px);
    pointer-events:none;
  }
  .vine .sap-pulse-path.pulsing{
    animation:sapPulse 4s cubic-bezier(.4,0,.6,1) forwards;
  }
  @keyframes sapPulse{
    0%   {stroke-dashoffset:1000; opacity:0}
    12%  {opacity:.15}
    85%  {opacity:.12}
    100% {stroke-dashoffset:-60; opacity:0}
  }

  /* C9: tip-leaf flicker — STATIC drop-shadow (rasterized once) + opacity flicker (GPU-cheap).
     Avoids animating filter-blur, which is one of the most expensive things in CSS. */
  .vine .leaf-tip.revealed{
    filter:drop-shadow(0 0 4px rgba(247,193,90,.45));
    animation:tipFlicker 5.6s ease-in-out infinite;
    
  }
  .vine .leaf-tip:nth-child(odd){animation-duration:6.4s;animation-delay:-1.2s}
  .vine .leaf-tip:nth-child(3n){animation-duration:7s;animation-delay:-2.4s}
  @keyframes tipFlicker{
    0%,100%{opacity:.82}
    50%    {opacity:1}
  }

  /* C11: background hue oscillation — DISABLED. Animating background-color on <body>
     forces a full-document repaint on every frame. The shift is described as "almost
     imperceptible per moment" — the cost wildly outweighs the value. */
  @keyframes bgHueOsc{
    0%,100%{background-color:#0f0e0b}
    50%    {background-color:#131210}
  }
  /* body{animation:bgHueOsc 28s ease-in-out infinite} */

  /* D1: growth-burst tendrils — new path appears, draws in over 1.5s */
  .vine .stem.burst{
    stroke:url(#vineStroke);
    stroke-width:1.6;
    stroke-linecap:round;
    fill:none;
    transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1);
  }
  /* burst leaves: small new-growth, scale-up overshoot */
  .vine .leaf.burst-leaf{
    fill:url(#vineLeaf);
    stroke:#f0c870;stroke-width:.45;stroke-opacity:.85;
    opacity:0;
    filter:drop-shadow(0 0 3px rgba(247,193,90,.45));
    transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  .vine .leaf.burst-leaf.revealed{opacity:.95}

  /* D3 + E2: click + cursor trail dots (reuse sparkle styling, dimmer) */
  .vine-sparkle.trail{opacity:.55;width:4px;height:4px;animation-duration:.6s}

  /* F3: secondary CTA — border warms on hover */
  .btn-ghost{transition:transform .25s var(--ease), background .25s, color .25s, border-color .3s, box-shadow .25s}
  .btn-ghost:hover{
    border-color:rgba(212,162,60,.55);
    background:rgba(168,123,32,.06);
    color:var(--fg-0);
  }

  /* F5: top-right CTA — arrow nudges on hover */
  .nav-cta{transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s}
  .nav-cta:hover .arrow{transform:translateX(4px)}

  /* G3: amber focus rings for keyboard nav */
  a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-cta:focus-visible, .play:focus-visible{
    outline:2px solid var(--warm-200);
    outline-offset:2px;
    border-radius:6px;
  }
  .btn:focus-visible, .nav-cta:focus-visible{border-radius:999px}

  /* G1: reduced motion — disable expensive ambient + keep core experience legible */
  @media (prefers-reduced-motion: reduce){
    .vine{animation:none}
    body{animation:none}
    .lamp{animation:lampPulse 10s ease-in-out infinite;filter:none}
    .vine .glint{animation:none}
    .vine .leaf-tip.revealed{animation:none;filter:drop-shadow(0 0 3px rgba(247,193,90,.32))}
    .vine .sap-pulse-path,.vine .firefly,.firefly{display:none !important}
    .vine .leaf.falling{display:none !important}
    .cursor-halo{display:none}
    .vine-sparkle{display:none !important}
    .vine .stem{transition:none}
    .page-spine .spine-leaves{animation:none !important}
  }

  /* ============ A2: page-spine right-margin tendril ============ */
  .page-spine{
    position:absolute;right:18px;width:56px;
    pointer-events:none;z-index:3;
    opacity:0;transition:opacity .8s var(--ease-out);
  }
  .page-spine.ready{opacity:1}
  .page-spine .spine-line{
    position:absolute;left:50%;top:0;bottom:0;width:1.5px;
    transform:translateX(-50%);
    background:linear-gradient(180deg,
      rgba(127,211,174,0) 0%,
      rgba(127,211,174,.22) 6%,
      rgba(127,211,174,.22) 94%,
      rgba(127,211,174,0) 100%);
  }
  .page-spine .spine-leaves{
    position:absolute;right:calc(50% - 1px);width:64px;height:48px;
    transform:translateY(-50%);
    animation:spineSway 7s ease-in-out infinite;
    transform-origin:right center;
  }
  .page-spine .spine-leaves:nth-child(odd){animation-duration:8.4s;animation-delay:-1.6s}
  .page-spine .spine-leaves:nth-child(3n){animation-duration:9.2s;animation-delay:-3s}
  .page-spine .spine-leaves svg{width:100%;height:100%;display:block;overflow:visible}
  .page-spine .leaf-shape{
    fill:#1f4028;
    stroke:#5a8a6e;stroke-width:.45;stroke-opacity:.55;
    opacity:.82;
  }
  .page-spine .leaf-shape.lit{
    fill:#2c5a3e;
    stroke:#f0c870;stroke-opacity:.45;
  }
  .page-spine .spine-curl{
    fill:none;stroke:#3d6b4f;stroke-width:1;stroke-linecap:round;opacity:.55;
  }
  @keyframes spineSway{
    0%,100%{transform:translateY(-50%) rotate(0deg)}
    50%    {transform:translateY(-50%) rotate(3deg)}
  }
  @media(max-width:900px){
    .page-spine{display:none !important}
  }
  @media (prefers-reduced-motion: reduce){
    .page-spine .spine-leaves{animation:none}
  }

  /* ============ C2: italic-emphasis hover (Craft / Page / Plan / grows etc.) ============ */
  .section-title em, .svc .nm em, .cta h2 em, .fp-h em, .vf-h em, .ph-h em,
  .quote blockquote em {
    display:inline-block;
    transition:transform .35s var(--ease-out), filter .35s ease, color .35s ease;
    transform-origin:center;
  }
  .section-title em:hover, .svc .nm em:hover, .cta h2 em:hover, .fp-h em:hover {
    transform:scale(1.02);
    filter:brightness(1.12) drop-shadow(0 0 12px rgba(61,191,140,.18));
  }

  /* ============ C2: process card lift + amber edge glow ============ */
  .proc{
    transition: background .35s, transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
    will-change: transform;
  }
  .proc:hover{
    transform: translateY(-2px);
    box-shadow:
      0 12px 28px -14px rgba(212,162,60,.32),
      0 0 0 1px rgba(212,162,60,.18) inset,
      0 -10px 24px -16px rgba(212,162,60,.25) inset;
  }
  .proc:hover .icon{color:var(--warm-200);transition:color .35s ease}

  /* ============ B2: drifting motes through the lamp glow region ============ */
  .motes{display:none;
    position:absolute;inset:0;
    pointer-events:none;z-index:-1;overflow:hidden;
  }
  .mote{
    position:absolute;
    width:3px;height:3px;border-radius:50%;
    background:radial-gradient(closest-side, rgba(247,193,90,.85), rgba(212,162,60,.35) 50%, transparent 80%);
    opacity:0;
    will-change:transform, opacity;
    animation:moteDrift var(--dur, 26s) linear infinite;
    animation-delay:var(--delay, 0s);
  }
  @keyframes moteDrift{
    0%   {transform:translate(0, 0)        scale(.6); opacity:0}
    8%   {opacity:.7}
    50%  {opacity:.85; transform:translate(var(--dx, 30px), -45vh) scale(1)}
    92%  {opacity:.5}
    100% {transform:translate(calc(var(--dx, 30px) * 1.4), -92vh) scale(.4); opacity:0}
  }
  @media (prefers-reduced-motion: reduce){
    .motes{display:none}
  }

  /* ============ D2: mobile process — horizontal snap scroll ============ */
  @media (max-width: 800px){
    .proc-grid{
      grid-template-columns:repeat(4, 82vw);
      grid-auto-flow:column;
      overflow-x:auto;
      overflow-y:hidden;
      scroll-snap-type:x mandatory;
      scroll-padding:0 32px;
      gap:14px;
      background:transparent;
      border:none;
      border-radius:0;
      padding:0 32px 12px;
      margin:80px -32px 0;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .proc-grid::-webkit-scrollbar{display:none}
    .proc{
      scroll-snap-align:start;
      border:1px solid var(--line);
      border-radius:var(--rad-lg);
      background:var(--bg-1);
      padding:32px 26px 36px;
    }
    .proc .rule{display:none}
    .process{overflow-x:hidden}
  }



/* ---- */


@media (max-width:800px){
  .wrap-lg{padding:0 20px}
  .why-cell{padding:32px}
}
@media (max-width:420px){
  .wrap-lg{padding:0 16px}
  .why-cell{padding:24px}
  .phone{width:100px!important;height:200px!important;border-radius:16px!important}
  .viz-phones{gap:8px!important}
  .ph-screen{padding:14px 7px 7px!important;gap:5px!important}
  .ph-broken-h{font-size:8px!important}
  .ph-h{font-size:11px!important}
}


/* ---- */


@media (max-width:768px){
  .hero{overflow:hidden}
  .vine svg{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    right:0 !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    opacity:.45 !important;
  }
  .vine{
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 4%, rgba(0,0,0,.2) 10%, rgba(0,0,0,.4) 16%, rgba(0,0,0,.65) 24%, rgba(0,0,0,.85) 32%, black 42%, black 82%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, black 8%, black 85%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 4%, rgba(0,0,0,.2) 10%, rgba(0,0,0,.4) 16%, rgba(0,0,0,.65) 24%, rgba(0,0,0,.85) 32%, black 42%, black 82%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, black 8%, black 85%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
  }
}

/* ============ CARE PLAN DETAIL ============ */
.care{
  padding:140px 0;
  background:var(--bg-1);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
body[data-density="tight"] .care{padding:100px 0}
body[data-density="airy"] .care{padding:180px 0}
.care-list{
  margin-top:72px;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--rad-lg);
  overflow:hidden;
}
.care-item{
  background:var(--bg-1);
  padding:36px 28px;
  position:relative;
  transition:background .35s;
}
.care-item:hover{background:var(--bg-2)}
.care-num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--em-300);
  margin-bottom:14px;
}
.care-item h3{
  font-family:var(--serif);
  font-weight:300;
  font-size:22px;
  line-height:1.2;
  margin:0 0 10px;
  color:var(--fg-0);
}
.care-item p{
  font-size:14px;
  line-height:1.6;
  color:var(--fg-2);
  margin:0;
}
@media (max-width: 1000px){
  .care-list{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 560px){
  .care-list{grid-template-columns:1fr}
}

/* ============ FAQ ============ */
.faq{
  padding:140px 0;
  position:relative;
}
body[data-density="tight"] .faq{padding:100px 0}
body[data-density="airy"] .faq{padding:180px 0}
.faq-list{
  margin-top:60px;
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--line);
  max-width:880px;
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:26px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--em-200)}
.faq-q{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(20px, 2.3vw, 26px);
  line-height:1.3;
  color:var(--fg-0);
  letter-spacing:-.01em;
}
.faq-toggle{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--line);
  position:relative;
  flex-shrink:0;
  transition:transform .35s ease, border-color .2s;
}
.faq-toggle::before,
.faq-toggle::after{
  content:"";
  position:absolute;
  background:var(--fg-1);
  border-radius:1px;
  top:50%;
  left:50%;
  transition:transform .35s ease, opacity .35s ease;
}
.faq-toggle::before{
  width:10px;
  height:1.5px;
  transform:translate(-50%, -50%);
}
.faq-toggle::after{
  width:1.5px;
  height:10px;
  transform:translate(-50%, -50%);
}
.faq-item[open] .faq-toggle{
  transform:rotate(45deg);
  border-color:var(--em-300);
}
.faq-item[open] .faq-toggle::after{opacity:0}
.faq-a{
  padding:0 4px 28px;
  max-width:780px;
}
.faq-a p{
  font-size:16px;
  line-height:1.65;
  color:var(--fg-2);
  margin:0;
}
.faq-a a{
  color:var(--em-200);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* ============ POLICY PAGES (privacy / terms) ============ */
.policy{
  padding:120px 0 140px;
  background:var(--bg-0);
}
.policy-wrap{
  max-width:760px;
  margin:0 auto;
  padding:0 32px;
}
.policy .eyebrow-mini{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--em-200);
  margin-bottom:18px;
}
.policy h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(36px, 5vw, 56px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--fg-0);
  margin:0 0 12px;
}
.policy .updated{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--fg-3);
  margin-bottom:48px;
}
.policy h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:24px;
  line-height:1.3;
  color:var(--fg-0);
  margin:44px 0 14px;
}
.policy p, .policy li{
  font-size:16px;
  line-height:1.7;
  color:var(--fg-2);
}
.policy p{margin:0 0 14px}
.policy ul{
  margin:0 0 14px;
  padding-left:22px;
  list-style:disc;
}
.policy li{margin-bottom:6px}
.policy a{
  color:var(--em-200);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.policy .back-link{
  display:inline-block;
  margin-top:48px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-2);
  text-decoration:none;
}
.policy .back-link:hover{color:var(--em-200)}
@media (max-width: 600px){
  .policy{padding:80px 0 100px}
  .policy-wrap{padding:0 20px}
}

/* ============ BLOG / ARTICLE ============ */
.article{
  padding:100px 0 140px;
  background:var(--bg-0);
}
.article-wrap{
  max-width:720px;
  margin:0 auto;
  padding:0 32px;
}
.article-meta{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--em-200);
  margin-bottom:20px;
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.article-meta .dot{width:3px;height:3px;background:var(--fg-3);border-radius:50%}
.article h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(36px, 5.2vw, 60px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--fg-0);
  margin:0 0 28px;
}
.article-deck{
  font-size:20px;
  line-height:1.55;
  color:var(--fg-1);
  margin:0 0 40px;
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.005em;
}
.article-byline{
  display:flex;
  gap:16px;
  align-items:center;
  padding:22px 0;
  margin-bottom:48px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.article-byline-mark{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--bg-2);
  display:grid;place-items:center;
  flex-shrink:0;
}
.article-byline-mark svg{width:18px;height:18px}
.article-byline-text{font-size:13.5px;line-height:1.4;color:var(--fg-2)}
.article-byline-text strong{color:var(--fg-0);font-weight:500;display:block}
.article-byline-text a{color:var(--em-200);text-decoration:none}
.article-byline-text a:hover{text-decoration:underline}

.article-body{
  font-size:17px;
  line-height:1.75;
  color:var(--fg-1);
}
.article-body p{margin:0 0 22px}
.article-body p:first-child::first-letter{
  font-family:var(--serif);
  font-size:3.4em;
  float:left;
  line-height:0.85;
  margin:6px 10px 0 0;
  color:var(--em-200);
  font-weight:400;
}
.article-body h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:30px;
  line-height:1.2;
  color:var(--fg-0);
  margin:56px 0 18px;
  letter-spacing:-.015em;
}
.article-body h3{
  font-family:var(--serif);
  font-weight:300;
  font-size:22px;
  line-height:1.3;
  color:var(--fg-0);
  margin:38px 0 12px;
}
.article-body a{
  color:var(--em-200);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.article-body blockquote{
  border-left:2px solid var(--em-300);
  padding:6px 0 6px 22px;
  margin:32px 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:21px;
  line-height:1.5;
  color:var(--fg-0);
}
.article-body ul, .article-body ol{
  margin:0 0 24px;
  padding-left:24px;
}
.article-body li{margin-bottom:8px}
.article-body img{
  width:100%;
  height:auto;
  border-radius:var(--rad-md, 8px);
  margin:32px 0;
  display:block;
}
.article-body figure{margin:32px 0}
.article-body figcaption{
  font-size:13px;
  color:var(--fg-3);
  text-align:center;
  margin-top:10px;
  font-family:var(--mono);
}
.article-body hr{
  border:none;
  height:1px;
  background:var(--line);
  margin:48px auto;
  width:60px;
}
.article-body code{
  font-family:var(--mono);
  font-size:.92em;
  background:var(--bg-2);
  padding:2px 6px;
  border-radius:4px;
  color:var(--em-200);
}
.article-body pre{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--rad-md, 8px);
  padding:18px 22px;
  margin:28px 0;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.6;
}
.article-body pre code{background:none;padding:0;color:var(--fg-1)}
.article-body strong{color:var(--fg-0);font-weight:600}

.article-footer{
  margin-top:64px;
  padding-top:32px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}
.article-footer .back-link{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-2);
  text-decoration:none;
}
.article-footer .back-link:hover{color:var(--em-200)}
.article-share{
  display:flex;
  gap:10px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-3);
  align-items:center;
}

@media (max-width: 600px){
  .article{padding:60px 0 100px}
  .article-wrap{padding:0 20px}
  .article-body{font-size:16.5px}
  .article-body p:first-child::first-letter{font-size:3em;margin:4px 8px 0 0}
}