/*
Theme Name:   GhorBunon
Theme URI:    https://ghorbunonarchitects.com.bd/
Author:       Sabbir Ahmed
Description:  Custom theme for GhorBunon, an interior architecture studio in Uttara, Dhaka. Every image, service, project and price on the site is editable from the WordPress dashboard.
Version:      2.8.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  red-architects
Tags:         interior-design, architecture, business, custom-colors, custom-menu, portfolio
*/


/* ============================================================
   GhorBunon
   One theme. Every colour derives from the brand colour #786A5D
   by moving lightness and saturation only.
   ============================================================ */
:root{
  /* one fluid type root: every font size below is in rem, so the whole
     scale moves together at each breakpoint */
  font-size:16px;
  --bg:#FAF7F4;
  --paper:#FFFFFF;
  --tint:#F1EAE4;
  --tint-2:#E1D4CC;

  --brand:#786A5D;
  --brand-mid:#635648;
  --brand-deep:#574B40;

  --ink:#1F1A16;
  --ink-soft:#574B40;
  --muted:#8A7C6E;

  --line:#E1D4CC;

  --band:#2A231D;
  --band-2:#1C1613;
  --band-text:#F1EAE4;
  --band-muted:#C4B4A6;
  --band-line:#3D342B;

  --r:10px;
  --r-s:6px;
  --maxw:1220px;
  --shadow:0 24px 60px -40px rgba(31,26,22,.5);
  --ease:cubic-bezier(.22,.8,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--ink-soft);
  font-family:Archivo,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  font-size:1rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance;}
h1,h2{
  font-family:Fraunces,Georgia,"Times New Roman",serif;
  font-optical-sizing:auto;
  font-weight:300;letter-spacing:-.02em;line-height:1.06;
}
h1{font-size:clamp(2.2rem,5.4vw,4.1rem);}
h2{font-size:clamp(1.75rem,3.3vw,2.7rem);}
h3{font-size:1.06rem;font-weight:600;line-height:1.35;}
h4{font-size:.92rem;font-weight:600;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
img{max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--brand-mid);outline-offset:3px;border-radius:3px;}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,40px);}
.sec{padding-block:clamp(52px,7vw,96px);}
.sec-tight{padding-block:clamp(34px,4.5vw,58px);}
.paper{background:var(--paper);}
.band{background:var(--band);color:var(--band-muted);}
.band h1,.band h2,.band h3,.band h4{color:var(--band-text);}

.eyebrow{display:block;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-mid);margin-bottom:14px;}
.band .eyebrow{color:var(--brand);}
.lede{font-size:clamp(1rem,1.4vw,1.1rem);color:var(--ink-soft);max-width:60ch;}
.band .lede{color:var(--band-muted);}
.small{font-size:.86rem;color:var(--muted);}

.head-2col{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(28px,4vw,52px);}
.head-2col .lede{max-width:64ch;}
.center{text-align:center;max-width:720px;margin-inline:auto;margin-bottom:clamp(28px,4vw,50px);}
.center .lede{margin-inline:auto;}

/* ---------- motion ---------- */
.rv{transform:translateY(18px);transition:transform .75s var(--ease);}
.rv.in{transform:none;}
.rv.d1{transition-delay:.06s;} .rv.d2{transition-delay:.12s;} .rv.d3{transition-delay:.18s;}
.site-main{animation:viewIn .45s var(--ease) both;}
@keyframes viewIn{from{transform:translateY(10px);}to{transform:none;}}
@media (prefers-reduced-motion: reduce){
  .rv,.site-main{transform:none!important;transition:none!important;animation:none!important;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 22px;border-radius:var(--r-s);font-size:.86rem;font-weight:600;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.btn svg{width:14px;height:14px;transition:transform .25s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn-primary{background:var(--brand-deep);color:#fff;}
.btn-primary:hover{background:var(--ink);}
.btn-quiet{background:var(--tint);color:var(--ink);}
.btn-quiet:hover{background:var(--tint-2);}
.btn-onband{background:var(--band-text);color:var(--ink);}
.btn-onband:hover{background:#fff;}
.btn-outband{border:1px solid var(--band-line);color:var(--band-text);}
.btn-outband:hover{background:rgba(255,255,255,.08);border-color:var(--band-muted);}

/* ============================================================
   HEADER
   ============================================================ */
/* At the very top the header carries the same colour as the band underneath
   it, so the page starts as one block of colour with no seam across it. The
   moment the page scrolls it becomes the pale, blurred bar it was before. */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:80;background:var(--tint);
  transition:background .35s ease,box-shadow .3s ease;}
.site-head.stuck{background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--line),0 16px 34px -32px rgba(31,26,22,.8);}
/* The not found page opens on the plain background rather than a tinted band. */
body.error404 .site-head{background:var(--bg);}
.head-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;height:96px;}

.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand-mark{--mb:var(--brand-deep);--mf:#fff;width:38px;height:38px;display:block;flex-shrink:0;transition:transform .35s var(--ease);}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.04);}
.brand-text{display:flex;flex-direction:column;line-height:1;}
.brand-name{font-family:Fraunces,Georgia,serif;font-size:1.3rem;font-weight:500;letter-spacing:.05em;color:var(--ink);}
.brand-sub{margin-top:5px;font-size:clamp(9px,.62rem,10.5px);font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}
.site-foot .brand-mark{--mb:var(--band-text);--mf:var(--band);}
.site-foot .brand-name{color:var(--band-text);}
.site-foot .brand-sub{color:var(--band-muted);}

.nav{display:flex;align-items:center;justify-content:center;gap:2px;grid-column:2;}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--r-s);font-size:.875rem;color:var(--ink-soft);transition:color .2s ease;}
.nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:var(--brand-deep);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.nav-link:hover{color:var(--ink);}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link.active{color:var(--ink);font-weight:600;}
.nav-link.active::after{transform:scaleX(1);}
.nav-link .chev{width:11px;height:11px;transition:transform .25s var(--ease);}
.nav-item{position:relative;}
.nav-item.open .chev{transform:rotate(180deg);}
.nav-item.open .nav-link::after{transform:scaleX(1);}

.submenu{position:absolute;top:calc(100% + 6px);left:0;min-width:330px;background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow),0 0 0 1px var(--line);padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s var(--ease),visibility .22s;}
.nav-item.open .submenu{opacity:1;visibility:visible;transform:none;}
.sub-link{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:var(--r-s);transition:background .18s ease;}
.sub-link:hover{background:var(--tint);}
.sub-link:hover .sub-ico{transform:translateY(-2px);}
.sub-ico{display:block;width:17px;height:17px;color:var(--brand-mid);flex-shrink:0;margin-top:3px;transition:transform .25s var(--ease);}
.sub-name{font-size:.9rem;font-weight:600;color:var(--ink);display:block;}
.sub-desc{font-size:.76rem;color:var(--muted);display:block;margin-top:2px;}

