/* ---------- Design tokens ----------
     Palette: warm plaster + deep ink + muted brass
     Display: Cormorant Garamond (high-contrast serif, used large & sparingly)
     Body: Jost (clean geometric sans, quiet)
  */
  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Jost:wght@300;400;500&display=swap');

  :root{
    --ink:#1c1b18;
    --plaster:#f3efe8;
    --plaster-2:#e9e3d8;
    --brass:#9a8560;
    --line:#d8d1c4;
    --muted:#6f6a60;
    --maxw:1280px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Jost',sans-serif;
    font-weight:300;
    color:var(--ink);
    background:var(--plaster);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}

  h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:300;line-height:1.08}

  .eyebrow{
    font-family:'Jost',sans-serif;font-weight:400;
    font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
    color:var(--brass);
  }

  /* ---------- Header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:center;
    padding:22px clamp(20px,5vw,64px);
    transition:background .4s ease, padding .4s ease;
  }
  header.scrolled{background:rgba(243,239,232,.92);backdrop-filter:blur(8px);padding:14px clamp(20px,5vw,64px)}
  .nav-inner{width:100%;max-width:var(--maxw);display:flex;align-items:center;justify-content:space-between}
  .brand{
    font-family:'Cormorant Garamond',serif;font-size:1.5rem;letter-spacing:.04em;
    color:#fff;transition:color .4s ease;
  }
  header.scrolled .brand{color:var(--ink)}
  nav ul{display:flex;gap:clamp(16px,2.4vw,34px);list-style:none}
  nav a{
    font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
    color:#fff;transition:color .4s ease,opacity .2s;opacity:.9;
  }
  header.scrolled nav a{color:var(--ink)}
  nav a:hover{opacity:.55}
  .menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer}
  header.scrolled .menu-btn{color:var(--ink)}

  /* ---------- Hero slider ---------- */
  .hero{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
  .slides{position:absolute;inset:0}
  .slide{
    position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;
    display:flex;align-items:flex-end;
  }
  .slide.active{opacity:1}
  /* PLACEHOLDER blocks — replace .ph background with real photo:
     .slide-1{background:url('images/hero-1.jpg') center/cover;} */
  .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .ph span{
    font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.3);padding:8px 16px;border-radius:2px;
  }
  .slide-1 .ph{background:linear-gradient(135deg,#8a8172,#5f5647)}
  .slide-2 .ph{background:linear-gradient(135deg,#6f6a63,#403c36)}
  .slide-3 .ph{background:linear-gradient(135deg,#9a8f7d,#6b6250)}
  .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,19,16,.55),rgba(20,19,16,.05) 55%)}
  .hero-copy{position:relative;z-index:2;color:#fff;padding:110px 0 clamp(60px,10vh,120px);width:100%}
  .hero-copy .eyebrow{color:rgba(255,255,255,.75);margin-bottom:18px}
  .hero-copy h1{font-size:clamp(2.8rem,7vw,6rem);margin-bottom:20px;font-weight:300}
  .hero-copy p{max-width:44ch;font-size:1.05rem;opacity:.9;margin-bottom:34px}
  .hero-cta{display:flex;gap:16px;flex-wrap:wrap}

  .btn{
    display:inline-block;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
    padding:15px 30px;border:1px solid currentColor;transition:.3s;cursor:pointer;background:none;color:inherit;
  }
  .btn-solid{background:#fff;color:var(--ink);border-color:#fff}
  .btn-solid:hover{background:transparent;color:#fff}
  .btn-ghost:hover{background:#fff;color:var(--ink)}

  .hero-dots{position:absolute;bottom:34px;right:clamp(20px,5vw,64px);z-index:3;display:flex;gap:10px}
  .hero-dots button{width:9px;height:9px;border-radius:50%;border:1px solid #fff;background:transparent;cursor:pointer;padding:0;transition:.3s}
  .hero-dots button.on{background:#fff}

  /* ---------- Intro ---------- */
  .section{padding:clamp(80px,13vh,160px) 0}
  .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
  .intro-copy h2{font-size:clamp(2rem,4.2vw,3.4rem);margin:20px 0 26px}
  .intro-copy p{color:var(--muted);margin-bottom:20px;max-width:52ch}
  .portrait{aspect-ratio:4/5;background:linear-gradient(135deg,var(--plaster-2),#cfc7b8);position:relative}
  .portrait .ph span{color:var(--muted);border-color:var(--line)}

  /* ---------- Portfolio grid ---------- */
  .work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:52px;flex-wrap:wrap}
  .work-head h2{font-size:clamp(2rem,4.4vw,3.4rem)}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--plaster-2);cursor:pointer}
  .tile.wide{grid-column:span 2;aspect-ratio:3/2}
  .tile .ph{background:linear-gradient(135deg,#b9b0a0,#867c6b)}
  .tile .ph span{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.35)}
  .tile-label{
    position:absolute;left:0;bottom:0;z-index:2;padding:20px 22px;color:#fff;
    opacity:0;transform:translateY(8px);transition:.4s;width:100%;
    background:linear-gradient(to top,rgba(20,19,16,.65),transparent)
  }
  .tile:hover .tile-label{opacity:1;transform:none}
  .tile-label .k{font-family:'Cormorant Garamond',serif;font-size:1.35rem}
  .tile-label .s{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}

  /* ---------- Approach (numbered — real sequence) ---------- */
  .approach{background:var(--ink);color:var(--plaster)}
  .approach .eyebrow{color:var(--brass)}
  .approach h2{font-size:clamp(2rem,4.4vw,3.4rem);color:#fff;margin:18px 0 60px;max-width:16ch}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
  .step .num{font-family:'Cormorant Garamond',serif;font-size:2.4rem;color:var(--brass);line-height:1}
  .step h3{font-size:1.4rem;margin:14px 0 10px;color:#fff}
  .step p{font-size:.92rem;color:rgba(243,239,232,.6)}
  .step{padding-top:22px;border-top:1px solid rgba(243,239,232,.18)}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px)}
  .contact-copy h2{font-size:clamp(2rem,4.4vw,3.4rem);margin:18px 0 22px}
  .contact-copy p{color:var(--muted);max-width:40ch;margin-bottom:26px}
  .field{display:flex;flex-direction:column;gap:22px}
  .field input,.field textarea{
    font-family:'Jost',sans-serif;font-weight:300;font-size:.95rem;color:var(--ink);
    background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 0;
  }
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
  .field textarea{resize:vertical;min-height:90px}
  .field .btn{align-self:flex-start;margin-top:8px;border-color:var(--ink)}
  .field .btn:hover{background:var(--ink);color:var(--plaster)}

  /* ---------- Footer ---------- */
  footer{background:var(--plaster-2);padding:70px 0 40px}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:50px}
  .foot-brand{font-family:'Cormorant Garamond',serif;font-size:1.8rem;margin-bottom:14px}
  footer h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:16px;font-weight:400}
  footer p,footer a{font-size:.9rem;color:var(--muted);display:block;margin-bottom:6px}
  footer a:hover{color:var(--ink)}
  .foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.78rem;color:var(--muted)}
  .socials{display:flex;gap:18px}
  .socials a{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0}

  /* ---------- Responsive ---------- */
  @media(max-width:860px){
    nav ul{display:none}
    .menu-btn{display:block}
    .intro-grid,.contact-grid{grid-template-columns:1fr}
    .portrait{max-width:420px}
    .grid{grid-template-columns:repeat(2,1fr)}
    .tile.wide{grid-column:span 2}
    .steps{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr}
  }
  @media(max-width:520px){
    .grid{grid-template-columns:1fr}
    .tile,.tile.wide{grid-column:span 1;aspect-ratio:4/5}
    .steps{grid-template-columns:1fr}
    .hero-copy h1{font-size:clamp(2.4rem,11vw,3.4rem)}
    .hero-copy .eyebrow{font-size:.62rem;letter-spacing:.18em}
    .hero-cta{flex-direction:column;align-items:flex-start}
    .hero-cta .btn{width:100%;text-align:center}
  }
  @media(prefers-reduced-motion:reduce){
    .slide{transition:none}
    *{scroll-behavior:auto}
  }

/* ============ Inner pages ============ */
/* Solid header variant for inner pages (no hero behind it) */
body.inner{padding-top:0}
body.inner header{position:sticky;background:rgba(243,239,232,.92);backdrop-filter:blur(8px);padding:14px clamp(20px,5vw,64px)}
body.inner header .brand{color:var(--ink)}
body.inner header nav a{color:var(--ink)}
body.inner header .menu-btn{color:var(--ink)}

/* Page hero (compact banner) */
.page-hero{padding:clamp(70px,12vh,140px) 0 clamp(40px,7vh,70px);border-bottom:1px solid var(--line)}
.page-hero .eyebrow{margin-bottom:16px}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:300}
.page-hero p{color:var(--muted);max-width:56ch;margin-top:20px;font-size:1.05rem}

/* Services list */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.svc-card{background:var(--plaster-2);padding:38px 32px;display:flex;flex-direction:column;gap:14px;min-height:280px}
.svc-card .num{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--brass);line-height:1}
.svc-card h3{font-size:1.7rem}
.svc-card p{color:var(--muted);font-size:.95rem}
.svc-card ul{list-style:none;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.svc-card li{font-size:.86rem;color:var(--muted);padding:4px 0;letter-spacing:.02em}

/* Full portfolio grid */
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pf-grid .tile{aspect-ratio:3/2}
.pf-grid .tile.tall{aspect-ratio:3/4}

/* Contact page */
.contact-page{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:start}
.contact-info h3{font-size:1.4rem;margin-bottom:6px}
.contact-info .row{padding:22px 0;border-bottom:1px solid var(--line)}
.contact-info .row .lbl{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.contact-info .row a,.contact-info .row p{color:var(--ink);font-size:1.05rem}

@media(max-width:860px){
  .svc{grid-template-columns:1fr}
  .contact-page{grid-template-columns:1fr}
}

/* ============ Mobile nav drawer ============ */
@media(max-width:860px){
  nav.open ul{
    display:flex;flex-direction:column;position:fixed;inset:0;z-index:60;
    background:#f3efe8;padding:90px clamp(20px,5vw,64px);gap:28px;height:100vh;width:100vw;
  }
  nav.open ul a{color:var(--ink)!important;font-size:1.15rem;letter-spacing:.14em}
  .menu-btn{z-index:61;position:relative}
}

/* ============ What we design ============ */
.design-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);margin-top:8px}
.design-col h3{font-size:1.7rem;margin-bottom:20px}
.design-col .tags{display:flex;flex-wrap:wrap;gap:10px}
.design-col .tags span{
  font-size:.85rem;letter-spacing:.02em;color:var(--ink);
  border:1px solid var(--line);padding:9px 16px;border-radius:2px;background:var(--plaster);
}
@media(max-width:640px){.design-grid{grid-template-columns:1fr}}

/* ============ About page ============ */
.about-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.about-portrait{aspect-ratio:4/5;background:linear-gradient(135deg,var(--plaster-2),#cfc7b8) center/cover;position:sticky;top:100px}
.about-body h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin:0 0 8px}
.about-body .role{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:26px}
.about-body p{color:var(--muted);margin-bottom:18px;max-width:60ch}
.about-body p.lead{color:var(--ink);font-size:1.15rem;line-height:1.6}
.philosophy{background:var(--ink);color:var(--plaster)}
.philosophy .eyebrow{color:var(--brass)}
.philosophy h2{font-family:'Cormorant Garamond',serif;font-weight:300;color:#fff;font-size:clamp(2rem,4.6vw,3.6rem);margin:18px 0 34px;max-width:20ch}
.philosophy p{color:rgba(243,239,232,.72);max-width:62ch;margin-bottom:18px}
@media(max-width:860px){
  .about-grid{grid-template-columns:1fr}
  .about-portrait{position:relative;top:0;max-width:420px}
}

/* ============ Facts strip (About) ============ */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fact{padding:14px clamp(16px,3vw,36px) 14px 0}
.fact + .fact{padding-left:clamp(16px,3vw,36px);border-left:1px solid var(--line)}
.fact .n{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:1;color:var(--ink)}
.fact .l{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px}
@media(max-width:720px){
  .facts-grid{grid-template-columns:1fr 1fr}
  .fact{padding:20px!important;border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .fact:nth-child(1),.fact:nth-child(2){border-top:0}
  .fact:nth-child(odd){border-left:0}
}