:root{
    --ivory:#F4F1EA;
    --ivory-deep:#ECE6DA;
    --charcoal:#1B1E1C;
    --charcoal-soft:#2A2E2B;
    --bronze:#9C7C4E;
    --bronze-light:#BA9468;
    --green:#65A616;
    --blue:#128DD4;
    --stone:#6F6A61;
    --line:rgba(27,30,28,.14);
    --line-light:rgba(244,241,234,.18);
    --serif:"Cormorant Garamond",Garamond,serif;
    --sans:"Jost",sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans);
    background:var(--ivory);
    color:var(--charcoal);
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--bronze);color:var(--ivory)}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}

  /* ---------- shared atoms ---------- */
  .wrap{width:min(1180px,90vw);margin-inline:auto}
  .eyebrow{
    font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
    font-weight:400;color:var(--bronze);
    display:flex;align-items:center;gap:.85em;margin-bottom:1.4rem;
  }
  .eyebrow::before{content:"◆";font-size:.55em;color:var(--bronze)}
  .eyebrow.center{justify-content:center}
  h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.01em}
  h2{font-size:clamp(2.1rem,5vw,3.6rem)}
  .lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--stone);max-width:46ch}
  .btn{
    display:inline-flex;align-items:center;gap:.8em;
    font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
    font-weight:400;padding:1.05em 2.1em;border:1px solid var(--charcoal);
    color:var(--charcoal);background:transparent;cursor:pointer;
    transition:.45s cubic-bezier(.2,.7,.2,1);position:relative;overflow:hidden;
  }
  .btn::after{content:"";position:absolute;inset:0;background:var(--charcoal);transform:translateY(101%);transition:.45s cubic-bezier(.2,.7,.2,1);z-index:-1}
  .btn:hover{color:var(--ivory)}
  .btn:hover::after{transform:translateY(0)}
  .btn.light{border-color:var(--ivory);color:var(--ivory)}
  .btn.light::after{background:var(--ivory)}
  .btn.light:hover{color:var(--charcoal)}
  .btn.solid{background:var(--charcoal);color:var(--ivory);border-color:var(--charcoal)}
  .btn.solid::after{background:var(--bronze)}
  .btn.solid:hover{color:var(--ivory)}
  .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:2rem}
  .hero-actions .btn{margin-top:0}

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.1rem clamp(1.2rem,5vw,3rem);
    transition:.5s ease;
  }
  header.scrolled{background:var(--charcoal);box-shadow:0 1px 0 rgba(0,0,0,.2);padding-top:.55rem;padding-bottom:.55rem}
  header.scrolled nav a.link{color:var(--ivory)}
  header.scrolled .nav-cta{border-color:var(--ivory);color:var(--ivory)}
  header.scrolled .nav-cta:hover{background:var(--ivory);color:var(--charcoal)}
  header.scrolled .menu-btn span{background:var(--ivory)}
  /* Home entry state (top of page, before scroll): keep the original dark charcoal links, just a hair deeper for a touch more presence. Scrolled state is unchanged (turns ivory on the charcoal bar). */
  header:not(.scrolled) nav a.link{color:#121412}
  .brand{display:flex;align-items:center;gap:.7rem;position:relative}
  .brand img{height:60px;width:auto;transition:.5s ease;display:block}
  header.scrolled .brand img{height:50px}
  .brand .logo-dark{display:none}
  nav{display:flex;align-items:center;gap:2.3rem}
  nav a.link{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);position:relative;padding:.2em 0}
  nav a.link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--bronze);transition:.4s ease}
  nav a.link:hover::after{width:100%}
  .nav-cta{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--charcoal);padding:.75em 1.4em;transition:.4s ease}
  .nav-cta:hover{background:var(--charcoal);color:var(--ivory)}
  .menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
  .menu-btn span{width:26px;height:1.5px;background:var(--charcoal);transition:.35s ease}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--ivory);overflow:hidden}
  .hero-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);animation:slowzoom 14s ease-out forwards}
  @keyframes slowzoom{to{transform:scale(1)}}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,15,.35) 0%,rgba(15,17,15,.15) 40%,rgba(15,17,15,.82) 100%)}
  .hero-inner{position:relative;z-index:2;padding-bottom:clamp(3.5rem,8vh,6rem);width:min(1180px,90vw);margin-inline:auto}
  .hero .eyebrow{color:var(--bronze-light)}
  .hero .eyebrow::before{color:var(--bronze-light)}
  .hero h1{font-size:clamp(2.5rem,7vw,5.6rem);font-weight:500;max-width:14ch}
  .hero-logo{width:clamp(280px,38vw,480px);height:auto;margin-bottom:2.8rem;filter:drop-shadow(0 6px 24px rgba(0,0,0,.35))}
  .hero h1 em{font-style:italic;color:var(--bronze-light)}
  .hero p{margin:1.8rem 0 2.4rem;font-size:clamp(1.02rem,1.7vw,1.25rem);max-width:48ch;color:rgba(244,241,234,.86);font-weight:300}
  .hero-rule{width:64px;height:1px;background:var(--bronze-light);margin-bottom:2rem}
  .scroll-cue{position:absolute;bottom:2rem;right:clamp(1.2rem,5vw,3rem);z-index:3;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(244,241,234,.7);display:flex;align-items:center;gap:.7em}
  .scroll-cue::after{content:"";width:40px;height:1px;background:rgba(244,241,234,.5);animation:cue 2s ease-in-out infinite}
  @keyframes cue{0%,100%{transform:scaleX(.4);opacity:.5}50%{transform:scaleX(1);opacity:1}}

  /* hero load stagger */
  .hero .anim{opacity:0;transform:translateY(30px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
  .hero .a1{animation-delay:.25s}.hero .a2{animation-delay:.45s}.hero .a3{animation-delay:.65s}.hero .a4{animation-delay:.85s}.hero .a5{animation-delay:1.05s}
  @keyframes rise{to{opacity:1;transform:none}}

  /* ---------- intro / about ---------- */
  .section{padding:clamp(5rem,11vh,9rem) 0}
  .about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
  .about-copy h2{margin-bottom:1.6rem}
  .about-copy p{color:var(--stone);font-size:1.08rem;margin-bottom:1.2rem;max-width:52ch}
  .stats{display:flex;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.6rem;flex-wrap:wrap}
  .stat .num{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.2rem);color:var(--charcoal);line-height:1}
  .stat .lbl{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-top:.5rem}
  .about-img{position:relative}
  .about-img img{width:100%;height:clamp(380px,55vh,560px);object-fit:cover}
  .about-img .frame{position:absolute;inset:14px;border:1px solid var(--line-light);pointer-events:none;mix-blend-mode:difference}
  .about-img .tag{position:absolute;left:-1px;bottom:1.6rem;background:var(--charcoal);color:var(--ivory);padding:.9em 1.5em;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}

  /* ---------- services ---------- */
  .services{background:var(--ivory-deep)}
  .sec-head{max-width:640px;margin-bottom:3.5rem}
  .sec-head.center{margin-inline:auto;text-align:center}
  .sec-head p{color:var(--stone);margin-top:1.2rem;font-size:1.05rem}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .svc{background:var(--ivory);padding:2.6rem 2.2rem}
  .svc .no{font-family:var(--serif);font-size:.95rem;color:var(--bronze);font-style:italic}
  .svc h3{font-size:1.5rem;margin:.7rem 0 .8rem;font-weight:500}
  .svc p{color:var(--stone);font-size:.95rem}

  /* ---------- portfolio ---------- */
  .port-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:3rem}
  .port-grid .tall{grid-row:span 2}
  .card{position:relative;overflow:hidden;cursor:pointer;min-height:300px}
  a.card{display:block;text-decoration:none;color:inherit}
  .card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:1.4s cubic-bezier(.2,.7,.2,1)}
  .card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(15,17,15,.78));transition:.5s ease}
  .card:hover img{transform:scale(1.06)}
  .card .meta{position:absolute;left:0;bottom:0;z-index:2;padding:2rem;color:var(--ivory);transform:translateY(8px);transition:.5s ease}
  .card:hover .meta{transform:none}
  .card .meta .loc{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-light);margin-bottom:.5rem}
  .card .meta h3{font-size:1.7rem;font-weight:500}

  /* ---------- ethos (dark) ---------- */
  .ethos{background:var(--charcoal);color:var(--ivory);position:relative;overflow:hidden}
  .ethos .glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(101,166,22,.10),transparent 70%);top:-180px;right:-120px;filter:blur(20px)}
  .ethos .glow2{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(18,141,212,.10),transparent 70%);bottom:-200px;left:-140px;filter:blur(20px)}
  .ethos .inner{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
  .ethos .eyebrow{color:var(--bronze-light)}
  .ethos .eyebrow::before{color:var(--bronze-light)}
  .ethos h2{margin-bottom:1.4rem}
  .ethos .mark{width:260px;margin-bottom:2rem;opacity:.97}
  .ethos-list{list-style:none;display:grid;gap:1.6rem}
  .ethos-list li{padding-left:1.6rem;position:relative;color:rgba(244,241,234,.82)}
  .ethos-list li::before{content:"◆";position:absolute;left:0;top:.15em;color:var(--bronze-light);font-size:.7em}
  .ethos-list strong{display:block;color:var(--ivory);font-family:var(--serif);font-size:1.45rem;font-weight:500;margin-bottom:.25rem}

  /* ---------- team ---------- */
  .team{background:var(--ivory)}
  .team-group{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;color:var(--bronze);margin:3.5rem 0 2rem;padding-bottom:.8rem;border-bottom:1px solid var(--line);font-style:italic}
  .team-group:first-of-type{margin-top:1rem}
  .designer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem 2.8rem}
  .person.designer{display:grid;grid-template-columns:130px 1fr;gap:1.6rem;align-items:start}
  .person-photo{overflow:hidden;background:var(--ivory-deep);aspect-ratio:5/6}
  .person-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:.6s cubic-bezier(.2,.7,.2,1)}
  .person.designer:hover .person-photo img{transform:scale(1.04)}
  .person-body h3{font-size:1.4rem;font-weight:500;margin-bottom:.5rem}
  .person-body p{color:var(--stone);font-size:.92rem;line-height:1.65}
  .staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem 1.8rem}
  .person.staff{text-align:center}
  .person-photo.sm{aspect-ratio:1/1;border-radius:50%;width:140px;margin:0 auto 1.1rem;max-width:100%}
  .person.staff h4{font-family:var(--serif);font-size:1.18rem;font-weight:500;margin-bottom:.25rem}
  .person.staff .role{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
  @media(max-width:880px){
    .designer-grid{grid-template-columns:1fr}
    .staff-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:520px){
    .person.designer{grid-template-columns:90px 1fr;gap:1.1rem}
  }
  .cta{text-align:center;background:var(--ivory-deep)}
  .cta h2{font-size:clamp(2.4rem,6vw,4.4rem);max-width:18ch;margin:0 auto 2rem;font-style:italic}
  .cta .sub{color:var(--stone);max-width:50ch;margin:0 auto 2.6rem}

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem)}
  .contact-info .row{padding:1.3rem 0;border-top:1px solid var(--line)}
  .contact-info .row:last-child{border-bottom:1px solid var(--line)}
  .contact-info .k{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);margin-bottom:.4rem}
  .contact-info .v{font-size:1.05rem;color:var(--charcoal)}
  .contact-info .v a:hover{color:var(--bronze)}
  form{display:grid;gap:1.1rem}
  .field input,.field textarea{
    width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
    padding:.9em 0;font-family:var(--sans);font-size:1rem;color:var(--charcoal);font-weight:300;
  }
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--bronze)}
  .field label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
  .field{display:grid;gap:.2rem}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

  /* ---------- footer ---------- */
  footer{background:var(--charcoal);color:rgba(244,241,234,.7);padding:4rem 0 2.2rem}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--line-light)}
  .foot-brand img{width:230px;margin-bottom:1.4rem}
  .foot-brand p{font-size:.92rem;max-width:34ch}
  .foot-col h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-light);margin-bottom:1.2rem;font-weight:400}
  .foot-col a,.foot-col p{display:block;font-size:.95rem;color:rgba(244,241,234,.7);margin-bottom:.55rem}
  .foot-col a:hover{color:var(--ivory)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:1.8rem;font-size:.74rem;letter-spacing:.05em}
  .lic{color:rgba(244,241,234,.5);letter-spacing:.16em;font-size:.68rem}

  /* ---------- mobile ---------- */
  @media(max-width:880px){
    nav{position:fixed;inset:0 0 0 auto;width:min(78vw,340px);background:var(--ivory);flex-direction:column;justify-content:center;align-items:flex-start;gap:2rem;padding:3rem 2.4rem;transform:translateX(100%);transition:.5s cubic-bezier(.2,.7,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.12)}
    nav.open{transform:none}
    .menu-btn{display:flex;z-index:101}
    .menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
    .menu-btn.open span:nth-child(2){opacity:0}
    .menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
    .about-grid,.ethos .inner,.contact-grid{grid-template-columns:1fr}
    .svc-grid{grid-template-columns:1fr 1fr}
    .port-grid{grid-template-columns:1fr}
    .port-grid .tall{grid-row:auto}
    .foot-top{grid-template-columns:1fr;gap:2rem}
    .about-img{order:-1}
  }
  @media(max-width:520px){
    .svc-grid{grid-template-columns:1fr}
    .two{grid-template-columns:1fr}
    .foot-bottom{flex-direction:column;align-items:flex-start}
  }