.head-cta{grid-column:3;justify-self:end;display:inline-flex;align-items:center;height:38px;padding:0 18px;font-size:.82rem;}
.burger{display:none;grid-column:3;justify-self:end;width:42px;height:42px;align-items:center;justify-content:center;border-radius:var(--r-s);background:var(--tint);}
.burger svg{width:18px;height:18px;}
.mobile{background:var(--paper);padding-block:8px 22px;box-shadow:0 1px 0 var(--line) inset;}
.m-link{display:block;padding:14px 0;font-size:1.02rem;color:var(--ink);box-shadow:0 1px 0 var(--tint);}
.m-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:14px 0;font-size:1.02rem;color:var(--ink);box-shadow:0 1px 0 var(--tint);}
.m-toggle svg{width:14px;height:14px;transition:transform .25s ease;}
.m-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.m-sub{padding:6px 0 10px 14px;}
.m-sub a{display:block;padding:10px 0;font-size:.92rem;color:var(--ink-soft);}
.mobile .btn{margin-top:18px;width:100%;justify-content:center;}

/* ============================================================
   HERO
   ============================================================ */
/* The warm glow starts a little below the top edge, so the first band of the
   hero is the same flat colour as the header sitting on top of it and the two
   read as one block rather than two. */
.hero{padding-block:clamp(34px,4.6vw,66px) clamp(30px,4vw,54px);
  background:radial-gradient(58% 48% at 90% 44%, color-mix(in srgb, var(--brand) 24%, transparent) 0%, transparent 64%),
             linear-gradient(180deg, var(--tint) 0%, var(--tint) 16%, var(--bg) 72%);}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(26px,4vw,64px);align-items:center;}
.hero-copy{display:flex;flex-direction:column;gap:22px;}
.hero h1 .it{font-style:italic;color:var(--brand-deep);}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.82rem;color:var(--muted);}
.hero-meta span{display:flex;align-items:center;gap:8px;}
.hero-meta svg{width:14px;height:14px;color:var(--brand-mid);}
.plan-card{background:var(--paper);border-radius:var(--r);padding:clamp(16px,2vw,26px);box-shadow:var(--shadow);}
.plan-card svg.plan{display:block;width:100%;height:auto;color:var(--brand-deep);}
.plan-foot{display:flex;justify-content:space-between;gap:14px;margin-top:12px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(14px,2vw,26px);}
.stat{background:var(--tint);border-radius:var(--r);padding:24px 22px 26px;transition:background .25s ease,transform .3s var(--ease);}
.stat:hover{transform:translateY(-4px);}
.paper .stat{background:var(--bg);}
.band .stat{background:var(--band-2);}
.stat-ico{display:block;width:18px;height:18px;color:var(--brand);margin-bottom:14px;}
.stat-ico svg,.card-ico svg,.sub-ico svg,.ci-ico svg{display:block;width:100%;height:100%;}
.card-ico{display:block;}
.sub-ico{display:block;}
.band .stat-ico{color:var(--brand);}
.stat-n{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.band .stat-n{color:var(--band-text);}
.stat-l{margin-top:9px;font-size:.82rem;color:var(--muted);}
.band .stat-l{color:var(--band-muted);}

/* ---------- cards ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);}
.card{background:var(--tint);border-radius:var(--r);padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;transition:background .25s ease,transform .3s var(--ease);}
.paper .card{background:var(--bg);}
.band .card{background:var(--band-2);}
.band .card p{color:var(--band-muted);}
a.card:hover{background:var(--tint-2);transform:translateY(-4px);}
.card-ico{display:block;width:24px;height:24px;color:var(--brand-mid);transition:transform .3s var(--ease);}
.band .card-ico{color:var(--brand);}
a.card:hover .card-ico{transform:translateY(-2px) scale(1.06);}
.card p{font-size:.9rem;}
.card-go{margin-top:auto;padding-top:6px;font-size:.82rem;font-weight:600;color:var(--brand-deep);display:flex;align-items:center;gap:7px;}
.card-go svg{width:13px;height:13px;transition:transform .25s var(--ease);}
a.card:hover .card-go svg{transform:translateX(4px);}

/* ---------- image slot ---------- */
.ph{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--tint);
  display:block;
}
.paper .ph{background:var(--bg);}
.ph svg{display:block;width:100%;height:100%;}
.ph.r43{aspect-ratio:4/3;} .ph.r169{aspect-ratio:16/9;} .ph.r11{aspect-ratio:1/1;} .ph.r34{aspect-ratio:3/4;}
.ph::after{
  content:attr(data-label);
  position:absolute;left:14px;bottom:12px;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:.75;
}

/* ---------- projects ---------- */
.proj{display:flex;flex-direction:column;gap:14px;text-align:center;}
.proj .ph{transition:transform .45s var(--ease);}
.proj:hover .ph{transform:translateY(-6px);}
.proj-title{
  font-size:1rem;font-weight:600;color:var(--brand-deep);
  font-variant-numeric:tabular-nums;letter-spacing:-.005em;
  transition:color .2s ease;
}
.proj:hover .proj-title{color:var(--ink);}
.proj-sub{font-size:.8rem;color:var(--muted);margin-top:4px;}
.proj.out{display:none;}

