:root{
  --bg:#F7F5F2; --surface:#FFFFFF; --ink:#1B1A17; --muted:#6E6862;
  --hair:#E4DFD8; --accent:#8A6E54; --accent-soft:#B49A80;
  --maxw:1280px; --pad:clamp(20px,5vw,64px);
  --fs-display:clamp(2.4rem,5.2vw,4.6rem);
  --fs-h2:clamp(1.6rem,3vw,2.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;font-size:17px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:0 0 3px 0;font-size:.8rem;letter-spacing:.08em}
.skip:focus{left:0}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500}
.muted{color:var(--muted)}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(247,245,242,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:inline-flex;align-items:center;line-height:0}
/* Wordmark: original vector artwork, viewBox tightened to the ink so
   height == the mark's optical height. Sized at 24px rather than 19px:
   the light BUILT stems are 8.6% of cap height, so 19px put them at
   1.6px, which cannot resolve solidly on a 1x display. 24px puts them
   just over 2px. Width is pinned to a whole pixel so the SVG rasterises
   on an integer box. */
.brand-logo{height:24px;width:204px;display:block}
footer .brand{margin-bottom:18px}
footer .brand-logo{height:26px;width:221px}
.nav ul{display:flex;gap:38px;list-style:none;align-items:center}
.nav ul a{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;transition:color .2s}
.nav ul a:hover,.nav ul a.active{color:var(--ink)}
.nav .cta{border:1px solid var(--ink);padding:9px 18px;border-radius:2px;color:var(--ink);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.nav .cta:hover,.nav .cta.active{background:var(--ink);color:var(--bg)}
.menu-btn{display:none;background:none;border:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.mobile-nav{display:none}

/* Buttons */
.btn{display:inline-block;padding:14px 26px;border-radius:2px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:.2s;border:1px solid var(--ink)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}

/* Hero (home) */
.hero{padding:clamp(64px,11vw,140px) 0 clamp(40px,6vw,72px)}
.hero .eyebrow{margin-bottom:26px}
.hero h1{font-size:var(--fs-display);font-weight:300;line-height:1.06;letter-spacing:-.02em;max-width:16ch}
.hero p.lead{margin-top:30px;max-width:52ch;font-size:1.12rem;color:var(--muted)}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,3.6vw,42px)}

/* Hero masthead */
.hero-head{padding-bottom:clamp(28px,3.6vw,42px);border-bottom:1px solid var(--hair)}
.hero-head .eyebrow{margin-bottom:22px}
.hero-head h1{font-size:clamp(2.1rem,4.8vw,3.6rem);font-weight:300;line-height:1.1;letter-spacing:-.02em;max-width:none}

/* Hero slideshow (contained, full uncropped 3:2 images) */
.hero-slider{position:relative;margin-top:clamp(30px,4vw,54px);border-radius:3px;overflow:hidden;background:var(--hair)}
.hero-slider .slides{position:relative;width:100%;aspect-ratio:3/2}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.slide.is-active{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover}
.slide figcaption{position:absolute;left:0;bottom:0;padding:14px 20px;color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.45);z-index:2}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.4));pointer-events:none}
.s-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.82);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .25s,background .2s;display:flex;align-items:center;justify-content:center}
.hero-slider:hover .s-nav{opacity:1}
.s-nav:hover{background:#fff}
.s-nav.prev{left:16px}.s-nav.next{right:16px}
.s-nav:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px}
.s-dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex;gap:9px;justify-content:center}
.s-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s,transform .2s}
.s-dots button[aria-selected="true"]{background:#fff;transform:scale(1.25)}
@media(max-width:640px){.s-nav{display:none}}

/* Page hero */
.page-hero{padding:clamp(60px,9vw,120px) 0 clamp(28px,4vw,52px)}
.page-hero .eyebrow{margin-bottom:22px}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.8rem);font-weight:300;line-height:1.08;letter-spacing:-.02em;max-width:20ch}
.page-hero p.lead{margin-top:24px;max-width:58ch;font-size:1.12rem;color:var(--muted)}

