/* =====================================================================
   Web Butler — main stylesheet
   Brand: ink #2B333E, gradient green #00E498 -> cyan #00D2FF, Gotham.
   Signature: 30deg angled gradient cut + pennant marker. Real client imagery.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:"Gotham"; src:url("../fonts/Gotham-Book.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Gotham"; src:url("../fonts/Gotham-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Gotham"; src:url("../fonts/Gotham-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
	--ink:#2B333E; --ink-deep:#1C222A; --ink-900:#161B21; --ink-800:#11171E;
	--green:#00E498; --cyan:#00D2FF;
	/* Darker ramp of the same hues, for gradient TEXT on light backgrounds. The brand
	   green/cyan is only 1.67:1 on white, which is illegible; these clear 3:1 for large
	   text and graphics while still reading as the brand. Never used on dark. */
	--green-ink:#009F6A; --cyan-ink:#0098B9;
	--paper:#F7F9FA; --paper-2:#EEF2F4; --white:#FFF;
	/* Nudged from #6B7580, which missed 4.5:1 on the paper backgrounds by a hair. */
	--muted:#666F7A;
	--muted-light:rgba(255,255,255,.72);
	--line:rgba(43,51,62,.12); --line-light:rgba(255,255,255,.12);
	--grad:linear-gradient(30deg, var(--green) 0%, var(--cyan) 100%);
	--grad-ink:linear-gradient(30deg, var(--green-ink) 0%, var(--cyan-ink) 100%);
	--font:"Gotham","Helvetica Neue",Arial,sans-serif;
	--wrap:1200px; --gutter:clamp(1.25rem,4vw,3rem); --radius:16px; --radius-lg:24px;
	--section-y:clamp(4rem,9vw,8rem);
	--shadow-sm:0 2px 8px rgba(22,27,33,.06);
	--shadow:0 24px 60px -24px rgba(22,27,33,.28);
	--shadow-xl:0 40px 90px -30px rgba(12,18,26,.55);
	--ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);font-weight:400;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img,svg{max-width:100%;height:auto;display:block;}
/* <picture> is inline by default, which would leave a baseline gap inside the frames. */
picture{display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5,p,dl,dd,blockquote,figure{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
/* Any author-set display (grid/flex) beats the UA stylesheet's [hidden]{display:none},
   so elements we hide from JS stay visible. Make hidden actually mean hidden. */
[hidden]{display:none!important;}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.visually-hidden,.skip-link:not(:focus){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:fixed;top:12px;left:12px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;}
/* Focus ring must clear 3:1 against whatever is behind it. Bright cyan managed only
   1.80:1 on white, so keyboard focus was near-invisible on every light page. The darker
   cyan passes on all four surfaces we use (3.39 white, 3.01 paper-2, 4.72 ink-deep,
   5.11 ink-900), so one colour covers the whole site. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--cyan-ink);outline-offset:3px;border-radius:4px;}
/* On the darkest surfaces the bright cyan is both compliant and more legible. */
.section--dark a:focus-visible,.site-footer a:focus-visible,.site-header a:focus-visible,
.hero a:focus-visible,.page-hero a:focus-visible,.trust a:focus-visible,
.contact__aside a:focus-visible,.consent button:focus-visible{outline-color:var(--cyan);}

/* ---------- Type ---------- */
.h2,.h3,.h4,.h5{font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink);}
/* Display headings balance their lines rather than filling greedily, so we stop getting a
   full line followed by one stranded word, and the gradient phrase stops being split down
   the middle. Browsers cap this at a handful of lines, which is all a heading ever has.
   Older browsers ignore it and wrap as before, so there is nothing to fall back to. */
.hero__title,.page-hero__title,.cta-final__title,.h2{text-wrap:balance;}
.h2{font-size:clamp(1.9rem,4.2vw,3rem);}
.h3{font-size:clamp(1.5rem,3vw,2rem);}
.h4{font-size:clamp(1.2rem,2vw,1.4rem);}
.h5{font-size:1.12rem;letter-spacing:-.01em;}
.h2--light,.h4--light{color:var(--white);}
/* Gradient text defaults to the accessible ramp, and opts back into the bright brand
   gradient only where it sits on an ink background. Safe by default, bright where it can be. */
.grad-text{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.hero .grad-text,.page-hero .grad-text,.section--dark .grad-text,.trust .grad-text,.site-footer .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;}
/* White cards sitting inside a dark section opt back out again. */
.floating-badge .grad-text,.testimonial .grad-text{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;}
.grad-text--anim{background-size:220% 100%;animation:gradShift 7s linear infinite;}
@keyframes gradShift{to{background-position:220% 0;}}
.nowrap{white-space:nowrap;}
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem;}
.eyebrow--light{color:var(--muted-light);}
.pennant{width:18px;height:18px;flex:0 0 auto;}
.pennant--sm{width:26px;height:26px;margin-bottom:1rem;}

/* ---------- Buttons ---------- */
/* background belongs on the base, not on each variant. On an <a> a missing background is
   harmless, but a <button> falls back to the UA's ButtonFace grey, which is what put white
   ghost text on a near-white pill in the cookie banner. Variants below set their own fill
   and still win on source order. */
.btn{--btn-py:.85rem;--btn-px:1.5rem;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:var(--btn-py) var(--btn-px);border-radius:999px;font-weight:500;font-size:.98rem;border:1.5px solid transparent;background:transparent;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);}
.btn--sm{--btn-py:.6rem;--btn-px:1.1rem;font-size:.9rem;}
.btn--lg{--btn-py:1rem;--btn-px:1.9rem;font-size:1.05rem;}
.btn--gradient{background:var(--grad);color:var(--ink-deep);font-weight:700;box-shadow:0 10px 24px -10px rgba(0,210,255,.6);}
.btn--gradient:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(0,210,255,.75);}
.btn--outline{border-color:var(--line);color:var(--ink);background:transparent;}
.btn--outline:hover{border-color:var(--ink);transform:translateY(-2px);}
.btn--ghost{border-color:rgba(255,255,255,.28);color:var(--white);}
.btn--ghost:hover{border-color:var(--white);background:rgba(255,255,255,.06);transform:translateY(-2px);}
/* align-self matters here. Flex items get blockified, so inside a column flex parent
   (.post-card__body, .feature-card, .location-card) this inline-flex became a full
   width flex item and the hover underline ran the whole column instead of sitting
   under the words. Ignored harmlessly wherever the parent is not a flex container. */
