/* =========================================================
   I.C DEVELOPMENTS — shared site stylesheet (shared design system)
   Homepage design system + inner-page components below.
   ========================================================= */

:root{
  --white:#ffffff; --paper:#f7f8fa; --mist:#eef1f5; --cloud:#e7ebf1;
  --ink:#262a31; --ink2:#565e6a; --mut:#8b93a0; --steel:#6e7580;
  --line:#e4e8ee; --line2:#d6dce4;
  --blue:#b8d0f8; --blued:#5f93ec;
  --silver:linear-gradient(120deg,#ffffff,#c9cfd8 34%,#eef1f5 55%,#c2c9d3 78%,#f4f6f9);
  --serif:'Newsreader',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --kit-accent:#b8d0f8; --kit-accent-ink:#1c2530;
  --maxw:1220px;
}
*{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:400;color:var(--ink2);background:var(--white);
  line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.1;letter-spacing:-.01em}
.serif-num{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)}

/* ---------- small tracked label ---------- */
.eyebrow{
  font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--mut);display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--line2);display:inline-block}
.eyebrow.center::after{content:"";width:26px;height:1px;background:var(--line2);display:inline-block}

/* hairline draw-in under titles */
.titlerule{position:relative;height:1px;background:var(--line);margin-top:26px;overflow:hidden}
.titlerule::after{content:"";position:absolute;inset:0;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--steel),transparent);transition:transform 1.3s cubic-bezier(.16,1,.3,1) .15s}
.titlerule.in::after{transform:scaleX(1)}

/* reveal engine */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none}

/* buttons */
.btn{font-family:var(--sans);font-weight:500;font-size:13.5px;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:2px;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,background .4s,color .4s,border-color .4s;cursor:pointer}
.btn-primary{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(38,42,49,.18)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn-ghost:hover{border-color:var(--steel);transform:translateY(-2px);box-shadow:0 12px 30px rgba(110,117,128,.12)}
.btn svg{width:16px;height:16px}

/* ============================ HEADER ============================ */
.hdr{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .4s,box-shadow .4s,background .4s}
.hdr.stuck{border-color:var(--line);box-shadow:0 6px 26px rgba(38,42,49,.05)}
.hdr .row{display:flex;align-items:center;justify-content:space-between;height:82px}
.brand img{height:42px;width:auto}
.nav{display:flex;align-items:center;gap:34px}
.nav a.lk{font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:.02em;color:var(--ink2);position:relative;padding:4px 0}
.nav a.lk::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--steel);transition:width .4s cubic-bezier(.16,1,.3,1)}
.nav a.lk:hover{color:var(--ink)}
.nav a.lk:hover::after{width:100%}
.hdr-right{display:flex;align-items:center;gap:20px}
.ig-ico{width:34px;height:34px;display:grid;place-items:center;color:var(--steel);border:1px solid var(--line);border-radius:50%;position:relative;transition:color .3s,border-color .3s}
.ig-ico svg{width:16px;height:16px}
.ig-ico:hover{color:var(--ink);border-color:var(--line2)}
.ig-ico::after{content:"Instagram, launching soon";position:absolute;top:44px;right:0;white-space:nowrap;
  font-family:var(--sans);font-size:11px;letter-spacing:.02em;color:var(--ink2);background:#fff;border:1px solid var(--line);
  padding:7px 11px;border-radius:4px;box-shadow:0 8px 22px rgba(38,42,49,.08);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .3s,transform .3s}
.ig-ico:hover::after{opacity:1;transform:none}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink)}
.menu-btn svg{width:26px;height:26px}

/* ============================ HERO ============================ */
.hero{position:relative;background:var(--white);padding:clamp(46px,7vw,86px) 0 clamp(60px,8vw,100px);overflow:hidden}
.hero .glow1{position:absolute;top:-6%;right:2%;width:720px;height:520px;pointer-events:none;
  background:radial-gradient(600px 380px at 60% 30%,rgba(163,196,247,.4),transparent 62%)}
.hero .glow2{position:absolute;bottom:-10%;left:-6%;width:640px;height:520px;pointer-events:none;
  background:radial-gradient(circle,rgba(226,230,238,.85),transparent 64%)}
.hero-watermark{position:absolute;top:38%;left:44%;width:min(560px,46vw);opacity:.05;pointer-events:none;filter:grayscale(1)}
.hero .grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,68px);align-items:center}
.hero-copy{max-width:560px}
.hero-loc{margin-bottom:26px}
.hero h1{font-size:clamp(40px,6.4vw,74px);font-weight:300;letter-spacing:-.02em;line-height:1.03;color:var(--ink)}
.hero h1 em{font-style:italic;font-weight:400;color:var(--steel)}
.hero h1 .thin{display:block}
.hero .sub{margin-top:28px;font-size:clamp(16px,1.7vw,18.5px);color:var(--ink2);max-width:490px;font-weight:300;line-height:1.75}
.hero .sig{margin-top:22px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;color:var(--steel)}
.hero .cta-row{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px}
/* framed hero photo */
.hero-figure{position:relative}
.hero-figure .halo{position:absolute;inset:-9% -8% -12% -8%;
  background:radial-gradient(58% 60% at 50% 42%,rgba(184,208,248,.34),transparent 66%);filter:blur(6px);pointer-events:none}
.hero-frame{position:relative;padding:12px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(38,42,49,.28);border-radius:3px}
.hero-frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--line2);border-radius:2px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.5),transparent 30%)}
.hero-frame img{border-radius:2px;aspect-ratio:4/5;height:auto;object-fit:cover;width:100%;transform:scale(1.001);transition:transform 8s ease}
.hero-frame:hover img{transform:scale(1.05)}
.hero-badge{position:absolute;left:-26px;bottom:34px;background:#fff;border:1px solid var(--line);
  box-shadow:0 22px 44px -22px rgba(38,42,49,.3);border-radius:3px;padding:16px 22px;display:flex;align-items:center;gap:16px}