/* ---------- tabs ---------- */
.tabs-row{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vw,34px);box-shadow:0 -1px 0 var(--line) inset;}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;}
.tabs::-webkit-scrollbar{display:none;}
.tab{position:relative;padding:14px 18px;font-size:.88rem;white-space:nowrap;color:var(--muted);transition:color .2s ease;}
.tab::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--brand-deep);transform:scaleX(0);transition:transform .3s var(--ease);}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{color:var(--ink);font-weight:600;}
.tab[aria-selected="true"]::after{transform:scaleX(1);}

/* ---------- ticks ---------- */
.ticks{display:flex;flex-direction:column;gap:11px;}
.tick{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;}
.tick svg{width:15px;height:15px;color:var(--brand-mid);flex-shrink:0;margin-top:4px;}
.band .tick svg{color:var(--brand);}
.tick.no svg{color:var(--muted);}

/* ---------- step strip ---------- */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:start;}
.strip-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;position:relative;padding-top:6px;}
.strip-item::after{content:"";position:absolute;top:34px;left:calc(50% + 42px);right:calc(-50% + 42px);height:1.5px;background:var(--line);}
.strip-item:last-child::after{display:none;}
.strip-ico{width:68px;height:68px;border-radius:50%;background:var(--tint);display:grid;place-items:center;color:var(--brand-deep);transition:background .3s ease,transform .3s var(--ease);}
.paper .strip-ico{background:var(--bg);}
.strip-item:hover .strip-ico{background:var(--brand-deep);color:#fff;transform:translateY(-4px);}
.strip-ico svg{width:26px;height:26px;}
.strip-n{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-mid);font-weight:600;}
.strip-t{font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.3;}

/* ---------- steps ---------- */
.steps{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,26px);}
.step{
  background:var(--tint);border-radius:var(--r);
  padding:clamp(18px,2.2vw,28px);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(18px,2.8vw,40px);align-items:center;
  transition:background .25s ease;
}
.paper .step{background:var(--bg);}
.step:hover{background:var(--tint-2);}
.paper .step:hover{background:var(--tint);}
.step:nth-child(even){grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);}
.step:nth-child(even) .step-art{order:2;}
.step-art .ph{background:var(--paper);}
.paper .step-art .ph{background:var(--tint);}
.step-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.step-n{font-family:Fraunces,Georgia,serif;font-size:1.9rem;font-weight:300;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums;}
.step h3{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:clamp(1.3rem,2.2vw,1.65rem);letter-spacing:-.015em;margin-bottom:10px;}
.step p{font-size:.92rem;}
.step-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}
.milestone{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:6px 12px;border-radius:4px;background:var(--brand-deep);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
.milestone svg{width:11px;height:11px;}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:100px;background:var(--paper);font-size:.76rem;color:var(--muted);}
.paper .pill{background:var(--tint);}
.pill svg{width:13px;height:13px;color:var(--brand-mid);}
.pill b{color:var(--ink);font-weight:600;}

/* ---------- client review videos ---------- */
.vq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,38px) clamp(18px,2.4vw,30px);}
.vq{display:flex;flex-direction:column;text-align:center;}
.vq-media{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0 0 18px;padding:0;border:0;
  border-radius:var(--r);overflow:hidden;background:var(--tint-2);cursor:default;}
.vq-media img{width:100%;height:100%;object-fit:cover;display:block;}
button.vq-media{cursor:pointer;}
.vq-btn{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--brand-deep);display:grid;place-items:center;
  box-shadow:0 10px 30px -12px rgba(31,26,22,.7);
  transition:transform .25s var(--ease),background .25s ease;}
.vq-btn svg{width:20px;height:20px;margin-left:3px;display:block;}
button.vq-media:hover .vq-btn{transform:scale(1.08);background:#fff;}
button.vq-media:hover img{transform:scale(1.03);}
.vq-media img{transition:transform .5s var(--ease);}
button.vq-media:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
.vq-quietmark{display:grid;place-items:center;background:var(--tint);}
.vq-quietmark span{font-family:Fraunces,Georgia,serif;font-size:3.4rem;line-height:1;color:var(--brand);opacity:.5;}
.vq-text{font-style:italic;font-size:.94rem;line-height:1.65;color:var(--ink-soft);margin:0 0 12px;}
.vq-who{font-family:Fraunces,Georgia,serif;font-size:1.12rem;font-weight:600;color:var(--ink);}
.vq-where{font-size:.88rem;color:var(--muted);margin-top:3px;}

/* The popup player. */
.vmodal{position:fixed;inset:0;z-index:120;background:rgba(18,14,11,.9);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);}
.vmodal-in{width:min(1040px,100%);}
.vmodal-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;}
.vmodal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.vmodal-x{position:absolute;top:clamp(12px,2.5vw,24px);right:clamp(12px,2.5vw,24px);
  width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background .2s ease;}
.vmodal-x:hover{background:rgba(255,255,255,.26);}
.vmodal-x svg{width:18px;height:18px;}

@media (max-width:900px){
  .vq-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .vq-grid{grid-template-columns:1fr;gap:30px;}
  .vq-btn{width:50px;height:50px;}
  .vq-btn svg{width:17px;height:17px;}
}

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:0;}
.tl-row{display:grid;grid-template-columns:96px 34px minmax(0,1fr);gap:0;align-items:start;}
.tl-year{font-family:Fraunces,Georgia,serif;font-size:1.5rem;font-weight:300;color:var(--ink);line-height:1;padding-top:14px;font-variant-numeric:tabular-nums;}
.tl-rail{position:relative;display:flex;justify-content:center;align-self:stretch;}
.tl-rail::before{content:"";position:absolute;top:0;bottom:0;width:1.5px;background:var(--line);}
.tl-row:first-child .tl-rail::before{top:20px;}
.tl-row:last-child .tl-rail::before{bottom:auto;height:22px;}
.tl-dot{position:relative;width:11px;height:11px;border-radius:50%;background:var(--brand-deep);margin-top:19px;box-shadow:0 0 0 5px var(--paper);}
.paper .tl-dot{box-shadow:0 0 0 5px var(--paper);}
.tl-body{padding:0 0 26px 22px;}
.tl-body h3{margin-bottom:6px;}
.tl-body p{font-size:.92rem;}