.link-arrow{display:inline-flex;align-items:center;align-self:flex-start;gap:.4em;font-weight:500;color:var(--ink);border-bottom:2px solid transparent;padding-bottom:2px;transition:gap .18s var(--ease),border-color .18s var(--ease);}
.link-arrow::after{content:"\2192";transition:transform .18s var(--ease);}
.link-arrow:hover{border-color:var(--cyan);}
.link-arrow:hover::after{transform:translateX(4px);}
.link-arrow--sm{font-size:.92rem;}
.section--dark .link-arrow{color:var(--white);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(28,34,42,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-light);}
.site-header.is-scrolled{background:rgba(22,27,33,.92);box-shadow:0 8px 30px -18px rgba(0,0,0,.8);}
.site-header__inner{display:flex;align-items:center;gap:1.5rem;min-height:74px;transition:min-height .2s var(--ease);}
.site-header.is-scrolled .site-header__inner{min-height:64px;}
.site-header__logo img{width:138px;height:auto;}
.site-nav{margin-left:auto;}
.site-nav__list{display:flex;gap:1.6rem;}
.site-nav__list a{color:rgba(255,255,255,.86);font-size:.95rem;font-weight:500;padding:.5rem 0;position:relative;}
.site-nav__list a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--grad);transition:width .2s var(--ease);}
.site-nav__list a:hover{color:#fff;}
.site-nav__list a:hover::after{width:100%;}
/* Services dropdown. Hover for pointers, :focus-within for keyboards, so it needs no JS. */
.site-nav__list li{position:relative;}
.site-nav .sub-menu{position:absolute;top:100%;left:-1rem;min-width:230px;padding:.5rem;margin-top:.35rem;background:var(--ink-deep);border:1px solid var(--line-light);border-radius:var(--radius);box-shadow:var(--shadow-xl);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:10;}
.site-nav .menu-item-has-children:hover > .sub-menu,.site-nav .menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.site-nav .sub-menu li{display:block;}
.site-nav .sub-menu a{display:block;padding:.6rem .8rem;border-radius:9px;font-size:.93rem;color:rgba(255,255,255,.82);}
.site-nav .sub-menu a::after{display:none;}
.site-nav .sub-menu a:hover{background:rgba(255,255,255,.07);color:#fff;}
/* A parent with children swaps its hover underline for a caret. */
.site-nav .menu-item-has-children > a::after{content:"";position:static;display:inline-block;width:.4em;height:.4em;margin-left:.55em;background:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .18s var(--ease);}
.site-nav .menu-item-has-children:hover > a::after,.site-nav .menu-item-has-children:focus-within > a::after{transform:translateY(0) rotate(45deg);opacity:1;}
/* ---------- Mega menu ----------
   The panel spans the header, not the nav item, so .has-mega goes position:static and
   lets .mega resolve against .site-header (which is sticky, so it is a containing block).
   Same open mechanism as the simple dropdown: hover for pointers, :focus-within for
   keyboards, no JavaScript anywhere. */
.site-nav__list li.has-mega{position:static;}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--ink-deep);border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);box-shadow:var(--shadow-xl);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:20;}
.has-mega:hover > .mega,.has-mega:focus-within > .mega{opacity:1;visibility:visible;transform:translateY(0);}
.mega__inner{display:grid;grid-template-columns:.85fr 1.25fr .95fr 1.15fr;gap:clamp(1.25rem,2.5vw,2.5rem);padding-block:2rem 2.25rem;align-items:start;}
.mega__col{min-width:0;}
.mega__title{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:500;margin-bottom:1.1rem;}
.mega a{display:block;color:rgba(255,255,255,.82);font-size:.92rem;line-height:1.35;padding:.35rem 0;transition:color .15s var(--ease);}
.mega a:hover{color:#fff;}
.mega a::after{display:none;}

/* Services column: each one gets a line of explanation, since this is the primary column. */
.mega__services li a{padding:.5rem 0;font-weight:500;}
/* CSS columns rather than a grid: a grid couples row heights, so one label wrapping to
   two lines leaves a gap beside it. Columns just flow and pack tight. */
.mega__list--split{columns:2;column-gap:1.5rem;}
.mega__list--split li{break-inside:avoid;}
/* Belt and braces: a menu item should never wrap, whatever label ends up in it. */
.mega__list--split a{white-space:nowrap;}
.mega__more{display:inline-block!important;margin-top:.8rem;font-size:.86rem;font-weight:500;color:#fff!important;border-bottom:2px solid;border-image:var(--grad) 1;padding-bottom:2px;}

.mega__col--extras .mega__list a{padding:.55rem 0;}
.mega__col--extras strong{display:block;font-weight:700;color:#fff;letter-spacing:-.01em;}
.mega__col--extras span{display:block;font-size:.82rem;color:rgba(255,255,255,.5);}
.mega__cta{margin-top:1.1rem;padding:1rem 1.2rem!important;border-radius:var(--radius);background:rgba(255,255,255,.05);border:1px solid var(--line-light);transition:border-color .18s var(--ease),background .18s var(--ease);}
.mega__cta:hover{background:rgba(255,255,255,.09);border-color:transparent;box-shadow:0 0 0 1.5px var(--cyan);}
.mega__cta strong{display:block;font-weight:700;color:#fff;margin-bottom:.25rem;}
.mega__cta span{display:block;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.6);}

/* Bridge the gap so the pointer doesn't drop out between item and panel. */
.site-nav .menu-item-has-children::after{content:"";position:absolute;top:100%;left:0;right:0;height:.6rem;}

.site-header__actions{display:flex;align-items:center;gap:.75rem;}
.nav-toggle{display:none;width:44px;height:44px;background:transparent;border:0;position:relative;}
.nav-toggle__bar,.nav-toggle__bar::before,.nav-toggle__bar::after{content:"";position:absolute;left:11px;width:22px;height:2px;background:#fff;transition:transform .2s var(--ease),opacity .2s var(--ease);}
.nav-toggle__bar{top:21px;}
.nav-toggle__bar::before{top:-7px;} .nav-toggle__bar::after{top:7px;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{background:var(--ink-deep);border-bottom:1px solid var(--line-light);padding:1rem var(--gutter) 1.75rem;}
.mobile-nav__list{display:grid;gap:.25rem;margin-bottom:1rem;}
.mobile-nav__list a{display:block;color:#fff;font-size:1.1rem;font-weight:500;padding:.7rem 0;border-bottom:1px solid var(--line-light);}
.mobile-nav .btn{width:100%;}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-y);position:relative;}
.section--dark{background:var(--ink-deep);color:var(--muted-light);}
.section--paper{background:var(--paper);}
.section__head{max-width:640px;margin-bottom:clamp(2.5rem,5vw,4rem);}
.section__intro{font-size:1.12rem;color:var(--muted);margin-top:1rem;}
.section__intro--light{color:var(--muted-light);}
/* 30deg angled top edge — the signature cut, applied to dark sections.
   The negative margin must match the clip's rise exactly, or the triangle the clip
   removes falls past the previous section and reveals a sliver of page background. */
.slant-top{clip-path:polygon(0 3.5vw,100% 0,100% 100%,0 100%);margin-top:-3.5vw;padding-top:calc(var(--section-y) + 3.5vw);}

/* ---------- Entrance animation ---------- */
.anim{opacity:0;transform:translateY(18px);animation:fadeUp .7s var(--ease) forwards;animation-delay:calc(var(--d,0) * 90ms);}
@keyframes fadeUp{to{opacity:1;transform:none;}}
.reveal{opacity:0;transform:translateY(22px);}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);}

/* ---------- Browser frame (imagery) ---------- */
.browser{border-radius:14px;overflow:hidden;background:var(--ink-800);border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow-xl);}
.browser__bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#0d1319;border-bottom:1px solid rgba(255,255,255,.05);}
.browser__bar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16);}
.browser__bar span:first-child{background:rgba(0,228,152,.5);}
.browser img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;object-position:top;}

/* ---------- Device mockups (site shown in real hardware) ----------
   These arrive with their own frame and a transparent background, so they get no
   .browser chrome and no tilt: the hardware is already the frame. */
.device{width:100%;height:auto;}
.page-hero__visual--device{display:flex;justify-content:center;}
.page-hero__visual--device picture{width:100%;max-width:560px;}
.service-card__thumb--device{align-self:center;}
.service-card__thumb--device picture{max-width:100%;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink-deep);color:#fff;padding-block:clamp(4rem,8vw,7rem);}
/* Hero atmosphere. Three things, each doing a specific job:

   1. Two aurora layers drifting on different timings and directions. One layer moving
      reads as a slide; two at odds read as light.
   2. A slow conic sheen, which catches the eye without ever being the thing you look at.
   3. A grain layer. This is the one that matters technically: broad soft gradients on a
      dark field band visibly on 8-bit displays, and grain is what kills it. It is also
      why premium work looks premium and cheap gradients look cheap.

   Everything animates transform and opacity only, so it stays on the compositor and costs
   nothing to scroll past. No animated filters: blurring a full-bleed layer every frame is
   how you make a fast site feel slow. */
.hero__aura{position:absolute;inset:-25%;pointer-events:none;overflow:hidden;}
.hero__aura::before,.hero__aura::after{content:"";position:absolute;inset:0;will-change:transform;}
.hero__aura::before{background:radial-gradient(42% 40% at 78% 12%,rgba(0,210,255,.30),transparent 62%),radial-gradient(38% 42% at 12% 92%,rgba(0,228,152,.24),transparent 62%);animation:auraDrift 19s ease-in-out infinite alternate;}
.hero__aura::after{background:radial-gradient(34% 36% at 26% 20%,rgba(0,228,152,.16),transparent 66%),radial-gradient(30% 34% at 88% 78%,rgba(0,210,255,.14),transparent 66%);animation:auraDriftB 27s ease-in-out infinite alternate;}
@keyframes auraDrift{from{transform:translate3d(-3%,-2%,0) scale(1);}to{transform:translate3d(4%,3%,0) scale(1.12);}}
@keyframes auraDriftB{from{transform:translate3d(3%,2%,0) scale(1.08);}to{transform:translate3d(-4%,-3%,0) scale(1);}}

/* The sheen: a single wide band of light easing across, once a minute. Slow enough that
   you notice it only if you are looking. */
.hero__sheen{position:absolute;inset:-40% -60%;pointer-events:none;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.045) 50%,transparent 62%);animation:sheen 22s ease-in-out infinite;will-change:transform;}
@keyframes sheen{0%{transform:translate3d(-38%,0,0);}55%,100%{transform:translate3d(38%,0,0);}}

/* Grain. An inline SVG turbulence, a few hundred bytes, no request. */
/* No blend mode. overlay and soft-light barely move values this dark, which is precisely
   where the banding is, so the noise is composited straight at low opacity instead. */
.hero__grain,.page-hero__grain{position:absolute;inset:0;pointer-events:none;opacity:.09;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}