.hero-badge .big{font-family:var(--serif);font-weight:400;font-size:34px;color:var(--ink);line-height:1}
.hero-badge .lab{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);line-height:1.5}
.hero-badge .sil{width:1px;height:38px;background:var(--line2)}
/* hero intro anim */
.hero.go-onshot .hero-copy>*{opacity:0;transform:translateY(20px)}
.hero.go .hero-copy>*{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.hero.go .hero-copy>*:nth-child(1){transition-delay:.05s}
.hero.go .hero-copy>*:nth-child(2){transition-delay:.16s}
.hero.go .hero-copy>*:nth-child(3){transition-delay:.27s}
.hero.go .hero-copy>*:nth-child(4){transition-delay:.38s}
.hero.go .hero-copy>*:nth-child(5){transition-delay:.49s}
.hero.go-onshot .hero-figure{opacity:0;transform:translateY(28px) scale(.985)}
.hero.go .hero-figure{opacity:1;transform:none;transition:opacity 1.2s cubic-bezier(.16,1,.3,1) .2s,transform 1.2s cubic-bezier(.16,1,.3,1) .2s}

/* strip of trust marks under hero */
.hero-strip{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,70px);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:12px 40px;align-items:center;justify-content:space-between}
.hero-strip .item{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;gap:10px}
.hero-strip .item svg{width:15px;height:15px;color:var(--steel)}

/* ============================ SECTION SHELL ============================ */
section{position:relative}
.sec{padding:clamp(76px,10vw,130px) 0}
.sec.paper{background:var(--paper)}
.sec.mist{background:linear-gradient(180deg,var(--white),var(--paper))}
.sec-head{max-width:640px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(30px,4.4vw,50px);font-weight:300;letter-spacing:-.015em;line-height:1.08;margin-top:20px}
.sec-head h2 em{font-style:italic;color:var(--steel);font-weight:400}
.sec-head p.lede{margin-top:22px;font-size:16.5px;font-weight:300;color:var(--ink2);max-width:560px}
.sec-head.center p.lede{margin-left:auto;margin-right:auto}

/* ============================ SERVICES ============================ */
.services{display:grid;gap:0;margin-top:clamp(46px,6vw,76px);border-top:1px solid var(--line)}
.srv-row{display:grid;grid-template-columns:96px 1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(34px,4vw,52px) 0;border-bottom:1px solid var(--line);position:relative}
.srv-num{font-family:var(--serif);font-weight:300;font-size:clamp(44px,5vw,64px);color:var(--line2);line-height:.9;
  font-variant-numeric:lining-nums tabular-nums}
.srv-body h3{font-size:clamp(23px,2.6vw,31px);font-weight:400;letter-spacing:-.01em}
.srv-body p{margin-top:14px;font-weight:300;font-size:15.5px;color:var(--ink2);max-width:420px}
.srv-media{position:relative;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.srv-media img{aspect-ratio:16/10;height:auto;object-fit:cover;width:100%;filter:grayscale(0) saturate(1.08) contrast(1.02);
  transition:filter .7s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.srv-row:hover .srv-media img{filter:grayscale(0);transform:scale(1.04)}
.srv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(184,208,248,.16),transparent 46%);pointer-events:none}
.srv-extras{margin-top:clamp(40px,5vw,60px);display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.srv-extras .lbl{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-right:6px}
.chip{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--ink2);padding:9px 18px;border:1px solid var(--line);border-radius:999px;
  background:#fff;transition:border-color .3s,color .3s,transform .3s}
.chip:hover{border-color:var(--line2);color:var(--ink);transform:translateY(-2px)}

/* ============================ PROCESS ============================ */
.proc{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,26px)}
.step{position:relative;padding-top:30px}
.step .dot{position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid var(--steel)}
.step .dot::after{content:"";position:absolute;left:11px;top:5px;height:1px;width:calc(100% + var(--gap,26px));background:var(--line)}
.step:last-child .dot::after{display:none}
.step .k{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  font-variant-numeric:lining-nums tabular-nums}
.step h4{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);font-weight:400;margin-top:12px}
.step p{margin-top:10px;font-weight:300;font-size:14px;color:var(--ink2)}

/* ============================ STATS BAND ============================ */
.stats{background:var(--mist);position:relative;overflow:hidden}
.stats .glow{position:absolute;top:-30%;left:30%;width:600px;height:500px;
  background:radial-gradient(circle,rgba(184,208,248,.3),transparent 62%);pointer-events:none}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);position:relative}
