/*
Theme Name: Print Abra
Theme URI: http://localhost/printsite
Author: Print Abra
Description: A web-to-print storefront for a Dubai printing company. Warm dark editorial design, WooCommerce, live-priced product configurators, artwork upload and offline order confirmation.
Version: 7.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: printhub
Tags: e-commerce, custom-menu, featured-images, translation-ready
*/

/* ====================================================================== fonts */

/*
  The two faces the Horse & Houses site uses: Vocago for display, General Sans for
  everything else. Both are served from the theme rather than a font CDN, so there
  is no third-party request in the critical path.

  Vocago ships as a single weight. It is declared at 400 only — claiming 600 would
  make the browser smear a fake bold over it.
*/
@font-face{font-family:'Vocago';src:url('assets/fonts/Vocago.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('assets/fonts/GeneralSans-Extralight.woff2') format('woff2');
  font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('assets/fonts/GeneralSans-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('assets/fonts/GeneralSans-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* ===================================================================== tokens */

/*
  Two tones. The page ground is a warm off-white; sections, panels and chrome that
  should read dark carry .tone-dark, which redefines the same tokens locally. Every
  component reads tokens, so it renders correctly on either ground without variants.
*/
:root{
  /* palette */
  --granite:#A49D98;
  --taupe:#554135;
  --stone-brown:#5F544D;
  --ash:#5D4F46;
  --ink:#251C18;
  --paper:#F5F1ED;

  --stone:var(--granite); --stone-ink:#3A2B21;

  /* the Horse & Houses pairing: Vocago for display, General Sans for the rest */
  --disp:'Vocago','Optima','Palatino Linotype',Georgia,serif;
  --disp-it:'Cormorant Garamond','Optima',Georgia,serif;
  --logo:'General Sans','Jost',system-ui,sans-serif;
  --body:'General Sans','Inter',system-ui,-apple-system,sans-serif;

  --pad:clamp(20px,4vw,72px);
  --sec:clamp(88px,11vw,150px);
  --wrap:1320px;
}

/* light ground — the default. Text greys are chosen to clear WCAG AA on --bg. */
:root,.tone-light{
  --bg:var(--paper);
  --w:var(--ink);
  --panel:#FFFFFF; --panel2:#FBF9F7; --alt-bg:#ECE6E0;
  --field:#FFFFFF;
  --g:#5C4F46; --g2:#736760;
  --line:rgba(37,28,24,.16); --line2:rgba(37,28,24,.09);
  --acc:#6E5E53; --acc-dim:rgba(37,28,24,.24); --acc-soft:rgba(37,28,24,.08);
  --glow:rgba(37,28,24,.10);
  --solid:var(--ink); --on-solid:var(--paper);
  --up:#9A5A38; --err-bg:#F6E3DC; --err-fg:#8E3B24;
}

/* dark ground */
.tone-dark{
  --bg:var(--ink);
  --w:#EFEAE6;
  --panel:#2E251F; --panel2:#352A22; --alt-bg:#1F1814;
  --field:var(--ink);
  --g:#B3AAA4; --g2:#8C8179;
  --line:rgba(164,157,152,.22); --line2:rgba(164,157,152,.12);
  --acc:var(--granite); --acc-dim:rgba(164,157,152,.34); --acc-soft:rgba(164,157,152,.09);
  --glow:rgba(164,157,152,.18);
  --solid:var(--granite); --on-solid:var(--ink);
  --up:#D9A88E; --err-bg:rgba(201,123,106,.14); --err-fg:#E2A897;
  background:var(--bg);
  color:var(--w);
}

/*
  Aliases the configurator plugin reads. They are declared on every tone root, not
  only :root — a custom property that references another is resolved where it is
  declared, so an alias set once on :root would carry light values into dark sections.
*/
:root,.tone-light,.tone-dark{
  --brand-ink:var(--w);
  --brand-muted:var(--g2);
  --brand-line:var(--line);
  --brand-accent:var(--acc);
  --brand-accent-soft:var(--acc-soft);
  --brand-glow:var(--glow);
  --brand-success:var(--acc);
  --brand-surface:var(--panel);
  --brand-sunken:var(--alt-bg);
  --brand-radius:12px;
}

/* ======================================================================= base */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:clamp(90px,11vw,130px);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--w);font-family:var(--body);font-weight:500;font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--granite);color:#241C17}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.wrap.narrow{max-width:860px}
.sec{padding-block:var(--sec)}
.sec-t{padding-block:calc(var(--sec)*.62)}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:999;position:fixed;padding:.7rem 1rem;background:var(--w);color:var(--bg)}

/* type */
.label{font-family:var(--logo);font-weight:400;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:26px}
.label.mute{color:var(--g2)}
h1,h2,h3,h4{font-weight:400}
.h-stmt{font-family:var(--disp);font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.28;letter-spacing:-.01em}
h2.h-sec{font-family:var(--disp);font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.25;letter-spacing:-.01em;max-width:26ch}
.sub{color:var(--g);max-width:58ch;font-size:.95rem;margin-top:14px}
em.it{font-family:var(--disp-it);font-style:italic;color:var(--granite)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;font-family:var(--logo);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:16px 28px;border:1px solid var(--line);color:var(--w);transition:.3s;background:transparent;cursor:pointer}
.btn:hover{border-color:var(--w);background:var(--w);color:var(--bg)}
.btn.solid{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.btn.solid:hover{background:transparent;color:var(--solid);border-color:var(--solid)}
.btn .a{transition:transform .3s}
.btn:hover .a{transform:translateX(4px)}
.link{display:inline-flex;align-items:center;gap:10px;font-family:var(--logo);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);transition:.3s}
.link:hover{color:var(--acc)}
.link .a{transition:transform .3s}
.link:hover .a{transform:translateX(4px)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===================================================================== header */

.util{border-bottom:1px solid var(--line2);background:var(--alt-bg);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g2)}
.util-in{display:flex;align-items:center;justify-content:center;gap:26px;min-height:38px;flex-wrap:wrap}
.util b{color:var(--acc);font-weight:500}
.util i{width:3px;height:3px;border-radius:50%;background:var(--g2);opacity:.6;flex:none}

.nav{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line2);background:rgba(37,28,24,.9);backdrop-filter:blur(12px);transition:.35s}
.nav.scrolled{background:rgba(37,28,24,.97)}
.nav-in{display:flex;align-items:center;gap:clamp(16px,2vw,34px);min-height:70px}

.brand{flex:none}
.brand-name{font-family:var(--disp);font-size:1.32rem;letter-spacing:-.015em;color:var(--w);transition:.3s}
.brand:hover .brand-name{color:var(--acc)}
.brand img{max-height:38px;width:auto}

.nav-l{display:flex;gap:clamp(16px,1.7vw,30px);font-family:var(--logo);font-size:11px;letter-spacing:.2em;text-transform:uppercase;align-items:center;margin:0;list-style:none;align-self:stretch}
.nav-l>li{display:flex;align-items:center;position:static}
.nav-l>li>a{color:var(--g);transition:.3s;display:flex;align-items:center;gap:6px;white-space:nowrap;align-self:stretch}
.nav-l>li:hover>a{color:var(--w)}
.nav-l .caret{font-size:8px;opacity:.6}