@media (prefers-reduced-motion:reduce){
	.hero__sheen{display:none;}
}
.hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.hero__copy,.hero__visual{min-width:0;}
.hero__title{font-size:clamp(2.6rem,5.8vw,4.6rem);font-weight:700;line-height:1.02;letter-spacing:-.03em;margin-bottom:.7rem;}
.hero__sub{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;color:rgba(255,255,255,.55);letter-spacing:-.01em;margin-bottom:1.3rem;}
.hero__lead{font-size:clamp(1.08rem,1.7vw,1.28rem);color:var(--muted-light);max-width:560px;margin-bottom:2.1rem;}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:3rem;}
.hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;column-gap:2.6rem;border-top:1px solid var(--line-light);padding-top:1.8rem;max-width:640px;}
.hero__stats .stat{min-width:0;}
.hero__stats dd{margin:0;}
.stat__value{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:.4rem;}
.stat__label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-light);}
/* Hero visual (layered stack) */
.hero__visual{position:relative;}
.hero__visual::before{content:"";position:absolute;inset:-12% -8%;background:var(--grad);filter:blur(60px);opacity:.28;border-radius:50%;z-index:0;}
.browser--back{position:absolute;top:-7%;right:-6%;width:88%;transform:rotate(3deg);opacity:.5;filter:brightness(.65) saturate(.85);z-index:0;}
.browser--float{position:relative;z-index:1;transform:rotate(-2.5deg);animation:floaty 7s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:rotate(-2.5deg) translateY(0);}50%{transform:rotate(-2.5deg) translateY(-14px);}}
.floating-badge{position:absolute;left:-6%;bottom:-8%;z-index:2;background:#fff;color:var(--ink);border-radius:16px;padding:.95rem 1.2rem;box-shadow:var(--shadow);animation:floaty2 7s ease-in-out infinite;}
@keyframes floaty2{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.floating-badge__stars{display:block;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-size:.95rem;letter-spacing:.15em;margin-bottom:.2rem;}
.floating-badge__big{display:block;font-weight:700;letter-spacing:-.01em;font-size:1.02rem;}
.floating-badge__big em{font-style:normal;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:0 .15em;}
.floating-badge__sub{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem;}

/* ---------- Marquee (shared) ---------- */
.marquee{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.marquee__track{display:flex;align-items:center;width:max-content;animation:marquee 34s linear infinite;}
.marquee[data-marquee]:hover .marquee__track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ---------- Trust strip ---------- */
.trust{background:var(--ink-900);border-bottom:1px solid var(--line-light);padding-block:1.75rem;}
.trust__head{margin-bottom:1.1rem;}
.trust__label{color:var(--muted-light);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;}
.trust .marquee__track{gap:2.75rem;}
.trust .marquee__track li{color:rgba(255,255,255,.5);font-weight:500;font-size:1.02rem;white-space:nowrap;}

/* ---------- Services (asymmetric) ---------- */
.services__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;}
/* Primary service spans the full width; the rest sit under it two-up. */
.services__grid--lead{grid-template-columns:repeat(2,minmax(0,1fr));}
.services__grid--lead .service-card--primary{grid-column:1/-1;}
a.service-card{display:block;text-decoration:none;color:inherit;}
/* An element+class selector outranks the plain class, so the primary card's grid has
   to be restored explicitly or it collapses to a single column. */
a.service-card--primary{display:grid;}
a.service-card:focus-visible{outline:3px solid var(--cyan-ink);outline-offset:3px;}
.service-card{position:relative;padding:clamp(1.75rem,3vw,2.5rem);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--white);transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.service-card--primary{display:grid;grid-template-columns:1fr .85fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;background:var(--paper);border-color:transparent;overflow:hidden;}
.service-card--primary::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
/* ---------- Tap targets ----------
   WCAG 2.2 puts the minimum at 24x24 CSS px. Footer and area links were landing at 15 to
   23px tall, which is fine with a mouse and fiddly with a thumb. Padding buys the height
   without changing the visual rhythm, since the text position does not move. */
@media (max-width:980px){
	.site-footer a,
	.site-footer__col a,
	.footer-areas a,
	.trust .marquee__track a{display:inline-block;padding-block:.3rem;}
	.site-footer__legal a{padding-block:.35rem;}
}

/* ---------- Docked action ----------
   From the reference: the action is not inside the card, it sits in a bite taken out of
   the corner. Reads as the card handing you somewhere to go rather than listing a link.

   Done with a ring of the section's own background around the pill rather than by masking
   the card. Masking loses the border and the corner radius, and a diagonal void cannot
   hold a rounded button. The ring keeps every existing card style intact and the bite
   follows the pill exactly.

   --dock-bg has to match whatever the card sits on, so it is set per section below. */
.dock{position:relative;padding-bottom:clamp(3.5rem,6vw,4.25rem);}
/* A tile should not lift. The lift-and-shadow idiom belongs to a bordered card floating on
   a page; on a filled tile it reads as jumpy, and it drags the pill's ring with it so the
   bite separates from whatever it is supposed to be biting. The fill shift does the same
   job without moving anything. */
.dock,.dock:hover{transform:none;box-shadow:none;}
.tile{transition:background .18s var(--ease);}
.tile:hover{background:var(--paper-2);}
.tile--ink:hover{background:var(--ink-900);}
.dock .link-arrow{position:absolute;z-index:2;right:0;bottom:0;margin:0;
	align-self:auto;padding:.72rem 1.2rem;border-radius:999px;
	background:var(--ink-deep);color:#fff;font-size:.88rem;font-weight:500;
	/* The ring spills outside the card too, but that is invisible because it is the
	   section's own colour. Flush positioning keeps the grid edges honest. */
	box-shadow:0 0 0 .55rem var(--dock-bg, var(--paper));
	transition:background .18s var(--ease),box-shadow .18s var(--ease);}
.dock .link-arrow::after{display:none;}   /* the hover bar belongs to inline links, not a pill */
.dock:hover .link-arrow{background:var(--grad);color:var(--ink-deep);}
/* On an ink tile a dark pill only reads by its ring, so the accent carries it instead. */
.dock--accent .link-arrow,
.tile--ink.dock .link-arrow{background:var(--grad);color:var(--ink-deep);}
.tile--ink.dock:hover .link-arrow{background:var(--grad);filter:brightness(1.08);}

/* A tile, not an outline. The bite is only legible when the card's fill differs from the
   section behind it, which is also what gives a grid of equal siblings some weight. */
.tile{background:var(--paper);border-color:transparent;}
.tile--ink{background:var(--ink-deep);border-color:transparent;color:var(--muted-light);}
.tile--ink h3,.tile--ink .h3{color:#fff;}
.tile--ink .service-card__tag{color:rgba(255,255,255,.6);}

/* The bite only works if the ring matches the section behind it. */
.section .dock{--dock-bg:var(--white);}
.section--paper .dock{--dock-bg:var(--paper-2);}
.section--dark .dock{--dock-bg:var(--ink-deep);}

.service-card__tag{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:1rem;}
.service-card--primary .service-card__tag{color:var(--ink);}
.service-card h3{margin-bottom:.75rem;}
.service-card p{color:var(--muted);margin-bottom:1.5rem;}
.service-card__thumb{align-self:center;}

/* ---------- Benefits (dark, open columns) ---------- */
.benefits__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem);}
.benefit{padding:.4rem 0 .4rem 1.5rem;border-left:2px solid;border-image:var(--grad) 1;}
.benefit h3{margin-bottom:.6rem;}
.benefit p{color:var(--muted-light);}

/* ---------- Process (numbered sequence) ---------- */
.process__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem);counter-reset:step;position:relative;}
.process__steps::before{content:"";position:absolute;top:1.35rem;left:4%;right:4%;height:1px;background:linear-gradient(90deg,transparent,rgba(43,51,62,.18) 12%,rgba(43,51,62,.18) 88%,transparent);}
/* z-index has to be explicit here. The dimmed steps carry opacity < 1, which creates a
   stacking context and neutralises the z-index on .process__num inside them. The
   progress line is an ::after on the parent, so it comes later in paint order and was
   landing on top of the markers. Raising the whole step fixes it at every opacity. */
.process__step{position:relative;z-index:1;padding-top:.25rem;}
/* Markers match the vertical rail: light by default, gradient on step one. The two
   components used to disagree on both counts (this one filled every marker with ink and
   highlighted step 02), which made the highlight look like it meant something it didn't.
   The white ring masks the connector line running behind each marker. */
.process__num{display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--white);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:.95rem;letter-spacing:.02em;margin-bottom:1.2rem;box-shadow:0 0 0 4px var(--white);}
.process__step:first-child .process__num{background:var(--grad);border-color:transparent;color:var(--ink-deep);box-shadow:0 0 0 4px var(--white),0 8px 20px -8px rgba(0,190,190,.55);}
.process__step h3{margin-bottom:.6rem;}
.process__step p{color:var(--muted);}

/* ---------- Pinned process sequence ----------
   Not scroll-jacking. Nothing intercepts the scroll event: the outer container is simply
   taller than the viewport and the inner block is position:sticky, so the page keeps
   moving at exactly the speed the user asked for while the steps light up in turn.
   That distinction matters, because real scroll-hijacking fights momentum scrolling on
   phones, traps keyboard users and makes some people motion sick.

   Height is 100vh for the pinned view plus 52vh of travel per step, so three steps take
   about a screen and a half of scrolling to walk through. */
.process-pin{position:relative;height:calc(100vh + (var(--steps, 3) * 52vh));}
.process-pin__inner{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding-block:var(--section-y);}

/* Steps not yet reached sit back; the current one comes forward. */
.process-pin .process__step{opacity:.3;transition:opacity .45s var(--ease);}
.process-pin .process__step.is-active,
.process-pin .process__step.is-done{opacity:1;}
.process-pin .process__num{transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);}
.process-pin .process__step.is-done .process__num{background:var(--grad);border-color:transparent;color:var(--ink-deep);}
.process-pin .process__step.is-active .process__num{background:var(--grad);border-color:transparent;color:var(--ink-deep);transform:scale(1.12);box-shadow:0 0 0 4px var(--white),0 10px 24px -8px rgba(0,190,190,.6);}

/* The connector fills in behind the markers as you advance. */
.process__steps{position:relative;}
.process-pin .process__steps::after{content:"";position:absolute;top:1.35rem;left:4%;height:1px;width:calc(var(--progress,0) * 92%);background:var(--grad);transition:width .45s var(--ease);}