.stat{text-align:center;position:relative;padding:0 10px}
.stat + .stat::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--line2)}
.stat .fig{font-family:var(--serif);font-weight:300;font-size:clamp(42px,5.4vw,66px);color:var(--ink);line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
  background:linear-gradient(120deg,#3a4049,#8b93a0 55%,#3a4049);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .cap{margin-top:14px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

/* ============================ WORK GALLERY ============================ */
.gal{margin-top:clamp(46px,6vw,74px);display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px)}
.tile{position:relative;overflow:hidden;border-radius:3px;border:1px solid var(--line);background:var(--mist)}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(0) saturate(1.08) contrast(1.02);transition:filter .8s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.tile:hover img{filter:grayscale(0);transform:scale(1.05)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;
  background:linear-gradient(to top,rgba(38,42,49,.42),transparent);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.tile:hover .cap{opacity:1;transform:none}
.tile .cap span{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.tile.t-a{grid-column:span 3;grid-row:span 2}
.tile.t-a img{aspect-ratio:auto}
.tile.t-b{grid-column:span 3}
.tile.t-c{grid-column:span 2}
.tile.t-d{grid-column:span 2}
.tile.t-e{grid-column:span 2}
.tile:not(.t-a) img{aspect-ratio:4/3;height:auto}

/* ============================ TRUST ============================ */
.trust-grid{margin-top:clamp(46px,6vw,72px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.accred{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.acard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:34px 28px;text-align:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .4s}
.acard:hover{transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(38,42,49,.24);border-color:var(--line2)}
.acard img{height:56px;width:auto;margin:0 auto 18px;object-fit:contain}
.acard .t{font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:400}
.acard .d{margin-top:8px;font-family:var(--sans);font-size:12.5px;color:var(--mut);letter-spacing:.02em}
.assure li{list-style:none;padding:22px 0;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:flex-start}
.assure li:first-child{padding-top:0}
.assure .ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--steel)}
.assure .ic svg{width:16px;height:16px}
.assure h4{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--ink)}
.assure p{margin-top:5px;font-weight:300;font-size:14.5px;color:var(--ink2)}

/* ============================ TESTIMONIALS ============================ */
.quotes{margin-top:clamp(46px,6vw,74px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.quote{background:#fff;border:1px solid var(--line);border-radius:4px;padding:clamp(28px,3vw,40px);position:relative;
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.quote:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(38,42,49,.24)}
.quote .mk{font-family:var(--serif);font-size:64px;line-height:.7;color:var(--blue);font-style:italic}
.quote p{font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.6;color:var(--ink);margin-top:6px}
.quote .who{margin-top:22px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;gap:10px}
.quote .who::before{content:"";width:22px;height:1px;background:var(--line2)}
.stars{display:flex;gap:3px;margin-top:4px}
.stars svg{width:15px;height:15px;color:var(--blued)}

/* ============================ AREAS ============================ */
.areas-wrap{margin-top:clamp(44px,5vw,66px);display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,4vw,60px);align-items:center}
.area-list{display:flex;flex-wrap:wrap;gap:10px 12px}
.area{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);font-weight:300;color:var(--ink);padding:6px 4px;position:relative}
.area::after{content:"·";color:var(--line2);margin-left:14px}
.area:last-child::after{display:none}
.area .em{font-style:italic;color:var(--steel)}
.area-note{font-weight:300;font-size:15px;color:var(--ink2);margin-top:22px;max-width:420px}
.area-map{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.area-map img{aspect-ratio:5/4;height:auto;object-fit:cover;width:100%;filter:grayscale(0) saturate(1.08)}
.area-map::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 40% 40%,rgba(184,208,248,.2),transparent 60%)}

/* ============================ CTA ============================ */
.cta{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--white),var(--mist));
  padding:clamp(80px,10vw,132px) 0;text-align:center}
.cta .glow{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:820px;height:640px;
  background:radial-gradient(circle,rgba(184,208,248,.34),transparent 62%);pointer-events:none}
.cta-watermark{position:absolute;bottom:-10%;right:-4%;width:min(420px,42vw);opacity:.06;filter:grayscale(1);pointer-events:none}
.cta .inner{position:relative;max-width:760px;margin:0 auto}
.cta h2{font-size:clamp(32px,5vw,58px);font-weight:300;letter-spacing:-.02em;line-height:1.06}
.cta h2 em{font-style:italic;color:var(--steel);font-weight:400}
.cta .sig{margin-top:24px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(18px,2.2vw,22px);color:var(--ink2)}
.cta .cta-row{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============================ FOOTER ============================ */
.ft{background:var(--paper);border-top:1px solid var(--line);padding:clamp(64px,8vw,92px) 0 34px;position:relative;overflow:hidden}
.ft-wm{position:absolute;top:-8%;right:-3%;width:min(360px,40vw);opacity:.05;filter:grayscale(1);pointer-events:none}
.ft-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:clamp(30px,4vw,60px)}
.ft-brand img{height:44px;width:auto}
.ft-brand p{margin-top:20px;font-weight:300;font-size:14.5px;color:var(--ink2);max-width:320px}
.ft-brand .sig{margin-top:16px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:15px;color:var(--steel)}
.ft h5{font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:20px}
.ft-nav a{display:block;font-size:14.5px;font-weight:300;color:var(--ink2);padding:6px 0;transition:color .3s}
.ft-nav a:hover{color:var(--ink)}
.ft-con li{list-style:none;font-size:14.5px;font-weight:300;color:var(--ink2);padding:6px 0;display:flex;gap:12px}
.ft-con li span.k{color:var(--mut);min-width:64px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.ft-con a:hover{color:var(--ink)}
.ft-social{display:flex;gap:12px;margin-top:24px}
.ft-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--steel);position:relative;transition:color .3s,border-color .3s,transform .3s}
.ft-social a svg{width:16px;height:16px}
.ft-social a:hover{color:var(--ink);border-color:var(--steel);transform:translateY(-2px)}
.ft-social .ig::after{content:"Instagram, launching soon";position:absolute;bottom:46px;left:50%;transform:translateX(-50%) translateY(4px);
  white-space:nowrap;font-family:var(--sans);font-size:11px;color:var(--ink2);background:#fff;border:1px solid var(--line);
  padding:6px 10px;border-radius:4px;box-shadow:0 8px 20px rgba(38,42,49,.08);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.ft-social .ig:hover::after{opacity:1;transform:translateX(-50%)}
.ft-base{position:relative;margin-top:clamp(46px,6vw,66px);padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.ft-base p{font-size:12.5px;font-weight:300;color:var(--mut);letter-spacing:.02em}
.ft-credit{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.ft-credit .nb{white-space:nowrap}
.ft-credit .sep{color:var(--line2)}


/* ============================ RESPONSIVE ============================ */
@media(max-width:960px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .hero .grid{grid-template-columns:1fr;gap:44px}
  .hero-figure{max-width:460px;margin:0 auto}
  .hero-watermark{display:none}
  .srv-row{grid-template-columns:64px 1fr;gap:20px 26px}
  .srv-media{grid-column:1 / -1;margin-top:6px}
  .proc{grid-template-columns:repeat(2,1fr);gap:30px}
  .step .dot::after{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:40px 20px}
  .stat + .stat::before{display:none}
  .gal{grid-template-columns:repeat(2,1fr)}
  .tile.t-a,.tile.t-b,.tile.t-c,.tile.t-d,.tile.t-e{grid-column:span 1;grid-row:auto}
  .tile.t-a img{aspect-ratio:4/3}
  .trust-grid{grid-template-columns:1fr;gap:40px}
  .quotes{grid-template-columns:1fr}
  .areas-wrap{grid-template-columns:1fr;gap:34px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:40px}
  .ft-brand{grid-column:1 / -1}
}
@media(max-width:560px){
  .hero-badge{left:12px;bottom:12px;padding:12px 16px}
  .hero-badge .big{font-size:26px}
  .hero-strip{gap:12px 24px}
  .proc{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr;gap:34px}
  .stat + .stat::before{display:none}
  .gal{grid-template-columns:1fr}
  .accred{grid-template-columns:1fr}
    /* Footer keeps TWO columns on phones. Explore beside Get in touch is far
     shorter than two full width stacked lists. */
  .ft-grid{grid-template-columns:1fr 1fr;gap:30px 16px}
  .ft-brand{grid-column:1 / -1}
  .ft h5{margin-bottom:14px}
  .ft-nav a{padding:4px 0;font-size:14px}
  /* Label above the value, not beside it: a 64px label leaves nothing for the
     address once the column is half a phone wide. */
  .ft-con li{flex-direction:column;gap:1px;padding:5px 0;font-size:14px}
  .ft-con li span.k{min-width:0;font-size:10px;padding-top:0}
  /* Credit line: segments never split, and the separators go, so nothing is
     left dangling at the end of a line. */
  .ft-base{justify-content:center;text-align:center;gap:10px}
  .ft-base p{width:100%}
  .ft-credit{justify-content:center}
  /* Only the first separator goes. It would sit at the end of the copyright
     line with nothing after it. The second one stays, because Design & Build
     and Building since 1996 always share the line below. */
  .ft-credit .nb:first-child + .sep{display:none}
  /* Copyright takes its own line so "Design & Build" and "Building since 1996"
     sit together on the next one, instead of stranding the date on its own. */
  .ft-credit .nb:first-child{flex:0 0 100%}
  /* The floating call and WhatsApp rail is fixed to the bottom right, so the
     last lines of the footer need room to clear it. */
  .ft{padding-bottom:104px}
  /* Slightly smaller so the accreditation line cannot reach the floating
     button column at the right edge. It cleared by 1px at 12.5px, which is
     too close to trust across devices and font rendering. */
  .ft-base p{font-size:11.5px}
  .cta-row .btn{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .hero-frame img,.srv-media img,.tile img{transition:none!important}
  .hero-video video,.hero-video img.hero-kb{animation:none!important;transform:none!important}
}

/* ===== full-bleed cinematic hero ===== */
.hero{min-height:94vh;display:flex;align-items:flex-end;background:var(--paper);padding:0}
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--mist)}
.hero-video video,.hero-video img.hero-kb{width:100%;height:100%;object-fit:cover;object-position:center 34%;
  transform:scale(1.06);animation:heroKen 22s ease-in-out infinite alternate;will-change:transform}
@keyframes heroKen{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.17) translate3d(-1.6%,-1.4%,0)}}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(255,255,255,.98) 1%,rgba(255,255,255,.92) 16%,rgba(255,255,255,.55) 36%,rgba(255,255,255,.14) 56%,rgba(255,255,255,0) 74%),
    linear-gradient(102deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.64) 30%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 64%),
    linear-gradient(to bottom,rgba(255,255,255,.74),transparent 14%)}