.nav-r{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav-tel{display:inline-flex;align-items:center;gap:7px;font-family:var(--logo);font-size:11px;letter-spacing:.12em;color:var(--g);transition:.3s;white-space:nowrap}
.nav-tel b{font-weight:400;color:var(--w)}
.nav-tel:hover{color:var(--acc)}
.nav-tel svg{stroke:var(--acc);fill:none;stroke-width:1.6}
.nav-wa{position:relative;width:36px;height:36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s;flex:none}
.nav-wa:hover{border-color:var(--granite)}
.nav-wa svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.nav .btn{padding:12px 18px}

.nav-toggle{display:none;width:40px;height:36px;border:1px solid var(--line)}
.bars,.bars::before,.bars::after{display:block;width:16px;height:1px;background:var(--w);margin:0 auto;position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-5px}
.bars::after{top:5px}

/* mega */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);width:min(1180px,94vw);background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:34px;display:grid;grid-template-columns:repeat(3,1fr) .9fr;gap:30px;opacity:0;visibility:hidden;transition:.26s;box-shadow:0 40px 90px rgba(0,0,0,.6);z-index:70}
.nav-l>li.has-mega:hover .mega,.nav-l>li.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-col{display:grid;gap:4px;align-content:start}
.mega-col a{display:block;padding:8px 10px;border-radius:8px;transition:.25s;text-transform:none;letter-spacing:0}
.mega-col a:hover{background:var(--acc-soft)}
.mega-col b{display:block;font-family:var(--body);font-weight:500;font-size:.86rem;color:var(--w)}
.mega-col span{display:block;font-size:.76rem;color:var(--g2);line-height:1.4;font-family:var(--body)}
.mega-promo{background:var(--alt-bg);border:1px solid var(--line2);border-radius:12px;padding:22px;align-self:start;text-transform:none;letter-spacing:0}
.mega-promo p{font-family:var(--body);font-size:.84rem;color:var(--g2);line-height:1.55;margin-bottom:12px}
.mega-promo .label{margin-bottom:10px}

/* mobile drawer */
.mobile-nav{display:none;border-top:1px solid var(--line2);background:var(--alt-bg);padding-block:22px;max-height:calc(100vh - 108px);overflow-y:auto}
.mobile-nav:not([hidden]){display:block}
.m-search{display:flex;gap:8px;margin-bottom:20px}
.m-search input{flex:1;background:var(--field);border:1px solid var(--line2);color:var(--w);padding:12px 14px;border-radius:8px;font:inherit;font-size:.9rem}
.m-search button{border:1px solid var(--line);padding:0 16px;font-family:var(--logo);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--w)}
.m-parent{display:block;font-family:var(--logo);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--w);padding:14px 0 8px;border-top:1px solid var(--line2)}
.m-children{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px}
.m-children a{font-size:.8rem;color:var(--g);border:1px solid var(--line2);border-radius:100px;padding:5px 11px}
.m-menu{list-style:none;margin-top:18px;border-top:1px solid var(--line2);padding-top:14px}
.m-menu a{display:block;padding:9px 0;font-family:var(--logo);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g)}

/* ======================================================================= hero */

.hero-full{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;padding-top:clamp(60px,9vw,120px);overflow:hidden}
/* Swap assets/img/hero.jpg for real photography of your own work — the gradient
   underneath is built from the palette, so the hero never breaks if it is missing. */
.hero-bg{position:absolute;inset:0;z-index:-2;
  background-image:
    var(--hero-img,url('assets/img/hero.jpg')),
    radial-gradient(1300px 820px at 74% 20%,rgba(164,157,152,.30),transparent 62%),
    radial-gradient(900px 700px at 90% 80%,rgba(93,79,70,.55),transparent 60%),
    linear-gradient(115deg,#241C17 0%,#3A2E26 42%,#5F544D 74%,#8E837B 100%);
  background-size:cover;background-position:center right;background-repeat:no-repeat}
/* The plate is cropped from the right on wide screens, so the scrim has to carry
   the contrast on the headline side rather than relying on the image's own fade. */
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,rgba(36,28,23,.985) 0%,rgba(36,28,23,.965) 34%,rgba(36,28,23,.82) 52%,rgba(36,28,23,.34) 76%,rgba(36,28,23,.10) 100%),
    linear-gradient(0deg,rgba(36,28,23,.72) 0%,transparent 42%)}
.hero-in{width:100%;padding-bottom:clamp(44px,6vh,74px)}
.hero-eyebrow{font-family:var(--disp-it);font-style:italic;font-size:clamp(.95rem,1.5vw,1.1rem);color:var(--granite);margin-bottom:18px}
.hero-full h1{font-family:var(--disp);font-size:clamp(2.3rem,5.1vw,4.2rem);line-height:1.1;letter-spacing:-.02em;max-width:15ch}
.hero-full p.lead{margin-top:clamp(20px,2.6vw,28px);max-width:56ch;color:#D8D2CD;font-size:1rem;line-height:1.75}
.hero-full .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,3.6vw,40px)}
.hero-rail{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(24px,5vw,72px);justify-content:start;margin-top:clamp(44px,6vw,72px);padding-top:26px;border-top:1px solid var(--line2)}
.hero-rail .n{font-family:var(--disp);font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.02em;display:block}
.hero-rail p{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g2);margin-top:6px}

/* =============================================================== quote panel */

.quote-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,96px);align-items:center}
.tick{list-style:none;margin-top:26px;display:grid;gap:12px}
.tick li{position:relative;padding-left:26px;color:var(--g);font-size:.92rem}
.tick li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:6px;border-left:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);transform:rotate(-45deg)}

.qp{position:relative;overflow:hidden;background:var(--panel2);border:1px solid var(--line2);border-radius:20px;padding:clamp(26px,3vw,38px)}
.qp::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 300px at 88% 0%,rgba(164,157,152,.12),transparent 62%);pointer-events:none}
.qp>*{position:relative}
.qp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:16px}
.qp-h h3{font-family:var(--disp);font-size:1.25rem;letter-spacing:-.01em}
.qp-live{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g2);display:flex;align-items:center;gap:8px;white-space:nowrap}
.pulse{width:5px;height:5px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 var(--acc-dim);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(164,157,152,0)}100%{box-shadow:0 0 0 0 rgba(164,157,152,0)}}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2);margin-bottom:9px}
.fld select{width:100%;background:var(--field);border:1px solid var(--line2);color:var(--w);padding:14px 15px;border-radius:8px;font-family:var(--body);font-size:.88rem;appearance:none;transition:.25s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8179' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:40px}
.fld select:hover{border-color:var(--line)}
.fld select:focus{outline:none;border-color:var(--acc)}
.fld select option,.fld select optgroup{background:#2E251F;color:var(--w)}
.qp .btn{width:100%}
.qp-note{font-size:.78rem;color:var(--g2);text-align:center;margin-top:14px}

/* =================================================================== marquee */

.mq{overflow:hidden;display:flex;white-space:nowrap;border-block:1px solid var(--line2);padding-block:34px;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-g{display:flex;align-items:center;gap:clamp(48px,7vw,104px);padding-inline-end:clamp(48px,7vw,104px);animation:mq 34s linear infinite}
.mq-g span{font-family:var(--logo);font-size:1.05rem;letter-spacing:.2em;color:var(--stone-brown);text-transform:uppercase}
@keyframes mq{to{transform:translateX(-100%)}}

/* ===================================================================== about */

.about-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(36px,6vw,100px);align-items:center}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.b{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:30px 28px;transition:border-color .3s}
.b:hover{border-color:var(--acc-dim)}
.b-big{grid-column:1/-1;padding:38px 32px}
.b .b-n{display:block;font-family:var(--disp);font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.03em;margin-bottom:10px}
.b .b-n em{font-style:normal;color:var(--acc)}
.b p{font-size:.82rem;color:var(--g2);max-width:28ch}
.ab-lead{font-family:var(--disp);font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.34;letter-spacing:-.01em;margin-bottom:22px}
.about-copy>p{color:var(--g);font-size:.95rem;max-width:56ch;margin-bottom:18px}
.about-copy .link{margin-top:6px}

/* =================================================================== sections */

.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,60px)}