/* No pin on small screens, or for anyone who asked for less motion. Nothing is lost:
   every step simply shows at full strength, which is where this started. */
@media (max-width:980px){
	.process-pin{height:auto;}
	.process-pin__inner{position:static;min-height:0;padding-block:0;}
	.process-pin .process__step{opacity:1;}
	.process-pin .process__steps::after{display:none;}
}
@media (prefers-reduced-motion:reduce){
	.process-pin{height:auto;}
	.process-pin__inner{position:static;min-height:0;padding-block:var(--section-y);}
	.process-pin .process__step{opacity:1!important;}
	.process-pin .process__steps::after{display:none;}
}

/* ---------- Testimonials ---------- */
.testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.testimonial{display:flex;flex-direction:column;padding:clamp(1.5rem,2.5vw,2rem);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow-sm);}
.testimonial__stars{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-size:1.05rem;letter-spacing:.2em;margin-bottom:.9rem;}
.testimonial blockquote{font-size:1.02rem;line-height:1.55;margin-bottom:1.1rem;}
.testimonial figcaption{margin-top:auto;color:var(--muted);font-size:.9rem;}
.testimonial figcaption strong{color:var(--ink);font-weight:700;}

/* ---------- Work showcase ---------- */
.work__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2rem,4vw,3rem);flex-wrap:wrap;}
/* The browser frames cast a 100px-deep shadow, and .marquee clips with overflow:hidden.
   Without room to fall off inside the box, every card's shadow got sliced flat at the
   same line and read as a grey band under the carousel. Pad the clip out far enough for
   the shadow to finish, then pull the layout back so the spacing is unchanged. */
.marquee--work{padding-block:.5rem 6.5rem;margin-bottom:-5rem;}
.work .marquee__track--work{gap:1.75rem;animation-duration:64s;}
.work-card{flex:0 0 auto;width:clamp(300px,32vw,440px);}
.work-card .browser{transition:transform .35s var(--ease);}
.work-card .browser img{transition:transform .5s var(--ease);}
.work-card:hover .browser{transform:translateY(-6px);}
.work-card:hover .browser img{transform:scale(1.05);}
.work-card__name{display:block;margin-top:.85rem;color:var(--muted);font-weight:500;}

/* ---------- Pricing ---------- */
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;}
.price-card{display:flex;flex-direction:column;position:relative;padding:clamp(1.75rem,3vw,2.4rem);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--white);}
.price-card--featured{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-8px);}
.price-card--featured::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.price-card__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:var(--ink-deep);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .9rem;border-radius:999px;white-space:nowrap;}
.price-card__name{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.75rem;}
.price-card__price{font-size:clamp(2rem,4vw,2.6rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.75rem;}
.price-card__desc{color:var(--muted);margin-bottom:1.75rem;}
.price-card .btn{margin-top:auto;width:100%;}
.pricing__foothold{text-align:center;margin-top:2.5rem;font-size:1.05rem;color:var(--muted);}
.pricing__foothold a{font-weight:500;color:var(--ink);border-bottom:2px solid;border-image:var(--grad-ink) 1;}

/* ---------- Proof (overlap) ---------- */
.proof__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center;}
.proof__media{position:relative;padding-bottom:2.5rem;}
/* Layered backgrounds, not border-image, so the accent follows the radius. See .case-quote. */
.proof__quote{position:absolute;right:-1.5rem;bottom:0;max-width:330px;padding:1.5rem 1.6rem;border-radius:var(--radius);box-shadow:var(--shadow);border-left:4px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,var(--grad) border-box;}
.proof__quote blockquote{font-size:1.05rem;font-weight:500;line-height:1.4;letter-spacing:-.01em;margin-bottom:.7rem;}
.proof__quote figcaption{color:var(--muted);font-size:.85rem;}
.proof__story h2{margin-bottom:1rem;}
.proof__story p{color:var(--muted);margin-bottom:1.5rem;font-size:1.08rem;}

/* ---------- Features ---------- */
.features__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;}
.feature-card{display:flex;flex-direction:column;padding:1.6rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--white);transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
/* A card that lifts is promising something happens when you click it. Most feature cards
   are just a claim with nowhere to go, so the affordance is tied to whether the card
   actually contains a link. :has() keeps that true as content changes, and browsers
   without it simply get the flat version, which is the safe way to be wrong. */
.feature-card:has(a):hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.feature-card .pennant{width:22px;height:22px;margin-bottom:.9rem;}
.feature-card h3{margin-bottom:.5rem;}
.feature-card p{color:var(--muted);font-size:.96rem;margin-bottom:1.25rem;}
.feature-card .link-arrow{margin-top:auto;}

/* ---------- Innovation ---------- */
.innovation__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.innovation__body p{color:var(--muted-light);font-size:1.1rem;margin-bottom:1.25rem;}
.innovation__body p:last-child{margin-bottom:0;}

/* ---------- Photographic section background ----------
   Atmosphere, not a photograph. The image sits behind an ink field with a veil that stays
   near-opaque where the copy is, so the contrast work holds.

   Image and strength come from custom properties, set by a modifier class, so each
   placement can be tuned without another copy of these rules.

   Faces are the thing to watch. Half-emerged from a veil they read as ghostly rather than
   atmospheric, which is why the images used here are rooms and places rather than people. */
.section--photo{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-deep);}
.section--photo::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--photo);background-size:cover;background-position:var(--photo-pos,50% 40%);opacity:var(--photo-opacity,.5);}
/* The veil is heaviest through the middle, where the copy sits. */
.section--photo::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--veil,
	radial-gradient(56% 76% at 50% 50%, var(--ink-deep) 0%, var(--ink-deep) 46%, rgba(28,34,42,.90) 72%, rgba(28,34,42,.58) 100%));}

/* The default veil is centre-weighted because a closing CTA is a centred block. The
   stakes section runs its copy across two columns, so it needs a flatter one that holds
   right out to the edges. */
.stakes.section--photo{--veil:linear-gradient(180deg,
	rgba(28,34,42,.66) 0%, rgba(28,34,42,.58) 48%, rgba(28,34,42,.70) 100%);}

.section--photo--sector-bakeries{--photo:image-set(
	url("../img/backgrounds/sector-bakeries-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-bakeries-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-bakeries-1600.jpg") type("image/jpeg"));
	--photo-opacity:.62;--photo-pos:50% 46%;}

.section--photo--sector-flooring{--photo:image-set(
	url("../img/backgrounds/sector-flooring-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-flooring-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-flooring-1600.jpg") type("image/jpeg"));
	--photo-opacity:.66;--photo-pos:50% 50%;}

.section--photo--sector-care{--photo:image-set(
	url("../img/backgrounds/sector-care-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-care-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-care-1600.jpg") type("image/jpeg"));
	--photo-opacity:.60;--photo-pos:50% 52%;}

.section--photo--sector-innovation{--photo:image-set(
	url("../img/backgrounds/sector-innovation-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-innovation-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-innovation-1600.jpg") type("image/jpeg"));
	--photo-opacity:.60;--photo-pos:50% 52%;}

.section--photo--sector-furniture{--photo:image-set(
	url("../img/backgrounds/sector-furniture-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-furniture-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-furniture-1600.jpg") type("image/jpeg"));
	--photo-opacity:.66;--photo-pos:50% 54%;}

.section--photo--sector-landscapers{--photo:image-set(
	url("../img/backgrounds/sector-landscapers-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-landscapers-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-landscapers-1600.jpg") type("image/jpeg"));
	--photo-opacity:.58;--photo-pos:50% 54%;}

.section--photo--sector-makers{--photo:image-set(
	url("../img/backgrounds/sector-makers-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-makers-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-makers-1600.jpg") type("image/jpeg"));
	--photo-opacity:.64;--photo-pos:50% 50%;}

.section--photo--sector-marine{--photo:image-set(
	url("../img/backgrounds/sector-marine-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-marine-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-marine-1600.jpg") type("image/jpeg"));
	--photo-opacity:.66;--photo-pos:50% 50%;}

.section--photo--sector-sport{--photo:image-set(
	url("../img/backgrounds/sector-sport-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-sport-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-sport-1600.jpg") type("image/jpeg"));
	--photo-opacity:.62;--photo-pos:50% 56%;}

.section--photo--sector-accountants{--photo:image-set(
	url("../img/backgrounds/sector-accountants-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-accountants-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-accountants-1600.jpg") type("image/jpeg"));
	--photo-opacity:.62;--photo-pos:50% 50%;}

.section--photo--sector-it{--photo:image-set(
	url("../img/backgrounds/sector-it-1600.avif") type("image/avif"),
	url("../img/backgrounds/sector-it-1600.webp") type("image/webp"),
	url("../img/backgrounds/sector-it-1600.jpg") type("image/jpeg"));
	--photo-opacity:.70;--photo-pos:50% 50%;}

.section--photo--mill-junction{--photo:image-set(
	url("../img/backgrounds/mill-junction-1600.avif") type("image/avif"),
	url("../img/backgrounds/mill-junction-1600.webp") type("image/webp"),
	url("../img/backgrounds/mill-junction-1600.jpg") type("image/jpeg"));
	--photo-opacity:.52;--photo-pos:50% 44%;}