/* The six stages drawn on the timeline. The rail needs a narrower column of
   text than a full section, or the lines run too long to follow. */
.tl-steps{max-width:780px;margin:clamp(30px,4vw,44px) auto 0;}
.tl-steps .tl-year{color:var(--brand);}
.tl-steps .tl-body{padding-bottom:30px;}
.tl-steps .tl-body h3{display:flex;align-items:center;gap:10px;}
.tl-ico{width:30px;height:30px;border-radius:50%;background:var(--tint-2);color:var(--brand-deep);display:grid;place-items:center;flex-shrink:0;}
.tl-ico svg{width:15px;height:15px;display:block;}
.tl-steps .tl-row:last-child .tl-body{padding-bottom:0;}
.tl-steps .tl-year{padding-top:3px;}
.tl-steps .tl-dot{margin-top:9px;}
.tl-steps .tl-row:last-child .tl-rail::before{height:15px;}
@media (max-width:720px){
  .tl-steps .tl-body h3{gap:8px;}
  .tl-ico{width:26px;height:26px;}
  .tl-ico svg{width:13px;height:13px;}
  .tl-steps .tl-year{padding-top:4px;}
  .tl-steps .tl-dot{margin-top:7px;}
  .tl-steps .tl-row:last-child .tl-rail::before{height:13px;}
}

/* ---------- brands ---------- */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.brand-tile{background:var(--tint);border-radius:var(--r-s);height:72px;display:grid;place-items:center;font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--muted);text-align:center;padding:8px;transition:color .2s ease,transform .25s var(--ease);}
.brand-tile:hover{color:var(--ink);transform:translateY(-3px);}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.team-tile{aspect-ratio:1/1;border-radius:var(--r-s);background:var(--band-2);display:grid;place-items:center;color:var(--band-muted);transition:background .25s ease,color .25s ease;}
.team-tile svg{width:30%;height:30%;opacity:.7;}
.team-tile:nth-child(3n+1){background:color-mix(in srgb, var(--brand) 26%, var(--band));}
.team-tile:nth-child(3n+3){background:color-mix(in srgb, var(--brand) 12%, var(--band));}
.team-tile:hover{background:var(--brand);color:var(--ink);}

/* ---------- table ---------- */
.gal{display:flex;flex-direction:column;gap:12px;}
.gal-stage{position:relative;overflow:hidden;border-radius:var(--r);background:var(--tint);}
.paper .gal-stage{background:var(--bg);}
.gal-track{display:flex;transition:transform .55s var(--ease);}
.gal-slide{flex:0 0 100%;position:relative;}
.gal-slide .ph{border-radius:0;aspect-ratio:16/10;background:transparent;}
.gal-cap{
  position:absolute;left:16px;bottom:14px;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);
  padding:8px 14px;border-radius:var(--r-s);
  font-size:.78rem;color:var(--ink);font-weight:600;
}
.gal-slide{cursor:zoom-in;}
.gal-zoom{
  position:absolute;right:16px;bottom:14px;
  display:flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:100px;
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter:blur(8px);
  font-size:.74rem;color:var(--ink-soft);
  pointer-events:none;
  transition:opacity .22s ease;
}
.gal-zoom svg{width:13px;height:13px;color:var(--brand-deep);}
.gal-stage:hover .gal-zoom{opacity:.55;}
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:color-mix(in srgb, var(--paper) 74%, transparent);
  backdrop-filter:blur(10px);
  color:var(--ink);
  display:grid;place-items:center;
  box-shadow:0 10px 24px -16px rgba(31,26,22,.4);
  transition:background .2s ease,color .2s ease,transform .25s var(--ease);
}
.gal-nav svg{width:16px;height:16px;}
.gal-nav:hover{background:var(--brand-deep);color:#fff;}
.gal-nav.prev{left:14px;}
.gal-nav.prev:hover{transform:translateY(-50%) translateX(-3px);}
.gal-nav.next{right:14px;}
.gal-nav.next:hover{transform:translateY(-50%) translateX(3px);}
.gal-count{
  position:absolute;right:16px;top:14px;
  background:color-mix(in srgb, var(--band) 88%, transparent);
  color:var(--band-text);
  padding:6px 12px;border-radius:100px;
  font-size:.74rem;font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.gal-dots{display:flex;justify-content:center;gap:8px;}
.gal-dot{width:8px;height:8px;border-radius:50%;background:var(--tint-2);transition:background .2s ease,width .25s var(--ease);}
.gal-dot[aria-current="true"]{background:var(--brand-deep);width:24px;border-radius:100px;}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:120;
  background:#17120F;
  display:flex;align-items:center;justify-content:center;
  animation:lbIn .22s ease both;
}
@keyframes lbIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion: reduce){.lb{animation:none;}}
.lb-bar{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 14px;
  color:#F1EAE4;
}
.lb-count{font-size:.86rem;font-variant-numeric:tabular-nums;opacity:.8;letter-spacing:.06em;}
.lb-tools{display:flex;align-items:center;gap:8px;}
.lb-btn{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  color:#F1EAE4;background:rgba(255,255,255,.09);
  transition:background .2s ease,transform .22s var(--ease);
}
.lb-btn svg{width:16px;height:16px;}
.lb-btn:hover{background:rgba(255,255,255,.22);transform:translateY(-2px);}
.lb-btn[disabled]{opacity:.35;pointer-events:none;}
#lbLevel{width:auto;padding:0 14px;border-radius:100px;font-size:.76rem;font-variant-numeric:tabular-nums;}
.lb-stage{
  width:min(94vw,1240px);height:min(78vh,840px);
  display:flex;overflow:hidden;
  border-radius:var(--r);
}
.lb-frame{
  flex:1;min-width:0;min-height:0;display:flex;
  transition:transform .28s var(--ease);
  will-change:transform;
}
.lb-frame.grab{cursor:grab;}
.lb-frame.grabbing{cursor:grabbing;transition:none;}
.lb-frame .ph{flex:1;min-width:0;min-height:0;border-radius:var(--r);background:#E1D4CC;}
body.lb-open .cost-tab,body.lb-open .fabs,body.lb-open .help-panel{display:none;}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  /* These sit on top of the photograph, which can be any colour. A pale wash
     disappears over a light room, so the button carries its own dark disc
     with a thin light edge and reads on anything. */
  background:rgba(23,18,15,.62);color:#F1EAE4;
  box-shadow:0 0 0 1px rgba(255,255,255,.26),0 8px 22px -10px rgba(0,0,0,.9);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;
  transition:background .2s ease,transform .25s var(--ease);
}
.lb-nav svg{width:18px;height:18px;}
/* The back arrow is the forward one turned round, so only the drawing is
   flipped. Flipping the button itself would fight every other movement. */
