*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

  :root{
    --ink:#080808;
    --cream:#F3EFE7;
    --white:#FFFFFF;
    --body:#3A3A34;
    --muted:#6E6E63;
    --line:#DDD9CE;
    --disp:'Bodoni Moda',serif;
    --sans:'Jost',sans-serif;
  }

  html{scroll-behavior:smooth;}
  body{font-family:var(--sans);background:var(--white);color:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{text-decoration:none;color:inherit;}
  img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}

  /* type helpers */
  .eyebrow{
    font-family:var(--sans);font-size:13px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  }
  .disp{font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.02;}

  .btn{
    display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;
    transition:all .25s;border:1px solid transparent;border-radius:0;
  }
  .btn-ink{background:var(--ink);color:var(--cream);}
  .btn-ink:hover{background:var(--body);}
  .btn-out{border-color:var(--ink);color:var(--ink);}
  .btn-out:hover{background:var(--ink);color:var(--cream);}
  .btn-cream{background:var(--cream);color:var(--ink);}
  .btn-cream:hover{background:var(--white);}

  .wrap{max-width:1240px;margin:0 auto;padding:0 42px;}

  /* ── NAV ─────────────────────────────── */
  nav{
    position:relative;z-index:20;background:var(--white);
    padding:0 62px;height:136px;border-bottom:1px solid var(--line);
    overflow:visible;
  }
  .nav-top{display:flex;justify-content:center;gap:38px;padding-top:22px;}
  .nav-row{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:2px;position:relative;z-index:22;
  }
  .nav-social{display:flex;gap:22px;align-items:center;}
  .nav-social a{width:19px;height:19px;color:var(--ink);opacity:.8;transition:opacity .2s;}
  .nav-social a:hover{opacity:1;}
  .nav-social svg{width:100%;height:100%;fill:currentColor;}
  .nav-top a{
    font-size:13.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ink);padding-bottom:3px;
  }
  .nav-top a.on{border-bottom:1px solid var(--ink);}
  .nav-right{display:flex;justify-content:flex-end;}

  /* ── HERO ────────────────────────────── */
  .hero{position:relative;padding-bottom:70px;}
  /* wordmark: sits inside the nav and overflows past its bottom border */
  /* sits BELOW the social/contact row (which ends ~86px), so it can run nearly
     full width without colliding, while still overflowing the nav's bottom border */
  .hero-mark{
    position:absolute;left:40px;right:40px;top:92px;
    font-family:var(--disp);font-weight:700;color:var(--ink);
    font-size:clamp(32px,6.5vw,112px);letter-spacing:-.025em;line-height:.94;
    text-align:center;text-transform:uppercase;white-space:nowrap;
    z-index:21;pointer-events:none;
  }
  /* "DESIGNS BY" stays light; "DELIA" carries the weight */
  .wm-light{font-weight:400;}
  /* ── ANIMATED HERO ──────────────────────
     cream ground so the dark wordmark still reads where it overlaps */
  .hero-stage{
    position:relative;margin-top:0;background:var(--cream);overflow:hidden;
    min-height:clamp(540px,63vw,730px);display:flex;align-items:center;
  }
  .hero-inner{
    position:relative;z-index:3;width:100%;max-width:1400px;margin:0 auto;
    display:grid;grid-template-columns:1.16fr .84fr;align-items:center;
    gap:clamp(30px,4.5vw,72px);
    padding:clamp(96px,10vw,140px) clamp(24px,5vw,62px) clamp(56px,7vw,88px);
  }

  /* ── left: kinetic headline ── */
  .hero-left .eyebrow{display:block;margin-bottom:22px;}
  .hero-left h1{
    font-family:var(--disp);font-weight:600;letter-spacing:-.032em;line-height:1.03;
    font-size:clamp(28px,4.1vw,58px);color:var(--ink);margin:0 0 30px;
  }
  .cycle{
    display:inline-block;vertical-align:bottom;overflow:hidden;
    height:1.06em;position:relative;
    transition:width .42s cubic-bezier(.62,0,.2,1);
  }
  .cycle-track{display:block;transition:transform .42s cubic-bezier(.62,0,.2,1);}
  .cycle-track span{
    display:block;height:1.06em;line-height:1.06em;font-style:italic;font-weight:500;
    white-space:nowrap;
  }
  .cycle::after{
    content:'';position:absolute;left:0;right:0;bottom:.1em;height:2px;
    background:var(--ink);opacity:.85;
  }
  .hero-line{white-space:nowrap;}
  .hero-btns{display:flex;gap:12px;flex-wrap:wrap;}

  /* ── right: wireframe that resolves into a real site ── */
  .build-wrap{perspective:1500px;position:relative;}
  .build{
    background:var(--ink);border-radius:12px;padding:12px;
    box-shadow:0 40px 80px rgba(8,8,8,.34),0 6px 18px rgba(8,8,8,.16);
    transform:rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d;
    transition:transform .5s cubic-bezier(.3,0,.2,1);
  }
  .build-bar{display:flex;align-items:center;gap:6px;padding:2px 4px 11px;}
  .build-bar i{width:8px;height:8px;border-radius:50%;background:rgba(243,239,231,.3);flex:0 0 auto;}
  .build-url{
    margin-left:10px;flex:1;background:rgba(243,239,231,.09);border-radius:20px;
    font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.06em;
    color:rgba(243,239,231,.5);padding:4px 12px;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:color .4s;
  }
  .build-stage{
    position:relative;border-radius:5px;overflow:hidden;background:#101010;
    aspect-ratio:4/3;
  }

  /* ── phase 1: wireframe skeleton ── */
  .build-wire{
    position:absolute;inset:0;padding:9px;display:grid;gap:7px;
    grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(0,1fr);
    transition:opacity .5s ease,transform .5s cubic-bezier(.4,0,.2,1),filter .5s;
  }
  .build.resolved .build-wire{opacity:0;transform:scale(1.06);filter:blur(6px);}
  .blk{
    background:rgba(243,239,231,.13);border-radius:3px;
    opacity:0;transform:translateY(18px) scale(.94);
    display:flex;gap:4px;padding:5px;overflow:hidden;
  }
  .blk.mid{background:rgba(243,239,231,.2);}
  .blk.solid{background:rgba(243,239,231,.55);}
  .build.run .blk{animation:blkin .5s cubic-bezier(.2,.85,.25,1) forwards;}
  @keyframes blkin{to{opacity:1;transform:none;}}

  /* fake content inside the skeleton */
  .blk.wnav{grid-column:span 6;grid-row:span 1;align-items:center;}
  .blk.whero{grid-column:span 6;grid-row:span 4;flex-direction:column;justify-content:center;align-items:center;gap:6px;}
  .blk.wcard{grid-column:span 2;grid-row:span 3;flex-direction:column;gap:4px;}
  .blk.wfoot{grid-column:span 6;grid-row:span 1;align-items:center;}
  .ln{height:3px;border-radius:2px;background:rgba(243,239,231,.42);flex:0 0 auto;}
  .ln.s{width:14%;} .ln.m{width:26%;} .ln.l{width:44%;} .ln.xl{width:62%;}
  .ln.tall{height:5px;}
  .dot{width:9px;height:9px;border-radius:50%;background:rgba(243,239,231,.5);flex:0 0 auto;}
  .ghost{
    height:9px;width:38px;border-radius:2px;background:rgba(243,239,231,.62);flex:0 0 auto;
  }
  .fill{flex:1;background:rgba(243,239,231,.09);border-radius:2px;}
  .spacer{flex:1;}

  /* ── phase 2: the real site ── */
  .build-site{
    position:absolute;inset:0;opacity:0;transform:scale(.94);
    filter:blur(10px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .6s ease;
  }
  .build-site img{width:100%;height:100%;object-fit:cover;object-position:top center;}
  .build.resolved .build-site{opacity:1;transform:none;filter:blur(0);}

  /* cursor glare */
  .build-glare{
    position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
    background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%),
      rgba(243,239,231,.16), transparent 62%);
  }
  .build-wrap:hover .build-glare{opacity:1;}

  /* caption under the frame */
  .build-label{
    margin-top:18px;text-align:center;font-family:var(--sans);
    font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);transition:opacity .35s;
  }
  .build-label b{font-weight:600;color:var(--ink);}

  @media(prefers-reduced-motion:reduce){
    .blk{opacity:1;transform:none;}
    .build.run .blk{animation:none;}
    .cycle-track,.build,.build-wire,.build-site{transition:none;}
    .build-wire{opacity:0;}
    .build-site{opacity:1;transform:none;filter:none;}
  }

  /* ── CREAM PANEL w/ rounded top ───────── */
  .panel{
    background:var(--cream);border-radius:14px 14px 0 0;
    margin:0 42px;padding:96px 0 104px;position:relative;overflow:hidden;
  }
  .panel::before{
    content:'';position:absolute;top:-14%;left:50%;transform:translateX(-50%);
    width:min(1020px,86vw);aspect-ratio:1;border-radius:50%;
    background:#EDE8DD;z-index:0;
  }
  .panel-in{position:relative;z-index:2;}

  /* flanked heading */
  .flank{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:40px;margin-bottom:38px;
  }
  .flank .eyebrow:first-child{text-align:right;}
  .flank h2{
    font-family:var(--disp);font-weight:600;letter-spacing:-.03em;
    font-size:clamp(34px,4.9vw,62px);line-height:1.04;text-align:center;color:var(--ink);
  }
  .flank h2 em{font-style:italic;}

  .lede{
    font-size:15.5px;font-weight:300;line-height:1.95;color:var(--muted);
    max-width:600px;margin:0 auto 74px;text-align:center;
  }

  /* arched offering cards */
  .arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-bottom:56px;}
  .arch-card{text-align:center;}
  .arch-img{
    height:340px;overflow:hidden;background:var(--white);
    border-radius:1000px 1000px 0 0;margin-bottom:26px;
  }
  .arch-img img{transition:transform .8s;}
  .arch-card:hover .arch-img img{transform:scale(1.04);}
  .arch-card h3{
    font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink);margin-bottom:14px;
  }
  .arch-card p{font-size:14.5px;font-weight:300;line-height:1.85;color:var(--muted);}
  .panel-cta{text-align:center;}

  /* ── TRUSTED BY strip ─────────────────── */
  .seen{
    background:var(--cream);margin:0 42px;padding:52px 0;
    display:grid;grid-template-columns:auto 1fr;align-items:center;gap:40px;
  }
  .seen-in{padding-left:42px;}
  .seen-logos{
    display:flex;justify-content:space-around;align-items:center;gap:20px;padding-right:42px;
  }
  .seen-logos span{
    font-family:var(--disp);font-size:clamp(20px,2.5vw,34px);font-weight:400;
    color:var(--ink);opacity:.78;letter-spacing:-.02em;white-space:nowrap;
  }

  /* ── PROMISE split w/ arc ─────────────── */
  .promise{position:relative;padding:108px 0 120px;overflow:hidden;}
  .promise .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .arc{
    position:absolute;top:-90px;left:-6%;width:66%;height:150%;
    border:1px solid var(--ink);opacity:.42;border-radius:50%;
    pointer-events:none;z-index:0;
  }
  .promise-txt{position:relative;z-index:3;max-width:430px;}
  .promise-txt .eyebrow{display:block;margin-bottom:22px;}
  .promise-txt h2{
    font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.03;
    font-size:clamp(38px,5.2vw,64px);color:var(--ink);margin-bottom:26px;
  }
  .promise-txt h2 em{font-style:italic;}
  .promise-txt p{font-size:15px;font-weight:300;line-height:1.95;color:var(--muted);margin-bottom:34px;}
  .promise-img{height:520px;overflow:hidden;background:var(--cream);position:relative;z-index:2;}

  /* ── PROJECTS ─────────────────────────── */
  .projects{padding:20px 0 96px;}
  /* horizontal carousel — arrows page through it */
  .proj-grid{
    display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  }
  .proj-grid::-webkit-scrollbar{display:none;}
  .proj-card{display:block;flex:0 0 calc((100% - 64px)/3);scroll-snap-align:start;}
  .proj-shot{height:380px;overflow:hidden;background:var(--cream);}
  .proj-shot img{transition:transform .8s;}
  .proj-card:hover .proj-shot img{transform:scale(1.04);}
  .proj-body{
    background:var(--cream);border-radius:0 0 130px 130px;
    padding:26px 30px 54px;text-align:center;
  }
  .proj-body h3{
    font-family:var(--sans);font-weight:500;font-size:clamp(19px,1.9vw,25px);
    letter-spacing:-.005em;color:var(--ink);margin-bottom:8px;
  }
  .proj-body span{font-size:14px;font-weight:300;color:var(--body);}
  .proj-body span u{text-decoration:none;border-bottom:1px solid var(--body);}
  .arrows{display:flex;justify-content:center;gap:36px;margin-top:52px;}
  .arrows button{
    background:none;border:none;cursor:pointer;color:var(--ink);
    font-size:24px;line-height:1;opacity:.75;transition:opacity .2s;padding:6px;
  }
  .arrows button:hover{opacity:1;}
  .arrows button[disabled]{opacity:.22;cursor:default;}

  /* ── SHOWCASE: giant scrolling type + layered photos ── */
  .showcase{
    background:var(--ink);position:relative;overflow:hidden;
    height:clamp(430px,46vw,640px);
  }
  /* giant type, scrolls horizontally, sits mid-band */
  .sc-type{
    position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
    white-space:nowrap;overflow:hidden;z-index:2;
  }
  .sc-track{display:inline-flex;animation:sc 42s linear infinite;will-change:transform;}
  .sc-track span{
    font-family:var(--disp);font-weight:700;color:var(--cream);
    font-size:clamp(90px,17vw,250px);line-height:1;letter-spacing:-.03em;
    text-transform:uppercase;padding-right:.34em;display:inline-block;
  }
  @keyframes sc{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* layered photos — some behind the type, some in front */
  .sc-img{position:absolute;overflow:hidden;background:#141410;will-change:transform;}
  .sc-img img{width:100%;height:100%;object-fit:cover;}
  .sc-1{left:9%;top:12%;width:clamp(150px,17vw,270px);height:clamp(200px,23vw,360px);z-index:1;}
  .sc-2{right:8%;top:6%;width:clamp(140px,15vw,240px);height:clamp(180px,20vw,310px);z-index:1;}
  .sc-3{
    left:50%;margin-left:clamp(-160px,-11vw,-110px);
    bottom:-9%;width:clamp(190px,22vw,330px);height:clamp(250px,29vw,440px);z-index:3;
  }
  @media(prefers-reduced-motion:reduce){.sc-track{animation:none;}}

  /* ── BLACK MISSION BAND w/ curved top ─── */
  .mission{background:var(--ink);color:var(--cream);position:relative;padding:150px 0 104px;}
  .mission::before{
    content:'';position:absolute;top:-1px;left:-10%;width:120%;height:150px;
    background:var(--white);border-radius:0 0 50% 50%;
  }
  .mission-in{position:relative;z-index:2;}
  .mission .eyebrow{color:var(--cream);text-align:center;display:block;margin-bottom:16px;opacity:.85;}
  .mission h2{
    font-family:var(--disp);font-weight:600;letter-spacing:-.03em;
    font-size:clamp(34px,4.6vw,58px);text-align:center;margin-bottom:64px;color:var(--cream);
  }
  .mission h2 em{font-style:italic;}
  .mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
  .m-col{padding:0 36px;text-align:center;border-right:1px solid rgba(243,239,231,.2);}
  .m-col:last-child{border-right:none;}
  .m-col h4{
    font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--cream);margin-bottom:14px;
  }
  .m-col p{font-size:14px;font-weight:300;line-height:1.9;color:rgba(243,239,231,.62);}

  /* ── REVIEWS ──────────────────────────── */
  .reviews{padding:104px 0;}
  .rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:start;}
  .rev h3{
    font-family:var(--disp);font-weight:600;font-size:clamp(26px,3vw,38px);
    letter-spacing:-.025em;color:var(--ink);text-align:center;margin-bottom:20px;
  }
  .rev p{font-size:14.5px;font-weight:300;line-height:1.95;color:var(--muted);text-align:center;}
  .rev cite{
    display:block;font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink);margin-top:22px;text-align:center;
  }

  /* ── ABOUT ────────────────────────────── */
  .about{background:var(--cream);padding:104px 0;}
  .about .wrap{display:grid;grid-template-columns:.85fr 1fr;gap:66px;align-items:center;}
  .about-img{height:520px;overflow:hidden;background:var(--white);border-radius:1000px 1000px 0 0;}
  .about-txt .eyebrow{display:block;margin-bottom:18px;}
  .about-txt h2{
    font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.05;
    font-size:clamp(34px,4.6vw,58px);color:var(--ink);margin-bottom:24px;
  }
  .about-txt h2 em{font-style:italic;}
  .about-txt p{font-size:15px;font-weight:300;line-height:1.95;color:var(--muted);margin-bottom:20px;}

  /* ── CTA ──────────────────────────────── */
  .cta{padding:120px 0;text-align:center;}
  .cta .eyebrow{display:block;margin-bottom:22px;}
  .cta h2{
    font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.02;
    font-size:clamp(40px,6.4vw,86px);color:var(--ink);margin-bottom:26px;
  }
  .cta h2 em{font-style:italic;}
  .cta p{font-size:15px;font-weight:300;line-height:1.9;color:var(--muted);max-width:470px;margin:0 auto 36px;}

  /* ── FOOTER ───────────────────────────── */
  footer{background:var(--ink);color:var(--cream);padding:80px 0 34px;overflow:hidden;}
  .f-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:60px;padding-bottom:60px;}
  .f-grid p{font-size:14px;font-weight:300;line-height:1.9;color:rgba(243,239,231,.5);max-width:300px;}
  .f-col h5{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);margin-bottom:20px;}
  .f-col a{display:block;font-size:14px;font-weight:300;color:rgba(243,239,231,.5);margin-bottom:12px;transition:color .2s;}
  .f-col a:hover{color:var(--cream);}
  .f-mark{
    font-family:var(--disp);font-weight:700;text-transform:uppercase;
    font-size:clamp(40px,10.2vw,146px);letter-spacing:-.035em;line-height:.9;
    text-align:center;color:var(--cream);white-space:nowrap;
    border-top:1px solid rgba(243,239,231,.18);padding-top:44px;
  }
  .f-bot{
    display:flex;justify-content:space-between;padding-top:26px;
    font-size:12.5px;font-weight:300;color:rgba(243,239,231,.38);
  }

  /* ── RESPONSIVE ───────────────────────── */
  @media(max-width:960px){
    nav{height:112px;padding:0 20px;}
    .nav-top{display:none;}
    .nav-row{margin-top:0;padding-top:18px;}
    .wrap{padding:0 20px;}
    .hero-mark{
      left:14px;right:14px;top:74px;
      white-space:normal;font-size:clamp(24px,6.6vw,44px);line-height:1;
    }
    .hero-stage{min-height:0;}
    .hero-inner{
      grid-template-columns:1fr;gap:38px;
      padding:clamp(96px,26vw,150px) 20px 56px;
    }
    .build{transform:none !important;}
    .build-canvas{grid-auto-rows:20px;}
    .hero-left h1{font-size:clamp(24px,6.2vw,38px);}
    .panel,.seen{margin:0 14px;}
    .panel{padding:64px 0 70px;}
    .seen{grid-template-columns:1fr;gap:26px;text-align:center;}
    .seen-in{padding-left:0;}
    .seen-logos{flex-wrap:wrap;justify-content:center;gap:26px;padding-right:0;}
    .flank{grid-template-columns:1fr;gap:14px;}
    .flank .eyebrow{text-align:center !important;}
    .arch-grid,.mission-grid,.rev-grid{grid-template-columns:1fr;gap:40px;}
    .proj-grid{gap:18px;}
    .proj-card{flex:0 0 84%;}
    .promise .wrap,.about .wrap{grid-template-columns:1fr;gap:40px;}
    .promise{padding:70px 0 80px;}
    .arc{display:none;}
    .promise-img,.about-img{height:360px;}
    .m-col{border-right:none;border-bottom:1px solid rgba(243,239,231,.2);padding:32px 0;}
    .m-col:last-child{border-bottom:none;}
    .mission{padding:100px 0 70px;}
    .mission::before{height:80px;top:-1px;}
    .f-grid{grid-template-columns:1fr;gap:34px;}
    .f-mark{font-size:clamp(30px,11vw,60px);white-space:normal;}
    .f-bot{flex-direction:column;gap:8px;}
    .reviews,.about,.cta{padding:70px 0;}
  }

  /* ═══════════════════════════════════════
     INTERIOR PAGES
     ═══════════════════════════════════════ */

  /* page hero (interior) — wordmark still overlaps, then a title band */
  .page-hero{
    background:var(--cream);text-align:center;
    padding:clamp(110px,13vw,170px) 42px clamp(56px,6vw,84px);
  }
  .page-hero .eyebrow{display:block;margin-bottom:16px;}
  .page-hero h1{
    font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.02;
    font-size:clamp(42px,6.6vw,88px);color:var(--ink);margin-bottom:22px;
  }
  .page-hero h1 em{font-style:italic;font-weight:400;}
  .page-hero p{
    font-size:15.5px;font-weight:300;line-height:1.9;color:var(--muted);
    max-width:560px;margin:0 auto;
  }

  /* generic section spacing */
  .sec{padding:clamp(64px,7vw,104px) 0;}
  .sec-cream{background:var(--cream);}
  .sec-ink{background:var(--ink);color:var(--cream);}

  /* two-column feature rows (services) */
  .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center;margin-bottom:clamp(52px,6vw,88px);}
  .row:last-child{margin-bottom:0;}
  .row.flip .row-img{order:2;}
  .row-img{height:clamp(320px,34vw,460px);overflow:hidden;background:var(--cream);}
  .row-img.arch{border-radius:1000px 1000px 0 0;}
  .row-txt .eyebrow{display:block;margin-bottom:16px;}
  .row-txt h2{
    font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.05;
    font-size:clamp(30px,4vw,48px);color:var(--ink);margin-bottom:18px;
  }
  .row-txt h2 em{font-style:italic;font-weight:400;}
  .row-txt p{font-size:15px;font-weight:300;line-height:1.95;color:var(--muted);margin-bottom:22px;}
  .tick{list-style:none;margin-bottom:28px;}
  .tick li{
    font-size:13px;font-weight:500;letter-spacing:.05em;color:var(--ink);
    padding:11px 0;border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:14px;
  }
  .tick li::before{content:'';width:18px;height:1px;background:var(--ink);flex-shrink:0;opacity:.5;}

  /* work grid (full portfolio) */
  .work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px);}
  .work-card{display:block;}
  .work-shot{height:clamp(280px,32vw,420px);overflow:hidden;background:var(--cream);}
  .work-shot img{transition:transform .8s;}
  .work-card:hover .work-shot img{transform:scale(1.04);}
  .work-meta{padding:22px 4px 0;display:flex;justify-content:space-between;align-items:baseline;gap:18px;border-top:1px solid var(--line);margin-top:20px;}
  .work-meta h3{font-family:var(--sans);font-weight:500;font-size:clamp(19px,2vw,25px);letter-spacing:-.005em;color:var(--ink);}
  .work-meta span{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
  .work-card p{font-size:14.5px;font-weight:300;line-height:1.85;color:var(--muted);margin-top:12px;padding:0 4px;}

  /* ── TEMPLATE SHOP ─────────────────────── */
  .shop{
    display:grid;grid-template-columns:236px 1fr;
    gap:clamp(28px,4vw,64px);align-items:start;
  }
  .shop-side{position:sticky;top:26px;align-self:start;}

  .fgroup{margin-bottom:30px;}
  .fgroup-head{
    width:100%;background:none;border:none;cursor:pointer;padding:0 0 11px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink);text-align:left;
    border-bottom:1px solid var(--ink);
  }
  .fgroup-head .val{color:var(--muted);font-weight:500;}
  .fgroup-head .chev{
    font-size:9px;transition:transform .28s;flex:0 0 auto;color:var(--muted);
  }
  .fgroup.closed .chev{transform:rotate(-90deg);}
  .fgroup-body{
    display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease;
    padding-top:14px;
  }
  .fgroup.closed .fgroup-body{grid-template-rows:0fr;padding-top:0;}
  .fgroup-body > div{overflow:hidden;}

  .fopt{
    display:flex;align-items:center;gap:11px;cursor:pointer;
    padding:7px 0;font-size:14px;font-weight:300;color:var(--body);
    transition:color .18s;
  }
  .fopt:hover{color:var(--ink);}
  .fopt input{position:absolute;opacity:0;width:0;height:0;}
  .fopt .box{
    width:14px;height:14px;border:1px solid var(--ink);flex:0 0 auto;
    position:relative;transition:background .18s;
  }
  .fopt .box::after{
    content:'';position:absolute;inset:2px;background:var(--ink);
    opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s;
  }
  .fopt input:checked ~ .box::after{opacity:1;transform:none;}
  .fopt input:focus-visible ~ .box{outline:2px solid var(--ink);outline-offset:2px;}

  .fclear{
    background:none;border:none;padding:0;cursor:pointer;
    font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
    transition:color .2s,border-color .2s;
  }
  .fclear:hover{color:var(--ink);border-color:var(--ink);}

  /* helper card at the foot of the rail */
  .fhelp{
    margin-top:34px;background:var(--ink);color:var(--cream);padding:24px 22px;
  }
  .fhelp h4{font-family:var(--sans);font-weight:500;font-size:18px;line-height:1.35;margin-bottom:9px;}
  .fhelp p{font-size:13px;font-weight:300;line-height:1.7;color:rgba(243,239,231,.62);margin-bottom:16px;}
  .fhelp a{
    font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--cream);border-bottom:1px solid rgba(243,239,231,.4);padding-bottom:3px;
  }

  /* ── template grid ── */
  .shop-main .count{
    font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);margin-bottom:22px;
  }
  .tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,40px);}
  .tpl-card{background:var(--white);border:1px solid var(--line);transition:opacity .3s,transform .3s;}
  .tpl-card.hide{display:none;}
  .tpl-body{padding:22px 24px 26px;}
  .tpl-body h3{font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.005em;color:var(--ink);margin-bottom:7px;}
  .tpl-meta{font-size:13px;font-weight:300;color:var(--muted);}
  .tpl-meta b{font-weight:500;color:var(--ink);}
  .tpl-tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;}
  .tpl-tags span{
    font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    color:var(--muted);border:1px solid var(--line);padding:4px 9px;
  }
  /* ── live layout preview: real template scaled inside a browser frame ── */
  .tpl-preview{
    display:block;position:relative;background:var(--cream);
    padding:clamp(16px,1.8vw,26px) clamp(16px,1.8vw,26px) 0;
    overflow:hidden;
  }
  .tpl-desktop{
    background:var(--white);border:1px solid var(--line);border-bottom:none;
    border-radius:5px 5px 0 0;overflow:hidden;
    box-shadow:0 14px 34px rgba(8,8,8,.1);
  }
  .tpl-chrome{
    display:flex;align-items:center;gap:5px;
    padding:8px 10px;background:#EFEBE3;border-bottom:1px solid var(--line);
  }
  .tpl-chrome i{width:7px;height:7px;border-radius:50%;background:#CFC8BA;}
  .tpl-chrome b{
    flex:1;margin-left:8px;height:12px;border-radius:6px;background:#E3DCD0;
  }
  /* the scaled viewport */
  .tpl-screen{
    position:relative;overflow:hidden;background:var(--cream);
    height:clamp(300px,30vw,430px);
  }
  .tpl-screen img{transition:transform 2.4s cubic-bezier(.3,0,.2,1);}
  /* on hover the preview scrolls down the page, revealing more of the layout */
  .tpl-card.is-live:hover .tpl-screen img{transform:translateY(calc(-100% + clamp(300px,30vw,430px)));}
  .tpl-screen img{
    width:100%;height:auto;display:block;object-fit:cover;object-position:top center;
  }

  /* phone overlay, bottom-right, like GoLive's */
  .tpl-phone{
    position:absolute;right:clamp(14px,2vw,30px);bottom:0;z-index:3;
    width:clamp(86px,10vw,132px);
    border-radius:14px;padding:5px;background:#15161A;
    box-shadow:0 18px 38px rgba(8,8,8,.3);
  }
  .tpl-phone::before{
    content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:28%;height:4px;border-radius:3px;background:#2E3036;z-index:2;
  }
  .tpl-phone-screen{
    position:relative;overflow:hidden;border-radius:10px;background:var(--cream);
    aspect-ratio:9/17;
  }
  .tpl-phone-screen img{
    width:100%;height:auto;display:block;object-fit:cover;object-position:top center;
  }

  .tpl-live{
    position:absolute;left:clamp(24px,2.6vw,38px);top:clamp(24px,2.6vw,38px);z-index:4;
    background:var(--ink);color:var(--cream);
    font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    padding:7px 12px;
  }
  .tpl-card.is-live:hover .tpl-desktop{box-shadow:0 20px 44px rgba(8,8,8,.16);}
  .tpl-card.is-live .tpl-desktop{transition:box-shadow .4s;}
  .tpl-card.is-live .tpl-body h3 a{transition:opacity .2s;}
  .tpl-card.is-live:hover .tpl-body h3 a{opacity:.65;}


  .tpl-empty{
    grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--muted);
  }
  .tpl-empty h3{font-family:var(--sans);font-weight:500;font-size:23px;color:var(--ink);margin-bottom:10px;}
  .tpl-empty p{font-size:14.5px;font-weight:300;}

  /* waitlist / inline form */
  .form-card{max-width:560px;margin:0 auto;}
  .field{margin-bottom:16px;text-align:left;}
  .field label{
    display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink);margin-bottom:8px;
  }
  .field input,.field select,.field textarea{
    width:100%;background:var(--white);border:1px solid var(--line);
    padding:14px 16px;font-family:var(--sans);font-size:15px;font-weight:300;
    color:var(--ink);outline:none;border-radius:0;-webkit-appearance:none;
    transition:border-color .2s;
  }
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);}
  .field textarea{resize:vertical;min-height:130px;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .form-note{font-size:12.5px;font-weight:300;color:var(--muted);margin-top:14px;line-height:1.7;}
  button.btn{cursor:pointer;font-family:var(--sans);width:100%;}

  /* contact split */
  .contact-split{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(40px,5vw,80px);align-items:start;}
  .contact-side .eyebrow{display:block;margin-bottom:14px;}
  .contact-side h2{
    font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.05;
    font-size:clamp(30px,4vw,48px);color:var(--ink);margin-bottom:20px;
  }
  .contact-side h2 em{font-style:italic;font-weight:400;}
  .contact-side p{font-size:15px;font-weight:300;line-height:1.95;color:var(--muted);margin-bottom:26px;}
  .c-line{margin-bottom:18px;}
  .c-line .k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:5px;}
  .c-line .v{font-size:15px;font-weight:300;color:var(--muted);}

  /* FAQ */
  .faq{max-width:800px;margin:0 auto;}
  .faq details{border-bottom:1px solid var(--line);padding:22px 0;}
  .faq summary{
    cursor:pointer;list-style:none;font-family:var(--sans);font-weight:500;
    font-size:clamp(16px,1.7vw,19px);letter-spacing:0;color:var(--ink);
    display:flex;justify-content:space-between;align-items:center;gap:20px;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:'+';font-family:var(--sans);font-weight:400;font-size:24px;color:var(--muted);flex-shrink:0;}
  .faq details[open] summary::after{content:'–';}
  .faq p{font-size:15px;font-weight:300;line-height:1.95;color:var(--muted);margin-top:14px;max-width:660px;}

  /* stats strip */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .stat{padding:38px 30px;text-align:center;border-right:1px solid var(--line);}
  .stat:last-child{border-right:none;}
  .stat .n{font-family:var(--disp);font-weight:600;font-size:clamp(36px,4.4vw,56px);color:var(--ink);line-height:1;margin-bottom:10px;}
  .stat .l{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}

  @media(max-width:960px){
    .row,.work-grid,.tpl-grid,.contact-split,.stats{grid-template-columns:1fr;}
    .tpl-screen{height:clamp(280px,58vw,380px);}
    .tpl-phone{width:clamp(78px,17vw,110px);}
    .shop{grid-template-columns:1fr;gap:34px;}
    .shop-side{position:static;}
    .row.flip .row-img{order:0;}
    .field-row{grid-template-columns:1fr;}
    .stat{border-right:none;border-bottom:1px solid var(--line);}
    .stat:last-child{border-bottom:none;}
    .page-hero{padding-left:20px;padding-right:20px;}
    .work-meta{flex-direction:column;gap:6px;}
  }

  /* ── how-it-works steps ─────────────────── */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
  .step{padding:32px 26px 34px;border-right:1px solid var(--line);}
  .step:last-child{border-right:none;}
  .step-n{
    font-family:var(--disp);font-weight:600;font-size:34px;color:var(--ink);
    opacity:.22;line-height:1;margin-bottom:14px;
  }
  .step h3{font-family:var(--sans);font-weight:500;font-size:18px;letter-spacing:-.005em;line-height:1.35;color:var(--ink);margin-bottom:10px;}
  .step p{font-size:14px;font-weight:300;line-height:1.85;color:var(--muted);}

  /* callout panel */
  .notice{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,52px);
    margin-top:46px;background:var(--ink);color:var(--cream);
    padding:clamp(28px,3.4vw,48px);
  }
  .notice h4{
    font-family:var(--sans);font-weight:500;font-size:19px;letter-spacing:-.005em;
    line-height:1.4;color:var(--cream);margin-bottom:12px;
  }
  .notice p{font-size:14px;font-weight:300;line-height:1.9;color:rgba(243,239,231,.66);margin-bottom:10px;}
  .notice p:last-child{margin-bottom:0;}
  .notice b{color:var(--cream);font-weight:500;}

  /* price split on a detail page */
  .prices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);}
  .price-card{border:1px solid var(--line);padding:clamp(26px,3vw,40px);background:var(--white);}
  .price-card.dark{background:var(--ink);color:var(--cream);border-color:var(--ink);}
  .price-card .eyebrow{display:block;margin-bottom:14px;}
  .price-card.dark .eyebrow{color:var(--cream);opacity:.7;}
  .price-card h3{font-family:var(--sans);font-weight:500;font-size:23px;letter-spacing:-.005em;margin-bottom:12px;}
  .price-card p{font-size:14.5px;font-weight:300;line-height:1.9;color:var(--muted);}
  .price-card.dark p{color:rgba(243,239,231,.66);}
  .price-figure{font-family:var(--disp);font-weight:600;font-size:40px;line-height:1;margin-bottom:10px;}

  @media(max-width:960px){
    .steps{grid-template-columns:1fr;}
    .step{border-right:none;border-bottom:1px solid var(--line);}
    .step:last-child{border-bottom:none;}
    .notice,.prices{grid-template-columns:1fr;}
  }

  /* ── form submit confirmation ── */
  .form-ok{
    border:1px solid var(--line);background:#FBFAF7;padding:34px 30px;text-align:center;
    animation:formOkIn .45s cubic-bezier(.16,1,.3,1) both;
  }
  .form-ok .tick{
    width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  }
  .form-ok .tick svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.6;fill:none;
    stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;
    animation:formOkTick .5s .2s ease forwards;}
  .form-ok h3{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--ink);margin:0 0 10px;letter-spacing:.01em;}
  .form-ok p{font-size:14px;font-weight:300;line-height:1.8;color:var(--muted);margin:0;}
  @keyframes formOkIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  @keyframes formOkTick{to{stroke-dashoffset:0;}}
  .form-err{
    margin-top:14px;font-size:13px;font-weight:400;line-height:1.7;color:#9A3412;
    background:#FEF6F0;border:1px solid #F0D9C8;padding:12px 14px;
  }
  form.is-sending{opacity:.6;pointer-events:none;}
  @media (prefers-reduced-motion:reduce){
    .form-ok{animation:none;}
    .form-ok .tick svg{animation:none;stroke-dashoffset:0;}
  }

  /* ── TABLET / NARROW-DESKTOP ──────────────
     Between 961px and 1240px the desktop grid had no breakpoint of its
     own, so a layout designed for 1240px was being squeezed into ~1000px:
     four step columns at ~200px each, the flanked heading pinched in the
     middle, and the wordmark running the full width. */
  @media(max-width:1180px) and (min-width:961px){
    .wrap{padding:0 32px;}

    /* heading: drop the flanking eyebrows, centre the title */
    .flank{grid-template-columns:1fr;gap:14px;text-align:center;}
    .flank .eyebrow{display:none;}
    .flank .eyebrow:first-child{display:block;text-align:center;}

    /* steps: 4 narrow columns -> 2 comfortable ones */
    .steps{grid-template-columns:repeat(2,1fr);}
    .step{border-right:1px solid var(--line);}
    .step:nth-child(2n){border-right:none;}
    .step:nth-child(-n+2){border-bottom:1px solid var(--line);}
    .step:last-child{border-right:none;}
  }

  @media(max-width:1180px) and (min-width:961px){
    /* wordmark sat on one nowrap line and filled the header edge to edge */
    .hero-mark{font-size:clamp(30px,5.4vw,72px);top:88px;left:28px;right:28px;}
  }

  /* compact replacement for the old two-column notice panel */
  .steps-note{
    margin-top:26px;font-size:14px;font-weight:300;line-height:1.9;
    color:var(--muted);max-width:70ch;
  }
  .steps-note b{font-weight:500;color:var(--ink);}

  /* .flank is a 3-column grid (eyebrow | title | eyebrow). With the second
     eyebrow removed the title would sit in column 2 and hang left of centre,
     so this variant collapses it to a simple centred stack. */
  .flank-solo{
    grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;
  }
  .flank-solo .eyebrow:first-child{text-align:center;}

  /* ── MOBILE NAV ───────────────────────────
     Below 960px .nav-top was display:none with no hamburger, leaving the
     site with no navigation at all. Links are restored on two wrapped rows
     and the wordmark drops into normal flow so it can't collide with them. */
  @media(max-width:960px){
    nav{height:auto;padding:0 20px 22px;}
    .nav-top{
      display:flex;flex-wrap:wrap;justify-content:center;
      gap:10px 18px;padding-top:16px;
    }
    .nav-top a{font-size:11px;letter-spacing:.1em;padding-bottom:2px;}
    .nav-row{margin-top:0;padding-top:14px;}
    .hero-mark{
      position:static;display:block;margin-top:16px;
      left:auto;right:auto;top:auto;
      font-size:clamp(26px,7.6vw,46px);line-height:1;white-space:normal;
    }
  }