.section--photo--line-at-rest{--photo:image-set(
	url("../img/backgrounds/line-at-rest-1600.avif") type("image/avif"),
	url("../img/backgrounds/line-at-rest-1600.webp") type("image/webp"),
	url("../img/backgrounds/line-at-rest-1600.jpg") type("image/jpeg"));
	--photo-opacity:.72;--photo-pos:50% 50%;}

.section--photo--watch-bench{--photo:image-set(
	url("../img/backgrounds/watch-bench-1600.avif") type("image/avif"),
	url("../img/backgrounds/watch-bench-1600.webp") type("image/webp"),
	url("../img/backgrounds/watch-bench-1600.jpg") type("image/jpeg"));
	--photo-opacity:.58;--photo-pos:50% 52%;}

.section--photo--architects-studio{--photo:image-set(
	url("../img/backgrounds/architects-studio-1600.avif") type("image/avif"),
	url("../img/backgrounds/architects-studio-1600.webp") type("image/webp"),
	url("../img/backgrounds/architects-studio-1600.jpg") type("image/jpeg"));
	--photo-opacity:.64;--photo-pos:50% 50%;}

.section--photo--studio{--photo:image-set(
	url("../img/backgrounds/studio-office-1600.avif") type("image/avif"),
	url("../img/backgrounds/studio-office-1600.webp") type("image/webp"),
	url("../img/backgrounds/studio-office-1600.jpg") type("image/jpeg"));
	--photo-opacity:.5;--photo-pos:50% 44%;}

.section--photo--city{--photo:image-set(
	url("../img/backgrounds/city-towers-1600.avif") type("image/avif"),
	url("../img/backgrounds/city-towers-1600.webp") type("image/webp"),
	url("../img/backgrounds/city-towers-1600.jpg") type("image/jpeg"));
	--photo-opacity:.4;--photo-pos:50% 60%;}

@media (min-width:1441px){
	/* Wide viewports get the larger crop; narrower ones never download it. */
	.section--photo--studio{--photo:image-set(
		url("../img/backgrounds/studio-office-2400.avif") type("image/avif"),
		url("../img/backgrounds/studio-office-2400.webp") type("image/webp"),
		url("../img/backgrounds/studio-office-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-bakeries{--photo:image-set(
		url("../img/backgrounds/sector-bakeries-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-bakeries-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-bakeries-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-flooring{--photo:image-set(
		url("../img/backgrounds/sector-flooring-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-flooring-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-flooring-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-care{--photo:image-set(
		url("../img/backgrounds/sector-care-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-care-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-care-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-innovation{--photo:image-set(
		url("../img/backgrounds/sector-innovation-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-innovation-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-innovation-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-furniture{--photo:image-set(
		url("../img/backgrounds/sector-furniture-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-furniture-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-furniture-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-landscapers{--photo:image-set(
		url("../img/backgrounds/sector-landscapers-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-landscapers-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-landscapers-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-makers{--photo:image-set(
		url("../img/backgrounds/sector-makers-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-makers-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-makers-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-marine{--photo:image-set(
		url("../img/backgrounds/sector-marine-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-marine-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-marine-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-sport{--photo:image-set(
		url("../img/backgrounds/sector-sport-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-sport-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-sport-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-accountants{--photo:image-set(
		url("../img/backgrounds/sector-accountants-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-accountants-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-accountants-2400.jpg") type("image/jpeg"));}
	.section--photo--sector-it{--photo:image-set(
		url("../img/backgrounds/sector-it-2400.avif") type("image/avif"),
		url("../img/backgrounds/sector-it-2400.webp") type("image/webp"),
		url("../img/backgrounds/sector-it-2400.jpg") type("image/jpeg"));}
	.section--photo--mill-junction{--photo:image-set(
		url("../img/backgrounds/mill-junction-2400.avif") type("image/avif"),
		url("../img/backgrounds/mill-junction-2400.webp") type("image/webp"),
		url("../img/backgrounds/mill-junction-2400.jpg") type("image/jpeg"));}
	.section--photo--line-at-rest{--photo:image-set(
		url("../img/backgrounds/line-at-rest-2400.avif") type("image/avif"),
		url("../img/backgrounds/line-at-rest-2400.webp") type("image/webp"),
		url("../img/backgrounds/line-at-rest-2400.jpg") type("image/jpeg"));}
	.section--photo--watch-bench{--photo:image-set(
		url("../img/backgrounds/watch-bench-2400.avif") type("image/avif"),
		url("../img/backgrounds/watch-bench-2400.webp") type("image/webp"),
		url("../img/backgrounds/watch-bench-2400.jpg") type("image/jpeg"));}
	.section--photo--architects-studio{--photo:image-set(
		url("../img/backgrounds/architects-studio-2400.avif") type("image/avif"),
		url("../img/backgrounds/architects-studio-2400.webp") type("image/webp"),
		url("../img/backgrounds/architects-studio-2400.jpg") type("image/jpeg"));}
	.section--photo--city{--photo:image-set(
		url("../img/backgrounds/city-towers-2400.avif") type("image/avif"),
		url("../img/backgrounds/city-towers-2400.webp") type("image/webp"),
		url("../img/backgrounds/city-towers-2400.jpg") type("image/jpeg"));}
}

@media (max-width:980px){
	/* Copy fills the width on a phone, so the veil goes near solid and the image just
	   warms the edges. */
	.section--photo::before{opacity:calc(var(--photo-opacity,.5) * .72);}
	.section--photo::after{background:radial-gradient(85% 70% at 50% 50%, var(--ink-deep) 0%, var(--ink-deep) 58%, rgba(28,34,42,.88) 100%);}
}

/* ---------- Final CTA ---------- */
.cta-final{text-align:center;overflow:hidden;}
.cta-final__aura{position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 60% at 50% 120%,rgba(0,210,255,.16),transparent 70%);}
.cta-final__inner{position:relative;max-width:760px;margin-inline:auto;}
.cta-final__title{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin-bottom:1rem;}
.cta-final__lead{font-size:1.15rem;color:var(--muted);margin-bottom:2rem;}
.cta-final__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-900);color:var(--muted-light);padding-top:clamp(3rem,6vw,5rem);}
.site-footer__inner{display:grid;grid-template-columns:1.2fr 2fr;gap:clamp(2rem,5vw,4rem);padding-bottom:3rem;border-bottom:1px solid var(--line-light);}
.site-footer__brand img{width:150px;margin-bottom:1rem;}
.site-footer__tag{max-width:260px;color:var(--muted-light);}
/* minmax(0,1fr) not 1fr: a grid track defaults to min-width:auto, so a long link like
   "Websites for innovative products" cannot shrink and pushes the track wider than the
   viewport. That was forcing 30px of horizontal scroll on every page on a phone. */
.site-footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}
.site-footer__heading{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:1rem;font-weight:500;}
.site-footer__col li{margin-bottom:.6rem;}
.site-footer__col a:hover,.site-footer__contact a:hover,.site-footer__legal a:hover{color:#fff;}
.site-footer__contact address{font-style:normal;line-height:1.9;}
.site-footer__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:1.5rem;font-size:.88rem;}
.site-footer__legal{display:flex;gap:1.25rem;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
	.site-nav{display:none;} .nav-toggle{display:block;}
	.mega{display:none;}
	.hero__inner{grid-template-columns:1fr;gap:3rem;}
	.hero__visual{max-width:520px;}
	.services__grid,.proof__inner,.innovation__inner,.site-footer__inner{grid-template-columns:1fr;}
	.site-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem;}
	.service-card--primary{grid-template-columns:1fr;}
	.benefits__grid,.pricing__grid,.process__steps,.testimonials__grid{grid-template-columns:1fr;}
	.process__steps::before{display:none;}
	.browser--back{display:none;}
	.features__grid{grid-template-columns:repeat(2,1fr);}
	.price-card--featured{transform:none;}
	.proof__quote{position:static;max-width:none;margin-top:1.5rem;right:auto;}
	.proof__media{padding-bottom:0;}
}
@media (min-width:981px){.mobile-nav{display:none!important;}}
@media (max-width:560px){
	.features__grid{grid-template-columns:1fr;}
	.btn--lg{width:100%;}
	.hero__stats{grid-template-columns:1fr 1fr;gap:1.4rem 1rem;}
	.work-card{width:78vw;}
	.floating-badge{left:0;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
	.anim,.reveal{opacity:1!important;transform:none!important;}
	.browser--float{transform:rotate(-2.5deg);}
	.marquee__track{animation:none;}
}


/* =====================================================================
   INNER PAGES
   Everything below serves the pages beyond the homepage. Same tokens, same
   signature devices; each page gets one structural idea of its own so the set
   doesn't read as a single template repeated six times.
   ===================================================================== */

/* ---------- Section head modifiers ---------- */
.section__head--center{margin-inline:auto;text-align:center;}
.section--tight{padding-block:clamp(3rem,6vw,5rem);}

/* Benefit columns sit on dark by default (homepage). Recolour on light sections. */
.section:not(.section--dark) .benefit h3{color:var(--ink);}
.section:not(.section--dark) .benefit p{color:var(--muted);}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{margin-bottom:1.5rem;}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.85rem;color:rgba(255,255,255,.5);}
.breadcrumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5;}
.breadcrumbs a{border-bottom:1px solid transparent;transition:border-color .18s var(--ease),color .18s var(--ease);}
.breadcrumbs a:hover{color:#fff;border-color:rgba(255,255,255,.4);}
.breadcrumbs [aria-current]{color:rgba(255,255,255,.85);}

/* ---------- Inner-page hero ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--ink-deep);color:#fff;padding-block:clamp(3rem,7vw,5.5rem);}
.page-hero__aura{position:absolute;inset:-30%;pointer-events:none;overflow:hidden;}
.page-hero__aura::before,.page-hero__aura::after{content:"";position:absolute;inset:0;will-change:transform;}
.page-hero__aura::before{background:radial-gradient(38% 42% at 82% 6%,rgba(0,210,255,.24),transparent 62%),radial-gradient(36% 40% at 4% 98%,rgba(0,228,152,.20),transparent 62%);animation:auraDrift 23s ease-in-out infinite alternate;}
.page-hero__aura::after{background:radial-gradient(30% 32% at 30% 16%,rgba(0,228,152,.12),transparent 66%);animation:auraDriftB 31s ease-in-out infinite alternate;}
.page-hero__inner{position:relative;}
.page-hero--split .page-hero__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center;}
.page-hero__copy,.page-hero__visual{min-width:0;}
.page-hero__title{font-size:clamp(2.3rem,5vw,3.9rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin-bottom:1.1rem;}
.page-hero__lead{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--muted-light);max-width:56ch;margin-bottom:2rem;}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;}
.page-hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;column-gap:2.6rem;border-top:1px solid var(--line-light);padding-top:1.6rem;margin-top:2.6rem;max-width:620px;}
.page-hero__stats .stat{min-width:0;}
.page-hero__stats dd{margin:0;}
.page-hero__visual .browser{transform:rotate(-1.5deg);}

/* ---------- Prose (editor content, legal pages) ---------- */
.prose{max-width:68ch;}
.prose > * + *{margin-top:1.15rem;}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:2.5rem;}
.prose h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;margin-top:2rem;}
.prose p,.prose li{color:var(--muted);}
.prose ul,.prose ol{padding-left:1.25rem;display:grid;gap:.5rem;}
.prose ul{list-style:disc;} .prose ol{list-style:decimal;}
.prose a{font-weight:500;color:var(--ink);border-bottom:2px solid;border-image:var(--grad-ink) 1;}
.prose strong{color:var(--ink);}

/* Reference-page furniture. A definition list set as label/value rows reads as a record
   rather than prose, which is the point: this is the page you scan for a fact. */
.facts{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:0;margin-top:1.25rem;}
.facts dt{padding:.7rem 1rem .7rem 0;font-weight:700;color:var(--ink);border-top:1px solid var(--line);}
.facts dd{padding:.7rem 0;color:var(--muted);border-top:1px solid var(--line);}
.facts dt:first-of-type,.facts dt:first-of-type + dd{border-top:0;}
/* The two long catalogue lists. They are scannable indexes, not reading matter, so they
   get columns instead of the single 68ch measure the prose around them uses. */
.prose ul.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem;}
.muted-note{font-size:.88rem;color:var(--muted);}
@media (max-width:640px){
	.facts{grid-template-columns:1fr;}
	.facts dt{padding-bottom:0;border-top:1px solid var(--line);}
	.facts dd{padding-top:.2rem;border-top:0;}
	.facts dt:first-of-type + dd{border-top:0;}
	.prose ul.cols-2{grid-template-columns:1fr;}
}

/* ---------- Stakes (service §2: why it matters) ---------- */
.stakes__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,6vw,5rem);align-items:center;}
.stakes__copy p{color:var(--muted);font-size:1.1rem;margin-top:1.1rem;}
.stakes__list{display:grid;}
.stakes__row{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:1.4rem;padding:1.4rem 0;border-top:1px solid var(--line);}
.stakes__row:last-child{border-bottom:1px solid var(--line);}
.stakes__figure{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.02em;line-height:1;min-width:4.5ch;}
.stakes__row p{color:var(--muted);}
.stakes__row strong{display:block;color:var(--ink);font-weight:700;margin-bottom:.15rem;}
.section--dark .stakes__copy p,.section--dark .stakes__row p{color:var(--muted-light);}
.section--dark .stakes__row{border-color:var(--line-light);}
.section--dark .stakes__row strong{color:#fff;}

/* ---------- Process rail (service §4: a genuine sequence, so numbered) ---------- */
.process-rail{display:grid;gap:0;max-width:900px;}
.process-rail__step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.25rem,3vw,2.25rem);padding-bottom:2.5rem;}
.process-rail__step:last-child{padding-bottom:0;}
.process-rail__marker{position:relative;display:flex;flex-direction:column;align-items:center;}
.process-rail__num{display:inline-flex;align-items:center;justify-content:center;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--white);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:.92rem;flex:0 0 auto;}
.process-rail__step:first-child .process-rail__num{background:var(--grad);border-color:transparent;color:var(--ink-deep);box-shadow:0 8px 20px -8px rgba(0,190,190,.55);}
.process-rail__line{flex:1;width:1px;background:linear-gradient(180deg,var(--line),transparent);margin-top:.6rem;}
.process-rail__step:last-child .process-rail__line{display:none;}
.process-rail__body{padding-top:.4rem;}
.process-rail__body h3{margin-bottom:.5rem;}
.process-rail__body p{color:var(--muted);max-width:60ch;}
.process-rail__aside{display:inline-block;margin-top:.75rem;font-size:.9rem;font-weight:500;color:var(--ink);border-bottom:2px solid;border-image:var(--grad-ink) 1;}