.lb-nav.prev svg{transform:scaleX(-1);}
.lb-nav:hover{background:rgba(23,18,15,.88);}
.lb-nav.prev{left:clamp(8px,2vw,24px);}
.lb-nav.prev:hover{transform:translateY(-50%) translateX(-3px);}
.lb-nav.next{right:clamp(8px,2vw,24px);}
.lb-nav.next:hover{transform:translateY(-50%) translateX(3px);}
.lb-cap{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  color:#C4B4A6;font-size:.85rem;text-align:center;
  padding-inline:16px;
}
@media (max-width:720px){
  /* On a phone the picture fills the width, so an arrow at the side would
     always sit on top of the room and disappear into whatever is behind it.
     There is empty space under the picture, so the two arrows move down there
     as a pair, easy to reach with a thumb and never covering the work. */
  .lb-stage{width:100vw;height:58vh;border-radius:0;}
  .lb-frame .ph{border-radius:0;}
  .lb-btn{width:34px;height:34px;}

  .lb-nav{
    top:auto;bottom:calc(74px + env(safe-area-inset-bottom,0px));
    transform:none;width:46px;height:46px;
  }
  .lb-nav.prev{left:calc(50% - 62px);right:auto;}
  .lb-nav.next{right:calc(50% - 62px);left:auto;}
  .lb-nav.prev:hover,.lb-nav.next:hover{transform:none;}
}

.proj-hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,56px);align-items:start;}
.proj-meta{display:flex;flex-direction:column;gap:18px;}
.pm-row{display:flex;gap:13px;align-items:flex-start;}
.pm-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tint);color:var(--brand-deep);flex-shrink:0;}
.paper .pm-ico{background:var(--bg);}
.pm-ico svg{width:15px;height:15px;}
.pm-l{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.pm-v{font-size:.96rem;color:var(--ink);font-weight:600;margin-top:3px;}

.tbl-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px;}
thead th{text-align:left;padding:0 18px 12px 0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;box-shadow:0 1px 0 var(--ink);}
thead th.us{color:var(--brand-deep);}
tbody th{text-align:left;font-weight:600;color:var(--ink);padding:18px 18px 18px 0;width:20%;vertical-align:top;font-size:.88rem;box-shadow:0 1px 0 var(--line);}
tbody td{padding:18px 18px 18px 0;vertical-align:top;box-shadow:0 1px 0 var(--line);}
td.us{background:var(--tint);padding-left:18px;color:var(--ink);}

