/* ==========================================================================
   Display Systems & Prints — v2
   Photography-first design. The booths are the show; the UI stays quiet.
   ========================================================================== */

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Variable.woff2') format('woff2');
  font-weight: 100 900;   /* variable wght axis — one file covers 400/500/600/700/900 */
  font-style: normal; font-display: swap;
}
:root {
  /* Brand — graphite ground, brand-blue accent */
  --accent:      #006DB1;
  --accent-soft: #2E93D8;
  --accent-deep: #005A93;
  --accent-ink:  #00558D;   /* accent used as text on light ground — WCAG AA */
  --accent-2:    #006DB1;
  --graphite:    #14171A;
  --graphite-2:  #1F242B;

  /* Legacy names retained so every existing rule re-themes automatically.
     They no longer describe hues — treat them as roles, not colours. */
  --blue:        var(--accent-ink);
  --blue-bright: var(--accent-soft);
  --blue-dark:   #003F6B;
  --navy:        var(--graphite);
  --navy-2:      var(--graphite-2);
  --amber:       var(--accent-soft);  /* consumed only on the graphite ground */

  --ink:   #14171A;
  --body:  #4A5158;
  --muted: #6E757C;
  --line:  #E4E7EA;
  --wash:  #F6F7F8;
  --white: #fff;

  --fs-hero: clamp(2.9rem, 5.8vw, 4.9rem);
  --fs-h2:   clamp(2.05rem, 3.4vw, 3.05rem);
  --fs-h3:   1.5rem;
  --fs-lead: 1.25rem;
  --fs-base: 1.0625rem;
  --fs-sm:   .9rem;
  --fs-xs:   .8rem;

  --r: 10px;
  --r-lg: 18px;
  --sh-sm: 0 1px 2px rgba(20,23,26,.06), 0 1px 3px rgba(20,23,26,.04);
  --sh-md: 0 8px 24px -10px rgba(20,23,26,.16), 0 2px 6px rgba(20,23,26,.05);
  --sh-lg: 0 28px 64px -24px rgba(20,23,26,.28), 0 6px 16px -6px rgba(20,23,26,.10);
  --container: 1240px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Roboto',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--body);
  background-color:var(--white);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); text-decoration:none; }
h1,h2,h3,h4{ color:var(--ink); line-height:1.12; margin:0 0 .45em; font-weight:600; letter-spacing:-.015em; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:600; letter-spacing:-.01em; }
p{ margin:0 0 1em; }

.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }
.section{ padding:96px 0; }
.section--wash{ background:var(--wash); }
.section--navy{ background:var(--navy); }
.section--navy h2,.section--navy h3{ color:var(--white); }
.section--navy p{ color:#B3B9BF; }

/* Eyebrow: small caps with rule */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue);
  margin-bottom:18px;
}
.eyebrow::before{ content:''; width:34px; height:2px; background:var(--blue); }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:''; width:34px; height:2px; background:var(--blue); }
.eyebrow--light{ color:var(--amber); }
.eyebrow--light::before,.eyebrow--light::after{ background:var(--amber); }

.section-head{ max-width:720px; margin-bottom:56px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ font-size:var(--fs-lead); color:var(--muted); margin-top:10px; }

/* ============================ Buttons ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:var(--fs-base); font-weight:600;
  padding:16px 32px; border-radius:100px;
  border:2px solid transparent; cursor:pointer; line-height:1;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.btn--primary{ background:var(--blue); color:var(--white); box-shadow:0 8px 24px -6px rgba(0,109,177,.5); }
.btn--primary:hover{ background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(0,109,177,.55); }
.btn--ghost{ background:rgba(255,255,255,.06); color:var(--white); border-color:rgba(255,255,255,.35); }
.btn--ghost:hover{ border-color:var(--white); background:rgba(255,255,255,.14); }
.btn--outline{ background:transparent; color:var(--ink); border-color:#CFD3D8; }
.btn--outline:hover{ border-color:var(--blue); color:var(--blue); }
.btn .arr{ transition:transform .2s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* ============================ Topbar + Header ============================ */
.topbar{ background:var(--navy); color:#9AA1A8; font-size:var(--fs-sm); }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; gap:16px; }
.topbar a{ color:#CDD1D6; }
.topbar a:hover{ color:var(--white); }
.topbar__contact{ display:flex; gap:26px; flex-wrap:wrap; }
.topbar__contact a{ display:inline-flex; align-items:center; gap:8px; }
.topbar__contact svg{ width:15px; height:15px; flex:0 0 auto; opacity:.8; }
.topbar__contact a:hover svg{ opacity:1; }
.topbar__social{ display:flex; gap:18px; }
.topbar__social a{ display:inline-flex; align-items: flex-start; gap:7px; }
.topbar__social svg{ width:20px; height:20px; flex:0 0 auto; opacity:.8; }
.topbar__social a:hover svg{ opacity:1; }

.header{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:10px 0; }
.header__logo img{ height:56px; width:auto; }
.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  position:relative; color:var(--ink); font-weight:500; font-size:var(--fs-base);
  padding:10px 10px; transition:color .15s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:4px; height:2px;
  background:var(--blue); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease);
}
.nav a:hover{ color:var(--blue); }
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }
.nav a.is-active{ color:var(--blue); }
.header__cta{ white-space:nowrap; padding:13px 26px; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; }

/* ============================ Hero ============================ */
.hero{ position:relative; background:var(--navy); color:var(--white); min-height:86vh; display:flex; align-items:center; overflow:hidden; }
/* .hero is a flex parent, so its .container is a flex item and would shrink to
   fit its content instead of filling the 1240px container width the header uses. */
.hero > .container{ width:100%; }
.hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center 30%; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--navy) 0%, rgba(20,23,26,.25) 34%, rgba(20,23,26,.45) 100%),
    linear-gradient(96deg, rgba(20,23,26,.96) 6%, rgba(20,23,26,.78) 38%, rgba(20,23,26,.18) 78%, rgba(20,23,26,.05) 100%);
}
.hero__inner{ position:relative; z-index:1; max-width:700px; padding:150px 0 120px; }
.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.05em;
  color:#C7E4F5; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 18px; border-radius:100px; margin-bottom:28px;
 
}
.hero__kicker::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--amber); }
.hero h1{
  color:var(--white); font-size:var(--fs-hero); font-weight:900;
  letter-spacing:-.02em; line-height:1.06; margin-bottom:24px;
}
.hero h1 em{ font-style:normal; color:var(--blue-bright); }
.hero__sub{ font-size:var(--fs-lead); color:#C2C7CC; max-width:540px; margin-bottom:40px; }
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero__meta{
  display:flex; gap:0; margin-top:64px;
  border-top:1px solid rgba(255,255,255,.16);
  flex-wrap:wrap;
}
.hero__meta > div{ padding:26px 44px 0 0; margin-right:44px; }
.hero__meta strong{ display:block; font-size:2rem; color:var(--white); font-weight:700; letter-spacing:-.02em; }
.hero__meta span{ font-size:var(--fs-sm); color:#9AA1A8; }

/* ============================ Trust strip ============================ */
.trust{ padding:44px 0; border-bottom:1px solid var(--line); }
.trust__note{ text-align:center; font-size:var(--fs-sm); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:30px; }
.logo-strip{ display:flex; align-items:center; justify-content:center; gap:44px 52px; flex-wrap:wrap; }
.logo-strip img{ height:40px; width:auto; max-width:150px; object-fit:contain; }

/* ============================ Showcase (signature) ============================ */
.showcase{ padding:60px 0; }
.showcase__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:230px;
  gap:14px;
  margin-top:8px;
}
.showcase__item{ position:relative; border-radius:var(--r); overflow:hidden; display:block; }
.showcase__item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.showcase__item:hover img{ transform:scale(1.05); }
.showcase__item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,23,26,.62) 0%, rgba(20,23,26,0) 45%);
  opacity:.85; transition:opacity .3s var(--ease);
}
.showcase__item:hover::after{ opacity:1; }
.showcase__tag{
  position:absolute; left:16px; bottom:14px; z-index:1;
  color:var(--white); font-size:var(--fs-sm); font-weight:600; letter-spacing:.02em;
}
.showcase__item--tall{ grid-row:span 2; }
.showcase__item--wide{ grid-column:span 2; }

/* ============================ Services: numbered rows ============================ */
.svc{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:64px 0; border-bottom:1px solid var(--line); }
.svc:last-child{ border-bottom:0; }
.svc:nth-child(even) .svc__media{ order:2; }
.svc__num{
  font-size:4.5rem; font-weight:900; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px #D1D5D9;
  margin-bottom:16px; letter-spacing:-.02em;
}
.svc__body h3{ font-size:1.7rem; font-weight:700; }
.svc__body p{ font-size:var(--fs-lead); color:var(--muted); margin:14px 0 26px; max-width:480px; }
.svc__media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); aspect-ratio:16/11; }
.svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc:hover .svc__media img{ transform:scale(1.04); }
.svc__link{ font-weight:600; display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-base); }
.svc__link .arr{ transition:transform .2s var(--ease); }
.svc__link:hover .arr{ transform:translateX(5px); }