/* ---------- Package cards (adds a spec list to the homepage price card) ---------- */
.price-card__list{display:grid;gap:.65rem;margin-bottom:1.9rem;}
.price-card__list li{position:relative;padding-left:1.65rem;font-size:.95rem;color:var(--muted);line-height:1.45;}
.price-card__list li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.price-card__meta{font-size:.85rem;color:var(--muted);margin-top:1rem;text-align:center;}

/* ---------- FAQ ---------- */
.faq__inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:start;}
.faq__head{position:sticky;top:110px;}
.faq__list{display:grid;}
.faq__item{border-top:1px solid var(--line);}
.faq__item:last-child{border-bottom:1px solid var(--line);}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 0;font-weight:500;font-size:1.06rem;color:var(--ink);cursor:pointer;list-style:none;}
.faq__q::-webkit-details-marker{display:none;}
.faq__q:hover{color:var(--ink-deep);}
.faq__icon{width:20px;height:20px;flex:0 0 auto;color:var(--muted);transition:transform .22s var(--ease),color .22s var(--ease);}
.faq__item[open] .faq__icon{transform:rotate(45deg);color:var(--cyan);}
.faq__a{padding:0 0 1.4rem;max-width:62ch;}
.faq__a p{color:var(--muted);}
.faq__item[open] .faq__a{animation:fadeUp .35s var(--ease) forwards;}

/* ---------- SERP mock (the SEO page's signature device) ---------- */
.serp{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow);padding:clamp(1.25rem,2.5vw,1.75rem);}
.serp__bar{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-size:.95rem;margin-bottom:1.5rem;}
.serp__bar svg{width:16px;height:16px;flex:0 0 auto;color:var(--muted);}
.serp__results{display:grid;gap:1.1rem;}
.serp__result{padding:.85rem 1rem;border-radius:12px;position:relative;}
.serp__result--you{background:linear-gradient(30deg,rgba(0,228,152,.1),rgba(0,210,255,.1));box-shadow:inset 0 0 0 1.5px rgba(0,210,255,.35);}
.serp__pos{position:absolute;left:-.65rem;top:1rem;width:1.7rem;height:1.7rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;background:var(--paper-2);color:var(--muted);}
.serp__result--you .serp__pos{background:var(--grad);color:var(--ink-deep);box-shadow:0 6px 16px -6px rgba(0,210,255,.7);}
.serp__result{padding-left:1.6rem;}
.serp__url{font-size:.8rem;color:var(--muted);margin-bottom:.2rem;}
.serp__title{font-size:1.05rem;font-weight:500;color:var(--ink);margin-bottom:.25rem;}
.serp__result--you .serp__title{font-weight:700;}
.serp__desc{font-size:.88rem;color:var(--muted);line-height:1.5;}
.serp__tag{display:inline-block;margin-left:.5rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:.15rem .5rem;border-radius:999px;background:var(--grad);color:var(--ink-deep);vertical-align:middle;}
.serp__note{margin-top:1.4rem;font-size:.85rem;color:var(--muted);text-align:center;}