.hero .glow1{position:absolute;z-index:1;top:10%;right:7%;width:520px;height:420px;pointer-events:none;
  background:radial-gradient(circle,rgba(184,208,248,.34),transparent 62%);mix-blend-mode:screen}
.hero-watermark{position:absolute;z-index:1;top:auto;left:auto;right:5%;bottom:26%;width:min(280px,24vw);opacity:.07;filter:grayscale(1)}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(34px,4.4vw,60px);padding-top:150px}
.hero-copy{max-width:720px}
.hero h1{font-size:clamp(44px,7.6vw,94px);line-height:1;letter-spacing:-.028em}
.hero h1 .thin{color:var(--ink2)}
.hero .sub{max-width:540px;color:var(--ink2)}
.hero-badge{position:absolute;z-index:2;left:auto;right:clamp(18px,4vw,54px);bottom:calc(clamp(34px,4.4vw,60px) + 96px);
  background:rgba(255,255,255,.74);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.75);
  box-shadow:0 26px 54px -26px rgba(38,42,49,.42)}
.hero-strip{border-top:1px solid var(--line2);margin-top:clamp(34px,5vw,58px)}
@media(max-width:820px){
  .hero{min-height:86vh}
  .hero-badge{display:none}
  .hero-inner{padding-top:120px}
  .hero h1{font-size:clamp(38px,10vw,60px)}
}

/* --- gentle motion + polish (added) --- */
@keyframes icFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:no-preference){
  .hero-watermark,.wm img{animation:icFloat 11s ease-in-out infinite;will-change:transform}
}