/* Sections */
section{padding:clamp(56px,8vw,110px) 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,58px)}
.section-head h2{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.015em;line-height:1.12;max-width:20ch}
.section-head .eyebrow{margin-bottom:16px}

/* Intro statement */
.statement{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.statement .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(30px,6vw,80px);align-items:start}
.statement h2{font-size:clamp(1.4rem,2.4vw,2.05rem);font-weight:300;line-height:1.25;letter-spacing:-.01em}
.statement p{color:var(--muted);margin-bottom:18px}

/* Card grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.card{display:block}
.card .ph{overflow:hidden;border-radius:3px;aspect-ratio:4/3;background:var(--hair)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.045)}
.card .meta{margin-top:16px}
.card .p-name{font-size:1.12rem;font-weight:500;letter-spacing:-.01em}
.card .p-sub{font-size:.82rem;color:var(--muted);letter-spacing:.02em;margin-top:4px}
.card .tag{display:inline-block;margin-top:10px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--hair);border-radius:2px;padding:3px 9px}

/* Band */
.band{position:relative;min-height:clamp(360px,52vw,560px);display:flex;align-items:center;color:#fff;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,15,.72),rgba(20,18,15,.28))}
.band .wrap{position:relative;z-index:2}
.band .eyebrow{color:var(--accent-soft)}
.band h2{font-size:clamp(1.7rem,3.4vw,3rem);font-weight:300;line-height:1.14;letter-spacing:-.015em;max-width:22ch;margin-top:18px}

/* Rows (services/why) */
.rows{border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:80px 1fr 1.3fr;gap:clamp(16px,4vw,60px);padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--hair);align-items:start}
.row .num{font-size:.8rem;letter-spacing:.14em;color:var(--accent);font-weight:600;padding-top:6px}
.row h3{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:400;letter-spacing:-.01em;line-height:1.2}
.row p{color:var(--muted)}

/* Service block (services page) */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,68px);align-items:center;padding:clamp(44px,6vw,86px) 0;border-bottom:1px solid var(--hair)}
.svc-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;background:var(--hair)}
.svc .num{font-size:.8rem;letter-spacing:.14em;color:var(--accent);font-weight:600;margin-bottom:14px}
.svc h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:300;letter-spacing:-.015em;line-height:1.14;margin-bottom:18px}
.svc p{color:var(--muted);margin-bottom:16px}
.svc.flip .svc-img{order:-1}
@media(max-width:820px){.svc{grid-template-columns:1fr;gap:24px}.svc.flip .svc-img{order:0}}

/* Split (about founder) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,72px);align-items:center}
.split-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;background:var(--hair)}
.split h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:300;letter-spacing:-.015em;margin-bottom:18px}
.split p{color:var(--muted);margin-bottom:16px}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:26px}}

/* Prose */
.prose p{margin-bottom:20px;color:var(--muted)}
.prose p:first-child{color:var(--ink);font-size:1.15rem;line-height:1.5}

/* Testimonials */
/* Flex, not grid: with an odd card count (5 quotes) an auto-fit grid strands the
   last card in a half-empty row. Flex lets the final row grow to fill instead. */