/* ---------- Work grid (portfolio index) ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,3.5vw,3rem);}
.work-grid__item{min-width:0;}
.work-grid__item:nth-child(even){margin-top:clamp(0rem,4vw,3.5rem);}
.work-grid__item .browser{transition:transform .35s var(--ease);}
.work-grid__item .browser img{transition:transform .5s var(--ease);}
.work-grid__item:hover .browser{transform:translateY(-6px);}
.work-grid__item:hover .browser img{transform:scale(1.04);}
.work-grid__meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1.1rem;}
.work-grid__sector{font-weight:700;letter-spacing:-.01em;color:var(--ink);font-size:1.08rem;}
.work-grid__summary{color:var(--muted);margin-top:.4rem;max-width:52ch;}

/* ---------- Feature rows (intelligent features catalogue) ---------- */
.feature-rows__inner{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.feature-rows__intro{position:sticky;top:110px;}
.feature-rows__intro p{color:var(--muted);margin-top:1rem;font-size:1.08rem;}
.feature-rows__list{display:grid;}
.feature-row{display:grid;gap:.7rem;padding:clamp(1.6rem,3vw,2.2rem) 0;border-top:1px solid var(--line);}
.feature-row:last-child{border-bottom:1px solid var(--line);}
.feature-row__head{display:flex;align-items:center;gap:.75rem;}
.feature-row__head .pennant{width:20px;height:20px;}
.feature-row p{color:var(--muted);max-width:60ch;}
.feature-row__benefit{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;color:var(--ink);font-size:.95rem;}
.feature-row__benefit::before{content:"";width:1.5rem;height:2px;background:var(--grad);flex:0 0 auto;}
.feature-row .link-arrow{justify-self:start;margin-top:.35rem;}

/* ---------- About ---------- */
.creed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4rem);}
.creed__item{padding:clamp(1.5rem,3vw,2rem) 0;border-top:1px solid var(--line-light);}
.creed__item h3{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:700;letter-spacing:-.02em;color:#fff;margin-bottom:.6rem;}
.creed__item p{color:var(--muted-light);max-width:46ch;}
.people{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:center;}
.person{padding:clamp(1.75rem,3vw,2.5rem);border-radius:var(--radius-lg);background:var(--paper);position:relative;overflow:hidden;}
.person::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.person__name{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.2rem;}
.person__role{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:1.1rem;}
.person p{color:var(--muted);}
.person p+p{margin-top:.9rem;}

/* ---------- Contact ---------- */
.contact__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
.form{display:grid;gap:1.15rem;}
.form__row{display:grid;gap:1.15rem;grid-template-columns:1fr 1fr;}
.field{display:grid;gap:.45rem;}
.field label{font-size:.88rem;font-weight:500;color:var(--ink);}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.field textarea{min-height:150px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,210,255,.18);}
.field__hint{font-size:.82rem;color:var(--muted);}
.form__consent{display:flex;align-items:flex-start;gap:.65rem;font-size:.88rem;color:var(--muted);}
.form__consent input{margin-top:.2rem;accent-color:var(--cyan);}
.form .btn{justify-self:start;}
.form__note{font-size:.85rem;color:var(--muted);}
.form__note--error{padding:.9rem 1.1rem;border-radius:12px;background:rgba(179,45,46,.07);border-left:3px solid #b32d2e;color:var(--ink);font-size:.95rem;line-height:1.5;}
.form__note--error a{font-weight:500;border-bottom:1px solid currentColor;}
.contact__aside{display:grid;gap:1.75rem;padding:clamp(1.5rem,3vw,2.2rem);border-radius:var(--radius-lg);background:var(--ink-deep);color:var(--muted-light);}
.contact__aside h2{color:#fff;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.6rem;}
.contact__aside a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);}
.contact__aside a:hover{border-color:var(--cyan);}
.contact__aside address{font-style:normal;line-height:1.9;}
.contact__next{display:grid;gap:.8rem;counter-reset:next;}
.contact__next li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:baseline;}
.contact__next li::before{counter-increment:next;content:counter(next);font-size:.72rem;font-weight:700;color:var(--ink-deep);background:var(--grad);width:1.4rem;height:1.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* ---------- Consent banner ---------- */
.consent{position:fixed;left:50%;transform:translateX(-50%) translateY(120%);bottom:1rem;z-index:150;width:min(680px,calc(100% - 2rem));display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:1.1rem 1.35rem;border-radius:var(--radius);background:var(--ink-deep);color:var(--muted-light);box-shadow:var(--shadow-xl);border:1px solid var(--line-light);transition:transform .4s var(--ease);}
.consent.is-in{transform:translateX(-50%) translateY(0);}
.consent p{font-size:.9rem;flex:1 1 260px;}
.consent a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);}
.consent__actions{display:flex;gap:.6rem;}

/* ---------- Location hub ---------- */
.location-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);}
.location-card a{display:flex;flex-direction:column;gap:.4rem;height:100%;padding:clamp(1.4rem,2.5vw,1.9rem);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--white);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);}
.location-card a:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 0 0 1.5px var(--cyan-ink),var(--shadow-sm);}
.location-card__region{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;}
.location-card h3{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.location-card__flag{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:.2rem .55rem;border-radius:999px;background:var(--grad);color:var(--ink-deep);}
.location-card__travel{color:var(--muted);font-size:.94rem;}
.location-card__proof{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:500;color:var(--ink);}
.location-card__proof::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--grad);flex:0 0 auto;}
.location-card .link-arrow{margin-top:auto;padding-top:.9rem;}

/* ---------- Sector cross-links ---------- */
.sector-links{display:flex;flex-wrap:wrap;gap:.7rem;}
.sector-links a{display:inline-flex;align-items:center;gap:.5em;padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--white);font-size:.94rem;font-weight:500;color:var(--ink);transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);}
.sector-links a::after{content:"\2192";opacity:.4;transition:transform .18s var(--ease),opacity .18s var(--ease);}
.sector-links a:hover{border-color:transparent;box-shadow:0 0 0 1.5px var(--cyan),var(--shadow-sm);transform:translateY(-2px);}
.sector-links a:hover::after{transform:translateX(3px);opacity:1;}

/* ---------- Areas covered (location pages) ---------- */
.areas__list{display:flex;flex-wrap:wrap;gap:.6rem;}
.areas__list li{padding:.5rem 1rem;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:.92rem;color:var(--muted);}
.areas__list li::before{content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:var(--grad);margin-right:.55rem;vertical-align:middle;}

/* ---------- Footer: areas we cover ---------- */
.site-footer__areas{padding-block:1.5rem;border-top:1px solid var(--line-light);}
.site-footer__areas h2{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:.8rem;font-weight:500;}
.site-footer__areas ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.88rem;}
.site-footer__areas a{color:var(--muted-light);}
.site-footer__areas a:hover{color:#fff;}

/* Trust marquee items become links once sector pages exist. */
.trust .marquee__track a{color:rgba(255,255,255,.5);transition:color .18s var(--ease);border-bottom:1px solid transparent;padding-bottom:2px;}
.trust .marquee__track a:hover{color:#fff;border-color:var(--cyan);}

/* ---------- CTA proof line ---------- */
.cta-final__proof{margin-top:1.5rem;font-size:.9rem;color:var(--muted);}
/* The heading is the loudest thing here; it takes full white, not the 72% body tone. */
.section--dark .cta-final__title{color:#fff;}
.section--dark .cta-final__lead,.section--dark .cta-final__proof{color:var(--muted-light);}
/* The aura is a pale glow built for the light version; it muddies the photo. */
.section--photo .cta-final__aura{display:none;}

/* ---------- Blog ---------- */
.blog__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);}
.post-card{min-width:0;}
.post-card__link{display:flex;flex-direction:column;height:100%;gap:1rem;}
.post-card__media{overflow:hidden;border-radius:var(--radius);background:var(--paper-2);}
.post-featured__media{overflow:hidden;border-radius:var(--radius-lg);background:var(--paper-2);box-shadow:var(--shadow);}
.post-featured__media img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.post-card__media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s var(--ease);}
.post-card__link:hover .post-card__media img{transform:scale(1.04);}
.post-card__body{display:flex;flex-direction:column;gap:.55rem;flex:1;}
.post-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.8rem;color:var(--muted);}
.post-card__meta > *+ *::before{content:"·";margin-right:.55rem;opacity:.6;}
.post-card__cat{font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.post-card__title{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--ink);}
.post-card__excerpt{color:var(--muted);font-size:.96rem;}
.post-card .link-arrow{margin-top:auto;}
/* The lead post takes the full width and a bigger frame. */
.post-card--featured{grid-column:1/-1;}
.post-card--featured .post-card__link{flex-direction:row;align-items:center;gap:clamp(1.5rem,4vw,3rem);}
.post-card--featured .post-card__media{flex:1 1 55%;min-width:0;}
.post-card--featured .post-card__body{flex:1 1 45%;}
.post-card--featured .post-card__title{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;}

.pagination{margin-top:clamp(2.5rem,5vw,4rem);}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:2.6rem;padding:0 .8rem;border-radius:999px;border:1px solid var(--line);font-weight:500;font-size:.95rem;color:var(--ink);}
.pagination .page-numbers:hover{border-color:var(--ink);}
.pagination .page-numbers.current{background:var(--grad);border-color:transparent;color:var(--ink-deep);font-weight:700;}

.post-hero__meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;font-size:.88rem;color:var(--muted-light);}
.post-hero__meta > *+*::before{content:"·";margin-right:.6rem;opacity:.6;}
.post-featured{margin-top:clamp(-4rem,-5vw,-2.5rem);position:relative;z-index:2;}
.post-body .prose{margin-inline:auto;}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose blockquote{padding-left:1.4rem;border-left:3px solid;border-image:var(--grad) 1;font-size:1.1rem;font-weight:500;color:var(--ink);}
.prose img{border-radius:var(--radius);}
.prose code{background:var(--paper-2);padding:.15em .4em;border-radius:5px;font-size:.9em;}

.searchform{display:flex;gap:.6rem;flex-wrap:wrap;max-width:520px;margin-top:1rem;}
.searchform input{flex:1 1 220px;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.8rem 1.2rem;}
.searchform input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,210,255,.18);}