/* ===================== MULTI-PAGE ADDITIONS ===================== */
/* page hero (interior pages) */
.page-hero{background:var(--charcoal);color:var(--ivory);padding:11rem 0 5rem;position:relative;overflow:hidden}
.page-hero.alt{background:#23271F}
.page-hero .eyebrow{color:var(--bronze-light)}
.page-hero .eyebrow::before{color:var(--bronze-light)}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:500;max-width:16ch;margin-bottom:1.4rem}
.page-hero p{color:rgba(244,241,234,.82);max-width:52ch;font-size:1.1rem;margin-bottom:2rem}
/* prose + feature grid */
.prose-wrap{max-width:920px}
.prose-wrap h2{margin-bottom:1.4rem}
.prose-wrap > p{color:var(--stone);font-size:1.1rem;max-width:60ch;margin-bottom:3rem}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.feature{background:var(--ivory);padding:2.2rem 1.8rem;transition:.4s ease}
.feature:hover{background:var(--ivory-deep)}
.feature h3{font-size:1.3rem;font-weight:500;margin-bottom:.6rem}
.feature p{color:var(--stone);font-size:.95rem}
/* service areas */
.areas{background:var(--ivory-deep)}
.area-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
.area-grid li{background:var(--ivory);padding:1.5rem;text-align:center;font-family:var(--serif);font-size:1.2rem;color:var(--charcoal);transition:.4s ease}
.area-grid li:hover{background:var(--bronze);color:var(--ivory)}
/* header always solid on interior pages so logo + nav read */
.solid-header,header.page-solid{background:var(--charcoal)}
/* landing page */
.landing-hero{min-height:100svh;display:flex;align-items:center;background:var(--charcoal);position:relative;padding:7rem 0 3rem}
.landing-overlay{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(101,166,22,.10),transparent 60%),radial-gradient(circle at 70% 70%,rgba(18,141,212,.10),transparent 60%)}
.landing-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.landing-copy{color:var(--ivory)}
.landing-copy .eyebrow{color:var(--bronze-light)}
.landing-copy .eyebrow::before{color:var(--bronze-light)}
.landing-copy h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:500;margin-bottom:2rem}
.landing-points{list-style:none;display:grid;gap:1rem}
.landing-points li{padding-left:1.8rem;position:relative;color:rgba(244,241,234,.88);font-size:1.08rem}
.landing-points li::before{content:"◆";position:absolute;left:0;color:var(--bronze-light);font-size:.7em;top:.3em}
.landing-form{background:var(--ivory);padding:2.6rem;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.landing-form h2{font-size:1.8rem;margin-bottom:1.5rem}
.form-fine{font-size:.78rem;color:var(--stone);margin-top:1rem;letter-spacing:.02em}
.field select{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);padding:.9em 0;font-family:var(--sans);font-size:1rem;color:var(--charcoal)}
.field select:focus{outline:none;border-color:var(--bronze)}
@media(max-width:880px){
  .feature-grid{grid-template-columns:1fr 1fr}
  .area-grid{grid-template-columns:1fr 1fr}
  .landing-inner{grid-template-columns:1fr}
  .landing-copy{order:-1}
}
@media(max-width:520px){
  .feature-grid{grid-template-columns:1fr}
}

/* service page hero with photo background */
.page-hero.has-bg{background-size:cover;background-position:center;position:relative}
.page-hero.has-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,19,.62),rgba(20,22,19,.82));z-index:0}
.page-hero.has-bg .wrap{position:relative;z-index:1}