.twrap{display:flex;flex-wrap:wrap;gap:clamp(20px,2.4vw,32px)}
.twrap>.quote{flex:1 1 300px}
.quote{background:var(--surface);border:1px solid var(--hair);border-radius:4px;padding:clamp(26px,3vw,38px);display:flex;flex-direction:column}
.quote .mark{color:var(--accent-soft);font-size:2.4rem;line-height:.6;font-weight:600;margin-bottom:14px}
.quote p{font-size:1.02rem;color:var(--ink);font-weight:300;line-height:1.55}
.quote .by{margin-top:auto;padding-top:22px;font-size:.82rem;letter-spacing:.03em}
.quote .by strong{font-weight:600}
.quote .by span{color:var(--muted)}
.tstack{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.tstack .quote p{font-size:1.08rem;line-height:1.6}
.tstack .quote{max-width:none}

/* FAQ */
.faq details{border-bottom:1px solid var(--hair);padding:22px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:1.08rem;font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{color:var(--accent);font-weight:400;font-size:1.4rem;transition:transform .25s}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin-top:14px;max-width:70ch}

/* Project detail */
.proj-hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:var(--hair)}
.proj-body{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(30px,6vw,72px);padding-top:clamp(40px,6vw,72px);align-items:start}
.spec{border-top:1px solid var(--ink);padding-top:22px}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0}
.spec dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;padding-top:3px}
.spec dd{font-size:.98rem}
@media(max-width:820px){.proj-body{grid-template-columns:1fr;gap:32px}}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(10px,1.4vw,18px)}
.gallery button{padding:0;border:0;background:var(--hair);border-radius:2px;overflow:hidden;cursor:zoom-in}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gallery button:hover img{transform:scale(1.04)}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(15,13,11,.94);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:2px}
.lb button{position:absolute;color:#fff;background:none;border:0;cursor:pointer;line-height:1}
.lb .close{top:16px;right:24px;font-size:2.2rem}
.lb .lbnav{top:50%;transform:translateY(-50%);font-size:2.6rem;padding:10px 16px}
.lb .lbprev{left:8px}.lb .lbnext{right:8px}
.lb .count{position:absolute;top:20px;left:0;right:0;text-align:center;color:#e6e0d8;font-size:.8rem;letter-spacing:.14em;font-weight:500;pointer-events:none}

/* Pager */
.pager{display:flex;justify-content:space-between;border-top:1px solid var(--hair);margin-top:clamp(44px,6vw,80px);padding-top:28px;gap:24px}
.pager .lbl{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.pager .nm{font-size:1.1rem;font-weight:500}
.pager a:hover .nm{color:var(--accent)}
.pager .next{text-align:right;margin-left:auto}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,6vw,72px);align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.field{margin-bottom:20px}
.field label{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--hair);border-radius:2px;background:var(--surface);font:inherit;font-size:1rem;color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}
button.submit{margin-top:6px;cursor:pointer;background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
button.submit:hover{background:transparent;color:var(--ink)}
.info h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600}
.info .big{font-size:1.15rem;margin-bottom:6px}
.info .row-i{padding:20px 0;border-top:1px solid var(--hair)}
.info .row-i:first-of-type{border-top:0}

/* CTA band */
.cta-band{background:var(--ink);color:var(--bg)}
.cta-band .wrap{text-align:center}
.cta-band .eyebrow{color:var(--accent-soft)}
.cta-band h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:300;letter-spacing:-.02em;margin:18px auto 12px;max-width:16ch}
.cta-band p{color:#B9B2AA;max-width:48ch;margin:0 auto 34px}
.cta-band .btn{border-color:var(--bg);color:var(--bg)}
.cta-band .btn.solid{background:var(--bg);color:var(--ink)}
.cta-band .btn.solid:hover{background:transparent;color:var(--bg)}

/* Footer */
footer{background:var(--bg);border-top:1px solid var(--hair);padding:64px 0 40px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer .brand{display:block;margin-bottom:16px}
footer .muted{max-width:34ch;font-size:.95rem}
.accred{margin-top:22px}
.accred img{display:block;width:66px;height:66px}
.accred a{display:inline-block;transition:opacity .2s}
.accred a:hover{opacity:.75}
.social{display:flex;gap:20px;margin-top:20px;flex-wrap:wrap}
.social a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;transition:color .2s}
.social a:hover{color:var(--accent)}
footer h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:600}
footer ul{list-style:none}
footer ul li{margin-bottom:10px;font-size:.95rem}
footer ul a:hover{color:var(--accent)}
.fbottom{margin-top:52px;padding-top:24px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);letter-spacing:.02em}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