/* products */
.prod-sec{background:var(--alt-bg);border-block:1px solid var(--line2)}
.prod-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px);align-items:start}
.pc{display:block}
.pc .ph{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:4/3.2;border-radius:14px;border:1px solid var(--line2);transition:transform .5s cubic-bezier(.2,.6,.2,1),border-color .4s}
.pc:hover .ph{transform:translateY(-6px);border-color:var(--acc-dim)}
.pc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.pc:hover .ph img{transform:scale(1.04)}
.tagset{position:absolute;left:14px;top:14px;z-index:2;display:flex;gap:8px}
.gtag{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(36,28,23,.6);border:1px solid rgba(239,234,230,.24);border-radius:999px;padding:6px 13px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#EFEAE6}
.gtag.acc{background:var(--granite);border-color:var(--granite);color:#241C17}
.pc-b{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-top:20px}
.pc h3{font-family:var(--disp);font-size:1.06rem;letter-spacing:-.01em}
.pc .spec{font-size:.8rem;color:var(--g2);margin-top:6px;max-width:32ch}
.pc .price{font-family:var(--logo);font-size:1.1rem;letter-spacing:-.02em;color:var(--w);text-align:right;white-space:nowrap}
.pc .price .ph-from{display:block;font-size:8.5px;letter-spacing:.18em;color:var(--g2);margin-bottom:3px}
.pc .price .ph-from-suffix{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g2);margin-top:4px;font-family:var(--body)}
.pc .price .ph-quote-label{font-size:.8rem;color:var(--acc)}
@media(min-width:901px){.prod-g .pc:nth-child(2),.prod-g .pc:nth-child(5){margin-top:64px}}
.browse{display:flex;justify-content:center;margin-top:clamp(48px,5vw,72px)}

/* why panel */
.why-panel{position:relative;overflow:hidden;background:var(--panel2);border:1px solid var(--line2);border-radius:24px}
.why-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 10% 0%,rgba(164,157,152,.07),transparent 62%);pointer-events:none}
.why-g{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.why{padding:clamp(30px,3.4vw,46px) clamp(22px,2.6vw,38px) clamp(34px,3.6vw,52px);border-left:1px solid var(--line2);transition:background .35s}
.why:first-child{border-left:0}
.why:hover{background:rgba(164,157,152,.04)}
.why .w-n{font-family:var(--logo);font-size:2rem;font-weight:200;color:var(--acc-dim);display:block;margin-bottom:18px}
.why h3{font-family:var(--disp);font-size:1.05rem;margin-bottom:10px}
.why p{font-size:.85rem;color:var(--g2);line-height:1.6}

/* services */
.svc-list{display:grid;gap:clamp(18px,2vw,26px)}
.svc{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:clamp(26px,3vw,44px);transition:border-color .3s}
.svc:hover{border-color:var(--acc-dim)}
.svc h3{font-family:var(--disp);font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:-.015em;margin-bottom:14px}
.svc-t{color:var(--g);font-size:.92rem;max-width:52ch;margin-bottom:20px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.chips a{font-size:.76rem;color:var(--g2);border:1px solid var(--line2);border-radius:100px;padding:6px 13px;transition:.25s}
.chips a:hover{border-color:var(--acc-dim);color:var(--acc)}
.svc-img{border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:var(--alt-bg)}
.svc-img img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* sectors — alt ground, since it follows the light services section */
#industries{background:var(--alt-bg);border-block:1px solid var(--line2)}
/* sector chips */
.sectors{display:flex;flex-wrap:wrap;gap:9px}
.sectors span{border:1px solid var(--line2);border-radius:100px;padding:10px 18px;font-size:.84rem;color:var(--g);transition:.25s}
.sectors span:hover{border-color:var(--acc-dim);color:var(--w)}
.sectors-note{margin-top:26px;color:var(--g2);font-size:.88rem;display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:16px;overflow:hidden}
.step{background:var(--bg);padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,32px)}
.step .s-n{font-family:var(--logo);font-size:1.6rem;font-weight:200;color:var(--acc-dim);display:block;margin-bottom:16px}
.step h3{font-family:var(--disp);font-size:1.05rem;margin-bottom:9px}
.step p{font-size:.85rem;color:var(--g2);line-height:1.6}
.steps-note{margin-top:28px;color:var(--g2);font-size:.88rem;max-width:70ch}

/* reviews */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:16px;overflow:hidden}
.rev-card{background:var(--bg);padding:26px 24px;display:flex;flex-direction:column;gap:14px;margin:0}
.rev-top{display:flex;align-items:center;gap:12px}
.av{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:.9rem;color:var(--w);background:var(--ash);border:1px solid var(--line2)}
.rev-top h3{font-size:.92rem;font-weight:500;font-family:var(--disp)}
.rev-top p{font-size:.74rem;color:var(--g2);margin-top:2px}
.rev-card .txt{font-size:.86rem;color:var(--g);line-height:1.6;font-style:normal;border:0;padding:0;margin:0}

/* band */
.band{position:relative;overflow:hidden;background:var(--stone);color:var(--stone-ink);border-block:1px solid var(--line2);text-align:center;padding-block:clamp(76px,9vw,124px)}
.band::before{content:"";position:absolute;inset:-40%;background:radial-gradient(720px 360px at 22% 38%,rgba(239,234,230,.26),transparent 60%),radial-gradient(640px 330px at 80% 62%,rgba(85,65,53,.16),transparent 62%)}
.band .wrap{position:relative}
.band .label{color:var(--taupe)}
.band .h-stmt{max-width:24ch;margin-inline:auto;color:var(--stone-ink)}
.band .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.band .btn{border-color:rgba(42,35,32,.28);color:var(--stone-ink)}
.band .btn:hover{background:var(--stone-ink);border-color:var(--stone-ink);color:var(--stone)}
.band .btn.solid{background:var(--stone-ink);border-color:var(--stone-ink);color:#EDE7E2}
.band .btn.solid:hover{background:transparent;color:var(--stone-ink)}

/* faq */
.faq{display:grid;grid-template-columns:.9fr 1.35fr;gap:clamp(36px,6vw,100px);align-items:start}
.acc{border-top:1px solid var(--line)}
.acc-i{border-bottom:1px solid var(--line)}
.acc-b{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;text-align:left;padding-block:22px}
.acc-b h3{font-family:var(--disp);font-size:.98rem;font-weight:400}
.acc-b .ic{color:var(--g2);font-size:1.05rem;transition:transform .3s,color .3s;flex:none}
.acc-i.open .ic{transform:rotate(45deg);color:var(--acc)}
.acc-p{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.acc-p p{color:var(--g);font-size:.9rem;max-width:62ch;padding-bottom:24px}

/* final */
.final{text-align:center;border-top:1px solid var(--line2)}
.final .h-stmt{max-width:22ch;margin-inline:auto}
.final .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:42px}

/* ===================================================================== footer */

footer{border-top:1px solid var(--line2);padding-top:clamp(56px,7vw,90px);background:var(--alt-bg)}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:clamp(44px,5vw,70px)}
.fg h4{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--g2);margin-bottom:18px}
.fg a{display:block;color:var(--g);font-size:.88rem;padding-block:4.5px;transition:.3s}
.fg a:hover{color:var(--acc)}
.fg ul,.f-menu{list-style:none}
.fg li{list-style:none}
.f-brand{font-family:var(--disp);font-size:1.28rem;letter-spacing:-.015em;margin-bottom:16px}
.fg .about{color:var(--g2);font-size:.88rem;max-width:32ch;line-height:1.7;margin-bottom:20px}
.f-contact a,.f-hours{display:flex;align-items:center;gap:10px;color:var(--g);font-size:.88rem;padding-block:4.5px}
.f-contact svg{stroke:var(--acc);fill:none;stroke-width:1.6;flex:none}
.geo{border-top:1px solid var(--line2);padding-block:24px;font-size:.8rem;line-height:2;color:var(--ash)}
.geo b{color:var(--g2);font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;margin-right:10px}
.fbar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line2);padding-block:24px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g2)}
.fpay{display:flex;gap:8px;flex-wrap:wrap}
.fpay i{border:1px solid var(--line2);color:var(--g2);padding:5px 9px;font-style:normal;font-size:8.5px;letter-spacing:.12em}

.wa{position:fixed;bottom:26px;right:26px;width:52px;height:52px;border-radius:50%;background:var(--solid);display:grid;place-items:center;z-index:70;transition:.3s;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:26px;height:26px;fill:var(--on-solid)}

/* ================================================================ page chrome */

.crumbs{border-bottom:1px solid var(--line2);background:var(--alt-bg);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g2)}
.crumbs .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-block:14px}
.crumbs a{color:var(--g2);transition:.3s}
.crumbs a:hover{color:var(--acc)}
.crumbs i{opacity:.4;font-style:normal}
.crumbs span{color:var(--w)}

