/* =========================================================
   BUILT IN HOME RENOVATIONS
   Design system — minimal architectural (BuilderStudio style)
   Light paper + charcoal ink · all sans · tight display type
   ========================================================= */

:root {
  /* Surfaces */
  --paper:  #F3F4F3;   /* page background */
  --white:  #FFFFFF;
  --bone:   #EDECE7;
  --sand:   #E4E2DC;
  --ink:    #101010;
  --ink-80: #2B2B2B;
  --grey:   #6E6E6E;
  --grey-2: #9A9A9A;
  --line:   #E2E0DB;
  --line-2: rgba(255,255,255,.14);

  /* Canela on the display, Instrument Sans on the text:
       --display  = Canela (display cut)  — headings, statements, stats, brand.
       --sans     = Instrument Sans       — body copy, nav, forms, lists.
       --mono     = IBM Plex Mono         — uppercase micro-labels, numerals,
                                            buttons.
     Files live in assets/fonts/ and are wired up in assets/fonts/fonts.css. */
  --display: "Canela", "Canela Text", "Instrument Sans", "Helvetica Neue", Helvetica, Arial, serif;
  --sans:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* CANELA METRICS — a serif needs looser tracking and more line height than
     Inter did; on the old Inter values Canela sets too tight and headings crowd. */
  --display-weight: 400;
  --display-tracking: -.015em;
  --display-lh: 1.02;

  --wrap: 1440px;
  --gutter: clamp(20px, 4.5vw, 80px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;      /* Instrument Sans has a tall x-height — 16px reads level with the old serif at 17 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

/* ---------------- Typography ---------------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--display-lh); }
.display-xl { font-size: clamp(3rem, 11vw, 11rem); }
.display-l  { font-size: clamp(2.35rem, 5.9vw, 5.2rem); }
h1 { font-size: clamp(2.6rem, 7vw, 6rem); }
h2 { font-size: clamp(2.1rem, 5vw, 4.2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.01em; }
p { color: var(--grey); }
.lead { font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--ink-80); line-height: 1.55; }
.tight { letter-spacing: -.02em; }

/* Uppercase micro-label */
.label {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-2);
  display: inline-flex;
  align-items: center;
  gap: .8em;
  line-height: 1.6;
}
.mono { font-family: var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--grey-2); line-height:1.75; }
.label--dot::before { content:""; width: 6px; height: 6px; background: var(--ink); border-radius: 50%; flex:none; }
.bg-ink .label, .bg-ink .label--dot { color: rgba(255,255,255,.6); }
.bg-ink .label--dot::before { background: #fff; }

/* ---------------- Layout ---------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(70px, 9vw, 150px); }
.section--sm { padding-block: clamp(50px, 6vw, 90px); }
.bg-bone { background: var(--bone); }
.bg-white { background: var(--white); }
.bg-sand { background: var(--sand); }
.bg-ink  { background: #0D0D0D; color: #fff; }
.bg-ink h1,.bg-ink h2,.bg-ink h3 { color: #fff; }
.bg-ink p { color: rgba(255,255,255,.62); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxw-sm { max-width: 560px; }
.maxw-md { max-width: 760px; }
.maxw-lg { max-width: 980px; }

.grid { display: grid; gap: clamp(18px, 2.4vw, 34px); }
.g-2 { grid-template-columns: repeat(2,1fr); }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 940px){ .g-3,.g-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .g-2,.g-3,.g-4 { grid-template-columns: 1fr;} }

.rule { height: 1px; background: var(--line); border: 0; }
.bg-ink .rule { background: var(--line-2); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--mono);   /* uppercase micro type stays mono against the Canela serif */
  font-size: .74rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  padding: 1.05em 1.6em; border-radius: 0; border: 1px solid transparent;
  transition: background .35s var(--ease), color .35s, border-color .35s, transform .4s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--dark  { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #333; transform: translateY(-2px); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn--light:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.btn--outline { border-color: var(--line); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.bg-ink .btn--outline { border-color: var(--line-2); color: #fff; }
.bg-ink .btn--outline:hover { background: #fff; color: var(--ink); }
.btn--sm { padding: .9em 1.5em; font-size: .72rem; }

.arrow-link { display:inline-flex; align-items:center; gap:.6em; font-family: var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
.arrow-link svg { width:14px; transition: transform .4s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }
.arrow-link span { position: relative; }
.arrow-link span::after { content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.arrow-link:hover span::after { transform: scaleX(1); transform-origin: left; }

/* ---------------- Header ---------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding-block: 20px; transition: background .45s var(--ease), padding .45s var(--ease), box-shadow .45s, border-color .45s;
  border-bottom: 1px solid transparent;
}
.header.solid { background: rgba(255,255,255,.88); backdrop-filter: blur(16px); padding-block: 12px; border-color: var(--line); }
/* Three tracks with equal outer columns so the lockup sits on the page's true
   centre line regardless of how wide the right-hand controls get. */
.nav {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px;
}
.nav > .brand { grid-column: 2; justify-self: center; }
.nav > .nav__cta { grid-column: 3; justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { width: 34px; height: 34px; flex: none; color: var(--ink); }
.brand__name { font-family: var(--display); font-size: 1.02rem; font-weight: var(--display-weight); letter-spacing: .02em; line-height: 1.1; text-transform: uppercase; }
.brand__name small { display: block; font-family: var(--sans); font-size: .54rem; font-weight: 500; letter-spacing: .22em; color: var(--grey); margin-top: 3px; }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links > a, .has-drop > a {
  font-size: .82rem; font-weight: 500; letter-spacing: .02em; position: relative; padding-block: 8px;
}
.nav__links a::after { content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: flex; align-items: center; gap: 14px; }

.has-drop { position: relative; }
.drop {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%,8px);
  background: #fff; border: 1px solid var(--line); padding: 8px; min-width: 260px; margin-top: 14px;
  opacity: 0; visibility: hidden; transition: all .3s var(--ease); box-shadow: 0 24px 60px rgba(0,0,0,.09);
}
.has-drop:hover .drop { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.drop a { display: block; padding: 12px 14px; font-size: .82rem; transition: background .25s; }
.drop a::after { display: none; }
.drop a:hover { background: var(--bone); }
.drop a span { display: block; font-size: .7rem; color: var(--grey); margin-top: 2px; }

.burger { display: none; width: 42px; height: 42px; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.burger span { width: 24px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
body.menu-open .burger span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity: 0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1000px){
  .nav__links { display: none; }
  .nav__cta .btn { display: none; }
  .burger { display: flex; }
  .mobile-menu {
    position: fixed; inset: 0; z-index: 190; background: var(--paper);
    padding: 100px var(--gutter) 40px; display: flex; flex-direction: column; gap: 2px;
    transform: translateY(-100%); transition: transform .6s var(--ease-out); overflow-y: auto;
  }
  body.menu-open .mobile-menu { transform: translateY(0); }
  .mobile-menu a { font-family: var(--display); font-size: clamp(1.7rem,7vw,2.4rem); letter-spacing: -.015em; padding-block: 12px; border-bottom: 1px solid var(--line); }
  .mobile-menu a small { display:block; font-family: var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color: var(--grey); margin-bottom: 4px; }
  .mobile-menu .btn { margin-top: 26px; font-size: .74rem; align-self: flex-start; }
}
@media (min-width: 1001px){ .mobile-menu { display: none; } }

/* ---------------- Hero ---------------- */
.hero { padding-top: clamp(130px, 17vh, 190px); padding-bottom: clamp(30px, 4vw, 60px); }
.hero__top { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.hero h1 { max-width: 24ch; }
.hero__meta { max-width: 330px; padding-bottom: 10px; }
.hero__meta .years { font-family: var(--display); font-size: clamp(2rem,3vw,2.8rem); letter-spacing: -.015em; line-height: 1; }
.hero__meta p { font-size: .95rem; margin-top: 14px; }
.hero__meta .btn { margin-top: 22px; }
@media (max-width: 900px){ .hero__top { grid-template-columns: 1fr; align-items: start; } .hero__meta { max-width: none; } }

.hero__banner { margin-top: clamp(34px, 5vw, 70px); overflow: hidden; position: relative; aspect-ratio: 21/9; }
.hero__banner img { width: 100%; height: 118%; object-fit: cover; }
@media (max-width: 700px){ .hero__banner { aspect-ratio: 4/3; } }

/* Page hero (interior pages) */
.phero { padding-top: clamp(130px, 17vh, 200px); padding-bottom: clamp(26px, 3vw, 44px); }
.phero .crumbs { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.phero h1 { max-width: 18ch; }
.phero__row { display: grid; grid-template-columns: 1fr minmax(280px, 400px); gap: 40px; align-items: end; }
@media (max-width: 900px){ .phero__row { grid-template-columns: 1fr; align-items: start; } }
.phero__banner { overflow: hidden; aspect-ratio: 21/9; margin-top: clamp(28px,4vw,54px); }
.phero__banner img { width: 100%; height: 118%; object-fit: cover; }
@media (max-width: 700px){ .phero__banner { aspect-ratio: 16/10; } }

/* ---------------- Statement ---------------- */
.statement { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.6rem, 3.4vw, 3rem); letter-spacing: -.015em; line-height: 1.18; max-width: 20ch; }
.statement--wide { max-width: 26ch; }

/* ---------------- Service cards ---------------- */
.svc { display: block; border-top: 1px solid var(--line); padding-top: 22px; height: 100%; }
.svc__num { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--grey-2); }
.svc__media { margin-top: 20px; overflow: hidden; aspect-ratio: 4/3; background: var(--sand); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.svc:hover .svc__media img { transform: scale(1.05); }
.svc h3 { margin-top: 22px; }
.svc p { margin-top: 10px; font-size: .93rem; }
.svc .arrow-link { margin-top: 18px; }

/* ---------------- Project list (We built) ---------------- */
.plist { border-top: 1px solid var(--line); }
.prow {
  display: grid; grid-template-columns: 90px 1fr 240px 40px; gap: 24px; align-items: center;
  padding: clamp(20px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line);
  position: relative; transition: padding-inline .5s var(--ease);
}
.prow:hover { padding-inline: 14px; }
.prow__year { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--grey-2); }
.prow__name { font-family: var(--display); font-size: clamp(1.3rem, 2.8vw, 2.3rem); letter-spacing: -.015em; line-height: 1.1; }
.prow__cat { font-size: .8rem; color: var(--grey); }
.prow__go { justify-self: end; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: background .35s, color .35s, border-color .35s; }
.prow__go svg { width: 13px; height: 13px; }
.prow:hover .prow__go { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 820px){
  .prow { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .prow__year { grid-column: 1; }
  .prow__go { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
  .prow__cat { grid-column: 1; }
}
/* floating hover preview */
.pfloat {
  position: fixed; top: 0; left: 0; width: 300px; aspect-ratio: 4/3; z-index: 150;
  pointer-events: none; opacity: 0; overflow: hidden; will-change: transform;
}
.pfloat img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px), (pointer: coarse) { .pfloat { display: none; } }

/* ---------------- Big statistic ---------------- */
.bigstat { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,5vw,70px); align-items: center; }
.bigstat__num { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(5rem, 18vw, 17rem); line-height: .86; letter-spacing: -.025em; }
.bigstat__txt { max-width: 420px; }
@media (max-width: 820px){ .bigstat { grid-template-columns: 1fr; } }

.statgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.statgrid > div { background: var(--paper); padding: clamp(24px,3vw,42px) clamp(16px,2vw,28px); }
.bg-bone .statgrid > div { background: var(--bone); }
.statgrid strong { display: block; font-family: var(--display); font-size: clamp(2.2rem,4.4vw,3.6rem); letter-spacing: -.02em; line-height: 1.02; font-weight: var(--display-weight); }
.statgrid span { display: block; margin-top: 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); }
@media (max-width: 780px){ .statgrid { grid-template-columns: repeat(2,1fr); } }

/* ---------------- Feature split ---------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.split--rev .split__media { order: 2; }
.split__media { overflow: hidden; aspect-ratio: 5/4; background: var(--sand); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } }

.ticks { display: grid; gap: 0; margin-top: 26px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-80); align-items: start; }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks svg { width: 15px; height: 15px; margin-top: 5px; }
.bg-ink .ticks li { border-color: var(--line-2); color: rgba(255,255,255,.8); }

/* ---------------- Process steps ---------------- */
.steps { border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 90px 1fr; gap: clamp(16px,3vw,40px); padding: clamp(22px,2.6vw,36px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.step__n { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--grey-2); padding-top: 6px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: .94rem; max-width: 60ch; }
.bg-ink .steps, .bg-ink .step { border-color: var(--line-2); }
@media (max-width: 600px){ .step { grid-template-columns: 60px 1fr; } }

/* ---------------- FAQ accordion ---------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(20px,2.4vw,30px) 0; text-align: left;
  font-family: var(--display); font-size: clamp(1.05rem,1.9vw,1.5rem); letter-spacing: -.01em; line-height: 1.3;
}
.faq__icon { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; transition: background .35s, border-color .35s; }
.faq__icon::before, .faq__icon::after { content:""; position:absolute; background: var(--ink); transition: transform .4s var(--ease), background .35s; }
.faq__icon::before { width: 13px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 13px; }
.faq__item.open .faq__icon { background: var(--ink); border-color: var(--ink); }
.faq__item.open .faq__icon::before, .faq__item.open .faq__icon::after { background: #fff; }
.faq__item.open .faq__icon::after { transform: scaleY(0); }
.faq__a { overflow: hidden; height: 0; }
.faq__a p { padding-bottom: 26px; max-width: 68ch; font-size: .95rem; }

/* ---------------- Reviews ---------------- */
.gbadge { display:inline-flex; align-items:center; gap:12px; border:1px solid var(--line); padding:9px 16px; }
.gbadge svg.g { width:19px; height:19px; }
.gbadge strong { font-size:1rem; }
.stars { display:inline-flex; gap:2px; color:#111; }
.stars svg { width:13px; height:13px; }
.review { border-top: 1px solid var(--line); padding-top: 24px; height: 100%; display: flex; flex-direction: column; gap: 16px; }
.review p { color: var(--ink-80); font-size: .96rem; flex: 1; }
.review__who strong { display:block; font-size:.9rem; }
.review__who span { font-size:.76rem; color: var(--grey); }

/* ---------------- Gallery ---------------- */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 40px; }
.filter { font-family: var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.8em 1.4em; border:1px solid var(--line); border-radius:0; color: var(--grey); transition: all .3s; }
.filter.active, .filter:hover { background: var(--ink); color:#fff; border-color: var(--ink); }
.masonry { columns: 3; column-gap: clamp(12px,1.6vw,22px); }
@media (max-width: 940px){ .masonry { columns: 2; } }
@media (max-width: 560px){ .masonry { columns: 1; } }
.tile { break-inside: avoid; margin-bottom: clamp(12px,1.6vw,22px); position: relative; overflow: hidden; cursor: pointer; background: var(--sand); }
.tile img { width:100%; transition: transform 1s var(--ease-out); }
.tile::after { content:""; position:absolute; inset:0; background: linear-gradient(transparent 55%, rgba(0,0,0,.6)); opacity:0; transition: opacity .45s; }
.tile figcaption { position:absolute; left:20px; bottom:16px; z-index:2; color:#fff; font-size:.8rem; letter-spacing:.06em; opacity:0; transform: translateY(8px); transition: all .45s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile:hover::after, .tile:hover figcaption { opacity:1; transform: translateY(0); }
.tile.hide { display: none; }

.lb { position: fixed; inset:0; z-index:300; background: rgba(10,10,10,.95); display:grid; place-items:center; padding:30px; opacity:0; visibility:hidden; transition: opacity .35s; }
.lb.open { opacity:1; visibility:visible; }
.lb img { max-width:90vw; max-height:86vh; }
.lb__close,.lb__nav { position:absolute; width:50px; height:50px; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#fff; display:grid; place-items:center; transition: background .3s; }
.lb__close:hover,.lb__nav:hover { background: rgba(255,255,255,.14); }
.lb__close { top:24px; right:24px; }
.lb__nav { top:50%; transform: translateY(-50%); }
.lb__nav.prev { left:24px; } .lb__nav.next { right:24px; }
.lb svg { width:20px; height:20px; }
@media (max-width:640px){ .lb__nav { display:none; } }

/* ---------------- Instagram strip ---------------- */
.ig-grid { display:grid; grid-template-columns: repeat(6,1fr); gap: 2px; }
.ig-grid a { position:relative; aspect-ratio:1; overflow:hidden; background: var(--sand); }
.ig-grid img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-out); }
.ig-grid a:hover img { transform: scale(1.07); }
@media (max-width: 900px){ .ig-grid { grid-template-columns: repeat(3,1fr); } }

/* ---------------- Forms ---------------- */
.form { display: grid; gap: 0; }
.field { border-bottom: 1px solid var(--line); padding: 14px 0; }
.field label { display:block; font-family: var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--grey-2); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width:100%; border:0; background:transparent; font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: 6px 0;
}
.field input::placeholder, .field textarea::placeholder {
  font-family: var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--grey-2);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; }
.field:focus-within { border-color: var(--ink); }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap: 0 clamp(20px,3vw,40px); }
@media (max-width:640px){ .form .row { grid-template-columns:1fr; } }
.form .btn { margin-top: 30px; justify-self: start; }
.form__note { font-size:.8rem; color: var(--grey); margin-top: 16px; }
.form-success { display:none; border:1px solid var(--ink); padding:16px 18px; font-size:.9rem; margin-bottom: 20px; }
.form-success.show { display:block; }

.cinfo { display:grid; }
.cinfo li { border-top: 1px solid var(--line); padding: 20px 0; display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline; }
.cinfo li:last-child { border-bottom: 1px solid var(--line); }
.cinfo strong { font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color: var(--grey); }
.cinfo a, .cinfo p { color: var(--ink); font-size: 1rem; }
@media (max-width: 520px){ .cinfo li { grid-template-columns: 1fr; gap: 4px; } }
.map-embed { width:100%; min-height: 320px; border:0; filter: grayscale(1) contrast(1.05); }

/* ---------------- Newsletter ---------------- */
.nl { display:flex; gap: 0; border-bottom: 1px solid var(--line-2); max-width: 340px; }
.nl input { flex:1; background:transparent; border:0; color:#fff; font-family: var(--sans); font-size:.9rem; padding: 12px 0; }
.nl input::placeholder { color: rgba(255,255,255,.4); }
.nl input:focus { outline:none; }
.nl button { color:#fff; padding: 0 6px; }
.nl button svg { width:16px; height:16px; transition: transform .4s var(--ease); }
.nl button:hover svg { transform: translateX(4px); }

/* ---------------- Footer ---------------- */
.footer { background: var(--ink); color: rgba(255,255,255,.62); padding-top: clamp(60px,7vw,110px); }
.footer a { color: rgba(255,255,255,.62); transition: color .3s; }
.footer a:hover { color: #fff; }
.footer__brand .brand__mark { color: #fff; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__name small { color: rgba(255,255,255,.45); }
.footer__mark { display: block; width: 62px; height: 62px; color: #fff; margin-bottom: 18px; }
.footer__mark svg { width: 100%; height: 100%; display: block; }
@media (max-width: 700px){ .footer__mark { width: 52px; height: 52px; } }
.footer__big { font-family: var(--display); font-size: clamp(2.2rem, 7vw, 6rem); letter-spacing: -.02em; line-height: 1; color: #fff; }
.footer__top { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-block: clamp(40px,5vw,70px); border-top: 1px solid var(--line-2); margin-top: clamp(40px,5vw,70px); }
@media (max-width: 900px){ .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer__top { grid-template-columns: 1fr; } }
.footer h4 { font-family: var(--mono); font-size:.7rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color: var(--grey-2); margin-bottom: 18px; }
.footer ul { display:grid; gap: 11px; font-size:.9rem; }
.socials { display:flex; gap: 10px; margin-top: 22px; }
.socials a { width:38px; height:38px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; transition: all .35s; }
.socials a:hover { background:#fff; color: var(--ink); border-color:#fff; }
.socials svg { width:15px; height:15px; }
.footer__bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block: 24px; border-top: 1px solid var(--line-2); font-size:.8rem; }
.footer__bottom .links { display:flex; gap: 22px; flex-wrap:wrap; }

/* ---------------- Marquee ---------------- */
.marquee { overflow: hidden; padding-block: clamp(22px,3vw,40px); border-block: 1px solid var(--line); }
.bg-ink.marquee { border-color: var(--line-2); }
.marquee__track { display: flex; white-space: nowrap; will-change: transform; }
.marquee__track span { font-family: var(--display); font-size: clamp(1.8rem,5.5vw,4.4rem); letter-spacing: -.015em; padding-inline: .4em; display: inline-flex; align-items: center; gap: .5em; }
.marquee__track span::after { content: "—"; opacity: .35; }

/* ---------------- Prose (legal) ---------------- */
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(1.4rem,2.4vw,1.9rem); margin: 44px 0 14px; }
.prose h3 { font-size: 1.1rem; margin: 26px 0 10px; }
.prose p, .prose li { color: var(--grey); font-size: .98rem; margin-bottom: 14px; }
.prose ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin-bottom: 16px; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { font-size:.85rem; color: var(--grey-2); }

/* Utilities */
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:clamp(34px,4vw,60px)}
.mb-m{margin-bottom:26px}.mb-l{margin-bottom:clamp(34px,4vw,60px)}
.flex-between { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* =========================================================
   TEMPLATE-MATCH ADDITIONS
   ========================================================= */

/* ---- Header: logo + MENU trigger only ---- */
.brand__name { font-weight: var(--display-weight); letter-spacing: .04em; text-transform: uppercase; font-size: 1.16rem; }
.brand__name b { font-weight: var(--display-weight); }
.brand__name i { font-style: normal; font-weight: 300; color: var(--grey); }
.brand__name small { display:block; font-family: var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color: var(--grey-2); margin-top:2px; }

.menu-trigger { display:inline-flex; align-items:center; gap:12px; font-family: var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; }
.menu-trigger .bars { display:inline-flex; flex-direction:column; gap:4px; width:20px; }
.menu-trigger .bars i { display:block; height:1.5px; background: currentColor; transition: transform .4s var(--ease), width .35s var(--ease); }
.menu-trigger .bars i:nth-child(1){ width:20px; }
.menu-trigger .bars i:nth-child(2){ width:13px; align-self:flex-end; }
.menu-trigger:hover .bars i:nth-child(2){ width:20px; }

/* ---- Full-screen menu overlay ---- */
.overlay {
  position: fixed; inset: 0; z-index: 400; background: var(--white);
  display: flex; flex-direction: column; padding: 26px var(--gutter) 40px;
  transform: translateY(-100%); transition: transform .8s var(--ease-out);
  overflow-y: auto;
}
body.menu-open .overlay { transform: translateY(0); }
body.menu-open { overflow: hidden; }
.overlay__top { display:flex; align-items:center; justify-content:space-between; }
.overlay__close { display:inline-flex; align-items:center; gap:10px; font-family: var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; }
.overlay__close svg { width:15px; height:15px; transition: transform .45s var(--ease); }
.overlay__close:hover svg { transform: rotate(90deg); }
.overlay__body { flex:1; display:flex; flex-direction:column; justify-content:center; padding-block: clamp(30px,6vh,70px); }
.overlay__links { border-top: 1px solid var(--line); }
.overlay__links a {
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--display); font-size: clamp(2rem, 6vw, 4.4rem); font-weight: var(--display-weight); letter-spacing: -.02em;
  line-height: 1.2; padding: clamp(8px,1vw,14px) 0; border-bottom: 1px solid var(--line);
  transition: padding-inline .5s var(--ease), color .35s;
}
.overlay__links a span.n { font-family: var(--mono); font-size:.72rem; letter-spacing:.1em; color: var(--grey-2); }
.overlay__links a:hover { padding-inline: 16px; }
.overlay__foot { display:flex; align-items:center; gap: 26px; flex-wrap:wrap; }
.overlay__foot .links { display:flex; gap: 22px; flex-wrap:wrap; font-size:.92rem; }
.overlay__foot .links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Featured work grid ---- */
.work-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,3vw,44px); }
@media (max-width: 760px){ .work-grid { grid-template-columns: 1fr; } }
.work-item { display:block; }
.work-item__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-top: 1px solid var(--ink); padding: 14px 0 16px; }
.work-item__head h3 { font-size: clamp(1.05rem,1.6vw,1.35rem); font-weight: 400; letter-spacing:-.01em; }
.work-item__meta { font-family: var(--mono); font-size:.74rem; letter-spacing:.08em; color: var(--grey); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.work-item__meta::before { content:"•"; color: var(--ink); }
.work-item__media { overflow:hidden; aspect-ratio: 4/3.2; background: var(--sand); }
.work-item__media img { width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease-out); }
.work-item:hover .work-item__media img { transform: scale(1.045); }

/* ---- Inquiry form block ---- */
.inquiry { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,80px); align-items:start; }
@media (max-width: 860px){ .inquiry { grid-template-columns: 1fr; } }
.inq-form .field { border-bottom: 1px solid var(--ink); padding: 10px 0 12px; }
.inq-form .field input, .inq-form .field textarea, .inq-form .field select { font-size:.95rem; }
.btn--square { border-radius:0; padding: 1.05em 1.9em; }

/* ---- Footer (light, template style) ---- */
.footer { background: var(--white); color: var(--ink); padding-top: clamp(50px,6vw,80px); position: relative; }
.footer a { color: var(--ink); }
.footer a:hover { color: var(--grey); }
.footer h4 { color: var(--grey-2); }
.footer__grid { display:grid; grid-template-columns: 1.15fr 1px 1fr; gap: clamp(28px,4vw,60px); padding-bottom: clamp(36px,4vw,60px); }
@media (max-width: 900px){ .footer__grid { grid-template-columns: 1fr; } .footer__div { display:none; } }
.footer__div { background: var(--line); }
.footer__logo { font-family: var(--display); font-size: clamp(1.7rem,3vw,2.5rem); font-weight: var(--display-weight); letter-spacing:.03em; text-transform: uppercase; }
.footer__logo i { font-style:normal; font-weight:300; color: var(--grey); }
.footer__cols { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px); }
@media (max-width: 520px){ .footer__cols { grid-template-columns: 1fr; } }
.footer__cols ul { display:block; }
.footer__cols li a { display:block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size:.98rem; transition: padding-left .4s var(--ease); }
.footer__cols li a:hover { padding-left: 8px; }
.footer__social { display:flex; align-items:center; gap: 22px; flex-wrap:wrap; margin-bottom: 30px; }
.footer__social .links { display:flex; gap:22px; flex-wrap:wrap; font-size:.95rem; }
.footer__social .links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__sub { max-width: 380px; }
.footer__sub h3 { font-size: clamp(1.1rem,1.8vw,1.4rem); font-weight:400; margin-bottom: 12px; }
.nl { display:flex; align-items:stretch; gap:0; border-bottom: 1px solid var(--ink); max-width: 340px; }
.nl input { flex:1; background:transparent; border:0; color: var(--ink); font-family: var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; padding: 12px 0; }
.nl input::placeholder { color: var(--grey-2); }
.nl input:focus { outline:none; }
.nl button { background: var(--ink); color:#fff; padding: 0 20px; font-size:.82rem; transition: background .3s; }
.nl button:hover { background:#333; }
.footer__bottom { border-top: 1px solid var(--line); padding-block: 22px; text-align:center; font-family: var(--mono); font-size:.72rem; letter-spacing:.06em; color: var(--grey); display:block; }
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer__addr { margin-top: clamp(26px,4vw,50px); }
.footer__addr p { color: var(--ink); font-size:.98rem; line-height:1.55; }

/* Back to top (vertical, left edge) */
.to-top { position: fixed; left: 14px; bottom: 40px; z-index: 120; display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0; visibility:hidden; transition: opacity .4s, visibility .4s; }
.to-top.show { opacity:1; visibility:visible; }
.to-top__btn { width:30px; height:30px; border:1px solid var(--line); display:grid; place-items:center; background: var(--white); transition: background .3s, color .3s; }
.to-top__btn:hover { background: var(--ink); color:#fff; }
.to-top__btn svg { width:13px; height:13px; }
.to-top span { font-family: var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--grey);
  writing-mode: vertical-rl; }
@media (max-width: 1100px){ .to-top { display:none; } }

/* Tighten the inquiry block where it sits directly above the footer */
.section.bg-white:has(.inquiry) { padding-bottom: clamp(40px, 5vw, 70px); }
.footer { padding-top: clamp(40px, 5vw, 70px); }
/* Work grid images: slightly wider crop, closer to the reference */
.work-item__media { aspect-ratio: 4/3; }

/* Gallery: uniform grid instead of column-masonry.
   Reserves space before images load (no collapsed layout) and matches the
   template's disciplined grid. */
.masonry { columns: auto; column-gap: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
@media (max-width: 940px){ .masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .masonry { grid-template-columns: 1fr; } }
.tile { margin-bottom: 0; aspect-ratio: 4/3; }
.tile img { width: 100%; height: 100%; object-fit: cover; }

/* Logo marks scale to their container when CSS is present; the SVG files also
   carry intrinsic width/height so they stay small if the stylesheet is missing. */
.brand__mark svg { width: 100%; height: 100%; display: block; }

/* Hidden <symbol> holding the script monogram — inlined once per page. */
.brand-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The monogram is a fine script inside a hairline ring, so it needs a little
   more room than a solid geometric mark to stay legible. */
.brand__mark { width: 42px; height: 42px; }
@media (max-width: 700px){ .brand__mark { width: 38px; height: 38px; } }

/* ---------------- Before & After ---------------- */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
@media (max-width: 900px){ .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .ba-grid { grid-template-columns: 1fr; } }
.ba-item { border-top: 1px solid var(--line); padding-top: 16px; }
.ba-item__media { overflow: hidden; background: var(--sand); }
.ba-item__media img { width: 100%; display: block; transition: transform 1s var(--ease-out); }
.ba-item:hover .ba-item__media img { transform: scale(1.03); }
.ba-item__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ba-item__cap h3 { font-size: 1.05rem; font-weight: 400; letter-spacing: -.01em; }
.ba-item__cap span { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--grey-2); }

/* Hero banner: 16:9 suits the client photography better than 21:9 */
.hero__banner { aspect-ratio: 16/9; }
@media (max-width: 700px){ .hero__banner { aspect-ratio: 4/3; } }

/* =========================================================
   DARK FOOTER — gives a clean break from the white inquiry
   section above it and anchors the bottom of every page.
   ========================================================= */
.footer { background: var(--ink); color: rgba(255,255,255,.62); }
.footer a { color: rgba(255,255,255,.82); }
.footer a:hover { color: #fff; }
.footer h4 { color: rgba(255,255,255,.45); }
.footer .mono { color: rgba(255,255,255,.5); }

.footer__logo { color: #fff; }
.footer__logo i { color: rgba(255,255,255,.45); }

.footer__div { background: var(--line-2); }
.footer__cols li a { border-bottom-color: var(--line-2); color: #fff; }
.footer__cols li a:hover { color: rgba(255,255,255,.7); }
.footer__addr p { color: rgba(255,255,255,.82); }
.footer__sub h3 { color: #fff; }
.footer__social .links a { color: #fff; }

/* Newsletter: light field on dark, inverted button */
.nl { border-bottom-color: rgba(255,255,255,.32); }
.nl input { color: #fff; }
.nl input::placeholder { color: rgba(255,255,255,.42); }
.nl button { background: #fff; color: var(--ink); }
.nl button:hover { background: rgba(255,255,255,.82); }

.footer__bottom { border-top-color: var(--line-2); color: rgba(255,255,255,.5); }
.footer__bottom a { color: rgba(255,255,255,.72); }

/* Hairline so the dark footer meets the section above cleanly */
.footer::before { content: ""; display: block; height: 1px; background: var(--ink); }

/* Back-to-top sits over light page content, so keep it light */
.to-top__btn { background: var(--white); color: var(--ink); border-color: var(--line); }

/* =========================================================
   PHOTO-BACKGROUND SECTIONS
   Full-bleed photograph behind a dark scrim, light type on top.
   The section keeps a solid dark base colour, so if the photo is slow
   or missing the text still reads.
   ========================================================= */
.photo-bg { position: relative; overflow: hidden; background: #0D0D0D; color: rgba(255,255,255,.72); }
.photo-bg__media { position: absolute; inset: 0; z-index: 0; }
.photo-bg__media img { width: 100%; height: 115%; object-fit: cover; }
.photo-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,.88), rgba(10,10,10,.80) 45%, rgba(10,10,10,.90));
}
/* Lift content above the scrim — but NOT the media layer, which must stay
   absolutely positioned underneath it. */
.photo-bg > *:not(.photo-bg__media) { position: relative; z-index: 2; }
.photo-bg__media { position: absolute !important; inset: 0; z-index: 0; }

.photo-bg h1, .photo-bg h2, .photo-bg h3 { color: #fff; }
.photo-bg p { color: rgba(255,255,255,.72); }
.photo-bg .label { color: rgba(255,255,255,.6); }
.photo-bg .label--dot::before { background: #fff; }
.photo-bg .arrow-link { color: #fff; }
.photo-bg .statement { color: #fff; }

/* Work grid sitting on a dark photo background */
.photo-bg .work-item__head { border-top-color: rgba(255,255,255,.35); }
.photo-bg .work-item__head h3 { color: #fff; }
.photo-bg .work-item__meta { color: rgba(255,255,255,.65); }
.photo-bg .work-item__meta::before { color: #fff; }
.photo-bg .work-item__media { background: rgba(255,255,255,.06); }

/* Stat grid on a dark photo background */
.photo-bg .statgrid { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.photo-bg .statgrid > div { background: transparent; }
.photo-bg .statgrid strong { color: #fff; }
.photo-bg .statgrid span { color: rgba(255,255,255,.6); }

/* Steps on a dark photo background */
.photo-bg .steps, .photo-bg .step { border-color: rgba(255,255,255,.16); }
.photo-bg .step h3 { color: #fff; }
.photo-bg .step p { color: rgba(255,255,255,.65); }
.photo-bg .step__n { color: rgba(255,255,255,.45); }

/* Ticks on a dark photo background */
.photo-bg .ticks li { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.8); }

.photo-bg .btn--outline { border-color: rgba(255,255,255,.35); color: #fff; }
.photo-bg .btn--outline:hover { background: #fff; color: var(--ink); }

/* Footer bottom bar: copyright · legal links · agency credit */
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 26px; text-align: left;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__legal a { white-space: nowrap; }
.footer__credit { color: rgba(255,255,255,.45); white-space: nowrap; }
.footer__credit a { color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(255,255,255,.25); }
.footer__credit a:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 760px){
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; }
}

/* =========================================================
   FORM POLISH
   Every field reads the same: monospace uppercase placeholder, grey until
   filled, hairline underline that darkens on focus. The <select> is styled
   to match the inputs rather than showing browser chrome.
   ========================================================= */
.form .field { position: relative; }

.form input, .form textarea, .form select {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink);
  padding: 10px 0; line-height: 1.5;
}
.form input::placeholder, .form textarea::placeholder {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grey-2); opacity: 1;
}

/* Select: strip native chrome, add our own chevron, grey until a real choice */
.form select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 0; background-color: transparent; border-radius: 0;
  width: 100%; cursor: pointer; padding-right: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 14px;
}
.form select:invalid { color: var(--grey-2); }           /* placeholder state */
.form select option { font-family: var(--sans); font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.form select option[value=""] { color: var(--grey-2); }

/* Textarea: no drag handle, comfortable fixed height */
.form textarea { resize: none; min-height: 104px; }

/* Underline behaviour, consistent across input / select / textarea */
.form .field { border-bottom: 1px solid var(--line); transition: border-color .3s; }
.form .field:focus-within { border-bottom-color: var(--ink); }
.inq-form .field { border-bottom: 1px solid rgba(16,16,16,.55); }
.inq-form .field:focus-within { border-bottom-color: var(--ink); }

/* Even vertical rhythm between rows */
.inq-form { row-gap: 4px; }
.inq-form .row { gap: 0 clamp(20px,3vw,44px); }
.inq-form .field { padding: 12px 0 10px; }
.form .btn { margin-top: 26px; }
.form__note { margin-top: 14px; }

/* Stack the form on small screens with comfortable tap targets */
@media (max-width: 640px){
  .inq-form .row { grid-template-columns: 1fr; }
  .form input, .form textarea, .form select { font-size: .82rem; padding: 12px 0; }
}

/* =========================================================
   WALKTHROUGH CLIPS
   Dark, full-bleed. The footage carries the section; captions sit over the
   video on a gradient rather than stacking beneath it.
   ========================================================= */
.walkthru { background: #0D0D0D; color: rgba(255,255,255,.7); }
.walkthru h2 { color: #fff; }
.walkthru .label { color: var(--gold-soft); }
.walkthru .label--dot::before { background: var(--gold-soft); }
.walkthru__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 70px); align-items: end; }
.walkthru__head p { color: rgba(255,255,255,.6); max-width: 40ch; }
@media (max-width: 860px){ .walkthru__head { grid-template-columns: 1fr; } }

.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 900px){ .vid-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .vid-grid { grid-template-columns: 1fr; } }

.vid-item { margin: 0; }
.vid-item__media {
  position: relative; aspect-ratio: 4/5; overflow: hidden; background: #1a1a1a;
}
.vid-item video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Caption sits on a gradient over the footage. */
.vid-item__cap {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(8,8,8,.82));
  pointer-events: none;
}
.vid-item__cap h3 { color: #fff; font-size: 1.15rem; font-weight: 500; }
.vid-item__cap span {
  display: block; margin-top: 6px; font-family: var(--mono);
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft);
}

.vid-item__toggle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 62px; height: 62px; z-index: 3; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: var(--ink); border: 0; cursor: pointer;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.vid-item__toggle svg { width: 20px; height: 20px; margin-left: 3px; }
.vid-item__toggle:hover { transform: translate(-50%,-50%) scale(1.06); }
.vid-item.is-playing .vid-item__toggle { opacity: 0; pointer-events: none; }
.vid-item:hover .vid-item__toggle { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce){
  .vid-item__toggle { opacity: 1 !important; pointer-events: auto !important; }
}

/* =========================================================
   BRAND LOCKUP + BRAND COLOURS
   The client's own logo: script wordmark over letter-spaced caps, navy and
   antique gold. The circular monogram stays as the app icon and social badge.
   ========================================================= */
:root {
  --navy:      #2C3654;   /* the logo ground */
  --navy-deep: #232B44;   /* its darker corner, used for the footer */
  --gold:      #A88040;   /* the label colour in the logo */
  --gold-soft: #C6A063;   /* lifted, for gold on a dark ground */
}

/* ---------------------------------------------------------------------------
   THE BADGE
   The "Bi" monogram badge is the primary mark. It leads every lockup: badge
   left, script wordmark and gold label stacked to its right, all three set on
   one optical centre line. Added as a grid cell on .brand so the same lockup
   appears in the header, the menu overlay and the footer with no markup churn.
   --------------------------------------------------------------------------- */
.brand {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 13px;
  row-gap: 3px;
}
.brand::before {
  content: "";
  grid-column: 1; grid-row: 1 / span 2;
  width: clamp(36px, 3.6vw, 46px); aspect-ratio: 1;
  background: url("assets/logo-bi-badge-256.png") center / contain no-repeat;
  border-radius: 14%;
  transition: transform .5s var(--ease-out);
}
.brand:hover::before { transform: translateY(-2px) rotate(-2deg); }
.brand__wm { grid-column: 2; grid-row: 1; display: block; color: var(--ink); align-self: end; }
.brand__wm svg { display: block; width: clamp(104px, 10vw, 140px); height: auto; }
.brand__label {
  grid-column: 2; grid-row: 2; align-self: start;
  font-family: var(--mono); font-size: .56rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  padding-left: .18em;                     /* optically aligns with the script's B */
}
@media (max-width: 700px){
  .brand { column-gap: 10px; }
  .brand__label { font-size: .5rem; letter-spacing: .24em; }
}

/* Footer lockup: same structure, larger, with the badge's white monogram
   instead of the full badge — the navy ground would sink into the black. */
.footer__grid .footer__wm { position: relative; }
.footer__wm::before {
  content: "";
  position: absolute; left: 0; bottom: calc(100% + 20px);
  width: clamp(54px, 5vw, 68px); aspect-ratio: 1081 / 924;
  background: url("assets/logo-bi-white.png") left bottom / contain no-repeat;
  opacity: .96;
}
.footer__wm { display: block; color: #fff; margin-bottom: 8px; margin-top: clamp(58px, 6vw, 76px); }
.footer__wm svg { display: block; width: clamp(150px, 17vw, 230px); height: auto; }
/* Footer wordmark as live type, matching the header and menu lockups. */
.footer__wm--type {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 1; letter-spacing: -.01em;
}
.footer__label {
  display: block; font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
  padding-left: .2em; margin-bottom: 22px;
}

/* Brand colours applied with restraint: navy replaces the near-black on the
   dark sections, gold picks out the micro-labels. */
.footer { background: #0D0D0D; }
.label--dot::before { background: var(--gold); }
.bg-ink .label--dot::before, .photo-bg .label--dot::before { background: var(--gold-soft); }
.label, .mono { color: var(--gold); }
.bg-ink .label, .photo-bg .label { color: var(--gold-soft); }
.footer .mono { color: rgba(255,255,255,.5); }
.footer__addr h4, .footer__social h4, .footer__col h4 { color: var(--gold-soft); }
.svc__num { color: var(--gold); }

/* =========================================================
   BEFORE / AFTER COMPARISON SLIDER
   ========================================================= */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 760px){ .ba-grid { grid-template-columns: 1fr; } }

.ba-slide { margin: 0; --pos: 50%; }
.ba-slide__media {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--sand); cursor: ew-resize; user-select: none;
}
.ba-slide__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* The "before" is clipped to the left of the handle. */
.ba-slide__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba-slide__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: rgba(255,255,255,.9); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.ba-slide__handle i {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: rgba(255,255,255,.94); box-shadow: 0 4px 18px rgba(0,0,0,.22);
}
/* Two chevrons drawn with borders, so there's no extra asset to load. */
.ba-slide__handle i::before, .ba-slide__handle i::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  border: 2px solid var(--ink); border-width: 2px 2px 0 0;
}
.ba-slide__handle i::before { left: 13px; transform: translateY(-50%) rotate(-135deg); }
.ba-slide__handle i::after  { right: 13px; transform: translateY(-50%) rotate(45deg); }

/* A real range input under the pointer: keyboard, touch and mouse for free. */
.ba-slide__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none;
}
.ba-slide__range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100vh; }
.ba-slide__range::-moz-range-thumb { width: 46px; height: 100vh; border: 0; }
.ba-slide__range:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 3px; }

.ba-slide__tag {
  position: absolute; bottom: 14px; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: rgba(13,13,13,.72); padding: 6px 10px;
}
.ba-slide__tag--before { left: 14px; }
.ba-slide__tag--after  { right: 14px; }

.ba-slide figcaption { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.ba-slide figcaption h3 { font-size: 1.05rem; font-weight: 500; }
.ba-slide figcaption span {
  display: block; margin-top: 5px; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
}


/* =========================================================
   HEADING ACCENT — last word of every title
   Canela's own italic, set at the same size as the roman so the two read as
   one line of type rather than two fonts fighting. This is the accent from the
   reference: an italic tail on the heading, not a brush signature.
   Yellowtail ("BI Cursive") is still loaded — swap --cursive back to it and
   restore the scale/drop values below if the brush is wanted instead.
   ========================================================= */
:root {
  --cursive: var(--display);
  --cursive-scale: 1;      /* Canela italic shares the roman's x-height — no compensation needed */
  --cursive-drop: 0;
}
.cursive {
  font-family: var(--cursive);
  font-weight: var(--display-weight);
  font-style: italic;
  font-size: calc(1em * var(--cursive-scale));
  line-height: inherit;
  letter-spacing: 0;               /* italics need the tight display tracking released */
  display: inline-block;
  transform: translateY(var(--cursive-drop));
  padding-right: .04em;            /* the exit stroke overhangs the glyph box */
}
@media (max-width: 600px){ :root { --cursive-scale: 1; } }

/* =========================================================
   NAVY THEME — the logo's blue, carried through the UI
   The badge is navy on black over warm bone paper, so the site follows the
   same three-part logic: bone page, navy ink for anything the eye should act
   on, and navy-black for the full-bleed dark sections. Gold stays as the
   micro-label accent — it is the logo's second colour, and it is what keeps
   the navy from reading corporate. Type stays near-black: navy body copy on
   bone goes muddy.
   Loaded last so it overrides the neutral values above without touching them.
   ========================================================= */
:root {
  --navy:       #2C3654;   /* the logo ground — primary action colour */
  --navy-lift:  #384467;   /* hover, one step up */
  --navy-deep:  #1B2236;   /* dark section ground */
  --navy-black: #141A29;   /* footer, deepest surface */
  --navy-line:  rgba(44,54,84,.22);
}

/* ---- Dark grounds ---- */
.bg-ink { background: var(--navy-deep); }
.footer { background: var(--navy-black); }
.footer::before { background: var(--navy-black); }
.photo-bg { background: var(--navy-deep); }
.walkthru { background: var(--navy-deep); }
.overlay { background: var(--navy-black); }

/* ---------------------------------------------------------------------------
   MENU OVERLAY — dark sheet
   Navigation reads as the primary object at the left; the practical detail
   (contact, location, services) sits in quiet columns to the right, so the
   sheet answers "where do I go" and "how do I reach you" in one view.
   --------------------------------------------------------------------------- */
.overlay { color: #fff; padding-bottom: clamp(28px, 4vh, 46px); }
.overlay .brand__wm { color: #fff; }
/* The menu sets the lockup as live type rather than the drawn mark: "Built In"
   in the Canela display cut so it matches the navigation beside it, the
   descriptor in Instrument Sans. */
.brand--type .brand__wm {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1;
  letter-spacing: -.005em; align-self: center;
}
.brand--type .brand__label {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.overlay .brand__label { color: var(--gold-soft); }
/* The lockup on the dark sheet is the wordmark alone: the badge is a navy
   plate and would disappear against navy, and the type carries the identity
   at this size anyway. */
.overlay .brand::before { display: none; }
.overlay .brand { grid-template-columns: auto; }
.overlay .brand__wm, .overlay .brand__label { grid-column: 1; }

.overlay__close {
  width: 54px; height: 54px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; color: var(--navy-black);
  transition: transform .5s var(--ease-out), background .35s;
}
.overlay__close svg { width: 20px; height: 20px; }
.overlay__close:hover { transform: rotate(90deg); }
.overlay__close:hover svg { transform: none; }

.overlay__body {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 90px); align-items: start;
  padding-block: clamp(40px, 8vh, 96px);
}
.overlay__links { border-top: 0; display: flex; flex-direction: column; }
.overlay__links a {
  display: block; border: 0; padding: 0;
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: 1.06;
  letter-spacing: -.02em; color: #fff;
  transition: color .35s, padding-inline .5s var(--ease-out);
}
.overlay__links a[aria-current="page"] { color: rgba(255,255,255,.42); }
.overlay__links a:hover { color: var(--gold-soft); padding-inline: 14px 0; }

.overlay__info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(26px, 3vw, 48px);
  padding-top: clamp(8px, 1.4vh, 16px);
}
.overlay__col { display: flex; flex-direction: column; gap: 18px; }
.overlay__ttl {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
}
.overlay__col p { font-size: .94rem; line-height: 1.65; color: rgba(255,255,255,.82); }
.overlay__col p a { color: rgba(255,255,255,.82); }
.overlay__col p a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.overlay__rule { border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; color: rgba(255,255,255,.6) !important; }
.overlay__svc { display: flex; flex-direction: column; gap: 9px; font-size: .94rem; }
.overlay__svc a { color: rgba(255,255,255,.82); }
.overlay__svc a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.overlay__foot {
  border-top: 1px solid rgba(255,255,255,.16); padding-top: clamp(18px, 2.4vh, 26px);
  justify-content: space-between;
}
.overlay__foot .links a { color: rgba(255,255,255,.72); }
.overlay__foot .links a:hover { color: #fff; }
.overlay__abn { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }

@media (max-width: 860px){
  .overlay__body { grid-template-columns: 1fr; gap: 34px; padding-block: 32px; }
  .overlay__links a { font-size: clamp(2rem, 9vw, 2.9rem); }
  .overlay__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* The photo-bg scrim gets a navy cast so the imagery sits in the palette
   instead of going flat grey. */
.photo-bg::after { background: linear-gradient(180deg, rgba(20,26,41,.88), rgba(20,26,41,.80) 45%, rgba(20,26,41,.92)); }

/* ---- Primary actions ---- */
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-lift); transform: translateY(-2px); }
.btn--light:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.nl button { background: var(--navy); }
.nl button:hover { background: var(--navy-lift); }

/* ---- Interactive states ---- */
.filter.active, .filter:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.prow:hover .prow__go { background: var(--navy); border-color: var(--navy); color: #fff; }
.faq__item.open .faq__icon { background: var(--navy); border-color: var(--navy); }
.faq__button:hover .faq__icon { border-color: var(--navy); }
.to-top__btn:hover { background: var(--navy); }
.field:focus-within { border-color: var(--navy); }
.burger span { background: var(--navy); }
.work-item__head { border-top-color: var(--navy); }
.work-item:hover .work-item__head h3 { color: var(--navy); }
.overlay__links a:hover { color: var(--gold-soft); }
.nav__links > a:hover, .has-drop > a:hover { color: var(--navy); }
.drop a:hover { background: rgba(44,54,84,.06); color: var(--navy); }
.arrow-link:hover { color: var(--navy); }

/* ---- The italic tail of every heading, in the logo blue.
   One accent colour, once per title — it ties the typography to the mark. ---- */
.cursive { color: var(--navy); }
/* ---- Dark-surface accents.
   ONE selector list for every dark ground on the site — .bg-ink, .photo-bg,
   .walkthru and .footer. Anything that has to flip on a dark background
   (the italic accent, the micro-labels, their dots) is listed here and only
   here, so adding a dark section can't leave one of them behind. Navy-on-navy
   is invisible: on these grounds the accent goes gold. ---- */
.bg-ink .cursive, .photo-bg .cursive, .walkthru .cursive, .footer .cursive, .hero--full .cursive { color: var(--gold-soft); }
.bg-ink .label, .photo-bg .label, .walkthru .label, .footer .label, .hero--full .label { color: var(--gold-soft); }
.bg-ink .label--dot::before, .photo-bg .label--dot::before,
.walkthru .label--dot::before, .footer .label--dot::before,
.hero--full .label--dot::before { background: var(--gold-soft); }

/* =========================================================
   FULL-FRAME HERO (home)
   One full-viewport frame: media edge to edge, everything else laid over it.
   Eyebrow and headline sit at the optical top third, the supporting line,
   actions and the fact strip anchor the bottom, and the scroll cue marks the
   right edge. The header goes light while it sits over the frame.
   ========================================================= */
.hero--full {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: clamp(120px, 16vh, 190px) clamp(30px, 4vh, 54px);
  overflow: hidden;
  background: var(--navy-black);
  color: #fff;
  isolation: isolate;
}
.hero--full .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--full .hero__media img,
.hero--full .hero__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero--full .hero__vid { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero--full .hero__vid[data-playing] { opacity: 1; }
/* Scrim: heavier at the bottom where the copy sits, light at the top so the
   photograph still reads as the subject. */
.hero--full .hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,26,41,.62) 0%, rgba(20,26,41,.34) 34%, rgba(20,26,41,.80) 100%),
    linear-gradient(90deg, rgba(20,26,41,.46) 0%, rgba(20,26,41,0) 62%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
/* The frame's copy animates in CSS, not GSAP: it is the first thing a visitor
   sees, so it must never depend on a script finishing to become visible. */
.hero__inner > *, .hero__cue { animation: heroIn 1s var(--ease-out) both; }
.hero__inner > :nth-child(1) { animation-delay: .15s; }
.hero__inner > :nth-child(2) { animation-delay: .28s; }
.hero__inner > :nth-child(3) { animation-delay: .44s; }
.hero__inner > :nth-child(4) { animation-delay: .58s; }
.hero__cue { animation-delay: .8s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes heroCueIn {
  from { opacity: 0; transform: translateY(-50%) rotate(90deg) translateX(-18px); }
  to   { opacity: 1; transform: translateY(-50%) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero__inner > *, .hero__cue { animation: none; }
}
.hero__eyebrow { display: inline-flex; align-items: center; gap: .7em; margin-bottom: clamp(18px, 3vh, 30px); }
.hero--full h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6.4vw, 6rem);
  max-width: 17ch;
  margin-bottom: clamp(22px, 4vh, 46px);
}
/* Headline, then the actions directly beneath it — the frame carries the
   message, so the copy stays to a single line. */
.hero__foot {
  display: block;
  padding-bottom: clamp(20px, 3.4vh, 38px);
}
.hero__actions { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.hero__actions .btn { padding: 12px 20px; font-size: .72rem; }
.hero__actions .arrow-link { color: #fff; font-size: .88rem; }
.hero__facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px clamp(16px, 2vw, 34px);
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: clamp(18px, 2.6vh, 28px);
}
.hero__facts span {
  display: flex; align-items: baseline; gap: .55em;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.hero__facts strong {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.015em;
  color: #fff; text-transform: none;
}
.hero__cue {
  position: absolute; z-index: 2; right: calc(var(--gutter) - 8px); top: 50%;
  transform: translateY(-50%) rotate(90deg);
  animation-name: heroCueIn;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.hero__cue i { display: block; width: 54px; height: 1px; background: rgba(255,255,255,.45); position: relative; overflow: hidden; }
.hero__cue i::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: translateX(-100%); animation: heroCue 2.4s var(--ease-out) infinite;
}
@keyframes heroCue { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }

@media (max-width: 900px){
  .hero__facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 720px){ .hero__cue { display: none; } }

/* Short viewports (laptops, landscape phones): the frame stays full-height,
   the type steps down so the fact strip is never pushed off the fold. */
@media (max-height: 780px){
  .hero--full { padding-block: clamp(92px, 13vh, 128px) clamp(20px, 3vh, 30px); }
  .hero--full h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: 18px; }
  .hero__eyebrow { margin-bottom: 14px; }
  .hero__foot { padding-bottom: 16px; }  .hero__facts { padding-top: 14px; }
  .hero__facts strong { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
}
@media (max-width: 560px){
  .hero--full { min-height: 92svh; }
  .hero--full h1 { max-width: 14ch; }
}

/* Header over the frame: light until it goes solid on scroll. */
body.hero-dark .header:not(.solid) { color: #fff; }
body.hero-dark .header:not(.solid) .brand__wm { color: #fff; }
body.hero-dark .header:not(.solid) .brand__label { color: var(--gold-soft); }
body.hero-dark .header:not(.solid) .menu-trigger { color: #fff; }
body.hero-dark .header:not(.solid) .burger span { background: #fff; }

/* =========================================================
   ONE LIGHT SURFACE
   Every light section sits on the same #F3F4F3 ground; the rhythm comes from
   full-bleed photography and the dark walkthrough band, not from alternating
   panels. Hairlines still carry the structure.
   ========================================================= */
.bg-bone, .bg-white, .bg-sand { background: var(--paper); }
.statgrid > div, .bg-bone .statgrid > div { background: var(--paper); }
.header.solid { background: rgba(243,244,243,.9); }
.to-top__btn { background: var(--paper); }
.drop { background: var(--paper); }
.drop a:hover { background: rgba(44,54,84,.06); }
/* Image wells match the ground so a loading photo reads as empty space
   rather than a grey plate. */
.svc__media, .split__media, .tile, .ig-grid a, .work-item__media,
.ba-item__media, .ba-slide__media { background: #E9EAE8; }

/* =========================================================
   HEADING WEIGHT
   Headings set in the Light cut — at display sizes a serif at 400 reads heavy
   and crowded. The italic tail separates itself by weight and slope, in the
   same ink as the rest of the line, so the distinction is typographic rather
   than a second colour.
   ========================================================= */
h1, h2, .display-xl, .display-l, .display-m, .statement, .bigstat__num { font-weight: 300; }
.cursive { color: inherit; font-weight: 400; }
.bg-ink .cursive, .photo-bg .cursive, .walkthru .cursive,
.footer .cursive, .hero--full .cursive { color: inherit; }
/* Hero headline: lightest cut, capped at 60px, with the italic matching — the
   frame is doing the work, so the type stays quiet. */
.hero--full h1 { font-weight: 300; font-size: clamp(2.1rem, 4.6vw, 3.75rem); }
.hero--full .cursive { font-weight: 300; }
/* The descriptor reads white over the hero film; it returns to gold once the
   header goes solid on the light page. */
body.hero-dark .header:not(.solid) .brand__label { color: #fff; }

/* Wordmark in the same italic cut as the headline tail, everywhere the lockup
   appears — header, menu, footer and preloader. */
.brand--type .brand__wm, .footer__wm--type, .preloader__wm--type {
  font-family: var(--cursive); font-style: italic; font-weight: 300;
}

/* =========================================================
   PAGE RHYTHM — carrying the hero's register down the page
   The frame sets the tone: a lot of air, one large light serif line per
   section, micro-labels in mono, small quiet buttons, hairlines instead of
   boxes. These rules take those same values into the sections below it.
   ========================================================= */
.section { padding-block: clamp(84px, 11vw, 190px); }
.section--sm { padding-block: clamp(56px, 7vw, 110px); }

/* Section titles set close to the hero's scale, tracked the same way. */
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); letter-spacing: -.018em; line-height: 1.04; }
h3 { font-size: clamp(1.05rem, 1.5vw, 1.32rem); }

/* Micro-labels: same mono eyebrow the hero used, with room beneath. */
.label { font-size: .68rem; letter-spacing: .2em; }
.mb-l { margin-bottom: clamp(34px, 5vw, 68px); }

/* Body copy stays short-measure and quiet so the display line leads. */
.lead { font-size: 1.02rem; line-height: 1.72; color: var(--grey); max-width: 54ch; }
.statement { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.22; }
p { text-wrap: pretty; }

/* Buttons and links at the hero's size everywhere, so no section shouts. */
.btn { padding: 12px 20px; font-size: .72rem; }
.btn--sm { padding: 11px 18px; font-size: .7rem; }
.arrow-link { font-size: .8rem; letter-spacing: .1em; }

/* Cards lose their remaining plate edges — a hairline and the photograph. */
.svc { border-top-color: var(--line); padding-top: 26px; }
.svc__media { aspect-ratio: 3/4; }
.svc h3 { margin-top: 22px; }

/* Descriptor stays in the ink tone rather than gold — the lockup reads as one
   mark. Over the hero film it goes white with the wordmark. */
.brand--type .brand__label { color: var(--grey); }
body.hero-dark .header:not(.solid) .brand__label { color: rgba(255,255,255,.72); }
.overlay .brand__label, .footer__label { color: rgba(255,255,255,.62); }
.preloader__name { color: rgba(255,255,255,.62); }

/* Glass header on scroll: a translucent pane with blur and saturation, so the
   photography beneath it still shows through instead of a flat white bar. */
.header.solid {
  background: rgba(243,244,243,.62);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-color: rgba(20,26,41,.08);
  box-shadow: 0 1px 30px rgba(20,26,41,.06);
}

/* ---- Selection and focus ---- */
::selection { background: var(--navy); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 3px;
}

/* Links inherit heading/body colour by design; give them a navy hover so any
   link added later reads as interactive rather than browser-blue. */
a { color: inherit; }
a:hover { color: var(--navy); }
.footer a:hover, .bg-ink a:hover, .photo-bg a:hover { color: #fff; }

/* =========================================================
   LUX PASS - the register of a high-end builder
   The moves that separate a premium design-and-build studio from a
   mid-market renovator: an engraved setting line above the hero, a
   larger (still Light) Canela headline, hairline ticks instead of
   bullet dots, the marquee requieted into a Canela index strip,
   reviews set as editorial pull-quotes, and every numeral on the page
   in the display serif. Gold stays micro-label-only; one light
   surface stays. Newest pass - these rules win.
   ========================================================= */

/* ---- Balanced display setting, everywhere ---- */
h1, h2 { text-wrap: balance; }

/* ---- Hero: the eyebrow slot, now occupied, and a headline with
   more presence. Still the Light cut - scale, not weight. ---- */
.hero--full h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); max-width: 16ch; }
.hero__eyebrow.label { font-size: .66rem; letter-spacing: .26em; }

/* Fact strip: hairline column separators, like a specification plate. */
@media (min-width: 901px){
  .hero__facts span:not(:first-child) {
    border-inline-start: 1px solid rgba(255,255,255,.16);
    padding-inline-start: clamp(16px, 2vw, 34px);
  }
}

/* ---- Micro-labels: the dot becomes a 22px gold hairline tick -
   engraved rather than bulleted. Dark grounds keep their gold-soft
   recolour from the navy pass (higher specificity, still wins). ---- */
.label--dot::before {
  width: 22px; height: 1px; border-radius: 0;
  background: var(--gold);
}

/* ---- Marquee: from shouting ticker to engraved index strip.
   Smaller Canela Light, alternating italic, interpunct separators. ---- */
.marquee { padding-block: clamp(24px, 3vw, 42px); }
.marquee__track span {
  font-weight: 300;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  letter-spacing: -.01em;
  padding-inline: .55em;
  color: var(--ink-80);
}
/* One face, one voice: every word in the same Canela Light roman. */
.marquee__track span { font-style: normal; }
.marquee__track span::after {
  content: "\00B7";
  font-style: normal; font-weight: 300;
  color: var(--grey-2); opacity: .7;
}

/* ---- Stat grid: hairline columns instead of the painted band.
   Transparent grounds; the structure is drawn, not filled. ---- */
.statgrid { gap: 0; background: transparent; }
.statgrid > div, .bg-bone .statgrid > div {
  background: transparent;
  border-inline-start: 1px solid var(--line);
}
.statgrid > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.statgrid strong { font-weight: 300; font-variant-numeric: tabular-nums; }
.photo-bg .statgrid { background: transparent; }
.photo-bg .statgrid > div { background: transparent; border-color: rgba(255,255,255,.16); }
@media (max-width: 780px){
  .statgrid > div, .bg-bone .statgrid > div { border-inline-start: 0; }
  .statgrid > div:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .statgrid > div:nth-child(odd) { padding-inline-start: 0; }
  .statgrid > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .photo-bg .statgrid > div:nth-child(even) { border-inline-start: 1px solid rgba(255,255,255,.16); }
  .photo-bg .statgrid > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }
}

/* ---- Reviews as editorial pull-quotes: a hanging Canela quote
   ornament in the logo blue, the words in the Light italic. The
   quotation marks come out of the copy - the ornament carries them. ---- */
.review { padding-top: 26px; gap: 14px; }
.review::before {
  content: "\201C";
  font-family: var(--display); font-weight: 300;
  font-size: 2.9rem; line-height: .55; height: .42em;
  color: var(--navy); opacity: .3;
}
.review p {
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: clamp(1.06rem, 1.4vw, 1.28rem); line-height: 1.5;
  letter-spacing: -.005em; color: var(--ink-80);
}
.review .stars { color: var(--ink); opacity: .7; gap: 3px; }
.review .stars svg { width: 11px; height: 11px; }

/* ---- Process steps: Canela numerals in place of mono - quiet,
   large, structural. On dark grounds they recede to a white wash. ---- */
.step__n {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 2vw, 1.9rem); letter-spacing: 0;
  line-height: 1; color: var(--grey-2); padding-top: 2px;
}
.photo-bg .step__n, .bg-ink .step__n, .walkthru .step__n { color: rgba(255,255,255,.4); }

/* ---- Service cards: title answers the hover the same way the
   featured work grid does. ---- */
.svc h3 { transition: color .35s; }
.svc:hover h3 { color: var(--navy); }

/* ---- Inquiry: the phone number and email set in the display serif -
   the detail a print ad would get right. ---- */
.inquiry .mono { display: flex; flex-direction: column; gap: 8px; }
.inquiry .mono a {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.01em;
  text-transform: none; color: var(--ink); line-height: 1.25;
  width: fit-content;
}
.inquiry .mono a:hover { color: var(--navy); }
.inquiry .mono br { display: none; }

/* =========================================================
   SIMPLE + CLASSY - home revision
   The page loses weight: the walkthrough band is gone, before/after
   is one large frame instead of six small ones, projects sit on the
   light ground in landscape crops, and copy runs a line where it ran
   a paragraph. Services become the page's dark statement band - the
   four offers, unmissable. The form gets a plate. The footer loses
   the monogram. Newest pass - these rules win.
   ========================================================= */

/* ---- Services: the dark statement band. Four offers on navy,
   white serif titles, gold numerals - the standout block. ---- */
.bg-ink .svc { border-top-color: rgba(255,255,255,.16); }
.bg-ink .svc:hover { border-top-color: rgba(255,255,255,.4); }
.svc__num { font-family: var(--display); font-weight: 300; font-size: 1.15rem; letter-spacing: 0; }
.bg-ink .svc__num { color: var(--gold-soft); }
.bg-ink .svc h3 { color: #fff; }
.bg-ink .svc:hover h3 { color: var(--gold-soft); }
.bg-ink .svc p { color: rgba(255,255,255,.58); }
.bg-ink .svc .arrow-link { color: rgba(255,255,255,.85); }
.bg-ink .svc__media { background: rgba(255,255,255,.06); }
.bg-ink .svc h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); }

/* ---- Projects: landscape crops on the light ground - half the
   scroll, same four homes. ---- */
.work-item__media { aspect-ratio: 16/10; }
.work-item__head { border-top-color: var(--line); }
.work-item:hover .work-item__head { border-top-color: var(--navy); }

/* ---- Before/after: one large frame, centred - a single perfect
   demonstration instead of a wall of widgets. ---- */
.ba-grid { grid-template-columns: 1fr; max-width: 1080px; margin-inline: auto; }
.ba-slide__media { aspect-ratio: 16/9; }
.ba-slide__handle { width: 1px; background: rgba(255,255,255,.85); box-shadow: none; }
.ba-slide__handle i {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 2px 16px rgba(20,26,41,.28);
}
.ba-slide__handle i::before { left: 11px; }
.ba-slide__handle i::after { right: 11px; }
.ba-slide__tag {
  background: rgba(20,26,41,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .56rem; letter-spacing: .22em; padding: 6px 11px;
}
.ba-slide figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.ba-slide figcaption h3 { font-size: 1.1rem; font-weight: 400; }
.ba-slide figcaption span { margin-top: 0; }

/* ---- Enquiry form: a white plate on the paper ground - the one
   surface on the page that steps forward. ---- */
.inq-form {
  background: var(--white);
  border: 1px solid var(--navy-line);
  padding: clamp(24px, 3.5vw, 52px);
}
.inq-form .field { border-bottom-color: rgba(16,16,16,.35); }
@media (max-width: 640px){ .inq-form { padding: 22px 18px; } }

/* ---- Footer: the wordmark alone - no monogram above it. ---- */
.footer__wm::before { display: none; }
.footer__wm { margin-top: 0; }

/* ---- Compact rhythm: the air between sections was running to 190px
   and reading as empty scroll. Tightened sitewide - generous, not
   endless. ---- */
.section { padding-block: clamp(52px, 6vw, 96px); }
.section--sm { padding-block: clamp(36px, 4vw, 64px); }
.mb-l { margin-bottom: clamp(24px, 3vw, 44px); }
.mt-l { margin-top: clamp(24px, 3vw, 44px); }

/* ---- Process: five columns across one band instead of five stacked
   rows - a step per column, a hairline rule over each. Reads in one
   glance. (Steps are only used on the home page.) ---- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: clamp(18px, 2.2vw, 36px); border-top: 0; }
.step {
  display: block;
  border-bottom: 0; border-top: 1px solid var(--line);
  padding: 18px 0 6px;
}
.step__n { display: block; margin-bottom: 12px; color: var(--gold); }
.step h3 { font-size: 1rem; margin-bottom: 6px; }
.step p { font-size: .86rem; line-height: 1.55; }
@media (max-width: 1020px){ .steps { grid-template-columns: repeat(3, 1fr); row-gap: 8px; } }
@media (max-width: 640px){ .steps { grid-template-columns: 1fr 1fr; } }

/* ---- Reviews on the navy ground - the page break the light back
   half was missing. Ornament and accents go gold-soft. ---- */
.bg-ink .review { border-top-color: rgba(255,255,255,.16); }
.bg-ink .review::before { color: var(--gold-soft); opacity: .55; }
.bg-ink .review p { color: rgba(255,255,255,.9); }
.bg-ink .review .stars { color: #fff; opacity: .85; }
.bg-ink .review__who strong { color: #fff; }
.bg-ink .review__who span { color: rgba(255,255,255,.5); }
.bg-ink .gbadge { border-color: rgba(255,255,255,.22); }
.bg-ink .gbadge strong, .bg-ink .gbadge .stars { color: #fff; }
.gbadge__count { font-size: .8rem; color: var(--grey); }
.bg-ink .gbadge__count { color: rgba(255,255,255,.55); }

/* =========================================================
   PAGE HEROES + HEADER WORK LINK - the home hero's register,
   rolled out to every page. Each page opens on a full-frame
   photograph: breadcrumbs, gold eyebrow, white Canela headline,
   one quiet lead line. Legal pages take a shorter frame. The
   header gains a "See our work" link in its empty left track.
   ========================================================= */
.hero--page {
  min-height: 74svh;
  padding-block: clamp(130px, 16vh, 190px) clamp(36px, 5vh, 64px);
}
.hero--short { min-height: 50svh; }
.hero--page h1 {
  font-size: clamp(2.2rem, 4.2vw, 4rem);
  max-width: 18ch;
  margin-bottom: 0;
}
.hero--page .crumbs {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: clamp(18px, 3vh, 30px);
}
.hero--page .crumbs a { color: rgba(255,255,255,.55); }
.hero--page .crumbs a:hover { color: #fff; }
.hero--page .crumbs span { color: rgba(255,255,255,.8); }
.hero--page .hero__eyebrow { margin-bottom: clamp(14px, 2.2vh, 24px); }
.hero--page .hero__lead {
  margin-top: clamp(16px, 2.6vh, 28px);
  color: rgba(255,255,255,.78);
  max-width: 54ch; font-size: 1rem; line-height: 1.7;
}
/* Long breadcrumb tails (the about page repeats its own headline)
   stay one quiet line. */
.hero--page .crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

/* ---- Header: "See our work" in the left track, mirroring the CTA
   on the right. White over the hero, ink once the header goes solid. ---- */
.nav > .nav__work { grid-column: 1; justify-self: start; }
body.hero-dark .header:not(.solid) .nav__work { color: #fff; }
body.hero-dark .header:not(.solid) .nav__work:hover { color: var(--gold-soft); }
@media (max-width: 640px){ .nav > .nav__work { display: none; } }

/* ---- Page transitions: a navy veil between pages. Clicking an
   internal link wipes the veil in; the next page arrives under it
   and lifts it. Reduced-motion visitors navigate instantly. ---- */
html.page-entering::after, html.page-leaving::after {
  content: ""; position: fixed; inset: 0; z-index: 400;
  background: var(--navy-black); pointer-events: none;
}
html.page-entering::after { animation: veilOut .6s var(--ease-out) .05s both; }
html.page-leaving::after { animation: veilIn .32s var(--ease) both; pointer-events: auto; }
@keyframes veilOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  html.page-entering::after, html.page-leaving::after { animation: none; opacity: 0; visibility: hidden; }
}

/* ---- Colour breaks on inner pages: every page now carries navy
   bands between the dark hero and the dark footer - reviews go navy
   sitewide, services adds a navy how-we-work band, about a navy stat
   plate, contact a navy map band. Dark variants for the pieces that
   did not have them yet. ---- */
.bg-ink .statgrid { border-color: rgba(255,255,255,.18); }
.bg-ink .statgrid > div { border-inline-start-color: rgba(255,255,255,.18); }
.bg-ink .statgrid strong { color: #fff; }
.bg-ink .statgrid span { color: rgba(255,255,255,.5); }
@media (max-width: 780px){
  .bg-ink .statgrid > div:nth-child(even) { border-inline-start-color: rgba(255,255,255,.18); }
  .bg-ink .statgrid > div:nth-child(n+3) { border-top-color: rgba(255,255,255,.18); }
}
.bg-ink .split__media { background: rgba(255,255,255,.06); }
.bg-ink .map-embed { filter: grayscale(1) contrast(1.05) brightness(.96); border: 1px solid rgba(255,255,255,.14); }
.bg-ink .lead { color: rgba(255,255,255,.75); }
/* On navy grounds the primary button inverts - white plate, navy ink. */
.bg-ink .btn--dark, .photo-bg .btn--dark, .walkthru .btn--dark { background: #fff; color: var(--navy-deep); }
.bg-ink .btn--dark:hover, .photo-bg .btn--dark:hover, .walkthru .btn--dark:hover { background: rgba(255,255,255,.86); color: var(--navy-black); }

/* ---- Preloader plays once, on arrival at the site. It only exists
   on the home page now; when home is reached via an internal link
   (page-entering veil), it stays hidden rather than replaying. ---- */
html.page-entering .preloader { display: none; }