/* ---------- quotes ---------- */
.quotes{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;}
.quotes::-webkit-scrollbar{display:none;}
.quote{scroll-snap-align:start;flex:0 0 clamp(262px,31%,372px);background:var(--tint);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;gap:16px;}
.paper .quote{background:var(--bg);}
.qm{font-family:Fraunces,Georgia,serif;font-size:2.2rem;line-height:.55;color:var(--brand);}
.quote p{font-size:.93rem;flex:1;}
.q-name{font-size:.9rem;font-weight:600;color:var(--ink);}
.q-where{font-size:.78rem;color:var(--muted);margin-top:2px;}
.rnd-row{display:flex;gap:9px;margin-top:20px;}
.rnd{width:42px;height:42px;border-radius:50%;background:var(--tint);display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;}
.paper .rnd{background:var(--bg);}
.rnd svg{width:15px;height:15px;}
.rnd:hover{background:var(--brand-deep);color:#fff;}

/* ---------- forms ---------- */
.calc-card{background:var(--paper);border-radius:var(--r);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow);}
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:20px;}
.field label{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.field select,.field input,.field textarea{font:inherit;font-size:.95rem;padding:14px 15px;border-radius:var(--r-s);background:var(--bg);color:var(--ink);width:100%;border:1px solid transparent;transition:border-color .2s ease;}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--brand-mid);outline:none;}
.field select{
  -webkit-appearance:none;appearance:none;
  padding-right:48px;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8493' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:14px 14px;
  cursor:pointer;
}
.field select::-ms-expand{display:none;}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.seg button{padding:13px 6px;border-radius:var(--r-s);font-size:.85rem;background:var(--bg);color:var(--ink-soft);transition:background .2s ease,color .2s ease;}
.seg button[aria-pressed="true"]{background:var(--brand-deep);color:#fff;}
.result{margin-top:24px;padding-top:22px;box-shadow:0 -1px 0 var(--line);}
.result-l{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.result-v{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:clamp(1.6rem,3.3vw,2.4rem);line-height:1.1;margin-top:10px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.result-s{margin-top:10px;font-size:.83rem;color:var(--muted);}
.note{margin-top:16px;font-size:.76rem;color:var(--muted);line-height:1.5;}

/* ---------- contact ---------- */
.contact-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:stretch;}
.contact-left{display:flex;flex-direction:column;gap:14px;}
.ci-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.ci{background:var(--tint);border-radius:var(--r);padding:20px;display:flex;gap:14px;align-items:flex-start;transition:background .25s ease,transform .3s var(--ease);color:inherit;}
a.ci:hover .ci-ico{background:var(--brand-deep);color:#fff;}
.ci-ico{transition:background .22s ease,color .22s ease;}
.ci:hover{background:var(--tint-2);transform:translateY(-3px);}
.ci-ico{width:38px;height:38px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--brand-deep);flex-shrink:0;}
.ci-ico svg{width:17px;height:17px;}
.ci-l{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.ci-v{font-size:.92rem;color:var(--ink);margin-top:5px;font-weight:500;line-height:1.45;}
.ci-v a{color:inherit;text-decoration:none;}
.ci-v a:hover{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px;}
/* Every link in the footer behaves the same way on hover: it brightens and
   picks up an underline. One rule, so nothing can drift apart later. */
.site-foot .foot-col a,
.site-foot .foot-legal a,
.site-foot .foot-ci,
.site-foot .foot-ci span a{text-decoration:none;}
.site-foot .foot-col a,
.site-foot .foot-legal a,
.site-foot a.foot-ci,
.site-foot .foot-ci span a{transition:color .2s ease,padding-left .2s ease;}
.site-foot .foot-col a:hover,
.site-foot .foot-legal a:hover,
.site-foot a.foot-ci:hover,
.site-foot .foot-ci span a:hover{color:var(--band-text);padding-left:4px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.map-card{flex:1;min-height:300px;border-radius:var(--r);overflow:hidden;position:relative;background:var(--tint);}
.map-card svg.map{position:absolute;inset:0;width:100%;height:100%;}
.map-pop{position:absolute;left:18px;top:18px;background:var(--paper);border-radius:var(--r-s);padding:14px 16px;box-shadow:var(--shadow);max-width:min(74%,290px);}
.map-pop b{display:block;color:var(--ink);font-size:.88rem;}
.map-pop span{display:block;font-size:.78rem;color:var(--muted);margin-top:3px;}
.map-pop a{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.78rem;font-weight:600;color:var(--brand-deep);}
.map-pop a svg{width:12px;height:12px;}

/* ---------- page head ---------- */
.page-head{background:var(--tint);padding-block:clamp(34px,4.6vw,62px);}
.crumb{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);margin-bottom:16px;flex-wrap:wrap;}
.crumb a:hover{color:var(--ink);}
.crumb svg{width:11px;height:11px;}
.page-head-in{display:flex;flex-direction:column;align-items:flex-start;gap:18px;}
.page-head-in .lede{max-width:70ch;}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:74ch;display:flex;flex-direction:column;gap:22px;}
.prose h3{font-size:1.15rem;margin-bottom:-10px;}
.prose p,.prose li{font-size:.95rem;}
.prose ul{display:flex;flex-direction:column;gap:9px;padding-left:20px;list-style:disc;}
.prose ul li::marker{color:var(--brand);}
.callout{background:var(--tint);border-radius:var(--r);padding:20px 22px;display:flex;gap:14px;align-items:flex-start;}
.callout svg{width:18px;height:18px;color:var(--brand-mid);flex-shrink:0;margin-top:3px;}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:10px;}
.faq-item{background:var(--tint);border-radius:var(--r);overflow:hidden;}
.paper .faq-item{background:var(--bg);}
.faq-q{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;text-align:left;font-weight:600;color:var(--ink);font-size:.96rem;}
.faq-q svg{width:15px;height:15px;flex-shrink:0;transition:transform .3s var(--ease);color:var(--brand-mid);}
.faq-q[aria-expanded="true"] svg{transform:rotate(45deg);}
.faq-a{padding:0 22px 20px;font-size:.92rem;max-width:72ch;}

/* ---------- cta / footer ---------- */
.cta-wrap{padding-block:clamp(26px,3.4vw,48px) clamp(34px,4.2vw,58px);}
.cta-card{
  position:relative;overflow:hidden;
  background:linear-gradient(132deg, var(--band) 0%, #3A3028 54%, var(--band-2) 100%);
  border-radius:clamp(12px,2vw,20px);
  padding:clamp(24px,3.4vw,44px);
  color:var(--band-muted);
  box-shadow:0 44px 84px -54px rgba(31,26,22,.8);
}
.cta-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(75% 80% at 82% 14%, #000 0%, transparent 76%);
  mask-image:radial-gradient(75% 80% at 82% 14%, #000 0%, transparent 76%);
}
.cta-card::after{
  content:"";position:absolute;right:-6%;top:-46%;width:min(460px,60%);aspect-ratio:1/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand) 52%, transparent) 0%, transparent 68%);
}
.cta-in{position:relative;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(22px,3vw,44px);align-items:center;}
.cta-card h2{color:var(--band-text);}
.cta-card .eyebrow{color:var(--brand);}
.cta-card .lede{color:var(--band-muted);margin-top:12px;max-width:44ch;font-size:.95rem;}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.cta-actions .btn{white-space:nowrap;}
.cta-art{position:relative;}
.cta-art svg{display:block;width:100%;height:auto;max-height:215px;margin-inline:auto;}
.cta-art .plan-line{stroke:#F1EAE4;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.9;}
.cta-art .plan-grid{stroke:#786A5D;fill:none;stroke-width:1.2;opacity:.3;}
.cta-art .plan-fill{fill:#786A5D;opacity:.18;}
.cta-float{animation:floaty 7s ease-in-out infinite;transform-origin:center;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media (prefers-reduced-motion: reduce){.cta-float{animation:none;}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,58px);align-items:start;}
.split-side{display:flex;flex-direction:column;gap:20px;}
.facts{display:flex;flex-direction:column;gap:10px;}
.fact{display:flex;gap:14px;align-items:flex-start;background:var(--tint);border-radius:var(--r);padding:16px 18px;transition:background .25s ease,transform .3s var(--ease);}
.paper .fact{background:var(--bg);}
.fact:hover{background:var(--tint-2);transform:translateY(-3px);}
.fact-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--brand-deep);flex-shrink:0;}
.fact-ico svg{width:17px;height:17px;}
.fact-l{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.fact-v{font-size:.96rem;color:var(--ink);font-weight:600;margin-top:4px;line-height:1.4;}
.fact-v span{font-weight:400;color:var(--muted);}

.chipset{display:flex;flex-wrap:wrap;gap:8px;}
.tagchip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:100px;background:var(--tint);font-size:.82rem;color:var(--ink-soft);transition:background .2s ease,color .2s ease;}
.paper .tagchip{background:var(--bg);}
.tagchip svg{width:12px;height:12px;color:var(--brand-mid);}
.tagchip:hover{background:var(--brand-deep);color:#fff;}
.tagchip:hover svg{color:#fff;}

.kv{display:flex;flex-direction:column;gap:14px;}
.kv-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding-bottom:13px;box-shadow:0 1px 0 var(--line);font-size:.9rem;}
.kv-row b{color:var(--ink);font-weight:600;}

.site-foot{background:var(--band);color:var(--band-muted);padding-block:clamp(44px,5vw,66px) 24px;}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3.4vw,48px);}
.foot-col h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:15px;}
.foot-col li{margin-bottom:10px;}
.foot-col a,.foot-col span{font-size:.86rem;color:var(--band-muted);}
.foot-col span{color:var(--band-muted);}

