/* =========================================================
   Cartsmith — mobile business unit manufacturer
   Editorial premium · warm ivory ground · navy ink · burnt-orange accent
   The dark is the logo's own navy rather than a neutral charcoal, so the
   CARTSMITH mark sits in its own palette instead of fighting a grey one.
   ========================================================= */
:root{
  --bg:#fcfbf8;            /* warm white */
  --bg-2:#f7f4ee;          /* ivory */
  --panel:#ffffff;
  --ink:#061c34;           /* logo navy, doing charcoal's job */
  --ink-2:#1d3247;
  --muted:#77736d;         /* warm grey */
  --line:rgba(6,28,52,.10); --line-2:rgba(6,28,52,.055);
  --accent:#e85d04;        /* burnt orange — CTA, arrows, key numbers */
  --accent-ink:#c24d03;
  --accent-2:#f5a005;      /* logo amber — marks, hovers, small labels */
  --steel:#1f6feb;
  --tint:rgba(232,93,4,.07);
  --grad:linear-gradient(100deg,var(--accent),var(--accent-2));
  --grad-cool:linear-gradient(120deg,var(--accent),var(--steel));
  --shadow-sm:0 1px 2px rgba(6,28,52,.03),0 4px 14px -8px rgba(6,28,52,.10);
  --shadow-md:0 2px 6px rgba(6,28,52,.04),0 18px 40px -22px rgba(6,28,52,.18);
  --shadow-lg:0 40px 90px -40px rgba(6,28,52,.32);
  --radius:18px; --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1220px;
  --wrap-wide:1480px;
  --gutter:clamp(1.2rem,5vw,4rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* iOS Safari ignores overflow-x:hidden on body alone; clip on both stops sideways panning
   without turning either into a scroll container (so position:fixed keeps working). */
@supports (overflow-x:clip){html,body{overflow-x:clip}}
body.locked{overflow:hidden}
h1,h2,h3,h4,.footer__big{font-family:"Sora",sans-serif;line-height:1.06;letter-spacing:-.035em;font-weight:800}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
/* Native pointer everywhere; a hand on anything clickable that is not already a link. */
button,select,label[for],[data-cursor="hover"]{cursor:pointer}

/* Numerals get their own voice — mono keeps stats and step numbers aligned
   and reads as spec-sheet precision rather than decoration. */
.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-variant-numeric:tabular-nums}

/* HEADING EMPHASIS — the editorial device: one word set in serif italic,
   in burnt orange. On ivory that is ~3.9:1, which clears AA for the large
   sizes this is only ever used at. */
.hl{
  font-family:"Instrument Serif",Georgia,serif;
  font-style:italic;font-weight:400;
  color:var(--accent);
  letter-spacing:-.01em;
  padding-right:.04em;
}
em{font-style:italic;font-family:"Instrument Serif",Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-.01em}
/* Section label — no pill, no border, no shadow. Mono micro-caps and the
   logo's amber triangle. Typography and space do the work instead of a chip. */
.eyebrow{
  display:inline-flex;align-items:center;align-self:flex-start;gap:.6rem;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1.4rem;
}
/* the amber triangle from the A in CARTSMITH */
.eyebrow::before{
  content:"";flex:0 0 auto;width:8px;height:7px;background:var(--accent-2);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.section-head .eyebrow{justify-content:center}
.wrap{max-width:var(--wrap);margin:0 auto}
section{scroll-margin-top:90px}
img{max-width:100%}
/* fk_img() wraps every photo in <picture> for the WebP set; keep it layout-transparent
   so descendant selectors like .pcard__media img keep working unchanged */
picture{display:contents}

/* PROSE — legal pages and any long-form copy */
.prose{max-width:720px;margin:0 auto}
.prose__meta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:2.4rem}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.035em;margin:2.4rem 0 .8rem}
.prose p{color:var(--ink-2);font-size:1.02rem;line-height:1.7;margin-bottom:1rem}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}

/* LIGHTBOX — any .wtile / .work__feature opens its full-size JPEG */
.lb{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);background:rgba(6,28,52,.94);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.lb.open{opacity:1;visibility:visible}
.lb__img{max-width:min(1400px,100%);max-height:82vh;object-fit:contain;border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);transform:scale(.96);transition:transform .45s var(--ease)}
.lb.open .lb__img{transform:none}
.lb__cap{position:absolute;left:50%;bottom:clamp(1rem,3vw,2rem);transform:translateX(-50%);color:#fff;font-family:"Sora";font-weight:700;letter-spacing:-.02em;font-size:clamp(.9rem,1.6vw,1.15rem);text-align:center;max-width:90vw}
.lb__cap small{display:block;font-family:"JetBrains Mono",monospace;font-weight:500;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.35rem}
.lb__btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(252,251,248,.3);background:rgba(6,28,52,.5);color:#fff;font-size:1.3rem;display:grid;place-items:center;transition:background .3s,border-color .3s}
.lb__btn:hover{background:var(--accent);border-color:transparent}
.lb__prev{left:clamp(.6rem,2vw,1.6rem)}.lb__next{right:clamp(.6rem,2vw,1.6rem)}
.lb__close{position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);width:46px;height:46px;border-radius:50%;border:1px solid rgba(252,251,248,.3);background:none;color:#fff;font-size:1.2rem;display:grid;place-items:center;transition:background .3s}
.lb__close:hover{background:var(--accent);border-color:transparent}
.wtile,.work__feature{cursor:pointer}

/* WHATSAPP — sticky, bottom-right, the channel most enquiries actually use */
.wa{position:fixed;right:clamp(1rem,2.5vw,1.8rem);bottom:clamp(1rem,2.5vw,1.8rem);z-index:800;display:flex;align-items:center;gap:.7rem;padding:.7rem 1.1rem .7rem .8rem;border-radius:100px;background:#25d366;color:#fff;font-weight:600;font-size:.88rem;box-shadow:0 18px 40px -18px rgba(37,211,102,.9),0 4px 12px -6px rgba(0,0,0,.25);transform:translateY(120%);transition:transform .6s var(--ease) .8s,box-shadow .3s}
.wa.in{transform:none}
.wa:hover{box-shadow:0 22px 44px -18px rgba(37,211,102,1),0 6px 14px -6px rgba(0,0,0,.3)}
.wa svg{width:26px;height:26px;flex:0 0 auto}
.wa span{white-space:nowrap}
@media (max-width:560px){.wa span{display:none}.wa{padding:.8rem}}

/* ACCESSIBILITY — skip link + visible keyboard focus */
.skip{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--ink);color:#fff;padding:.8rem 1.3rem;border-radius:0 0 12px 0;font-size:.9rem;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* NO-JS FALLBACK — without this the whole page renders invisible to any client
   that does not execute JavaScript (including most AI/LLM crawlers) */
.no-js .preloader,.no-js .sprog{display:none}
.no-js .reveal{opacity:1;transform:none}
.no-js .hero__title .word{transform:none}

/* SCROLL PROGRESS */
.sprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:950;pointer-events:none}
.sprog span{display:block;height:100%;width:0;background:var(--grad);border-radius:0 2px 2px 0}

/* GRAIN + PRELOADER */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;transition:opacity .6s,visibility .6s}
.preloader.done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center;width:min(340px,86vw)}
/* The logo drives the bar: --p (0-1, set from JS) is how far along the road it is. */
.preloader__road{position:relative;--rig:124px}
.preloader__rig{position:absolute;bottom:6px;left:calc((100% - var(--rig)) * var(--p,0));width:var(--rig)}
.preloader__rig img{display:block;width:100%;height:auto;transform-origin:50% 100%;animation:rigBob .5s ease-in-out infinite}
.preloader__dust{position:absolute;left:0;bottom:5px;width:0;height:0}
.preloader__dust span{position:absolute;bottom:0;height:2px;border-radius:2px;background:rgba(6,28,52,.2);opacity:0;animation:rigDust .75s linear infinite}
.preloader__dust span:nth-child(1){left:-12px;width:12px}
.preloader__dust span:nth-child(2){left:-22px;width:8px;animation-delay:.2s}
.preloader__dust span:nth-child(3){left:-30px;width:5px;animation-delay:.4s}
.preloader__track{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.preloader__track span{display:block;height:100%;width:0;background:var(--grad)}
.preloader__word{margin-top:1.3rem;font-family:"Sora",sans-serif;font-weight:800;font-size:.95rem;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--ink)}
.preloader__pct{margin-top:.55rem;font-size:.72rem;letter-spacing:.2em;color:var(--muted)}
@keyframes rigBob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-1.5px) rotate(-.5deg)}65%{transform:translateY(1px) rotate(.4deg)}}
@keyframes rigDust{0%{opacity:.5;transform:translateX(0) scaleX(1)}100%{opacity:0;transform:translateX(-16px) scaleX(.4)}}

/* BUTTONS — larger tap target, hairline ghost, one flat accent fill.
   The label nudges right on hover, which carries the arrow with it. */
/* isolation + a negative z-index on the fill keep it under the label even when the
   text is not wrapped in a <span> (form submit buttons, whose text JS rewrites). */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:1.05rem 1.9rem;border-radius:100px;font-weight:600;font-size:.92rem;background:transparent;border:1px solid var(--ink);color:var(--ink);overflow:hidden;transition:transform .3s var(--ease),border-color .3s,color .3s,box-shadow .3s}