@media(max-width:900px){
  .statement .wrap{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .twrap>.quote{flex-basis:calc(50% - 16px)}
  .row{grid-template-columns:40px 1fr;gap:14px}
  .row p{grid-column:1/-1}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  /* Phones are 2x/3x, so the hairline stems resolve fine at a smaller size;
     stepping down keeps the wordmark clear of the Menu button at 320px. */
  .brand-logo{height:20px;width:170px}
  .nav ul,.nav .cta{display:none}
  .menu-btn{display:block}
  .mobile-nav{position:absolute;top:72px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--hair);padding:8px var(--pad) 20px;box-shadow:0 12px 24px rgba(0,0,0,.06)}
  .mobile-nav.open{display:block}
  .mobile-nav a{display:block;padding:13px 0;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--hair)}
  .mobile-nav a:last-child{border-bottom:0}
  .grid,.fgrid{grid-template-columns:1fr}
  .twrap>.quote{flex-basis:100%}
  body{font-size:16px}
}

/* ---------------------------------------------------------------------------
   Hero carousel, phones (added 2026-08-18)

   The caption sat bottom-left ON the photo and the pagination dots sat
   bottom-center on the same photo, so any caption longer than about 24
   characters ran underneath the dots. On a 390px screen every caption is
   longer than that.

   Fix: on phones the caption and the dots both move OFF the image and onto
   the page background, sharing one row beneath it. Caption left, dots right,
   reserved gutter between them, so collision is structurally impossible no
   matter how long a caption gets. The caption also becomes dark text on the
   page background instead of white-on-photo, which is far more legible over
   a bright sky. Desktop is untouched.
   --------------------------------------------------------------------------- */
@media(max-width:640px){
  /* Let the caption and dots escape the image box. The corner radius moves
     onto the image itself, since the wrapper can no longer clip. */
  .hero-slider{overflow:visible;border-radius:0;background:none;margin-bottom:72px}
  .hero-slider .slides{border-radius:3px}
  .slide img{border-radius:3px}

  /* No caption on the photo means the darkening gradient has nothing to do. */
  .slide::after{background:none}

  /* top:100% anchors to the bottom edge of the image, so the caption grows
     downward and can wrap to two lines without pushing into anything.
     right:118px reserves the gutter the dots sit in (8 dots = 104px). */
  .slide figcaption{
    position:absolute;top:100%;bottom:auto;left:0;right:118px;
    padding:13px 0 0;
    color:var(--ink);text-shadow:none;
    font-size:.7rem;line-height:1.55;letter-spacing:.12em;font-weight:500;
  }

  /* Dots align to the caption's first line, hard right. */
  .s-dots{
    top:100%;bottom:auto;left:auto;right:0;
    margin-top:18px;justify-content:flex-end;gap:8px;
  }
  /* 8 dots at 6px + 8px gaps = 104px, inside the 118px gutter reserved above. */
  .s-dots button{width:6px;height:6px;background:rgba(27,26,23,.22)}
  .s-dots button[aria-selected="true"]{background:var(--ink);transform:scale(1.3)}

  /* Arrows stay hidden on touch; swipe handles it (see main.js). */
  .s-nav{display:none}
}

/* Narrow phones: the caption gutter leaves ~160px, so a long caption wraps to
   three lines. Tighten the type and widen the reserve so it can never run into
   the View Projects button below. */
@media(max-width:400px){
  .hero-slider{margin-bottom:94px}
  .slide figcaption{font-size:.64rem;letter-spacing:.09em;right:112px}
  .s-dots{gap:7px}
  .s-dots button{width:5px;height:5px}
}

/* Above 640px the caption stays on the photo and the dots stay centred, which
   is the intended look. But the caption was unbounded, so on tablets and small
   laptops a long one ran into the centred dots the same way it did on phones.
   Capping it at 36% of the width makes it wrap to a second line instead of
   colliding, at every width, with no breakpoint jump in where the dots sit. */
@media(min-width:641px){
  .slide figcaption{max-width:36%}
}