.foot-ci{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.86rem;color:var(--band-muted);}
a.foot-ci{transition:color .2s ease;}
a.foot-ci:hover{color:var(--band-text);}
a.foot-ci:hover svg{color:var(--band-text);}
.foot-ci svg{width:15px;height:15px;color:var(--brand);flex-shrink:0;margin-top:4px;}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.foot-slogan{
  font-size:.9rem;line-height:1.62;color:var(--band-muted);
  max-width:34ch;margin:0;
}
.foot-about{
  font-size:.86rem;line-height:1.7;color:var(--band-muted);
  max-width:38ch;margin:-8px 0 0;
}
.socials{display:flex;gap:10px;}
.socials a{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);
  color:var(--band-text);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .22s ease,color .22s ease,transform .25s var(--ease);
}
.socials svg{width:15px;height:15px;}
.socials a:hover{background:var(--brand);color:var(--ink);transform:translateY(-4px);}
.foot-base{margin-top:clamp(30px,4vw,46px);padding-top:22px;box-shadow:0 -1px 0 var(--band-line);display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;font-size:.78rem;}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;max-width:100%;}

.foot-legal i{width:3px;height:3px;border-radius:50%;background:var(--band-line);display:block;}

.cost-tab{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:70;
  writing-mode:vertical-rl;padding:22px 11px;
  background:var(--brand-deep);color:#fff;
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-radius:0 var(--r-s) var(--r-s) 0;
  box-shadow:0 14px 30px -18px rgba(31,26,22,.7);
  transition:background .22s ease,padding .22s ease;
}
.cost-tab:hover{background:var(--ink);padding-left:16px;}

/* ---------- floating corner actions ---------- */
.fabs{
  position:fixed;z-index:75;
  right:clamp(14px,2vw,26px);
  bottom:calc(clamp(14px,2vw,26px) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:10px;align-items:center;
}
.fab{
  border-radius:50%;display:grid;place-items:center;
  transition:transform .25s var(--ease),background .22s ease,color .22s ease,opacity .25s ease;
}
.fab-top{
  width:42px;height:42px;
  background:var(--paper);color:var(--ink);
  box-shadow:0 10px 24px -12px rgba(31,26,22,.5), 0 0 0 1px var(--line);
}
.fab-top svg{width:16px;height:16px;}
.fab-top:hover{background:var(--brand);color:var(--ink);transform:translateY(-4px);}
.fab-help{
  width:58px;height:58px;position:relative;
  background:var(--brand-deep);color:#fff;
  box-shadow:0 16px 32px -14px rgba(31,26,22,.75);
}
.fab-help svg{width:24px;height:24px;}
.fab-help:hover{background:var(--ink);transform:translateY(-4px);}
.fab-help::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--brand-deep);
  animation:ring 2.8s ease-out infinite;
}
.fab-help.on::before{animation:none;opacity:0;}
@keyframes ring{0%{transform:scale(1);opacity:.5;}70%{transform:scale(1.5);opacity:0;}100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){.fab-help::before{animation:none;opacity:0;}}