.page-head{padding-block:clamp(40px,6vw,72px) clamp(20px,3vw,32px)}
.page-head h1{font-family:var(--disp);font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.02em;line-height:1.12}
.page-article{padding-bottom:clamp(60px,8vw,110px)}
.entry-content{font-size:1rem;line-height:1.8;color:var(--g)}
.entry-content p.lead{font-family:var(--disp);font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.45;color:var(--w);margin-bottom:1.4em}
.entry-content h2{font-family:var(--disp);font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--w);margin:2.2em 0 .6em;letter-spacing:-.015em}
.entry-content h3{font-family:var(--disp);font-size:1.15rem;color:var(--w);margin:1.8em 0 .5em}
.entry-content a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:1.2rem;margin-bottom:1.2em}
.entry-content li{margin-bottom:.5em}
.entry-content li::marker{color:var(--acc-dim)}
.entry-content b,.entry-content strong{color:var(--w);font-weight:500}
.entry-content table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.9rem}
.entry-content th,.entry-content td{padding:.85rem 1rem;border-bottom:1px solid var(--line2);text-align:left}
.entry-content th{background:var(--panel);font-family:var(--logo);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g2)}
.entry-content blockquote{margin:1.6rem 0;padding:1rem 1.4rem;border-left:2px solid var(--acc);background:var(--panel);border-radius:0 10px 10px 0}

.post-list{display:grid;gap:20px;padding-bottom:4rem}
.post-card{display:grid;grid-template-columns:240px 1fr;gap:24px;border:1px solid var(--line2);border-radius:16px;overflow:hidden;background:var(--panel)}
.post-card-media img{width:100%;height:100%;object-fit:cover}
.post-card-body{padding:26px 28px 26px 0}
.post-card h2{font-family:var(--disp);font-size:1.2rem;margin-bottom:6px}
.post-meta{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g2);margin-bottom:10px}
.post-hero{margin:2rem 0;border-radius:16px;overflow:hidden}

.error-404{text-align:center;padding-block:clamp(60px,10vw,140px)}
.error-code{display:block;font-family:var(--disp);font-size:clamp(4rem,10vw,7rem);color:var(--acc-dim);line-height:1}
.error-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:32px}

/* ================================================================== services */

.entry-content p{margin-bottom:1.1em}

.svc-head{padding-block:clamp(44px,6vw,84px) clamp(28px,4vw,48px);border-bottom:1px solid var(--line2)}
.svc-head h1{font-family:var(--disp);font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.02em;line-height:1.1}
.svc-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.svc-jump a{border:1px solid var(--line);border-radius:100px;padding:8px 15px;font-size:.84rem;color:var(--g);transition:.25s}
.svc-jump a:hover{border-color:var(--w);color:var(--w)}
.svc-group-alt{background:var(--alt-bg);border-block:1px solid var(--line2)}
.svc-group .label{font-family:var(--logo)}
.svc-grid.prod-g .pc{margin-top:0!important}

.pc-cta{font-family:var(--logo);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);white-space:nowrap;padding-top:4px}
.pc-cta .a{display:inline-block;transition:transform .3s}
.pc:hover .pc-cta .a{transform:translateX(4px)}

.svc-single{padding-block:clamp(32px,5vw,64px) clamp(56px,7vw,96px)}
.svc-single-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.svc-media{position:sticky;top:120px}
.svc-media-img{border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:var(--panel)}
.svc-media-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.svc-assure{list-style:none;margin-top:18px;display:grid;gap:10px;padding:20px 22px;border:1px solid var(--line2);border-radius:14px;background:var(--panel)}
.svc-assure li{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--g)}
.svc-assure svg{color:var(--acc);flex:none}
.svc-main .label{margin-bottom:14px}
.svc-main h1{font-family:var(--disp);font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}
.svc-lead{color:var(--g);font-size:1rem;max-width:56ch;margin-bottom:34px}
.svc-about{border-top:1px solid var(--line2)}

/* quick quote panel */
.qq-primary{margin-top:6px}
.qq-or{display:flex;align-items:center;gap:14px;margin:22px 0 14px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g2)}
.qq-or::before,.qq-or::after{content:"";flex:1;height:1px;background:var(--line2)}
.qq-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qp .qq-ch{padding:13px 10px}

/* ================================================================ responsive */

@media(max-width:1400px){
  .nav-tel{display:none}
}
@media(max-width:1080px){
  .nav-l{display:none}
  .nav-toggle{display:block}
  .why-g{grid-template-columns:1fr 1fr}
  .why:nth-child(3){border-left:0}
  .why:nth-child(n+3){border-top:1px solid var(--line2)}
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  .quote-grid,.about-grid,.faq{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .svc-img{order:-1}
  .prod-g{grid-template-columns:repeat(2,1fr)}
  .prod-g .pc:nth-child(2),.prod-g .pc:nth-child(5){margin-top:0}
  .fg{grid-template-columns:1fr 1fr}
  .hero-full h1{max-width:100%}
}
@media(max-width:760px){
  /* Four promises stack into four lines on a phone; the first two carry the message. */
  .util-in{gap:12px;font-size:8.5px;padding-block:11px}
  .util-in span:nth-child(n+5),.util-in i:nth-child(n+4){display:none}
  .nav-quote{display:none}
  .hero-full{min-height:auto;padding-top:clamp(48px,14vw,86px)}
  .hero-bg{background-position:center right -60px}
  .hero-scrim{background:linear-gradient(0deg,rgba(36,28,23,.97) 0%,rgba(36,28,23,.90) 34%,rgba(36,28,23,.74) 62%,rgba(36,28,23,.58) 100%)}
  .hero-rail{grid-template-columns:1fr 1fr;gap:22px}
  .why-g,.steps,.qp-row{grid-template-columns:1fr}
  .why{border-left:0;border-top:1px solid var(--line2)}
  .why:first-child{border-top:0}
  .bento{grid-template-columns:1fr}
  .prod-g{grid-template-columns:1fr}
  .post-card{grid-template-columns:1fr}
  .post-card-body{padding:0 24px 24px}
  .fg{grid-template-columns:1fr}
  .fbar{flex-direction:column}
}

@media(max-width:1024px){
  .svc-single-grid{grid-template-columns:1fr}
  .svc-media{position:static;max-width:560px}
}
@media(max-width:760px){
  .qq-channels{grid-template-columns:1fr}
}

/* =================================================== sitemap: services hierarchy */

/* Services mega panel: all ten categories with their sub-categories */
.mega.mega-services{grid-template-columns:repeat(5,1fr);gap:26px 24px;padding:30px 32px}
.mega-cat{display:grid;gap:1px;align-content:start;text-transform:none;letter-spacing:0}
.mega-cat a{font-family:var(--body);font-size:.8rem;color:var(--g2);padding:3px 0;transition:color .2s}
.mega-cat a:hover{color:var(--w)}
.mega-cat a.mega-cat-t{font-family:var(--disp);font-size:.98rem;color:var(--w);margin-bottom:6px;padding:0}
.mega-cat a.mega-cat-t:hover{color:var(--acc)}
.mega-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line2);padding-top:18px;font-family:var(--body);text-transform:none;letter-spacing:0;font-size:.82rem;color:var(--g2)}
.nav-l>li.menu-item>a{color:var(--g);transition:.3s;display:flex;align-items:center;white-space:nowrap}
.nav-l>li.menu-item>a:hover,.nav-l>li.current-menu-item>a{color:var(--w)}

/* hubs */
.hub-head-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center}
.hub-head .label a{color:inherit}
.hub-head .label a:hover{color:var(--w)}
.hub-media{border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:var(--panel)}
.hub-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hub-meta{font-family:var(--logo);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--g2);margin-top:20px}
.hub-head .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hub-enquire{border-top:1px solid var(--line2);background:var(--alt-bg)}
.hub-enquire .quote-grid{align-items:start}
.hub-siblings{margin-top:34px}
.hub-siblings a[aria-current]{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}

.sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sub-card{display:flex;flex-direction:column;padding:26px 26px 24px;border:1px solid var(--line2);border-radius:16px;background:var(--panel);transition:border-color .3s,transform .3s}
.sub-card:hover{border-color:var(--acc-dim);transform:translateY(-3px)}
.sub-card h2{font-family:var(--disp);font-size:1.2rem;letter-spacing:-.01em;margin-bottom:8px}
.sub-card p{font-size:.86rem;color:var(--g);margin-bottom:16px}
.sub-card ul{list-style:none;margin:0 0 18px;border-top:1px solid var(--line2)}
.sub-card li{font-size:.82rem;color:var(--g2);padding:7px 0;border-bottom:1px dotted var(--line2)}
.sub-card li.more{color:var(--acc);border-bottom:0}
.sub-card .pc-cta{margin-top:auto}

.svc-rows{border-top:1px solid var(--line)}
.svc-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 6px;border-bottom:1px solid var(--line);transition:background .25s,padding .25s}
.svc-row:hover{background:var(--acc-soft);padding-left:14px}
.svc-row b{display:block;font-family:var(--disp);font-weight:400;font-size:1.08rem;color:var(--w)}
.svc-row small{display:block;font-size:.86rem;color:var(--g);margin-top:4px;max-width:72ch}
.svc-main .label a{color:inherit}
.svc-main .label a:hover{color:var(--w)}
.pc-parent{font-family:var(--logo);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--g2);margin-bottom:6px}

/* /services/ hub */
.svc-stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:28px}
.svc-stats b{display:block;font-family:var(--disp);font-weight:400;font-size:2.1rem;letter-spacing:-.02em;line-height:1}
.svc-stats span{font-family:var(--logo);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--g2)}
.cat-block{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.cat-block h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.015em;margin-bottom:10px}
.cat-block h2 a:hover{color:var(--acc)}
.cat-block .label{margin-bottom:12px}
.cat-block .sub{margin-bottom:18px}
.cat-block-img{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:var(--panel);margin-bottom:24px}
.cat-block-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cat-subs{border-top:1px solid var(--line)}
.cat-sub{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 4px;border-bottom:1px solid var(--line);transition:color .2s,padding .2s}
.cat-sub b{font-weight:400;font-size:.98rem}
.cat-sub span{font-family:var(--logo);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--g2);white-space:nowrap}
.cat-sub:hover{color:var(--acc);padding-left:10px}

/* home: ten categories */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.cat-card{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:16px;background:var(--panel);overflow:hidden;transition:border-color .3s,transform .3s}
.cat-card:hover{border-color:var(--acc-dim);transform:translateY(-3px)}
.cat-card-img{display:block;background:var(--alt-bg)}
.cat-card-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cat-card-b{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.cat-card-t{display:block;font-family:var(--disp);font-size:1.15rem;letter-spacing:-.01em;margin-bottom:8px}
.cat-card-p{display:block;font-size:.84rem;color:var(--g);margin-bottom:16px}
.cat-card .pc-cta{margin-top:auto}
.faq-all{margin-top:22px}

/* FAQ page and other long-form pages use native disclosure widgets */
.entry-content details{border-bottom:1px solid var(--line)}
.entry-content h2 + details,.entry-content details:first-child{border-top:1px solid var(--line)}
.entry-content summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-family:var(--disp);font-size:1.02rem;color:var(--w)}
.entry-content summary::-webkit-details-marker{display:none}
.entry-content summary::after{content:"+";flex:none;color:var(--g2);transition:transform .3s,color .3s}
.entry-content details[open] summary::after{transform:rotate(45deg);color:var(--acc)}
.entry-content details > :not(summary){margin-bottom:18px}

@media(max-width:1180px){.mega.mega-services{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){
  .hub-head-grid,.cat-block{grid-template-columns:1fr}
  .hub-media{max-width:560px}
  .svc-row{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ===================================================================== logo */

.pa-logo{display:block;height:auto}
.brand{display:flex;align-items:center;transition:opacity .3s}
.brand:hover{opacity:.8}
.brand .pa-logo{height:64px;width:auto;max-height:none}
.f-brand{display:inline-block;margin-bottom:22px;font-size:inherit}
.f-brand .pa-logo{width:140px}
@media(max-width:760px){
  .brand .pa-logo{height:56px}
}

/* =============================================================== liquid glass */

/*
  A translucent layer over the existing two-tone palette. Nothing here changes the
  brand colours: panels, chrome and controls stop being flat fills and become frosted
  glass that picks up the warm ground behind them. Tokens are declared on both tone
  roots so a panel reads correctly on either ground, exactly like the colour tokens.

  Blur needs something varied behind it, so each ground also gets a soft warm wash.
  Fallbacks for browsers without backdrop-filter, and for readers who ask for less
  transparency, are at the end of this section.
*/

:root,.tone-light{
  --glass:rgba(255,255,255,.54);
  --glass-2:rgba(255,255,255,.72);
  --glass-brd:rgba(37,28,24,.12);
  --glass-hi:rgba(255,255,255,.9);
  --glass-tint:rgba(164,157,152,.10);
  --glass-shadow:0 20px 44px -26px rgba(37,28,24,.42),0 2px 8px -5px rgba(37,28,24,.22);
  --glass-blur:saturate(165%) blur(18px);
  --glass-r:20px;
}
/*
  Dark glass stays dark. A tone-dark panel often sits on the light ground — the quick
  quote panel does — and a light-brown translucent fill would drop its off-white text
  under the contrast floor, so the fill is kept near the ink colour and the glass reads
  through the blur, the hairline and the specular edge instead of through lightness.
*/
.tone-dark{
  --glass:rgba(40,31,26,.58);
  --glass-2:rgba(53,42,35,.72);
  --glass-brd:rgba(239,234,230,.16);
  --glass-hi:rgba(239,234,230,.42);
  --glass-tint:rgba(239,234,230,.06);
  --glass-shadow:0 24px 52px -28px rgba(0,0,0,.8),0 2px 10px -6px rgba(0,0,0,.55);
}

/* ambient ground: gives the blur something to catch */
body{
  background-image:
    radial-gradient(1000px 640px at 8% -8%,rgba(164,157,152,.26),transparent 62%),
    radial-gradient(860px 560px at 96% 6%,rgba(142,131,123,.20),transparent 64%);
  background-attachment:fixed}
.tone-dark,.prod-sec,#industries,footer{
  background-image:
    radial-gradient(880px 520px at 84% -6%,rgba(164,157,152,.16),transparent 62%),
    radial-gradient(760px 480px at 6% 92%,rgba(142,131,123,.13),transparent 64%)}

/*
  The shared glass recipe. ::after paints the specular top edge every glass surface
  in the system carries; panels that already use ::before for their own glow keep it.
*/
.glassy,
.qp,.b,.why-panel,.cat-card,.steps,.rev-grid,.svc,.acc-i,
.nav,.util,.wa,.gtag,.pc .ph,.svc-img,.cat-block-img{
  background-color:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow)}

/* .nav is left out on purpose: it is position:sticky, which already establishes the
   containing block its highlight needs, and relative here would break the sticking. */
.qp,.b,.why-panel,.cat-card,.steps,.rev-grid,.svc,.wa{position:relative}
.qp::after,.b::after,.why-panel::after,.cat-card::after,.steps::after,
.rev-grid::after,.svc::after,.nav::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--glass-hi),transparent 42%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  border:1px solid transparent;opacity:.55}