/* ============================ Case studies ============================ */
.cs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.cs{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:3/3.6; display:flex; align-items:flex-end;
  box-shadow:var(--sh-md);
}
.cs img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cs:hover img{ transform:scale(1.06); }
.cs::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,23,26,.92) 0%, rgba(20,23,26,.35) 46%, rgba(20,23,26,.08) 70%);
}
.cs__body{ position:relative; z-index:1; padding:28px; }
.cs__brand{
  display:inline-block; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:8px;
}
.cs__body h3{ color:var(--white); font-size:1.35rem; margin-bottom:8px; }
.cs__body span{ color:#CDD1D6; font-size:var(--fs-sm); font-weight:600; display:inline-flex; align-items:center; gap:6px; }

/* ============================ Stats band ============================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center; }
.stats strong{
  display:block; font-size:3.4rem; font-weight:600; letter-spacing:-.03em;
  color:var(--white); line-height:1;
}
.stats strong small{ font-size:1.6rem; color:var(--blue-bright); font-weight:700; }
.stats span{ display:block; margin-top:10px; color:#9AA1A8; font-size:var(--fs-sm); font-weight:500; }

/* ============================ Product cards ============================ */
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.prod{
  background:var(--white); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  display:flex; flex-direction:column;
}
.prod:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.prod__media{ overflow:hidden; aspect-ratio:4/3; }
.prod__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.prod:hover .prod__media img{ transform:scale(1.06); }
.prod__body{ padding:22px 24px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.prod__body h3{ font-size:1.1rem; margin:0; }
.prod__body .arr{ color:var(--blue); font-weight:700; transition:transform .2s var(--ease); }
.prod:hover .arr{ transform:translateX(4px); }

/* ============================ Testimonials ============================ */
.testi-feature{
  max-width:820px; margin:0 auto; text-align:center;
}
.testi-feature blockquote{
  font-size:clamp(1.3rem, 2.2vw, 1.7rem); font-weight:500; line-height:1.45;
  color:var(--ink); margin:0 0 28px; letter-spacing:-.01em;
}
.testi-feature blockquote::before{ content:'\201C'; display:block; font-size:4.5rem; line-height:.6; color:var(--blue); font-weight:900; margin-bottom:22px; }
.testi-feature cite{ font-style:normal; font-weight:700; color:var(--ink); }
.testi-feature cite small{ display:block; font-weight:500; color:var(--muted); margin-top:2px; }
.testi-row{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:56px; }
.testi{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 32px; box-shadow:var(--sh-sm);
}
.testi p{ color:var(--body); margin-bottom:16px; }
.testi strong{ color:var(--ink); }
.testi .stars{ color:var(--amber); letter-spacing:3px; margin-bottom:12px; font-size:var(--fs-sm); }

/* ============================ FAQ ============================ */
.faq details{
  border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:14px; background:var(--white); overflow:hidden;
  transition:box-shadow .2s var(--ease);
}
.faq details[open]{ box-shadow:var(--sh-md); border-color:#D3D7DB; }
.faq summary{
  cursor:pointer; font-weight:600; color:var(--ink);
  padding:20px 52px 20px 24px; list-style:none; position:relative;
  font-size:1.05rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:22px; top:50%;
  transform:translateY(-50%); font-size:1.5rem; font-weight:400; color:var(--blue);
  transition:transform .2s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq .faq__a{ padding:0 24px 22px; color:var(--body); }

/* ============================ CTA band ============================ */
.cta-band{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  padding:72px 64px; box-shadow:var(--sh-lg);
  background:var(--navy);
}
.cta-band__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.22; }
.cta-band__scrim{ position:absolute; inset:0; background:linear-gradient(100deg, var(--navy) 20%, rgba(20,23,26,.6) 100%); }
.cta-band__inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.cta-band h2{ color:var(--white); margin:0 0 8px; }
.cta-band p{ color:#B3B9BF; margin:0; font-size:var(--fs-lead); }

/* ============================ Footer ============================ */
.footer{ background:var(--navy); color:#9AA1A8; font-size:var(--fs-sm); }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:48px; padding:72px 0 52px; }
.footer h4{ color:var(--white); font-size:var(--fs-base); margin-bottom:20px; font-weight:600; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:11px; }
.footer a{ color:#B3B9BF; transition:color .15s var(--ease); }
.footer a:hover{ color:var(--white); }
.footer__brand img{ height:52px; width:auto; margin-bottom:18px; background:var(--white); padding:8px 14px; border-radius:10px; }
.footer__brand p{ max-width:300px; }
.footer__social{ display:flex; gap:10px; margin-top:20px; }
.footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  color:#B3B9BF; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.footer__social a:hover{
  background:var(--blue); color:var(--white);
  border-color:var(--blue); transform:translateY(-3px);
}
.footer__social svg{ width:19px; height:19px; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:22px 0;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* ============================ Popup + Forms ============================ */
.popup-overlay{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(20,23,26,.6); align-items:center; justify-content:center; padding:20px;
}
.popup-overlay.is-visible{ display:flex; }
.popup{
  background:var(--white); border-radius:var(--r-lg);
  max-width:460px; width:100%; max-height:92vh; overflow-y:auto;
  padding:38px 36px 34px; position:relative; box-shadow:var(--sh-lg);
}
.popup::before{ content:''; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--blue), var(--blue-bright)); }
.popup__close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  border:0; background:var(--wash); color:var(--muted); font-size:20px; cursor:pointer; line-height:1;
}
.popup__close:hover{ background:var(--line); color:var(--ink); }

.form{ display:flex; flex-direction:column; gap:18px; }
.form label{ font-size:var(--fs-sm); font-weight:600; color:#3A4046; display:block; }
.form label .req{ color:#d93025; }
.form input,.form textarea{
  width:100%; font-family:inherit; font-size:var(--fs-base); color:var(--ink);
  background:var(--white); border:1px solid #D2D6DA; border-radius:8px;
  padding:13px 15px; margin-top:6px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form input:focus,.form textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,109,177,.14);
}
.form .is-error input,.form .is-error textarea{ border-color:#d93025; }
.form .field-error{ color:#d93025; font-size:var(--fs-xs); margin-top:4px; }
.form__msg{ font-size:var(--fs-sm); border-radius:8px; padding:12px 14px; display:none; }
.form__msg.ok{ display:block; background:#E6F4EA; color:#1E7E34; }
.form__msg.err{ display:block; background:#FDECEA; color:#C5221F; }
.form .hp{ position:absolute !important; left:-9999px !important; opacity:0; height:0; overflow:hidden; }

/* ============================ Responsive ============================ */
@media (max-width:1024px){
  .showcase__grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; }
  .cs-grid{ grid-template-columns:1fr 1fr; }
  .prod-grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .svc{ gap:40px; }
}
@media (max-width:768px){
  .section{ padding:64px 0; }
  .hero{ min-height:0; }
  .hero__inner{ padding:96px 0 72px; }
  .hero__meta > div{ padding:20px 28px 0 0; margin-right:20px; }
  .hero__meta strong{ font-size:1.5rem; }
  .topbar__social{ display:none; }
  .topbar__inner{ justify-content:center; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; background:var(--white);
    border-bottom:1px solid var(--line); padding:12px 22px 22px; box-shadow:var(--sh-md);
  }
  .nav.is-open{ display:flex; }
  .nav a::after{ display:none; }
  .nav-toggle{ display:block; }
  .header__cta{ display:none; }
  .svc{ grid-template-columns:1fr; gap:24px; padding:44px 0; }
  .svc:nth-child(even) .svc__media{ order:0; }
  .svc__num{ font-size:3rem; }
  .showcase__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:170px; }
  .cs-grid{ grid-template-columns:1fr; }
  .prod-grid{ grid-template-columns:1fr; }
  .testi-row{ grid-template-columns:1fr; }
  .cta-band{ padding:44px 30px; }
  .footer__grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:480px){
  .stats{ grid-template-columns:1fr 1fr; gap:28px; }
  .stats strong{ font-size:2.4rem; }
  .logo-strip{ gap:32px; }
  .logo-strip img{ height:36px; }
}

/* ============================ Article content (WP-rendered HTML) ============================ */
.post-content{ font-size:1.06rem; color:var(--body); }
.post-content h2{ font-size:1.7rem; margin-top:1.6em; }
.post-content h3{ font-size:1.3rem; margin-top:1.4em; }
.post-content img{ border-radius:var(--r); margin:24px 0; box-shadow:var(--sh-md); height:auto; }
.post-content a{ text-decoration:underline; text-underline-offset:3px; }
.post-content ul,.post-content ol{ padding-left:1.3em; margin-bottom:1.2em; }
.post-content li{ margin-bottom:.5em; }
.post-content blockquote{ border-left:4px solid var(--blue); margin:1.5em 0; padding:.5em 0 .5em 1.2em; color:var(--ink); font-weight:500; }
.post-content table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:var(--fs-sm); }
.post-content td,.post-content th{ border:1px solid var(--line); padding:10px 14px; text-align:left; }
.post-content iframe{ max-width:100%; border:0; border-radius:var(--r); }
.contact-map iframe{ width:100%; height:320px; display:block; border:0; }
@media (max-width:768px){
  .grid[style*="grid-template-columns:1fr 1fr"], .grid[style*="1.1fr .9fr"], .grid[style*="1fr 1.1fr"]{ grid-template-columns:1fr !important; }
}

/* ============================ Inline quote section ============================ */
.tick-list{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:14px; }
.tick-list li{ padding-left:34px; position:relative; color:#D1D5D9; }
.tick-list li::before{
  content:'✓'; position:absolute; left:0; top:0;
  width:22px; height:22px; border-radius:50%;
  background:rgba(46,147,216,.25); color:var(--blue-bright);
  font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.quote-card{
  background:var(--white); border-radius:var(--r-lg); padding:36px;
  box-shadow:var(--sh-lg);
}
@media (max-width:900px){ .quote-split{ grid-template-columns:1fr !important; gap:36px !important; } }

/* --- Compact quote form ---------------------------------------------------
   The short fields pair up two per row. Stacked full width the card was a
   700px ladder of inputs standing next to a half-empty column; paired, the
   whole form fits the eye in one go.
   Selectors are doubled up (.form.form--compact) so they outrank the plain
   .form input/label rules further down this file. */
/* auto-fit rather than a fixed 1fr 1fr: these forms sit in containers of very
   different widths (the quote card, the contact card beside the map), and a
   fixed pair collapses to ~190px fields whenever the container is squeezed —
   at 1024px both pages hit that. Letting the track decide means the pairs
   split exactly when they no longer fit, whatever the container or viewport. */
.form.form--compact{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:15px 16px; }
.form.form--compact > *{ grid-column:1 / -1; }   /* full width unless told otherwise */
.form.form--compact .field--half{ grid-column:span 1; }
.form.form--compact label{ font-size:var(--fs-xs); letter-spacing:.03em; }
.form.form--compact input,
.form.form--compact textarea{ padding:11px 14px; margin-top:5px; border-radius:9px; }
.form.form--compact textarea{ resize:vertical; min-height:82px; }
.form.form--compact .btn{ width:100%; margin-top:3px; }

/* Two 250px columns is already tight — below this the pairs stack */
@media (max-width:520px){
  .form.form--compact{ grid-template-columns:1fr; gap:13px; }
  .form.form--compact .field--half{ grid-column:1 / -1; }
}

/* --- Talk-to-a-human panel beside the form -------------------------------
   Same phone and email as the topbar and footer, given enough presence to
   balance the card opposite. */
.quote-direct{ display:flex; flex-direction:column; gap:12px; margin-top:30px; }
.quote-direct__item{
  display:flex; align-items:center; gap:15px;
  padding:14px 18px; border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.quote-direct__item:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(46,147,216,.55);
  transform:translateY(-2px);
}
.quote-direct__icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(46,147,216,.18); color:var(--blue-bright);
}
.quote-direct__icon svg{ width:19px; height:19px; }
.quote-direct__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.quote-direct__text small{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#9AA1A8;
}
.quote-direct__text strong{
  color:var(--white); font-size:1.02rem; font-weight:600;
  overflow-wrap:anywhere;                      /* the email is 33 characters */
}
@media (max-width:600px){
  .quote-direct{ gap:10px; margin-top:24px; }
  .quote-direct__item{ padding:12px 14px; gap:12px; }
  .quote-direct__icon{ width:38px; height:38px; }
  .quote-direct__text strong{ font-size:.95rem; }
}

/* ============================ Sticky mobile action bar ============================ */
.mobile-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:950;
  background:var(--white); border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); gap:10px;
  box-shadow:0 -6px 24px rgba(20,23,26,.12);
}
.mobile-bar__btn{
  flex:1; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-base); padding:14px 10px;
  border-radius:100px; border:0; cursor:pointer; font-family:inherit;
}
.mobile-bar__btn--call{ background:var(--wash); color:var(--ink); border:1.5px solid var(--line); }
.mobile-bar__btn--quote{ background:var(--blue); color:var(--white); box-shadow:0 6px 18px -4px rgba(0,109,177,.5); }
@media (max-width:768px){
  .mobile-bar{ display:flex; }
  body{ padding-bottom:72px; }
}

/* ============================ Scroll reveal (JS adds .rv) ============================ */
@media (prefers-reduced-motion: no-preference){
  .rv{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .rv.rv-in{ opacity:1; transform:none; }
}

/* ============================ Depth & polish ============================ */
.section--navy{ position:relative; overflow:hidden; }
.section--navy::before{
  content:''; position:absolute; right:-140px; top:-140px; width:420px; height:420px;
  border-radius:50%; background:radial-gradient(circle, rgba(46,147,216,.18) 0%, rgba(46,147,216,0) 70%);
}
.showcase__item,.prod,.svc__media{ will-change:transform; }
.prod__media{ position:relative; }
.prod__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,23,26,.24), rgba(20,23,26,0) 45%);
  opacity:0; transition:opacity .25s var(--ease);
}
.prod:hover .prod__media::after{ opacity:1; }
.testi{ position:relative; }
.testi::before{
  content:'\201C'; position:absolute; top:14px; right:22px;
  font-size:3.2rem; color:var(--line); font-weight:900; line-height:1;
}

/* Blog cards: featured graphics have baked-in text — never crop them */
/* ==========================================================================
   SERVICE PAGES — gallery polish, catalog button, button rows
   ========================================================================== */
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.btn--catalog{ white-space:nowrap; }
.section-head .btn--catalog{ margin-top:22px; }

/* ==========================================================================
   ZIGZAG SERVICE ROWS — /our-services/ (body.page-zigzag)
   Rows alternate sides. NOTE: the global .svc:nth-child(even) rule sets the
   media to order:2, which is where it already sits in the DOM — so it never
   flipped anything. order:-1 is what actually moves it in front.
   ========================================================================== */
.page-zigzag .svc{
  align-items:center; gap:60px; padding:56px 0;
  border-bottom:1px solid var(--line);
}
.page-zigzag .svc:last-of-type{ border-bottom:0; }
.page-zigzag .svc:nth-of-type(even) .svc__media{ order:-1; }
.page-zigzag .svc:nth-of-type(even) .svc__body{ order:1; }

.page-zigzag .svc__media{ aspect-ratio:16/11; border-radius:var(--r-lg); box-shadow:var(--sh-lg); }
.page-zigzag .svc__num{ font-size:4rem; -webkit-text-stroke:1.5px #D7DBDF; margin-bottom:6px; }
.page-zigzag .svc__body h3{ font-size:1.65rem; }
.page-zigzag .svc__body p{ font-size:var(--fs-lead); color:var(--muted); margin:12px 0 22px; max-width:440px; }
/* the copy hugs the photo it belongs to */
.page-zigzag .svc:nth-of-type(even) .svc__body{ padding-left:8px; }
.page-zigzag .svc:nth-of-type(odd) .svc__body{ padding-right:8px; }

@media (max-width:768px){
  .page-zigzag .svc{ grid-template-columns:1fr; gap:20px; padding:32px 0; }
  /* photo leads on every row once stacked, so the rhythm stays even */
  .page-zigzag .svc .svc__media{ order:-1; }
  .page-zigzag .svc .svc__body{ order:0; padding:0; }
  .page-zigzag .svc__num{ font-size:3rem; }
  .page-zigzag .svc__body h3{ font-size:1.35rem; }
  .page-zigzag .svc__body p{ font-size:1rem; margin:10px 0 16px; }
}

/* --- Mini cards: three support services side by side instead of stacked
       full-width rows (same content, roughly a third of the height) ------- */
.mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mini{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:1px solid rgba(20,23,26,.07);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mini:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); border-color:rgba(0,109,177,.18); }
.mini__media{ aspect-ratio:16/10; overflow:hidden; background:var(--wash); }
.mini__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.mini:hover .mini__media img{ transform:scale(1.05); }
.mini__body{ padding:20px 22px 22px; }
.mini__num{
  display:inline-block; margin-bottom:8px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em;
  color:var(--blue); background:rgba(0,109,177,.08);
  border-radius:100px; padding:4px 11px;
}
.mini__body h3{ font-size:1.12rem; margin:0 0 8px; letter-spacing:-.01em; }
.mini__body p{ margin:0; font-size:var(--fs-sm); line-height:1.62; color:var(--muted); }

@media (max-width:900px){ .mini-grid{ grid-template-columns:1fr 1fr; gap:16px; } }
@media (max-width:600px){ .mini-grid{ grid-template-columns:1fr; } }

/* --- Compact scale for the four service pages (body.page-service) --------
   Same components, tighter rhythm: these pages are dense catalogues, not
   editorial spreads, so the generous section padding just adds scrolling. */
.page-service .section,
.page-service .showcase{ padding:44px 0; }
.page-service .showcase{ padding-bottom:36px; }
.page-service .hero--inner .hero__inner{ padding:52px 0 46px; }
.page-service .section-head{ margin-bottom:28px; }
.page-service .section-head p{ font-size:1.04rem; line-height:1.6; }

.page-service .svc{ padding:30px 0; gap:44px; }
.page-service .svc:first-of-type{ padding-top:4px; }
.page-service .svc__num{ font-size:3.2rem; margin-bottom:8px; }
.page-service .svc__body h3{ font-size:1.4rem; }
.page-service .svc__body p{ margin:10px 0 16px; line-height:1.65; max-width:none; }
.page-service .svc__media{ aspect-ratio:16/10; }

.page-service .prod-grid{ gap:18px; }
.page-service .prod__body{ padding:16px 18px; gap:10px; }
.page-service .prod__body h3{ font-size:1rem; }
.page-service .prod__body .arr{ width:34px; height:34px; }

.page-service .tabs__bar{ padding-bottom:14px; margin-bottom:18px; }
.page-service .showcase__grid[data-lightbox]{ grid-auto-rows:180px; gap:12px; }
.page-service .section--navy{ padding:48px 0; }
.page-service .quote-card{ padding:28px; }
.page-service .chip-row{ gap:6px; margin-bottom:20px;}

@media (max-width:768px){
  .page-service .section,
  .page-service .showcase{ padding:32px 0; }
  .page-service .svc{ padding:22px 0; gap:20px; }
  .page-service .hero--inner .hero__inner{ padding:38px 0 34px; }
  .page-service .showcase__grid[data-lightbox]{ grid-auto-rows:130px; }
}

/* Gallery tabs */
.tabs__bar{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-bottom:18px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.tabs__btn{
  position:relative; cursor:pointer; font-family:inherit;
  padding:11px 22px; border-radius:100px;
  font-size:.95rem; font-weight:600; color:var(--body);
  background:var(--white); border:1px solid var(--line);
  transition:color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.tabs__btn:hover{ color:var(--blue); border-color:rgba(0,109,177,.35); background:rgba(0,109,177,.04); }
.tabs__btn.is-active{
  color:var(--white); background:var(--blue); border-color:var(--blue);
  box-shadow:0 8px 18px -8px rgba(0,109,177,.7);
}
.tabs__panel.is-hidden{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .tabs__panel:not(.is-hidden){ animation:tabIn .3s var(--ease); }
  @keyframes tabIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
}
@media (max-width:600px){
  .tabs__bar{ gap:6px; padding-bottom:14px; margin-bottom:20px; }
  .tabs__btn{ padding:9px 16px; font-size:.86rem; }
}

/* Gallery grids: even tiles, quiet frame, lift on hover (lightbox adds the
   magnifier cue and the zoom-in cursor) */
.showcase__grid[data-lightbox]{ grid-auto-rows:220px; gap:14px; }
.showcase__grid[data-lightbox] .showcase__item{
  border-radius:var(--r); background:var(--wash);
  box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.showcase__grid[data-lightbox] .showcase__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.showcase__grid[data-lightbox] .showcase__item:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.showcase__grid[data-lightbox] .showcase__item:hover img{ transform:scale(1.05); }
/* the generic tile scrim isn't wanted on a plain photo gallery */
.showcase__grid[data-lightbox] .showcase__item::after{ background:none; }

@media (max-width:1024px){ .showcase__grid[data-lightbox]{ grid-template-columns:repeat(3,1fr); grid-auto-rows:180px; } }
@media (max-width:768px){ .showcase__grid[data-lightbox]{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:10px; } }

/* ==========================================================================
   PAGINATION — blog listing pages
   ========================================================================== */
.pagination{
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; margin-top:48px;
}
.pagination__num,.pagination__arrow{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 12px; border-radius:12px;
  font-size:.96rem; font-weight:600; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.pagination__num:hover,.pagination__arrow:not(.is-disabled):hover{
  border-color:var(--blue); color:var(--blue); background:rgba(0,109,177,.05);
}
.pagination__num:active,.pagination__arrow:not(.is-disabled):active{ transform:scale(.95); }
.pagination__num.is-current{
  background:var(--blue); border-color:var(--blue); color:var(--white);
  box-shadow:0 8px 18px -8px rgba(0,109,177,.7);
}
.pagination__arrow{ padding:0; }
.pagination__arrow svg{ width:19px; height:19px; }
.pagination__arrow.is-disabled{ opacity:.35; pointer-events:none; }

@media (max-width:600px){
  .pagination{ gap:7px; margin-top:36px; }
  .pagination__num,.pagination__arrow{ min-width:40px; height:40px; padding:0 9px; font-size:.9rem; }
}

/* Publish date under the article title, on the dark banner */
.hero--inner .post-date{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.04em;
  color:#C2C7CC;
}
.hero--inner .post-date::before{
  content:''; width:15px; height:15px; flex:0 0 auto; opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9CBDB' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Featured image opening a blog article (same artwork as its listing card) */
.post-content .post-featured{
  width:100%; height:auto; display:block;
  margin:0 0 32px; border-radius:var(--r-lg);
  box-shadow:var(--sh-md); background:var(--wash);
}
@media (max-width:768px){
  .post-content .post-featured{ margin-bottom:24px; border-radius:var(--r); }
}

/* Blog cards: featured graphics have baked-in text, so they are letterboxed
   (contain) inside a fixed frame rather than cropped to fill it. */
.post-card{ display:flex; flex-direction:column; }
.post-card .prod__media{
  aspect-ratio:16/10; background:var(--wash);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(20,23,26,.06);
}
.post-card .prod__media img{ width:100%; height:100%; object-fit:contain; }
.post-card .prod__media::after{ content:none; }   /* no dark scrim over artwork */

.post-card .card__body{
  display:flex; flex-direction:column; flex:1;
  padding:22px 24px 20px; gap:8px;
}
.post-card h3{
  font-size:1.06rem; line-height:1.38; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; transition:color .2s var(--ease);
}
.post-card p{
  font-size:var(--fs-sm); color:var(--muted); margin:0; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
/* Read cue pinned to the bottom so every card ends on the same line */
.post-card .card__body::after{
  content:'Read article →';
  margin-top:auto; padding-top:14px;
  font-size:var(--fs-sm); font-weight:600; color:var(--blue);
  transition:transform .2s var(--ease);
}
.post-card:hover h3{ color:var(--blue); }
.post-card:hover .card__body::after{ transform:translateX(4px); }

/* Published date, above the title */
.post-card__date{
  display:flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.post-card__date::before{
  content:''; width:14px; height:14px; flex:0 0 auto; opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375879B' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Product instruction diagrams: centered, never cropped */
.diagram-block{ text-align:center; margin-bottom:56px; }
.diagram-block:last-child{ margin-bottom:0; }
.diagram-block h3{ margin-bottom:10px; }
.diagram-block h3::after{
  content:''; display:block; width:44px; height:3px; border-radius:2px;
  background:var(--blue); margin:14px auto 0;
}
.diagram-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; margin-top:26px; box-shadow:var(--sh-sm);
}
.diagram-card img{ width:100%; max-width:880px; height:auto; margin:0 auto; }

/* ============================ Product detail: gallery + content ============================ */
.pd-gallery{ position:sticky; top:120px; }
.pd-main{
  border-radius:var(--r-lg); overflow:hidden; background:var(--wash);
  border:1px solid var(--line); aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
}
.pd-main img{ width:100%; height:100%; object-fit:cover; transition:opacity .25s var(--ease); }
/* Thumbnails are a sliding track wherever they appear — product pages and the
   service-page galleries alike. main.js wraps this and inserts the arrows.
   --thumbs-visible is how many fit before the rest have to be scrolled to;
   each context sets its own below. Was a fixed 5-up grid, which left 11 product
   thumbnails sitting as a ragged 5 + 5 + 1. */
.pd-thumbs{
  --thumb-gap:10px; --thumbs-visible:5;
  display:flex; gap:var(--thumb-gap); margin-top:12px;
  overflow-x:auto; overscroll-behavior-x:contain;
  /* proximity, not mandatory: the track is often only a little wider than its
     box, and under mandatory the end position isn't a valid snap point to rest
     at — the browser springs the strip back to the start and the arrows look
     broken. */
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                        /* the arrows replace it */
}
.pd-thumbs::-webkit-scrollbar{ display:none; }
.pd-thumbs:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:3px; border-radius:10px; }
.pd-thumb{
  flex:0 0 calc((100% - (var(--thumbs-visible) - 1) * var(--thumb-gap)) / var(--thumbs-visible));
  scroll-snap-align:start;
  border:2px solid var(--line); border-radius:10px; overflow:hidden; padding:0;
  background:var(--wash); cursor:pointer; aspect-ratio:1;
  transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb:hover{ transform:translateY(-2px); }
.pd-thumb.is-active{ border-color:var(--blue); }
.pd-cta-card{
  background:var(--wash); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px; margin:4px 0 28px;
}
.pd-cta-note{ font-size:var(--fs-sm); color:var(--body); margin-bottom:14px; }
.pd-cta-note strong{ color:var(--ink); }
.pd-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.pd-cta-actions .btn{ padding:14px 24px; font-size:var(--fs-sm); }

/* --- Price + option pickers on the product page ------------------------- */
.pd-price{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.pd-price__from{ font-size:var(--fs-sm); font-weight:600; color:var(--muted); }
.pd-price__amount{ font-size:1.9rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.pd-price__note{ flex:1 0 100%; font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }

.pd-options{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.pd-option label{ display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.pd-option select{
  width:100%; font-family:inherit; font-size:var(--fs-base); color:var(--ink);
  background:var(--white); border:1px solid #D2D6DA; border-radius:9px;
  padding:11px 38px 11px 14px; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23486581' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pd-option select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,109,177,.14); }

/* --- Description / Reviews tabs ----------------------------------------- */
.pd-tabs{ margin-top:26px; }
.pd-reviews{ display:flex; flex-direction:column; gap:18px; }
.pd-review{ border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:var(--white); }
.pd-review__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.pd-review__author{ font-weight:700; color:var(--ink); }
.pd-review__date{ font-size:var(--fs-xs); color:var(--muted); }
.pd-review__stars{ color:var(--accent); letter-spacing:2px; font-size:.95rem; }
.pd-review__stars .is-off{ color:#DCE0E4; }
.pd-review p{ margin:0; }
.pd-reviews__empty{ color:var(--muted); font-size:var(--fs-sm); margin:0; }
/* Short intro beside the gallery — the long write-up lives in the Description
   tab below, mirroring how the reference page splits the two. */
.pd-intro{ color:var(--body); margin-bottom:22px; }
.pd-intro p{ margin:0 0 12px; }
.pd-intro p:first-child{ font-size:var(--fs-lead); color:var(--ink); }
.pd-intro p:last-child{ margin-bottom:0; }
.pd-content{ color:var(--body); }
.pd-content > p:first-child{ font-size:var(--fs-lead); color:var(--ink); }
.pd-content h4, .pd-content p > strong:only-child{
  display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue);
  border-top:1px solid var(--line); padding-top:22px; margin-top:26px; margin-bottom:12px;
}
.pd-content ul{ list-style:none; padding:0; margin:0 0 1.2em; display:flex; flex-direction:column; gap:10px; }
.pd-content ul li{ padding-left:28px; position:relative; }
.pd-content ul li::before{
  content:'✓'; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(0,109,177,.1); color:var(--blue); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.pd-content ul li strong{ color:var(--ink); }
@media (max-width:900px){
  .pd-split{ grid-template-columns:1fr !important; gap:36px !important; }
  .pd-gallery{ position:static; }
}

/* --- The same gallery dropped into an .svc row (/printing-installation/) ----
   Takes the slot .svc__media used to hold, so it keeps that frame: 16/11 crop,
   rounded corners, lifted shadow. Nothing here is sticky — the row scrolls as
   one block, unlike the product-detail column this component came from. */
.svc__gallery .pd-gallery{ position:static; }
.svc__gallery .pd-main{
  aspect-ratio:16/11; border:0; box-shadow:var(--sh-lg);
}
.svc:nth-child(even) .svc__gallery{ order:2; }

/* This gallery sits in a wider column than the product page's, but its thumbs
   are bigger, so four in view rather than five. */
.svc__gallery .pd-thumbs{ --thumbs-visible:4; }

/* main.js moves the track in here; without JS it keeps its own margin above */
.pd-thumbs-wrap{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.pd-thumbs-wrap .pd-thumbs{ margin-top:0; }
.pd-thumbs__arrow{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; padding:0; cursor:pointer;
  color:var(--blue); background:var(--white);
  border:1.5px solid rgba(0,109,177,.28);
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), opacity .2s var(--ease);
}
.pd-thumbs__arrow svg{ width:17px; height:17px; }
.pd-thumbs__arrow:hover:not(:disabled){ background:var(--blue); color:var(--white); border-color:var(--blue); }
.pd-thumbs__arrow:disabled{ opacity:.3; cursor:default; }
/* Every thumbnail already fits — the arrows would have nothing to do */
.pd-thumbs-wrap.is-static .pd-thumbs__arrow{ display:none; }

@media (max-width:768px){
  .svc:nth-child(even) .svc__gallery{ order:0; }
  .pd-thumbs{ --thumb-gap:8px; --thumbs-visible:4; }
  .svc__gallery .pd-thumbs{ --thumbs-visible:3; }
  .pd-thumbs-wrap{ gap:8px; }
}
@media (max-width:480px){
  .pd-thumbs{ --thumb-gap:6px; --thumbs-visible:3; }
  .pd-thumb{ border-width:1.5px; border-radius:8px; }
  .pd-thumbs-wrap{ gap:6px; }
  .pd-thumbs__arrow{ width:30px; height:30px; }
  .pd-thumbs__arrow svg{ width:15px; height:15px; }
}

/* ============================ Setup accordions ============================ */
.setup-acc{
  border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:14px; background:var(--white); overflow:hidden;
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.setup-acc[open]{ box-shadow:var(--sh-md); border-color:#D3D7DB; }
.setup-acc summary{
  cursor:pointer; font-weight:600; color:var(--ink); font-size:1.02rem;
  padding:18px 52px 18px 22px; list-style:none; position:relative;
}
.setup-acc summary::-webkit-details-marker{ display:none; }
.setup-acc summary::after{
  content:'+'; position:absolute; right:22px; top:50%;
  transform:translateY(-50%); font-size:1.4rem; color:var(--blue);
  transition:transform .25s var(--ease);
}
.setup-acc[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.setup-acc__body{ padding:0 22px 20px; }
.setup-acc .diagram-card{ margin-top:0; padding:20px; box-shadow:none; border-color:var(--line); }
.setup-acc .diagram-card img{ max-width:640px; }
@media (prefers-reduced-motion: no-preference){
  .setup-acc[open] .setup-acc__body{ animation:accIn .3s var(--ease); }
  @keyframes accIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
}

/* ============================ Minimal entrance animations ============================ */
@media (prefers-reduced-motion: no-preference){
  .hero__kicker, .hero h1, .hero__sub, .hero__actions, .hero__meta{
    animation:heroIn .7s var(--ease) both;
  }
  .hero h1{ animation-delay:.08s; }
  .hero__sub{ animation-delay:.16s; }
  .hero__actions{ animation-delay:.24s; }
  .hero__meta{ animation-delay:.34s; }
  @keyframes heroIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
  .mobile-bar{ animation:barIn .5s var(--ease) .5s both; }
  @keyframes barIn{ from{ transform:translateY(100%); } to{ transform:none; } }
  .popup-overlay.is-visible .popup{ animation:popIn .28s var(--ease); }
  @keyframes popIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
}

/* Landing page extras */
.lp-check p{ padding-left:30px; position:relative; margin-bottom:12px; color:var(--body); }
.lp-check p i{ position:absolute; left:0; top:3px; color:var(--blue); font-style:normal; }
.lp-check p i::before{ content:'✓'; font-weight:700; }
.lp-check strong{ color:var(--ink); }
.lp-badge{
  position:absolute; left:-18px; bottom:-18px;
  background:var(--blue); color:#fff; border-radius:var(--r-lg);
  padding:18px 22px; box-shadow:var(--sh-lg); text-align:center;
}
.lp-badge p{ margin:0; font-size:var(--fs-sm); line-height:1.3; }
.lp-badge span{ display:block; font-size:1.9rem; font-weight:900; }

/* ==========================================================================
   DESIGN ELEVATION LAYER — richer type, depth, and rhythm sitewide.
   Later rules override the base system above.
   ========================================================================== */

:root{
  --r:10px;
  --r-lg:18px;
  --sh-sm:0 1px 2px rgba(20,23,26,.05), 0 1px 3px rgba(20,23,26,.04);
  --sh-md:0 10px 28px -12px rgba(20,23,26,.16), 0 2px 8px -2px rgba(20,23,26,.06);
  --sh-lg:0 30px 70px -26px rgba(20,23,26,.30), 0 8px 20px -8px rgba(20,23,26,.10);
  --wash:#F6F7F8;
}
::selection{ background:rgba(0,109,177,.18); color:var(--ink); }

/* --- Type: bigger, tighter, more confident --- */
.section{ padding:60px 0; }
h2{ font-size:clamp(2rem, 3.4vw, 3rem); letter-spacing:-.022em; line-height:1.08; }
.section-head{ margin-bottom:34px; }
.section-head p{ font-size:1.14rem; line-height:1.7; }
.eyebrow{ font-size:.72rem; letter-spacing:.2em; }
.eyebrow::before,.eyebrow--center::after{ width:28px; height:2px; border-radius:2px; }

/* --- Hero: cinematic depth --- */
.hero__scrim{
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(46,147,216,.14) 0%, rgba(46,147,216,0) 55%),
    linear-gradient(to top, var(--navy) 0%, rgba(20,23,26,.3) 36%, rgba(20,23,26,.5) 100%),
    linear-gradient(96deg, rgba(20,23,26,.97) 4%, rgba(20,23,26,.8) 36%, rgba(20,23,26,.22) 76%, rgba(20,23,26,.08) 100%);
}
.hero h1{ letter-spacing:-.028em; }
.hero__meta > div{ position:relative; }
.hero__meta strong{
  background:linear-gradient(120deg, #fff 30%, #AED5F0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__kicker{ background:rgba(46,147,216,.14); border-color:rgba(46,147,216,.35); }

/* --- Buttons: weightier, calmer --- */
.btn{ padding:17px 34px; letter-spacing:.01em; }
.btn--primary{
  background:linear-gradient(135deg, var(--blue-bright) 0%, var(--blue) 55%, var(--blue-dark) 100%);
  background-size:150% 150%; background-position:0% 0%;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-position .35s var(--ease);
}
.btn--primary:hover{ background-position:100% 100%; }

/* --- Header: quiet luxury --- */
.header{ border-bottom:1px solid rgba(20,23,26,.06); box-shadow:0 1px 24px rgba(20,23,26,.05); }
.nav a{ font-size:.96rem; }

/* --- Cards: layered depth, consistent radii --- */
.card,.prod,.testi,.quote-card{ border-radius:var(--r-lg); }
.prod{ border-color:rgba(20,23,26,.07); }
.prod:hover{ transform:translateY(-7px); }
.prod__body h3{ font-size:1.08rem; }
.svc__media{ border-radius:var(--r-lg); }
.showcase__item{ border-radius:var(--r); }
.showcase__grid{ gap:16px; }
.showcase__tag{
  background:rgba(20,23,26,.55); padding:6px 14px; border-radius:100px;
  font-size:.78rem; left:14px; bottom:14px;
  border:1px solid rgba(255,255,255,.16);
}

/* --- Services rows: editorial spacing + hairline numbering --- */
.svc{ padding:76px 0; gap:80px; }
.svc__num{ font-size:5.2rem; -webkit-text-stroke:1.5px #DADEE2; opacity:.9; }
.svc__body h3{ font-size:1.85rem; letter-spacing:-.02em; }
.svc__body p{ line-height:1.72; }

/* --- Section texture: subtle grid on navy bands --- */
.section--navy{ background-color:var(--navy); background-image:
  radial-gradient(110% 80% at 12% 110%, rgba(46,147,216,.12) 0%, rgba(46,147,216,0) 60%),
  linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:auto, auto, 44px 44px, 44px 44px;
}
.stats strong{ font-size:2.8rem; }
.stats span{ margin-top:12px; letter-spacing:.04em; }

/* --- Trust strip: logo chips for optical consistency --- */
.logo-strip{ gap:18px; }
.logo-strip img{
  height:78px; max-width:170px; padding:14px 22px;
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--sh-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}

.trust__note{ letter-spacing:.16em; font-size:.72rem; }

/* --- Trust strip as a drifting marquee (/contact-us/) ----------------------
   Two identical groups sit end to end and the track slides exactly one group
   width, so the loop has no visible seam. Each group carries the gap as
   trailing padding rather than the track owning it — with the gap on the
   track, the wrap point lands half a gap out and the strip visibly hitches.
   The group keeps .logo-strip too, so the logo chip styling above still
   applies and none of it is duplicated here. */
.logo-marquee{ --logo-gap:18px; position:relative; overflow:hidden; }
.logo-marquee__track{
  display:flex; width:max-content;
  animation:logoMarquee 60s linear infinite;
}
.logo-marquee__group{
  flex-wrap:nowrap; justify-content:flex-start;
  gap:var(--logo-gap); padding-right:var(--logo-gap);
}
.logo-marquee__group img{ flex:0 0 auto; }
/* let people stop it to read a logo */
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track{ animation-play-state:paused; }
@keyframes logoMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* logos enter and leave rather than being chopped at the container edge */
.logo-marquee::before,.logo-marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.logo-marquee::before{ left:0; background:linear-gradient(to right, var(--white), rgba(255,255,255,0)); }
.logo-marquee::after{ right:0; background:linear-gradient(to left, var(--white), rgba(255,255,255,0)); }

@media (max-width:768px){
  .logo-marquee{ --logo-gap:12px; }
  .logo-marquee::before,.logo-marquee::after{ width:48px; }
}
/* No drift when motion is unwelcome: fall back to the static centred strip.
   animation:none kills the name, so the global reduced-motion rule further
   down (which only forces duration and iteration-count) can't restart it. */
@media (prefers-reduced-motion: reduce){
  .logo-marquee{ overflow:visible; }
  .logo-marquee__track{ animation:none; width:auto; }
  .logo-marquee__group{ flex-wrap:wrap; justify-content:center; padding-right:0; }
  .logo-marquee__group[aria-hidden="true"]{ display:none; }
  .logo-marquee::before,.logo-marquee::after{ display:none; }
}

/* --- Testimonials: editorial quote --- */
.testi-feature blockquote{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing:-.015em; }
.testi{ padding:34px 36px; }
.testi .stars{ letter-spacing:4px; }

/* --- FAQ + accordions: calmer borders --- */
.faq details,.setup-acc{ border-radius:var(--r); border-color:rgba(20,23,26,.08); }
.faq summary,.setup-acc summary{ padding-top:21px; padding-bottom:21px; }

/* --- CTA band: glow --- */
.cta-band{ border-radius:var(--r-lg); padding:80px 72px; }
.cta-band::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; border:1px solid rgba(255,255,255,.10);
}
.cta-band h2{ font-size:clamp(1.8rem, 2.8vw, 2.5rem); }

/* --- Footer: refined --- */
.footer__grid{ padding:88px 0 56px; }
.footer h4{ letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; color:#878E95; }
.footer a{ transition:color .15s var(--ease), padding-left .15s var(--ease); }
.footer ul a:hover{ padding-left:4px; }
.footer__bottom{ font-size:.82rem; color:#757C83; }

/* --- Forms: floating feel --- */
.quote-card{ padding:42px; box-shadow:0 12px 32px -8px rgba(20,23,26,.35), 0 48px 120px -32px rgba(20,23,26,.5); }
.form input,.form textarea{ padding:14px 16px; border-radius:10px; }
.popup{ border-radius:var(--r-lg); }

/* --- Focus visibility (a11y + polish) --- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--blue-bright); outline-offset:2px; border-radius:4px;
}

@media (max-width:768px){
  .section{ padding:44px 0; }
  .svc{ padding:48px 0; gap:28px; }
  .cta-band{ padding:48px 32px; }
  .logo-strip img{ height:52px; padding:10px 16px; }
  .stats strong{ font-size:2.6rem; }
}

/* Hero: never taller than 880px regardless of viewport */
.hero{ min-height:min(86vh, 880px); }

/* Mobile topbar: single line, phone only */
@media (max-width:600px){
  .topbar__contact a:nth-child(2){ display:none; }
  .topbar__inner{ justify-content:center; padding:7px 0; }
  .hero__kicker{ font-size:.78rem; padding:7px 14px; }
}

/* ==========================================================================
   SIGNATURE PASS — split hero, full-bleed showcase, display typography
   ========================================================================== */

/* Split hero: content left, framed photo column right */
.hero--split{ min-height:0; background:var(--navy); }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:72px; align-items:center; width:100%;
}
.hero--split .hero__inner{ max-width:none; }
.hero__photo{
  position:relative; align-self:stretch;
  margin:64px 0; min-height:520px;
}
.hero__photo img{
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:0 24px 80px -16px rgba(0,0,0,.55);
  position:relative; z-index:1;
}
.hero__photo::before{
  content:''; position:absolute; inset:-16px -16px 16px 16px;
  border:2px solid var(--amber); border-radius:var(--r-lg);
  opacity:.85;
}
.hero__photo-tag{
  position:absolute; z-index:2; left:18px; bottom:18px;
  background:rgba(20,23,26,.72); color:#E1E5E8;
  font-size:.78rem; font-weight:600; letter-spacing:.03em;
  padding:8px 16px; border-radius:100px;
  border:1px solid rgba(255,255,255,.16);
}

/* Display typography: Black 900 titles */
h2, .hero h1{ font-weight:600Add ; }
.section-head h2{ letter-spacing:-.025em; }

/* Full-bleed showcase */
.showcase__grid--bleed{
  width:100vw; margin-left:calc(50% - 50vw);
  padding:0 clamp(16px, 3vw, 48px);
  grid-auto-rows:260px;
}

@media (max-width:1023px){
  .hero__grid{ grid-template-columns:1fr; gap:0; }
  .hero__photo{ display:none; }
  .hero--split .hero__inner{ padding:80px 0 64px; }
}

/* Icon chips: line-art icons contained, never blown up */
.icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:16px;
  background:rgba(0,109,177,.08); border:1px solid rgba(0,109,177,.14);
}
.icon-chip img{ width:36px; height:36px; object-fit:contain; }

/* Trust rows: icon chip + label, left-aligned, contained */
.trust-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.trust-row{
  display:flex; align-items:center; gap:16px;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; box-shadow:var(--sh-sm);
}
.trust-row .icon-chip{ flex-shrink:0; width:52px; height:52px; border-radius:14px; }
.trust-row .icon-chip img{ width:28px; height:28px; }
.trust-row strong{ color:var(--ink); font-size:.95rem; line-height:1.35; font-weight:600; }
@media (max-width:600px){ .trust-grid{ grid-template-columns:1fr; } }

/* Capability chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-block; font-size:.82rem; font-weight:600; color:var(--blue-dark);
  background:rgba(0,109,177,.07); border:1px solid rgba(0,109,177,.16);
  padding:4px 14px; border-radius:100px;
}
/* Landing intro lists: centered section-heads render list items cleanly */
.section-head--center ul{ list-style:none; padding:0; margin:14px auto 0; max-width:640px; text-align:center; }
.section-head--center ul li{ margin-bottom:8px; color:var(--muted); }

/* Represented-brand logos are faint source files: lift their presence */
.logo-strip--brands img{
  height:100px; max-width:190px; padding:16px 26px;

  
}

/* ==========================================================================
   FINISH PASS — rendering quality, tactility, and detail.
   Presentation only: no layout rewrites, no content or image changes.
   ========================================================================== */

/* --- Text rendering: crisper Roboto, kinder line breaks --- */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* Roboto Regular is the site's base face; headings keep their own weights */
  font-weight:400;
}
h1,h2,h3,h4,.hero__kicker,.eyebrow,blockquote{ text-wrap:balance; }
/* Banner headline sits lighter than the 900 used elsewhere (SemiBold) */
.hero h1{ font-weight:600; }
p,.section-head p,.svc__body p,.faq__a{ text-wrap:pretty; }

/* Sticky header would otherwise cover in-page anchor targets (header ≈ 100px) */
:target,section[id],details{ scroll-margin-top:124px; }

/* Header breathing room; a little tighter on phones so it costs less viewport */
@media (max-width:768px){
  .header__inner{ padding:16px 10px; }
  :target,section[id],details{ scroll-margin-top:108px; }
}

/* Comfortable gutters on small screens without shrinking the desktop grid */
.container{ /*padding:0 clamp(20px, 4vw, 28px); */}

/* --- Header: glass instead of flat white --- */
.header{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
}
.nav.is-open{ backdrop-filter:none; }
.header__logo{ transition:opacity .2s var(--ease); }
.header__logo:hover{ opacity:.82; }

/* --- Buttons: press feedback + honest disabled state --- */
.btn:active{ transform:translateY(0) scale(.985); }
.btn--outline:hover{ background:rgba(0,109,177,.05); }
.btn[disabled],.btn[aria-busy="true"]{
  opacity:.6; cursor:not-allowed; transform:none; box-shadow:none;
}

/* --- Showcase tiles: lift with the zoom, tag rises to meet it --- */
.showcase__item{
  box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.showcase__item:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.showcase__tag{ transition:transform .35s var(--ease), background-color .35s var(--ease); }
.showcase__item:hover .showcase__tag{ transform:translateY(-3px); background:rgba(20,23,26,.72); }

/* --- Product cards: hairline accent on hover --- */
.prod{ position:relative; }
.prod::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg, var(--blue-bright), var(--blue));
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.prod:hover::before{ transform:scaleX(1); }

/* --- Wash sections: hairline seams so bands read as deliberate --- */
.section--wash{
  border-top:1px solid rgba(20,23,26,.05);
  border-bottom:1px solid rgba(20,23,26,.05);
}

/* --- FAQ + accordions: responsive to the cursor --- */
.faq details:hover,.setup-acc:hover{ border-color:#D3D7DB; }
.faq summary:hover,.setup-acc summary:hover{ color:var(--blue); }
.faq summary::after,.setup-acc summary::after{ transition:transform .25s var(--ease), color .2s var(--ease); }
.faq .faq__a{ max-width:68ch; line-height:1.72; }

/* --- Forms: clearer field states --- */
.form label{ color:var(--ink); }
.form input:hover,.form textarea:hover{ border-color:#B3B9BF; }
.form input::placeholder,.form textarea::placeholder{ color:#A3A9AF; }

/* --- Article body: readable measure, refined links and tables --- */
.post-content p,.post-content li{ /*max-width:72ch; */}
.post-content a{
  text-decoration-color:rgba(0,109,177,.35);
  text-underline-offset:3px;
  transition:text-decoration-color .18s var(--ease), color .18s var(--ease);
}
.post-content a:hover{ color:var(--blue-dark); text-decoration-color:var(--blue); }
.post-content th{ background:var(--wash); color:var(--ink); font-weight:600; }
.post-content tbody tr:nth-child(even) td{ background:rgba(246,247,248,.6); }
.post-content blockquote{ background:var(--wash); border-radius:0 var(--r) var(--r) 0; padding:18px 22px 18px 24px; }

/* --- Footer: quieter rule, steadier logo plate --- */
.footer__bottom{ border-top-color:rgba(255,255,255,.09); }
.footer__brand img{ box-shadow:var(--sh-sm); }

/* --- Dark-ground selection stays legible --- */
.hero ::selection,.section--navy ::selection,.footer ::selection,.cta-band ::selection{
  background:rgba(46,147,216,.38); color:var(--white);
}

/* --- Scrollbar: slim and on-palette (WebKit + Firefox) --- */
html{ scrollbar-color:#CDD1D6 transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:#CDD1D6; border-radius:100px;
  border:3px solid var(--white); background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:#AEB4BA; background-clip:padding-box; }

/* Reveal stagger is set inline by main.js (60ms steps) — an inline style would
   beat any rule here, so the cascade is left to the script on purpose. */

/* --- Respect reduced-motion everywhere, including hover transforms --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .prod:hover,.showcase__item:hover,.btn:hover,.logo-strip img:hover{ transform:none; }
}

/* ==========================================================================
   WHAT WE DO — service cards (home page)
   Replaces the four full-bleed alternating rows with a 2x2 editorial grid:
   same four services, roughly half the scroll, one coherent block.
   The .svc row layout above is untouched — inner pages still use it.
   ========================================================================== */
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.svc-card{
  position:relative; display:flex; flex-direction:column; color:inherit;
  background:var(--white); border:1px solid rgba(20,23,26,.07);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.svc-card:hover{
  transform:translateY(-7px); box-shadow:var(--sh-lg);
  border-color:rgba(0,109,177,.22);
}
/* Accent hairline wipes across the top edge, matching the product cards */
.svc-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
  background:linear-gradient(90deg, var(--blue-bright), var(--blue));
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.svc-card:hover::before{ transform:scaleX(1); }

.svc-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--wash); }
.svc-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc-card:hover .svc-card__media img{ transform:scale(1.05); }
.svc-card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,23,26,.72) 0%, rgba(20,23,26,.12) 42%, rgba(20,23,26,0) 70%);
}

/* Ghost numeral: the old .svc__num character, sat on the photo */
.svc-card__num{
  position:absolute; z-index:1; left:26px; bottom:12px;
  font-size:4.6rem; font-weight:900; line-height:.9; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.55);
  transition:transform .35s var(--ease), -webkit-text-stroke-color .35s var(--ease);
}
.svc-card:hover .svc-card__num{
  transform:translateY(-4px); -webkit-text-stroke-color:rgba(255,255,255,.92);
}

/* Title-only body: name left, arrow right, as one compact row */
.svc-card__body{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 28px 24px;
}
.svc-card__body h3{
  font-size:1.4rem; font-weight:700; letter-spacing:-.02em; margin:0;
  transition:color .22s var(--ease);
}
.svc-card:hover .svc-card__body h3{ color:var(--blue); }
/* Arrow keeps the card reading as clickable now the "Explore…" link is gone */
.svc-card__body::after{
  content:'\2192'; flex:0 0 auto; color:var(--blue);
  font-size:1.15rem; line-height:1; font-weight:700;
  transition:transform .25s var(--ease);
}
.svc-card:hover .svc-card__body::after{ transform:translateX(5px); }
.svc-card:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:3px; }

@media (max-width:860px){
  .svc-grid{ grid-template-columns:1fr; gap:22px; }
}
@media (max-width:600px){
  .svc-card__body{ padding:22px 24px 26px; }
  .svc-card__body h3{ font-size:1.3rem; }
  .svc-card__num{ font-size:3.6rem; left:20px; }
}

/* ==========================================================================
   COUNTER BAND — icon chips for the stats
   Icons are inline SVG using currentColor, so they cost no request and stay
   crisp at any size. Selectors are .stats-qualified to beat `.stats span`.
   ========================================================================== */
.stats > div{ position:relative; padding:0 14px; }
.stats .stats__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; margin:0 auto 20px; border-radius:18px;
  color:var(--blue-bright);
  background:linear-gradient(160deg, rgba(46,147,216,.22) 0%, rgba(46,147,216,.08) 100%);
  border:1px solid rgba(46,147,216,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px -14px rgba(46,147,216,.9);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.stats .stats__icon svg{ width:27px; height:27px; display:block; }
.stats > div:hover .stats__icon{
  transform:translateY(-4px);
  border-color:rgba(46,147,216,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 16px 30px -16px rgba(46,147,216,1);
}

/* Hairline between columns, fading at both ends */
.stats > div + div::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.16) 45%, rgba(255,255,255,0));
}

@media (max-width:1024px){
  /* Two-up and one-up: the separators would fall in the wrong places */
  .stats > div + div::before{ display:none; }
}
@media (max-width:600px){
  .stats .stats__icon{ width:50px; height:50px; border-radius:15px; margin-bottom:14px; }
  .stats .stats__icon svg{ width:23px; height:23px; }
}

/* ==========================================================================
   OUR PRODUCTS — richer product cards
   Same grid and markup; the card gains a framed photo, a clearer title row
   and a circular arrow button that fills on hover.
   ========================================================================== */
.prod-grid{ gap:30px; }
.prod__media{ background:var(--wash); }
.prod:hover .prod__media img{ transform:scale(1.07); }
/* Soft top-light so photos sit in the card instead of on it */
.prod__media::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%);
}

.prod__body{
  padding:24px 26px 26px; gap:16px;
  border-top:1px solid rgba(20,23,26,.05);
}
.prod__body h3{
  font-size:1.12rem; line-height:1.35; letter-spacing:-.01em;
  transition:color .22s var(--ease);
}
.prod:hover .prod__body h3{ color:var(--blue); }

/* Arrow becomes a real affordance: outlined disc that fills blue on hover */
.prod__body .arr{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; line-height:1; font-size:.95rem;
  color:var(--blue); background:rgba(0,109,177,.06);
  border:1.5px solid rgba(0,109,177,.24);
  transition:background-color .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* Beats the generic `.prod:hover .arr{ transform:translateX(4px) }` above */
.prod:hover .prod__body .arr{
  transform:none; color:var(--white);
  background:var(--blue); border-color:var(--blue);
  box-shadow:0 8px 18px -6px rgba(0,109,177,.6);
}

@media (max-width:600px){
  .prod-grid{ gap:22px; }
  .prod__body{ padding:20px 22px 22px; }
  .prod__body .arr{ width:38px; height:38px; }
}

/* --- Catalogue grids: /rental-services/, /other-portable-products/,
       /portable-systems-customisation/ and /about-us/ -----------------------
   The column count is a class, not an inline style, so the breakpoints below
   can actually take effect (an inline grid-template-columns beat every one of
   them and left the page scrolling sideways on phones). minmax(0,1fr) keeps a
   long name like "Collapsible Showcase" from forcing its track wider than its
   share of the row. Must stay after the global .prod-grid rules above — the
   doubled class only wins the 768px breakpoint on source order. */
.prod-grid.prod-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.prod-grid.prod-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:1100px){
  .prod-grid.prod-grid--4{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .prod-grid.prod-grid--3,
  .prod-grid.prod-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  /* Two-up rather than the global one-up: a 14-item catalogue stacked full
     width is 14 screens of scrolling, at 593px per card. */
  .prod-grid.prod-grid--3,
  .prod-grid.prod-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media (max-width:600px){
  .prod-grid.prod-grid--3,
  .prod-grid.prod-grid--4{ gap:12px; }
  .prod-grid--3 .prod__body,
  .prod-grid--4 .prod__body{ padding:12px 13px 14px; gap:8px; }
  .prod-grid--3 .prod__body h3,
  .prod-grid--4 .prod__body h3{ font-size:.9rem; line-height:1.3; }
  .prod-grid--3 .prod__body .arr,
  .prod-grid--4 .prod__body .arr{ width:30px; height:30px; font-size:.78rem; }
}

/* ==========================================================================
   BACK TO TOP — appears once the page is scrolled, on every page
   ========================================================================== */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:940;
  width:48px; height:48px; border-radius:50%; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--blue);
  border:1px solid rgba(20,23,26,.10);
  box-shadow:0 6px 20px -6px rgba(20,23,26,.30);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .28s var(--ease), transform .28s var(--ease),
             visibility .28s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--blue); color:var(--white); border-color:var(--blue); }
.to-top:active{ transform:scale(.94); }
.to-top svg{ width:21px; height:21px; display:block; }

@media (max-width:768px){
  .to-top{ right:16px; bottom:84px; width:44px; height:44px; }  /* clear of the sticky action bar */
}
@media print{ .to-top{ display:none !important; } }

/* ==========================================================================
   NAV DROPDOWN — Services submenu (desktop hover/focus, mobile accordion)
   ========================================================================== */
.nav__item{ position:relative; display:flex; align-items:center; }
.nav__item > a{ padding-right:4px; }
.nav__sub-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; padding:10px 10px 10px 2px;
  color:var(--ink); cursor:pointer; font-family:inherit;
}
.nav__sub-toggle svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.nav__item:hover .nav__sub-toggle,
.nav__item.is-open .nav__sub-toggle{ color:var(--blue); }
.nav__item:hover .nav__sub-toggle svg,
.nav__item.is-open .nav__sub-toggle svg{ transform:rotate(180deg); }

.nav__sub{
  position:absolute; top:calc(100% + 8px); left:0; z-index:30;
  min-width:286px; display:flex; flex-direction:column; gap:2px;
  background:var(--white); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--sh-md); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
}
.nav__sub a{
  padding:11px 15px; border-radius:11px; white-space:nowrap;
  font-size:.94rem; font-weight:500; color:var(--ink);
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.nav__sub a::after{ display:none; }          /* no underline sweep inside the panel */
.nav__sub a:hover{ background:var(--wash); color:var(--blue); }

/* Hover only where there's a real pointer; touch uses the caret button */
@media (hover:hover){
  .nav__item:hover .nav__sub{ opacity:1; visibility:visible; transform:none; }
}
.nav__item:focus-within .nav__sub,
.nav__item.is-open .nav__sub{ opacity:1; visibility:visible; transform:none; }

/* Mobile: submenu becomes an inline accordion inside the drop-down nav panel */
@media (max-width:768px){
  .nav__item{ flex-wrap:wrap; width:100%; }
  .nav__item > a{ flex:1; padding-right:15px; }
  .nav__sub-toggle{ padding:12px 14px; }
  .nav__sub{
    position:static; flex-basis:100%; width:100%; min-width:0;
    opacity:1; visibility:visible; transform:none;
    display:none; gap:0; padding:2px 0 8px;
    background:none; border:0; border-left:2px solid var(--line);
    border-radius:0; box-shadow:none; margin:0 0 4px 15px;
  }
  .nav__item.is-open .nav__sub{ display:flex; }
  .nav__sub a{ white-space:normal; padding:10px 16px; }
}

/* Trust strip: supporting line below the logo row (home page) */
.trust__lede{
  max-width:820px; margin:32px auto 0; text-align:center;
  color:var(--muted); font-size:var(--fs-base); line-height:1.7;
}

/* ==========================================================================
   WHY CHOOSE US — three reasons (home page)
   ========================================================================== */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.why{
  background:var(--white); border:1px solid rgba(20,23,26,.07);
  border-radius:var(--r-lg); padding:36px 32px 34px; box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.why:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:rgba(0,109,177,.2); }
.why .icon-chip{ margin-bottom:22px; transition:background-color .3s var(--ease), border-color .3s var(--ease); }
.why .icon-chip svg{ width:30px; height:30px; color:var(--blue); }
.why:hover .icon-chip{ background:rgba(0,109,177,.14); border-color:rgba(0,109,177,.28); }
.why h3{
  font-size:.92rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); margin:0 0 12px;
}
.why p{ color:var(--muted); line-height:1.72; margin:0; }

@media (max-width:900px){
  .why-grid{ grid-template-columns:1fr; gap:22px; }
  .why{ padding:30px 26px 28px; }
}

/* ==========================================================================
   INNER PAGE BANNERS — smaller type, breadcrumb, calmer scrim
   Home keeps the full-height cinematic hero; every other page uses this.
   ========================================================================== */
.hero--inner .hero__bg{ background-position:center; }
/* Even darkening: inner banners are short, so the home hero's angled wash
   would leave the right edge too bright behind the breadcrumb. */
.hero--inner .hero__scrim{
  background:
    linear-gradient(to top, rgba(20,23,26,.94) 0%, rgba(20,23,26,.66) 62%, rgba(20,23,26,.58) 100%),
    linear-gradient(100deg, rgba(20,23,26,.82) 0%, rgba(20,23,26,.5) 100%);
}
.hero--inner .hero__inner{ padding:64px 0 58px; max-width:880px; }
.hero--inner h1{
  font-size:clamp(1.8rem, 2.9vw, 2.5rem);
  letter-spacing:-.022em; line-height:1.14; margin-bottom:12px;
}
.hero--inner .hero__sub{
  font-size:1.04rem; line-height:1.65; max-width:640px; color:#C2C7CC;
}

/* Breadcrumb */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-size:var(--fs-sm); margin-bottom:18px;
}
.crumbs a{ color:#C7E4F5; transition:color .16s var(--ease); }
.crumbs a:hover{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }
.crumbs__sep{ color:rgba(255,255,255,.32); }
.crumbs__here{
  color:#9AA1A8; max-width:min(46ch, 100%);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:768px){
  .hero--inner .hero__inner{ padding:44px 0 40px; }
  .crumbs{ font-size:.8rem; gap:7px; margin-bottom:14px; }
  .hero--inner .hero__sub{ font-size:1rem; }
}

/* Buttons that carry an inline SVG (e.g. Download Our Catalog) */
.btn > svg{ width:19px; height:19px; flex:0 0 auto; }

/* Stars sitting under the reviewer's name (the base .stars rule spaces them
   for use above the quote, so flip the margin here) */
.testi .stars--after{ margin:8px 0 0; font-size:1rem; letter-spacing:4px; line-height:1; }
.testi strong{ display:block; }

/* ==========================================================================
   SLIDER — [data-slider] children become a scroll-snap track
   Native scrolling does the moving, so touch swipe works without JS drag code.
   ========================================================================== */
.slider{ position:relative; }
.testi-row.slider{ display:block; }          /* was a 2-up grid */
.slider__track{
  display:flex; gap:26px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px 8px;                        /* room for card shadows */
  scrollbar-width:none;                       /* controls replace the scrollbar */
}
.slider__track::-webkit-scrollbar{ display:none; }
.slider__track:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:4px; border-radius:var(--r); }
.slider__slide{
  flex:0 0 calc(50% - 13px);                  /* two in view */
  scroll-snap-align:start; margin:0;
}

.slider__ctrls{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:26px; }
.slider__arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; padding:0; cursor:pointer;
  color:var(--blue); background:var(--white);
  border:1.5px solid rgba(0,109,177,.28);
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.slider__arrow svg{ width:21px; height:21px; }
.slider__arrow:hover:not(:disabled){ background:var(--blue); color:var(--white); border-color:var(--blue); }
.slider__arrow:disabled{ opacity:.35; cursor:default; }
.slider__dots{ display:flex; align-items:center; gap:9px; }
.slider__dot{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  background:#CDD1D6; border:0;
  transition:background-color .2s var(--ease), width .25s var(--ease);
}
.slider__dot:hover{ background:#A3A9AF; }
.slider__dot.is-active{ background:var(--blue); width:26px; border-radius:100px; }

@media (max-width:768px){
  .slider__track{ gap:16px; }
  .slider__slide{ flex:0 0 100%; }            /* one in view */
  .slider__ctrls{ gap:12px; margin-top:20px; }
  .slider__arrow{ width:42px; height:42px; }
}
@media (prefers-reduced-motion: reduce){
  .slider__track{ scroll-behavior:auto; }
}

/* ==========================================================================
   LIGHTBOX — click any image in a [data-lightbox] container to enlarge
   ========================================================================== */
.lb-thumb{ cursor:zoom-in; }
.lb-thumb:focus-visible{ outline:3px solid var(--blue-bright); outline-offset:2px; }
/* The tile's own gradient overlay must not eat the click or the zoom cursor */
[data-lightbox] .showcase__item::after{ pointer-events:none; }
/* Subtle "enlarge" affordance on hover */
[data-lightbox] .showcase__item{ position:relative; }
[data-lightbox] .showcase__item::before{
  content:''; position:absolute; z-index:2; top:12px; right:12px;
  width:34px; height:34px; border-radius:50%; pointer-events:none;
  background:rgba(20,23,26,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M11 8.5v5M8.5 11h5M15.8 15.8L20 20'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  border:1px solid rgba(255,255,255,.22);
  opacity:0; transform:translateY(-4px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
[data-lightbox] .showcase__item:hover::before{ opacity:1; transform:none; }

.lb{
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 56px);
  background:rgba(10,12,14,.92);
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease), visibility .28s var(--ease);
}
.lb.is-open{ opacity:1; visibility:visible; }
.lb__stage{
  margin:0; max-width:100%; max-height:100%;
  display:flex; align-items:center; justify-content:center;
}
.lb__img{
  max-width:100%; max-height:82vh; width:auto; height:auto;
  border-radius:var(--r); box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  background:var(--navy);
}
.lb.is-open .lb__img{ animation:lbIn .3s var(--ease); }
@keyframes lbIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }

.lb__close,.lb__nav{
  position:absolute; z-index:2; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--white); background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22); border-radius:50%;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.lb__close:hover,.lb__nav:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45); }
.lb__close:active,.lb__nav:active{ transform:scale(.94); }
.lb__close{ top:20px; right:22px; width:46px; height:46px; font-size:26px; line-height:1; }
.lb__nav{ top:50%; margin-top:-26px; width:52px; height:52px; }
.lb__nav svg{ width:24px; height:24px; }
.lb__nav--prev{ left:18px; }
.lb__nav--next{ right:18px; }
.lb__count{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  color:#C2C7CC; font-size:var(--fs-sm); font-weight:600; letter-spacing:.04em;
}

@media (max-width:768px){
  .lb__img{ max-height:74vh; }
  .lb__close{ top:12px; right:12px; width:42px; height:42px; }
  .lb__nav{ width:44px; height:44px; margin-top:-22px; }
  .lb__nav--prev{ left:8px; }
  .lb__nav--next{ right:8px; }
}
@media (prefers-reduced-motion: reduce){
  .lb.is-open .lb__img{ animation:none; }
}

/* ==========================================================================
   HEADING CASE — Title Case sitewide, home banner keeps its own wording
   Heading text is authored in Title Case in the HTML (the old ALL-CAPS
   headings were rewritten); this rule keeps anything added later in line.
   ========================================================================== */
h1,h2,h3,h4,h5,h6{ text-transform:capitalize; }
.hero--home h1{ text-transform:none; }
/* Deliberate small-caps treatments keep their uppercase */
.footer h4,.why h3{ text-transform:uppercase; }
/* Breadcrumb + eyebrow already set their own case */
.crumbs,.eyebrow{ text-transform:none; }
.eyebrow{ text-transform:uppercase; }

/* --- Print: keep the page, drop the furniture --- */
@media print{
  .topbar,.header,.nav,.mobile-bar,.popup-overlay,.cta-band,.footer__bottom{ display:none !important; }
  body{ padding-bottom:0; color:#000; }
  .section,.showcase{ padding:18px 0; }
  .hero{ min-height:0; }
  a{ color:#000; text-decoration:underline; }
}

/* ==========================================================================
   SITE MAP page + testimonial card links
   ========================================================================== */
.testi__more{
  font-weight:600; font-size:var(--fs-sm); color:var(--blue);
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
}
.testi__more .arr{ transition:transform .2s var(--ease); }
.testi__more:hover{ color:var(--blue-bright); }
.testi__more:hover .arr{ transform:translateX(4px); }

.sitemap-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px 40px;
  align-items:start;
}
.sitemap-col{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 28px; box-shadow:var(--sh-sm);
  break-inside:avoid;
}
.sitemap-col h2{
  font-size:var(--fs-base); text-transform:uppercase; letter-spacing:.08em;
  color:var(--blue); margin:0 0 14px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.sitemap-col__n{
  font-size:var(--fs-sm); font-weight:600; letter-spacing:0;
  color:var(--muted); background:var(--wash); border-radius:999px;
  padding:2px 10px; text-transform:none;
}
.sitemap-col ul{ list-style:none; margin:0; padding:0; }
.sitemap-col li + li{ margin-top:2px; }
.sitemap-col a{
  display:block; color:var(--body); padding:6px 0;
  border-bottom:1px solid transparent; line-height:1.4;
}
.sitemap-col a:hover{ color:var(--blue); }

@media (max-width:1024px){ .sitemap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .sitemap-grid{ grid-template-columns:1fr; gap:22px; } }


/* ==========================================================================
   REFINED PASS — graphite + brand blue.
   Colour comes from the token block; this section is the accompanying
   typographic and spatial tightening. Layout structure is untouched, so no
   page can reflow: only rhythm, weight, depth and motion change.
   ========================================================================== */

/* --- Rhythm: more air between sections, tighter blocks within them --- */
.section{ padding:88px 0; }
.section-head{ margin-bottom:64px; }
.section-head p{ color:var(--body); line-height:1.6; }

/* --- Type: larger, tighter, more deliberate --- */
h1,h2,h3,h4{ letter-spacing:-.022em; }
h1{ letter-spacing:-.032em; line-height:1.04; }
h2{ line-height:1.1; }
body{ line-height:1.68; }
.eyebrow{
  text-transform:uppercase; font-size:.735rem;
  letter-spacing:.16em; font-weight:700; color:var(--accent);
}
.eyebrow::before,.eyebrow--center::after{ width:26px; height:2px; }

/* --- Buttons: flat, firm, no gradient wash --- */
.btn{ border-radius:8px; font-weight:500; letter-spacing:.005em; transition:
      background-color .18s var(--ease), color .18s var(--ease),
      border-color .18s var(--ease), transform .18s var(--ease),
      box-shadow .18s var(--ease); }
.btn--primary{
  background:var(--accent); background-image:none;
  color:var(--white); border:1px solid var(--accent);
  box-shadow:0 1px 2px rgba(20,23,26,.10);
}
.btn--primary:hover{
  background:var(--accent-deep); border-color:var(--accent-deep);
  transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(0,109,177,.55);
}
.btn--outline{
  background:transparent; border:1px solid var(--line); color:var(--ink); box-shadow:none;
}
.btn--outline:hover{
  border-color:var(--accent); color:var(--accent);
  background:rgba(0,109,177,.05); transform:translateY(-1px);
}

/* --- Surfaces: hairline borders, restrained lift --- */
.prod,.svc-card,.testi,.faq details,.quote-card,.sitemap-col{
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.prod:hover,.svc-card:hover{
  transform:translateY(-3px); box-shadow:var(--sh-md); border-color:#D6DADE;
}
.prod__media img{ transition:transform .6s var(--ease); }
.prod:hover .prod__media img{ transform:scale(1.04); }

/* --- Accent rule under section headings: the one signature flourish --- */
.section-head h2::after{
  content:''; display:block; width:44px; height:3px; border-radius:2px;
  background:var(--accent); margin-top:20px;
}
.section-head--center h2::after{ margin-left:auto; margin-right:auto; }

/* --- Dark ground: graphite, not navy --- */
.footer,.topbar{ background:var(--graphite); }
.cta-band__scrim,.hero__scrim{ background:linear-gradient(90deg,
  rgba(20,23,26,.92) 0%, rgba(20,23,26,.72) 45%, rgba(20,23,26,.30) 100%); }

/* --- Links and focus --- */
a{ transition:color .16s var(--ease); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

@media (max-width:768px){
  .section{ padding:60px 0; }
  .section-head{ margin-bottom:40px; }
  .section-head h2::after{ margin-top:16px; }
}

/* --- Contrast corrections (WCAG AA) ---------------------------------------
   Brand blue carries white text unaided: #fff on #006DB1 is 5.49:1, so the
   primary button keeps the vivid fill and a white label throughout. Hover
   darkens to --accent-deep (#fff on #005A93 = 7.29:1) rather than lightening,
   which is what the old signal-orange theme had to do. Accent *text* on white
   uses the darker --accent-ink (7.83:1); the vivid --accent stays for fills
   and rules. */
.btn--primary{
  background:var(--accent); border-color:var(--accent);
  color:var(--white); font-weight:700;
}
.btn--primary:hover,.btn--primary:focus-visible{
  background:var(--accent-deep); border-color:var(--accent-deep); color:var(--white);
}
.eyebrow{ color:var(--accent-ink); }
.eyebrow::before,.eyebrow--center::after{ background:var(--accent); }
.section-head h2::after{ background:var(--accent); }

/* ==========================================================================
   HEADER — nav right-aligned, quote CTA removed.
   With .header__actions gone the row is logo | nav | (mobile toggle), so the
   nav is pushed to the right edge and given a little more breathing room.
   ========================================================================== */
.header__inner{ justify-content:flex-start; gap:32px; }
.nav{ margin-left:auto; gap:4px; }
.nav > a,.nav__item > a{
  padding:10px 14px; font-weight:550; font-size:.985rem;
  letter-spacing:.005em; white-space:nowrap;
}
.nav__item{ margin-right:-4px; }
.header__logo img{ height:52px; }

/* the last nav link sits flush with the container edge */
.nav > a:last-child{ padding-right:0; }

@media (max-width:1180px){
  .header__inner{ gap:20px; }
  .nav > a,.nav__item > a{ padding:10px 10px; font-size:.94rem; }
}
@media (max-width:768px){
  .header__inner{ justify-content:space-between; gap:16px; }
  .nav{ margin-left:0; }
  .nav > a,.nav__item > a{ padding:12px 0; font-size:1rem; }
  .nav > a:last-child{ padding-right:0; }
}

/* ==========================================================================
   STRUCTURE PASS — section architecture reworked to the agreed order.
   Numbered benefit blocks, firmer service/product grids, banded rhythm.
   ========================================================================== */

/* --- Why Choose Us: numbered 01 / 02 / 03 blocks --- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.why{
  position:relative; padding:38px 32px 34px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.why::before{
  content:attr(data-num);
  display:block; font-size:2.9rem; font-weight:900; line-height:1;
  color:var(--accent); opacity:.16; letter-spacing:-.03em; margin-bottom:14px;
}
.why:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:#D6DADE; }
.why .icon-chip{
  position:absolute; top:32px; right:30px;
  width:46px; height:46px; border-radius:12px;
  background:rgba(0,109,177,.09); color:var(--accent-ink);
  display:inline-flex; align-items:center; justify-content:center;
}
.why .icon-chip svg{ width:22px; height:22px; }
.why h3{ font-size:1.24rem; margin:0 0 10px; letter-spacing:-.015em; }
.why p{ color:var(--body); margin:0; font-size:var(--fs-base); }

/* --- Service cards: a firmer, more even grid --- */
.svc-card{ border-radius:var(--r-lg); padding:36px 32px; }
.svc-card h3{ font-size:1.3rem; letter-spacing:-.015em; }

/* --- Product cards: taller media, calmer meta row --- */
.prod{ border-radius:var(--r-lg); overflow:hidden; }
.prod__body{ padding:20px 22px 22px; }
.prod__body h3{ font-size:1.05rem; letter-spacing:-.01em; }

/* --- Banded rhythm: alternating grounds so sections read as distinct --- */
.section--wash{ background:var(--wash); }
.section--navy{ background:var(--graphite); color:#C2C7CC; }
.section--navy h2,.section--navy h3,.section--navy strong{ color:var(--white); }

/* --- Client logo strip now sits mid-page, so it needs its own frame --- */
.trust{
  padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--white);
}

/* --- Testimonials on the home page: 2x2, matching the reference --- */
.testi-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }

@media (max-width:1024px){
  .why-grid{ grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:760px){
  .why-grid{ grid-template-columns:1fr; gap:18px; }
  .why{ padding:30px 26px 28px; }
  .why .icon-chip{ top:26px; right:24px; width:40px; height:40px; }
  .testi-row{ grid-template-columns:1fr; }
  .trust{ padding:44px 0; }
}

/* ==========================================================================
   PAGE-TYPE STYLING PASS
   Article, product, form and footer layouts get the same structural
   treatment as the home page: constrained measure, clear hierarchy,
   deliberate whitespace.
   ========================================================================== */

/* --- Articles: text column + sticky CTA rail ---------------------------- */
.post-section{ padding:76px 0 88px; }
.post-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:64px; align-items:start;
}
.post-content{
  max-width:74ch; font-size:1.09rem; line-height:1.75; color:var(--body);
}
.post-content > p:first-of-type{
  font-size:1.22rem; line-height:1.6; color:var(--ink); font-weight:500;
}
.post-content h2{
  font-size:1.85rem; line-height:1.2; letter-spacing:-.02em;
  color:var(--ink); margin:2.1em 0 .6em; padding-top:.2em;
}
.post-content h3{ font-size:1.32rem; letter-spacing:-.015em; color:var(--ink); margin:1.7em 0 .5em; }
.post-content h4{ font-size:1.1rem; color:var(--ink); margin:1.5em 0 .4em; }
.post-content p{ margin:0 0 1.15em; }
.post-content ul,.post-content ol{ padding-left:1.25em; margin:0 0 1.3em; }
.post-content li{ margin-bottom:.55em; }
.post-content ul li::marker{ color:var(--accent); }
.post-content a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
.post-content a:hover{ color:var(--accent-deep); }
.post-content img,.post-content .post-featured{
  border-radius:var(--r-lg); margin:32px 0; box-shadow:var(--sh-md); width:100%; height:auto;
}
.post-content blockquote{
  border-left:3px solid var(--accent); background:var(--wash);
  margin:1.8em 0; padding:22px 26px; border-radius:0 var(--r) var(--r) 0;
  color:var(--ink); font-weight:500; font-size:1.12rem;
}
.post-content blockquote p:last-child{ margin-bottom:0; }
.post-content table{
  width:100%; border-collapse:separate; border-spacing:0; margin:1.8em 0;
  font-size:var(--fs-sm); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.post-content thead th{ background:var(--graphite); color:var(--white); font-weight:650; }
.post-content td,.post-content th{ border-bottom:1px solid var(--line); padding:13px 16px; text-align:left; }
.post-content tbody tr:nth-child(even){ background:var(--wash); }
.post-content tbody tr:last-child td{ border-bottom:0; }

.post-aside{ position:sticky; top:104px; }
.post-aside__card{
  background:var(--graphite); color:#C2C7CC;
  border-radius:var(--r-lg); padding:32px 28px;
  box-shadow:var(--sh-md);
}
.post-aside__card .eyebrow{ color:var(--accent); }
.post-aside__card h3{ color:var(--white); font-size:1.3rem; margin:10px 0 10px; letter-spacing:-.015em; }
.post-aside__card p{ font-size:var(--fs-sm); line-height:1.6; margin:0 0 22px; }
.post-aside__card .btn{ width:100%; }
.post-aside__tel{
  display:block; text-align:center; margin-top:14px;
  font-size:var(--fs-sm); color:#9AA1A8;
}
.post-aside__tel:hover{ color:var(--white); }

/* legal pages keep the single column but gain the same measure */
.post-content{ margin-right:auto; }

/* --- Product pages: sticky gallery, calmer detail column ---------------- */
.pd-split{ align-items:start; gap:64px; }
.pd-gallery{ position:sticky; top:104px; }
.pd-main img{ border-radius:var(--r-lg); }
.pd-thumbs{ gap:10px; margin-top:12px; }
.pd-cta-card{
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 26px 24px; background:var(--wash); margin-top:26px;
}
.pd-cta-note{ font-size:var(--fs-sm); color:var(--body); margin-bottom:18px; }
.pd-cta-actions{ display:flex; flex-direction:column; gap:10px; }
.pd-cta-actions .btn{ width:100%; }
.pd-content{ margin-top:44px; }
.pd-content h2{ font-size:1.6rem; letter-spacing:-.02em; margin-bottom:.5em; }

/* --- Forms: clearer fields ---------------------------------------------- */
.field input,.field select,.field textarea{
  border-radius:8px; border:1px solid var(--line);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,109,177,.14); outline:none;
}

/* --- Inner page heroes: tighter, more editorial -------------------------- */
.hero--inner .hero__inner{ padding:104px 0 76px; }
.hero--inner h1{ font-size:clamp(2.1rem,3.9vw,3.15rem); letter-spacing:-.028em; }

/* --- Footer ------------------------------------------------------------- */
.footer__grid{ gap:56px; padding:80px 0 56px; }
.footer h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--white); }
.footer li{ margin-bottom:9px; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.10); padding-top:24px; }

@media (max-width:1024px){
  .post-layout{ grid-template-columns:1fr; gap:44px; }
  .post-aside{ position:static; max-width:520px; }
  .pd-gallery{ position:static; }
  .pd-split{ gap:40px; }
}
@media (max-width:768px){
  .post-section{ padding:52px 0 64px; }
  .post-content{ font-size:1.04rem; }
  .post-content > p:first-of-type{ font-size:1.12rem; }
  .post-content h2{ font-size:1.55rem; }
  .hero--inner .hero__inner{ padding:76px 0 56px; }
  .footer__grid{ gap:34px; padding:56px 0 40px; }
}

/* ==========================================================================
   HOME PAGE — UX PASS
   Skip-link, a stronger hero with a secondary path, and a CTA row closing the
   services block. Addresses three gaps: keyboard users had no way past the
   nav, visitors who weren't ready to convert had no second option, and the
   services section — the main commercial block — offered no path forward.
   ========================================================================== */

/* --- Skip link: hidden until focused, then unmissable --- */
.skip-link{
  position:absolute; left:16px; top:-64px; z-index:1200;
  background:var(--graphite); color:var(--white);
  padding:12px 22px; border-radius:0 0 10px 10px;
  font-weight:650; font-size:var(--fs-sm); text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:0; color:var(--white); outline:2px solid var(--accent); outline-offset:2px; }

/* --- Hero: clearer hierarchy, room for two paths --- */
.hero__inner{ max-width:760px; padding:132px 0 116px; }
.hero h1{ letter-spacing:-.035em; line-height:1.02; }
.hero h1 em{ color:var(--accent); font-style:normal; }
.hero__sub{ max-width:580px; color:#CDD1D6; margin-bottom:36px; }
.hero__actions{ gap:14px; align-items:center; }

/* secondary action: readable on the photo without competing with the primary */
.btn--ghost{
  background:rgba(255,255,255,.08); color:var(--white);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.6);
  color:var(--white); transform:translateY(-1px);
}

/* quiet credibility line under the buttons */
.hero__trust{
  margin:26px 0 0; font-size:var(--fs-sm); color:#A3A9AF;
  display:inline-flex; align-items:center; gap:10px;
}
.hero__trust::before{
  content:''; width:26px; height:2px; background:var(--accent); border-radius:2px; flex:0 0 auto;
}

/* --- Section CTA row: closes a section with a clear next step --- */
.section-cta{
  display:flex; justify-content:center; align-items:center;
  gap:14px; flex-wrap:wrap; margin-top:52px;
}

/* --- Focus visibility across interactive elements (keyboard UX) --- */
.nav a:focus-visible,.btn:focus-visible,.skip-link:focus-visible,
.prod:focus-visible,.footer a:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.section--navy .btn:focus-visible,.hero .btn:focus-visible{ outline-color:var(--white); }

@media (max-width:768px){
  .hero__inner{ padding:92px 0 76px; }
  .hero__actions{ gap:10px; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .hero__trust{ margin-top:20px; font-size:.82rem; }
  .section-cta{ margin-top:36px; flex-direction:column; align-items:stretch; }
  .section-cta .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   VISUAL CORRECTIONS — from reviewing rendered screenshots.
   Fixes: doubled accent marks, over-stretched vertical rhythm, washed-out
   numerals, and shouty card headings.
   ========================================================================== */

/* 1. The eyebrow already carries the accent dash. A second accent rule under
      the h2 doubled it up, and on left-aligned heads it wedged itself between
      the heading and its own description. Remove it. */
.section-head h2::after{ display:none; }

/* 2. Rhythm was too loose — sections read as disconnected voids. Pull in. */
.section{ padding:74px 0; }
.section-head{ margin-bottom:44px; }
.section-head p{ margin-top:14px; max-width:62ch; }
.section-head--center p{ margin-left:auto; margin-right:auto; }
.section-cta{ margin-top:40px; }
.showcase{ padding:64px 0; }
.trust{ padding:52px 0; }

/* 3. Why-choose-us cards: the numerals were nearly invisible at .16 opacity,
      and uppercase h3 made them shout next to every other card on the page. */
.why{ padding:34px 30px 30px; }
.why::before{
  opacity:1; color:var(--accent); font-size:2.15rem;
  -webkit-text-stroke:0; margin-bottom:16px; letter-spacing:-.02em;
}
.why h3{
  text-transform:none; font-size:1.22rem; font-weight:700;
  letter-spacing:-.015em; margin:0 0 8px;
}
.why p{ font-size:1rem; line-height:1.6; }
.why .icon-chip{ top:28px; right:26px; width:42px; height:42px; }

/* 4. Service cards: tighter body so the card doesn't read as half-empty. */
.svc-card{ padding:28px 26px 26px; }
.svc-card h3{ font-size:1.18rem; margin-bottom:6px; }

/* 5. Hero: the scrim was heavy enough to flatten the photograph. Let the
      image breathe on the right while keeping the text side fully legible. */
.hero__scrim{
  background:linear-gradient(96deg,
    rgba(20,23,26,.93) 0%, rgba(20,23,26,.86) 34%,
    rgba(20,23,26,.55) 66%, rgba(20,23,26,.30) 100%);
}
.hero__inner{ padding:116px 0 104px; }

@media (max-width:768px){
  .section{ padding:56px 0; }
  .section-head{ margin-bottom:32px; }
  .hero__scrim{ background:linear-gradient(180deg, rgba(20,23,26,.86) 0%, rgba(20,23,26,.92) 100%); }
}

/* 6. Service-card numerals were a 0.55-alpha outline over uncontrolled
      photography — illegible on the brighter shots (02, 04). Deepen the scrim
      under them and firm up the stroke, keeping the ghost-numeral look. */
.svc-card__media::after{
  background:linear-gradient(to top,
    rgba(20,23,26,.86) 0%, rgba(20,23,26,.42) 30%, rgba(20,23,26,0) 62%);
}
.svc-card__num{
  -webkit-text-stroke:2px rgba(255,255,255,.92);
  text-shadow:0 2px 10px rgba(20,23,26,.45);
}
.svc-card:hover .svc-card__num{ -webkit-text-stroke-color:#fff; }

/* --- Small-screen safety: a long unbreakable word must never widen the page.
   (Verified: the document does NOT currently overflow at 390px — this is a
   guard, not a fix.) --- */
h1,h2,h3,h4,p,li,a,td,th{ overflow-wrap:break-word; }

/* ==========================================================================
   INNER PAGE BANNER — POLISH PASS
   The block under the header on all 80 non-home pages. It was reading as a
   grey box: the double scrim in "INNER PAGE BANNERS" above buried the
   photograph, nothing marked where the banner ended and the white page began,
   and the ≤768px scrim override further up never reached here (a plain
   .hero__scrim selector loses to .hero--inner .hero__scrim). Everything below
   is scoped to .hero--inner, so the home hero and the promo landing pages are
   deliberately untouched.
   ========================================================================== */

/* Was an inline style on all 80 <section> tags, where no stylesheet could
   reach it. */
.hero--inner{ min-height:0; }

/* One directional wash instead of two stacked flat ones: heavy where the text
   sits, opening up towards the right so the photograph is legible again. The
   radial carries the brand blue into the image — at .10 it reads as a tint,
   not as a coloured overlay. */
.hero--inner .hero__scrim{
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(0,109,177,.10) 0%, rgba(0,109,177,0) 60%),
    linear-gradient(to top, rgba(20,23,26,.72) 0%, rgba(20,23,26,.42) 55%, rgba(20,23,26,.52) 100%),
    linear-gradient(97deg,
      rgba(20,23,26,.94) 0%, rgba(20,23,26,.88) 30%,
      rgba(20,23,26,.62) 62%, rgba(20,23,26,.34) 100%);
}

/* An accent hairline closing the banner against the section below — the block
   had no defined bottom edge at all. .hero is overflow:hidden, so this sits
   inside the edge rather than offset past it. */
.hero--inner::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:linear-gradient(90deg,
    var(--accent) 0%, var(--accent-soft) 34%,
    rgba(46,147,216,.28) 62%, rgba(46,147,216,0) 100%);
}

/* Rhythm: crumbs → accent rule → title → subtitle or post date. The rule hangs
   off the h1 rather than the breadcrumb so it lands correctly on all three
   content shapes and can never render on its own. */
.hero--inner .hero__inner{ padding:96px 0 80px; }
.hero--inner .crumbs{ margin-bottom:20px; }
.hero--inner h1{ margin-bottom:0; }
.hero--inner h1::before{
  content:''; display:block; width:44px; height:3px; border-radius:2px;
  margin-bottom:20px;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.hero--inner .hero__sub{ margin:18px 0 0; }
.hero--inner .post-date{ margin-top:16px; }

/* Breadcrumb: warmer links, quieter separators, and a tighter cap on the
   current-page label — product pages repeat their entire (long) h1 in it. */
.hero--inner .crumbs a{ color:#AED7F1; font-weight:500; }
.hero--inner .crumbs a:hover{ color:var(--white); }
.hero--inner .crumbs__sep{ color:rgba(255,255,255,.26); }
.hero--inner .crumbs__here{ color:#A8AEB4; max-width:min(38ch, 100%); }

/* The existing heroIn entrance skipped the two elements unique to this
   banner. Reuses those keyframes; no new animation. */
@media (prefers-reduced-motion: no-preference){
  .hero--inner .crumbs,
  .hero--inner .post-date{ animation:heroIn .7s var(--ease) both; }
  .hero--inner .post-date{ animation-delay:.22s; }
}

@media (max-width:768px){
  /* The angled wash puts its darkest edge where nothing sits on a phone.
     Straight top-to-bottom instead. */
  .hero--inner .hero__scrim{
    background:
      radial-gradient(120% 80% at 80% 0%, rgba(0,109,177,.10) 0%, rgba(0,109,177,0) 62%),
      linear-gradient(180deg, rgba(20,23,26,.80) 0%, rgba(20,23,26,.88) 100%);
  }
  .hero--inner .hero__inner{ padding:68px 0 58px; }
  .hero--inner .crumbs{ margin-bottom:16px; }
  .hero--inner h1::before{ width:36px; height:3px; margin-bottom:16px; }
  .hero--inner .hero__sub{ margin-top:14px; }
}

@media print{
  .hero--inner::after,
  .hero--inner h1::before{ display:none; }
}

/* ==========================================================================
   WHAT WE DO — service tiles (home page), compacted
   Two things had made this block cost ~1360px of scroll for four service
   names. A stray `padding:36px 32px` / `28px 26px 26px` on .svc-card — written
   for the older text-only card and never removed once the card gained
   full-bleed media — held the photo off its own rounded corners and added 54px
   of dead height per row. And the title sat in a separate 73px strip under
   each photo, so a 2x2 grid needed two of everything.
   Now: four square photo tiles on a single row, title set over the image.
   Only index.html uses .svc-card, so nothing else moves.
   ========================================================================== */

/* Four across — the four services fill one row exactly. */
.svc-grid{ grid-template-columns:repeat(4, 1fr); gap:20px; }

/* padding:0 undoes the leftover card padding: the photograph IS the card. */
.svc-card{ padding:0; }
.svc-card__media{ aspect-ratio:1/1; }

/* Two washes now: a deep foot to carry the white title, and a light top one
   so the numeral holds up over the brighter photos (02 and 04 are shot against
   pale walls and lost it entirely). */
.svc-card__media::after{
  background:
    linear-gradient(to bottom, rgba(20,23,26,.42) 0%, rgba(20,23,26,0) 28%),
    linear-gradient(to top,
      rgba(20,23,26,.90) 0%, rgba(20,23,26,.62) 34%,
      rgba(20,23,26,.18) 62%, rgba(20,23,26,0) 88%);
}

/* Numeral moves to the clear top corner so it stops competing with the title. */
.svc-card__num{
  left:auto; right:16px; top:12px; bottom:auto;
  font-size:1.9rem; -webkit-text-stroke-width:1.2px;
  text-shadow:0 1px 8px rgba(20,23,26,.35);
}
.svc-card:hover .svc-card__num{ transform:none; }

/* Title over the photo instead of in a strip below it — this is where the
   height comes back. */
.svc-card__body{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  align-items:flex-end; gap:12px; padding:18px;
}
.svc-card__body h3{
  font-size:1.06rem; font-weight:700; line-height:1.25;
  letter-spacing:-.015em; color:var(--white);
  transition:transform .3s var(--ease);
}
.svc-card:hover .svc-card__body h3{ color:var(--white); transform:translateY(-2px); }

/* Arrow becomes a chip that fills with accent — the card's one hover payoff. */
.svc-card__body::after{
  content:'\2192'; flex:0 0 auto;
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  font-size:1rem; font-weight:700; color:var(--white);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .25s var(--ease), border-color .25s var(--ease),
             transform .25s var(--ease);
}
.svc-card:hover .svc-card__body::after{
  background:var(--accent); border-color:var(--accent); transform:translateX(3px);
}

/* Head and CTA were spaced for a grid three times as tall. */
.section:has(.svc-grid) .section-head{ margin-bottom:34px; }
.svc-grid + .section-cta{ margin-top:34px; }

@media (max-width:1023px){
  /* Beats the earlier 860px single-column rule: two square tiles read better
     than one wide one on a tablet. */
  .svc-grid{ grid-template-columns:1fr 1fr; gap:18px; }
}
@media (max-width:600px){
  .svc-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .svc-card__body{ padding:14px; gap:8px; }
  .svc-card__body h3{ font-size:.92rem; }
  .svc-card__body::after{ width:26px; height:26px; font-size:.9rem; }
  .svc-card__num{ font-size:1.5rem; right:12px; top:9px; }
}

/* ==========================================================================
   HOME PAGE — INDUSTRIAL EDITORIAL LAYOUT
   A full rebuild of index.html's body: gear-marked eyebrows, a light display
   headline with a capability strip across the foot of the hero, services
   lifted onto a white panel floating over a dark works photo, a dark split
   band with the photograph bleeding off the right edge, and accent-blue display
   numerals. Written on this site's own tokens — the layout language is
   borrowed from the reference, none of its code or assets are.
   Scoped to .page-home (index.html only); the shared header, top bar and
   footer are deliberately untouched.
   ========================================================================== */

/* --- Eyebrow: gear mark instead of the dash, on every home section head --- */
.page-home .eyebrow{ gap:11px; letter-spacing:.15em; color:var(--accent); }
.page-home .eyebrow::before{
  width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23006DB1' fill-rule='evenodd' d='M8 0l1.3 1.6 2-.7.5 2.1 2.1.5-.7 2L15 8l-1.6 1.3.7 2-2.1.5-.5 2.1-2-.7L8 16l-1.3-1.6-2 .7-.5-2.1-2.1-.5.7-2L1 8l1.6-1.3-.7-2 2.1-.5.5-2.1 2 .7zM8 5.4A2.6 2.6 0 1 0 8 10.6 2.6 2.6 0 0 0 8 5.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.page-home .eyebrow--center::after{ display:none; }
.page-home .eyebrow--light{ color:var(--accent-soft); }

/* --- Buttons: label plus an attached accent square carrying the arrow --- */
.btn--split{
  padding:0 0 0 28px; gap:0; border:0; border-radius:8px;
  background:var(--white); color:var(--ink);
  align-items:center; min-height:53px; overflow:hidden; font-weight:500;
  box-shadow:0 10px 30px -14px rgba(20,23,26,.5);
}
.btn--split::after{
  content:'\2197'; display:grid; place-items:center; align-self:stretch;
  width:53px; margin-left:24px; background:var(--accent); color:var(--white);
  font-size:1.15rem; font-weight:700;
  transition:background-color .22s var(--ease);
}
.btn--split:hover{ background:var(--white); color:var(--ink); transform:translateY(-2px); }
.btn--split:hover::after{ background:var(--accent-deep); }
.btn--split:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* --- Hero: lighter display type, capability strip along the foot --- */
.page-home .hero--home{ min-height:min(92vh, 900px); }
.page-home .hero__inner{ max-width:740px; padding:112px 0 168px; }
.page-home .hero h1{
  font-size:clamp(1.6rem, 4.4vw, 3.6rem); font-weight:400;
  letter-spacing:-.035em; line-height:1.04;text-transform: uppercase;
}
.page-home .hero h1 em{ font-weight:700; color:var(--accent); }
.page-home .hero__kicker{
  background:rgba(0,109,177,.13); border-color:rgba(0,109,177,.38);
  color:#BEDEF3; text-transform:uppercase; letter-spacing:.12em;
  font-size:var(--fs-xs); margin-bottom:26px;
}
.page-home .hero__kicker::before{ background:var(--accent); }

.hero__strip{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:24px 0; border-top:1px solid rgba(255,255,255,.16);
  background:linear-gradient(to top, rgba(20,23,26,.55), rgba(20,23,26,0));
}
.hero__strip ul{
  display:flex; flex-wrap:wrap; gap:16px 44px; margin:0; padding:0; list-style:none;
}
.hero__strip li{
  display:flex; align-items:center; gap:10px;
  color:#D5D9DD; font-size:var(--fs-sm); font-weight:600; letter-spacing:.01em;
}
.hero__strip li::before{
  content:''; flex:0 0 auto; width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23006DB1'/%3E%3Cpath d='M5.8 10.3l2.7 2.7 5.7-5.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- Services: white panel floating over a dark works photograph --- */
.svc-band{ position:relative; overflow:hidden; background:var(--graphite); padding:88px 0 92px; }
.svc-band__bg{ position:absolute; inset:0; background-size:cover; background-position:center 35%; }
.svc-band__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(85% 70% at 78% 8%, rgba(0,109,177,.14) 0%, rgba(0,109,177,0) 60%),
    linear-gradient(180deg, rgba(20,23,26,.88) 0%, rgba(20,23,26,.80) 42%, rgba(20,23,26,.92) 100%);
}
.svc-band > .container{ position:relative; z-index:1; }
.section-head--split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:20px 56px;
  align-items:end; max-width:none;
}
.section-head--split h2{ color:var(--white); margin:0; }
.section-head--split p{ color:#C2C7CC; margin:0 0 6px; }
.svc-panel{
  background:var(--white); border-radius:var(--r-lg);
  padding:28px 28px 32px;
  box-shadow:0 44px 100px -34px rgba(0,0,0,.62);
}
.svc-panel .section-cta{ margin-top:28px; }

/* --- Why choose us: dark split, photograph bleeding off the right edge --- */
/* Measured off the reference's "what we do": dark half with 100px/120px of
   padding, cards two-up at 50% with a 30px gutter, 40px corners, 30px inside
   and a transparent fill over a hairline border. */
.split-band{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  overflow:hidden;
  background:
    radial-gradient(110% 80% at 0% 100%, rgba(0,109,177,.11) 0%, rgba(0,109,177,0) 58%),
    var(--graphite);
}
.split-band__content{
  display:flex; align-items:center;
  padding:100px 76px 100px max(28px, calc((100vw - var(--container))/2 + 28px));
}
.split-band__inner{ width:100%; max-width:620px; }
.split-band .section-head{ margin-bottom:38px; max-width:none; }
.split-band h2{ color:var(--white); font-size:clamp(1.9rem, 2.7vw, 2.5rem); }
/* The badge is a sibling of the frame, not a child — same arrangement the
   reference uses, so overflow:hidden can clip the sweep to the photograph
   without also cutting the badge that deliberately overhangs it. */
.split-band__media{ position:relative; min-height:620px; }
.split-band__frame{
  position:absolute; inset:0; margin:0; overflow:hidden;
}
.split-band__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Cards go dark and lose the ghost numeral; the icon leads, as in the ref. */
.split-band .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.split-band .why{
  background:transparent; border:1px solid rgba(255,255,255,.16);
  border-radius:40px; padding:30px 20px; box-shadow:none;
}
.split-band .why:hover{
  transform:translateY(-3px); background:rgba(255,255,255,.05);
  border-color:rgba(0,109,177,.42); box-shadow:none;
}
.split-band .why::before{ display:none; }
.split-band .why .icon-chip{
  position:static; width:auto; height:auto; margin:0 0 28px;
  background:none; border:0; border-radius:0; display:block; color:var(--accent);
}
.split-band .why .icon-chip svg{ width:30px; height:30px; }
/* three cards, not the reference's four: the last one takes the whole row
   rather than leaving a half-width hole beside it. */
.split-band .why:last-child:nth-child(odd){ grid-column:1 / -1; }
.split-band .why:hover .icon-chip{ background:none; border:0; }
.split-band .why h3{
  color:var(--white); font-size:1.25rem; font-weight:600;
  text-transform:capitalize; margin:0 0 10px;
}
.split-band .why p{ color:rgba(255,255,255,.8); font-size:1rem; line-height:1.65; }
.split-band__cta{ margin-top:40px; }

/* Rotating seal on the seam between the copy and the photograph. */
.spin-badge{
  position:absolute; left:-64px; top:50%; transform:translateY(-50%);
  width:128px; height:128px; border-radius:50%; z-index:4;
  background:var(--accent); color:var(--white);
  display:grid; place-items:center;
  box-shadow:0 20px 48px -14px rgba(0,0,0,.55);
  transition:background-color .25s var(--ease);
}
.spin-badge:hover{ background:var(--accent-deep); color:var(--white); }
.spin-badge svg{ position:absolute; inset:0; width:100%; height:100%; }
/* letter-spacing is deliberately absent: textLength/lengthAdjust on the
   textPath distributes the glyphs to fill the circle exactly, and a
   CSS letter-spacing on top of that fights it. */
.spin-badge text{
  font-size:10px; font-weight:700;
  fill:var(--white); text-transform:uppercase;
}
.spin-badge__arr{ font-size:1.55rem; font-weight:700; line-height:1; }

/* --- Our work: even project cards with the brand chip on top --- */
.showcase__grid--cards{
  grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; gap:24px;
  width:auto; margin-left:0; padding:0;
}
.showcase__grid--cards .showcase__item{ aspect-ratio:4/3; border-radius:var(--r-lg); }
.showcase__grid--cards .showcase__item::after{
  background:linear-gradient(to top, rgba(20,23,26,.55) 0%, rgba(20,23,26,0) 46%),
             linear-gradient(to bottom, rgba(20,23,26,.42) 0%, rgba(20,23,26,0) 32%);
}
.showcase__grid--cards .showcase__tag{
  top:16px; left:16px; bottom:auto;
  background:rgba(20,23,26,.62); border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:7px 15px; border-radius:100px; font-size:.82rem;
}

/* --- Counter band: accent numerals on a light ground, split by hairlines.
       Sits between the white About block and the dark services band, so the
       wash tone gives a step down from one to the other without going dark. --- */
.stats-band{ background:var(--wash); padding:64px 0; border-block:1px solid var(--line); }
.page-home .stats{ gap:0; }
.page-home .stats > div{
  padding:6px 26px; border-left:1px solid var(--line);
}
.page-home .stats > div:first-child{ border-left:0; }
.page-home .stats strong{
  color:var(--accent); font-size:3.5rem; font-weight:700; letter-spacing:-.04em;
}
.page-home .stats strong small{ color:var(--accent); font-size:2rem; }
.page-home .stats span{ color:var(--muted); font-size:.94rem; margin-top:8px; }
.page-home .stats__icon{ color:var(--accent); }

/* --- Modular systems: arch-topped photograph, as in the reference --- */
.page-home .section--wash .svc__media img{
 /*border-radius:280px 280px var(--r-lg) var(--r-lg);*/
}

/* --- Testimonials + product cards: calmer surfaces, accent rules --- */
.page-home .testi{ border-radius:var(--r-lg); position:relative; padding-top:32px; }
.page-home .testi::before{
  content:''; position:absolute; top:0; left:26px; width:44px; height:3px;
  border-radius:0 0 3px 3px; background:linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.page-home .prod{ border-radius:var(--r-lg); }
.page-home .prod__body .arr{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(0,109,177,.10); color:var(--accent); font-size:.95rem;
}
.page-home .prod:hover .prod__body .arr{ background:var(--accent); color:var(--white); }

@media (prefers-reduced-motion: no-preference){
  .spin-badge svg{ animation:sealSpin 20s linear infinite; transform-origin:50% 50%; }
  @keyframes sealSpin{ to{ transform:rotate(360deg); } }
}

@media (max-width:1023px){
  .split-band{ grid-template-columns:1fr; }
  .split-band__content{ padding:72px 28px; }
  .split-band__inner{ max-width:none; margin:0 auto; }
  .split-band__media{ min-height:420px; }
  .spin-badge{ left:auto; right:24px; top:-52px; transform:none; width:104px; height:104px; }
  .showcase__grid--cards{ grid-template-columns:repeat(2,1fr); }
  .section-head--split{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .page-home .hero__inner{ padding:88px 0 150px; }
  .hero__strip{ padding:16px 0; }
  .hero__strip ul{ gap:10px 22px; }
  .hero__strip li{ font-size:.8rem; }
  .svc-band{ padding:64px 0 68px; }
  .svc-panel{ padding:16px 16px 22px; }
  .stats-band{ padding:44px 0; }
  .page-home .stats{ grid-template-columns:1fr 1fr; gap:24px 0; }
  .page-home .stats > div:nth-child(odd){ border-left:0; }
  .page-home .stats strong{ font-size:2.6rem; }
  .split-band .why-grid{ grid-template-columns:1fr; gap:18px; }
  .split-band .why{ border-radius:28px; padding:24px; }
  .split-band .why .icon-chip{ margin-bottom:18px; }
  .split-band .why:first-child{ grid-column:auto; }
  .showcase__grid--cards{ grid-template-columns:1fr; }
  .page-home .section--wash .svc__media img{ border-radius:180px 180px var(--r) var(--r); }
}

/* ==========================================================================
   HOME — ABOUT BAND
   Sits directly under the hero. Story, images and the catalog link are lifted
   from about-us.html; the layout follows the reference's about block —
   arch-topped photographs on the left with a dark stat card breaking their
   edge, copy and a badge checklist on the right.
   ========================================================================== */
.about-band{ position:relative; overflow:hidden; padding:96px 0 104px; }
/* Soft accent bloom behind the photographs, so the block isn't a flat white. */
.about-band::before{
  content:''; position:absolute; z-index:0;
  left:-140px; top:6%; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,109,177,.09) 0%, rgba(0,109,177,0) 68%);
}
.about-band > .container{ position:relative; z-index:1; }
.about-band__grid{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:72px; align-items:center;
}

/* --- Photographs --- */
.about-band__media{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:20px;
  align-items:start; padding-bottom:34px;
}
.about-band__shot{
  margin:0; overflow:hidden; position:relative;
  box-shadow:0 30px 70px -28px rgba(20,23,26,.42);
}
.about-band__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-band__shot--tall{
  aspect-ratio:3/4.5; border-radius:10px;
}
.about-band__shot--short{
  aspect-ratio:3/3.5; margin-top:72px;
  border-radius:10px;
}

/* Dark card breaking the bottom edge of the photographs. */
.about-band__stat{
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--graphite); color:var(--white);
  border-radius:var(--r-lg); padding:20px 26px 22px;
  box-shadow:0 26px 60px -20px rgba(20,23,26,.6);
}
.about-band__stat strong{
  display:block; font-size:2.5rem; font-weight:700; line-height:1;
  letter-spacing:-.04em; color:var(--accent);
}
.about-band__stat strong small{ font-size:1.5rem; font-weight:700; }
.about-band__stat span{
  display:block; margin-top:8px; max-width:15ch;
  font-size:var(--fs-sm); font-weight:500; color:#C2C7CC; line-height:1.4;
}

/* --- Copy --- */
.about-band__body h2{
  font-size:clamp(2rem, 3.1vw, 2.9rem); letter-spacing:-.03em; margin-bottom:18px;
}
.about-band__lede{ font-size:1.1rem; line-height:1.75; color:var(--body); margin:0; }
.about-band__label{
  margin:30px 0 14px; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.about-band__list{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 28px;
  margin:0; padding:0; list-style:none;
}
.about-band__list li{
  display:flex; align-items:center; gap:11px;
  font-weight:600; color:var(--ink); font-size:1rem;
}
.about-band__list li::before{
  content:''; flex:0 0 auto; width:19px; height:19px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23006DB1'/%3E%3Cpath d='M5.8 10.3l2.7 2.7 5.7-5.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.about-band__cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:36px; }
.about-band__cta .btn{ min-height:53px; }

@media (max-width:1023px){
  .about-band__grid{ grid-template-columns:1fr; gap:56px; }
  .about-band__media{ max-width:560px; }
}
@media (max-width:768px){
  .about-band{ padding:64px 0 72px; }
  .about-band__shot--tall{ aspect-ratio:3/4; }
  .about-band__shot--short{ aspect-ratio:3/3.2; margin-top:44px; }
  .about-band__shot--tall,
  .about-band__shot--short{ border-radius:220px 220px var(--r) var(--r); }
  .about-band__stat{ padding:16px 20px 18px; }
  .about-band__stat strong{ font-size:2rem; }
  .about-band__list{ grid-template-columns:1fr; gap:11px; }
  .about-band__cta .btn{ width:100%; justify-content:flex-start; }
}

/* ==========================================================================
   HOME — OUR WORK, filterable project gallery
   Follows the reference's slider-variant work block: a centred row of filter
   buttons, a two-column grid, photographs at a 20px radius with a frosted
   category chip in the top-left corner and the brand set centred underneath.
   Categories are derived from the site's own links — the four projects with a
   written case study, and the five without.
   ========================================================================== */
.work-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px;
  margin:0 0 40px;
}
.work-nav button{
  font-family:inherit; font-size:.95rem; font-weight:600; letter-spacing:.01em;
  color:var(--ink); background:none; border:0; padding:6px 2px; cursor:pointer;
  position:relative; transition:color .2s var(--ease);
}
.work-nav button::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.work-nav button:hover{ color:var(--accent-ink); }
.work-nav button.is-active{ color:var(--accent); }
.work-nav button.is-active::after{ transform:scaleX(1); }
.work-nav button:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.work-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:34px 26px; }

.work-item{ display:block; color:inherit; }
.work-item__media{
  position:relative; margin:0 0 15px; overflow:hidden;
  border-radius:16px; aspect-ratio:16/10; background:var(--wash);
}
.work-item__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.work-item:hover .work-item__media img{ transform:scale(1.05); }
/* Top wash only — the chip needs a ground, the rest of the photo does not. */
.work-item__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,23,26,.34) 0%, rgba(20,23,26,0) 28%);
}
.work-item__tag{
  position:absolute; z-index:1; top:12px; left:12px;
  padding:6px 11px; border-radius:9px;
  font-size:.76rem; font-weight:600; letter-spacing:.02em; color:var(--white);
  background:rgba(20,23,26,.34); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.work-item h3{
  margin:0; text-align:center;
  font-size:1.04rem; font-weight:600; letter-spacing:-.015em; color:var(--ink);
  transition:color .2s var(--ease);
}
.work-item:hover h3{ color:var(--accent); }
.work-item:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:16px; }

/* Filtered-out cards collapse out of the grid. */
.work-item[hidden]{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .work-item{ transition:opacity .28s var(--ease), transform .28s var(--ease); }
  .work-item.is-entering{ opacity:0; transform:translateY(12px); }
}

@media (max-width:1023px){
  .work-grid{ grid-template-columns:1fr 1fr; gap:30px 22px; }
}
@media (max-width:768px){
  .work-nav{ gap:8px 20px; margin-bottom:28px; }
  .work-nav button{ font-size:.88rem; }
  .work-grid{ grid-template-columns:1fr; gap:28px; }
  .work-item__media{ border-radius:14px; margin-bottom:14px; }
  .work-item h3{ font-size:1rem; }
}

/* ==========================================================================
   BUTTONS — normalisation pass
   .btn had accumulated seven layers of overrides across this file; these are
   the places where the layers disagreed with each other.
   ========================================================================== */

/* Base declares a 2px border while every variant (primary, outline, ghost)
   sets 1px, so a variant-less .btn sits 2px taller than its neighbours.
   Nothing on the site is variant-less today — this keeps it that way. */
.btn{ border-width:1px; }

/* Full-width split buttons: centring pulls the arrow square in off the edge
   and opens a gap mid-button. Spread it so the square stays flush right,
   which is the entire point of the shape. */
.hero__actions .btn--split,
.section-cta .btn--split,
.about-band__cta .btn--split,
.split-band__cta .btn--split{ justify-content:space-between; }

@media (max-width:768px){
  .hero__actions .btn--split,
  .section-cta .btn--split,
  .about-band__cta .btn--split{ width:100%; justify-content:space-between; }
  /* The catalog button carries an icon; left-align it rather than centring
     icon and label together as a floating pair. */
  .about-band__cta .btn--outline{ justify-content:flex-start; }
}

/* ==========================================================================
   HOME — TESTIMONIALS, photo left / slider right
   Follows the reference's testimonial block: a tall photograph in one half,
   and in the other an eyebrow, heading and a one-at-a-time slider with the
   rating above the quote and the author beneath it. The slider itself is the
   site's existing [data-slider] widget — it already does scroll-snap, arrows,
   dots, keyboard and reduced-motion; it only needed to show one card at a
   time here instead of two.
   ========================================================================== */
.testi-band{ overflow-x:clip; }
.testi-band__grid{
  display:grid; grid-template-columns:.96fr 1.04fr; gap:52px; align-items:center;
}
/* Grid items default to min-width:auto, so the slider's horizontally
   scrollable track can push its column wider than its 0.92fr share and take
   the whole block past the container edge. min-width:0 lets the tracks hold
   their computed widths, which is what keeps the section inside .container. */
.testi-band__grid > *{ min-width:0; }
.testi-band .testi-row,
.testi-band .slider,
.testi-band .slider__track{ min-width:0; max-width:100%; }
.testi-band__media,
.testi-band__media figure{ max-width:100%; }

.testi-band__media figure{
  margin:0; overflow:hidden; border-radius:var(--r-lg);
  aspect-ratio:5/6; min-height:520px;
  box-shadow:0 34px 80px -30px rgba(20,23,26,.45);
}
.testi-band__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.testi-band__body h2{
  font-size:clamp(1.9rem, 2.8vw, 2.6rem); letter-spacing:-.03em; margin-bottom:0;
}

/* One card in view rather than the default two, and no top margin — the
   heading above it already supplies the spacing. */
.testi-band .testi-row{ margin-top:30px; }
.testi-band .slider__slide{ flex:0 0 100%; }
.testi-band .slider__track{ gap:20px; }
.testi-band .testi{ padding:34px 36px 32px; height:100%; }
.testi-band .testi p{
  font-size:1.06rem; line-height:1.72; color:var(--body); margin-bottom:24px;
}
.testi-band .stars{ font-size:1rem; letter-spacing:4px; margin-bottom:16px; }

/* Author row: initials stand in for the portrait the reference uses — the
   site has no client photographs and inventing one would be worse. */
.testi__by{ display:flex; align-items:center; gap:14px; }
.testi__avatar{
  flex:0 0 auto; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  background:rgba(0,109,177,.12); color:var(--accent-ink);
  font-size:.92rem; font-weight:700; letter-spacing:.03em;
}
.testi__who{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.testi__who strong{ font-size:1.02rem; letter-spacing:-.01em; }

/* Arrows sit under the card on the left, following the copy, not centred. */
.testi-band .slider__ctrls{ justify-content:flex-start; margin-top:22px; }
.testi-band__body > .btn{ margin-top:26px; }

@media (max-width:1023px){
  .testi-band__grid{ grid-template-columns:1fr; gap:44px; }
  .testi-band__media{ max-width:540px; }
  .testi-band__media figure{ aspect-ratio:5/4; min-height:0; }
}
@media (max-width:768px){
  .testi-band__grid{ gap:32px; }
  .testi-band__media{ max-width:none; }
  .testi-band__media figure{ aspect-ratio:4/3; }
  .testi-band .testi{ padding:26px 24px 24px; }
  .testi-band .testi p{ font-size:1rem; margin-bottom:20px; }
  .testi-band .slider__ctrls{ justify-content:center; }
  .testi-band__body > .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   TRUST STRIP — logo marquee
   Sits directly under the hero. The track holds the fourteen logos twice; the
   animation travels exactly -50%, so the second set lands where the first
   started and the loop is seamless with no JavaScript. The duplicate carries
   aria-hidden, so assistive tech reads the brands once.
   ========================================================================== */
.trust--marquee{ padding:44px 0 40px; }
.trust--marquee .trust__note{ margin-bottom:26px; }
.trust--marquee .trust__lede{ margin-top:28px; }

.marquee{ --slots:6; position:relative; overflow:hidden; }
/* Fade the two edges into the page so logos enter and leave rather than
   being chopped off at the viewport border. */
.marquee::before,
.marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(48px, 10vw, 150px);
  z-index:2; pointer-events:none;
}
.marquee::before{ left:0;  background:linear-gradient(90deg,  var(--white), rgba(255,255,255,0)); }
.marquee::after{  right:0; background:linear-gradient(270deg, var(--white), rgba(255,255,255,0)); }

.marquee__track{ display:flex; width:max-content; }

/* The shared .logo-strip wraps and centres; inside the marquee it must be a
   single unbroken row instead. */
.marquee .logo-strip{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start;
  gap:0; margin:0; padding:0;
}
.marquee .logo-strip img{
  background: none;
  border-radius: 0;
  box-shadow: none;
  max-height: 85px;
  width: calc(100vw / var(--slots));
  margin: 0;
  transition: transform .25s var(--ease);
  height: 100%;
}


.section--wash .svc__media {  box-shadow: none; }

@media (prefers-reduced-motion: no-preference){
  .marquee__track{ animation:logoMarquee 46s linear infinite; }
  /* Let a visitor stop it to read a logo. */
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track{ animation-play-state:paused; }
  @keyframes logoMarquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
}

@media (max-width:1200px){ .marquee{ --slots:5; } }
@media (max-width:1023px){ .marquee{ --slots:4; } }

@media (max-width:768px){
  .trust--marquee{ padding:32px 0 30px; }
  .trust--marquee .trust__note{ margin-bottom:20px; }
  .marquee{ --slots:3; }
  .marquee .logo-strip img{ max-height:40px; padding:0 8px; }
  .marquee__track{ animation-duration:32s; }
}

@media print{
  .marquee__track{ animation:none; transform:none; }
  .marquee .logo-strip[aria-hidden="true"]{ display:none; }
}

/* ==========================================================================
   --- IMAGE HOVER: diagonal sweep ---
   A translucent bar sits rotated -45deg with zero height at the centre of the
   frame; on hover it grows past the corners while fading out, reading as a
   light raking across the photograph. The transition is declared only in the
   :hover state, so the bar snaps back to zero height invisibly when the
   pointer leaves instead of sweeping backwards.

   The sweep rides on ::before everywhere except .prod__media, whose ::before
   already carries a top-light gradient — that one uses ::after instead.
   ========================================================================== */
.work-item__media,
.svc-card__media,
.prod__media,
.about-band__shot,
.testi-band__media figure,
.showcase__item{ position:relative; overflow:hidden; }
/* .split-band__frame is intentionally absent: it sets its own
   position:absolute; inset:0 higher up, and this rule's position:relative
   would override it and collapse the frame. It still takes the sweep via
   the ::before selectors below. */
/* .split-band__media is deliberately NOT in that list: it carries the spin
   badge, which is positioned to overhang the frame on purpose. Clipping it
   would cut the badge in half, so that photo forgoes the sweep. */

.work-item__media::before,
.svc-card__media::before,
.about-band__shot::before,
.testi-band__media figure::before,
.split-band__frame::before,
.showcase__grid:not([data-lightbox]) .showcase__item::before,
.prod__media::after{
  content:''; position:absolute; z-index:3; pointer-events:none;
  left:50%; top:50%; width:200%; height:0;
  background-color:rgba(255,255,255,.30);
  transform:translate(-50%,-50%) rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference){
  .work-item:hover .work-item__media::before,
  .work-item__media:hover::before,
  .svc-card:hover .svc-card__media::before,
  .about-band__shot:hover::before,
  .testi-band__media figure:hover::before,
  .split-band__media:hover .split-band__frame::before,
  .showcase__grid:not([data-lightbox]) .showcase__item:hover::before,
  .prod:hover .prod__media::after{
    height:250%;
    background-color:transparent;
    transition:height 600ms linear, background-color 600ms linear;
  }
}

/* ==========================================================================
   INNER PAGES — reference design language, site-wide
   The home page already carries this language under .page-home. This layer
   promotes the page-agnostic parts off that scope and restyles the components
   that only appear on inner pages: product detail galleries, the quote block,
   blog cards, the setup accordion and the shared CTA band.

   CSS only, deliberately: no page markup is touched, so every inner page
   keeps its exact content and images.
   ========================================================================== */

/* --- Eyebrow: the gear mark, everywhere now, not just the home page ------- */
.eyebrow{ gap:11px; letter-spacing:.15em; color:var(--accent); }
.eyebrow::before{
  width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23006DB1' fill-rule='evenodd' d='M8 0l1.3 1.6 2-.7.5 2.1 2.1.5-.7 2L15 8l-1.6 1.3.7 2-2.1.5-.5 2.1-2-.7L8 16l-1.3-1.6-2 .7-.5-2.1-2.1-.5.7-2L1 8l1.6-1.3-.7-2 2.1-.5.5-2.1 2 .7zM8 5.4A2.6 2.6 0 1 0 8 10.6 2.6 2.6 0 0 0 8 5.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.eyebrow--center::after{ display:none; }
.eyebrow--light{ color:var(--accent-soft); }
.section-head h2{ letter-spacing:-.03em; }

/* --- Product cards: promoted off .page-home ------------------------------ */
.prod{ border-radius:var(--r-lg); }
.prod__body .arr{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(0,109,177,.10); color:var(--accent); font-size:.95rem;
  transition:background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.prod:hover .prod__body .arr{ background:var(--accent); color:var(--white); }

/* --- Gallery tiles: rounder, with the frosted chip the work cards use ----- */
.showcase__item{ border-radius:16px; }
.showcase__tag{
  top:14px; left:14px; bottom:auto;
  padding:6px 12px; border-radius:9px; font-size:.78rem;
  background:rgba(20,23,26,.42); border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

/* --- Product detail: gallery ---------------------------------------------- */
.pd-main{ border-radius:20px; border-color:rgba(20,23,26,.08); }
.pd-thumb{ border-radius:12px; }
.pd-thumb:hover{ border-color:rgba(0,109,177,.45); }

/* Enquiry card beside the product goes dark, like the reference's CTA blocks
   — it is the one thing on the page that should not read as another panel. */
.pd-cta-card{
  background:var(--graphite); border-color:rgba(255,255,255,.10);
  border-radius:var(--r-lg); padding:24px 24px 22px;
  position:relative; overflow:hidden;
}
.pd-cta-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft) 60%, rgba(46,147,216,0));
}
.pd-cta-card h3,.pd-cta-card h4,.pd-cta-card strong{ color:var(--white); }
.pd-cta-note{ color:#B3B9BF; }
.pd-cta-card .btn--outline{ color:var(--white); border-color:rgba(255,255,255,.34); }
.pd-cta-card .btn--outline:hover{
  color:var(--white); border-color:var(--white); background:rgba(255,255,255,.12);
}

/* --- Quote block: the card gets the accent tab the testimonials have ------ */
#quote-form {background:#2A333C;}
.quote-card{ border-radius:var(--r-lg); position:relative; overflow:hidden; }
.quote-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft) 55%, rgba(46,147,216,0));
}
.quote-direct__icon{
  border-radius:12px; background:rgba(0,109,177,.16); color:var(--accent-soft);
}

/* Ticks become the badge mark used in the hero strip, so one tick icon runs
   through the whole site instead of three different ones. */
.tick-list li{ padding-left:30px; }
.tick-list li::before{
  content:''; position:absolute; left:0; top:.28em;
  width:18px; height:18px; border:0; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23006DB1'/%3E%3Cpath d='M5.8 10.3l2.7 2.7 5.7-5.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:none;
}

/* --- CTA band: accent hairline closing it, matching the inner banners ----- */
.cta-band{ position:relative; }
.cta-band::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  background:linear-gradient(90deg,
    var(--accent) 0%, var(--accent-soft) 36%, rgba(46,147,216,.28) 64%, rgba(46,147,216,0) 100%);
}

/* --- Blog: cards and article media --------------------------------------- */
.post-card img{ border-radius:16px; }
.post-card__date{ color:var(--accent-ink); }
.post-card__date::before{
  content:''; width:14px; height:14px; flex:0 0 auto; border-radius:50%;
  background:rgba(0,109,177,.18);
  box-shadow:inset 0 0 0 3px var(--accent);
}
.post-featured{ border-radius:20px; box-shadow:0 30px 70px -30px rgba(20,23,26,.4); }
.post-content > p:first-of-type{ color:var(--ink); }

/* --- Setup accordion ------------------------------------------------------ */
.setup-acc{ border-radius:var(--r-lg); }
.setup-acc[open]{ border-color:rgba(0,109,177,.32); }

/* --- Trust note: matches the section eyebrows -------------------------- */
.trust__note{ color:var(--muted); letter-spacing:.14em; }

@media (max-width:768px){
  .pd-cta-card{ padding:20px 18px 18px; }
  .showcase__tag{ top:10px; left:10px; padding:5px 10px; font-size:.74rem; }
}

/* ==========================================================================
   ABOUT US — intro block
   The reference's about layout: a tall arch-topped photograph with a second,
   smaller frame overlapping its lower right and a dark figure badge breaking
   the bottom-left corner, with the copy alongside. Both of the page's original
   photographs are used; the two prose blocks it had are kept verbatim, now
   stacked in one column under their own headings.
   ========================================================================== */
.about-intro{ padding:92px 0 96px; }
.about-intro__grid{
  display:grid; grid-template-columns:1fr 1.06fr; gap:76px; align-items:center;
}
.about-intro__grid > *{ min-width:0; }

/* --- Photographs --- */
.about-intro__media{ position:relative; padding:0 0 34px; }
.about-intro__img{ margin:0; overflow:hidden; position:relative; }
.about-intro__img img{ width:100%; height:100%; object-fit:cover; display:block; }

.about-intro__img--1{
  width:80%; aspect-ratio:4/5;
  border-radius:10px;
  box-shadow:0 34px 78px -32px rgba(20,23,26,.45);
}
/* The second frame overlaps the first, ringed in the page background so the
   two photographs stay legible where they meet. */
.about-intro__img--2{
  position:absolute; right:0; bottom:64px; z-index:2;
  width:48%; aspect-ratio:1/1;
  border-radius:var(--r-lg); border:9px solid var(--white);
  box-shadow:0 28px 64px -26px rgba(20,23,26,.5);
}

.about-intro__badge{
  position:absolute; left:0; bottom:0; z-index:3;
  background:var(--graphite); color:var(--white);
  border-radius:var(--r-lg); padding:20px 26px 22px;
  box-shadow:0 26px 60px -20px rgba(20,23,26,.6);
}
.about-intro__badge strong{
  display:block; font-size:2.5rem; font-weight:700; line-height:1;
  letter-spacing:-.04em; color:var(--accent);
}
.about-intro__badge strong small{ font-size:1.5rem; font-weight:700; }
.about-intro__badge span{
  display:block; margin-top:8px; max-width:15ch;
  font-size:var(--fs-sm); font-weight:500; color:#C2C7CC; line-height:1.4;
}

/* --- Copy --- */
.about-intro__body h2{
  font-size:clamp(2rem, 3.2vw, 2.9rem); letter-spacing:-.03em; margin-bottom:18px;
}
.about-intro__lede{ font-size:1.1rem; line-height:1.75; color:var(--body); margin:0; }
.about-intro__sub{
  margin:30px 0 10px; font-size:1.18rem; font-weight:700; letter-spacing:-.015em;
  display:flex; align-items:center; gap:11px;
}
/* Same accent rule the inner banners use, so sub-heads read as one system. */
.about-intro__sub::before{
  content:''; width:26px; height:3px; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.about-intro__body p{ color:var(--body); line-height:1.75; margin:0; }
.about-intro__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

@media (max-width:1023px){
  .about-intro{ padding:64px 0 68px; }
  .about-intro__grid{ grid-template-columns:1fr; gap:52px; }
  .about-intro__media{ max-width:560px; }
}
@media (max-width:768px){
  .about-intro__img--1{ width:100%; aspect-ratio:4/4.4; border-radius:220px 220px var(--r) var(--r); }
  .about-intro__img--2{ width:44%; bottom:auto; top:calc(100% - 34% - 34px); border-width:6px; }
  .about-intro__media{ padding-bottom:24px; }
  .about-intro__badge{ padding:16px 20px 18px; }
  .about-intro__badge strong{ font-size:2rem; }
  .about-intro__cta .btn{ width:100%; justify-content:center; }
}

/* --- Lightbox galleries: sweep without disturbing the magnifier badge -----
   [data-lightbox] .showcase__item::before is the "enlarge" affordance, so the
   sweep rides ::after here. That pseudo-element already exists on the tile as
   the generic scrim and is switched off in lightbox grids, which leaves it
   free. inset:auto clears the scrim's inset:0 before the bar is positioned. */
.showcase__grid[data-lightbox] .showcase__item::after{
  inset:auto; left:50%; top:50%; width:200%; height:0;
  background:rgba(255,255,255,.30);
  transform:translate(-50%,-50%) rotate(-45deg);
  opacity:1; z-index:1; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .showcase__grid[data-lightbox] .showcase__item:hover::after{
    height:250%; background:transparent;
    transition:height 600ms linear, background-color 600ms linear;
  }
}

/* ==========================================================================
   OUR SERVICES — sidebar and content
   The reference's service page runs a 4/8 split: a sticky sidebar carrying a
   services category list and a dark "need help" card, with the service entries
   in the wider column beside it. The four entries themselves are the page's
   existing .svc rows, unchanged.
   ========================================================================== */
.svc-page__grid{
  display:grid; grid-template-columns:330px 1fr; gap:52px; align-items:start;
}
.svc-page__grid > *{ min-width:0; }
.svc-page__side{ position:sticky; top:120px; display:grid; gap:22px; }

/* --- Category list --- */
.svc-cats{
  background:var(--wash); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 26px 12px;
}
.svc-cats h2{
  font-size:1.22rem; letter-spacing:-.015em; margin:0 0 16px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.svc-cats ul{ list-style:none; margin:0; padding:0; }
.svc-cats li{ margin:0 0 6px; }
.svc-cats a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-radius:var(--r);
  font-size:.98rem; font-weight:600; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease);
}
.svc-cats a::after{
  content:'\2192'; flex:0 0 auto; font-weight:700; color:var(--accent);
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.svc-cats a:hover{
  background:var(--accent); border-color:var(--accent); color:var(--white);
  transform:translateX(2px);
}
.svc-cats a:hover::after{ color:var(--white); transform:translateX(3px); }

/* --- "Need help" card: the one dark surface in the column --- */
.svc-help{
  position:relative; overflow:hidden;
  background:var(--graphite); color:var(--white);
  border-radius:var(--r-lg); padding:28px 26px 26px;
}
.svc-help::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft) 60%, rgba(46,147,216,0));
}
/* A soft accent bloom, so the card is not a flat black rectangle. */
.svc-help::after{
  content:''; position:absolute; right:-70px; bottom:-70px;
  width:190px; height:190px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(0,109,177,.22) 0%, rgba(0,109,177,0) 70%);
}
.svc-help > *{ position:relative; z-index:1; }
.svc-help__logo{
  width:150px; height:auto; margin-bottom:20px;
  filter:brightness(0) invert(1); opacity:.92;
}
.svc-help h3{
  color:var(--white); font-size:1.45rem; letter-spacing:-.02em; margin:0 0 8px;
}
.svc-help h3 em{ font-style:normal; color:var(--accent); }
.svc-help p{ color:#B3B9BF; font-size:.96rem; line-height:1.6; margin:0 0 20px; }

.svc-help__item{
  display:flex; align-items:center; gap:12px; margin-top:10px;
  padding:12px 14px; border-radius:var(--r);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--white); overflow-wrap:anywhere;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.svc-help__item:hover{
  background:rgba(0,109,177,.16); border-color:rgba(0,109,177,.42); color:var(--white);
}
.svc-help__icon{
  flex:0 0 auto; display:grid; place-items:center;
  width:38px; height:38px; border-radius:11px;
  background:rgba(0,109,177,.18); color:var(--accent-soft);
}
.svc-help__icon svg{ width:19px; height:19px; }
.svc-help__item strong{ font-size:.94rem; font-weight:600; line-height:1.35; }

/* --- Entries: the existing rows, in a narrower column --- */
.svc-page__main .svc{ gap:44px; padding:0 0 52px; }
.svc-page__main .svc:last-child{ padding-bottom:0; }
.svc-page__main .svc__media img{ border-radius:var(--r-lg); }

@media (max-width:1023px){
  .svc-page__grid{ grid-template-columns:1fr; gap:44px; }
  /* Sidebar moves below the entries — the list is navigation away from this
     page, so it should not come before the content it is introducing. */
  .svc-page__side{ position:static; order:2; }
  .svc-page__main{ order:1; }
  .svc-help__logo{ width:130px; }
}
@media (max-width:768px){
  .svc-cats{ padding:20px 20px 8px; }
  .svc-help{ padding:24px 20px 22px; }
  .svc-page__main .svc{ padding-bottom:38px; gap:26px; }
}