.btn span{position:relative;z-index:2;transition:transform .35s var(--ease)}
.btn:hover span{transform:translateX(4px)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--bg);border-color:transparent}
.btn--solid{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 16px 34px -20px rgba(232,93,4,.9)}
.btn--solid::before{background:var(--ink)}
.btn--solid:hover{color:#fff;box-shadow:0 18px 36px -20px rgba(6,28,52,.55)}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn--ghost:hover{border-color:transparent}
.btn--block{width:100%;padding:1.15rem}
.btn--lg{padding:1.2rem 2.4rem;font-size:1rem}
.btn:active{transform:scale(.98)}

/* NAV — 76px tall, glass on scroll, CTA as a pill */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:2rem;height:78px;padding:0 var(--gutter);transition:height .4s var(--ease),background .4s,backdrop-filter .4s,border-color .4s,box-shadow .4s;border-bottom:1px solid transparent}
.nav.scrolled{height:66px;background:rgba(252,251,248,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-color:var(--line-2);box-shadow:0 12px 34px -28px rgba(6,28,52,.6)}
.nav__brand{display:flex;align-items:center;flex:0 0 auto;position:relative;z-index:860}
.nav__brand img{display:block;height:38px;width:auto;transition:height .4s var(--ease)}
.nav.scrolled .nav__brand img{height:32px}
/* two lockups, one shown at a time: ink on light ground, light on the navy page hero.
   Written as .nav__brand .nav__logo--* so they outrank the generic .nav__brand img rule. */
.nav__brand .nav__logo--light{display:none}
.nav--dark .nav__brand .nav__logo--ink,.nav.open .nav__brand .nav__logo--ink{display:none}
.nav--dark .nav__brand .nav__logo--light,.nav.open .nav__brand .nav__logo--light{display:block}
.nav--dark .nav__links a{color:rgba(252,251,248,.72)}
.nav--dark .nav__links a:hover,.nav--dark .nav__links a.is-active{color:#fff}
.nav--dark .nav__links a::after{background:var(--accent-2)}
.nav--dark .nav__burger span{background:#fff}
/* on scroll the dark pages keep a navy glass bar — never a white strip over the hero */
.nav--dark.scrolled{background:rgba(6,28,52,.84);border-color:rgba(252,251,248,.12);box-shadow:0 12px 34px -28px rgba(0,0,0,.8)}
.nav__links{display:flex;gap:2.1rem}
.nav__links-cta{display:none}
.footer__legal{display:flex;gap:1.3rem}
.nav__links a{font-size:.9rem;font-weight:500;color:var(--muted);position:relative;transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-7px;height:1.5px;width:0;background:var(--accent);transition:width .35s var(--ease)}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-active::after{width:100%}
.nav__cta{padding:.72rem 1.4rem;font-size:.85rem}
.nav__burger{display:none;flex-direction:column;gap:6px;background:none;border:none;padding:6px}
.nav__burger span{display:block;width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.35s var(--ease)}
.nav.open .nav__burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* HERO (home) — editorial split. Type carries the left, one uncompromised
   photograph carries the right. The image is no longer washed out behind text;
   nothing overlaps it, so it can run at full strength. */
.hero{position:relative;min-height:clamp(640px,94svh,940px);display:flex;align-items:center;padding:7rem var(--gutter) 4.5rem;overflow:hidden;background:var(--bg)}
.hero__canvas{position:absolute;inset:0;z-index:1;opacity:.5}
.hero__glow{position:absolute;z-index:0;width:60vw;height:60vw;top:-18%;right:-14%;background:radial-gradient(circle,rgba(232,93,4,.10),transparent 62%);filter:blur(20px);pointer-events:none}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%;max-width:var(--wrap-wide);margin:0 auto}
.hero__content{will-change:transform}
.hero__badge{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border:1px solid var(--line);border-radius:100px;font-size:.76rem;color:var(--muted);background:rgba(255,255,255,.7);margin-bottom:1.8rem;backdrop-filter:blur(6px)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,93,4,.45)}70%{box-shadow:0 0 0 11px rgba(232,93,4,0)}100%{box-shadow:0 0 0 0 rgba(232,93,4,0)}}
.hero__title{font-size:clamp(2.7rem,7vw,5.6rem);font-weight:800;letter-spacing:-.045em;line-height:.96;margin-bottom:1.6rem;color:var(--ink)}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.1em}
.hero__title .word{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease)}
.hero__title .hl{font-size:1.06em;letter-spacing:-.02em}
.hero.in .hero__title .word{transform:translateY(0)}
.hero.in .hero__title .line:nth-child(2) .word{transition-delay:.09s}
.hero.in .hero__title .line:nth-child(3) .word{transition-delay:.18s}
.hero__sub{max-width:44ch;color:var(--muted);font-size:1.06rem;line-height:1.6;margin-bottom:2.4rem}
.hero__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:3rem}
.hero__mini{display:flex;gap:clamp(1.4rem,3vw,2.8rem);flex-wrap:wrap;padding-top:1.8rem;border-top:1px solid var(--line)}
.hero__mini div{font-size:.82rem;color:var(--muted)}
.hero__mini b{display:block;font-size:1.5rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:.15rem}
/* the photograph — full strength, no overlay. The frame owns the height and the
   image is pinned inside it, so a wide source crops instead of distorting. */
.hero__media{position:relative;margin:0;height:clamp(400px,64svh,660px);border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg)}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero__stamp{position:absolute;z-index:2;left:1.4rem;bottom:1.4rem;display:flex;align-items:center;gap:.9rem;padding:1rem 1.35rem;border-radius:18px;background:rgba(6,28,52,.9);backdrop-filter:blur(10px);color:var(--bg);box-shadow:0 26px 50px -26px rgba(6,28,52,.75)}
.hero__stamp b{font-size:1.85rem;line-height:1;color:var(--accent-2);letter-spacing:-.02em}
.hero__stamp span{font-size:.72rem;line-height:1.42;color:rgba(252,251,248,.72)}
.hero__scroll{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.3em;color:var(--muted)}
.hero__scrollline{width:1px;height:40px;background:linear-gradient(var(--accent),transparent);animation:scrolldown 2s var(--ease) infinite}
@keyframes scrolldown{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* PAGE HERO (inner pages) — a dark editorial opening on every page, so the
   navy of the footer and CTA also frames the top. */
.phero{position:relative;padding:clamp(8.5rem,16vw,11.5rem) var(--gutter) clamp(3.5rem,7vw,5.5rem);overflow:hidden;background:var(--ink);color:var(--bg)}
.phero__glow{position:absolute;width:60vw;height:60vw;top:-30%;right:-16%;background:radial-gradient(circle,rgba(245,160,5,.16),transparent 62%);filter:blur(30px);pointer-events:none}
.phero__inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto}
.phero h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:.98;margin:.9rem 0 1.3rem;max-width:16ch;color:#fff}
.phero .hl{color:var(--accent-2)}
.phero p{color:rgba(252,251,248,.68);max-width:56ch;font-size:1.06rem}
.phero .eyebrow{color:rgba(252,251,248,.55)}
.phero .btn{border-color:rgba(252,251,248,.34);color:#fff}
.phero .btn::before{background:#fff}
.phero .btn:hover{color:var(--ink)}
.phero .btn--solid{background:var(--accent);border-color:transparent}
.phero .btn--solid::before{background:#fff}
.crumb{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(252,251,248,.5)}
.crumb a{color:var(--accent-2)}
/* the same page hero, in the nav's own tint — used by the dark hero only */
.phero+.stats{padding-top:clamp(3rem,7vw,5.5rem)}

/* MARQUEE */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.85rem 0;overflow:hidden;background:var(--bg-2)}
.marquee__track{display:flex;gap:2rem;white-space:nowrap;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:"Sora";font-weight:800;font-size:clamp(1rem,2.4vw,1.7rem);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(6,28,52,.2)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* CAPABILITY STRIP — sits where a client-logo row would; these are real
   capabilities rather than invented logos (see $CLIENTS in inc/data.php). */
/* the trust strip that follows is a footnote to this row, not a section of its own,
   so the bottom padding here is short and .trust-strip adds none of its own */
.clients{padding:clamp(3rem,6vw,4.5rem) var(--gutter) clamp(1.6rem,3vw,2.4rem);text-align:center}
.clients p{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--muted);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.8rem}
.clients__row{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem clamp(1.2rem,2.6vw,2.4rem);align-items:center;max-width:var(--wrap-wide);margin:0 auto}
.clients__row span{font-family:"Sora";font-weight:700;font-size:clamp(.86rem,1.15vw,1rem);letter-spacing:-.02em;color:var(--ink);opacity:.42;transition:opacity .3s;white-space:nowrap}
.clients__row span:hover{opacity:1}

/* STATS — no cards, no shadows. Huge numerals and hairline separators. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--wrap);margin:0 auto;padding:clamp(3rem,7vw,6.5rem) var(--gutter)}
.stat{position:relative;padding:0 clamp(.9rem,2.6vw,2.4rem)}
.stat:first-child{padding-left:0}
.stat:last-child{padding-right:0}
.stat+.stat::before{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;background:var(--line)}
.stat__num{font-family:"Sora";font-weight:800;font-size:clamp(2.4rem,5.4vw,4rem);letter-spacing:-.05em;line-height:1;color:var(--ink)}
.stat__label{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-top:.85rem;line-height:1.5}

/* SECTION HEAD — more air, much larger display type */
.section{padding:clamp(4rem,9vw,8rem) var(--gutter)}
.section--alt{background:var(--bg-2)}
.section-head{max-width:780px;margin:0 auto clamp(2.6rem,6vw,4.4rem);text-align:center}
.section-head h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.045em;line-height:1.02}
.section-head__sub{color:var(--muted);margin-top:1.1rem;font-size:1.02rem;max-width:54ch;margin-left:auto;margin-right:auto}
.section-head--left{margin-left:0;text-align:left}

/* PRODUCTS GRID — image-led, de-carded. The photograph is the card;
   the border and shadow are gone and the type sits on the page. */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);max-width:var(--wrap-wide);margin:0 auto}
.pcard{position:relative;display:flex;flex-direction:column;background:none;border:none;border-radius:0;box-shadow:none;transition:none}
.pcard__media{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:4/3;background:var(--bg-2);margin-bottom:1.35rem}
/* pinned rather than sized in percentages: fk_img() stamps real width/height on
   the <img>, and a % height against an aspect-ratio box does not reliably resolve,
   which left the photo drawn at its own ratio instead of cropped to the frame */
.pcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .85s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.045)}
.pcard__tag{position:absolute;left:1rem;top:1rem;z-index:2;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(252,251,248,.92);padding:.4rem .7rem;border-radius:100px;backdrop-filter:blur(6px)}
.pcard h3{font-family:"Sora";font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.14;letter-spacing:-.03em;margin-bottom:.55rem}
.pcard p{color:var(--muted);font-size:.92rem;margin-bottom:1.1rem}
.pcard__feats{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem}
.pcard__feats li{font-size:.86rem;color:var(--muted);padding-left:1.15rem;position:relative}
.pcard__feats li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:5px;background:var(--accent-2);clip-path:polygon(50% 0,100% 100%,0 100%)}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:auto}
.pcard__price{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pcard__link{font-size:.85rem;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:.4rem;transition:gap .35s var(--ease)}
.pcard:hover .pcard__link{gap:.75rem}

/* PRODUCT DETAIL */
.phead{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.phead__top{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0 .85rem}
.phead__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(252,251,248,.16);background:rgba(252,251,248,.06);color:var(--accent-2);flex-shrink:0}
.phead__icon svg{width:23px;height:23px}
.phead__tag{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);font-weight:500}
.phead h1{max-width:14ch;margin:0 0 1.1rem;font-size:clamp(2.1rem,4.8vw,3.6rem)}
.phead p{color:rgba(252,251,248,.68);font-size:.98rem;max-width:56ch;margin-bottom:.9rem}
.phead__price{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;margin:1.4rem 0 1.6rem;padding-top:1.2rem;border-top:1px solid rgba(252,251,248,.14)}
.phead__price b{font-family:"Sora";font-weight:800;font-size:1.3rem;letter-spacing:-.03em;color:#fff}
.phead__price span{color:rgba(252,251,248,.55);font-size:.8rem;max-width:36ch}
.phead__actions{display:flex;gap:.75rem;flex-wrap:wrap}
.phead__media{position:relative;border-radius:22px;overflow:hidden;border:none;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);aspect-ratio:4/3}
.phead__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.phead__media:hover img{transform:scale(1.04)}
/* three-up, because every product now carries the brief's six spec rows — that
   fills two clean rows instead of leaving a ragged tail under a four-up grid */