/* chrome */
/* The header floats over photography, so it carries more fill than a panel does. */
.nav{background-color:rgba(37,28,24,.74);border-inline:0;border-top:0;border-radius:0;
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)}
.nav.scrolled{background-color:rgba(37,28,24,.88)}
.nav-l>li>a,.nav-tel{color:#C9C1BA}
.nav-l>li:hover>a{color:var(--w)}
/*
  The utility strip is small uppercase type at 9.5px, so it keeps a nearly solid fill:
  translucency there costs more contrast than the effect is worth. Muted greys inside
  glass are lifted a step for the same reason — a translucent fill sits lighter than
  the flat panel these greys were picked against.
*/
.util{border-radius:0;border-inline:0;border-top:0;box-shadow:none;
  background-color:rgba(31,24,20,.88);color:#9E938B}
.tone-dark{--g2:#9E948C}

/* panels and cards */
.qp{border-radius:24px}
.b{border-radius:20px}
.b:hover{background-color:var(--glass-2);border-color:var(--acc-dim)}
.why-panel{border-radius:26px}
.why{border-left-color:var(--glass-brd)}
.why:hover{background:var(--glass-tint)}
.cat-card{border-radius:20px;transition:transform .4s cubic-bezier(.2,.6,.2,1),background-color .35s,border-color .35s,box-shadow .4s}
.cat-card:hover{transform:translateY(-5px);background-color:var(--glass-2);border-color:var(--acc-dim)}
.cat-card-img,.cat-card-b{background:transparent}
.steps,.rev-grid{gap:1px;background-color:var(--glass);border-radius:20px}
.step,.rev-card{background:transparent;box-shadow:0 0 0 .5px var(--glass-brd)}
.svc{border-radius:22px}
.pc .ph,.svc-img,.cat-block-img{border-radius:16px}
.pc:hover .ph{background-color:var(--glass-2)}
.prod-sec,#industries{border-block-color:var(--glass-brd)}

/* controls — capsules, the shape the glass system uses for anything tappable */
.btn{border-radius:999px;background-color:var(--glass);border-color:var(--glass-brd);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);transition:background-color .3s,border-color .3s,transform .3s,box-shadow .3s}
.btn:hover{background-color:var(--glass-2);border-color:var(--glass-hi);color:var(--w);transform:translateY(-1px)}
.btn.solid{background-color:var(--solid);border-color:transparent;color:var(--on-solid)}
.btn.solid:hover{background-color:var(--solid);color:var(--on-solid);filter:brightness(1.08)}
.chips a,.sectors span,.fpay i{border-radius:999px;background-color:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-brd)}
.chips a:hover,.sectors span:hover{background-color:var(--glass-2)}
.nav-wa,.nav-toggle{border-radius:999px;background-color:var(--glass);border-color:var(--glass-brd);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.nav-wa:hover,.nav-toggle:hover{background-color:var(--glass-2)}
.fld select{background-color:var(--glass);border-color:var(--glass-brd);border-radius:12px;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.fld select:hover{background-color:var(--glass-2)}
.wa{background-color:var(--glass-2);border-color:var(--glass-hi)}
.wa svg{fill:var(--w)}
.acc-i{border-radius:14px;margin-bottom:8px;padding-inline:18px;box-shadow:none}
.acc{border-top:0}

/* footer sits on glass too, so the ground shows through the columns */
footer{border-top-color:var(--glass-brd)}
.geo,.fbar{border-top-color:var(--glass-brd)}

/*
  Fallbacks. Without backdrop-filter the translucent fills would sit on the ground
  unblurred and lose contrast, so those browsers get the original opaque panels —
  as do readers who have asked the OS for reduced transparency.
*/
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  :root,.tone-light,.tone-dark{--glass:var(--panel);--glass-2:var(--panel2);--glass-brd:var(--line2)}
  .qp::after,.b::after,.why-panel::after,.cat-card::after,.steps::after,
  .rev-grid::after,.svc::after,.nav::after{display:none}
  .step,.rev-card{background:var(--bg)}
}
@media (prefers-reduced-transparency:reduce){
  :root,.tone-light,.tone-dark{--glass:var(--panel);--glass-2:var(--panel2)}
  .nav{background-color:rgba(37,28,24,.97)}
  .qp::after,.b::after,.why-panel::after,.cat-card::after,.steps::after,
  .rev-grid::after,.svc::after,.nav::after{display:none}
  .step,.rev-card{background:var(--bg)}
}

/*
  Contrast corrections for the glass layer, from a WCAG pass over the rendered page.
  Two causes: a translucent fill composites lighter than the flat panel its text colour
  was chosen against, and a dark panel standing on the light ground needs far more fill
  than one standing on the dark ground. A few greys here were already marginal before
  the glass went in and are corrected at the same time.
*/

/* muted greys, re-picked against translucent fills */
:root,.tone-light{--g2:#6B6059}
.tone-dark{--g2:#A0968E}

/* the quick quote panel is dark glass on the light ground: it carries the most fill */
.qp{background-color:rgba(30,23,19,.86)}

/* product tags sit on photography and keep their own dark fill, not the tone's glass */
.gtag{background-color:rgba(26,20,17,.74);border-color:rgba(239,234,230,.3);color:#F3EFEB}
.gtag.acc{background-color:var(--granite);border-color:var(--granite);color:#241C17}

/* header over photography */
.nav{background-color:rgba(37,28,24,.84)}
.nav-l a,.nav-tel{color:#D2CBC4}
.nav-l>li:hover>a{color:var(--w)}
.util{color:#A99E96}

/* decorative step and reason numerals still have to be readable as numbers */
.why .w-n,.step .s-n{color:rgba(196,189,183,.66)}

/* footer service-area line, and the label on the granite band */
.geo{color:#8C8179}
.band .label{color:#3A2B21}

/* last two: muted type inside the darkest panel, and the footer service-area line */
.qp{--g2:#B2A89F}
.geo{color:#948981}

/* ======================================================= homepage additions */

/*
  Work cluster in the hero. Desktop only: below 1100px the headline needs the full
  width, and a cluster of small tiles on a phone reads as clutter rather than range.
  The float is decorative and stops under prefers-reduced-motion with everything else.
*/
.hero-cluster{display:none;position:absolute;right:clamp(20px,4vw,72px);top:50%;
  transform:translateY(-46%);width:min(44vw,600px);height:min(60vh,500px);
  list-style:none;z-index:1;pointer-events:none}
@media(min-width:1100px){.hero-cluster{display:block}}
.hc{position:absolute;border-radius:18px;overflow:hidden;
  background-color:var(--glass);border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  animation:hc-float 9s ease-in-out infinite}
.hc img{width:100%;height:100%;object-fit:cover}
.hc-1{width:44%;aspect-ratio:4/3.2;left:0;top:4%;animation-delay:-1.2s}
.hc-2{width:36%;aspect-ratio:1/1;right:1%;top:0;animation-delay:-3.4s}
.hc-3{width:40%;aspect-ratio:4/3;left:8%;bottom:2%;animation-delay:-5.1s}
.hc-4{width:31%;aspect-ratio:3/4;right:0;bottom:8%;animation-delay:-7s}
.hc-5{width:25%;aspect-ratio:1/1;left:49%;top:37%;animation-delay:-2.2s}
@keyframes hc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* how it works: one piece of work beside the four steps */
.steps-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3.2vw,48px);align-items:start}
.steps-grid .steps{grid-template-columns:1fr}
.steps-media{position:relative;border-radius:20px;overflow:hidden;
  background-color:var(--glass);border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.steps-media img{width:100%;aspect-ratio:4/3.5;object-fit:cover}
.steps-media figcaption{position:absolute;inset:auto 14px 14px;display:flex;flex-direction:column;gap:3px;
  padding:12px 15px;border-radius:14px;background:rgba(24,18,15,.76);
  border:1px solid rgba(239,234,230,.2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sm-label{font-family:var(--logo);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#C5BBB3}
.sm-title{font-family:var(--disp);font-size:1rem;color:#F3EFEB}

/* one promo panel breaking the run of equal category tiles */
.cat-promo{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:clamp(24px,2.6vw,34px);border-radius:20px;
  background-color:var(--glass-2);border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.cat-promo .label{margin-bottom:0}
.cat-promo h3{font-family:var(--disp);font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.3;letter-spacing:-.01em}
.cat-promo p:not(.label){color:var(--g);font-size:.88rem;max-width:46ch}
.cat-promo-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* contact band: every route to a person at full size, not behind one button */
.band-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px;text-align:left}
.bc{display:flex;flex-direction:column;gap:5px;padding:20px 22px;border-radius:18px;
  background-color:rgba(255,255,255,.44);border:1px solid rgba(42,35,32,.16);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  transition:background-color .3s,transform .3s}
.bc:hover{background-color:rgba(255,255,255,.66);transform:translateY(-2px)}
.bc-l{font-family:var(--logo);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#4A3A2E}
.bc-v{font-family:var(--disp);font-size:clamp(1.02rem,1.6vw,1.32rem);letter-spacing:-.01em;color:var(--stone-ink);word-break:break-word}
.bc-n{font-size:.8rem;color:#463930}
.band .cta{margin-top:26px}

@media(max-width:1000px){
  .steps-grid{grid-template-columns:1fr}
  .steps-media img{aspect-ratio:16/9}
}
@media(max-width:820px){.band-contact{grid-template-columns:1fr}}
@media(max-width:700px){.cat-promo{grid-column:span 1}}

/* hero tiles hold dark artwork, so their frame is light glass rather than dark */
.hc{background-color:rgba(239,234,230,.12);border-color:rgba(239,234,230,.24)}

/* ===================================================== hero with cover image */

/*
  The supplied cover is a light photograph with the products on the right and empty
  ground on the left, so the hero flips to the light tone: espresso type on cream,
  with a scrim that fades from solid cream on the headline side to clear over the
  products. The work cluster is dropped here — the cover already shows printed work,
  and the tiles would sit on top of it.
*/
/*
  .hero-bg sits at z-index -2 and .hero-full creates no stacking context, so a
  background painted on .hero-full itself would cover the photograph. The paper
  colour therefore goes on the image layer, underneath the image.
*/
.hero-full.has-cover{color:var(--w);min-height:min(74vh,660px);align-items:center}
/* the photograph's own ground is #F6F3EF, so the hero matches it and the edges vanish */
.hero-full.has-cover .hero-bg{
  background-color:#F6F3EF;
  background-image:url('assets/img/hero-set.jpg');
  background-repeat:no-repeat;
  background-size:contain;background-position:right center}
/* the left of the photograph is empty ground, so the scrim only has to insure the
   headline against a different crop; it stays light enough to leave the set untouched */
.hero-full.has-cover .hero-scrim{
  background:linear-gradient(94deg,
    rgba(246,243,239,.92) 0%,rgba(246,243,239,.8) 30%,rgba(246,243,239,.42) 44%,
    rgba(246,243,239,.1) 56%,rgba(246,243,239,0) 66%)}
.hero-full.has-cover .hero-cluster{display:none}
.hero-full.has-cover .hero-eyebrow{color:var(--acc)}
.hero-full.has-cover h1{color:var(--w)}
.hero-full.has-cover p.lead{color:var(--g)}
.hero-full.has-cover .hero-rail{border-top-color:var(--line)}
.hero-full.has-cover .hero-rail p{color:var(--g2)}

/*
  Phones and tablets: there is no empty ground to write on once the photograph is
  cropped to a narrow frame, so the image becomes a band across the top and the copy
  sits below it on clean paper instead of on top of the products.
*/
@media(max-width:1000px){
  /* the band takes the photograph's own 16:9 shape, so no empty ground is framed above
     and below the set — the copy then starts right under it */
  .hero-full.has-cover{min-height:0;display:block;padding-top:calc(56.25vw + clamp(20px,3vw,34px))}
  .hero-full.has-cover .hero-bg,
  .hero-full.has-cover .hero-scrim{inset:0 0 auto 0;height:auto;aspect-ratio:16/9}
  .hero-full.has-cover .hero-bg{background-position:center center;background-size:cover}
  .hero-full.has-cover .hero-scrim{
    background:linear-gradient(180deg,rgba(246,243,239,0) 58%,rgba(246,243,239,.55) 82%,#F6F3EF 100%)}
  .hero-full.has-cover .hero-in{padding-bottom:clamp(40px,7vw,64px)}
}

/* ============================================ home page: the header bar */

/*
  The header sits above the cover rather than on it, and keeps the espresso fill it
  has everywhere else — a pale bar over a pale photograph read as washed out. It is
  still a bordered bar inset from the page edges rather than a full-width band, but
  a wide one: the inset is small, the bar is tall, and the logo has its own cell
  behind a divider, which is what gives it presence.

  Desktop only; phones keep the full-width header.
*/
.pa-logo-swap{display:none}

@media(min-width:1001px){
  .home .nav{
    top:clamp(10px,1.1vw,16px);
    margin-top:clamp(10px,1.1vw,16px);
    margin-inline:clamp(12px,1.6vw,26px);
    border:1px solid rgba(239,234,230,.14);
    border-radius:18px;
    background-color:rgba(37,28,24,.94);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    box-shadow:0 10px 26px -24px rgba(0,0,0,.45)}
  .home .nav.scrolled{background-color:rgba(37,28,24,.97)}

  .home .nav .wrap{max-width:none;padding-inline:clamp(18px,1.8vw,30px)}
  .home .nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
    gap:clamp(14px,1.8vw,28px);min-height:80px}
  .home .nav-l{justify-content:center}
  .home .nav-r{margin-left:0}
  .home .brand{
    padding-right:clamp(20px,2vw,32px);
    border-right:1px solid rgba(239,234,230,.16)}
  .home .brand .pa-logo{height:58px}

  /* the cover starts below the header, with its own breathing room */
  .home .hero-full.has-cover{margin-top:0;padding-top:clamp(18px,2.4vw,36px)}
}

/* ===================================================================== calm pass */

/*
  What makes a page like the reference read as clean is repetition, not effects: one
  section opening, one spacing step, one set of corner radii. The two tones and the
  glass stay as they are — this only removes the variety around them.
*/

/* one set of radii instead of eleven */
:root{--r-lg:18px;--r-md:14px}
.qp,.b,.why-panel,.cat-card,.cat-promo,.steps,.rev-grid,.svc,.steps-media,.hc{border-radius:var(--r-lg)}
.pc .ph,.svc-img,.cat-block-img,.bc,.acc-i,.mega,.mega-promo,.fld select{border-radius:var(--r-md)}

/* one section opening: an accent dot, then the label, on every section */
.label{display:flex;align-items:center;gap:10px}
.label::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* the label is a flex row now, so centred sections have to centre it themselves */
.band .label,.final .label,.band-contact .label{justify-content:center}

/* one spacing step between sections, so the page keeps a single rhythm */
.sec,.sec-t{padding-block:var(--sec)}

/* one measure for the copy under a heading */
h2.h-sec{max-width:24ch}
.sub,.steps-note,.sectors-note{max-width:60ch}

/* ------------------------------------------------- enquiry block inside prose */

/*
  On the quote page the enquiry block sits inside .entry-content, whose prose rules
  paint every link with the accent colour and every <b> with the text colour. That
  repainted the block's own buttons — the WhatsApp tile ended up espresso on espresso,
  so its label was invisible. The block keeps its own colours here.
*/
.entry-content .ph-enquire a{color:inherit;text-decoration:none}
.entry-content .ph-enquire b,
.entry-content .ph-enquire strong{color:inherit}
.entry-content .ph-enquire .ph-channel{color:var(--e-ink)}
.entry-content .ph-enquire .ph-channel-wa{color:var(--e-on-solid)}

/* the home headline sits at 48px, stepping down only where 48px would not fit */
.hero-full h1{font-size:clamp(1.95rem,5.6vw,48px);max-width:21ch}

.hero-sub{font-family:var(--disp);font-size:clamp(1.08rem,1.8vw,1.38rem);line-height:1.45;
  color:var(--w);margin-top:clamp(16px,2vw,22px);max-width:32ch}


/* ======================================================= hero: centred layout */

/*
  Copy centred over a quiet ground, the headline split across two tones, and the
  photograph presented as a plate that the fold crops — the reader sees the top of
  it and understands there is more below. The cover-as-background layers are switched
  off here because the photograph is now a real element in the flow.
*/
.hero-center .hero-bg,
.hero-center .hero-scrim{display:none}

/* flat #F6F3EF: the clip is composited on this exact colour, so its edges vanish */
.hero-center{display:block;min-height:0;overflow:hidden;background:#F6F3EF}
.hero-center .hero-in{padding-bottom:0}
.hero-center .hero-copy{max-width:940px;margin-inline:auto;text-align:center}

.hero-center .hero-eyebrow{font-family:var(--logo);font-style:normal;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--g2);margin-bottom:18px}
.hero-center h1{max-width:none;display:grid;gap:2px;letter-spacing:-.02em;line-height:1.14}
.hero-center .h1-soft{color:#A79C93}
.hero-center .h1-strong{color:var(--w)}
.hero-center .hero-sub{margin-inline:auto;max-width:46ch;color:var(--g)}
.hero-center .cta{justify-content:center;margin-top:clamp(18px,2.2vw,26px)}

/* the plate: wide, rounded, and deliberately cut by the fold */
/*
  No frame, no shadow, no rounded corners: the clip carries the page colour, so the
  products read as standing on the page. Its own proportions are kept and the fold
  does the cropping.
*/
.hero-plate{width:min(1400px,calc(100vw - 2 * clamp(16px,3.2vw,56px)));height:auto;
  aspect-ratio:2581 / 798;
  margin:clamp(12px,1.6vw,22px) auto 0;
  border:0;border-radius:0;box-shadow:none;background:transparent}
.hero-plate{position:relative}
.hero-plate picture,
.hero-plate video,
.hero-plate img{display:block;width:100%;height:100%;object-fit:contain}

/* below the products, in the flow, so it never covers them */
.hero-scroll{display:block;width:max-content;margin:clamp(14px,1.8vw,24px) auto clamp(20px,2.6vw,34px);
  font-family:var(--logo);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--g);background:transparent;border:1px solid var(--line2);
  padding:8px 16px;border-radius:999px;pointer-events:none}

@media(max-width:1000px){
  /* the copy alone fills a phone screen, so the plate takes a fixed band instead */
  .hero-center{min-height:0;padding-top:clamp(26px,5vw,44px)}
  /* same panorama on phones: full bleed, so it is as large as the screen allows */
  .hero-plate{height:auto;width:100vw;max-width:none;margin-inline:0}
  .hero-scroll{display:none}
  .hero-scroll{display:none}
}

/* the soft half of the headline, re-cut to clear the large-text contrast floor */
.hero-center .h1-soft{color:#8A7E74}

/* the old cover rules still reserved a band for the background image on small screens */
@media(max-width:1000px){
  .home .hero-full.has-cover.hero-center{min-height:0;padding-top:clamp(24px,5vw,40px)}
}

/* ============================================ type system, after Horse & Houses */

/*
  Their rule, read from the live theme: Vocago is display only — it never appears
  below about 26px. Everything smaller is General Sans. Body copy runs airy (16/32)
  with a touch of tracking, and eyebrow labels are widely letterspaced uppercase.
*/

/* display: Vocago, single weight, tight leading */
.hero-center h1,h2.h-sec,.h-stmt,.ab-lead,.b .b-n,.hero-sub{
  font-family:var(--disp);font-weight:400}
.hero-center h1{line-height:1.1}
h2.h-sec{line-height:1.14}

/* below display size, General Sans takes over */
.cat-card-t,.pc h3,.svc h3,.why h3,.step h3,.acc-b h3,.rev-top h3,.qp-h h3,
.mega-cat-t,.hub-sub-t,.svc-row-t,.cat-promo h3,.sm-title,.entry-content h3{
  font-family:var(--body);font-weight:500;letter-spacing:0}

/* body copy: their proportions, a little airier than before */
body{letter-spacing:.2px}
p,li,.sub,.hero-points li,.entry-content{line-height:1.8}
.cat-card-p,.pc .spec,.why p,.step p,.rev-card .txt{line-height:1.7}

/* eyebrow labels: wide tracking, as on their sections */
.label,.hero-eyebrow{letter-spacing:.3em}

/* the headline in caps, as the reference sets its display type */
.hero-center h1{text-transform:uppercase;letter-spacing:.01em}

/* ================================================== catalogue tiles and groups */

/*
  The reference's repeating pattern: a short introduction, then a grid of labelled
  product tiles. Same surfaces and radii as the rest of the site, so the page gains
  depth without gaining a second visual language.
*/
.tiles{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px)}
.tile a{display:grid;gap:12px;color:inherit}
.tile-img{display:block;overflow:hidden;border-radius:var(--r-md);
  background-color:var(--glass);border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);transition:transform .35s cubic-bezier(.2,.6,.2,1),border-color .3s}
.tile-img img{width:100%;aspect-ratio:4/3.2;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.tile a:hover .tile-img{transform:translateY(-4px);border-color:var(--acc-dim)}
.tile a:hover .tile-img img{transform:scale(1.04)}
.tile-t{font-size:.86rem;line-height:1.4;color:var(--w)}

/* one service given a feature of its own */
.spotlight{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center}
.spotlight-copy .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,30px)}
.spotlight-media{border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow);background-color:var(--glass)}
.spotlight-media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}

/* the promo card that closes the merchandise group */
.gift-promo{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px);
  flex-wrap:wrap;margin-top:clamp(24px,3vw,40px);padding:clamp(22px,2.6vw,34px);
  border-radius:var(--r-lg);background-color:var(--glass-2);border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.gift-promo h3{font-family:var(--body);font-weight:500;font-size:1.05rem;margin-bottom:6px}
.gift-promo p{color:var(--g);font-size:.9rem;max-width:56ch}

/* alternate grounds so the run of groups does not read as one long block */
.tiles-sec.is-alt,.gifts-sec{background:var(--alt-bg);border-block:1px solid var(--glass-brd)}

@media(max-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .spotlight{grid-template-columns:1fr}
  .spotlight-media{order:-1}
}
@media(max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}

/* ============================================ opening section and the scroller */

/*
  The page's first section after the hero: espresso ground, the claim split across
  two columns the way the reference does, and the work itself on a scroller beneath.
*/
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start;
  margin-bottom:clamp(32px,4vw,52px)}
.intro-grid .h-sec{max-width:18ch}
.intro-copy p{color:var(--g);font-size:.97rem;max-width:56ch}
.intro-copy p + p{margin-top:1em}

/*
  A moving row, full width of the window rather than the content column. The set is
  printed twice and the track slides by exactly one run, so the loop has no seam.
  It pauses on hover and for anyone who has asked for less motion.
*/
:root{--tile-gap:clamp(12px,1.4vw,20px)}
.scroller{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:flex;gap:var(--tile-gap);width:max-content;
  animation:tiles-marquee 64s linear infinite}
.scroller:hover .marquee-track,
.marquee-track:focus-within{animation-play-state:paused}
.tiles-scroll{display:flex;gap:var(--tile-gap);margin:0}
.tiles-scroll .tile{flex:0 0 clamp(190px,17vw,240px)}
@keyframes tiles-marquee{to{transform:translateX(calc(-50% - var(--tile-gap) / 2))}}

@media (prefers-reduced-motion:reduce){
  /* no drift: the row becomes an ordinary swipeable strip */
  .marquee-track{animation:none;overflow-x:auto;scroll-snap-type:x mandatory;width:auto}
  .tiles-scroll .tile{scroll-snap-align:start}
}

@media(max-width:900px){
  .intro-grid{grid-template-columns:1fr}
  .intro-grid .h-sec{max-width:24ch}
}

/* ---------------------------------------------- opening section: scale and fit */

/*
  Fewer, larger tiles read as more considered than many small ones — about four in
  view rather than six. The section also stops closer to the row: a full section's
  padding under a full-bleed strip left a band of dead ground.
*/
.intro-sec{padding-bottom:clamp(44px,4.6vw,68px)}
.tiles-scroll .tile{flex:0 0 clamp(250px,23vw,340px)}
.tiles-scroll .tile a{gap:14px}
.tiles-scroll .tile-img img{aspect-ratio:4/3}
.tiles-scroll .tile-t{font-size:.95rem}
.marquee-track{animation-duration:78s}