@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/WorkSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
    --cream:#F1E7D6;
    --cream-soft:#E8D8BA;
    --paper:#FAF3E6;
    --ink:#2A231C;
    --ink-soft:#6b5f52;
    --orange:#C1502E;
    --orange-dark:#93381C;
    --mustard:#DFA53E;
    --teal:#285C58;
    --teal-dark:#1B403D;
    --clay:#B9673F;
    --line: rgba(42,35,28,0.14);
    --radius-lg: 28px;
    --radius-md: 16px;
    --maxw: 1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--cream);}

  .luma-root{
    background:var(--cream);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.5;
    overflow-x:hidden;
  }

  .luma-root h1, .luma-root h2, .luma-root h3{
    font-family:'Syne', sans-serif;
    font-weight:800;
    text-transform:lowercase;
    margin:0;
    letter-spacing:-0.01em;
  }

  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.06em;
    color:var(--orange-dark);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    text-transform:lowercase;
  }
  .eyebrow::before{
    content:'';
    width:8px;height:8px;border-radius:50%;
    background:var(--orange);
    display:inline-block;
  }

  a{color:inherit;}
  button{font-family:inherit;}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

  /* ---------- NAV ---------- */
  .luma-nav{
    position:sticky; top:0; z-index:50;
    background:rgba(241,231,214,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .luma-nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:78px;
  }
  .brand{ display:flex; align-items:center; gap:12px; cursor:pointer; background:none; border:none; padding:0; text-decoration:none; }
  .brand-mark{ width:38px; height:38px; position:relative; }
  .brand-mark svg{ display:block; width:100%; height:100%; }
  .brand-mark .ring{ transform-origin:19px 19px; transition:transform .6s ease; }
  .brand:hover .brand-mark .ring{ transform:rotate(35deg); }
  .brand:hover .brand-mark circle.sun{ filter:drop-shadow(0 0 6px rgba(223,165,62,0.9)); }
  .brand-word{ font-family:'Syne', sans-serif; font-weight:800; font-size:1.35rem; text-transform:lowercase; color:var(--ink); }

  .nav-links{ display:flex; align-items:center; gap:6px; }
  .nav-btn{
    display:inline-block; text-decoration:none;
    background:none; border:none; font-family:'Work Sans', sans-serif;
    font-size:0.95rem; color:var(--ink); padding:10px 16px; cursor:pointer;
    text-transform:lowercase; border-radius:999px; position:relative;
    transition:background .2s ease, color .2s ease;
  }
  .nav-btn:hover{ background:var(--cream-soft); }
  .nav-btn.active{ color:var(--orange-dark); font-weight:600; }
  .nav-cta{
    background:var(--ink); color:var(--paper); border:none;
    padding:11px 22px; border-radius:999px; font-size:0.9rem;
    text-transform:lowercase; cursor:pointer; margin-left:8px;
    transition:background .2s ease, transform .2s ease;
  }
  .nav-cta:hover{ background:var(--orange-dark); transform:translateY(-1px); }

  .nav-toggle{ display:none; background:none; border:2px solid var(--ink); border-radius:10px; width:44px; height:40px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  .nav-toggle span{ width:20px; height:2px; background:var(--ink); display:block; }

  /* ---------- PAGES ---------- */
  .page{ display:block; }

  section{ padding:96px 0; position:relative; }
  section.tight{ padding:64px 0; }

  /* reveal */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* staggered grid entrance */
  .stagger-group .service-card,
  .stagger-group .work-card,
  .stagger-group .value-card,
  .stagger-group .team-card,
  .stagger-group .process-step{
    opacity:0; transform:translateY(26px) scale(.96);
    transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  }
  .stagger-group.in .service-card,
  .stagger-group.in .work-card,
  .stagger-group.in .value-card,
  .stagger-group.in .team-card,
  .stagger-group.in .process-step{
    opacity:1; transform:translateY(0) scale(1);
  }
  .stagger-group > *:nth-child(1){ transition-delay:.03s; }
  .stagger-group > *:nth-child(2){ transition-delay:.12s; }
  .stagger-group > *:nth-child(3){ transition-delay:.21s; }
  .stagger-group > *:nth-child(4){ transition-delay:.30s; }
  .stagger-group > *:nth-child(5){ transition-delay:.39s; }
  .stagger-group > *:nth-child(6){ transition-delay:.48s; }

  /* card hover lift + tilt: JS sets inline transform directly, so it never
     fights the entrance-animation transform below on specificity */
  .service-card, .work-card, .value-card, .team-card{
    transition: transform .2s ease, box-shadow .25s ease;
  }

  /* page transitions */
  .page.leaving{ animation:lumaPageOut .22s ease forwards; }
  .page.entering{ animation:lumaPageIn .5s cubic-bezier(.16,1,.3,1) forwards; }
  @keyframes lumaPageOut{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(-10px); } }
  @keyframes lumaPageIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

  /* hero entrance stagger */
  .hero-item{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .hero-anim .hero-item{ opacity:1; transform:translateY(0); }
  .hero-anim .hero-item:nth-child(1){ transition-delay:.05s; }
  .hero-anim .hero-item:nth-child(2){ transition-delay:.15s; }
  .hero-anim .hero-item:nth-child(3){ transition-delay:.28s; }
  .hero-anim .hero-item:nth-child(4){ transition-delay:.4s; }
  .hero-art-item{ opacity:0; transform:scale(.85); transition:opacity .8s ease .3s, transform .8s cubic-bezier(.16,1,.3,1) .3s; }
  .hero-anim .hero-art-item{ opacity:1; transform:scale(1); }

  /* ambient lamp glow on the mark */
  .brand-mark circle.sun{ animation:lumaBreathe 4.5s ease-in-out infinite; transform-origin:center; }
  @keyframes lumaBreathe{
    0%, 100%{ filter:drop-shadow(0 0 0px rgba(223,165,62,0)); }
    50%{ filter:drop-shadow(0 0 5px rgba(223,165,62,0.55)); }
  }

  /* nav sliding indicator */
  .nav-indicator{
    position:absolute; top:0; height:100%; border-radius:999px;
    background:var(--cream-soft); z-index:-1;
    transition:left .35s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1), opacity .2s ease;
    opacity:0;
  }
  .nav-links{ position:relative; }

  /* button ripple */
  .btn, .nav-cta, .submit-btn, .filter-btn{ position:relative; overflow:hidden; }
  .luma-ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,0.5);
    transform:scale(0); animation:lumaRipple .55s ease-out forwards; pointer-events:none;
  }
  @keyframes lumaRipple{ to{ transform:scale(1); opacity:0; } }

  /* cursor glow */
  .cursor-glow{
    position:absolute; width:340px; height:340px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(223,165,62,0.35), rgba(193,80,46,0.12) 45%, transparent 70%);
    transform:translate(-50%,-50%); opacity:0; transition:opacity .4s ease; z-index:0;
  }
  .hero:hover .cursor-glow{ opacity:1; }

  @media (prefers-reduced-motion: reduce){
    .reveal, .hero-item, .hero-art-item{ opacity:1; transform:none; transition:none; }
    .stagger-group .service-card, .stagger-group .work-card, .stagger-group .value-card, .stagger-group .team-card, .stagger-group .process-step{
      opacity:1; transform:none; transition:none;
    }
    .brand:hover .brand-mark .ring{ transform:none; }
    .brand-mark circle.sun{ animation:none; }
    .page.leaving, .page.entering{ animation:none; }
    .cursor-glow{ display:none; }
  }
  @media (hover: none){
    .cursor-glow{ display:none; }
  }

  /* ---------- HERO ---------- */
  .hero{ padding:88px 0 60px; position:relative; overflow:hidden; }
  .hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; }
  .hero h1{ font-size:clamp(2.6rem, 5vw, 4.4rem); line-height:1.02; margin-bottom:26px; }
  .hero h1 em{ font-style:normal; color:var(--orange-dark); }
  .hero p.lede{ font-size:1.2rem; color:var(--ink-soft); max-width:46ch; margin-bottom:34px; }
  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 28px; border-radius:999px; border:2px solid transparent;
    font-size:0.98rem; text-transform:lowercase; cursor:pointer;
    transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn-primary{ background:var(--orange); color:var(--paper); }
  .btn-primary:hover{ background:var(--orange-dark); transform:translateY(-2px); }
  .btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
  .btn-outline:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
  .btn:focus-visible, .nav-btn:focus-visible, .nav-cta:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:3px solid var(--teal); outline-offset:2px;
  }

  .hero-art{ position:relative; height:420px; z-index:1; }
  .hero-art svg{ width:100%; height:100%; }
  .floaty{ animation:lumaFloat 7s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  .floaty-slow{ animation-duration:11s; }
  .floaty-fast{ animation-duration:5s; animation-delay:.5s; }
  @keyframes lumaFloat{
    0%, 100%{ transform:translateY(0px); }
    50%{ transform:translateY(-14px); }
  }
  @media (prefers-reduced-motion: reduce){ .floaty{ animation:none; } }

  /* ---------- philosophy strip ---------- */
  .philosophy{ background:var(--teal); color:var(--paper); border-radius:var(--radius-lg); margin:0 32px; }
  .philosophy .wrap{ max-width:900px; padding:80px 32px; }
  .philosophy .eyebrow{ color:var(--mustard); }
  .philosophy .eyebrow::before{ background:var(--mustard); }
  .philosophy p{ font-size:1.5rem; line-height:1.45; font-family:'Syne', sans-serif; font-weight:700; text-transform:lowercase; }
  .philosophy p span{ color:var(--mustard); }

  /* ---------- cards / grids ---------- */
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }

  .service-card{
    background:var(--paper); border-radius:var(--radius-md); padding:34px 30px;
    border:1px solid var(--line); transition:transform .25s ease, box-shadow .25s ease;
  }
  .service-card:hover{ box-shadow:0 16px 30px rgba(42,35,28,0.1); }
  .service-icon{ width:52px; height:52px; margin-bottom:22px; }
  .service-card h3{ font-size:1.3rem; margin-bottom:12px; }
  .service-card p{ color:var(--ink-soft); margin:0; }

  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:20px; }
  .section-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); }
  .section-head .eyebrow{ margin-bottom:8px; }

  /* work cards */
  .work-card{ display:block; color:inherit; text-decoration:none; background:var(--paper); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); transition:transform .25s ease, box-shadow .25s ease; cursor:default; }
  a.work-card{ cursor:pointer; }
  .work-card:hover{ box-shadow:0 18px 34px rgba(42,35,28,0.12); }
  .art{ height:200px; position:relative; overflow:hidden; }
  .art .shape{ position:absolute; }
  .art .circle{ border-radius:50%; }
  .art--1{ background:var(--mustard); } .art--1 .c1{ width:150px;height:150px; background:var(--orange); border-radius:50%; top:-40px; left:-30px; }
  .art--1 .c2{ width:70px;height:70px; background:var(--teal); border-radius:50%; bottom:20px; right:40px; }
  .art--2{ background:var(--teal); } .art--2 .c1{ width:220px;height:220px; border-radius:50%; background:var(--cream); top:60px; right:-90px; }
  .art--2 .c2{ width:60px;height:60px; background:var(--orange); border-radius:50%; bottom:-10px; left:30px; }
  .art--3{ background:var(--orange); } .art--3 .c1{ width:0;height:0; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:170px solid var(--mustard); top:-30px; left:50%; transform:translateX(-50%) rotate(180deg); }
  .art--4{ background:var(--clay); } .art--4 .c1{ width:180px;height:180px; border-radius:50%; background:var(--teal); bottom:-70px; right:-40px; }
  .art--4 .c2{ width:50px;height:50px; background:var(--cream); border-radius:50%; top:30px; left:30px; }
  .art--5{ background:var(--cream-soft); } .art--5 .c1{ width:160px;height:160px; border-radius:50%; background:var(--orange); top:20px; left:-50px; }
  .art--5 .c2{ width:90px;height:90px; border-radius:50%; background:var(--teal); bottom:-30px; right:20px; }
  .art--6{ background:var(--mustard); } .art--6 .c1{ width:130px;height:260px; border-radius:0 0 130px 130px; background:var(--orange-dark); top:-30px; left:40%; }
  .art--beachside{ background:linear-gradient(180deg, #E8D8BA 0 42%, #DFA53E 42% 57%, #285C58 57%); }
  .art--beachside .sun{ width:92px; height:92px; border-radius:50%; background:var(--orange); top:32px; right:42px; }
  .art--beachside .wave{ left:-30px; right:-30px; height:84px; border-radius:50%; background:rgba(250,243,230,0.78); }
  .art--beachside .wave-one{ bottom:24px; }
  .art--beachside .wave-two{ bottom:-18px; background:rgba(241,231,214,0.9); }
  .art--website-snippet{ background:var(--cream-soft); display:flex; align-items:center; justify-content:center; padding:18px; }
  .art--website-snippet img{ width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:0 18px 32px rgba(42,35,28,0.18); }

  .work-info{ padding:22px 24px 26px; }
  .work-info h3{ font-size:1.15rem; margin-bottom:6px; }
  .work-info p{ color:var(--ink-soft); margin:0 0 18px; }
  .work-meta{ display:flex; justify-content:space-between; color:var(--ink-soft); font-family:'Space Mono', monospace; font-size:0.82rem; text-transform:lowercase; }
  .featured-work{ display:grid; grid-template-columns:0.85fr 1fr; align-items:stretch; }
  .featured-work .art{ height:auto; min-height:280px; }
  .featured-work .work-info{ display:flex; flex-direction:column; justify-content:center; padding:38px; }
  .featured-work .work-info h3{ font-size:clamp(2rem, 4vw, 3.2rem); }

  .filter-row{ display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap; }
  .filter-btn{ background:var(--paper); border:1px solid var(--line); padding:10px 20px; border-radius:999px; cursor:pointer; text-transform:lowercase; font-size:0.9rem; transition:all .2s ease; }
  .filter-btn.active, .filter-btn:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

  .work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .work-card.hidden{ display:none; }

  /* process */
  .process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .process-step{ border-top:3px solid var(--orange); padding-top:18px; }
  .process-step:nth-child(2){ border-color:var(--mustard); }
  .process-step:nth-child(3){ border-color:var(--teal); }
  .process-step:nth-child(4){ border-color:var(--clay); }
  .process-num{ font-family:'Space Mono', monospace; font-size:0.85rem; color:var(--ink-soft); }
  .process-step h3{ font-size:1.2rem; margin:8px 0 10px; }
  .process-step p{ color:var(--ink-soft); margin:0; font-size:0.95rem; }

  /* cta banner */
  .cta-banner{ background:var(--orange); color:var(--paper); border-radius:var(--radius-lg); margin:0 32px; padding:70px 40px; text-align:center; }
  .cta-banner h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:26px; color:var(--paper); }
  .cta-banner .btn-outline{ border-color:var(--paper); color:var(--paper); }
  .cta-banner .btn-outline:hover{ background:var(--paper); color:var(--orange-dark); }

  /* services page detail */
  .service-detail{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; padding:60px 0; border-bottom:1px solid var(--line); }
  .service-detail:last-child{ border-bottom:none; }
  .service-detail.reverse{ grid-template-columns:1.1fr 0.9fr; }
  .service-detail.reverse .sd-art{ order:2; }
  .sd-art{ height:280px; border-radius:var(--radius-md); position:relative; overflow:hidden; }
  .sd-num{ font-family:'Space Mono', monospace; color:var(--orange-dark); margin-bottom:10px; display:block; }
  .service-detail h2{ font-size:2rem; margin-bottom:16px; }
  .service-detail > div p.desc{ color:var(--ink-soft); font-size:1.05rem; margin-bottom:22px; max-width:52ch; }
  .included{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
  .included li{ display:flex; align-items:center; gap:10px; font-size:0.95rem; }
  .included li::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--teal); flex-shrink:0; }

  /* about */
  .about-hero p.lede{ max-width:60ch; }
  .values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .value-card{ background:var(--paper); border-radius:var(--radius-md); padding:26px; border:1px solid var(--line); }
  .value-card .num{ font-family:'Space Mono', monospace; color:var(--mustard); font-size:0.85rem; }
  .value-card h3{ font-size:1.05rem; margin:10px 0 8px; }
  .value-card p{ font-size:0.9rem; color:var(--ink-soft); margin:0; }

  .team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .team-card{ text-align:center; }
  .team-avatar{ width:100%; aspect-ratio:1; border-radius:50%; margin-bottom:18px; position:relative; overflow:hidden; }
  .team-card h3{ font-size:1.1rem; margin-bottom:4px; text-transform:none; font-family:'Work Sans'; font-weight:600; }
  .team-card p{ color:var(--ink-soft); font-size:0.9rem; margin:0; font-family:'Space Mono', monospace; }

  /* contact */
  .contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; }
  .field{ margin-bottom:20px; }
  .field label{ display:block; font-size:0.85rem; margin-bottom:8px; text-transform:lowercase; color:var(--ink-soft); font-family:'Space Mono', monospace; }
  .field input, .field select, .field textarea{
    width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid var(--line);
    background:var(--paper); font-family:'Work Sans'; font-size:1rem; color:var(--ink);
  }
  .field textarea{ min-height:120px; resize:vertical; }
  .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .submit-btn{ background:var(--ink); color:var(--paper); border:none; padding:16px 30px; border-radius:999px; cursor:pointer; text-transform:lowercase; font-size:1rem; transition:background .2s ease; }
  .submit-btn:hover{ background:var(--orange-dark); }
  .form-note{ margin-top:14px; font-size:0.88rem; color:var(--teal-dark); display:none; }
  .form-note.show{ display:block; }

  .contact-info{ background:var(--teal); color:var(--paper); border-radius:var(--radius-md); padding:38px 34px; height:fit-content; }
  .contact-info .eyebrow{ color:var(--mustard); } .contact-info .eyebrow::before{ background:var(--mustard); }
  .contact-info h3{ color:var(--paper); font-size:1.3rem; margin-bottom:22px; }
  .contact-line{ margin-bottom:16px; }
  .contact-line .label{ font-family:'Space Mono', monospace; font-size:0.78rem; opacity:0.7; display:block; margin-bottom:3px; }
  .contact-line .val{ font-size:1.05rem; }
  .socials{ display:flex; gap:12px; margin-top:26px; }
  .social-dot{ width:40px; height:40px; border-radius:50%; background:rgba(250,243,230,0.14); display:flex; align-items:center; justify-content:center; font-family:'Space Mono', monospace; font-size:0.75rem; text-decoration:none; color:var(--paper); transition:background .2s ease; }
  .social-dot:hover{ background:var(--mustard); color:var(--ink); }
  .screenshot-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; overflow:hidden; }
  .screenshot-card img{ display:block; width:100%; height:auto; object-fit:contain; border-radius:12px; }
  .screenshot-card.mobile-shot{ max-width:360px; margin:0 auto; }
  .screenshot-card.mobile-shot img{ max-height:640px; object-fit:contain; }

  /* footer */
  footer{ padding:60px 0 40px; border-top:1px solid var(--line); margin-top:40px; }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; margin-bottom:40px; }
  .footer-tagline{ max-width:32ch; color:var(--ink-soft); font-size:0.95rem; }
  .footer-links{ display:flex; gap:50px; flex-wrap:wrap; }
  .footer-col h4{ font-family:'Space Mono', monospace; font-size:0.8rem; text-transform:lowercase; color:var(--ink-soft); margin-bottom:14px; }
  .footer-col a{ display:block; text-decoration:none; color:var(--ink); font-size:0.95rem; margin-bottom:10px; cursor:pointer; background:none; border:none; padding:0; font-family:'Work Sans'; }
  .footer-col a:hover{ color:var(--orange-dark); }
  .footer-bottom{ display:flex; justify-content:space-between; color:var(--ink-soft); font-size:0.82rem; font-family:'Space Mono', monospace; flex-wrap:wrap; gap:10px; }

  @media (max-width: 900px){
    .hero-grid, .grid-3, .grid-2, .work-grid, .process-row, .service-detail, .service-detail.reverse, .values-grid, .team-grid, .contact-grid{
      grid-template-columns:1fr !important;
    }
    .featured-work{ grid-template-columns:1fr; }
    .featured-work .art{ min-height:220px; }
    .service-detail.reverse .sd-art{ order:0; }
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
    .nav-links.open{
      display:flex; flex-direction:column; position:absolute; top:78px; left:0; right:0;
      background:var(--cream); padding:14px 32px 24px; border-bottom:1px solid var(--line); gap:2px;
    }
    .philosophy, .cta-banner{ margin:0 16px; }
    .wrap{ padding:0 20px; }
    .row-2{ grid-template-columns:1fr; }
    .included{ grid-template-columns:1fr; }
  }