.pspecs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:var(--wrap);margin:0 auto}
.pspec{border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.25rem;background:#fff;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s}
.pspec:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pspec span{display:block;color:var(--muted);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.3rem}
.pspec b{font-family:"Sora";font-weight:700;font-size:.96rem;line-height:1.3}
.chips--left{justify-content:flex-start;margin:0}
.work__grid--three{grid-auto-rows:250px}

/* PROCESS — an editorial index. Big mono step numbers, hairline rows. */
.process__list{max-width:1000px;margin:0 auto;display:flex;flex-direction:column}
.pstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding:clamp(1.8rem,3vw,2.6rem) 1rem;border-top:1px solid var(--line);transition:padding-left .4s var(--ease),background .4s}
.pstep:last-child{border-bottom:1px solid var(--line)}
.pstep:hover{padding-left:2rem;background:rgba(6,28,52,.02)}
.pstep__no{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;color:var(--line);flex-shrink:0;transition:color .4s}
.pstep:hover .pstep__no{color:var(--accent)}
.pstep__body h3{font-family:"Sora";font-size:clamp(1.15rem,2.2vw,1.7rem);letter-spacing:-.035em;line-height:1.1;margin-bottom:.5rem}
.pstep__body p{color:var(--muted);max-width:62ch;font-size:.96rem}

/* FEATURES — no cards. A hairline grid with the icon inline. */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:var(--wrap);margin:0 auto;border-top:1px solid var(--line)}
.fcard{position:relative;padding:clamp(1.8rem,3vw,2.6rem) clamp(1.2rem,2.5vw,2.2rem);border-bottom:1px solid var(--line);background:none;box-shadow:none;transition:background .4s}
.fcard:not(:nth-child(3n))::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--line)}
.fcard:hover{background:rgba(6,28,52,.02)}
.fcard__icon{width:40px;height:40px;display:grid;place-items:center;color:var(--accent);margin-bottom:1.1rem;background:none;border:none;transition:transform .45s var(--ease)}
.fcard:hover .fcard__icon{transform:translateY(-3px)}
.fcard__icon svg{width:28px;height:28px}
.fcard h3{font-family:"Sora";font-size:1.12rem;letter-spacing:-.03em;line-height:1.2;margin-bottom:.5rem}
.fcard p{color:var(--muted);font-size:.92rem}



/* INDUSTRIES — hairline chips, no fill, no shadow */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;max-width:920px;margin:0 auto;justify-content:center}
.chip{padding:.72rem 1.2rem;border:1px solid var(--line);border-radius:100px;font-size:.88rem;color:var(--muted);background:none;box-shadow:none;transition:color .3s,border-color .3s,background .3s}
.chip:hover{color:var(--ink);border-color:var(--ink)}

/* ABOUT — statement type on the left, one large photograph on the right,
   two micro-labels sitting on the image instead of a floating card. */
.about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.4rem,6vw,6rem);align-items:center;max-width:var(--wrap-wide);margin:0 auto}
.about__copy h2{font-size:clamp(2.2rem,5.2vw,4.2rem);letter-spacing:-.05em;line-height:.98;margin-bottom:1.5rem}
.about__copy>p{color:var(--muted);font-size:1.04rem;max-width:46ch;margin-bottom:2rem}
.about__facts{display:flex;gap:clamp(1.6rem,4vw,3rem);padding:1.6rem 0;margin-bottom:2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about__facts b{display:block;font-size:1.9rem;line-height:1;letter-spacing:-.03em;color:var(--ink);margin-bottom:.4rem}
.about__facts span{font-size:.82rem;color:var(--muted);max-width:18ch;display:block;line-height:1.4}
.about__media{position:relative;margin:0;height:clamp(420px,62vw,680px);border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg)}
.about__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.about__media:hover .about__photo{transform:scale(1.04)}
.about__label{position:absolute;z-index:2;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:.6rem .95rem;border-radius:100px;background:rgba(6,28,52,.88);color:var(--bg);backdrop-filter:blur(8px)}
.about__label--tl{top:1.4rem;left:1.4rem}
.about__label--br{bottom:1.4rem;right:1.4rem;background:rgba(252,251,248,.92);color:var(--ink)}

/* SERVICES — three tall image blocks. Number, verb, one line, an arrow that
   only shows itself on hover. */
.services__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;max-width:var(--wrap-wide);margin-left:auto;margin-right:auto}
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);max-width:var(--wrap-wide);margin:0 auto}
.svc{position:relative;display:flex;flex-direction:column;min-height:clamp(440px,48vw,560px);border-radius:24px;overflow:hidden;background:var(--ink);color:var(--bg);isolation:isolate}
.svc__media{position:absolute;inset:0;z-index:-1}
.svc__img{width:100%;height:100%;object-fit:cover;display:block;opacity:.72;transition:transform 1.1s var(--ease),opacity .6s}
.svc::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,28,52,.10) 0%,rgba(6,28,52,.42) 45%,rgba(6,28,52,.96) 100%);pointer-events:none}
.svc:hover .svc__img{transform:scale(1.06);opacity:.86}
/* The card gradient sets the mood; this one guarantees the text is readable.
   It hugs the copy block itself, so a pale photograph (a studio render on white,
   say) can never wash the type out — and it grows with the block on phones,
   where .svc__desc is expanded permanently instead of on hover. */
.svc__body{position:relative;z-index:1;margin-top:auto;padding:clamp(1.5rem,2.6vw,2.2rem);background:linear-gradient(180deg,rgba(6,28,52,0) 0%,rgba(6,28,52,.86) 26%,rgba(6,28,52,.96) 100%)}
.svc__no{display:block;font-size:.72rem;letter-spacing:.2em;color:var(--accent-2);margin-bottom:1rem}
.svc h3{font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.045em;line-height:.98;color:#fff;margin-bottom:.4rem}
.svc__lead{font-size:.92rem;color:rgba(252,251,248,.78);margin-bottom:.9rem}
.svc__desc{font-size:.88rem;line-height:1.55;color:rgba(252,251,248,.62);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .45s,margin .45s}
.svc:hover .svc__desc{max-height:12em;opacity:1;margin-bottom:1rem}
.svc__arrow{position:absolute;right:clamp(1.5rem,2.6vw,2.2rem);bottom:clamp(1.5rem,2.6vw,2.2rem);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:1.1rem;transform:translateX(12px);opacity:0;transition:transform .45s var(--ease),opacity .45s}
.svc:hover .svc__arrow{transform:none;opacity:1}

/* SELECTED WORK header with an inline action, and the featured piece */
.work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;max-width:var(--wrap-wide);margin-left:auto;margin-right:auto}
.work__feature{position:relative;margin:0 auto clamp(.9rem,2vw,1.6rem);max-width:var(--wrap-wide);height:clamp(320px,52vw,640px);border-radius:24px;overflow:hidden;isolation:isolate}
.work__feature-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.work__feature:hover .work__feature-img{transform:scale(1.04)}
.work__feature::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,28,52,0) 42%,rgba(6,28,52,.40) 70%,rgba(6,28,52,.88) 100%);pointer-events:none}
.work__feature-cap{position:absolute;z-index:2;left:clamp(1.4rem,3vw,2.4rem);right:clamp(1.4rem,3vw,2.4rem);bottom:clamp(1.4rem,3vw,2.2rem);display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;color:#fff}
.work__feature-cap b{font-family:"Sora";font-weight:800;font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:-.04em;line-height:1}
.work__feature-cat{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2)}

/* TESTIMONIAL split — photograph left, quote right */
.tsplit{text-align:left}
.tsplit__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:center;max-width:var(--wrap-wide);margin:0 auto}
.tsplit__media{position:relative;margin:0;height:clamp(360px,54vw,600px);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg)}
.tsplit__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tsplit__stars{color:var(--accent-2);letter-spacing:.18em;font-size:.95rem;margin:-.4rem 0 1.4rem}
/* Grid items default to min-width:auto, so the slider's row of cards used to force the column
   (and the whole page) to ~525px on phones. Let the column shrink and clip the slider. */
.tsplit__grid > *{min-width:0}
.tsplit .quotes__viewport{max-width:100%;width:100%;margin:0}
.tsplit .qcard{padding:0}
.tsplit .qcard p{margin-left:0;margin-right:0;max-width:24ch;text-align:left}
.tsplit .qcard footer{justify-content:flex-start}
.tsplit .quotes__dots{justify-content:flex-start}

/* PROCESS PAGE — five editorial rows, each with its own photograph */
.stages{max-width:var(--wrap-wide);margin:0 auto;display:flex;flex-direction:column}
.stage{display:grid;grid-template-columns:auto 1fr .9fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2.2rem,5vw,4rem) 0;border-top:1px solid var(--line)}
.stage:last-child{border-bottom:1px solid var(--line)}
.stage__no{font-size:clamp(2.6rem,7vw,5.5rem);line-height:1;color:var(--line);letter-spacing:-.04em;transition:color .5s;align-self:start}
.stage:hover .stage__no{color:var(--accent)}
.stage__body h2{font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.045em;line-height:1.02;margin-bottom:1rem}
.stage__body p{color:var(--muted);font-size:1.02rem;max-width:48ch}
.stage__media{position:relative;margin:0;height:clamp(220px,26vw,360px);border-radius:22px;overflow:hidden}
.stage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.stage:hover .stage__img{transform:scale(1.04)}
.qa{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--line)}
.qa li{padding:.9rem 0 .9rem 1.4rem;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:.98rem;position:relative}
.qa li::before{content:"";position:absolute;left:0;top:1.35rem;width:7px;height:6px;background:var(--accent-2);clip-path:polygon(50% 0,100% 100%,0 100%)}

/* SECTORS — numbered two-column index */
.sectors{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);max-width:var(--wrap-wide);margin:0 auto;align-items:start}
.sectors__head h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.045em;line-height:1.02;margin-bottom:1rem}
.sectors__head p:last-child{color:var(--muted);max-width:40ch}
.sectors__list{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(1.5rem,4vw,3rem)}
.sectors__list li{break-inside:avoid;display:flex;align-items:baseline;gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--line);font-family:"Sora";font-weight:700;font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:-.025em}
.sectors__list .num{font-size:.68rem;letter-spacing:.14em;color:var(--accent)}