/* ===== v5 bolder + bluer ===== */
.brand img{height:58px}
.hero h1{font-weight:600;color:#131a22}
.hero h1 em{color:#3f7cdf;font-weight:500}
.hero .thin{color:#252c34}
.hero .sub{color:#333c46;font-weight:400}
.hero .sig{color:#3f7cdf}
.sec-head h2{font-weight:600;color:#151b22}
.sec-head h2 em{color:#3f7cdf}
.eyebrow{color:#3f7cdf;font-weight:600}
.eyebrow::before,.eyebrow.center::after{background:#3f7cdf}
.btn-primary{background:linear-gradient(180deg,#5f93ec,#3f7cdf);border-color:#3f7cdf}
.btn-primary:hover{background:linear-gradient(180deg,#4d88e6,#356fd0);box-shadow:0 18px 40px -14px rgba(63,124,223,.5)}
.titlerule::after{background:linear-gradient(90deg,#3f7cdf,transparent)}
.stat .fig{font-weight:500!important;background-image:linear-gradient(120deg,#2f62c4,#7ea6ea 55%,#2f62c4)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.srv-num{color:#c3d8fb}
.chip{border-color:#cfe0fb;color:#2f62c4}
.hero-watermark{opacity:.1;width:min(700px,54vw)}

/* ===== v6 bigger logo + no film ===== */
.hdr .row{height:106px}
.brand img{height:76px!important}
.hdr.stuck .brand img,header.stuck .brand img{height:62px!important}
[class*="flogo"] img,footer img[src*="logo-light"]{height:64px!important}
.hero-scrim{b}
.hero h1,.hero .sub,.hero .sig,.hero .hero-loc,.hero-loc .eyebrow{text-shadow:0 1px 2px rgba(255,255,255,.95),0 2px 22px rgba(255,255,255,.9),0 0 46px rgba(255,255,255,.55)}

/* ===== v8 bigger logo ===== */
.hdr .row{height:122px}
.brand img{height:92px!important}
.hdr.stuck .brand img,header.stuck .brand img{height:70px!important}
[class*="flogo"] img,footer img[src*="logo-light"]{height:84px!important}

@media(max-width:640px){.brand img{height:46px!important}.hdr .row{height:72px!important}.hero-watermark{display:none}}

/* ===== v9 more of their powder-blue (#B8D0F8) throughout ===== */
:root{
  --paper:#f1f6fd !important; --mist:#e7f0fc !important; --cloud:#dde9fa !important;
  --line:#e0e9f6 !important; --line2:#cfdcf0 !important;
}
/* softer powder-blue tint on the contact section + a gentle glow */
.ic-contact{background:#edf3fd !important}
.ic-contact::before{content:"";position:absolute;top:-20%;right:-6%;width:640px;height:520px;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(184,208,248,.5),transparent 62%)}
.ic-areas-grid a{background:#f6f9ff}
/* ===== v12 polish: larger logos + tidier footer ===== */
.brand img{height:100px!important}
.ft-brand img{height:84px!important}
.ft-brand p{margin-top:22px}
.ft{position:relative;overflow:hidden}
.ft::after{content:"";position:absolute;right:-46px;bottom:-52px;width:308px;height:308px;z-index:0;
  background:url(logo/mark-mono.png) no-repeat center/contain;opacity:.05;filter:grayscale(1);pointer-events:none}
.ft .wrap{position:relative;z-index:1}
.ft-social a:hover{color:#84ACE8;border-color:#84ACE8}
@media(max-width:640px){.brand img{height:50px!important}.ft-brand img{height:66px!important}}

/* =========================================================
   INNER-PAGE COMPONENTS  (shared across every inner page)
   Design language: Newsreader serif, Jost sans,
   powder-blue #b8d0f8 / #3f7cdf accents, bright and refined.
   ========================================================= */

/* ---- breadcrumb ---- */
.crumb{font-family:var(--sans);font-size:12px;letter-spacing:.05em;color:var(--mut);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--mut);transition:color .3s}
.crumb a:hover{color:#3f7cdf}
.crumb .sep{opacity:.45}
.crumb .cur{color:var(--ink2)}

/* ---- PAGE HERO (plain) ---- */
.phero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--white),var(--paper));
  padding:clamp(122px,15vw,178px) 0 clamp(54px,7vw,86px)}
.phero .glow{position:absolute;top:-18%;right:1%;width:640px;height:520px;pointer-events:none;
  background:radial-gradient(circle,rgba(184,208,248,.42),transparent 62%)}
.phero-wm{position:absolute;right:-3%;bottom:-18%;width:min(360px,32vw);opacity:.05;filter:grayscale(1);pointer-events:none}
.phero .inner{position:relative;z-index:2;max-width:780px}
.phero .eyebrow{margin-bottom:22px}
.phero h1{font-size:clamp(38px,6.2vw,74px);font-weight:300;letter-spacing:-.022em;line-height:1.02;color:var(--ink)}
.phero h1 em{font-style:italic;color:#3f7cdf;font-weight:500}
.phero .lede{margin-top:24px;font-size:clamp(16px,1.8vw,19px);font-weight:300;color:var(--ink2);max-width:620px;line-height:1.75}
.phero .cta-row{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.phero .crumb{margin-bottom:26px}

/* ---- PAGE HERO (full-bleed image, for service detail pages) ---- */
.phero.img{background:var(--paper);padding:0;min-height:min(74vh,660px);display:flex;align-items:flex-end}
.phero.img .bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--mist)}
.phero.img .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);
  animation:heroKen 24s ease-in-out infinite alternate;will-change:transform}
/* image hero: clean WHITE text on a soft dark gradient (no white film/glow) */
.phero.img .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to top,rgba(13,19,27,.9) 0%,rgba(13,19,27,.84) 18%,rgba(13,19,27,.68) 38%,rgba(13,19,27,.42) 58%,rgba(13,19,27,.16) 76%,transparent 92%)}
.phero.img h1,.phero.img .lede,.phero.img .eyebrow,.phero.img .crumb{text-shadow:0 1px 16px rgba(9,14,20,.55),0 1px 2px rgba(9,14,20,.4)}
.phero.img h1,.phero.img h1 .thin{color:#ffffff!important}
.phero.img h1 em{color:#bcd6ff}
.phero.img .lede{color:#ffffff}
.phero.img .eyebrow{color:#e2edff}
.phero.img .eyebrow::before,.phero.img .eyebrow.center::after{background:rgba(255,255,255,.55)}
.phero.img .crumb,.phero.img .crumb a{color:rgba(255,255,255,.78)}
.phero.img .crumb a:hover{color:#ffffff}
.phero.img .crumb .cur{color:rgba(255,255,255,.96)}
.phero.img .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)}
.phero.img .btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.15);box-shadow:none}
.phero.img .inner{position:relative;z-index:2;padding-top:170px;padding-bottom:clamp(38px,5vw,64px);max-width:720px}
.phero.img h1{font-size:clamp(40px,7vw,86px);line-height:1;letter-spacing:-.028em}
@media(prefers-reduced-motion:reduce){.phero.img .bg img{animation:none;transform:none}}

/* ---- generic rich prose ---- */
.prose{max-width:720px;font-weight:300;color:var(--ink2);font-size:16.5px;line-height:1.85}
.prose.lg{font-size:17.5px}
.prose p{margin-bottom:20px}
.prose p:last-child{margin-bottom:0}
.prose h3{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(22px,2.6vw,30px);margin:38px 0 14px;letter-spacing:-.01em}
.prose strong{color:var(--ink);font-weight:500}
.prose em{font-style:italic;color:var(--steel)}
.prose a{color:#3f7cdf;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---- lead intro (oversized serif paragraph) ---- */
.lead-serif{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3vw,34px);line-height:1.42;color:var(--ink);letter-spacing:-.01em;max-width:900px}
.lead-serif em{font-style:italic;color:#3f7cdf}

/* ---- alternating feature rows (image + text) ---- */
.frows{display:flex;flex-direction:column;gap:clamp(56px,8vw,110px);margin-top:clamp(48px,6vw,84px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.frow.flip .frow-media{order:2}
.frow-media{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 40px 80px -48px rgba(38,42,49,.3)}
.frow-media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.frow:hover .frow-media img{transform:scale(1.045)}
.frow-media::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(184,208,248,.16),transparent 46%);pointer-events:none}
.frow-media .fnum{position:absolute;left:0;top:0;z-index:2;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:22px;color:#3f7cdf;padding:12px 18px;font-variant-numeric:lining-nums tabular-nums}
.frow-body .kick{font-family:var(--sans);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#3f7cdf;font-weight:500}
.frow-body h2,.frow-body h3{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(26px,3.4vw,40px);margin-top:14px;letter-spacing:-.015em;line-height:1.1}
.frow-body h2 em,.frow-body h3 em{font-style:italic;color:var(--steel)}
.frow-body p{margin-top:18px;font-weight:300;font-size:16px;color:var(--ink2);line-height:1.8;max-width:480px}

/* ---- ticks / checklist ---- */
.ticks{list-style:none;margin-top:26px;display:grid;gap:14px}
.ticks.two{grid-template-columns:1fr 1fr;gap:14px 32px}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-weight:300;font-size:15.5px;color:var(--ink2)}
.ticks li svg{flex:0 0 auto;width:20px;height:20px;color:#3f7cdf;margin-top:2px}
.ticks li b{color:var(--ink);font-weight:500}

/* ---- service cards grid ---- */
.svc-cards{margin-top:clamp(44px,6vw,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px)}
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;position:relative;
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .5s}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 34px 66px -34px rgba(38,42,49,.32);border-color:var(--line2)}
.svc-card .pic{position:relative;overflow:hidden;aspect-ratio:16/11;border-bottom:1px solid var(--line)}
.svc-card .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.svc-card:hover .pic img{transform:scale(1.06)}
.svc-card .pic .n{position:absolute;left:0;bottom:0;z-index:2;background:#fff;font-family:var(--serif);color:#3f7cdf;
  font-size:19px;padding:8px 15px;border-top-right-radius:5px;font-variant-numeric:lining-nums tabular-nums}
.svc-card .b{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.svc-card h3{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--ink);letter-spacing:-.01em}
.svc-card p{margin-top:12px;font-weight:300;font-size:14.5px;color:var(--ink2);line-height:1.7;flex:1}
.svc-card .go{margin-top:20px;font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:#3f7cdf;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:gap .3s}
.svc-card:hover .go{gap:14px}
.svc-card .go svg{width:15px;height:15px}

/* ---- two-up split (text + sticky enquiry / facts) ---- */
.split{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(36px,5vw,72px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.aside-cta{position:sticky;top:130px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:32px 30px;
  box-shadow:0 30px 60px -40px rgba(38,42,49,.28)}
.aside-cta .eyebrow{margin-bottom:16px}
.aside-cta h3{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink);line-height:1.15}
.aside-cta p{margin-top:12px;font-weight:300;font-size:14.5px;color:var(--ink2)}
.aside-cta .btn{margin-top:22px;width:100%;justify-content:center}
.aside-cta .tel{margin-top:14px;text-align:center;font-family:var(--serif);font-size:22px;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.aside-cta .tel a:hover{color:#3f7cdf}
.aside-cta .mini{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut);display:grid;gap:8px}
.aside-cta .mini div{display:flex;gap:10px;align-items:center}
.aside-cta .mini svg{width:15px;height:15px;color:#3f7cdf;flex:none}

/* ---- scope / fact list ---- */
.scope{margin-top:30px;border-top:1px solid var(--line)}
.scope div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.scope div span{color:var(--mut);font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.scope div b{color:var(--ink);font-weight:500;text-align:right}

/* ---- pull quote ---- */
.pullquote{margin:clamp(48px,7vw,90px) auto;max-width:860px;text-align:center;position:relative}
.pullquote .mk{font-family:var(--serif);font-style:italic;font-size:72px;color:var(--blue);line-height:.6}
.pullquote p{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3.2vw,34px);line-height:1.4;color:var(--ink);margin-top:8px;letter-spacing:-.01em}
.pullquote .who{margin-top:22px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

/* ---- FAQ accordion ---- */
.faq{margin-top:clamp(40px,5vw,64px);max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--serif);font-size:clamp(18px,2.1vw,22px);font-weight:400;color:var(--ink);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#3f7cdf}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:13px;height:13px;margin-top:-6px;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233f7cdf" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>');transition:transform .4s cubic-bezier(.16,1,.3,1)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .a{padding:0 44px 26px 0;font-weight:300;font-size:15.5px;color:var(--ink2);line-height:1.8;max-width:720px}

/* ---- related services ---- */
.related{margin-top:clamp(44px,6vw,70px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:22px 24px;transition:border-color .4s,transform .4s,box-shadow .4s}
.rel:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:0 20px 44px -28px rgba(38,42,49,.26)}
.rel span{font-family:var(--serif);font-size:19px;color:var(--ink)}
.rel svg{width:18px;height:18px;color:#3f7cdf;flex:none;transition:transform .3s}
.rel:hover svg{transform:translateX(4px)}

/* ---- vertical process timeline ---- */
.tline{margin-top:clamp(44px,6vw,72px);max-width:820px;position:relative}
.tline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:var(--line2)}
.tstep{position:relative;padding:0 0 clamp(30px,4vw,46px) 62px}
.tstep:last-child{padding-bottom:0}
.tstep .no{position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line2);
  display:grid;place-items:center;font-family:var(--serif);color:#3f7cdf;font-size:16px;z-index:1;font-variant-numeric:lining-nums tabular-nums}
.tstep h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.4vw,27px);color:var(--ink)}
.tstep p{margin-top:9px;font-weight:300;font-size:15.5px;color:var(--ink2);line-height:1.8;max-width:560px}

/* ---- project / case cards (work page) ---- */
.projects{margin-top:clamp(44px,6vw,72px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,36px)}
.proj{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:var(--mist);display:block}
.proj img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.proj:hover img{transform:scale(1.05)}
.proj .meta{position:absolute;left:0;right:0;bottom:0;padding:30px 26px 22px;
  background:linear-gradient(to top,rgba(20,26,34,.72),rgba(20,26,34,.1) 70%,transparent);color:#fff}
.proj .meta .t{font-family:var(--serif);font-size:24px;font-weight:400}
.proj .meta .s{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:6px;display:flex;gap:10px;align-items:center}
.proj.tall{grid-row:span 2}
.proj.tall img{aspect-ratio:3/4.4;height:100%}

/* ---- simple full-width banner strip ---- */
.bstrip{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bstrip .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;padding:34px 0}
.bstrip .bi{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:11px}
.bstrip .bi svg{width:16px;height:16px;color:#3f7cdf}

/* ---- inner responsive ---- */
@media(max-width:900px){
  .frow{grid-template-columns:1fr;gap:26px}
  .frow.flip .frow-media{order:0}
  .svc-cards{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .aside-cta{position:static;top:auto}
  .related{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
  .proj.tall{grid-row:auto}
  .proj.tall img{aspect-ratio:3/2}
  .ticks.two{grid-template-columns:1fr}
}
@media(max-width:560px){
  .svc-cards{grid-template-columns:1fr}
  .phero.img{min-height:min(66vh,540px)}
}
/* ---- header: Services dropdown ---- */
.nav .navitem{position:relative;display:inline-flex;align-items:center}
.nav .navitem>.lk{display:inline-flex;align-items:center;gap:7px}
.nav .navitem>.lk .caret{width:11px;height:11px;flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.nav .navitem:hover>.lk .caret,.nav .navitem:focus-within>.lk .caret{transform:rotate(180deg)}
.drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:252px;
  background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 26px 54px -24px rgba(38,42,49,.3);
  padding:10px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1),visibility .28s;z-index:70}
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav .navitem:hover .drop,.nav .navitem:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:10px 14px;border-radius:5px;font-family:var(--sans);font-weight:400;font-size:14px;
  color:var(--ink2);white-space:nowrap;transition:background .25s,color .25s}
.drop a:hover{background:var(--paper);color:#3f7cdf}
.drop .sep{display:block;height:1px;background:var(--line);margin:8px 6px}
.drop a.all{color:#3f7cdf;font-weight:500}
@media(max-width:960px){
  .nav .navitem{display:block;width:100%}
  .nav .navitem>.lk .caret{display:none}
  .drop{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;min-width:0;
    background:transparent;border:0;box-shadow:none;padding:2px 0 6px 14px}
  .drop a{padding:7px 0;font-size:13.5px}
  .drop .sep{display:none}
}

/* breadcrumb: kept in the markup for structure, hidden from view per client request */
.crumb{display:none!important}

/* project gallery: click a photo to enlarge (not navigate) */
.proj{cursor:zoom-in}
.proj .meta{pointer-events:none}

/* =========================================================
   PAGE-SIGNATURE COMPONENTS
   Extra section types so each service page has its own shape.
   Same brand language, different structure.
   ========================================================= */

/* ---- A. type grid (4-up cards with icon) ---- */
.typegrid{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,22px)}
.typecard{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 24px 26px;position:relative;
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .45s}
.typecard:hover{transform:translateY(-5px);box-shadow:0 26px 52px -30px rgba(38,42,49,.28);border-color:var(--line2)}
.typecard .ic{width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line2);
  display:grid;place-items:center;color:#3f7cdf;margin-bottom:18px}
.typecard .ic svg{width:20px;height:20px}
.typecard h3{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);letter-spacing:-.01em}
.typecard p{margin-top:9px;font-weight:300;font-size:14px;line-height:1.7;color:var(--ink2)}

/* ---- B. compare panels (before/after, keep/upgrade) ---- */
.compare{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px)}
.cpanel{background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden;display:flex;flex-direction:column}
.cpanel .head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;background:var(--paper)}
.cpanel .head .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--line2)}
.cpanel.now .head .dot{background:#b6bfcc}
.cpanel.after .head .dot{background:#3f7cdf}
.cpanel .head h3{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink)}
.cpanel .head .tag{margin-left:auto;font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.cpanel ul{list-style:none;padding:20px 24px 24px;display:grid;gap:13px}
.cpanel li{display:flex;gap:12px;align-items:flex-start;font-weight:300;font-size:15px;color:var(--ink2);line-height:1.65}
.cpanel li svg{flex:none;width:17px;height:17px;margin-top:3px;color:#3f7cdf}
.cpanel.now li svg{color:#b6bfcc}

/* ---- C. zebra spec list ---- */
.spec{margin-top:clamp(38px,5vw,58px);border-top:1px solid var(--line);max-width:900px}
.spec .row{display:grid;grid-template-columns:minmax(180px,.9fr) 1.6fr;gap:clamp(16px,3vw,40px);
  padding:20px 22px;border-bottom:1px solid var(--line);align-items:baseline}
.spec .row:nth-child(odd){background:var(--paper)}
.spec .row .k{font-family:var(--serif);font-size:19px;color:var(--ink)}
.spec .row .v{font-weight:300;font-size:15px;color:var(--ink2);line-height:1.75}

/* ---- D. horizontal numbered step strip ---- */
.stepstrip{margin-top:clamp(40px,5vw,66px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px);position:relative}
.stepstrip .st{position:relative;padding-top:34px}
.stepstrip .st::before{content:"";position:absolute;top:13px;left:0;right:-14px;height:1px;background:var(--line2)}
.stepstrip .st:last-child::before{right:0}
.stepstrip .st .n{position:absolute;top:0;left:0;width:27px;height:27px;border-radius:50%;background:#fff;
  border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--sans);font-size:11.5px;color:#3f7cdf;font-weight:500;
  font-variant-numeric:lining-nums tabular-nums}
.stepstrip .st h4{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink);margin-bottom:8px}
.stepstrip .st p{font-weight:300;font-size:14px;color:var(--ink2);line-height:1.7}

/* ---- E. offset gallery strip (right column always finishes level with the tall image) ---- */
.gstrip{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(16px,2vw,24px);align-items:stretch}
.gstrip .gcol{display:grid;grid-template-rows:1fr 1fr;gap:clamp(16px,2vw,24px);min-height:0}
.gstrip .gcol figure{min-height:0}
@media(min-width:901px){
  /* the two stacked images split the tall image's height exactly, so both columns end flush */
  .gstrip .gcol .wide img{aspect-ratio:auto;height:100%}
}
.gstrip figure{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--mist);cursor:zoom-in}
.gstrip img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.gstrip figure:hover img{transform:scale(1.05)}
.gstrip .tall img{aspect-ratio:4/5}
.gstrip .wide img{aspect-ratio:16/10}
.gstrip figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 20px 16px;pointer-events:none;
  background:linear-gradient(to top,rgba(20,26,34,.66),transparent);color:#fff;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

/* ---- F. criteria / suitability panel ---- */
.qpanel{margin-top:clamp(40px,5vw,62px);background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);position:relative;overflow:hidden}
.qpanel h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.5vw,27px);color:var(--ink);margin-bottom:8px}
.qpanel p.q{font-weight:300;font-size:15px;color:var(--ink2);line-height:1.75}
.qpanel ul{list-style:none;display:grid;gap:14px;margin-top:6px}
.qpanel li{display:flex;gap:13px;align-items:flex-start;font-weight:300;font-size:15px;color:var(--ink2)}
.qpanel li svg{flex:none;width:19px;height:19px;margin-top:2px;color:#3f7cdf}
.qpanel li b{color:var(--ink);font-weight:500}

/* ---- G. inline stat band ---- */
.statband{margin-top:clamp(38px,5vw,58px);display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);
  padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statband .sb{flex:1 1 160px}
.statband .sb .f{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,44px);color:#3f7cdf;line-height:1;
  font-variant-numeric:lining-nums tabular-nums}
.statband .sb .l{margin-top:10px;font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

/* ---- H. materials / finishes swatch row ---- */
.matrix{margin-top:clamp(36px,4.5vw,56px);display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,18px)}
.matrix .m{text-align:center}
.matrix .sw{aspect-ratio:1;border-radius:8px;border:1px solid var(--line2);background:var(--c,#eee);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.matrix .m:hover .sw{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(38,42,49,.4)}
.matrix .m span{display:block;margin-top:11px;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;color:var(--ink2)}

/* ---- I. full-bleed quote band ---- */
.qband{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(56px,7vw,96px) 0;position:relative;overflow:hidden}
.qband .inner{max-width:900px;margin:0 auto;text-align:center;position:relative;z-index:1}
.qband p{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(22px,3.4vw,36px);
  line-height:1.42;color:var(--ink);letter-spacing:-.01em}
.qband .who{margin-top:22px;font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}

/* ---- J. multi-column checklist ---- */
.cols3{margin-top:clamp(38px,5vw,58px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.cols3 .cgroup h4{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#3f7cdf;
  font-weight:600;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.cols3 .cgroup ul{list-style:none;display:grid;gap:11px}
.cols3 .cgroup li{font-weight:300;font-size:14.5px;color:var(--ink2);display:flex;gap:11px;align-items:flex-start;line-height:1.6}
.cols3 .cgroup li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#3f7cdf;margin-top:9px}

/* ---- signature responsive ---- */
@media(max-width:900px){
  .typegrid{grid-template-columns:1fr 1fr}
  .compare{grid-template-columns:1fr}
  .stepstrip{grid-template-columns:1fr 1fr;gap:26px}
  .stepstrip .st::before{display:none}
  .gstrip{grid-template-columns:1fr}
  .qpanel{grid-template-columns:1fr;gap:24px}
  .matrix{grid-template-columns:repeat(3,1fr)}
  .cols3{grid-template-columns:1fr}
  .spec .row{grid-template-columns:1fr;gap:6px}
}
@media(max-width:560px){
  .typegrid{grid-template-columns:1fr}
  .stepstrip{grid-template-columns:1fr}
  .matrix{grid-template-columns:repeat(2,1fr)}
}

/* ---- K. even image row (uniform tiles, always symmetrical) ---- */
.imgrow{margin-top:clamp(38px,5vw,58px);display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:clamp(16px,2vw,24px)}
.imgrow figure{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--mist);cursor:zoom-in}
.imgrow img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.imgrow figure:hover img{transform:scale(1.05)}
.imgrow figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 18px 14px;pointer-events:none;
  background:linear-gradient(to top,rgba(20,26,34,.66),transparent);color:#fff;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.imgrow.pair{--n:2}
.imgrow.pair img{aspect-ratio:16/10}
@media(max-width:900px){.imgrow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.imgrow{grid-template-columns:1fr}}

/* ---------------------------------------------------------------
   Contact form feedback (assets/forms.js)
   --------------------------------------------------------------- */
.ic-form .form-status{margin:16px 0 0;font-size:15px;line-height:1.5;min-height:1.2em}
.ic-form .form-status:empty{margin:0;min-height:0}
.ic-form .form-status.is-working{color:var(--ink2,#5a6673)}
.ic-form .form-status.is-ok{color:#1c6b3f;font-weight:500}
.ic-form .form-status.is-error{color:#a32020}
.ic-form .is-invalid{border-color:#a32020!important;box-shadow:0 0 0 3px rgba(163,32,32,.10)}
.ic-form button[disabled]{opacity:.6;cursor:progress}