/* ---------- Care plan price suffix ---------- */
.price-card__per{font-size:1rem;font-weight:400;color:var(--muted);letter-spacing:0;white-space:nowrap;margin-left:.35rem;}
/* 'from £600 a month' is too wide for a card at display size, so the qualifier shrinks
   and the number stays big. Used where a price carries a period suffix. */
.price-card__from{font-size:1rem;font-weight:400;color:var(--muted);letter-spacing:0;margin-right:.3rem;}

/* ---------- Guided enquiry stepper ---------- */
.get-started__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
.stepper{gap:1.5rem;}
.stepper__step{border:0;padding:0;margin:0;min-width:0;display:grid;gap:1.15rem;}
.stepper__legend{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);padding:0;margin-bottom:.4rem;}
.stepper__progress{display:grid;gap:.6rem;}
.stepper__bar{height:4px;border-radius:999px;background:var(--paper-2);overflow:hidden;}
.stepper__bar span{display:block;height:100%;width:25%;background:var(--grad);border-radius:999px;transition:width .35s var(--ease);}
.stepper__count{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;}
.stepper__actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;}

.choices{display:grid;gap:.75rem;}
.choice{position:relative;display:block;cursor:pointer;}
.choice input{position:absolute;opacity:0;width:0;height:0;}
.choice__body{display:grid;gap:.2rem;padding:1.1rem 1.3rem;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--white);transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);}
.choice:hover .choice__body{border-color:var(--muted);transform:translateY(-2px);}
.choice input:checked + .choice__body{border-color:transparent;box-shadow:0 0 0 2px var(--cyan),var(--shadow-sm);}
.choice input:focus-visible + .choice__body{outline:3px solid var(--cyan);outline-offset:3px;}
.choice__title{font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.choice__desc{font-size:.92rem;color:var(--muted);}

/* ---------- Case study ----------
   On a case study the number is the entire argument, so it gets to be the biggest thing
   on the page rather than being buried under an account of our process. */
.result{display:inline-flex;align-items:center;gap:clamp(1.25rem,3vw,2.25rem);margin-top:2.4rem;padding:1.4rem 1.75rem;border-radius:var(--radius);background:rgba(255,255,255,.05);border:1px solid var(--line-light);}
.result__side{display:grid;gap:.3rem;}
.result__figure{font-size:clamp(2rem,4.5vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1;}
.result__figure--before{color:rgba(255,255,255,.45);}
.result__label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-light);}
.result__arrow{width:40px;height:24px;flex:0 0 auto;}
.case-hero .page-hero__title{font-size:clamp(2rem,4.2vw,3.2rem);}

.case-outcome{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:start;}
.case-outcome__para{color:var(--muted);font-size:1.08rem;margin-top:1.1rem;}
/* Two background layers rather than border-image: the fill is clipped to the padding box
   and the gradient to the border box, so the accent shows only through the transparent left
   border AND follows the corner radius. border-image would paint a flat bar straight past
   the rounded corners, because it is drawn ignoring border-radius entirely. */
.case-quote{padding:clamp(1.75rem,3vw,2.4rem);border-radius:var(--radius-lg);box-shadow:var(--shadow);border-left:4px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,var(--grad-ink) border-box;}
.case-quote blockquote{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:500;line-height:1.4;letter-spacing:-.01em;margin-bottom:1.1rem;color:var(--ink);}
.case-quote figcaption{color:var(--muted);font-size:.92rem;line-height:1.6;}
.case-quote figcaption strong{color:var(--ink);font-weight:700;}

/* ---------- Eras (evolution page) ----------
   The forecast card is drawn differently on purpose. On a page whose entire currency is
   honesty, showing an opinion in the same typography as an observation would undercut it. */
.eras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);counter-reset:era;}
.era{position:relative;padding:clamp(1.4rem,2.5vw,1.9rem);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--white);}
.era__when{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.era h3{margin-bottom:.6rem;}
.era p{color:var(--muted);font-size:.96rem;}
.era::before{content:"";position:absolute;left:clamp(1.4rem,2.5vw,1.9rem);right:clamp(1.4rem,2.5vw,1.9rem);top:0;height:3px;border-radius:0 0 3px 3px;background:var(--grad-ink);opacity:.55;}
.era--forecast{background:var(--paper);border-style:dashed;border-color:var(--muted);}
.era--forecast::before{background:none;border-top:3px dashed var(--muted);opacity:.5;height:0;}
.era__tag{font-size:.62rem;letter-spacing:.1em;font-weight:700;padding:.15rem .5rem;border-radius:999px;background:var(--ink);color:#fff;}

/* ---------- Forecast list ---------- */
.forecast{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);}
.forecast__item{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;}
.forecast__num{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.forecast__item h3{margin-bottom:.5rem;}
.forecast__item p{color:var(--muted);}

/* ---------- Photography ---------- */
/* Layered backgrounds, not border-image, so the accent follows the radius. See .case-quote. */
.photo-credit{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.5rem;margin-bottom:clamp(2rem,4vw,3rem);border-radius:var(--radius);border-left:3px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad-ink) border-box;}
.photo-credit .pennant{flex:0 0 auto;margin-top:.2rem;}
.photo-credit p{color:var(--muted);font-size:.97rem;line-height:1.6;}
.photo-credit strong{color:var(--ink);}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);}
.photo-item{min-width:0;}
.photo-item picture{border-radius:var(--radius);overflow:hidden;background:var(--paper-2);}
.photo-item img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s var(--ease);}
.photo-item:hover img{transform:scale(1.03);}
.photo-item figcaption{margin-top:.7rem;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem .6rem;}
.photo-item figcaption span{color:var(--ink);font-weight:500;white-space:nowrap;}

/* ---------- Ledger (AI page: worth doing / isn't) ---------- */
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);}
.ledger__col{padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--white);position:relative;}
.ledger__col--yes{background:var(--paper);border-color:transparent;}
.ledger__col--yes::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.ledger__title{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--line);}
.ledger__list{display:grid;gap:1.35rem;}
.ledger__list li{display:grid;gap:.3rem;position:relative;padding-left:1.9rem;}
.ledger__list strong{color:var(--ink);font-weight:700;letter-spacing:-.01em;}
.ledger__list span{color:var(--muted);font-size:.95rem;line-height:1.55;}
.ledger__col--yes .ledger__list li::before{content:"";position:absolute;left:0;top:.3em;width:1rem;height:1rem;border-radius:50%;background:var(--grad);}
.ledger__col--no .ledger__list li::before{content:"";position:absolute;left:0;top:.65em;width:1rem;height:2px;background:var(--muted);opacity:.5;}
.ledger__col--no .ledger__title{color:var(--muted);}

/* ---------- Shadow systems (web apps page) ---------- */
.shadow-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);}
.shadow-item{padding-left:1.4rem;border-left:2px solid;border-image:var(--grad) 1;}
.shadow-item h3{margin-bottom:.5rem;}
.shadow-item p{color:var(--muted-light);font-size:.97rem;}
.shadow-note{margin-top:clamp(2rem,4vw,3rem);color:var(--muted-light);font-size:1.05rem;max-width:60ch;}

/* Two equal service cards, rather than the asymmetric homepage pair. */
.services__grid--pair{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ---------- Services hub rows ---------- */
.service-rows{display:grid;}
.service-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line);}
.service-row:last-child{border-bottom:1px solid var(--line);}
.service-row--lead .service-row__head h2{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.service-row__body p{color:var(--muted);font-size:1.06rem;}
.service-row__meta{font-size:.88rem!important;color:var(--muted)!important;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line);display:inline-block;}
.service-row__body .link-arrow{margin-top:1.2rem;}

/* ---------- Inner-page responsive ---------- */
@media (max-width:980px){
	.page-hero--split .page-hero__inner{grid-template-columns:1fr;gap:2.5rem;}
	.page-hero__visual{max-width:520px;}
	.stakes__inner,.faq__inner,.feature-rows__inner,.contact__inner,.people,.get-started__inner{grid-template-columns:1fr;}
	.blog__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
	.post-card--featured .post-card__link{flex-direction:column;align-items:stretch;}
	.ledger,.services__grid--pair,.service-row,.forecast{grid-template-columns:1fr;}
	.eras{grid-template-columns:repeat(2,minmax(0,1fr));}
	.photo-grid,.location-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
	.case-outcome{grid-template-columns:1fr;}
	.shadow-list{grid-template-columns:repeat(2,minmax(0,1fr));}
	.service-row{gap:1rem;}
	.faq__head,.feature-rows__intro{position:static;}
	.work-grid{grid-template-columns:1fr;}
	.work-grid__item:nth-child(even){margin-top:0;}
	.creed{grid-template-columns:1fr;}
}
@media (max-width:560px){
	.page-hero__stats{grid-template-columns:1fr 1fr;gap:1.4rem 1rem;}
	.form__row{grid-template-columns:1fr;}
	.stakes__row{grid-template-columns:1fr;gap:.35rem;}
	.consent{flex-direction:column;align-items:stretch;}
	.consent__actions .btn{flex:1;}
	.blog__grid,.location-grid{grid-template-columns:1fr;}
	.stepper__actions .btn{flex:1;}
	.shadow-list{grid-template-columns:1fr;}
}