/* ABOUT PAGE — values, milestones, workshop, team */
.values{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);max-width:var(--wrap-wide);margin:0 auto;align-items:start}
.values__head h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.045em;line-height:1.02;margin-bottom:1rem}
.values__head p:last-child{color:var(--muted);max-width:40ch}
.values__grid{display:flex;flex-direction:column}
.value{display:grid;grid-template-columns:3.2rem 1fr;column-gap:clamp(1rem,2.5vw,2rem);row-gap:.5rem;padding:clamp(1.4rem,2.6vw,2rem) 0;border-top:1px solid var(--line)}
.value:last-child{border-bottom:1px solid var(--line)}
/* number owns column 1 across both rows; heading and copy stack in column 2 */
.value__no{grid-row:1/3;font-size:.72rem;letter-spacing:.2em;color:var(--accent);padding-top:.5rem}
.value h3,.value p{grid-column:2}
.value h3{font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.035em;line-height:1.15;margin-bottom:.5rem}
.value p{color:var(--muted);font-size:.96rem;max-width:56ch}
.timeline__head{max-width:var(--wrap-wide);margin-left:auto;margin-right:auto}
.timeline{list-style:none;margin:0 auto;padding:0;max-width:var(--wrap-wide);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,1.6rem)}
.milestone{position:relative;padding-top:1.6rem;border-top:2px solid var(--line)}
.milestone::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.milestone__year{display:block;font-size:.72rem;letter-spacing:.2em;color:var(--accent);margin-bottom:.8rem}
.milestone h3{font-size:1.15rem;letter-spacing:-.03em;line-height:1.15;margin-bottom:.5rem}
.milestone p{color:var(--muted);font-size:.9rem}
.workshop__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,22vw,300px);gap:clamp(.9rem,2vw,1.6rem);max-width:var(--wrap-wide);margin:0 auto}
.workshop__tile{position:relative;margin:0;border-radius:20px;overflow:hidden;isolation:isolate}
.workshop__tile--wide{grid-column:span 2}
.workshop__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.workshop__tile:hover .workshop__img{transform:scale(1.04)}
.workshop__tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,28,52,0) 38%,rgba(6,28,52,.45) 62%,rgba(6,28,52,.88));pointer-events:none}
.workshop__tile figcaption{position:absolute;z-index:2;left:1.2rem;right:1.2rem;bottom:1.1rem;color:#fff;font-family:"Sora";font-weight:700;font-size:1rem;letter-spacing:-.02em;text-shadow:0 1px 12px rgba(6,28,52,.6)}
.workshop__caps{margin-top:clamp(2rem,4vw,3rem)}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);max-width:var(--wrap-wide);margin:0 auto}
.member{margin:0}
.member__media{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;margin-bottom:1rem;background:var(--bg-2)}
.team--1,.team--2{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:clamp(1.4rem,3vw,2.4rem)}
.team--1 .member figcaption p,.team--2 .member figcaption p{font-size:.95rem;line-height:1.55;margin-top:.2rem}
.team--3{grid-template-columns:repeat(3,minmax(0,320px));justify-content:center;gap:clamp(1.2rem,2.5vw,2rem)}
.team--3 .member figcaption p{font-size:.92rem;line-height:1.55;margin-top:.2rem}
.member__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.member__initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Sora";font-weight:700;font-size:clamp(2.6rem,6vw,4.2rem);letter-spacing:-.04em;color:var(--ink);background:linear-gradient(160deg,var(--bg-2),rgba(232,93,4,.14))}
.member figcaption b{display:block;font-family:"Sora";font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.member figcaption span{display:block;font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:.3rem 0 .5rem}
.member figcaption p{color:var(--muted);font-size:.88rem}

/* PRODUCT DETAIL — "what you get" / "ideal for" two-column split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,6rem);max-width:var(--wrap-wide);margin:0 auto;align-items:start}
.split h2{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:1rem}
.split>div>p{color:var(--muted);font-size:1rem;max-width:52ch;margin-bottom:1.6rem}
.checklist{list-style:none;margin:0 0 1.5rem;padding:0;border-top:1px solid var(--line)}
.checklist li{display:flex;align-items:baseline;gap:.75rem;padding:.85rem 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:.98rem;transition:padding-left .3s var(--ease)}
.checklist li:hover{padding-left:.5rem}
.checklist li span{color:var(--accent-2);font-size:.8rem}
.chips--left{justify-content:flex-start;margin:0;max-width:none}

/* WORK PAGE filter */
.work__filter{display:flex;flex-wrap:wrap;gap:.5rem;max-width:var(--wrap-wide);margin:0 auto clamp(1.2rem,2.5vw,2rem)}
.work__filter .chip{cursor:pointer;font-family:inherit}
.work__filter .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.wtile.is-hidden{display:none}

/* CONTACT tweaks */
.contact__h2{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.045em;line-height:1.02;margin-bottom:1rem}
.contact__lead{color:var(--muted)}
.mapwrap{margin-top:1.6rem;border-radius:20px;overflow:hidden;height:240px;background:var(--bg-2);display:grid;place-items:center;color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:1rem}
.mapwrap--live{height:300px;padding:0}
.mapwrap--live iframe{display:block;width:100%;height:100%}
.form__legal{grid-column:1/-1;font-size:.76rem;color:var(--muted);margin-top:.4rem}
.form__legal a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}

/* SELECTED WORK — asymmetric editorial gallery. Tiles are deliberately
   different sizes; equal cards are what made this read as a template. */
.work__grid{max-width:var(--wrap-wide);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,22vw,280px);grid-auto-flow:row dense;gap:clamp(.9rem,2vw,1.6rem)}
.wtile{position:relative;border-radius:20px;overflow:hidden;border:none;box-shadow:none;transition:transform .5s var(--ease)}
.wtile--tall{grid-row:span 2}
.wtile--wide{grid-column:span 2}
.wtile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--bg-2);transition:transform .9s var(--ease)}
.wtile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,28,52,0) 34%,rgba(6,28,52,.42) 62%,rgba(6,28,52,.88))}
.wtile__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.3rem 1.4rem;font-family:"Sora";font-weight:700;font-size:clamp(.95rem,1.5vw,1.2rem);letter-spacing:-.025em;color:#fff;text-shadow:0 1px 12px rgba(6,28,52,.6)}
.wtile:hover .wtile__img{transform:scale(1.05)}
.wtile__cat{position:absolute;top:1rem;left:1rem;z-index:2;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(252,251,248,.92);padding:.4rem .7rem;border-radius:100px;backdrop-filter:blur(6px)}

/* TESTIMONIAL — one large editorial pull-quote, portrait alongside */
.quotes{text-align:center}
.quotes__viewport{max-width:960px;margin:0 auto;overflow:hidden}
.quotes__track{display:flex;width:100%;transition:transform .7s var(--ease)}
.qcard{flex:0 0 100%;width:100%;min-width:0;box-sizing:border-box;padding:0 1rem}
.qcard p{font-family:"Sora";font-weight:700;font-size:clamp(1.3rem,3vw,2.15rem);line-height:1.22;letter-spacing:-.035em;margin-bottom:2rem;color:var(--ink);max-width:22ch;margin-left:auto;margin-right:auto}
.qcard footer{color:var(--muted);font-size:.88rem;display:flex;align-items:center;justify-content:center;gap:.9rem}
.qcard footer span{text-align:left}
.qcard footer b{color:var(--ink);display:block;font-family:"DM Sans",sans-serif;font-weight:600}
.qcard__av{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.quotes__dots{display:flex;gap:.55rem;justify-content:center;margin-top:2.4rem}
.quotes__dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(6,28,52,.14);transition:.3s}
.quotes__dots button.on{background:var(--accent);width:26px;border-radius:100px}