/* ---------- help panel ---------- */
.help-panel{
  position:fixed;z-index:76;
  right:clamp(14px,2vw,26px);
  bottom:calc(clamp(14px,2vw,26px) + 74px + env(safe-area-inset-bottom,0px));
  width:min(340px, calc(100vw - 28px));
  max-height:min(78vh, 620px);
  overflow-y:auto;
  background:var(--paper);
  border-radius:var(--r);
  box-shadow:0 30px 70px -34px rgba(31,26,22,.65), 0 0 0 1px var(--line);
  transform-origin:bottom right;
  animation:pop .26s var(--ease) both;
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.help-panel{animation:none;}}
.help-head{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 12px;}
.help-head b{display:block;color:var(--ink);font-size:.98rem;}
.help-head span{display:block;font-size:.78rem;color:var(--muted);margin-top:3px;}
.help-x{margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--tint);transition:background .2s ease,color .2s ease;}
.help-x svg{width:14px;height:14px;}
.help-x:hover{background:var(--brand-deep);color:#fff;}
.help-body{padding:0 18px 18px;}
.help-body .field{margin-bottom:12px;}
.help-body .field select,.help-body .field input,.help-body .field textarea{padding:11px 13px;font-size:.9rem;}
.help-body .field select{padding-right:42px;background-position:right 14px center;}
.help-foot{padding:14px 18px;box-shadow:0 -1px 0 var(--line);display:flex;flex-direction:column;gap:9px;}
.help-foot a,.help-foot span{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--ink-soft);transition:color .2s ease;}
.help-foot a:hover{color:var(--brand-deep);}
.help-foot svg{width:14px;height:14px;color:var(--brand-mid);flex-shrink:0;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .nav,.head-cta{display:none;}
  .burger{display:inline-flex;}
  .head-in{height:80px;}
  .hero-in,.split,.cta-in,.contact-split,.proj-hero{grid-template-columns:1fr;}
  .cta-art{max-width:420px;margin-inline:auto;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .step,.step:nth-child(even){grid-template-columns:1fr;}
  .step:nth-child(even) .step-art{order:0;}
  .strip{grid-template-columns:repeat(3,1fr);gap:18px 8px;}
  .strip-item::after{display:none;}
  .brands{grid-template-columns:repeat(4,1fr);}
  .team-grid{grid-template-columns:repeat(5,1fr);}
  .foot-grid{grid-template-columns:repeat(2,1fr);}
  .cost-tab{display:none;}
  .map-card{min-height:320px;}
}
@media (max-width:720px){
  .grid-3,.grid-2,.grid-4,.ci-grid{grid-template-columns:1fr;}
  .gal-thumbs{grid-template-columns:repeat(4,1fr);gap:8px;}
  .gal-nav{width:38px;height:38px;}
  .seg{grid-template-columns:1fr;}
  .kv-row{grid-template-columns:1fr;gap:4px;}
  .strip{grid-template-columns:repeat(2,1fr);}
  .brands{grid-template-columns:repeat(3,1fr);}
  .team-grid{grid-template-columns:repeat(4,1fr);}
  .tl-row{grid-template-columns:62px 28px minmax(0,1fr);}
  .tl-year{font-size:1.15rem;padding-top:16px;}
  .brand-mark{width:34px;height:34px;}
  .brand-name{font-size:1.14rem;}
  .brand-sub{letter-spacing:.22em;}
  h1{font-size:clamp(2rem,8vw,2.6rem);}
}
:root{font-size:16px;}
@media (max-width:900px){ :root{font-size:15.5px;} }
@media (max-width:640px){ :root{font-size:15px;} }
@media (max-width:380px){ :root{font-size:14.5px;} }

@media (max-width:720px){
  .foot-base{flex-direction:column;align-items:flex-start;gap:14px;padding-right:66px;}
  .site-foot{padding-bottom:128px;}
  .fabs{gap:9px;}
  .fab-top{width:40px;height:40px;}
  .fab-top svg{width:15px;height:15px;}
  .fab-help{width:52px;height:52px;}
  .fab-help svg{width:21px;height:21px;}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
}


/* ============================================================
   WORDPRESS ADDITIONS
   Everything above this line is the original design.
   Everything below adapts it to WordPress markup.
   ============================================================ */

/* The artifact wrapper supplied a base reset; WordPress does not. Without this
   the panels that open and close (menu, support panel, image viewer, answers)
   stay on screen, because their own display rule beats the browser default. */
[hidden]{display:none!important;}

/* Uploaded photographs fill the same slots the illustrations used. */
.ph img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
/* In the viewer a photograph is shown whole, so any spare space around it
   stays the dark backdrop rather than turning into pale bars. */
.lb-frame img{width:100%;height:100%;object-fit:contain;display:block;background:transparent;}
.lb-frame .ph{background:transparent;}

/* Logo uploaded through the dashboard replaces the drawn mark. */
.brand-logo{display:block;height:72px;width:auto;max-width:180px;object-fit:contain;}
.site-foot .brand-logo{height:72px;max-width:180px;}
@media (max-width:900px){ .brand-logo{height:60px;} }

/* The admin bar pushes a fixed header down. */
.admin-bar .site-head{top:32px;}
@media screen and (max-width:782px){ .admin-bar .site-head{top:46px;} }

/* Core WordPress content classes, used inside the legal and free text pages. */
.prose img,.prose iframe{max-width:100%;height:auto;border-radius:var(--r-s);}
.alignleft{float:left;margin:0 20px 16px 0;}
.alignright{float:right;margin:0 0 16px 20px;}
.aligncenter{display:block;margin-inline:auto;}
.alignwide,.alignfull{max-width:100%;}
.wp-caption{max-width:100%;}
.wp-caption-text,.wp-element-caption{font-size:.82rem;color:var(--muted);margin-top:8px;}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Skip link, required for keyboard users. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--brand-deep);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0;}
.skip-link:focus{left:0;}

/* Real Google Map embed, sized like the drawn map it replaces. */
.map-card iframe{display:block;width:100%;height:100%;border:0;}

/* Form states once the enquiry form actually sends. */
.note.is-ok{color:var(--brand-deep);}
.note.is-error{color:#A0342B;}
.btn.is-busy{opacity:.65;pointer-events:none;}

/* Pagination on the portfolio archive. */
/* Portfolio search. The field is collapsed until the icon is pressed, so the
   filter row keeps its calm look until someone actually wants to search. */
.proj-find{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding-bottom:6px;}
.proj-find input{width:0;min-width:0;padding:0;border:0;border-radius:var(--r-s);background:var(--paper);
  font:inherit;font-size:.88rem;color:var(--ink);opacity:0;pointer-events:none;
  transition:width .28s var(--ease),opacity .2s ease,padding .28s var(--ease);}
.proj-find input::placeholder{color:var(--muted);}
.proj-find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
.proj-find input:focus{outline:2px solid var(--brand);outline-offset:1px;}
.proj-find.open input{width:clamp(150px,22vw,230px);padding:9px 12px;opacity:1;pointer-events:auto;
  border:1px solid var(--line);}
.proj-find-btn{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink-soft);
  cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease;}
.proj-find-btn svg{width:17px;height:17px;}
.proj-find-btn:hover{color:var(--brand);border-color:var(--brand);}
.proj-find.open .proj-find-btn{background:var(--brand);border-color:var(--brand);color:#fff;}
.proj-none{margin-top:10px;}
@media (max-width:560px){
  .tabs-row{flex-wrap:wrap;}
  .proj-find{order:-1;width:100%;justify-content:flex-end;padding-bottom:10px;}
  .proj-find.open input{width:100%;}
}

.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(28px,4vw,44px);}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);color:var(--ink-soft);font-size:.9rem;transition:all .2s var(--ease);}
.pager .page-numbers:hover{border-color:var(--brand);color:var(--brand-deep);}
.pager .page-numbers.current{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;}

/* 404 page. */
.nf{text-align:center;padding:clamp(70px,12vw,140px) 0;}
.nf-code{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:clamp(4rem,14vw,8rem);line-height:1;color:var(--brand);letter-spacing:-.03em;}

/* Honeypot field. Hidden from people, filled in by bots. */
.red-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* The studio's closing line, set after the six stages. */
.process-line{
  margin:clamp(34px,5vw,56px) auto 0;
  max-width:34ch;
  text-align:center;
  font-family:Fraunces,Georgia,serif;
  font-weight:300;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--brand-mid);
}