/* ==========================================================================
   tf-instry - theme-forge "Foundry Ghost-Type" theme  (Ferrovane Industrial Co.)
   LIKENESS build of the Instry reference: charcoal-first heavy-industry world
   punched by ONE bright golden accent, built on three devices - a ghost mega-type
   system, pixel-mosaic photo corners, and a pinned deck-of-cards services section.
   Square everything (0 radius), boxed NE arrows, hairline dividers, parenthesized
   index numbers, 5.5s sliders, word + logo marquees.
   Fonts: Chakra Petch (display/nav/btn) + Saira (body). Own CSS/JS/copy/imagery.
   Zero external requests. IP guardrail: repos/theme-forge/README.md.
   ========================================================================== */

/* ---- self-hosted fonts ---- */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/chakra-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/chakra-700.woff2") format("woff2"); }
@font-face { font-family: "Saira"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/saira-400.woff2") format("woff2"); }

/* ---- tokens ---- */
:root {
  --paper: #F4F3F0;         /* warm off-white band */
  --paper-2: #EAE9E5;       /* slightly deeper paper (catalog bg) */
  --ink: #212226;           /* charcoal ink / dark bands */
  --dark: #17181B;          /* deepest band + footer overlay */
  --dark-2: #1E1F23;        /* card / input on dark */
  --accent: #FFC145;        /* bright golden accent */
  --accent-deep: #E8A81F;
  --muted: #56575A;         /* body grey on light (>=6:1 on paper) */

  --hairline: rgba(23,24,27,.12);
  --hairline-dark: rgba(255,255,255,.12);
  --ghost-dark: rgba(255,255,255,.24);
  --ghost-paper: #E8E7E3;
  --on-dark: #ffffff;
  --on-dark-muted: #B9B9BC;

  --font-display: "Chakra Petch", system-ui, -apple-system, sans-serif;
  --font-body: "Saira", system-ui, -apple-system, sans-serif;

  /* type scale (hero targets ref 120px, section h2 80px, deck h3 60px) */
  --fs-hero: clamp(3.2rem, 0.4rem + 9.6vw, 7.5rem);      /* ~51 - 120 */
  --fs-pagetitle: clamp(2.8rem, 1.2rem + 5.4vw, 6.25rem);/* ~45 - 100 */
  --fs-h2: clamp(2.2rem, 0.9rem + 4.4vw, 5rem);          /* ~35 - 80 */
  --fs-deck: clamp(2rem, 1rem + 3.2vw, 3.75rem);         /* ~32 - 60 */
  --fs-h3: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);      /* ~22 - 28 */
  --fs-body: 1.0625rem;   /* 17px */
  --fs-eyebrow: 0.75rem;
  --fs-stat: clamp(3.4rem, 1.6rem + 6vw, 6.25rem);       /* stat plate 500 */

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:90px; --s10:120px;

  --sh-1: 0 2px 10px rgba(15,15,18,.05), 0 20px 46px rgba(15,15,18,.08);
  --t: 300ms; --ease: cubic-bezier(.22,.61,.36,1);
  --gut: 30px;
  --wrap: 1410px;
  --hd-h: 94px;
}

/* ---- reset / base ---- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img,svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.03; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
p { margin: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--ink); padding: 10px 16px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }
.wrap { width: min(100% - calc(var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap--fluid { width: calc(100% - var(--gut) * 2); margin-inline: auto; max-width: 1770px; }

/* ---- eyebrow chip: white rect + yellow square marker + uppercase label ---- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); background: #fff; padding: 9px 15px 9px 13px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; }
.eyebrow--dark { background: rgba(255,255,255,.07); color: #fff; }
.eyebrow--center { margin-inline: auto; }

/* ---- buttons: square 0-radius plates + NE arrow ---- */
.btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; padding: 20px 26px; border: 0; border-radius: 0; transition: background var(--t), color var(--t), transform .45s var(--ease); }
.btn__ico { display: inline-flex; width: 15px; height: 15px; transition: transform .45s var(--ease); }
.btn__ico svg { width: 100%; height: 100%; }
.btn:hover .btn__ico { transform: translate(3px,-3px); }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--ink); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--accent); color: var(--ink); }
.btn--block { width: 100%; justify-content: space-between; }