/* FAQ — numbered index, large type, generous rows */
.faq{max-width:900px;margin:0 auto;counter-reset:faq}
.faq__item{border-top:1px solid var(--line);counter-increment:faq}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__q{width:100%;background:none;border:none;color:var(--ink);text-align:left;font-family:"Sora";font-weight:700;font-size:clamp(1.02rem,1.9vw,1.35rem);letter-spacing:-.028em;line-height:1.3;padding:1.7rem 3rem 1.7rem 0;position:relative;display:flex;align-items:baseline;gap:1.4rem;transition:color .3s}
.faq__q::before{content:counter(faq,decimal-leading-zero);flex:0 0 auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:.78rem;letter-spacing:.06em;color:var(--muted);transition:color .3s}
.faq__q:hover{color:var(--accent)}
.faq__q:hover::before{color:var(--accent)}
.faq__q::after{content:"+";position:absolute;right:.4rem;top:1.5rem;font-size:1.5rem;font-weight:400;color:var(--accent);transition:transform .35s var(--ease)}
.faq__item.open .faq__q::after{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{color:var(--muted);font-size:1rem;padding:0 2rem 1.7rem 3.2rem}

/* CTA BAND — cinematic. Full-bleed photograph, navy wash, amber glow,
   and the largest type on the page. This is the closing argument. */
.ctaband{position:relative;padding:clamp(5rem,12vw,10rem) var(--gutter);text-align:center;overflow:hidden;background:var(--ink);color:var(--bg);isolation:isolate}
.ctaband::before{content:"";position:absolute;inset:0;z-index:-2;background:url("../img/truck-blue.jpg") center/cover no-repeat;opacity:.34;filter:grayscale(.3)}
.ctaband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,28,52,.78),rgba(6,28,52,.92))}
.ctaband__glow{position:absolute;z-index:0;width:70vw;height:70vw;left:50%;top:-32%;transform:translateX(-50%);background:radial-gradient(circle,rgba(245,160,5,.20),transparent 62%);filter:blur(30px);pointer-events:none}
.ctaband__inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.ctaband h2{font-size:clamp(2.3rem,6.4vw,4.6rem);font-weight:800;line-height:.98;letter-spacing:-.05em;margin-bottom:1.4rem;color:#fff}
.ctaband .hl{color:var(--accent-2)}
.ctaband p{color:rgba(252,251,248,.7);margin-bottom:2.6rem;font-size:1.08rem;max-width:52ch;margin-left:auto;margin-right:auto}
.ctaband__actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.ctaband .btn{border-color:rgba(252,251,248,.34);color:#fff}
.ctaband .btn::before{background:#fff}
.ctaband .btn:hover{color:var(--ink);border-color:transparent}
.ctaband .btn--solid{background:var(--accent);border-color:transparent;color:#fff}
.ctaband .btn--solid::before{background:#fff}
.ctaband .btn--solid:hover{color:var(--ink)}

/* QUOTE BUILDER */
.qb{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr 330px;gap:1.8rem;align-items:start}
.qb__main{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.3rem,3vw,2.1rem);background:var(--panel);box-shadow:var(--shadow-sm)}
.qb__steps{display:flex;gap:.5rem;margin-bottom:1.8rem;flex-wrap:wrap}
.qb__steps span{font-size:.76rem;color:var(--muted);padding:.45rem .85rem;border:1px solid var(--line);border-radius:100px;transition:.3s}
.qb__steps span.on{color:#fff;background:var(--grad);border-color:transparent}
.qb__group{margin-bottom:1.8rem}
.qb__group h3{font-family:"Sora";font-size:1.05rem;margin-bottom:.25rem}
.qb__group>p{color:var(--muted);font-size:.84rem;margin-bottom:1rem}
.qb__opts{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:.25s var(--ease);background:#fff}
.opt:hover{border-color:rgba(232,93,4,.4);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt__name{font-size:.89rem;margin-right:auto}
.opt.sel{border-color:var(--accent);background:var(--tint)}
.opt__check{width:19px;height:19px;border-radius:6px;border:1px solid var(--line);flex-shrink:0;display:grid;place-items:center;font-size:.75rem;color:#fff;transition:.25s var(--ease)}
.opt.sel .opt__check{background:var(--accent);border-color:transparent}
.opt.sel .opt__check::after{content:"✓"}
.qb__fields{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.qb__side{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;background:linear-gradient(165deg,rgba(232,93,4,.07),#fff);box-shadow:var(--shadow-md)}
.qb__side h4{font-family:"Sora";font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.qb__lines{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem;font-size:.83rem;max-height:220px;overflow:auto}
.qb__line{display:flex;justify-content:space-between;color:var(--muted)}
.qb__line b{color:var(--muted);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding-left:.8rem}
.qb__count{border-top:1px solid var(--line);padding-top:1.1rem;display:flex;justify-content:space-between;align-items:baseline}
.qb__count span{color:var(--muted);font-size:.82rem}
.qb__count b{font-family:"Sora";font-size:1.6rem;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.qb__note{font-size:.7rem;color:var(--muted);margin-top:.7rem;line-height:1.5}
.qb__empty{color:var(--muted);font-size:.83rem}

/* FORM FIELDS */
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field textarea,.field select{width:100%;background:#fff;border:1px solid var(--line);border-radius:13px;padding:1.25rem 1rem .55rem;color:var(--ink);font-family:inherit;font-size:.94rem;transition:border-color .3s,background .3s,box-shadow .3s;resize:vertical}
.field select{padding-top:1.4rem;appearance:none}
.field select option{background:#fff;color:var(--ink)}
.field textarea{padding-top:1.5rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(232,93,4,.10)}
.field label{position:absolute;left:1rem;top:1rem;color:var(--muted);font-size:.9rem;pointer-events:none;transition:.25s var(--ease)}
.field .label--static,
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:.4rem;font-size:.64rem;letter-spacing:.05em;color:var(--accent-ink)}
.field.is-err input,.field.is-err textarea,.field.is-err select{border-color:#d92d20;box-shadow:0 0 0 4px rgba(217,45,32,.10)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{grid-column:1/-1;font-size:.85rem;margin-top:.2rem;min-height:1.2em}
.formnote:empty{display:none}
.formnote.is-ok{color:var(--accent-ink);font-weight:600}
.formnote.is-err{color:#b42318;font-weight:600}

/* CONTACT */
.contact__inner{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start;max-width:var(--wrap);margin:0 auto}
.contact__facts{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.8rem}
.cfact{display:flex;gap:.9rem;align-items:flex-start}
.cfact__ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--tint);border:1px solid var(--line);color:var(--accent);flex-shrink:0}
.cfact b{display:block;font-family:"Sora";font-size:.95rem}
.cfact span{color:var(--muted);font-size:.87rem}
.contact__form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.contact__form .btn--block,.contact__form .field--full{grid-column:1/-1}
.mapwrap{margin-top:1.3rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:200px;background:linear-gradient(135deg,#f1ede7,#faf9f7);display:grid;place-items:center;color:var(--muted);font-size:.83rem}

/* FOOTER — dark close. Navy ground, one large statement, then the links. */
.footer{padding:clamp(3.5rem,8vw,6rem) var(--gutter) 2.2rem;background:var(--ink);color:var(--bg);border-top:none}
.footer__big{max-width:var(--wrap);margin:0 auto;font-size:clamp(2.1rem,7vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:.98;text-align:left;color:#fff;-webkit-text-stroke:0}
.footer__big span{color:var(--accent-2);-webkit-text-stroke:0}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:2.4rem;margin:clamp(2.6rem,6vw,4.5rem) auto 0;max-width:var(--wrap);padding-top:clamp(2.2rem,5vw,3.4rem);border-top:1px solid rgba(252,251,248,.14)}
.footer__col{display:flex;flex-direction:column;gap:.55rem}
.footer__col a{color:rgba(252,251,248,.62);font-size:.9rem;transition:color .3s;width:fit-content}
.footer__col a:hover{color:#fff}
.footer .eyebrow{color:rgba(252,251,248,.5)}
.footer__tagline{color:rgba(252,251,248,.62);font-size:.92rem;margin-bottom:1.2rem;max-width:38ch}
.footer__socials{display:flex;gap:1.2rem}
.footer__socials a{position:relative}
.footer__socials a::after,.footer__mail::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--accent);transition:width .3s}
.footer__socials a:hover::after,.footer__mail:hover::after{width:100%}
.footer__addr{color:rgba(252,251,248,.48);font-size:.87rem}
.footer__mail{font-family:"Sora";font-weight:700;font-size:1.06rem;letter-spacing:-.02em;color:#fff !important;position:relative}
.footer__phone{color:rgba(252,251,248,.62);font-size:.92rem}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:1.8rem;border-top:1px solid rgba(252,251,248,.14);color:rgba(252,251,248,.44);font-size:.78rem;max-width:var(--wrap);margin-left:auto;margin-right:auto}
.footer__base a{color:var(--accent-2)}

/* REVEAL + STAGGER */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
/* Headings rise a little further and a touch slower. They must NOT be clip-path'd:
   IntersectionObserver measures the element's clipped box, and a fully clipped
   heading has an empty box, so it would never be seen as intersecting and never reveal. */
h1.reveal,h2.reveal{transform:translateY(34px);transition-duration:.9s}

/* RESPONSIVE */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:2.6rem}
  .hero{min-height:0;padding-top:8rem}
  .hero__media{height:clamp(320px,48vw,460px)}
  .hero__sub{max-width:56ch}
}
@media (max-width:980px){
  .contact__inner,.qb,.phead,.about__grid,.tsplit__grid,.sectors,.values,.split{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .workshop__grid{grid-template-columns:1fr 1fr}
  .workshop__tile--wide{grid-column:span 2}
  .team{grid-template-columns:1fr 1fr}
  .stage{grid-template-columns:auto 1fr}
  .stage__media{grid-column:1/-1;height:clamp(200px,44vw,340px)}
  .about__media{height:clamp(300px,56vw,460px)}
  .tsplit__media{height:clamp(260px,50vw,420px)}
  .services__grid{grid-template-columns:1fr}
  .svc{min-height:clamp(320px,56vw,440px)}
  .svc__desc{max-height:none;opacity:1;margin-bottom:1rem}
  .svc__arrow{transform:none;opacity:1}
  .services__head,.work__head{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .work__feature{height:clamp(240px,52vw,420px)}
  .pgrid,.fgrid{grid-template-columns:1fr 1fr}
  .fcard:not(:nth-child(3n))::after{display:none}
  .fcard:nth-child(odd)::after{display:block}
  .phead__media{order:-1;aspect-ratio:16/10}
  .qb__side{position:static}
}
/* Burger menu from 1080px down: between ~820 and 1080px the six desktop links plus the CTA
   no longer fit on one line (links wrapped, CTA clipped), so the sheet menu takes over earlier. */
@media (max-width:1080px){
  /* full-screen menu: navy sheet, links stagger in one after another */
  .nav__links{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:.2rem;padding:6rem var(--gutter) 3rem;background:var(--ink);transform:translateY(-100%);transition:transform .55s var(--ease);z-index:850;overflow:auto}
  .nav.open .nav__links{transform:translateY(0)}
  /* A scrolled header carries backdrop-filter, which makes it the containing block for the
     fixed menu sheet — the sheet would then be clipped to the 66px bar. Drop it while open. */
  .nav.open,.nav.open.scrolled,.nav--dark.open.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border-color:transparent;box-shadow:none}
  .nav.open .nav__links{height:100dvh;max-height:100dvh}
  .nav__links a{font-family:"Sora",sans-serif;font-size:clamp(2rem,9vw,3.2rem);font-weight:800;letter-spacing:-.045em;line-height:1.1;color:rgba(252,251,248,.92);opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .55s var(--ease),color .3s}
  .nav__links a::after{display:none}
  .nav__links a.is-active{color:var(--accent-2)}
  .nav.open .nav__links a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0) * 60ms)}
  .nav__links-cta{display:inline-flex;font-family:"DM Sans",sans-serif !important;font-size:1rem !important;font-weight:600 !important;letter-spacing:0 !important;margin-top:1.8rem;color:#fff !important}
  .nav.open .nav__burger span{background:#fff}
  .nav__burger{display:flex;z-index:900;flex:0 0 auto;margin-left:auto}
  .nav__cta{display:none}
  .nav__brand img,.nav.scrolled .nav__brand img{height:28px}
}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr);row-gap:2.6rem}
  .stat:nth-child(odd){padding-left:0}
  .stat:nth-child(even){padding-right:0}
  .stat:nth-child(3)::before{display:none}
  .pspecs{grid-template-columns:repeat(2,1fr)}
  .work__grid{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .work__grid--three{grid-auto-rows:190px}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .pgrid,.fgrid,.contact__form,.qb__opts,.qb__fields,.pspecs{grid-template-columns:1fr}
  .fcard::after{display:none !important}
  .work__grid{grid-template-columns:1fr}
  .wtile--wide,.wtile--tall{grid-column:auto;grid-row:auto}
  .footer__grid,.footer__base{grid-template-columns:1fr;text-align:left}
  .pstep{grid-template-columns:1fr;gap:.6rem}
  .sectors__list{columns:1}
  .stage{grid-template-columns:1fr}
  .timeline,.workshop__grid,.team{grid-template-columns:1fr}
  .workshop__tile--wide{grid-column:auto}
  .value{grid-template-columns:1fr;gap:.4rem}
  .hero__mini{gap:1.4rem}
  .hero__stamp{left:1rem;bottom:1rem;padding:.8rem 1.1rem}
  .hero__actions .btn{width:100%}
  .faq__q{gap:.9rem;padding-right:2.2rem}
  .faq__a p{padding-left:0}
  .nav__brand img,.nav.scrolled .nav__brand img{height:24px}
}
/* Small teams on phones: one compact row per person — round avatar left, text right —
   instead of a stack of full-width 4:5 portrait tiles. */
@media (max-width:820px){
  .team--1,.team--2,.team--3{grid-template-columns:1fr;max-width:560px;gap:.9rem}
  .team--1 .member,.team--2 .member,.team--3 .member{display:grid;grid-template-columns:76px 1fr;gap:1rem;align-items:start;padding:1rem;border:1px solid rgba(6,28,52,.1);border-radius:18px;background:rgba(255,255,255,.35)}
  .team--1 .member__media,.team--2 .member__media,.team--3 .member__media{aspect-ratio:1;border-radius:50%;margin:0}
  .team--1 .member__initials,.team--2 .member__initials,.team--3 .member__initials{font-size:1.45rem}
  .team--1 .member figcaption,.team--2 .member figcaption,.team--3 .member figcaption{min-width:0}
  .team--1 .member figcaption span,.team--2 .member figcaption span,.team--3 .member figcaption span{margin:.2rem 0 .4rem}
  .team--1 .member figcaption p,.team--2 .member figcaption p,.team--3 .member figcaption p{font-size:.88rem;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .hero__title .word{transform:none}
}

/* =========================================================================
   FOOD-TRUCK SKIN — the reference's DNA (textured deep ground, sun-rays,
   condensed uppercase display type, script accents, ribbon banners, round
   stickers, paper cards, illustrated hero) mapped onto the Cartsmith palette.
   Sits after the base rules and overrides them by cascade.
   ========================================================================= */
:root{
  --bg:#f4ecdc;            /* cream paper */
  --bg-2:#ebdfc6;          /* darker paper */
  --panel:#fbf6ea;
  --muted:#6b6459;
  --line:rgba(6,28,52,.16); --line-2:rgba(6,28,52,.08);
  --navy:#061c34; --navy-2:#0b2745;
  --wood:
    repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 3px,transparent 3px 7px),
    linear-gradient(180deg,#0b2745,#061c34 60%,#04162b);
  --rays:repeating-conic-gradient(from 0deg at 50% 38%,rgba(255,255,255,.045) 0 5deg,transparent 5deg 11deg);
  --paper-tex:
    radial-gradient(circle at 12% 18%,rgba(6,28,52,.035),transparent 45%),
    radial-gradient(circle at 88% 82%,rgba(232,93,4,.05),transparent 40%);
}
body{background:var(--bg) var(--paper-tex)}
.grain{opacity:.06}

/* --- type: condensed display, script accent --- */
h1,h2,h3,h4,.footer__big,.stat__num,.preloader__word,.marquee__track span,.work__feature-cap b,.wtile__cap,.faq__q,.pcard h3,.svc h3,.pstep__body h3,.stage__body h2,.value h3,.milestone h3,.sectors__list li,.fcard h3,.qb__group h3,.phead h1,.cfact b,.member figcaption b{
  font-family:"Bebas Neue","Oswald",Impact,sans-serif;font-weight:400;letter-spacing:0;word-spacing:.05em;text-transform:uppercase;line-height:.94
}
.hl,em{font-family:"Kaushan Script",cursive;font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--accent-2);font-size:1.02em;padding-right:.08em}
/* the editorial base rules carry negative tracking; condensed type needs the opposite,
   and these selectors outrank the generic list above, so they are re-stated here */
.hero__title,.phero h1,.phead h1,.section-head h2,.about__copy h2,.values__head h2,.sectors__head h2,.contact__h2,.timeline__head h2,.work__head h2,.services__head h2,.split h2,.stage__body h2,.ctaband h2,.footer__big,.svc h3,.pstep__body h3,.pcard h3,.fcard h3,.value h3,.milestone h3,.faq__q,.work__feature-cap b,.wtile__cap,.stat__num{letter-spacing:0;word-spacing:.05em}
.section-head h2{font-size:clamp(2.8rem,6.4vw,5rem)}
.about__copy h2,.values__head h2,.sectors__head h2,.contact__h2,.timeline__head h2,.work__head h2,.services__head h2{font-size:clamp(2.8rem,6vw,5.2rem)}
.phero h1{font-size:clamp(3.4rem,8vw,6.8rem);max-width:none}
.split h2,.stage__body h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.svc h3{font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:0}
.pcard h3{font-size:clamp(1.6rem,2.2vw,2rem)}
.fcard h3,.value h3,.milestone h3{font-size:1.55rem}
.faq__q{font-size:clamp(1.35rem,2.4vw,1.8rem);letter-spacing:0}
.pstep__body h3{font-size:clamp(1.8rem,3vw,2.6rem)}
.stat__num{font-size:clamp(3.4rem,7vw,5.6rem);color:var(--accent);letter-spacing:0}
.stat__label{color:var(--ink);font-weight:500}
.sectors__list li{font-size:1.35rem;letter-spacing:0}
.cfact b{font-size:1.25rem;letter-spacing:0}
.btn{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.25rem;letter-spacing:.1em;border-radius:6px;padding:.9rem 1.7rem}
.btn--lg{font-size:1.45rem;padding:1rem 2.2rem}
.btn--solid{box-shadow:0 8px 0 -3px rgba(6,28,52,.35),0 16px 34px -20px rgba(232,93,4,.9)}
/* Desktop-only: the sheet menu (≤1080px) keeps its own big Sora links — this rule used to
   override them because it sits later in the file, leaving the mobile sheet with 18px links. */
@media (min-width:1081px){
  .nav__links a{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.15rem;letter-spacing:.12em;font-weight:400}
}
.nav__cta{font-size:1.1rem;padding:.6rem 1.3rem}
.preloader__word{font-size:1.6rem;letter-spacing:.3em;text-indent:.3em}

/* --- ribbon eyebrows --- */
.eyebrow{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.05rem;font-weight:400;letter-spacing:.16em;color:var(--ink);background:var(--accent-2);padding:.42rem 1.5rem .36rem;margin-bottom:1.5rem;gap:0;
  clip-path:polygon(0 0,100% 0,calc(100% - .7rem) 50%,100% 100%,0 100%,.7rem 50%);box-shadow:none}
.eyebrow::before{display:none}
.footer .eyebrow{background:var(--accent-2);color:var(--ink);padding:.42rem 1.2rem .36rem;align-self:flex-start}

/* --- navy wood bands with rays --- */
.band,.phero,.ctaband,.footer,.hero,.nav--dark.scrolled{background:var(--wood);background-color:var(--navy)}
.hero,.phero,.ctaband{position:relative;isolation:isolate}
.hero::before,.phero::before,.ctaband::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rays);pointer-events:none}
.ctaband::before{background:var(--rays);opacity:1;filter:none}
.ctaband::after{background:linear-gradient(180deg,rgba(6,28,52,.25),rgba(6,28,52,.6))}
.band{color:var(--bg)}
.band .section-head h2,.band h2,.band h3,.band .pstep__body h3{color:#fff}
.band .section-head__sub,.band p,.band .pstep__body p{color:rgba(244,236,220,.72)}
.band .pstep{border-color:rgba(244,236,220,.14)}
.band .pstep:hover{background:rgba(255,255,255,.04)}
.band .pstep__no{color:rgba(244,236,220,.28)}
.band .pstep:hover .pstep__no{color:var(--accent-2)}
.band .clients__row span{color:#fff;opacity:.6}
.band .workshop__tile{box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.band .btn--ghost{border-color:rgba(244,236,220,.4);color:#fff}
.band .btn--ghost:hover{color:var(--ink)}
.band .btn--ghost::before{background:#fff}
.phero__glow{background:radial-gradient(circle,rgba(245,160,5,.22),transparent 60%)}

/* --- hero: illustration-led, like the reference truck hero --- */
.hero{color:var(--bg);padding-top:8rem}
.hero__canvas{display:none}
.hero__glow{background:radial-gradient(circle,rgba(245,160,5,.16),transparent 62%)}
.hero__badge{background:var(--accent-2);color:var(--ink);border:none;font-family:"Bebas Neue",Impact,sans-serif;font-size:1.05rem;letter-spacing:.14em;padding:.42rem 1.4rem .36rem;clip-path:polygon(0 0,100% 0,calc(100% - .7rem) 50%,100% 100%,0 100%,.7rem 50%);backdrop-filter:none}
.hero__badge .pulse{display:none}
.hero__title{font-size:clamp(4rem,9.6vw,8.4rem);color:#fff;letter-spacing:0;line-height:.9;margin-bottom:1.4rem}
.hero__title .hl{font-size:.92em;color:var(--accent-2)}
.hero__sub{color:rgba(244,236,220,.78);font-size:1.12rem}
.hero__mini{border-top-color:rgba(244,236,220,.16)}
.hero__mini div{color:rgba(244,236,220,.65)}
.hero__mini b{color:var(--accent-2);font-family:"Bebas Neue",Impact,sans-serif;font-size:2rem;letter-spacing:0}
.hero .btn--ghost{border-color:rgba(244,236,220,.45);color:#fff}
.hero .btn--ghost::before{background:#fff}
.hero .btn--ghost:hover{color:var(--ink)}
/* the hero media is a photograph of a real build with the brand mark overhanging its
   bottom edge, so the carts read as rolling out of the picture. The padding under the
   card is the room the mark hangs into — nothing below it moves when it floats. */
.hero__media{height:auto;min-height:0;border-radius:0;overflow:visible;box-shadow:none;display:block;padding-bottom:clamp(2.6rem,4.5vw,4rem)}
.hero__shot{position:relative;border-radius:10px;overflow:hidden;border:3px solid rgba(244,236,220,.16);box-shadow:0 44px 60px -30px rgba(0,0,0,.85)}
.hero__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,28,52,0) 48%,rgba(6,28,52,.72));pointer-events:none}
.hero__shot-img{display:block;width:100%;height:clamp(280px,34vw,440px);object-fit:cover}
/* the translateX sits on the element as well as in the keyframes: reduced motion kills
   the animation with !important, and without it the mark would jump off-centre. */
.hero__illo{width:min(80%,460px);height:auto;position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 34px 40px rgba(0,0,0,.55));animation:heroRoll 6s ease-in-out infinite}
@keyframes heroRoll{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}
/* the mark carries its own ground line, so no separate road is drawn */
.hero__road{display:none}
.hero__stamp{display:none}
.hero__scroll{display:none}
.services__head,.work__head{flex-direction:column;align-items:flex-start;gap:.2rem}
.services__head .eyebrow,.work__head .eyebrow{margin-bottom:1rem}
.work__head .btn{margin-top:1.2rem}

/* --- round stickers --- */
.sticker{position:absolute;z-index:3;width:clamp(96px,10vw,132px);aspect-ratio:1;border-radius:50%;background:var(--accent-2);color:var(--ink);display:grid;place-content:center;text-align:center;font-family:"Bebas Neue",Impact,sans-serif;line-height:1;transform:rotate(-10deg);box-shadow:0 18px 30px -16px rgba(0,0,0,.7);outline:5px solid var(--accent-2);border:2px dashed rgba(6,28,52,.4)}
.sticker b{display:block;font-size:clamp(1.9rem,2.8vw,2.6rem);font-weight:400}
.sticker span{display:block;font-size:.72rem;letter-spacing:.14em;margin-top:.15rem}
.sticker--a{top:-4%;right:0}
/* clear of the mark, which now overhangs the bottom centre of the photo */
.sticker--b{top:46%;left:-2%;transform:rotate(8deg);background:#fff;outline-color:#fff}
.sticker--b b{color:var(--accent)}

/* --- marquee as an amber ribbon --- */
.marquee{background:var(--accent-2);border:none;padding:.75rem 0}
.marquee__track span{color:var(--ink);-webkit-text-stroke:0;font-size:clamp(1.3rem,2.8vw,2rem);letter-spacing:.1em}

/* --- paper cards with a torn edge --- */
.pcard{background:var(--panel);padding:.8rem .8rem 1.3rem;border:1px solid var(--line);border-radius:6px 6px 0 0;box-shadow:0 14px 30px -22px rgba(6,28,52,.6);position:relative}
.pcard::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:linear-gradient(135deg,var(--panel) 50%,transparent 50%) 0 0/18px 9px repeat-x,linear-gradient(-135deg,var(--panel) 50%,transparent 50%) 9px 0/18px 9px repeat-x}
.pcard__media{border-radius:4px;margin-bottom:1rem}
.pcard__tag{border-radius:3px;background:var(--accent-2);color:var(--ink);font-family:"Bebas Neue",Impact,sans-serif;font-size:.85rem;letter-spacing:.1em;padding:.3rem .7rem .22rem;transform:rotate(-3deg);backdrop-filter:none;left:.7rem;top:.7rem}
.pcard h3,.pcard p,.pcard__feats,.pcard__foot{padding:0 .3rem}
.pcard__foot{border-top:1px dashed var(--line)}
.pcard__price{font-family:"Bebas Neue",Impact,sans-serif;font-size:.95rem;letter-spacing:.12em;color:var(--accent)}
.pgrid{gap:clamp(1.6rem,3vw,2.8rem)}

/* --- spec/feature tiles as paper --- */
.pspec{background:var(--panel);border-color:var(--line);border-radius:6px}
.fcard{background:none}
.fcard__icon{color:var(--accent)}
.chip{background:var(--panel);border-radius:4px}
.work__filter .chip.on{background:var(--accent-2);color:var(--ink);border-color:var(--accent-2)}

/* --- work / gallery --- */
.wtile,.work__feature,.workshop__tile,.about__media,.tsplit__media,.stage__media,.svc,.hero__media--photo{border-radius:8px}
.wtile__cat,.about__label,.work__feature-cat{font-family:"Bebas Neue",Impact,sans-serif;font-size:.9rem;letter-spacing:.12em;border-radius:3px;background:var(--accent-2);color:var(--ink);padding:.3rem .65rem .22rem;transform:rotate(-3deg)}
.about__label--br{background:#fff;color:var(--ink);transform:rotate(3deg)}
.work__feature-cat{position:static;transform:none;display:inline-block;margin-bottom:.6rem}
.work__feature-cap b{font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:0}
.wtile__cap{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:0}
.svc__no,.milestone__year,.value__no,.stage__no{font-family:"Bebas Neue",Impact,sans-serif;letter-spacing:.14em}
.stage__no{font-size:clamp(3.6rem,9vw,7rem)}

/* --- services blocks: navy paper --- */
.svc{border:3px solid rgba(244,236,220,.12)}
.svc__arrow{border-radius:4px}

/* --- quotes / faq --- */
.qcard p{font-family:"DM Sans",sans-serif;font-weight:500;font-size:clamp(1.25rem,2.4vw,1.8rem);letter-spacing:-.01em;line-height:1.35}
.tsplit__stars{font-size:1.2rem}
.faq__q::before{font-family:"Bebas Neue",Impact,sans-serif;font-size:1rem;letter-spacing:.1em;color:var(--accent)}
.faq__item{border-color:var(--line)}

/* --- CTA + footer --- */
.ctaband h2{font-size:clamp(3.4rem,9vw,7.4rem);letter-spacing:0}
.ctaband .hl{color:var(--accent-2)}
.footer__big{font-size:clamp(3rem,8vw,6.4rem);letter-spacing:0}
.footer__big span{color:var(--accent-2)}
.footer__mail{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.4rem;letter-spacing:.06em;font-weight:400}

/* --- lightbox, wa --- */
.lb__cap{font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:0}
.lb__cap small{font-family:"Bebas Neue",Impact,sans-serif;font-size:.85rem}
/* WhatsApp FAB — an icon, not a banner. The green slab competed with the page's own
   CTAs; a circle sits quietly in the corner and opens to its label on hover, where
   there is a pointer to hover with. Touch keeps the circle; aria-label carries the name. */
.wa{width:60px;height:60px;padding:0;gap:0;border-radius:50%;justify-content:center;overflow:hidden;white-space:nowrap;
  font-family:"Bebas Neue",Impact,sans-serif;font-size:1.15rem;letter-spacing:.1em}
.wa span{max-width:0;opacity:0;transition:max-width .38s var(--ease),opacity .22s,margin-left .38s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .wa{transition:transform .6s var(--ease) .8s,width .38s var(--ease),border-radius .38s var(--ease),box-shadow .3s}
  .wa:hover,.wa:focus-visible{width:236px;border-radius:100px;justify-content:flex-start;padding-left:1.05rem}
  .wa:hover span,.wa:focus-visible span{max-width:12rem;opacity:1;margin-left:.7rem}
}

@media (max-width:1080px){
  /* Stacked, the media used to land under the whole left column — a phone had to
     scroll past the flags, the buttons and the stats before the photograph appeared.
     display:contents promotes the copy to grid items so the photo can be ordered
     straight under the sub-heading; every child keeps its own margins, so the grid
     gap goes to 0 rather than doubling the rhythm. */
  .hero__grid{gap:0}
  .hero__content{display:contents}
  .hero__badge{order:1}
  .hero__title{order:2}
  .hero__sub{order:3;margin-bottom:1.8rem}
  .hero__media{order:4;min-height:0;margin:0 0 2.4rem}
  .hero__flags{order:5}
  .hero__actions{order:6}
  .hero__mini{order:7}
  .hero__shot-img{height:clamp(240px,42vw,380px)}
  .hero__illo{width:min(74%,420px)}
  .sticker{width:clamp(84px,14vw,110px)}
}
@media (max-width:560px){
  .hero__title{font-size:clamp(3.4rem,17vw,5rem)}
  .sticker--a{top:-8%}
}

/* --- desktop bar between the burger breakpoint and ~1220px (iPad Pro landscape, small laptops):
   smaller logo, closer links, and nothing in the bar is allowed to wrap. --- */
.nav__links a,.nav__cta{white-space:nowrap}
.nav__cta{flex:0 0 auto}
@media (min-width:1081px) and (max-width:1220px){
  .nav{gap:1.2rem}
  .nav__links{gap:1.35rem}
  .nav__brand img,.nav.scrolled .nav__brand img{height:30px}
  .nav__cta{padding:.6rem 1rem;font-size:1rem}
}

/* =========================================================================
   WEBSITE-BRIEF ADDITIONS
   Enquiry list (wishlist cart), starting prices, trust signals, the Buyback
   Guarantee, the flagship block and the testimonials page.
   Appended after the food-truck skin so it inherits the same palette and
   overrides nothing above it.
   ========================================================================= */

/* --- header: enquiry-list badge ------------------------------------------ */
.nav__cart{position:relative;flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:6px;border:1px solid var(--line);color:var(--ink);transition:border-color .3s,background .3s,color .3s}
.nav--dark .nav__cart,.nav--dark.scrolled .nav__cart{border-color:rgba(244,236,220,.34);color:#fff}
.nav__cart:hover,.nav__cart.is-active{background:var(--accent-2);border-color:transparent;color:var(--ink)}
.nav__cart svg{width:21px;height:21px}
.nav__cart-n{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;border-radius:100px;background:var(--accent);color:#fff;font-family:"Bebas Neue",Impact,sans-serif;font-size:.85rem;line-height:21px;letter-spacing:.04em;text-align:center;box-shadow:0 2px 8px -2px rgba(232,93,4,.9)}
.nav__cart-n.is-empty{background:var(--muted);opacity:.55;box-shadow:none}
/* Phone bar: brand on the left, then the cart and the burger together on the
   right. The cart hides behind the open menu sheet rather than floating over it. */
@media (max-width:1080px){
  .nav{gap:.9rem}
  .nav__cart{margin-left:auto;width:40px;height:40px}
  .nav.open .nav__cart{opacity:0;pointer-events:none}
}
@media (min-width:1081px) and (max-width:1320px){.nav__links{gap:1.15rem}.nav__links a{font-size:1.05rem;letter-spacing:.08em}}

/* --- hero: the three above-the-fold highlights ---------------------------- */
.hero__flags{list-style:none;display:flex;flex-wrap:wrap;gap:.9rem;margin:0 0 1.7rem;padding:0}
.hero__flags li{flex:1 1 190px;min-width:0;padding:.85rem 1.05rem;border:1px solid rgba(244,236,220,.22);border-radius:6px;background:rgba(255,255,255,.045);backdrop-filter:blur(3px)}
.hero__flags-k{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.3rem}
.hero__flags b{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:1.7rem;letter-spacing:.02em;line-height:1.05;color:#fff;display:block}
.hero__flags a b{text-decoration:underline;text-decoration-color:rgba(245,160,5,.55);text-underline-offset:.22em}
.hero__flags a:hover b{color:var(--accent-2)}
.hero__flags em{display:block;font-family:"DM Sans",sans-serif;font-style:normal;font-size:.78rem;color:rgba(244,236,220,.66);margin-top:.15rem}
.hero__flags-terms{display:inline-block;margin-top:.25rem;font-size:.7rem;color:var(--accent-2);text-decoration:underline;text-underline-offset:.18em}
@media (max-width:560px){.hero__flags li{flex:1 1 100%}}

/* --- trust signals -------------------------------------------------------- */
.trustrow{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0}
.trustrow li{flex:1 1 150px;padding:.7rem 1rem;border:1px dashed var(--line);border-radius:6px;background:var(--panel)}
.trustrow span{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.trustrow b{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:1.15rem;letter-spacing:.05em;word-break:break-word}
.trustrow--wide{max-width:var(--wrap-wide);margin:0 auto}
/* GSTIN/CIN strip under the clients row — a full .section of air above it left a
   dead band between two one-line strips. The gutter stays, the vertical padding goes. */
.trust-strip{padding-top:0;padding-bottom:0}
.trustrow--dark{margin:1.4rem 0 1.6rem}
.trustrow--dark li{border-color:rgba(244,236,220,.24);background:rgba(255,255,255,.05)}
.trustrow--dark span{color:rgba(244,236,220,.6)}
.trustrow--dark b{color:#fff}
.trustrow--stack{flex-direction:column;margin:1.2rem 0}
.trustrow--stack li{flex:none}

/* --- buyback badge + notices --------------------------------------------- */
.bbadge{display:inline-block;background:var(--accent-2);color:var(--ink);font-family:"Bebas Neue",Impact,sans-serif;font-size:1rem;letter-spacing:.11em;padding:.3rem 1rem .24rem;clip-path:polygon(0 0,100% 0,calc(100% - .55rem) 50%,100% 100%,0 100%,.55rem 50%)}
.phead__buyback,.flagship__buy{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:0 0 1.3rem}
.phead__buyback a,.flagship__buy a{font-size:.78rem;color:var(--accent-2);text-decoration:underline;text-underline-offset:.2em}
.flagship__buy a{color:var(--accent-ink)}
.phead__range{margin:-.7rem 0 1.2rem;font-size:.82rem;color:rgba(244,236,220,.66)}
.phead__range b{color:#fff;font-weight:600}
.phead__sub-actions{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin-top:1.1rem;font-size:.82rem}
.phead__sub-actions a{color:var(--accent-2);text-decoration:underline;text-underline-offset:.22em}
.phead__sub-actions a:hover{color:#fff}
.phero__note{margin-top:1rem;font-size:.9rem;color:rgba(244,236,220,.72);max-width:62ch}
.phero__note b{color:#fff}

.notice{max-width:var(--wrap);margin:0 auto;border-left:4px solid var(--accent-2);background:var(--panel);border-radius:0 8px 8px 0;padding:1.1rem 1.4rem;box-shadow:var(--shadow-sm)}
.notice b{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.notice p{color:var(--ink-2);font-size:.94rem;margin:0}
.notice a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.notice--buyback{border-left-color:var(--accent)}
.notice--draft{border-left-color:#b42318;background:#fdf3f1;margin-bottom:2rem}
.notice--draft b{color:#b42318}

/* --- flagship block (homepage) ------------------------------------------- */
.flagship__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.8rem,4vw,4rem);align-items:center;max-width:var(--wrap-wide);margin:0 auto}
.flagship__media{position:relative;border-radius:8px;overflow:visible}
.flagship__img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;box-shadow:var(--shadow-lg)}
.flagship__sticker{position:absolute;right:-10px;top:-18px;z-index:3;width:clamp(96px,10vw,128px);aspect-ratio:1;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-content:center;text-align:center;font-family:"Bebas Neue",Impact,sans-serif;line-height:1;transform:rotate(9deg);box-shadow:0 18px 30px -16px rgba(0,0,0,.55);outline:5px solid var(--accent);border:2px dashed rgba(255,255,255,.55)}
.flagship__sticker b{display:block;font-size:clamp(1.35rem,2.1vw,1.75rem);font-weight:400}
.flagship__sticker span{display:block;font-size:.66rem;letter-spacing:.14em;margin-top:.1rem;opacity:.85}
.flagship__copy .checklist{margin-bottom:1.3rem}
@media (max-width:980px){.flagship__grid{grid-template-columns:1fr}}

/* --- product cards: price, flag and the add button ----------------------- */
.pcard--pick{padding-bottom:.8rem}
.pcard__hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pcard__flag{position:absolute;right:.7rem;top:.7rem;z-index:2;background:var(--accent);color:#fff;font-family:"Bebas Neue",Impact,sans-serif;font-size:.8rem;letter-spacing:.09em;padding:.28rem .65rem .2rem;border-radius:3px;transform:rotate(3deg)}
.pcard__range{padding:0 .3rem;margin-bottom:.9rem;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.06em;color:var(--muted)}
.pcard__add{position:relative;z-index:2;width:100%;margin-top:.9rem;padding:.72rem 1rem;border:1px solid var(--ink);border-radius:5px;background:none;color:var(--ink);font-family:"Bebas Neue",Impact,sans-serif;font-size:1.05rem;letter-spacing:.09em;transition:background .3s,color .3s,border-color .3s}
.pcard__add:hover{background:var(--ink);color:#fff}
.pcard__add.is-added{background:var(--accent-2);border-color:transparent;color:var(--ink)}
[data-enquiry-add].is-added{background:var(--accent-2);border-color:transparent;color:var(--ink)}
.btn[data-enquiry-add].is-added::before{background:var(--accent-2)}

/* --- toast --------------------------------------------------------------- */
.etoast{position:fixed;left:50%;bottom:clamp(1rem,4vw,2.2rem);z-index:900;display:flex;align-items:center;gap:.9rem;max-width:calc(100vw - 2rem);padding:.85rem 1.2rem;border-radius:6px;background:var(--ink);color:#fff;font-size:.9rem;box-shadow:0 24px 50px -22px rgba(0,0,0,.7);transform:translate(-50%,140%);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.etoast.in{transform:translate(-50%,0);opacity:1}
.etoast a{color:var(--accent-2);font-weight:600;white-space:nowrap;text-decoration:underline;text-underline-offset:.2em}
@media (max-width:560px){.etoast{bottom:5.2rem}}

/* --- enquiry page -------------------------------------------------------- */
.enq{display:grid;grid-template-columns:1fr 340px;gap:clamp(1.6rem,3.5vw,3rem);align-items:start;max-width:var(--wrap);margin:0 auto}
.enq__h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:0 0 1.1rem}
.enq__form>.enq__h2:not(:first-child){margin-top:2.6rem}
.enq__side{position:sticky;top:96px;border:1px solid var(--line);border-radius:8px;padding:1.5rem;background:var(--panel);box-shadow:var(--shadow-sm)}
.enq__side h4{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.enq__steps{list-style:none;counter-reset:s;margin:0 0 .4rem;padding:0}
.enq__steps li{counter-increment:s;position:relative;padding:0 0 1rem 2.1rem;border-bottom:1px dashed var(--line);margin-bottom:1rem}
.enq__steps li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.enq__steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;color:var(--accent)}
.enq__steps b{display:block;font-size:.94rem;margin-bottom:.15rem}
.enq__steps span{font-size:.82rem;color:var(--muted)}

.elines{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.4rem}
.eline{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.95rem 1.1rem;border:1px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:var(--shadow-sm)}
.eline__main{flex:1 1 210px;min-width:0}
.eline__main b{display:block;font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.03em;line-height:1.1}
.eline__main a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em}
.eline__main a:hover{color:var(--accent)}
.eline__price{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.1em;color:var(--accent)}
.eline__qty{display:flex;align-items:center;gap:.3rem;flex:0 0 auto}
.eqty{width:34px;height:34px;border:1px solid var(--line);border-radius:5px;background:none;color:var(--ink);font-size:1.05rem;line-height:1;display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s}
.eqty:hover{background:var(--ink);color:#fff;border-color:transparent}
.eline__qty input{width:52px;height:34px;text-align:center;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.85rem}
.eline__qty input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,93,4,.12)}
.eline__x{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:5px;background:none;color:var(--muted);font-size:.9rem;transition:background .25s,color .25s}
.eline__x:hover{background:#fdecea;color:#b42318}

.enq__addmore{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding-bottom:1.6rem;border-bottom:1px dashed var(--line)}
.enq__pick{flex:1 1 240px;min-width:0}
.enq__pick select{width:100%;height:46px;padding:0 1rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:.92rem;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.enq__pick select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,93,4,.12)}
.enq__addmore .btn{flex:0 0 auto}
.enq__clear{margin-left:auto;border:0;background:none;color:var(--muted);font-size:.8rem;text-decoration:underline;text-underline-offset:.2em}
.enq__clear:hover{color:#b42318}

.enq__empty{border:2px dashed var(--line);border-radius:10px;padding:clamp(1.8rem,4vw,3rem);text-align:center;background:var(--panel)}
.enq__empty h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:.7rem}
.enq__empty p{color:var(--muted);max-width:52ch;margin:0 auto 1.6rem}
.enq__empty .phead__actions{justify-content:center}

.enq__done{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:clamp(1.6rem,3.5vw,2.6rem);background:var(--panel);box-shadow:var(--shadow-md)}
.enq__tick{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem}
.enq__done h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:.7rem}
.enq__done p{color:var(--ink-2);margin-bottom:1.5rem;max-width:56ch}
@media (max-width:980px){.enq{grid-template-columns:1fr}.enq__side{position:static;order:2}}

/* --- testimonials page --------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.6vw,2rem);max-width:var(--wrap);margin:0 auto}
.tcard{position:relative;display:flex;flex-direction:column;padding:1.6rem 1.6rem 1.4rem;background:var(--panel);border:1px solid var(--line);border-radius:6px 6px 0 0;box-shadow:0 14px 30px -22px rgba(6,28,52,.6)}
.tcard::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:linear-gradient(135deg,var(--panel) 50%,transparent 50%) 0 0/18px 9px repeat-x,linear-gradient(-135deg,var(--panel) 50%,transparent 50%) 9px 0/18px 9px repeat-x}
.tcard__stars{color:var(--accent-2);font-size:1.05rem;letter-spacing:.12em;margin-bottom:.9rem}
.tcard blockquote p{font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.55;color:var(--ink-2);margin-bottom:1.4rem}
.tcard figcaption{display:flex;align-items:center;gap:.85rem;margin-top:auto;padding-top:1.1rem;border-top:1px dashed var(--line)}
.tcard__av{width:52px;height:52px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:var(--bg-2)}
.tcard__av--init{display:grid;place-items:center;background:var(--accent-2);color:var(--ink);font-family:"Bebas Neue",Impact,sans-serif;font-size:1.15rem;letter-spacing:.06em}
.tcard figcaption b{display:block;font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:1.2rem;letter-spacing:.05em;line-height:1.1}
.tcard figcaption em{display:block;font-family:"DM Sans",sans-serif;font-style:normal;font-size:.82rem;color:var(--muted)}
.tcard__city{display:inline-block;margin-top:.2rem;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tsplit__more{margin-top:1.2rem}
.tsplit__more a{color:var(--accent-2);font-weight:600;text-decoration:underline;text-underline-offset:.22em}
@media (max-width:760px){.tgrid{grid-template-columns:1fr}}

/* --- shared enquiry CTA band --------------------------------------------- */
.enqcta{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.4rem,3vw,3rem);align-items:center;max-width:var(--wrap);margin:0 auto;padding:clamp(1.6rem,3.5vw,2.6rem);border:2px dashed var(--line);border-radius:10px;background:var(--panel)}
.enqcta h2{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:.7rem}
.enqcta p{color:var(--muted);max-width:52ch}
.enqcta__actions{display:flex;flex-direction:column;gap:.7rem}
.enqcta__actions .btn{width:100%;justify-content:center}
@media (max-width:860px){.enqcta{grid-template-columns:1fr}}

/* --- footer local-SEO line ------------------------------------------------ */
.footer__local{max-width:var(--wrap-wide);margin:2.4rem auto 0;padding-top:1.6rem;border-top:1px solid rgba(244,236,220,.14);font-size:.82rem;line-height:1.7;color:rgba(244,236,220,.6)}