:root{
    --cream:#F4EFE5;        /* primary warm cream base */
    --cream-2:#ECE4D5;      /* deeper cream for alternating sections */
    --paper:#FBF9F4;        /* lightest, cards and forms */
    --ink:#1C211F;          /* type */
    --ink-soft:#454D47;
    --patina:#25453B;       /* deep green accent */
    --patina-deep:#1A332B;
    --sand:#C2AE8E;         /* warm hairline accent */
    --fog:#8A938C;
    --line:rgba(28,33,31,.14);
    --line-soft:rgba(28,33,31,.08);
    --r:3px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--cream);color:var(--ink);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:400;line-height:1.05;letter-spacing:-.014em}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1280px;margin:0 auto;padding:0 48px}
  .eyebrow{font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--patina)}
  .eyebrow.fog{color:var(--fog)}
  .eyebrow.sand{color:var(--sand)}

  /* hairline detail used through the page (early modern) */
  .rule{height:1px;background:var(--line);width:100%}

  /* ============ NAV (light from the top) ============ */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 48px;background:rgba(244,239,229,.82);backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;transition:padding .4s ease,border-color .4s ease,background .4s ease;
  }
  nav.scrolled{padding:13px 48px;border-bottom:1px solid var(--line);background:rgba(244,239,229,.94)}
  .brand{display:flex;align-items:center;gap:13px;color:var(--ink)}
  .brand .mark{flex:none;transition:transform .5s ease}
  .brand:hover .mark{transform:rotate(-5deg)}
  .brand .word{font-family:"Fraunces",serif;font-size:21px;letter-spacing:.17em;font-weight:500}
  .brand .sub{display:block;font-size:8px;letter-spacing:.42em;text-transform:uppercase;font-weight:600;color:var(--fog);margin-top:2px}
  .navlinks{display:flex;align-items:center;gap:34px}
  .navlinks a{font-size:13px;letter-spacing:.04em;color:var(--ink-soft);transition:color .3s}
  .navlinks a:hover{color:var(--patina)}
  .nav-cta{border:1px solid var(--patina);color:var(--patina);padding:10px 20px;border-radius:var(--r);font-size:12.5px;letter-spacing:.05em;transition:all .35s ease}
  .nav-cta:hover{background:var(--patina);color:#fff!important}
  .nav-toggle{display:none}

  /* ============ HERO (framed video on cream) ============ */
  .hero{padding:104px 24px 30px}
  .frame{
    position:relative;height:82vh;min-height:560px;border-radius:var(--r);overflow:hidden;
    background:linear-gradient(120deg,#3a5247,#1d352b);   /* fallback tone if video and poster fail */
    box-shadow:0 40px 90px -50px rgba(26,51,43,.6);
  }
  .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero-poster{position:absolute;inset:0;background-size:cover;background-position:center;
    background-image:url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2000&q=80")}
  .scrim{position:absolute;inset:0;background:
    linear-gradient(95deg,rgba(20,33,27,.62) 0%,rgba(20,33,27,.20) 42%,rgba(20,33,27,0) 70%),
    linear-gradient(0deg,rgba(20,33,27,.30),rgba(20,33,27,0) 36%)}
  .hero-copy{position:absolute;left:0;bottom:0;padding:0 56px 54px;max-width:680px;color:#fff}
  .hero-copy .eyebrow{color:#dfe6e1;margin-bottom:20px}
  .hero-copy h1{font-size:clamp(42px,6.4vw,86px);font-weight:300;letter-spacing:-.03em;line-height:.98}
  .hero-copy h1 em{font-style:italic;font-weight:400}
  .hero-copy .lede{margin-top:22px;max-width:48ch;font-size:17px;line-height:1.6;color:#eef1ee;font-weight:300}
  .hero-actions{margin-top:30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:10px;background:var(--cream);color:var(--ink);
    padding:15px 28px;border-radius:var(--r);font-size:14px;font-weight:500;letter-spacing:.02em;
    transition:transform .35s ease,background .35s ease}
  .btn:hover{transform:translateY(-2px);background:#fff}
  .btn .arr{transition:transform .35s ease}.btn:hover .arr{transform:translateX(4px)}
  .btn-ghost{background:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);border-radius:0;padding:6px 2px}
  .btn-ghost:hover{background:transparent;border-color:#fff;transform:none}
  /* swatch strip below the framed video */
  .hero-rail{display:flex;height:6px;margin:14px 0 0;border-radius:2px;overflow:hidden}
  .hero-rail i{flex:1}

  /* ============ SECTION SHELL ============ */
  .sec{padding:128px 0}
  .sec.tight{padding:104px 0}
  .sec.cream{background:var(--cream)}
  .sec.cream2{background:var(--cream-2)}
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.16,.7,.3,1),transform .9s cubic-bezier(.16,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}

  /* ============ MANIFESTO ============ */
  .manifesto{display:grid;grid-template-columns:.82fr 1.18fr;gap:84px;align-items:start}
  .manifesto .label{position:sticky;top:118px}
  .manifesto .label .ix{font-family:"Fraunces";font-style:italic;font-size:15px;color:var(--sand);display:block;margin-bottom:16px}
  .manifesto h2{font-size:clamp(30px,3.6vw,50px);font-weight:300;letter-spacing:-.02em;line-height:1.1}
  .manifesto h2 em{font-style:italic;color:var(--patina)}
  .manifesto .body p{margin-bottom:22px;color:var(--ink-soft);font-size:18px;line-height:1.78;max-width:58ch}
  .manifesto .body p:first-child{font-size:21px;line-height:1.6;color:var(--ink)}
  .sig{margin-top:10px;display:flex;align-items:center;gap:16px}
  .sig .nm{font-family:"Fraunces";font-style:italic;font-size:19px}
  .sig .rl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}

  /* ============ WORK (cream, tiles with captions below) ============ */
  .work .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:54px;gap:30px;flex-wrap:wrap}
  .work .head h2{font-size:clamp(30px,4.2vw,58px);font-weight:300;letter-spacing:-.02em}
  .work .head h2 em{font-style:italic;color:var(--patina)}
  .work .head p{max-width:34ch;color:var(--ink-soft);font-size:15px}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:26px 24px}
  .tile{grid-column:span 4}
  .tile.wide{grid-column:span 8}
  .tile.half{grid-column:span 6}
  .tile .ph{height:300px;border-radius:var(--r);background-size:cover;background-position:center;
    background-color:#cfc7b6;position:relative;overflow:hidden;box-shadow:0 24px 48px -34px rgba(26,51,43,.5)}
  .tile.wide .ph,.tile.half .ph{height:380px}
  .tile .ph .inner{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .tile:hover .ph .inner{transform:scale(1.05)}
  /* Clearly-marked photography slot, shown until a real image is dropped in */
  .ph .slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
    text-align:center;padding:24px;background:linear-gradient(180deg,rgba(244,239,229,.5),rgba(244,239,229,.78))}
  .ph .slot::after{content:"";position:absolute;inset:14px;border:1px solid rgba(37,69,59,.32);border-radius:calc(var(--r) - 6px)}
  .ph .slot>*{position:relative;z-index:1}
  .ph .slot .lbl{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--patina)}
  .ph .slot .fn{font-family:"Fraunces",serif;font-size:17px;color:var(--ink);max-width:30ch}
  .ph .slot .pth{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--patina-deep);opacity:.85;word-break:break-all}
  .ph .slot .sz{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);opacity:.7}
  .tile .cap{margin-top:16px}
  .tile .cap .t{font-family:"Fraunces";font-size:20px}
  .tile .cap .f{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--patina);margin-top:6px}

  /* ============ DISCIPLINES (cream-2) ============ */
  .disc .head{max-width:60ch;margin-bottom:56px}
  .disc .head h2{font-size:clamp(30px,3.8vw,52px);font-weight:300;letter-spacing:-.02em;margin-top:16px}
  .drows{border-top:1px solid var(--line)}
  .drow{display:grid;grid-template-columns:60px 1fr 1.3fr auto;gap:34px;align-items:center;
    padding:32px 8px;border-bottom:1px solid var(--line);transition:background .4s,padding .4s}
  .drow:hover{background:rgba(255,255,255,.5);padding-left:22px;padding-right:22px}
  .drow .num{font-family:"Fraunces";font-style:italic;font-size:16px;color:var(--sand)}
  .drow .nm{font-family:"Fraunces";font-size:26px;letter-spacing:-.01em}
  .drow .dx{color:var(--ink-soft);font-size:15px;line-height:1.6;max-width:52ch}
  .drow .tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--patina);border:1px solid var(--line);padding:7px 14px;border-radius:30px;white-space:nowrap}

  /* ============ PALETTE (the deep green accent) ============ */
  .palette{background:var(--patina);color:#eef2ee}
  .palette .top{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:50px}
  .palette .eyebrow{color:var(--sand)}
  .palette h2{font-size:clamp(30px,3.8vw,52px);font-weight:300;color:#fff;letter-spacing:-.02em;margin-top:14px}
  .palette .top p{color:#cdd8d1;font-size:15.5px;max-width:42ch;justify-self:end}
  .swatches{display:grid;grid-template-columns:repeat(6,1fr);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.5)}
  .sw{height:320px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 18px}
  .sw .nm{font-family:"Fraunces";font-size:20px;line-height:1}
  .sw .hx{font-size:10.5px;letter-spacing:.1em;margin-top:8px;opacity:.72;font-weight:500}
  .sw .fin{font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:13px;opacity:.85}
  .sw.dark{color:#fff}.sw.light{color:#26302b}

  /* ============ PROCESS (cream) ============ */
  .proc .head{max-width:54ch;margin-bottom:62px}
  .proc .head h2{font-size:clamp(30px,3.8vw,52px);font-weight:300;margin-top:14px;letter-spacing:-.02em}
  .moves{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
  .move{padding:40px 38px 44px;border-right:1px solid var(--line)}
  .move:last-child{border-right:none}
  .move .ix{font-family:"Fraunces";font-style:italic;font-size:46px;font-weight:300;color:var(--sand);line-height:1}
  .move h3{font-size:24px;margin:18px 0 12px}
  .move p{color:var(--ink-soft);font-size:15px;line-height:1.65}

  /* ============ CLIENTELE (cream, framed image + stats) ============ */
  .client{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
  .client .pic{height:440px;border-radius:var(--r);background-size:cover;background-position:center;
    background:linear-gradient(140deg,#cdc4b2,#9aa39c);box-shadow:0 36px 70px -40px rgba(26,51,43,.55);position:relative;overflow:hidden}
  .client .pic .inner{position:absolute;inset:0;background-size:cover;background-position:center}
  .client h2{font-size:clamp(30px,3.6vw,50px);font-weight:300;letter-spacing:-.02em;margin-top:16px}
  .client h2 em{font-style:italic;color:var(--patina)}
  .client p.body{margin-top:20px;color:var(--ink-soft);font-size:16px;max-width:44ch}
  .stats{display:flex;gap:46px;margin-top:38px;flex-wrap:wrap}
  .stats .n{font-family:"Fraunces";font-weight:300;font-size:34px;display:block;letter-spacing:-.01em}
  .stats .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fog);margin-top:7px}

  /* ============ CONSULT (green left panel + cream form) ============ */
  .consult-sec{padding:0 0 0}
  .consult{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
  .consult .left{background:var(--patina);color:#eef2ee;padding:96px 72px}
  .consult .left .eyebrow{color:var(--sand)}
  .consult .left h2{font-size:clamp(30px,3.4vw,46px);font-weight:300;color:#fff;letter-spacing:-.02em;margin-top:14px}
  .consult .left h2 em{font-style:italic;color:var(--sand)}
  .consult .left p{margin-top:20px;color:#cdd8d1;font-size:16px;max-width:40ch}
  .detail{margin-top:38px;display:flex;flex-direction:column;gap:16px}
  .detail .d{font-size:14.5px;color:#d2ddd6}
  .detail .d b{color:#fff;font-weight:600}
  .consult .right{background:var(--paper);padding:96px 72px}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);margin-bottom:9px;font-weight:600}
  .field input,.field select,.field textarea{width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;padding:10px 2px;font-family:inherit;font-size:16px;color:var(--ink);transition:border-color .3s}
  .field textarea{resize:vertical;min-height:64px}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--patina)}
  .submit{width:100%;margin-top:12px;background:var(--patina);color:#fff;border:none;padding:17px;border-radius:var(--r);font-family:inherit;font-size:14px;font-weight:500;letter-spacing:.04em;cursor:pointer;transition:background .35s,transform .35s}
  .submit:hover{background:var(--patina-deep);transform:translateY(-2px)}

  /* ============ FOOTER (deep green, warmer than black) ============ */
  footer{background:var(--patina-deep);color:#c3d0c8;padding:84px 0 38px}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:54px;border-bottom:1px solid rgba(255,255,255,.12)}
  .foot-brand .word{font-family:"Fraunces";font-size:25px;letter-spacing:.15em;color:#fff;font-weight:500}
  .foot-brand p{margin-top:16px;max-width:34ch;font-size:14px;line-height:1.6;color:#9fb0a7}
  .fcol h5{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-bottom:16px;font-weight:600}
  .fcol a,.fcol p{display:block;font-size:14px;color:#aebcb4;margin-bottom:10px;transition:color .3s}
  .fcol a:hover{color:#fff}
  .foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;flex-wrap:wrap;gap:14px}
  .foot-bot p{font-size:12.5px;color:#82938a;letter-spacing:.02em}
  .foot-credit a{color:#82938a;text-decoration:none;border-bottom:1px solid rgba(130,147,138,.35);transition:color .2s,border-color .2s}
  .foot-credit a:hover{color:#c2ae8e;border-color:#c2ae8e}
  .foot-rail{display:flex;gap:5px}
  .foot-rail i{width:26px;height:7px;border-radius:1px}

  /* ============ STICKY CTA ============ */
  .sticky-cta{position:fixed;right:26px;bottom:26px;z-index:90;display:flex;flex-direction:column;gap:10px;
    opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .45s ease,transform .45s ease}
  .sticky-cta.show{opacity:1;transform:none;pointer-events:auto}
  .scta{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;border-radius:40px;
    font-size:14px;font-weight:600;letter-spacing:.02em;box-shadow:0 18px 40px -16px rgba(26,51,43,.5);
    transition:transform .3s ease,background .3s ease}
  .scta:hover{transform:translateY(-2px)}
  .scta-quote{background:var(--patina);color:#fff}
  .scta-quote:hover{background:var(--patina-deep)}
  .scta-call{background:var(--paper);color:var(--patina);border:1px solid var(--patina)}
  .scta-call:hover{background:#fff}
  .scta svg{width:15px;height:15px}
  .mobile-cta{display:none}

  /* ============ RESPONSIVE ============ */
  @media(max-width:980px){
    .wrap{padding:0 26px}
    nav,nav.scrolled{padding:14px 26px}
    .navlinks{display:none}
    .navlinks.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(244,239,229,.98);padding:24px 26px;gap:18px;box-shadow:0 20px 40px -22px rgba(0,0,0,.25);align-items:flex-start}
    .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
    .nav-toggle span{width:24px;height:1.5px;background:var(--ink)}
    .hero{padding:88px 14px 20px}.frame{height:74vh}
    .hero-copy{padding:0 26px 36px}
    .manifesto{grid-template-columns:1fr;gap:28px}.manifesto .label{position:static}
    .grid{gap:22px 18px}
    .tile,.tile.wide,.tile.half{grid-column:span 12}
    .tile .ph,.tile.wide .ph,.tile.half .ph{height:300px}
    .drow{grid-template-columns:1fr;gap:9px;padding:26px 4px}.drow .tag{justify-self:start}
    .swatches{grid-template-columns:repeat(3,1fr)}.sw{height:188px}
    .palette .top,.client{grid-template-columns:1fr;gap:26px}.palette .top p{justify-self:start}
    .moves{grid-template-columns:1fr}.move{border-right:none;border-bottom:1px solid var(--line)}
    .client .pic{height:300px;order:-1}
    .consult{grid-template-columns:1fr}.consult .left,.consult .right{padding:52px 30px}
    .foot-top{grid-template-columns:1fr 1fr}
    .sec{padding:84px 0}
    .sticky-cta{display:none}
    footer{padding-bottom:104px}
    .mobile-cta{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:95;
      background:rgba(244,239,229,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
      padding:10px 12px calc(12px + env(safe-area-inset-bottom));gap:10px}
    .mobile-cta a{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px;
      border-radius:var(--r);font-size:14px;font-weight:600;letter-spacing:.02em}
    .mobile-cta .m-call{background:var(--paper);color:var(--patina);border:1px solid var(--patina)}
    .mobile-cta .m-quote{background:var(--patina);color:#fff}
    .mobile-cta svg{width:15px;height:15px}
  }
  @media(max-width:560px){.foot-top{grid-template-columns:1fr}.stats{gap:30px}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}