/* boxed arrow square link */
.arrowlink { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.arrowlink svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.arrowlink:hover svg { transform: translate(3px,-3px); }
.arrowlink--light { color: #fff; }
.boxarrow { width: 56px; height: 56px; flex: none; display: grid; place-items: center; background: #fff; color: var(--ink); transition: background var(--t), color var(--t); }
.boxarrow svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.boxarrow:hover { background: var(--accent); }
.boxarrow:hover svg { transform: translate(3px,-3px); }

/* pixel-mosaic corner squares (decorative) */
.mosaic { position: absolute; display: grid; grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; gap: 0; pointer-events: none; z-index: 3; }
.mosaic i { background: var(--paper); }
.mosaic--tr { top: -1px; right: -1px; }
.mosaic--tl { top: -1px; left: -1px; }
.mosaic--br { bottom: -1px; right: -1px; }
.mosaic i:nth-child(2){ background: transparent; }
.mosaic--ink i { background: var(--ink); }

/* ghost mega-type */
.ghost { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: .8; letter-spacing: -.02em; pointer-events: none; user-select: none; white-space: nowrap; position: absolute; z-index: 0; }
.ghost--paper { color: var(--ghost-paper); }
.ghost--dark { color: var(--ghost-dark); }

/* hairline divider */
.hair { border: 0; height: 1px; background: var(--hairline); margin: 0; }
.hair--dark { background: var(--hairline-dark); }

/* ==========================================================================
   HEADER (sticky, no shrink)
   ========================================================================== */
.header { position: sticky; top: 0; z-index: 100; height: var(--hd-h); background: var(--dark); color: #fff; }
.header__in { height: 100%; width: calc(100% - var(--gut) * 2); margin-inline: auto; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; letter-spacing: -.01em; color: #fff; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.nav { display: flex; align-items: center; gap: 26px; margin-right: auto; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; transition: color var(--t); }
.nav__link:hover, .nav__link[aria-current=page] { color: var(--accent); }
.nav__link svg { width: 10px; height: 10px; opacity: .7; }
.header__right { display: flex; align-items: center; gap: 20px; }
.header__phone { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff; white-space: nowrap; }
.header__phone svg { width: 20px; height: 20px; color: var(--accent); }
.header .btn { padding: 18px 22px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #fff; border: 0; }
.icon-btn svg { width: 20px; height: 20px; }
.nav-toggle { display: grid; }

/* off-canvas mobile nav (LEFT, 330px, visibility toggle) */
.mnav { position: fixed; inset: 0 auto 0 0; width: 330px; max-width: 86vw; background: var(--dark); color: #fff; z-index: 160; padding: 28px 26px; transform: translateX(-330px); visibility: hidden; transition: transform .4s var(--ease), visibility 0s .4s; overflow-y: auto; }
.mnav.open { transform: translateX(0); visibility: visible; transition: transform .4s var(--ease); }
.mnav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mnav__label { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.mnav__close { background: none; border: 0; color: #fff; }
.mnav__close svg { width: 24px; height: 24px; }
.mnav a.mnav__link { display: block; padding: 15px 0; border-bottom: 1px solid var(--hairline-dark); font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; }
.mnav__cta { margin-top: 24px; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.scrim.open { opacity: 1; visibility: visible; transition: opacity .4s; }

/* cart drawer (right, minimal shell) */
.cart { position: fixed; inset: 0 0 0 auto; width: 340px; max-width: 88vw; background: var(--dark); color: #fff; z-index: 160; padding: 28px 26px; transform: translateX(340px); visibility: hidden; transition: transform .4s var(--ease), visibility 0s .4s; }
.cart.open { transform: translateX(0); visibility: visible; transition: transform .4s var(--ease); }
.cart__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hairline-dark); padding-bottom: 16px; }
.cart__head h3 { color: #fff; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; }
.cart__empty { margin-top: 24px; color: var(--on-dark-muted); }

/* ==========================================================================
   HERO (identity band, h=990)
   ========================================================================== */
.hero { position: relative; min-height: 990px; background: var(--dark); color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.9); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,12,15,.92) 6%, rgba(11,12,15,.74) 44%, rgba(11,12,15,.6) 100%); }
.hero__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(90deg, var(--hairline-dark) 1px, transparent 1px); background-size: 25% 100%; }
.hero__in { position: relative; z-index: 4; width: calc(100% - var(--gut) * 2); margin-inline: auto; padding-top: 232px; }
.hero__h1 { color: #fff; font-size: var(--fs-hero); line-height: .96; letter-spacing: -.02em; text-transform: uppercase; max-width: 1034px; }
.hero__sub { margin-top: 34px; max-width: 439px; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1.5; }
.hero__cta { margin-top: 44px; }
.hero__ghost { bottom: 30px; left: 38%; font-size: clamp(6rem, 2rem + 15vw, 15rem); }
.hero__plate { position: absolute; top: 440px; right: 0; z-index: 5; width: 307px; height: 340px; background: var(--accent); color: var(--ink); padding: 34px 30px; display: flex; flex-direction: column; }
.hero__plate .plate__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-stat); line-height: .82; }
.hero__plate .plate__plus { font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: .7; }
.hero__plate .plate__cap { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: .94rem; letter-spacing: .08em; text-transform: uppercase; }
.plate__sq { position: absolute; bottom: 0; right: 0; display: grid; grid-template-columns: 30px 30px; grid-auto-rows: 30px; }
.plate__sq i { background: var(--ink); }
.plate__sq i:nth-child(1), .plate__sq i:nth-child(4) { background: transparent; }

/* ==========================================================================
   VALUE TRIO (H2, paper, cards overlap hero bottom)
   ========================================================================== */
.trio { position: relative; background: var(--paper); padding-bottom: var(--s10); }
.trio__ghost { top: 46%; left: -20px; font-size: clamp(6rem, 3rem + 12vw, 18rem); }
.trio__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: -120px; }
.vcard { background: #fff; padding: 44px 40px; }
.vcard__n { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--accent); }
.vcard h3 { margin-top: 60px; font-size: 1.7rem; text-transform: uppercase; }
.vcard p { margin-top: 16px; color: var(--muted); }
.vcard--photo { position: relative; grid-column: 2; padding: 0; min-height: 300px; overflow: hidden; }
.vcard--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard--photo .vcard__over { position: relative; z-index: 2; margin-top: auto; padding: 30px; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; height: 100%; display: flex; align-items: flex-end; background: linear-gradient(0deg, rgba(15,15,18,.75), transparent 60%); }
.vcard--photo .boxarrow { position: absolute; right: 0; bottom: 0; z-index: 3; background: var(--accent); }
.trio__row2 { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.trio__row2 .vcard--photo { grid-column: auto; }

/* ==========================================================================
   ABOUT SPLIT (H3)
   ========================================================================== */
.section { padding: var(--s10) 0; position: relative; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--ink); color: #fff; }
.section--dark h1,.section--dark h2,.section--dark h3 { color: #fff; }
.aboutsplit { display: grid; grid-template-columns: 45% 1fr; gap: 60px; align-items: center; }
.aboutsplit--textleft { grid-template-columns: 1fr 45%; }
.collage { position: relative; min-height: 560px; }
.collage__main { position: relative; width: 82%; }
.collage__main img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.collage__inset { position: absolute; right: 0; bottom: 60px; width: 46%; border: 8px solid var(--paper); }
.collage__inset img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.collage__plate { position: absolute; right: -6px; bottom: -6px; z-index: 4; width: 240px; background: var(--accent); color: var(--ink); padding: 26px 24px; }
.collage__plate .plate__num { font-family: var(--font-display); font-weight: 700; font-size: 4.4rem; line-height: .8; }
.collage__plate .plate__cap { font-family: var(--font-display); font-weight: 600; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }
.rt__lead { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 26px 0 16px; }
.rt h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-top: 22px; }
.rt p { color: var(--muted); }
.section--dark .rt p { color: var(--on-dark-muted); }
.pluslist { margin: 26px 0; display: grid; gap: 14px; }
.plusrow { display: flex; gap: 12px; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.plusrow::before { content: "+"; color: var(--accent); font-weight: 700; font-size: 1.3rem; line-height: 1; }

/* ==========================================================================
   MARQUEE (words + logos)
   ========================================================================== */
.wordmarquee { background: var(--paper); overflow: hidden; padding: 20px 0; }
.wordmarquee__track { display: flex; width: max-content; animation: mq 50s linear infinite; }
.wordmarquee__item { display: inline-flex; align-items: center; gap: 46px; padding-right: 46px; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 1rem + 6vw, 9.4rem); line-height: 1; text-transform: uppercase; color: var(--ghost-paper); white-space: nowrap; }
.wordmarquee__star { color: var(--accent); font-size: .5em; }
.logomarquee { overflow: hidden; }
.logomarquee__track { display: flex; width: max-content; animation: mq 40s linear infinite; align-items: center; }
.logomarquee__item { display: inline-flex; align-items: center; gap: 12px; padding: 0 46px; color: #9A9A9A; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.logomarquee__item svg { width: 34px; height: 34px; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ==========================================================================
   PINNED INDUSTRIES DECK (H5)
   ========================================================================== */
.deck { position: relative; background: var(--ink); color: #fff; }
.deck__intro { position: sticky; top: var(--hd-h); height: calc(100vh - var(--hd-h)); min-height: 560px; display: flex; align-items: center; z-index: 0; overflow: hidden; }
.deck__intro-bg { position: absolute; inset: 0; }
.deck__intro-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.deck__intro-grid { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--hairline-dark) 1px, transparent 1px); background-size: 25% 100%; }
.deck__intro-in { position: relative; z-index: 2; width: calc(100% - var(--gut) * 2); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.deck__intro h2 { font-size: var(--fs-h2); text-transform: uppercase; max-width: 14ch; }
.deck__intro-right { text-align: right; max-width: 340px; }
.deck__intro-right p { color: var(--on-dark-muted); margin-bottom: 22px; }
.deck__cards { position: relative; z-index: 2; }
.dcard { position: sticky; top: var(--hd-h); display: grid; grid-template-columns: 46% 54%; min-height: 560px; background: var(--ink); border-top: 1px solid var(--hairline-dark); }
.dcard__text { background: #fff; color: var(--ink); padding: 66px 60px; display: flex; flex-direction: column; }
.dcard__n { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.dcard__text hr { margin: 14px 0 26px; }
.dcard__text h3 { font-size: var(--fs-deck); text-transform: uppercase; line-height: .95; }
.dcard__plus { margin: 24px 0; display: grid; gap: 10px; }
.dcard__plus span { display: flex; gap: 10px; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.dcard__plus span::before { content: "+"; color: var(--accent); font-weight: 700; }
.dcard__text p { color: var(--muted); margin-bottom: 26px; }
.dcard__text .arrowlink { margin-top: auto; }
.dcard__photo { position: relative; overflow: hidden; }
.dcard__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   WORKFLOW (H6)
   ========================================================================== */
.workflow { position: relative; background: var(--paper); }
.workflow__ghost { top: -30px; left: -20px; font-size: clamp(5rem, 2rem + 12vw, 18rem); }
.workflow__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 600px; gap: 60px; align-items: start; margin-top: 60px; }
.wfsteps { display: grid; }
.wfstep { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--hairline); }
.wfstep:first-child { border-top: 0; }
.wfstep__n { font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: .9; color: transparent; -webkit-text-stroke: 1.4px rgba(23,24,27,.28); }
.wfstep h3 { font-size: 1.55rem; text-transform: uppercase; }
.wfstep p { color: var(--muted); margin-top: 12px; max-height: 0; overflow: hidden; transition: max-height .4s var(--ease), margin-top .4s; }
.wfstep.open p { max-height: 200px; margin-top: 12px; }
.wfstep.open .wfstep__n { color: var(--accent); -webkit-text-stroke: 0; }
.workflow__photo { position: relative; }
.workflow__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* ==========================================================================
   PROJECTS SLIDER (H7, dark)
   ========================================================================== */
.projects { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.projects__grid-lines { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--hairline-dark) 1px, transparent 1px); background-size: 25% 100%; }
.sec-head { position: relative; z-index: 2; }
.sec-head--split { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.sec-head h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-top: 20px; }
.sec-head--center { text-align: center; }
.sec-head--center .eyebrow { margin-inline: auto; }
.slider { position: relative; z-index: 2; overflow: hidden; margin-top: 54px; }
.slider__track { display: flex; transition: transform .6s var(--ease); }
.slide { flex: 0 0 33.3333%; padding-right: 30px; box-sizing: border-box; }
.pcard__media { position: relative; overflow: hidden; }
.pcard__media img { width: 100%; aspect-ratio: 44/37; object-fit: cover; transition: transform .5s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__chip { position: absolute; left: 0; bottom: 0; background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; padding: 10px 16px; }
.pcard__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; color: var(--ink); padding: 24px 26px; }
.projects .pcard__bar { background: var(--dark-2); color: #fff; }
.pcard__bar h3 { font-size: 1.35rem; text-transform: uppercase; line-height: 1.1; }
.projects .pcard__bar h3 { color: #fff; }
.slider__dots { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.slider__dots button { width: 10px; height: 10px; border: 0; background: rgba(0,0,0,.2); }
.section--dark .slider__dots button, .projects .slider__dots button { background: rgba(255,255,255,.25); }
.slider__dots button.active { background: var(--accent); }

/* ==========================================================================
   TEAM SLIDER (H8)
   ========================================================================== */
.team { background: var(--paper); position: relative; }
.team .slide { flex-basis: 25%; }
.member { position: relative; }
.member__img { position: relative; overflow: hidden; }
.member__img img { width: 100%; aspect-ratio: 294/370; object-fit: cover; transition: transform .5s var(--ease); }
.member:hover .member__img img { transform: scale(1.05); }
.member__bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; border-bottom: 1px solid var(--hairline); }
.member__name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; text-transform: uppercase; }
.member__bar svg { width: 16px; height: 16px; }
.member__role { color: var(--muted); font-size: .92rem; padding-top: 8px; }

/* ==========================================================================
   SERVICES CTA SPLIT (H9)
   ========================================================================== */
.svccta { position: relative; background: var(--ink); color: #fff; overflow: hidden; min-height: 620px; display: flex; align-items: center; }
.svccta__bg { position: absolute; inset: 0; }
.svccta__bg img { width: 100%; height: 100%; object-fit: cover; }
.svccta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,15,18,.9) 30%, rgba(15,15,18,.35) 100%); }
.svccta__in { position: relative; z-index: 2; width: calc(100% - var(--gut) * 2); margin-inline: auto; max-width: 52%; padding: 60px 0; }
.svccta h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-top: 20px; color: #fff; }
.svccta__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 40px 0; }
.feat { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.feat__ico { width: 56px; height: 56px; background: var(--dark-2); display: grid; place-items: center; color: var(--accent); }
.feat__ico svg { width: 26px; height: 26px; }
.feat h3 { font-size: 1.25rem; color: #fff; text-transform: uppercase; }
.feat p { color: var(--on-dark-muted); margin-top: 8px; font-size: .96rem; }
.svccta__ghost { bottom: 10px; left: 0; font-size: clamp(4rem, 2rem + 9vw, 12rem); }

/* ==========================================================================
   TESTIMONIALS (H10)
   ========================================================================== */
.testi { background: var(--paper); position: relative; }
.testi__grid { display: grid; grid-template-columns: 630px 1fr; gap: 60px; align-items: center; }
.testi__photo { position: relative; }
.testi__photo img { width: 100%; aspect-ratio: 630/650; object-fit: cover; }
.testi__q { font-size: 6rem; line-height: .6; color: var(--accent); font-family: Georgia, serif; }
.testi__quote { font-size: 1.35rem; color: var(--ink); margin: 20px 0 30px; line-height: 1.5; }
.testi__by { display: flex; align-items: center; gap: 16px; }
.testi__by img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.testi__by strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; }
.testi__by span { color: var(--muted); font-size: .92rem; }
.testi__slides { position: relative; }
.testi__slide { display: none; }
.testi__slide.active { display: block; }
.testi__prog { margin-top: 34px; height: 3px; background: var(--hairline); position: relative; }
.testi__prog i { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); width: 33%; transition: width .5s var(--ease); }

/* ==========================================================================
   CONTACT CTA + FORM (H11)
   ========================================================================== */
.contactband { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.contactband__bg { position: absolute; inset: 0; }
.contactband__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.contactband__in { position: relative; z-index: 2; display: grid; grid-template-columns: 45% 1fr; gap: 60px; align-items: start; }
.contactband h2 { font-size: var(--fs-h2); text-transform: uppercase; color: #fff; margin-top: 20px; }
.contactcols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.contactcols h4 { font-size: 1.2rem; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.contactcols p { color: var(--on-dark-muted); margin-top: 10px; }
.contactcols a.phone-lg { color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
.form { background: rgba(255,255,255,.04); padding: 40px; border: 1px solid var(--hairline-dark); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.field input, .field textarea, .field select { background: var(--dark-2); border: 1px solid var(--hairline-dark); border-radius: 0; padding: 16px; color: #fff; font-family: inherit; font-size: .96rem; }
.field textarea { min-height: 150px; resize: vertical; }
.form__success { display: none; color: var(--accent); font-family: var(--font-display); font-weight: 600; margin-top: 20px; }
.form__success.show { display: block; }

/* ==========================================================================
   BLOG SLIDER (H12) + post grid
   ========================================================================== */
.blogband { background: var(--paper); }
.blogband .slide { flex-basis: 33.3333%; }
.bcard__media { overflow: hidden; }
.bcard__media img { width: 100%; aspect-ratio: 44/31; object-fit: cover; transition: transform .5s var(--ease); }
.bcard:hover .bcard__media img { transform: scale(1.05); }
.bcard__chips { display: flex; gap: 8px; margin: 20px 0 14px; }
.chip { background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; }
.bcard h3 { font-size: 1.6rem; text-transform: uppercase; line-height: 1.1; }
.bcard .arrowlink { margin-top: 18px; }
.postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 30px; }

/* ==========================================================================
   PRE-FOOTER WORDMARK + FOOTER
   ========================================================================== */
.wordband { background: var(--dark); overflow: hidden; position: relative; padding-top: 40px; }
.wordband__mark { display: flex; align-items: center; justify-content: center; gap: 20px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 1rem + 20vw, 20rem); line-height: .8; text-transform: uppercase; white-space: nowrap; letter-spacing: -.03em; }
.wordband__mark svg { width: .8em; height: .8em; }
.wordband::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(0deg, var(--dark) 10%, rgba(23,24,27,0)); }
.footer { background: var(--dark); color: #fff; padding: 60px 0 30px; }
.footer__top { display: grid; grid-template-columns: 1.3fr 1.4fr 1.3fr; gap: 50px; padding-bottom: 40px; border-bottom: 1px solid var(--hairline-dark); }
.footer .brand { margin-bottom: 20px; }
.footer__addr { color: var(--on-dark-muted); }
.footer__phone { color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; display: block; margin: 12px 0; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #fff; }
.footer__social svg { width: 18px; height: 18px; }
.footer h4 { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.footer__links a { display: block; padding: 8px 0; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: #fff; }
.footer__links a:hover { color: var(--accent); }
.footer__news h4 { font-size: 1.35rem; letter-spacing: -.01em; line-height: 1.2; text-transform: uppercase; margin-bottom: 22px; }
.newsform { display: flex; align-items: center; border-bottom: 1px solid var(--hairline-dark); }
.newsform input { flex: 1; background: none; border: 0; color: #fff; font-family: inherit; padding: 14px 0; }
.newsform button { width: 50px; height: 50px; flex: none; background: var(--accent); color: var(--ink); border: 0; display: grid; place-items: center; }
.newsform button svg { width: 18px; height: 18px; }
.footer__consent { color: var(--on-dark-muted); font-size: .88rem; margin-top: 16px; }
.footer__consent a { color: var(--accent); text-decoration: underline; }
.footer__legal { padding-top: 26px; text-align: center; color: var(--on-dark-muted); font-size: .86rem; }
.footer__legal b { color: var(--accent); font-weight: 600; }
.footer__disc { margin-top: 8px; opacity: .7; }
.backtop { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; background: var(--accent); color: var(--ink); display: none; place-items: center; z-index: 90; }
.backtop.show { display: grid; }
.backtop svg { width: 20px; height: 20px; }

/* ==========================================================================
   PAGE TITLE BAND (inner)
   ========================================================================== */
.pagehead { position: relative; min-height: 490px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--dark); color: #fff; overflow: hidden; }
.pagehead__bg { position: absolute; inset: 0; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__bg::after { content: ""; position: absolute; inset: 0; background: rgba(15,15,18,.62); }
.pagehead__in { position: relative; z-index: 2; }
.pagehead h1 { font-size: var(--fs-pagetitle); text-transform: uppercase; color: #fff; }
.crumb { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.crumb a { color: var(--on-dark-muted); }
.crumb svg { width: 12px; height: 12px; color: var(--accent); }
.crumb span { color: #fff; }

/* ==========================================================================
   STATS BAND (about)
   ========================================================================== */
.statsband { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.statsband__grid-lines { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--hairline-dark) 1px, transparent 1px); background-size: 25% 100%; }
.statsband__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.statsband h2 { font-size: var(--fs-h2); text-transform: uppercase; color: #fff; margin-top: 20px; }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 30px; }
.statgrid > div:nth-child(2), .statgrid > div:nth-child(3) { transform: translateY(24px); }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: 5.6rem; line-height: .9; }
.stat__num b { color: var(--accent); font-weight: 700; }
.stat__cap { color: var(--on-dark-muted); font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }
.statsband__ghost { bottom: -10px; right: -20px; font-size: clamp(4rem, 2rem + 9vw, 12rem); }

/* ==========================================================================
   HISTORY TIMELINE (about)
   ========================================================================== */
.history { background: var(--paper); }
.timeline { margin-top: 50px; }
.timeline__rail { height: 1px; background: var(--hairline); position: relative; margin-bottom: 40px; display: flex; }
.timeline__dot { width: 12px; height: 12px; background: #cfcfcc; transform: translateY(-6px); margin-right: 22%; }
.timeline__dot.active { background: var(--accent); }
.tcard__media { position: relative; overflow: hidden; }
.tcard__media img { width: 100%; aspect-ratio: 330/220; object-fit: cover; }
.tcard__yr { position: absolute; left: 14px; bottom: 6px; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; color: var(--accent); line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.tcard h3 { font-size: 1.35rem; text-transform: uppercase; margin: 18px 0 10px; }
.tcard p { color: var(--muted); font-size: .95rem; }
.history .slide { flex-basis: 25%; }

/* ==========================================================================
   WHY-CHOOSE (about)
   ========================================================================== */
.why { background: var(--paper); }
.why__grid { display: grid; grid-template-columns: 45% 1fr; gap: 60px; align-items: center; }
.why__photo { position: relative; }
.why__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.why__plate { position: absolute; right: -20px; top: 30%; width: 225px; background: var(--accent); color: var(--ink); padding: 26px 24px; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; line-height: 1.15; }
.whyfeats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 30px 0; }
.whyfeat { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: center; padding: 22px 8px; border-top: 1px solid var(--hairline); }
.whyfeat svg { width: 40px; height: 40px; color: var(--accent); }
.whyfeat span { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; }

/* ==========================================================================
   ABOUT WORKFLOW-STEPS BAND (about, ref band 5)
   ========================================================================== */
.aboutsteps { position: relative; background: var(--paper); overflow: hidden; }
.aboutsteps__ghost { top: -18px; right: -20px; font-size: clamp(5rem, 2rem + 12vw, 15rem); }
.aboutsteps__top { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.aboutsteps__illus { position: relative; }
.aboutsteps__illus img { width: 100%; object-fit: contain; }
.aboutsteps__panel { background: var(--ink); color: #fff; padding: 46px 42px; }
.aboutsteps__panel h2 { color: #fff; font-size: var(--fs-h2); text-transform: uppercase; margin-top: 20px; }
.aboutsteps__panel p { color: var(--on-dark-muted); margin-top: 18px; }
.aboutsteps__cards { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 0; margin-top: 44px; }
.aboutsteps__tile { position: relative; overflow: hidden; min-height: 280px; }
.aboutsteps__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aboutsteps__tilecap { position: relative; z-index: 2; height: 100%; min-height: 280px; display: flex; align-items: flex-end; padding: 26px; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; text-transform: uppercase; line-height: 1.16; background: linear-gradient(0deg, rgba(15,15,18,.84), transparent 62%); }
.stepcard { background: #fff; padding: 40px 30px; border-left: 1px solid var(--hairline); display: flex; flex-direction: column; }
.stepcard__n { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: .9; color: transparent; -webkit-text-stroke: 1.4px rgba(23,24,27,.26); }
.stepcard h3 { font-size: 1.4rem; text-transform: uppercase; margin-top: 26px; }
.stepcard p { color: var(--muted); margin-top: 14px; }
.stepcard--open { background: var(--paper); }
.stepcard--open .stepcard__n { color: var(--accent); -webkit-text-stroke: 0; }

/* ==========================================================================
   SHOP CATALOG
   ========================================================================== */
.catalog { background: var(--paper); }
.catalog__in { display: grid; grid-template-columns: 1fr 300px; gap: 50px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.toolbar__l { display: flex; align-items: center; gap: 16px; color: var(--muted); }
.viewtoggle { display: flex; gap: 6px; }
.viewtoggle button { width: 34px; height: 34px; display: grid; place-items: center; background: #fff; border: 1px solid var(--hairline); color: var(--ink); }
.viewtoggle button.active { background: var(--ink); color: #fff; }
.viewtoggle svg { width: 16px; height: 16px; }
.sortsel { border: 1px solid var(--hairline); background: #fff; padding: 10px 14px; font-family: inherit; border-radius: 0; }
.prodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.prod__media { position: relative; background: #fff; aspect-ratio: 320/290; display: grid; place-items: center; overflow: hidden; }
.prod__media img { width: 78%; height: 78%; object-fit: contain; transition: transform .5s var(--ease); }
.prod:hover .prod__media img { transform: scale(1.06); }
.prod__sale { position: absolute; left: 0; top: 0; background: var(--accent); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .78rem; padding: 6px 10px; }
.prod__stars { display: flex; gap: 2px; color: var(--accent); margin: 16px 0 8px; }
.prod__stars svg { width: 14px; height: 14px; }
.prod h3 { font-size: 1.05rem; text-transform: uppercase; line-height: 1.2; }
.prod__price { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: 8px; }
.prod__price del { color: var(--muted); font-weight: 400; margin-left: 8px; }
.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 50px; }
.pagination a { width: 48px; height: 48px; display: grid; place-items: center; background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 700; }
.pagination a.active { background: var(--accent); }
.pagination a svg { width: 16px; height: 16px; }
.sidebar__block { margin-bottom: 40px; }
.sidebar__block h3 { font-size: 1.6rem; text-transform: uppercase; margin-bottom: 18px; }
.catrow { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: .96rem; }
.catrow:hover { color: var(--accent-deep); }
.priceslider { height: 3px; background: var(--ink); position: relative; margin: 22px 0 14px; }
.priceslider i { position: absolute; width: 14px; height: 14px; background: var(--ink); top: -6px; }
.priceslider i:nth-child(1){ left: 8%; } .priceslider i:nth-child(2){ right: 12%; }
.pricerow { display: flex; justify-content: space-between; align-items: center; font-size: .92rem; }
.pricerow a { font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.miniprod { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.miniprod__img { width: 56px; height: 56px; background: #fff; display: grid; place-items: center; }
.miniprod__img img { width: 80%; height: 80%; object-fit: contain; }
.miniprod h4 { font-size: .82rem; text-transform: uppercase; }
.miniprod .prod__price { font-size: .9rem; margin-top: 4px; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a { background: #fff; padding: 8px 14px; font-size: .82rem; }
.tagcloud a:hover { background: var(--accent); }

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.product__in { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product__gallery { position: relative; background: #fff; aspect-ratio: 1/1; display: grid; place-items: center; }
.product__gallery img { width: 72%; height: 72%; object-fit: contain; }
.product__thumbs { display: flex; gap: 14px; margin-top: 20px; }
.product__thumbs div { width: 90px; height: 90px; background: #fff; display: grid; place-items: center; border: 1px solid var(--hairline); }
.product__thumbs img { width: 76%; height: 76%; object-fit: contain; }
.product h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 2.75rem); text-transform: uppercase; }
.product__price { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--ink); margin: 16px 0; }
.product__stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: 14px; }
.product__stars svg { width: 16px; height: 16px; }
.product p { color: var(--muted); }
.product__buy { display: flex; gap: 16px; align-items: stretch; margin: 30px 0; }
.qty { display: flex; align-items: center; border: 1px solid var(--hairline); background: #fff; }
.qty button { width: 46px; background: none; border: 0; font-size: 1.2rem; }
.qty input { width: 50px; text-align: center; border: 0; background: none; font-family: inherit; }
.product__meta { border-top: 1px solid var(--hairline); padding-top: 20px; margin-top: 20px; }
.product__meta div { display: flex; gap: 10px; padding: 6px 0; color: var(--muted); font-size: .95rem; }
.product__meta b { color: var(--ink); font-family: var(--font-display); font-weight: 600; min-width: 90px; }
.tabs { margin-top: 70px; }
.tabs__nav { display: flex; gap: 30px; border-bottom: 1px solid var(--hairline); }
.tabs__nav button { background: none; border: 0; padding: 16px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs__nav button.active { color: var(--ink); border-bottom-color: var(--accent); }
.tabs__panel { display: none; padding: 30px 0; max-width: 820px; }
.tabs__panel.active { display: block; }
.tabs__panel p { color: var(--muted); margin-bottom: 16px; }

/* ==========================================================================
   PARTNERS STRIP (about) reused for contact trust
   ========================================================================== */
.partners { background: var(--paper); }

/* ==========================================================================
   REVEALS
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   DESKTOP DROPDOWN + MEGAMENU (parents in primary nav)
   ========================================================================== */
.navitem { position: relative; display: inline-flex; align-items: center; }
.navitem--mega { position: static; }
.nav__link--parent { cursor: pointer; }
.drop, .mega { position: absolute; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s; z-index: 120; }
.navitem.open > .drop, .navitem.open > .mega { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .28s var(--ease), transform .28s var(--ease); }

/* small square dropdown (Pages / Projects / Blog) */
.drop { top: 100%; left: -14px; min-width: 252px; background: var(--dark); border-top: 2px solid var(--accent); padding: 10px 0; box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.drop ul { list-style: none; margin: 0; padding: 0; }
.drop a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 22px; font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.drop a svg { width: 13px; height: 13px; color: var(--accent); opacity: 0; transform: translate(-4px,4px); transition: .3s var(--ease); }
.drop a:hover { color: var(--accent); background: rgba(255,255,255,.04); }
.drop a:hover svg { opacity: 1; transform: none; }

/* full-width megamenu (Services) */
.mega { top: var(--hd-h); left: 0; width: 100%; background: var(--dark); border-top: 2px solid var(--accent); box-shadow: 0 34px 60px rgba(0,0,0,.42); }
.mega__in { width: calc(100% - var(--gut) * 2); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr 360px; gap: 44px; padding: 46px 0; }
.mega__col { list-style: none; margin: 0; padding: 0 30px 0 0; display: grid; gap: 4px; align-content: start; border-right: 1px solid var(--hairline-dark); }
.mega__link { display: block; padding: 13px 0; }
.mega__h { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; color: #fff; transition: color .3s; }
.mega__h svg { width: 14px; height: 14px; color: var(--accent); opacity: 0; transform: translate(-4px,4px); transition: .3s var(--ease); }
.mega__d { display: block; margin-top: 4px; color: var(--on-dark-muted); font-size: .9rem; letter-spacing: .01em; }
.mega__link:hover .mega__h { color: var(--accent); }
.mega__link:hover .mega__h svg { opacity: 1; transform: none; }
.mega__feature { position: relative; overflow: hidden; min-height: 236px; display: flex; align-items: flex-end; }
.mega__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mega__feature:hover img { transform: scale(1.05); }
.mega__chip { position: absolute; top: 0; left: 0; z-index: 2; background: var(--accent); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; }
.mega__feature-cap { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; width: 100%; padding: 24px; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; text-transform: uppercase; line-height: 1.2; background: linear-gradient(0deg, rgba(15,15,18,.86), transparent 70%); }
.mega__feature-cap svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.mega__strip { display: flex; align-items: center; gap: 30px; width: calc(100% - var(--gut) * 2); margin-inline: auto; padding: 22px 0; border-top: 1px solid var(--hairline-dark); }
.mega__phone { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.mega__phone svg { width: 20px; height: 20px; color: var(--accent); }
.mega__striplinks { margin-right: auto; }
.mega__striplinks a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.mega__striplinks a svg { width: 13px; height: 13px; }
.mega .btn { padding: 16px 22px; }
.nav__link--parent:focus-visible, .drop a:focus-visible, .mega__link:focus-visible, .mega__feature:focus-visible, .mega__striplinks a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* mobile off-canvas accordion group */
.macc { border-bottom: 1px solid var(--hairline-dark); }
.macc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; color: #fff; padding: 15px 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; }
.macc__head svg { width: 14px; height: 14px; color: var(--accent); transition: transform .3s; }
.macc.open .macc__head svg { transform: rotate(180deg); }
.macc__panel { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.macc.open .macc__panel { max-height: 460px; }
.macc__panel a { display: block; padding: 11px 0 11px 14px; color: var(--on-dark-muted); font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.macc__panel a:hover { color: var(--accent); }

/* ==========================================================================
   SERVICES LISTING (services.html)
   ========================================================================== */
.svcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 60px; }
.svccard { display: grid; grid-template-columns: 1fr 44%; background: #fff; }
.svccard__text { padding: 44px 40px; display: flex; flex-direction: column; }
.svccard__n { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--accent); }
.svccard__text hr { margin: 14px 0 24px; }
.svccard h3 { font-size: 1.9rem; text-transform: uppercase; line-height: .98; }
.svccard .arrowlink { margin-top: auto; padding-top: 6px; }
.svccard__photo { position: relative; overflow: hidden; min-height: 300px; }
.svccard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svccard:hover .svccard__photo img { transform: scale(1.05); }

/* ==========================================================================
   SERVICE DETAIL (service-detail.html)
   ========================================================================== */
.svcdetail__in { display: grid; grid-template-columns: 320px 1fr; gap: 50px; align-items: start; }
.svcnav { display: grid; }
.svcnav__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; padding: 18px 20px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; text-transform: uppercase; border-bottom: 1px solid var(--hairline); transition: background var(--t), color var(--t); }
.svcnav__item svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.svcnav__item.active { background: var(--accent); color: var(--ink); }
.svcnav__item.active svg { color: var(--ink); }
.svcnav__item:hover { background: var(--ink); color: #fff; }
.svcnav__item:hover svg { color: var(--accent); }
.svcnav__cta { position: relative; margin-top: 26px; overflow: hidden; min-height: 330px; display: flex; align-items: flex-end; color: #fff; }
.svcnav__cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svcnav__cta-in { position: relative; z-index: 2; width: 100%; padding: 30px 28px; background: linear-gradient(0deg, rgba(15,15,18,.92), rgba(15,15,18,.3) 85%); }
.svcnav__cta-in h3 { color: #fff; font-size: 1.5rem; text-transform: uppercase; line-height: 1.05; }
.svcnav__cta-in p { color: var(--on-dark-muted); margin: 12px 0 20px; font-size: .95rem; }
.svcdetail__hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.svcdetail__hero--mt { margin-top: 40px; }
.svcdetail__main h2 { font-size: var(--fs-h2); text-transform: uppercase; margin: 34px 0 20px; }
.svcdetail__main > p { color: var(--muted); margin-bottom: 16px; }
.svcdetail__sub { font-size: 1.9rem; text-transform: uppercase; margin: 40px 0 18px; }
.svcfeats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 24px 0 6px; }
.svcfeat { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.svcfeat__ico { width: 56px; height: 56px; background: #fff; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--hairline); flex: none; }
.svcfeat__ico svg { width: 26px; height: 26px; }
.svcfeat h4 { font-size: 1.15rem; text-transform: uppercase; }
.svcfeat p { color: var(--muted); margin-top: 6px; font-size: .92rem; }
.svcbullets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; margin: 12px 0 6px; }
.svcbullets span { display: flex; gap: 10px; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.svcbullets span::before { content: "+"; color: var(--accent); font-weight: 700; }
.faq { margin-top: 20px; }
.faq__item { background: #fff; margin-bottom: 14px; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: 0; padding: 22px 26px; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; text-transform: uppercase; color: var(--ink); text-align: left; }
.faq__ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--accent); transition: transform .3s; }
.faq__ico svg { width: 18px; height: 18px; }
.faq__item.open .faq__ico { transform: rotate(180deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__item.open .faq__a { max-height: 260px; }
.faq__a p { padding: 0 26px 24px; color: var(--muted); }

/* ==========================================================================
   PROJECTS GRID (projects.html)
   ========================================================================== */
.projgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 30px; }
.pcard--tile { display: block; }
.pcard--tile .pcard__bar { background: #fff; color: var(--ink); }
.pcard--tile .pcard__bar h3 { color: var(--ink); }
.pcard--tile:hover .pcard__media img { transform: scale(1.05); }
.pcard--tile:hover .boxarrow { background: var(--accent); }

/* ==========================================================================
   PROJECT DETAIL (project-detail.html)
   ========================================================================== */
.projdetail__hero img { width: 100%; aspect-ratio: 2/1; object-fit: cover; }
.projmeta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; border-bottom: 1px solid var(--hairline); padding: 30px 0; margin-top: 40px; }
.projmeta b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.projmeta span { display: block; margin-top: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; }
.projdetail__intro { display: grid; grid-template-columns: 38% 1fr; gap: 50px; margin-top: 50px; align-items: start; }
.projdetail__intro h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.projdetail__intro p { color: var(--muted); margin-bottom: 16px; }
.projdetail__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 50px 0; }
.projdetail__pair img { width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.projdetail__feat { display: grid; grid-template-columns: 38% 1fr; gap: 50px; align-items: start; }
.projdetail__feat h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.projdetail__feat p { color: var(--muted); margin-bottom: 20px; }
.projdetail__feat .svcbullets { margin: 20px 0; }
.projnav { display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid var(--hairline); margin-top: 50px; padding-top: 30px; }
.boxarrow-static { width: 50px; height: 50px; flex: none; display: grid; place-items: center; background: var(--ink); color: #fff; }
.boxarrow-static svg { width: 20px; height: 20px; }
.projnav__next { text-align: right; }
.projnav__next span { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-family: var(--font-display); font-weight: 600; }
.projnav__next b { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; text-transform: uppercase; margin-top: 6px; }
.projnav__next b svg { width: 16px; height: 16px; color: var(--accent); }

/* ==========================================================================
   BLOG LISTING (blog.html)
   ========================================================================== */
.blog__in { display: grid; grid-template-columns: 1fr 320px; gap: 50px; align-items: start; }
.bloglist { display: grid; gap: 50px; }
.bpost__media { overflow: hidden; }
.bpost__media img { width: 100%; aspect-ratio: 16/8; object-fit: cover; transition: transform .5s var(--ease); }
.bpost:hover .bpost__media img { transform: scale(1.04); }
.bpost h2 { font-size: 2.1rem; text-transform: uppercase; line-height: 1.05; margin-bottom: 14px; }
.bpost h2 a:hover { color: var(--accent-deep); }
.bpost p { color: var(--muted); margin-bottom: 18px; }
.blogside .sidebar__block h3 { font-size: 1.5rem; }
.searchform { display: flex; border: 1px solid var(--hairline); background: #fff; }
.searchform input { flex: 1; border: 0; background: none; padding: 14px 16px; font-family: inherit; font-size: .95rem; }
.searchform button { width: 52px; flex: none; background: var(--accent); border: 0; display: grid; place-items: center; color: var(--ink); }
.searchform button svg { width: 16px; height: 16px; }
a.catrow { color: inherit; }
.catrow svg { width: 12px; height: 12px; color: var(--muted); }
a.catrow:hover { color: var(--accent-deep); }
.recpost { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.recpost__img { width: 64px; height: 64px; overflow: hidden; flex: none; }
.recpost__img img { width: 100%; height: 100%; object-fit: cover; }
.recpost__t b { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); font-family: var(--font-display); font-weight: 600; }
.recpost__t > span { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; text-transform: uppercase; line-height: 1.2; margin-top: 4px; }
.recpost:hover .recpost__t > span { color: var(--accent-deep); }

/* ==========================================================================
   BLOG POST single (blog-post.html)
   ========================================================================== */
.posthead { position: relative; min-height: 230px; display: flex; align-items: center; justify-content: center; background: var(--dark); overflow: hidden; }
.posthead__bg { position: absolute; inset: 0; }
.posthead__bg img { width: 100%; height: 100%; object-fit: cover; }
.posthead__bg::after { content: ""; position: absolute; inset: 0; background: rgba(15,15,18,.66); }
.crumb--band { position: relative; z-index: 2; flex-wrap: wrap; }
.post__wrap { max-width: 900px; text-align: center; }
.post__meta { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.post__title { font-size: clamp(2.2rem, 1rem + 4vw, 3.6rem); text-transform: uppercase; line-height: 1.05; }
.post__feature { margin: 50px auto; }
.post__feature img { width: 100%; aspect-ratio: 2/1; object-fit: cover; }
.post__body { max-width: 900px; }
.post__body h2 { font-size: 2rem; text-transform: uppercase; margin: 34px 0 16px; }
.post__body p { color: var(--muted); margin-bottom: 18px; }
.post__body p b { color: var(--ink); }
.post__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 30px 0; }
.post__pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.post__quote { margin: 34px 0; background: var(--accent); color: var(--ink); padding: 34px 40px; border: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.4; }
.post__nav { max-width: 900px; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 26px 0; margin: 24px auto; }
.post__prev, .post__next { max-width: 46%; }
.post__next { text-align: right; }
.post__prev span, .post__next span { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-family: var(--font-display); font-weight: 600; margin-bottom: 8px; }
.post__prev b, .post__next b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; line-height: 1.2; }
.post__prev:hover b, .post__next:hover b { color: var(--accent-deep); }
.post__reviews, .post__form { max-width: 900px; }
.post__reviews h2, .post__form h2 { font-size: 2rem; text-transform: uppercase; margin: 44px 0 24px; }
.review { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.review--in { margin-left: 60px; }
.review__av { width: 64px; height: 64px; flex: none; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.review__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.review__top b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; }
.review__top span { color: var(--muted); font-size: .85rem; display: block; margin-top: 2px; }
.review__reply { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); flex: none; }
.review__reply svg { width: 12px; height: 12px; }
.review__body > p { color: var(--muted); margin-top: 10px; }
.post__formnote { color: var(--muted); margin-bottom: 20px; }
.form--light { background: transparent; border: 0; padding: 0; }
.form--light .field label { color: var(--ink); }
.form--light .field input, .form--light .field textarea { background: #fff; border: 1px solid var(--hairline); color: var(--ink); }
.form--light .field textarea { min-height: 150px; }
.post__save { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--muted); font-size: .92rem; }
.post__save input { width: 16px; height: 16px; flex: none; }

/* ==========================================================================
   TEAM GRID (team.html)
   ========================================================================== */
.teamgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 30px; margin-top: 60px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .nav { gap: 18px; }
  .nav__link { font-size: .74rem; }
  .header__phone { display: none; }
}
@media (max-width: 1024px) {
  :root { --hd-h: 76px; }
  .nav, .header__phone, .header .btn { display: none; }
  .nav-toggle { display: grid; }
  .hero { min-height: 720px; }
  .hero__in { padding-top: 150px; }
  .hero__plate { position: static; width: 100%; height: auto; margin-top: 40px; max-width: 340px; }
  .plate__sq { display: none; }
  .trio__grid, .trio__row2 { grid-template-columns: 1fr; margin-top: 0; }
  .vcard--photo { grid-column: auto; min-height: 320px; }
  .aboutsplit, .statsband__in, .contactband__in, .why__grid, .workflow__grid, .testi__grid, .catalog__in, .product__in { grid-template-columns: 1fr; gap: 40px; }
  .aboutsplit--textleft { grid-template-columns: 1fr; }
  .aboutsteps__top { grid-template-columns: 1fr; gap: 30px; }
  .aboutsteps__cards { grid-template-columns: 1fr 1fr; }
  .svccta__in { max-width: 100%; }
  .deck__intro { position: static; height: auto; min-height: 0; padding: 80px 0; }
  .deck__intro-in { grid-template-columns: 1fr; }
  .deck__intro-right { text-align: left; }
  .dcard { position: static; grid-template-columns: 1fr; }
  .dcard__photo { min-height: 300px; order: -1; }
  .slide { flex-basis: 50% !important; }
  .postgrid, .prodgrid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .svcdetail__in, .blog__in, .projdetail__intro, .projdetail__feat { grid-template-columns: 1fr; gap: 40px; }
  .svcgrid, .projgrid { grid-template-columns: 1fr; }
  .teamgrid { grid-template-columns: repeat(2, 1fr); }
  .projmeta { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  :root { --gut: 18px; }
  .hero__h1 { font-size: clamp(2.6rem, 8vw, 3.4rem); }
  .slide { flex-basis: 100% !important; }
  .sec-head--split, .svccta__feats, .form__grid, .contactcols, .statgrid, .whyfeats, .deck__intro-in { grid-template-columns: 1fr; }
  .postgrid, .prodgrid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .statgrid > div { transform: none !important; }
  .wordband__mark { font-size: 22vw; }
  .testi__photo img { aspect-ratio: 4/3; }
  .aboutsteps__cards { grid-template-columns: 1fr; }
  .stepcard { border-left: 0; border-top: 1px solid var(--hairline); }
  .svccard { grid-template-columns: 1fr; }
  .svccard__photo { min-height: 240px; order: -1; }
  .svcfeats, .svcbullets, .post__pair, .projmeta, .teamgrid { grid-template-columns: 1fr; }
  .post__nav { flex-direction: column; gap: 20px; }
  .post__prev, .post__next { max-width: 100%; }
  .post__next { text-align: left; }
  .post__next b { justify-content: flex-start; }
  .review--in { margin-left: 24px; }
}

/* ==========================================================================
   MOBILE OVERFLOW GUARD (<=430px: clip ghost-bearing bands + wrap tabs)
   ========================================================================== */
@media (max-width: 430px) {
  .trio, .workflow, .aboutsteps, .tabs, .why { overflow-x: clip; }
  .tabs__nav { flex-wrap: wrap; gap: 10px 22px; }
}

/* ==========================================================================
   VARIANT HOMES (home-2 / home-3 / home-4) - namespaced .v-h2 / .v-h3 / .v-h4
   Variant-specific chrome only; existing pages carry no v-hX body class.
   ========================================================================== */
/* shared: transparent fixed header over hero, solid on scroll */
.v-h2 .header, .v-h3 .header, .v-h4 .header { position: fixed; top: 0; left: 0; right: 0; background: transparent; transition: background .3s var(--ease); }
.v-h2 .header.is-solid, .v-h3 .header.is-solid, .v-h4 .header.is-solid { background: var(--dark); }
.vhero__ghost { color: var(--accent); z-index: 4; }
.stattrio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.stattrio__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 5vw, 5.4rem); line-height: .9; }
.stattrio__num b { color: var(--accent); }
.stattrio--ink .stattrio__num { color: var(--ink); }
.stattrio--dark .stattrio__num { color: #fff; }
.stattrio__cap { color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; }
.stattrio--dark .stattrio__cap { color: var(--on-dark-muted); }

/* faq band (dark) shared by h2/h3/h4 */
.faqband { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.faqband__ghost { bottom: -24px; left: -20px; font-size: clamp(5rem, 14vw, 14rem); }
.faqband__grid { display: grid; grid-template-columns: 40% 1fr; gap: 60px; position: relative; z-index: 2; align-items: start; }
.faqband h2 { color: #fff; font-size: var(--fs-h2); text-transform: uppercase; margin-top: 20px; }
.faqband__lead { color: var(--on-dark-muted); margin: 24px 0 30px; }

/* ---- H2 ---- */
.v-h2 .vhero--full { min-height: 960px; }
/* ref-measured 1440: h1 fs 110px, x70, w987 */
.v-h2 .hero__h1 { font-size: clamp(3rem, 0.6rem + 7.6vw, 6.875rem); max-width: 18ch; }
@media (min-width: 1100px) { .v-h2 .hero__in { padding-left: 40px; } }
.vhero--full .vhero__ghost { bottom: 0; right: 10px; font-size: clamp(6rem, 13vw, 15rem); line-height: .78; }
.trusted2way { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: 0; background: var(--paper); }
.trusted2way__photo { position: relative; min-height: 720px; }
.trusted2way__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trusted2way__panel { align-self: center; padding: 110px 80px 110px 70px; max-width: 760px; }
.trusted2way__panel h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-top: 22px; }
.trusted2way__lead { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 26px 0 16px; }
.trusted2way__panel > p { color: var(--muted); margin-bottom: 30px; }
.facts { background: var(--paper); padding-top: 0; }
.facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: 44px 34px; border-left: 1px solid var(--hairline); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact__ico { width: 54px; height: 54px; color: var(--ink); margin-bottom: 26px; }
.fact__ico svg { width: 100%; height: 100%; stroke-width: 1.2; }
.fact h3 { font-size: 1.5rem; text-transform: uppercase; }
.fact p { color: var(--muted); margin-top: 14px; font-size: .96rem; }
.serveband { background: var(--paper); overflow: hidden; }
.serveband__ghost { top: -6px; left: 50%; transform: translateX(-50%); font-size: clamp(5rem, 14vw, 13rem); }
.serveband__head { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.serveband__head h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-top: 20px; }
.serveband__intro { text-align: right; }
.serveband__intro p { color: var(--muted); margin-bottom: 20px; }
.serveband .svccard { height: 100%; }
.statstrip { background: var(--paper); padding: 30px 0 60px; }
.photostrip { position: relative; height: 230px; overflow: hidden; }
.photostrip img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.photostrip__bar { position: absolute; right: 0; top: 0; bottom: 0; width: 120px; background: var(--accent); }
.vprocess__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 60px; position: relative; z-index: 2; align-items: center; }
.vprocess__media { position: relative; min-height: 620px; }
.vprocess__map { position: absolute; inset: 6% 8%; background-image: radial-gradient(var(--hairline) 1.6px, transparent 1.6px); background-size: 15px 15px; opacity: .7; }
.vprocess__p1 { position: absolute; left: 0; top: 0; width: 52%; aspect-ratio: 3/4; object-fit: cover; z-index: 2; }
.vprocess__p2 { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1/1; object-fit: cover; border: 8px solid var(--paper); z-index: 2; }
.vclarity { position: relative; }
.vclarity__bg { position: absolute; inset: 0; z-index: 0; }
.vclarity__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .14; }
.v-h2 .vclarity .pcard__bar { background: #fff; color: var(--ink); }
.v-h2 .vclarity .pcard__bar h3 { color: var(--ink); }
.pricing { background: var(--paper); }
.pricing__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: start; }
.pricing__intro { padding-right: 20px; }
.pricing__intro h2 { font-size: var(--fs-h2); text-transform: uppercase; margin: 20px 0 20px; }
.pricing__intro p { color: var(--muted); }
.pcard-price { background: #fff; padding: 44px 40px; display: flex; flex-direction: column; }
.pcard-price__plan { font-family: var(--font-display); font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pcard-price__amt { font-family: var(--font-display); font-weight: 700; font-size: 4rem; line-height: 1; margin-top: 14px; display: flex; align-items: baseline; }
.pcard-price__cur { color: var(--accent); font-size: .68em; margin-right: 2px; }
.pcard-price__per { font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--muted); margin-left: 8px; }
.pcard-price__note { color: var(--muted); margin: 18px 0 22px; }
.pcard-price__feats { list-style: none; margin: 22px 0 30px; padding: 0; display: grid; gap: 14px; }
.pcard-price__feats li { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.pcard-price .tick { width: 22px; height: 22px; flex: none; border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--accent); }
.pcard-price .tick svg { width: 13px; height: 13px; }
.pcard-price__feats li.off { color: var(--muted); }
.pcard-price__feats li.off .tick { color: var(--muted); }
.pcard-price .btn { margin-top: auto; justify-content: center; }

/* ---- H3 ---- */
.v-h3 .vhero--slider { min-height: 900px; position: relative; }
.vhero__stage { position: absolute; inset: 0; z-index: 0; }
.vhero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.vhero__slide.active { opacity: 1; }
.vhero__slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(.9); }
.vhero--slider::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,12,15,.85), rgba(11,12,15,.4)); }
/* ref-measured 1440: h1 fs 110px, x27 (flush-left copy), y200, w1070 */
.vhero__in { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: end; padding-top: 165px; padding-bottom: 120px; }
.vhero__copy { padding-left: 0; }
.vhero__panel { display: none; }
.vhero__panel.active { display: block; }
.v-h3 .hero__h1 { font-size: clamp(2.6rem, 0.6rem + 7.6vw, 6.875rem); max-width: 20ch; }
.vhero__copy .hero__sub { margin-top: 26px; max-width: 46ch; }
.vhero__bullets { display: grid; gap: 10px; margin: 24px 0; }
.vhero__bullets span { display: flex; gap: 10px; align-items: center; color: #fff; font-family: var(--font-display); font-weight: 600; }
.vhero__bullets span::before { content: "+"; color: var(--accent); font-weight: 700; }
.vhero__feature { position: relative; width: 340px; }
.vhero__feature-media { position: relative; overflow: hidden; aspect-ratio: 5/4; }
.vhero__feature-media img { width: 100%; height: 100%; object-fit: cover; }
.vhero__play { position: absolute; right: 14px; bottom: 14px; width: 52px; height: 52px; background: var(--accent); color: var(--ink); display: grid; place-items: center; }
.vhero__play svg { width: 20px; height: 20px; }
.vhero__feature-cap { position: relative; background: var(--accent); color: var(--ink); padding: 24px 26px; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; line-height: 1.15; }
.vhero__feature-sq { position: absolute; right: 0; bottom: 0; display: grid; grid-template-columns: 20px 20px; grid-auto-rows: 20px; }
.vhero__feature-sq i { background: var(--ink); }
.vhero__feature-sq i:nth-child(1) { background: transparent; }
.vhero__tags { position: absolute; left: 0; bottom: 0; z-index: 4; width: min(62%, calc(100% - var(--gut) * 2)); margin-left: max(var(--gut), calc((100% - var(--wrap)) / 2)); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline-dark); }
.vhero__tag { background: none; border: 0; border-right: 1px solid var(--hairline-dark); color: #fff; text-align: left; padding: 22px 18px 22px 0; display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; transition: color .3s; }
.vhero__tag:last-child { border-right: 0; }
.vhero__tag-n { color: var(--accent); }
.vhero__tag.active { color: var(--accent); }
.trusted3 { background: #E9E7E1; position: relative; overflow: hidden; }
.trusted3__ghost { top: 24px; right: -20px; color: rgba(23,24,27,.05); font-size: clamp(5rem, 14vw, 13rem); }
.trusted3__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; position: relative; z-index: 2; }
.trusted3__left h2 { font-size: var(--fs-h2); text-transform: uppercase; margin: 20px 0 54px; }
.trusted3__collage { position: relative; }
.trusted3__photo { position: relative; width: 82%; }
.trusted3__photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.trusted3__plate { position: absolute; right: 0; bottom: -34px; width: 260px; background: var(--accent); color: var(--ink); padding: 30px 28px; }
.trusted3__plate .plate__num { font-family: var(--font-display); font-weight: 700; font-size: 4.4rem; line-height: .85; }
.trusted3__plate .plate__cap { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; margin-top: 8px; }
.trusted3__toppic { position: relative; width: 72%; margin: 0 0 34px auto; }
.trusted3__toppic img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.trusted3__lead { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-bottom: 16px; }
.trusted3__right > p { color: var(--muted); }
.trusted3 .mosaic i { background: #E9E7E1; }
.indserve { background: var(--paper); position: relative; overflow: hidden; }
.indserve__blueprint { position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 30%, var(--hairline) 0 1px, transparent 1px), radial-gradient(circle at 88% 40%, var(--hairline) 0 1px, transparent 1px); background-size: 260px 260px; opacity: .5; }
.indserve .slider { overflow: visible; }
.iscard { background: #fff; }
.iscard__photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.iscard__text { padding: 28px 26px; }
.iscard__text h3 { font-size: 1.45rem; text-transform: uppercase; }
.iscard .dcard__plus { margin: 18px 0; }
.iscard--b { display: flex; flex-direction: column-reverse; transform: translateY(56px); }
.steps3 { background: var(--paper); position: relative; overflow: hidden; }
.steps3__ghost { top: 46%; left: -20px; font-size: clamp(5rem, 16vw, 14rem); }
.steps3__top { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.steps3__illus img { width: 100%; }
.steps3__intro { background: var(--ink); color: #fff; padding: 46px 42px; }
.steps3__intro h2 { color: #fff; font-size: var(--fs-h2); text-transform: uppercase; margin-top: 18px; }
.steps3__intro p { color: var(--on-dark-muted); margin-top: 16px; }
.steps3__row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px; }
.steps3__cta { position: relative; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; }
.steps3__cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steps3__cta-cap { position: relative; z-index: 2; width: 100%; padding: 26px; text-align: right; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; line-height: 1.16; background: linear-gradient(0deg, rgba(15,15,18,.86), transparent 66%); }
.stepcard--v3 { background: #fff; border-left: 1px solid var(--hairline); padding: 40px 30px; }
.stepcard--v3:nth-child(3) { transform: translateY(40px); }
.stepcard--v3:nth-child(4) { transform: translateY(80px); }
.stepcard__paren { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--muted); }
.stepcard--v3 h3 { font-size: 1.4rem; text-transform: uppercase; margin: 44px 0 14px; }
.stepcard--v3 p { color: var(--muted); }
.projgridband { background: var(--paper); }
.roster { background: var(--paper); position: relative; overflow: hidden; }
.roster__ghost { top: 6%; left: 0; font-size: clamp(5rem, 16vw, 15rem); }
.rosterlist { position: relative; margin-top: 40px; border-top: 1px solid var(--hairline); }
.rosteritem { position: relative; z-index: 2; display: grid; grid-template-columns: 70px 1fr auto 60px; align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--hairline); transition: color .3s; }
.rosteritem__n { font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.rosteritem__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.6rem); text-transform: uppercase; line-height: 1; }
.rosteritem__role { color: var(--muted); }
.rosteritem .boxarrow-static { background: transparent; color: var(--ink); }
.rosteritem.active .rosteritem__name { color: var(--accent-deep); }
.rosteritem.active .boxarrow-static { background: var(--accent); }
.roster__peek { position: absolute; right: 5%; top: 50%; transform: translateY(-50%) scale(.94); width: 290px; aspect-ratio: 3/4; opacity: 0; pointer-events: none; z-index: 1; overflow: hidden; transition: opacity .35s var(--ease); }
.rosterlist:hover .roster__peek { opacity: 1; }
.roster__peek img { width: 100%; height: 100%; object-fit: cover; }

/* ---- H4 ---- */
.v-h4 .vhero--split { min-height: 900px; background: var(--dark); }
/* ref-measured 1440: h1 fs 110px, y178 */
.v-h4 .hero__h1 { font-size: clamp(3rem, 0.6rem + 7.6vw, 6.875rem); }
.vhero4__in { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding-top: 170px; padding-bottom: 90px; }
.vhero4__copy .hero__h1 { max-width: 12ch; }
.vhero4__copy .hero__sub { margin-top: 30px; }
.vhero4__media { position: relative; }
.vhero4__frame .slider { margin-top: 0; }
.vhero4__frame .slide { padding-right: 0; }
.vhero4__frame img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.vhero4__plate { position: absolute; right: 0; bottom: -60px; z-index: 3; width: 320px; background: var(--accent); color: var(--ink); padding: 30px 30px 40px; }
.vhero4__plate .plate__num { font-family: var(--font-display); font-weight: 700; font-size: 4.6rem; line-height: .85; }
.vhero4__plate .plate__cap { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; margin-top: 12px; }
.about4 { background: #F2F2F0; position: relative; overflow: hidden; }
.about4__ghost { top: 8px; right: -20px; color: rgba(23,24,27,.05); font-size: clamp(5rem, 16vw, 14rem); }
.about4__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.about4__left { position: relative; }
.about4__photo { position: relative; width: 84%; }
.about4__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.about4__plate { position: absolute; right: 0; bottom: 34px; width: 280px; background: var(--accent); color: var(--ink); padding: 28px 26px; }
.about4__avatars { display: flex; }
.about4__avatars img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); margin-left: -10px; }
.about4__avatars img:first-child { margin-left: 0; }
.about4__plate-cap { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.2rem; line-height: 1.15; margin-top: 18px; }
.about4__right h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-top: 20px; }
.about4__lead { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 24px 0 16px; }
.about4__right > p { color: var(--muted); margin-bottom: 30px; }
.about4__inset { position: relative; width: 62%; margin: 30px 0 0 auto; }
.about4__inset img { width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.about4 .mosaic i { background: #F2F2F0; }
.precision { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.precision__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.precision h2 { color: #fff; font-size: var(--fs-h2); text-transform: uppercase; margin-top: 20px; }
.indtiles { background: var(--paper); position: relative; overflow: hidden; }
.indtiles__ghost { top: -8px; left: 50%; transform: translateX(-50%); font-size: clamp(5rem, 16vw, 15rem); }
.indtiles__illus { position: absolute; top: 60px; right: 30px; width: 420px; max-width: 40%; opacity: .38; z-index: 1; }
.indtiles__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.indtile { position: relative; min-height: 230px; background: linear-gradient(160deg, var(--ink), var(--dark)); color: #fff; padding: 40px; display: flex; align-items: flex-start; }
.indtile h3 { color: #fff; font-size: 1.55rem; text-transform: uppercase; max-width: 11ch; line-height: 1.05; }
.indtile .boxarrow { position: absolute; right: 0; bottom: 0; }
.indtile:hover .boxarrow { background: var(--accent); }
.steps4__grid { display: grid; grid-template-columns: 380px 1fr; gap: 50px; align-items: start; }
.steps4__intro { background: var(--ink); color: #fff; padding: 46px 40px; position: sticky; top: 110px; }
.steps4__intro h2 { color: #fff; font-size: var(--fs-h2); text-transform: uppercase; margin-top: 18px; }
.steps4__intro p { color: var(--on-dark-muted); margin-top: 16px; }
.steps4__cards { display: grid; gap: 20px; }
.stepcard4 { display: grid; grid-template-columns: 150px 1fr; gap: 26px; background: #fff; padding: 24px; align-items: center; }
.stepcard4__media img { width: 150px; height: 120px; object-fit: cover; }
.stepcard4__body .stepcard__n { font-size: 2.2rem; }
.stepcard4__body h3 { font-size: 1.4rem; text-transform: uppercase; margin: 8px 0 10px; }
.stepcard4__body p { color: var(--muted); }
.perform { background: var(--paper); }
.perform__grid { display: grid; grid-template-columns: 45% 1fr; gap: 60px; align-items: center; }
.perform__photo { position: relative; }
.perform__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.perform__plate { position: absolute; right: -20px; bottom: 40px; width: 230px; background: var(--accent); color: var(--ink); padding: 26px 24px; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; line-height: 1.15; }
.perform__text h2 { font-size: var(--fs-h2); text-transform: uppercase; margin: 20px 0 20px; }
.perform__text > p { color: var(--muted); }
.perform__feats { display: grid; grid-template-columns: 1fr 1fr; margin: 30px 0; }
.perform__feat { display: flex; gap: 16px; align-items: center; padding: 20px 8px; border-top: 1px solid var(--hairline); }
.perform__feat-ico { width: 40px; height: 40px; flex: none; color: var(--accent); }
.perform__feat-ico svg { width: 100%; height: 100%; }
.perform__feat span:last-child { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; }
.clarity4 { background: #E9E7E1; }
.clarity4__grid { display: grid; grid-template-columns: 320px 1fr; gap: 50px; align-items: start; }
.clarity4__illus img { width: 100%; margin-bottom: 24px; }
.clarity4__intro h2 { font-size: var(--fs-h2); text-transform: uppercase; margin-top: 18px; }
.clarity4 .slider { margin-top: 0; }
.clarity4 .mosaic i { background: #E9E7E1; }
.testi3 { background: var(--paper); }
.testi3__grid { margin-top: 56px; }
.tc3 { background: #fff; padding: 40px 34px; height: 100%; }
.tc3__stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: 20px; }
.tc3__stars svg { width: 18px; height: 18px; }
.tc3__text { color: var(--ink); font-size: 1.05rem; line-height: 1.5; margin-bottom: 26px; }
.tc3__by { display: flex; align-items: center; gap: 14px; }
.tc3__by img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.tc3__by strong { display: block; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; }
.tc3__by span span { color: var(--muted); font-size: .9rem; }

/* variant responsive */
@media (max-width: 1024px) {
  .trusted2way, .serveband__head, .vprocess__grid, .pricing__grid, .faqband__grid,
  .vhero__in, .trusted3__grid, .steps3__top, .vhero4__in, .about4__grid, .precision__grid,
  .steps4__grid, .perform__grid, .clarity4__grid { grid-template-columns: 1fr; }
  .facts__grid, .indtiles__grid, .stattrio, .steps3__row { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .trusted2way__photo { min-height: 380px; }
  .trusted2way__panel { padding: 60px 30px; max-width: none; }
  .vprocess__media { min-height: 480px; }
  .iscard--b { transform: none; }
  .stepcard--v3:nth-child(3), .stepcard--v3:nth-child(4) { transform: none; }
  .steps4__intro { position: static; }
  .stepcard4 { grid-template-columns: 130px 1fr; }
  .vhero__feature, .vhero__tags { display: none; }
  .vhero__copy { padding-left: 0; }
  .vhero4__plate, .about4__plate, .trusted3__plate, .perform__plate { position: static; width: auto; margin-top: 24px; right: auto; }
  .about4__photo, .trusted3__photo, .trusted3__toppic, .perform__photo, .about4__inset { width: 100%; }
  .indtiles__illus { display: none; }
  .roster__peek { display: none; }
  .rosteritem { grid-template-columns: 50px 1fr auto; }
  .rosteritem .boxarrow-static { display: none; }
}
@media (max-width: 640px) {
  .facts__grid, .indtiles__grid, .stattrio, .steps3__row, .pricing__grid { grid-template-columns: 1fr; }
  .fact { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); }
  .fact:first-child { border-top: 0; }
  .stepcard4 { grid-template-columns: 1fr; }
  .perform__feats { grid-template-columns: 1fr; }
  .rosteritem__role { display: none; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vhero__slide { transition: none !important; }
  .roster__peek { transition: none !important; }
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wordmarquee__track, .logomarquee__track { animation: none !important; }
  .slider__track { transition: none !important; }
  .pcard__media img, .member__img img, .bcard__media img, .prod__media img { transition: none !important; }
  .btn, .btn__ico, .arrowlink svg, .boxarrow svg { transition: none !important; }
  .drop, .mega { transition: opacity .01s !important; transform: none !important; }
  .navitem.open > .drop, .navitem.open > .mega { transform: none !important; }
  .macc__panel, .faq__a, .mega__feature img, .svccard__photo img, .bpost__media img { transition: none !important; }
}