/* ==========================================================================
   Synchronix Integrated Solutions
   Built by Imperial Tech Innovations
   --------------------------------------------------------------------------
   Palette   indigo (the dye of the Indian textile trade) on unbleached greige,
             with a single ochre accent reserved for the connecting chain,
             active navigation and key figures. Nothing else is coloured.
   Type      Archivo for headings, navigation and tabular data.
             Source Serif 4 for prose, because this business sells on
             documentation and a document reads better in a serif.
   ========================================================================== */

:root {
  --ink:          #15181D;
  --indigo:       #1E2329;
  --indigo-deep:  #14171C;
  --indigo-lift:  #9E6712;
  --greige:       #EFEFE9;
  --greige-deep:  #E3E3DA;
  --paper:        #FBFBF8;
  --ochre:        #C6841B;
  --ochre-deep:   #9E6712;
  --muted:        #5F6671;
  --line:         #D3D2CB;
  --line-soft:    #E4E3DC;
  --graphite:     #14171C;
  --graphite-deep:#0C0E12;
  --ease:         cubic-bezier(.2,.65,.2,1);

  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --wrap: 1180px;
  --prose: 64ch;
  --r: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--greige);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

img { max-width: 100%; display: block; }

a { color: var(--indigo-lift); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--ochre-deep); }

:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter, 24px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--indigo); color: #fff; padding: 12px 18px;
  font-family: var(--sans); font-size: 14px; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- headings */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.16;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.35rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 2.9vw, 2.05rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.01em; }
h4 { font-size: 1rem; }
/* a heading that only assistive technology reads, used where a section has
   no visible title and the heading level would otherwise be skipped */
/* very small screens (320px and similar): grid children default to a
   min-width of auto, so a form field could not shrink and the row ran a
   few pixels past the edge. The wrap and the form panel also give back
   some of their padding at that size. */
.cols-side > *, .cols2 > *, .fgrid > *, .formwrap form, .formwrap .fstep { min-width: 0; }
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .formwrap { padding-left: 16px; padding-right: 16px; }
}

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.mega-h, .foot-h, .foot-h5 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.018em; color: var(--ink); margin: 0 0 0.5em; line-height: 1.16; max-width: none; }
.mega-h { font-size: 1rem; }
.foot a[href^="tel:"], .foot a[href^="mailto:"] { display: inline-block; line-height: 24px; }

p { margin: 0 0 1.05em; max-width: var(--prose); }
.wide p { max-width: none; }

.lede {
  font-size: clamp(1.08rem, 1.9vw, 1.28rem);
  line-height: 1.6;
  color: #2A2F37;
  max-width: 58ch;
}

.note { font-size: 0.9rem; color: var(--muted); font-family: var(--sans); max-width: 70ch; }

ul.plain { list-style: none; padding: 0; margin: 0 0 1em; }

ul.ticks { padding-left: 0; list-style: none; margin: 0 0 1.1em; max-width: var(--prose); }
ul.ticks li { position: relative; padding-left: 22px; margin-bottom: 0.42em; }
ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 9px; height: 1px; background: var(--ochre);
}

/* ---------------------------------------------------------------- utility bar */

.util {
  background: var(--indigo-deep);
  color: #C4C8CF;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.005em;
}
.util .wrap { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
.util a { color: #E1E4E8; text-decoration: none; }
.util a:hover { color: #fff; text-decoration: underline; }
.util .util-hours { margin-left: auto; color: #9AA1AB; }

@media (max-width: 860px) { .util { display: none; } }

/* ---------------------------------------------------------------- header */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 90;
}
.masthead .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand .mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand .word { font-family: var(--sans); line-height: 1.08; }
.brand .word b { display: block; font-size: 17px; font-weight: 700; color: var(--indigo); letter-spacing: -0.025em; }
.brand .word span { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a.navlink {
  font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding: 10px 12px; display: inline-block; border-bottom: 2px solid transparent;
}
.nav a.navlink:hover { color: var(--indigo-lift); }
.nav a.navlink[aria-current="page"], .nav li.on > a.navlink { border-bottom-color: var(--ochre); }

/* The header CTA must not wrap: it keeps its width and the links tighten first.
   Between 1080px (where the burger takes over) and 1400px the row is close to
   full, so the link padding and font step down slightly. */
.nav > .btn-primary { flex: 0 0 auto; white-space: nowrap; }
.nav > ul { flex: 0 1 auto; min-width: 0; }
@media (max-width: 1400px) {
  .nav a.navlink, .nav .megabtn { padding-left: 9px; padding-right: 9px; font-size: 14px; }
  .nav > ul { gap: 0; }
}
@media (max-width: 1250px) {
  .nav a.navlink, .nav .megabtn { padding-left: 5px; padding-right: 5px; font-size: 13px; }
  .nav > .btn-primary { padding-left: 16px; padding-right: 16px; margin-left: 6px; }
}

.has-mega { position: relative; }
.megabtn {
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--ink);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.megabtn svg { width: 9px; height: 9px; }
.megabtn[aria-expanded="true"] { border-bottom-color: var(--ochre); }

.mega {
  position: absolute; top: calc(100% + 1px); right: -80px;
  width: min(940px, 92vw);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ochre);
  padding: 26px 28px;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 30px;
  box-shadow: 0 18px 44px -28px rgba(12,14,18,.45);
}
.mega[data-open="true"] { display: grid; }
.mega .mega-h { font-size: 14px; margin-bottom: 4px; }
.mega .mega-h a { color: var(--indigo); text-decoration: none; }
.mega .mega-h a:hover { color: var(--ochre-deep); }
.mega p { font-size: 13.5px; color: var(--muted); margin: 0 0 7px; font-family: var(--sans); line-height: 1.45; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega ul li { margin-bottom: 2px; }
.mega ul a { font-family: var(--sans); font-size: 13px; color: #363C45; text-decoration: none; }
.mega ul a:hover { color: var(--ochre-deep); text-decoration: underline; }
.mega .mega-aside {
  grid-column: 3; border-left: 1px solid var(--line-soft); padding-left: 26px;
}

.burger {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 12px; cursor: pointer; font-family: var(--sans); font-size: 13px; color: var(--ink);
}

@media (max-width: 1150px) {
  .nav { display: none; }
  .burger { display: inline-block; }
  .nav.open {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 14px 24px 26px; max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .nav.open > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav.open a.navlink { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
  .nav.open .has-mega { position: static; }
  .nav.open .megabtn { width: 100%; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
  .nav.open .mega { position: static; width: auto; box-shadow: none; border: 0; padding: 6px 0 14px; grid-template-columns: 1fr; gap: 16px; }
  .nav.open .mega .mega-aside { grid-column: 1; border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 14px; }
  .nav.open .btn { width: 100%; text-align: center; margin-top: 14px; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  display: inline-block; padding: 12px 20px; border-radius: var(--r);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.btn-primary:hover { background: var(--indigo-deep); color: #fff; border-color: var(--indigo-deep); }
.btn-ghost { background: transparent; color: var(--indigo); border-color: var(--indigo); }
.btn-ghost:hover { background: var(--indigo); color: #fff; }
.btn-light { background: var(--ochre); color: #1B1305; border-color: var(--ochre); }
.btn-light:hover { background: #DA9526; color: #1B1305; border-color: #DA9526; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { background: #fff; color: var(--indigo-deep); border-color: #fff; }

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* ---------------------------------------------------------------- hero */
/* Three depth layers: the photograph (.hero-media), the copy (.hero-copy)
   and the floating cards (.hero-cards). main.js nudges each by a few
   pixels on pointer movement and scroll; everything else is CSS. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--graphite);
  color: #fff;
  min-height: clamp(580px, 84vh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(48px, 6.5vw, 84px) 0 0;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, var(--ochre) 0%, rgba(198,132,27,.35) 32%, transparent 70%);
}

/* layer 1 — photograph, cinematic grade, technical grid */
.hero-media {
  position: absolute; inset: -6% 0; z-index: -1;
  background:
    radial-gradient(ellipse at 72% 28%, #2A2F37 0%, transparent 55%),
    linear-gradient(180deg, #1B1F25, var(--graphite-deep));
  animation: mediaIn 1.8s cubic-bezier(.2,.6,.2,1) both;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  transform: scale(1.08); will-change: transform;
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,14,18,.88) 0%, rgba(12,14,18,.72) 30%, rgba(12,14,18,.30) 60%, rgba(12,14,18,.14) 82%, rgba(12,14,18,.34) 100%),
    linear-gradient(180deg, rgba(12,14,18,.18) 0%, transparent 26%, transparent 62%, rgba(12,14,18,.78) 100%);
  box-shadow: inset 0 0 160px 20px rgba(0,0,0,.30);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.20) .8px, transparent 1.6px),
    linear-gradient(rgba(255,255,255,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.042) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: -36px -36px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 55% 45%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 55% 45%, #000 20%, transparent 100%);
  opacity: .8; will-change: transform, opacity;
}


/* layer 2 — copy */
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 40px; align-items: end;
}
.hero-copy { will-change: transform; align-self: center; }

.badge {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .015em; line-height: 1.4;
  color: #D6DCE6; margin: 0 0 28px; padding: 7px 15px 7px 12px; max-width: none;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .3s ease, background-color .3s ease;
  animation: fadeUp .7s var(--ease) both .1s;
}
.badge:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.09); }
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ochre); flex-shrink: 0;
  animation: breathe 3.2s ease-in-out infinite;
}
.badge-sep { color: rgba(255,255,255,.28); }

.hero-title {
  color: #fff; font-size: clamp(2.55rem, 6.4vw, 4.75rem); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 24px; max-width: 12ch;
}
.hero-title .line { display: block; overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.hero-title .line > span {
  display: inline-block; opacity: 0; transform: translateY(105%);
  animation: riseIn .78s var(--ease) both;
}
.hero-title .line:nth-child(1) > span { animation-delay: .32s; }
.hero-title .line:nth-child(2) > span { animation-delay: .46s; }
.hero-title .line:nth-child(3) > span { animation-delay: .60s; }
.hdot {
  display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--ochre);
  vertical-align: middle; margin: 0 .14em; position: relative; top: -.06em;
  transform: scale(0);
  animation: dotIn .55s cubic-bezier(.3,1.5,.5,1) both 1.15s, dotGlow 4.4s ease-in-out infinite 1.7s;
  animation-fill-mode: both, none;
}

.hero .lede { color: #B9C1CE; max-width: 52ch; margin-bottom: 0; animation: fadeUp .7s var(--ease) both .82s; }
.hero .btnrow { margin-top: 30px; align-items: center; animation: fadeUp .7s var(--ease) both .98s; }

.btn-hero {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(115deg, #DB9A2E 0%, var(--ochre) 48%, #B77610 100%);
  background-size: 200% 100%; background-position: 0% 50%;
  color: #1B1305; border-color: transparent;
  box-shadow: 0 8px 20px -12px rgba(198,132,27,.7);
  transition: background-position .3s ease, box-shadow .3s ease, transform .3s ease;
}
.btn-hero:hover { background-position: 100% 50%; color: #1B1305; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(198,132,27,.8); }
.btn-hero svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.btn-hero:hover svg { transform: translateX(5px); }

.btn-glass {
  background: rgba(255,255,255,.03); color: #fff; border-color: rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .28s ease, background-color .28s ease;
}
.btn-glass > span { display: inline-block; transition: transform .28s ease; }
.btn-glass:hover { color: #fff; border-color: rgba(255,255,255,.62); background: rgba(255,255,255,.1); }
.btn-glass:hover > span { transform: translateX(2px); }

/* the signal — a thin orange pulse travelling beside the CTAs */
.signal { position: relative; width: 64px; height: 1px; margin-left: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.signal::after {
  content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--ochre), transparent);
  transform: translateX(-100%);
  animation: signal 2.8s cubic-bezier(.4,0,.2,1) infinite 1.8s;
}

/* layer 3 — floating cards. Kept low and right, over the fabric table,
   so they never sit on the headline or on a face. */
.hero-cards { position: relative; display: grid; gap: 12px; justify-items: end; will-change: transform; align-self: end; margin-bottom: -60px; }
.hcard {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  width: min(100%, 272px); padding: 12px 16px 12px 13px;
  background: rgba(14,17,23,.62); border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.75);
  font-family: var(--sans);
  animation: fadeUpScale .85s var(--ease) both, floaty 8s ease-in-out infinite;
  animation-fill-mode: both, none;
  transition: border-color .3s ease;
}
.hcard:hover { border-color: rgba(255,255,255,.24); }
.hcard:nth-child(1) { animation-delay: 1.05s, 2.2s; margin-right: 12%; }
.hcard:nth-child(2) { animation-delay: 1.2s, 3.4s; animation-duration: .85s, 9.5s; }
.hcard:nth-child(3) { animation-delay: 1.35s, 1.2s; animation-duration: .85s, 8.6s; margin-right: 22%; }
.hcard-ind { width: 7px; height: 7px; border-radius: 50%; background: var(--ochre); margin-top: 6px; box-shadow: 0 0 0 3px rgba(198,132,27,.18); }
.hcard b { display: block; font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -.01em; margin-bottom: 3px; }
.hcard span { display: block; font-size: 12px; color: #A7AFBC; line-height: 1.45; }

/* trust row + scroll cue */
.hero-foot {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-top: clamp(56px, 7vw, 84px); padding-top: 20px; padding-bottom: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.trust li {
  display: inline-flex; align-items: center; gap: 9px; cursor: default;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: #9CA5B4; letter-spacing: .005em;
  transition: color .3s ease; animation: fadeUp .7s var(--ease) both;
}
.trust li:nth-child(1) { animation-delay: 1.25s; }
.trust li:nth-child(2) { animation-delay: 1.37s; }
.trust li:nth-child(3) { animation-delay: 1.49s; }
.trust svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #5F6875; transition: color .3s ease, transform .3s ease; }
.trust li:hover { color: #F2F4F7; }
.trust li:hover svg { color: var(--ochre); transform: scale(1.08); }

.scrollcue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0;
  text-decoration: none; color: #8F98A7;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  transition: color .3s ease; animation: fadeIn 1s ease both 1.7s;
}
.scrollcue:hover { color: #fff; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUpScale { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes mediaIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dotGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(198,132,27,0); } 50% { box-shadow: 0 0 14px 3px rgba(217,149,42,.45); } }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,149,42,.55); } 50% { box-shadow: 0 0 0 5px rgba(217,149,42,0); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes signal { to { transform: translateX(340%); } }
@keyframes cueDrop { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }

@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .hero-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: stretch; gap: 10px; margin-bottom: 0; }
  .hcard { width: auto; margin: 0 !important; animation: fadeUpScale .85s var(--ease) both; }
  .hero-media { inset: 0; }
  .hero-img { transform: none; object-position: 58% 40%; }
}
@media (max-width: 680px) {
  .hero-title { max-width: none; }
  .hero-cards { grid-template-columns: 1fr 1fr; }
  .hcard:nth-child(3) { grid-column: 1 / -1; }
  .hcard { padding: 13px 14px; }
  .hcard b { font-size: 14px; }
  .signal { display: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .scrollcue { align-self: center; }
}

/* inner page hero — the same grade and grid, at a quieter scale */
.pagehead {
  background: var(--indigo);
  color: #fff;
  padding: clamp(40px, 5.5vw, 66px) 0 clamp(44px, 6vw, 68px);
  position: relative; overflow: hidden; isolation: isolate;
}
.pagehead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 90% at 88% 10%, rgba(198,132,27,.14), transparent 60%),
    radial-gradient(ellipse 70% 100% at 0% 100%, rgba(12,14,18,.7), transparent 60%),
    radial-gradient(circle, rgba(255,255,255,.16) .8px, transparent 1.6px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px, 72px 72px;
  background-position: 0 0, 0 0, -36px -36px, 0 0, 0 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.55), #000);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.55), #000);
}
.pagehead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--ochre) 0%, rgba(198,132,27,.35) 32%, transparent 70%);
}
.pagehead h1 { color: #fff; max-width: 20ch; font-size: clamp(1.9rem, 4.2vw, 2.85rem); animation: fadeUp .7s var(--ease) both .12s; }
.pagehead .lede { color: #D2D5DA; animation: fadeUp .7s var(--ease) both .28s; }
.pagehead .kicker {
  font-family: var(--sans); font-size: 13px; color: var(--ochre);
  font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
  animation: fadeUp .7s var(--ease) both .04s;
}
.pagehead .kicker::before { content: ""; width: 22px; height: 1px; background: var(--ochre); }
.pagehead .btnrow { animation: fadeUp .7s var(--ease) both .4s; }
.pagehead .btn-primary { background: #fff; color: var(--indigo-deep); border-color: #fff; }
.pagehead .btn-primary:hover { background: var(--ochre); color: #1B1305; border-color: var(--ochre); box-shadow: 0 10px 22px -14px rgba(198,132,27,.85); }
.pagehead .btn-outline-light:hover { transform: translateY(-1px); }

.crumbs { font-family: var(--sans); font-size: 12.5px; color: #9198A3; margin: 0 0 20px; animation: fadeIn .8s ease both; }
.crumbs a { color: #BDC2CA; text-decoration: none; transition: color .2s ease; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span { padding: 0 7px; color: #646B76; }

/* ---------------------------------------------------------------- sections */

.sec { padding: clamp(46px, 6.5vw, 78px) 0; }
.sec-tight { padding: clamp(34px, 4.5vw, 52px) 0; }
.sec-paper { background: var(--paper); }
.sec-greige { background: var(--greige); }
.sec-deep { background: var(--indigo-deep); color: #fff; }
.sec-deep h2, .sec-deep h3 { color: #fff; }
.sec-deep p { color: #C9CDD4; }
.sec + .sec { border-top: 1px solid var(--line-soft); }
.sec-deep + .sec, .sec + .sec-deep { border-top: 0; }

.sechead { margin-bottom: 30px; max-width: 62ch; }
.sechead h2 { margin-bottom: 10px; }
.sechead p { color: var(--muted); margin-bottom: 0; }
.sec-deep .sechead p { color: #AAB0B9; }

.cols2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; }
.cols-side { display: grid; grid-template-columns: 1fr 350px; gap: 48px; align-items: start; }
@media (max-width: 900px) { .cols2, .cols-side { grid-template-columns: 1fr; gap: 30px; } }

/* ---------------------------------------------------------------- blocks */

.blocks { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.blocks-2 { grid-template-columns: repeat(2, 1fr); }
.blocks-3 { grid-template-columns: repeat(3, 1fr); }
.blocks-4 { grid-template-columns: repeat(4, 1fr); }
.block { background: var(--paper); padding: 24px 24px 26px; }
.block h3 { margin-bottom: 7px; }
.block p { font-size: 15.5px; color: var(--muted); margin: 0; max-width: none; }
.block p + p { margin-top: .7em; }
a.block { text-decoration: none; display: block; }
a.block:hover { background: #fff; }
a.block:hover h3 { color: var(--indigo-lift); }
.block .blocklink { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--indigo-lift); margin-top: 12px; display: block; }

@media (max-width: 980px) { .blocks-4 { grid-template-columns: repeat(2, 1fr); } .blocks-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blocks-2, .blocks-3, .blocks-4 { grid-template-columns: 1fr; } }

/* vertical cards on the home page carry a heavier left edge */
.vcard { border-left: 3px solid var(--indigo); }
.vcard .vimg, .pcard .vimg, .icard .vimg { margin: -24px -24px 18px; overflow: hidden; background: var(--greige-deep); }
.vcard .vimg img, .pcard .vimg img, .icard .vimg img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; transition: transform .7s var(--ease); }
a.vcard:hover .vimg img, a.pcard:hover .vimg img { transform: scale(1.04); }
.vcard .strap { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ochre-deep); margin: 0 0 9px; }

/* ---------------------------------------------------------------- ledger */

.ledger { border-top: 1px solid var(--line); margin: 0 0 8px; }
.ledger div {
  display: grid; grid-template-columns: 240px 1fr; gap: 10px 26px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.ledger dt, .ledger .k {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--indigo);
  margin: 0;
}
.ledger dd, .ledger .v { margin: 0; font-size: 16px; color: #2A2F37; }
.cols-side > div:nth-child(2) .ledger div { grid-template-columns: 1fr; gap: 3px; }
@media (max-width: 680px) { .ledger div { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; } }

/* ---------------------------------------------------------------- steps */

.steps { counter-reset: st; border-top: 1px solid var(--line); }
.steps li {
  counter-increment: st; list-style: none;
  display: grid; grid-template-columns: 54px minmax(150px, 270px) 1fr; gap: 4px 26px;
  padding: 17px 0; border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 760px) {
  .steps li { grid-template-columns: 40px 1fr; }
  .steps li h3 { grid-column: 2; }
  .steps li p { grid-column: 2; }
}
.steps li::before {
  content: counter(st, decimal-leading-zero);
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: var(--ochre-deep); padding-top: 3px;
}
.steps h3 { font-size: 1.02rem; margin-bottom: 4px; }
.steps p { margin: 0; font-size: 15.5px; color: var(--muted); max-width: 60ch; }
.steps h3 { align-self: start; }
.steps { padding: 0; margin: 0; }

/* horizontal method strip */
.method { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.method > div { background: var(--paper); padding: 20px 16px 22px; }
.method b { display: block; font-family: var(--sans); font-size: 12px; color: var(--ochre-deep); margin-bottom: 9px; }
.method h3 { font-size: .98rem; margin-bottom: 5px; }
.method p { font-size: 14px; color: var(--muted); margin: 0; }
@media (max-width: 1020px) { .method { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .method { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); }
.stats > div { background: var(--indigo-deep); padding: 26px 24px 28px; }
.stats b { display: block; font-family: var(--sans); font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 700; color: var(--ochre); letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px; }
.stats span { display: block; font-family: var(--sans); font-size: 14px; color: #B8BDC5; line-height: 1.4; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- accordion */

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line-soft); }
.acc summary {
  font-family: var(--sans); font-size: 15.5px; font-weight: 600; color: var(--ink);
  padding: 15px 34px 15px 0; cursor: pointer; position: relative; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; position: absolute; right: 4px; top: 13px;
  font-family: var(--sans); font-size: 19px; font-weight: 400; color: var(--ochre-deep);
}
.acc details[open] summary::after { content: "\2013"; }
.acc summary:hover { color: var(--indigo-lift); }
.acc .accbody { padding: 0 0 18px; }
.acc .accbody p { font-size: 15.5px; }
.acc .accbody ul { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 34px; }
.acc .accbody ul li { font-size: 15px; padding: 3px 0 3px 16px; position: relative; break-inside: avoid; }
.acc .accbody ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 7px; height: 1px; background: var(--ochre); }
@media (max-width: 640px) { .acc .accbody ul { columns: 1; } }

/* ---------------------------------------------------------------- callout */

.callout {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ochre); padding: 22px 24px; margin: 26px 0;
}
.callout h3 { font-size: 1rem; margin-bottom: 7px; }
.callout p { font-size: 15.5px; margin: 0; color: #363C45; }
.callout p + p { margin-top: .7em; }

.sec-deep .callout { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); border-left-color: var(--ochre); }
.sec-deep .callout p { color: #CDD1D7; }

/* ---------------------------------------------------------------- forms */

.formwrap { background: var(--paper); border: 1px solid var(--line); padding: clamp(24px, 4vw, 38px); }
.formwrap h2 { margin-bottom: 8px; }
.formwrap .formintro { color: var(--muted); font-size: 15.5px; max-width: 62ch; }

.fstep { display: none; }
.fstep[data-active="true"] { display: block; }

.fprogress { display: flex; gap: 22px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin: 20px 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.fprogress span { display: flex; align-items: center; gap: 8px; }
.fprogress span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.fprogress span[data-on="true"] { color: var(--indigo); font-weight: 600; }
.fprogress span[data-on="true"]::before { background: var(--ochre); }

.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 680px) { .fgrid { grid-template-columns: 1fr; } }

.field label, .fieldset legend {
  display: block; font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--indigo); margin-bottom: 6px;
}
.field .opt { font-weight: 400; color: var(--muted); }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field input[type="number"], .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; line-height: 1.4;
}
.field textarea { min-height: 108px; resize: vertical; font-family: var(--serif); font-size: 16px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--indigo-lift); outline: 2px solid rgba(198,132,27,.28); outline-offset: 0; }
.field input[type="file"] { font-family: var(--sans); font-size: 14px; }
.field .hint { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin: 5px 0 0; }
.field .err { font-family: var(--sans); font-size: 12.5px; color: #A3301C; margin: 5px 0 0; display: none; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: #A3301C; }
.field[data-invalid="true"] .err { display: block; }

.fieldset { border: 0; padding: 0; margin: 0 0 4px; }
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px; }
@media (max-width: 760px) { .checks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .checks { grid-template-columns: 1fr; } }
.checks label, .consent label {
  font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink);
  display: flex; gap: 9px; align-items: flex-start; margin: 0; cursor: pointer;
}
.checks input, .consent input { margin-top: 3px; flex-shrink: 0; }
.consent { margin: 20px 0 0; }
.consent label { font-size: 13.5px; color: var(--muted); }
.consent a { color: var(--indigo-lift); }

.factions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.factions .skipstep { font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
.formerror { font-family: var(--sans); font-size: 14px; color: #A3301C; background: #FBEDEA; border: 1px solid #EFC7BF; border-left: 3px solid #A3301C; padding: 12px 14px; margin: 18px 0 0; max-width: none; }
form[aria-busy="true"] button { opacity: .7; cursor: progress; }

/* ---------------------------------------------------------------- cta band */

.ctaband { background: var(--indigo-deep); color: #fff; padding: clamp(40px, 5.5vw, 62px) 0; }
.ctaband h2 { color: #fff; max-width: 22ch; }
.ctaband p { color: #BABFC7; max-width: 56ch; }
.ctaband .inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; }
.ctaband .contactlines { font-family: var(--sans); font-size: 14.5px; color: #CDD1D7; }
.ctaband .contactlines a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.ctaband .contactlines a:hover { border-bottom-color: var(--ochre); color: var(--ochre); }
.ctaband .contactlines p { color: #CDD1D7; margin-bottom: .5em; }
@media (max-width: 860px) { .ctaband .inner { grid-template-columns: 1fr; gap: 26px; align-items: start; } }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--ink); color: #A8AEB7; font-family: var(--sans); font-size: 14px; }
.foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; padding: clamp(40px, 5vw, 58px) 0 34px; }
.foot .foot-h { color: #fff; font-size: 13px; letter-spacing: .01em; margin-bottom: 13px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 7px; }
.foot a { color: #A8AEB7; text-decoration: none; }
.foot a:hover { color: var(--ochre); }
.foot .about p { color: #949AA4; font-size: 14px; max-width: 34ch; margin-bottom: 14px; font-family: var(--serif); }
.foot .tag { color: #fff; font-family: var(--sans); font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.foot .social { display: flex; gap: 10px; }

.foot .addresses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.11); }
.foot .addresses .foot-h5 { color: #fff; font-size: 12px; margin: 0 0 7px; font-weight: 600; }
.foot .addresses p { margin: 0; font-size: 13.5px; color: #949AA4; line-height: 1.55; font-family: var(--sans); }

.foot .legal { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 18px 0 30px; border-top: 1px solid rgba(255,255,255,.11); font-size: 12.5px; color: #7F8590; }
.foot .legal .reg { margin-right: auto; }

@media (max-width: 900px) {
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .foot .addresses { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot .cols, .foot .addresses { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- whatsapp */

.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  background: #128C7E; color: #fff; text-decoration: none;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 11px 16px; border-radius: 999px;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.5);
}
.wa:hover { background: #0E756A; color: #fff; }

/* ---------------------------------------------------- touch targets

   On a finger-driven screen every standalone link needs about 24px of
   height to be hit reliably (WCAG 2.2 "Target Size"). Links that sit
   inside a sentence are left alone — padding them would break the line.
   Mouse layouts are untouched. */
@media (pointer: coarse) {
  .util a,
  .crumbs a,
  .subnav-links a,
  .foot ul li a,
  .foot .legal > a,
  .foot .legal .credit a,
  .factions .skipstep {
    display: inline-flex; align-items: center; min-height: 24px;
  }
  /* calling or emailing is the main thing a phone visitor does here */
  a[href^="tel:"], a[href^="mailto:"], a[href*="wa.me"], a[href*="google.com/maps"], a[href*="/?q=Lodha"] {
    display: inline-flex; align-items: center; min-height: 24px;
  }
  .foot li { margin-bottom: 4px; }
  summary { min-height: 24px; padding-top: 12px; padding-bottom: 12px; }

  /* clear of the iPhone home indicator */
  .wa { bottom: 26px; }
}

.wa svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 520px) { .wa span { display: none; } .wa { padding: 13px; border-radius: 50%; } }

/* ---------------------------------------------------------------- misc pages */

.legal-body h2 { font-size: 1.3rem; margin-top: 2em; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { max-width: 72ch; }
.legal-body ul { padding-left: 20px; }
.legal-body li { margin-bottom: .4em; }

.thanks { text-align: left; max-width: 640px; }
.thanks .tick { width: 44px; height: 44px; border-radius: 50%; background: var(--ochre); display: grid; place-items: center; margin-bottom: 22px; }
.thanks .tick svg { width: 22px; height: 22px; stroke: #1B1305; fill: none; stroke-width: 2.4; }

.emptynote {
  border: 1px dashed var(--line); background: var(--paper);
  padding: 26px 24px; font-family: var(--sans); font-size: 15px; color: var(--muted);
}

.marketgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); }
.marketgrid > div { background: var(--indigo-deep); padding: 20px 20px 22px; }
.marketgrid b { display: block; font-family: var(--sans); font-size: 15px; color: #fff; margin-bottom: 5px; }
.marketgrid span { font-family: var(--sans); font-size: 13px; color: #9AA1AB; }
.marketgrid > div.lead { background: var(--indigo); }
.marketgrid > div.lead b { color: var(--ochre); }
@media (max-width: 900px) { .marketgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .marketgrid { grid-template-columns: 1fr; } }

.hublist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 20px; }
.hublist li { font-family: var(--sans); font-size: 14.5px; padding-left: 15px; position: relative; }
.hublist li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 1px; background: var(--ochre); }
@media (max-width: 760px) { .hublist { grid-template-columns: repeat(2, 1fr); } }

.docgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.docgrid li { background: var(--paper); padding: 13px 18px; font-family: var(--sans); font-size: 14.5px; }
@media (max-width: 640px) { .docgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Premium layer — shared by every page
   Motion is limited to transform and opacity. Hover states brighten rather
   than move. The scroll-reveal classes below are only applied once main.js
   has added .js-reveal to <html>, so nothing is hidden if scripts fail.
   ========================================================================== */

::selection { background: var(--ochre); color: #1B1305; }

/* masthead: a soft shadow appears once the page has scrolled */
.masthead { transition: box-shadow .3s ease; }
.masthead.is-scrolled { box-shadow: 0 12px 30px -22px rgba(12,14,18,.4); }
.nav a.navlink, .megabtn { transition: color .2s ease, border-color .2s ease; }
.mega[data-open="true"] { animation: megaIn .28s var(--ease) both; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* buttons: 250ms, a hair of lift, a shadow that matches the fill */
.btn {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary:hover { box-shadow: 0 10px 22px -14px rgba(30,35,41,.75); }
.btn-ghost:hover { box-shadow: 0 10px 22px -14px rgba(30,35,41,.6); }
.btn-light:hover { box-shadow: 0 10px 22px -14px rgba(198,132,27,.85); }
.btn-outline-light:hover { box-shadow: 0 10px 22px -14px rgba(0,0,0,.5); }

/* section heads carry a short ochre rule — the editorial marker */
.sechead::before { content: ""; display: block; width: 34px; height: 2px; background: var(--ochre); margin-bottom: 18px; }

/* cards: lift, a soft shadow, and an ochre rule that draws across the top */
.block { position: relative; transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
a.block::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ochre);
  transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease);
}
a.block:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(12,14,18,.4); z-index: 1; }
a.block:hover::after { transform: scaleX(1); }
.vcard:hover { border-left-color: var(--ochre); }
/* the sixth card in 'What we do' is the enquiry route — same card, ochre edge */
.vcard-team { border-left-color: var(--ochre); }
.vcard-team .blocklink { color: var(--ochre-deep); }
a.vcard-team:hover h3 { color: var(--ochre-deep); }
.block .blocklink { display: inline-flex; align-items: center; gap: 7px; transition: color .2s ease; }
.block .blocklink::after {
  content: ""; width: 12px; height: 1px; background: currentColor; position: relative;
  transition: width .3s var(--ease);
}
a.block:hover .blocklink::after { width: 20px; }

/* dark grids */
.stats > div, .marketgrid > div { transition: background-color .3s ease; }
.stats > div:hover { background: #272D35; }
.marketgrid > div:hover { background: #272D35; }
.marketgrid > div.lead:hover { background: #2C333C; }
.sec-deep { position: relative; background-image: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(198,132,27,.09), transparent 60%); }

/* steps and accordion */
.steps li { transition: background-color .25s ease; }
.steps li:hover::before { color: var(--ochre); }
.acc summary { transition: color .2s ease; }
.acc summary::after { transition: color .2s ease, transform .3s var(--ease); }
.acc details[open] summary::after { color: var(--indigo-lift); }

/* forms */
.field input, .field select, .field textarea { transition: border-color .2s ease, outline-color .2s ease; }

/* cta band: a warm glow in the corner and the technical grid, very faint */
.ctaband { position: relative; overflow: hidden; isolation: isolate; }
.ctaband::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 50% 90% at 100% 0%, rgba(198,132,27,.16), transparent 60%),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 72px 72px;
}

/* footer */
.foot { position: relative; }
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--ochre), rgba(198,132,27,.3) 30%, transparent 70%);
}
.foot a { transition: color .2s ease; }
.foot .social a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease, transform .25s ease;
}
.foot .social a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.foot .social svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; transition: color .25s ease; }
.foot .social a:hover { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.05); transform: translateY(-1px); }
.foot .social a.s-in:hover svg { color: #0A66C2; }
.foot .social a.s-ig:hover svg { color: #E1306C; }
.foot .social a.s-yt:hover svg { color: #FF0000; }
.foot .legal .credit { margin-left: 6px; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.14); color: #A8AEB7; white-space: nowrap; }
.foot .legal .credit a {
  color: #fff; font-weight: 600;
  text-decoration: underline; text-decoration-color: #E3342F; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.foot .legal .credit a:hover { color: #FF6B5E; text-decoration-color: #FF6B5E; }
@media (max-width: 560px) { .foot .legal .credit { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; } }

/* whatsapp: steps aside at the top of the page and over the footer */
.wa { transition: opacity .35s ease, transform .35s ease, background-color .2s ease; }
.wa.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* ---------------------------------------------------------------- scroll reveal */
/* data-reveal = fade-up | fade-in | scale | clip.  --rd staggers children. */

html.js-reveal [data-reveal] {
  opacity: 0;
  transition: opacity .8s var(--ease), transform .8s var(--ease), clip-path .9s var(--ease);
  transition-delay: var(--rd, 0ms);
}
html.js-reveal [data-reveal="fade-up"] { transform: translateY(22px); }
html.js-reveal [data-reveal="scale"] { transform: translateY(14px) scale(.975); }
html.js-reveal [data-reveal="clip"] { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(10px); }
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; }
  *, *::before, *::after { animation-iteration-count: 1 !important; }
}

/* ---------------------------------------------------------------- inner page photography */
/* The photograph sits on the right and fades into the indigo on the left,
   so the heading always reads. A slow drift on load, nothing on scroll. */

.pagehead.has-media { min-height: clamp(300px, 34vw, 420px); display: flex; align-items: center; }
.pagehead.has-media > .wrap { width: 100%; }
.pagehead-media { position: absolute; inset: 0; left: 38%; z-index: -2; overflow: hidden; }
.pagehead-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  animation: drift 10s var(--ease) both;
}
.pagehead-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--indigo) 0%, rgba(30,35,41,.94) 18%, rgba(30,35,41,.55) 48%, rgba(30,35,41,.28) 78%, rgba(30,35,41,.42) 100%),
    linear-gradient(180deg, rgba(20,23,28,.25) 0%, transparent 40%, rgba(20,23,28,.6) 100%);
}
.pagehead.has-media h1, .pagehead.has-media .lede { text-shadow: 0 1px 24px rgba(12,14,18,.35); }
.pagehead.has-media .lede { max-width: 48ch; }
@keyframes drift { from { transform: scale(1.07) translateX(1.5%); } to { transform: none; } }

@media (max-width: 900px) {
  .pagehead-media { left: 0; }
  .pagehead-media::after {
    background:
      linear-gradient(90deg, rgba(30,35,41,.96) 0%, rgba(30,35,41,.86) 55%, rgba(30,35,41,.72) 100%),
      linear-gradient(180deg, rgba(20,23,28,.2), rgba(20,23,28,.5));
  }
  .pagehead.has-media { min-height: 0; }
}

/* ---------------------------------------------------------------- editorial refinements */

/* the first paragraph after a section heading reads as a lead */
.cols2 > div > h2 + p, .cols-side > div > h2 + p, .sec .wrap > h2 + p { font-size: 1.12rem; line-height: 1.6; color: #2A2F37; }

/* method strip and stat tiles respond to the pointer */
.method > div { transition: background-color .3s ease, transform .3s ease; }
.method > div:hover { background: #fff; transform: translateY(-2px); }
.method > div:hover b { color: var(--ochre); }
.steps li::before { transition: color .25s ease, transform .25s ease; }
.steps li:hover::before { transform: translateX(2px); }

/* ledgers and lists pick up the ochre marker on hover */
.ledger div { transition: background-color .25s ease; }
.ledger div:hover { background: rgba(198,132,27,.05); }
.hublist li::before, ul.ticks li::before { transition: width .3s var(--ease), background-color .3s ease; }
.hublist li:hover::before, ul.ticks li:hover::before { width: 14px; }

/* callouts get the glow treatment used elsewhere */
.callout { position: relative; overflow: hidden; }
.callout::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,132,27,.12), transparent 70%); pointer-events: none;
}

/* form panels */
.formwrap { box-shadow: 0 30px 60px -48px rgba(12,14,18,.35); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(198,132,27,.12); }

/* ---------------------------------------------------------------- hero, refined */
/* Full-viewport cinematic hero. Amber accent, tighter Swiss-style type,
   rounded glass cards joined by a thin connection line, blurred foreground. */

:root { --amber: #D9952A; --amber-deep: #B87611; }

.hero { min-height: min(calc(100svh - 114px), 920px); padding-top: clamp(40px, 5.5vw, 72px); }

.hero-shade {
  background:
    linear-gradient(90deg, rgba(10,12,16,.92) 0%, rgba(10,12,16,.80) 26%, rgba(10,12,16,.42) 54%, rgba(10,12,16,.12) 78%, rgba(10,12,16,.26) 100%),
    linear-gradient(180deg, rgba(10,12,16,.22) 0%, transparent 24%, transparent 60%, rgba(10,12,16,.80) 100%);
  box-shadow: inset 0 0 180px 20px rgba(0,0,0,.34);
}
/* blurred copy of the photograph, masked to the fabric rolls in the foreground */
.hero-img-blur {
  filter: blur(4px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 10%, transparent 30%);
          mask-image: linear-gradient(to top, #000 0%, #000 10%, transparent 30%);
}
/* grid drifts on its own layer so the pointer parallax on .hero-grid is untouched */
.hero-grid { background-image: none; -webkit-mask-image: none; mask-image: none; opacity: 1; }
.hero-grid::before {
  content: ""; position: absolute; inset: -72px;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.18) .8px, transparent 1.6px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 72px 72px; background-position: -36px -36px, 0 0, 0 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 45%, transparent 80%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 45%, transparent 80%);
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(72px,72px,0); } }

.hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 48px; }
.hero-copy { max-width: 620px; }

.badge { font-size: 12px; color: #CFD5DF; margin-bottom: 30px; }
.badge-dot { background: var(--amber); }

.hero-title { font-size: clamp(2.4rem, 5.6vw, 4.25rem); line-height: 1.0; letter-spacing: -0.032em; margin-bottom: 26px; max-width: 11ch; }
.hdot { background: var(--amber); width: .18em; height: .18em; margin: 0 .16em; top: -.08em; }
.hero .lede { color: rgba(240,242,245,.78); max-width: 46ch; font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height: 1.65; }

.btn-hero { background: linear-gradient(115deg, #E4A138 0%, var(--amber) 48%, var(--amber-deep) 100%); background-size: 200% 100%; border-radius: 6px; padding: 13px 22px; }
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(217,149,42,.75), 0 0 0 1px rgba(217,149,42,.35); }
.btn-glass { background: rgba(14,17,23,.38); border-color: rgba(255,255,255,.28); border-radius: 6px; padding: 13px 22px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.btn-glass:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.signal::after { background: linear-gradient(90deg, transparent, var(--amber), transparent); }

/* cards: rounded glass, joined by a thin amber line */
.hero-cards { margin-bottom: -108px; }
.hero-cards-float { position: relative; display: grid; gap: 14px; justify-items: end; width: 100%; animation: floaty 9s ease-in-out infinite 2.2s; }
.hcard {
  width: min(100%, 284px); padding: 16px 20px 16px 18px; gap: 13px; border-radius: 12px;
  background: rgba(22,26,34,.52); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 60px -32px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  animation: fadeUpScale .85s var(--ease) both; animation-fill-mode: both;
  transition: border-color .3s ease, background-color .3s ease;
}
.hcard:hover { border-color: rgba(217,149,42,.45); background: rgba(22,26,34,.62); }
.hcard:nth-child(2) { animation-delay: 1.05s; margin-right: 14%; }
.hcard:nth-child(3) { animation-delay: 1.2s; margin-right: 0; }
.hcard:nth-child(4) { animation-delay: 1.35s; margin-right: 24%; }
.hcard-ind { width: 8px; height: 8px; margin-top: 5px; background: var(--amber); box-shadow: 0 0 0 3px rgba(217,149,42,.16); animation: breathe 3.6s ease-in-out infinite; }
.hcard b { font-size: 14.5px; margin-bottom: 4px; }
.hcard span { font-size: 12.5px; color: #B3BAC6; line-height: 1.5; }

.hero-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hero-links path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-links-base { stroke: rgba(217,149,42,.38); stroke-width: 1; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 1.6s var(--ease) both 1.5s; }
.hero-links-pulse { stroke: rgba(228,161,56,.9); stroke-width: 1.5; stroke-dasharray: 26 1000; stroke-dashoffset: 1026; animation: pulseLine 5s cubic-bezier(.4,0,.2,1) infinite 3s; opacity: .9; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes pulseLine { to { stroke-dashoffset: 0; } }

/* bottom strip with a travelling progress line, and the explore cue */
.hero-foot { border-top-color: rgba(255,255,255,.12); padding-top: 22px; }
.hero-foot::before {
  content: ""; position: absolute; top: -1px; left: 24px; width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  animation: progressLine 7s cubic-bezier(.45,0,.2,1) infinite 2s;
}
@keyframes progressLine { 0% { transform: translateX(-120px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(var(--wrap) - 48px)); opacity: 0; } }
.trust li { color: #A6AEBB; }
.trust li:hover svg { color: var(--amber); }

.scrollcue { flex-direction: row; gap: 10px; color: #A6AEBB; font-size: 10.5px; letter-spacing: .2em; }
.scrollcue svg { width: 14px; height: 14px; fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-2px); opacity: .7; } 50% { transform: translateY(3px); opacity: 1; } }

@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero-cards { margin-bottom: 0; }
  .hero-cards-float { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: stretch; gap: 10px; animation: none; }
  .hero-links { display: none; }
  .hcard { width: auto; margin: 0 !important; }
  .hero-img-blur { display: none; }
}
@media (max-width: 680px) {
  .hero-cards-float { grid-template-columns: 1fr 1fr; }
  .hcard:nth-child(4) { grid-column: 1 / -1; }
  .hero-foot::before { display: none; }
}

/* ---------------------------------------------------------------- hero, composed */
/* The photograph is left clean. Facts live in one glass bar at the base. */

.hero { padding-top: clamp(36px, 5vw, 64px); }
.hero-inner { grid-template-columns: 1fr; }
.hero-copy { max-width: 640px; }

.hero-title { font-size: clamp(2.5rem, 5.6vw, 4.5rem); max-width: 12ch; }
.hero-title .line-light > span { font-weight: 500; color: rgba(255,255,255,.82); letter-spacing: -0.025em; }
.hero .lede { max-width: 50ch; }

.hero-foot { border-top: 0; padding-top: 0; padding-bottom: 28px; margin-top: clamp(40px, 6vw, 64px); display: block; }
.hero-foot::before { display: none; }

.hero-bar {
  display: flex; align-items: center; gap: 0;
  background: rgba(14,17,23,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 30px 60px -36px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 6px 22px 6px 6px;
  animation: fadeUp .8s var(--ease) both 1.1s;
  position: relative; overflow: hidden;
}
.hero-bar::before {
  content: ""; position: absolute; top: 0; left: 0; width: 140px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  animation: barLine 8s cubic-bezier(.45,0,.2,1) infinite 2.5s;
}
@keyframes barLine { 0% { transform: translateX(-140px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(1200px); opacity: 0; } }

.hstat { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-right: 1px solid rgba(255,255,255,.1); }
.hstat b { font-family: var(--sans); font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -0.04em; line-height: 1; }
.hstat b i { font-style: normal; color: var(--amber); }
.hstat span { font-family: var(--sans); font-size: 12.5px; color: #A6AEBB; line-height: 1.3; max-width: 14ch; }
.hero-bar .trust { flex: 1; gap: 8px 22px; padding: 0 8px 0 24px; }
.hero-bar .trust li { font-size: 12.5px; animation: none; }
.hero-bar .scrollcue { margin-left: auto; padding-left: 20px; animation: none; }

@media (max-width: 1080px) {
  .hero-bar { flex-wrap: wrap; padding: 6px; }
  .hstat { flex: 1 1 33%; border-right: 0; padding: 12px 16px; }
  .hero-bar .trust { flex: 1 1 100%; padding: 12px 16px 14px; border-top: 1px solid rgba(255,255,255,.1); }
  .hero-bar .scrollcue { display: none; }
}
@media (max-width: 680px) {
  .hero-title { max-width: none; }
  .hstat { flex: 1 1 50%; }
  .hstat:nth-child(3) { flex-basis: 100%; }
  .hero-foot { flex-direction: column; gap: 0; }
}

/* market grid: a small flag or region badge in each cell */
.marketgrid > div { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: start; }
.marketgrid > div b { grid-column: 1; }
.marketgrid > div span { grid-column: 1; }
.mflag { grid-column: 2; grid-row: 1 / 3; width: 42px; height: 28px; border-radius: 4px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 14px -8px rgba(0,0,0,.7); flex-shrink: 0; transition: transform .3s var(--ease), border-color .3s ease; }
.marketgrid > div:hover .mflag { transform: translateY(-2px) scale(1.04); border-color: rgba(255,255,255,.3); }

/* ---------------------------------------------------------------- dynamic content */

.announce { background: var(--ochre); color: #1B1305; font-family: var(--sans); font-size: 13px; font-weight: 600; text-align: center; }
.announce .wrap { padding-top: 8px; padding-bottom: 8px; }

/* testimonials */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.tcard { margin: 0; background: var(--paper); padding: 28px 26px 26px; position: relative; }
.tcard::before { content: "\201C"; position: absolute; top: 14px; left: 22px; font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--ochre); opacity: .35; }
.tcard p { font-size: 16.5px; line-height: 1.6; color: #2A2F37; margin: 18px 0 18px; max-width: none; }
.tcard footer { font-family: var(--sans); font-size: 13px; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 12px; }
.tcard footer b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.tcard footer span { display: block; }
@media (max-width: 980px) { .tgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tgrid { grid-template-columns: 1fr; } }

/* article body */
.article { max-width: 70ch; }
.article h2 { font-size: 1.45rem; margin: 1.6em 0 .5em; }
.article h3 { font-size: 1.12rem; margin: 1.4em 0 .4em; }
.article p, .article li { font-size: 17.5px; line-height: 1.72; max-width: none; }
.article ul { padding-left: 20px; margin: 0 0 1.2em; }
.article li { margin-bottom: .4em; }
.article blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--ochre); color: #2A2F37; font-size: 1.1em; }
.article a { color: var(--indigo-lift); }

/* ---------------------------------------------------------------- hero typography, editorial */
/* Serif italic against bold sans, a tracked kicker, an amber rule that
   draws under the last line, a hairline lede and a direct phone line. */

.hero .kicker-line {
  background: none; border: 0; padding: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #A9B0BB; gap: 12px; margin-bottom: 34px;
}
.hero .kicker-line:hover { background: none; border: 0; }
.hero .kicker-line .badge-sep { width: 26px; height: 1px; background: rgba(217,149,42,.7); }
.hero .kicker-line span:nth-child(2) { color: #E8EBEF; }

.hero-title { font-size: clamp(2.6rem, 5.8vw, 4.7rem); line-height: .98; letter-spacing: -0.035em; max-width: none; margin-bottom: 30px; }
.hero-title .line-serif { padding-bottom: .1em; margin-bottom: -.02em; }
.hero-title .line-serif > span {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .94em;
  letter-spacing: -0.012em; color: rgba(255,255,255,.92); padding-right: .08em;
}
.hero-title .ul { position: relative; display: inline-block; padding-bottom: .04em; }
.hero-title .ul::after {
  content: ""; position: absolute; left: .04em; right: .06em; bottom: 0; height: .06em; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber), rgba(217,149,42,.35));
  transform: scaleX(0); transform-origin: left center;
  animation: ruleIn .9s var(--ease) both 1.35s;
}
@keyframes ruleIn { to { transform: scaleX(1); } }
.hdot { background: var(--amber); }

.hero .lede-rule { position: relative; padding-left: 22px; margin-left: 4px; color: rgba(236,239,243,.8); font-size: clamp(1.02rem, 1.45vw, 1.14rem); max-width: 46ch; }
.hero .lede-rule::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 2px; background: linear-gradient(180deg, var(--amber), rgba(217,149,42,.15)); border-radius: 2px; }

.hero .btnrow { gap: 14px; margin-top: 34px; }
.hero-call {
  display: inline-flex; align-items: center; gap: 9px; margin-left: 6px;
  font-family: var(--sans); font-size: 13.5px; color: #A9B0BB; text-decoration: none;
  transition: color .3s ease;
}
.hero-call svg { width: 15px; height: 15px; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-call b { color: #fff; font-weight: 600; letter-spacing: .01em; border-bottom: 1px solid rgba(255,255,255,.25); transition: border-color .3s ease; }
.hero-call:hover { color: #fff; }
.hero-call:hover b { border-bottom-color: var(--amber); }
.signal { display: none; }

@media (max-width: 680px) {
  .hero-title { font-size: clamp(2.3rem, 11vw, 2.9rem); }
  .hero .kicker-line { letter-spacing: .12em; font-size: 11px; }
  .hero-call { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- mega menu, rebuilt */
/* Full width of the masthead. Five services with thumbnails in a 3 + 2
   layout, and the routing aside as a graphite panel on the right. */

.masthead .wrap { position: relative; }
.masthead .has-mega { position: static; }
.mega {
  left: 0; right: 0; width: auto; top: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
  gap: 0; padding: 0;
  border: 1px solid var(--line); border-top: 2px solid var(--ochre);
  box-shadow: 0 30px 60px -30px rgba(12,14,18,.45);
  overflow: hidden;
}
.mega > div { padding: 24px 26px 22px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.mega > div:nth-child(3n + 1) { }
.mega > div:not(.mega-aside):hover { background: #fff; }
.mega-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; margin-bottom: 14px; filter: saturate(.9); transition: filter .3s ease, transform .5s var(--ease); }
.mega > div:hover .mega-thumb { filter: saturate(1); transform: translateY(-1px); }
.mega .mega-h { font-size: 14.5px; margin-bottom: 5px; }
.mega .mega-h a { color: var(--ink); }
.mega .mega-h a::after { content: " \2192"; color: var(--ochre); opacity: 0; transition: opacity .2s ease; }
.mega > div:hover h4 a::after { opacity: 1; }
.mega p { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.mega ul { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.mega ul li { margin: 0; }
.mega ul a {
  display: inline-block; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--line-soft); border-radius: 999px;
  color: #363C45; transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.mega ul a:hover { text-decoration: none; border-color: var(--ochre); color: var(--ochre-deep); background: rgba(198,132,27,.06); }

.mega .mega-aside {
  grid-column: 4; grid-row: 1 / 3; border: 0; padding: 30px 28px;
  background: var(--indigo); color: #fff; position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
}
.mega .mega-aside::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 70% at 100% 0%, rgba(198,132,27,.22), transparent 62%),
    radial-gradient(circle, rgba(255,255,255,.14) .8px, transparent 1.6px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px, 48px 48px;
  background-position: 0 0, -24px -24px, 0 0, 0 0;
}
.mega .mega-aside h4 { color: #fff; font-size: 17px; letter-spacing: -.015em; margin-bottom: 8px; }
.mega .mega-aside p { color: #C9CDD4; font-size: 13.5px; }
.mega .mega-aside .btn { margin-top: 6px; }
.mega .mega-aside .mega-call { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; color: #9AA1AB; }
.mega .mega-aside .mega-call a { color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.3); }
.mega .mega-aside .mega-call a:hover { border-bottom-color: var(--ochre); }

@media (max-width: 1150px) {
  .nav.open .mega { grid-template-columns: 1fr; border: 0; box-shadow: none; }
  .nav.open .mega > div { padding: 14px 0; border-right: 0; }
  .nav.open .mega-thumb { display: none; }
  .nav.open .mega .mega-aside { grid-column: 1; grid-row: auto; padding: 18px 20px; border-radius: 4px; margin-top: 8px; }
}

/* mega menu: compact side thumbnails so the panel fits a laptop screen */
.mega > div:not(.mega-aside) { display: grid; grid-template-columns: 64px 1fr; gap: 6px 16px; align-content: start; padding: 20px 22px 18px; }
.mega-thumb { grid-row: 1 / 4; width: 64px; height: 64px; aspect-ratio: 1; margin: 0; border-radius: 6px; }
.mega .mega-h, .mega p, .mega ul { grid-column: 2; }
.mega p { margin-bottom: 6px; font-size: 12.5px; }
.mega ul a { font-size: 12px; padding: 3px 9px; }
.mega-all {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 20px 22px;
  text-decoration: none; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  background: var(--greige); transition: background-color .25s ease;
}
.mega-all:hover { background: var(--greige-deep); }
.mega-all b { font-family: var(--sans); font-size: 14.5px; color: var(--ink); }
.mega-all span { font-family: var(--sans); font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mega-all i { font-style: normal; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ochre-deep); margin-top: 4px; }
.mega .mega-aside { padding: 26px 26px; }
@media (max-width: 1150px) {
  .nav.open .mega > div:not(.mega-aside) { grid-template-columns: 1fr; padding: 12px 0; }
  .nav.open .mega-all { border: 0; background: none; padding: 12px 0; }
}

/* mega menu: edge-to-edge panel under the header, content aligned to the page grid */
.masthead .wrap { position: static; }
.mega {
  left: 0; right: 0; top: 100%;
  padding-left: max(24px, calc((100% - var(--wrap)) / 2));
  padding-right: max(24px, calc((100% - var(--wrap)) / 2));
  border-left: 0; border-right: 0;
  background: var(--paper);
}
.mega > div:not(.mega-aside):nth-child(3n + 1), .mega > div:not(.mega-aside):first-child { border-left: 1px solid var(--line-soft); }
.mega .mega-aside { border-right: 1px solid var(--line-soft); }
.mega > div:not(.mega-aside), .mega-all { min-height: 0; }
.mega > div:not(.mega-aside) { border-bottom: 1px solid var(--line-soft); }
.mega > div:nth-last-child(-n + 3):not(.mega-aside), .mega-all { border-bottom: 0; }

/* ---------------------------------------------------------------- section sub-navigation */
.subnav { background: var(--paper); border-bottom: 1px solid var(--line-soft); font-family: var(--sans); }
.subnav .wrap { display: flex; align-items: center; gap: 22px; min-height: 50px; }
.subnav-label { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-right: 22px; border-right: 1px solid var(--line-soft); }
.subnav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-links a {
  display: inline-block; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: #363C45; text-decoration: none;
  padding: 15px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s ease, border-color .2s ease;
}
.subnav-links a:hover { color: var(--ochre-deep); }
.subnav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ochre); }
@media (max-width: 760px) {
  .subnav .wrap { gap: 0; }
  .subnav-label { display: none; }
  /* the scroller bleeds to the screen edge, so it has to use the same
     gutter the wrap does */
  .subnav-links { margin: 0 calc(-1 * var(--gutter, 24px)); padding: 0 var(--gutter, 24px); }
}

/* ---------------------------------------------------------------- founder + photo bands */
.founder-figure { margin: 0 0 26px; }
.founder-figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; box-shadow: 0 30px 60px -40px rgba(12,14,18,.6); }
.founder-figure figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.founder-figure figcaption b { color: var(--ink); font-size: 14.5px; }
.sec-deep .founder-figure figcaption b { color: #fff; }
.sec-deep .founder-figure figcaption { color: #9AA1AB; }
.founder-strip { display: grid; grid-template-columns: 320px 1fr; gap: 34px; align-items: center; margin-top: 34px; }
.founder-strip .founder-figure { margin: 0; }
.founder-strip p { margin: 0; }
@media (max-width: 760px) { .founder-strip { grid-template-columns: 1fr; gap: 20px; } }

/* hero: lighter grade, as requested */
.hero-shade {
  background:
    linear-gradient(90deg, rgba(10,12,16,.80) 0%, rgba(10,12,16,.64) 26%, rgba(10,12,16,.28) 54%, rgba(10,12,16,.06) 78%, rgba(10,12,16,.16) 100%),
    linear-gradient(180deg, rgba(10,12,16,.12) 0%, transparent 24%, transparent 62%, rgba(10,12,16,.66) 100%);
  box-shadow: inset 0 0 140px 10px rgba(0,0,0,.22);
}
.hero-title, .hero .lede { text-shadow: 0 2px 24px rgba(10,12,16,.45); }

/* ---------------------------------------------------------------- mega menu, quiet */
/* Five columns in one row, text only. No thumbnails, no cell borders. */
.mega {
  grid-template-columns: repeat(5, minmax(0, 1fr)) 240px;
  padding-top: 30px; padding-bottom: 0;
  border-top: 1px solid var(--line-soft); box-shadow: 0 24px 48px -32px rgba(12,14,18,.35);
  gap: 0 28px;
}
.mega > div:not(.mega-aside) {
  display: block; padding: 0 0 26px; border: 0 !important; background: none !important;
}
.mega > div:not(.mega-aside):hover { background: none; }
.mega-thumb { display: none; }
.mega .mega-h { font-size: 14px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.mega .mega-h a::after { content: none; }
.mega p { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-bottom: 10px; }
.mega ul { display: block; }
.mega ul li { margin: 0; }
.mega ul a {
  display: block; font-size: 13px; padding: 4px 0; border: 0; border-radius: 0; background: none;
  color: #2A2F37; transition: color .2s ease, padding-left .2s var(--ease);
}
.mega ul a:hover { background: none; border: 0; color: var(--ochre-deep); padding-left: 6px; }

.mega .mega-aside {
  grid-column: 6; grid-row: 1; align-self: start; justify-content: flex-start;
  background: var(--greige); color: var(--ink); padding: 20px 22px 22px; border-radius: 4px; border: 0; margin-bottom: 26px;
}
.mega .mega-aside::before { content: none; }
.mega .mega-aside h4 { color: var(--ink); font-size: 14.5px; border: 0; padding: 0; margin-bottom: 6px; }
.mega .mega-aside p { color: var(--muted); font-size: 12.5px; }
.mega .mega-aside .btn { margin-top: 2px; padding: 10px 16px; font-size: 13.5px; }
.mega .mega-aside .mega-call { border-top: 1px solid var(--line); color: var(--muted); margin-top: 12px; padding-top: 12px; }
.mega .mega-aside .mega-call a { color: var(--ink); border-bottom-color: rgba(21,24,29,.25); }

.mega-all {
  grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: center; gap: 14px;
  padding: 14px 0; border: 0; border-top: 1px solid var(--line-soft); background: none;
}
.mega-all:hover { background: none; }
.mega-all b { font-size: 13.5px; }
.mega-all span { font-size: 12.5px; }
.mega-all i { margin: 0 0 0 auto; }

@media (max-width: 1150px) {
  .nav.open .mega { grid-template-columns: 1fr; padding-top: 6px; box-shadow: none; }
  .nav.open .mega > div:not(.mega-aside) { padding: 12px 0; }
  .nav.open .mega .mega-aside { grid-column: 1; grid-row: auto; margin: 8px 0 0; }
  .nav.open .mega-all { grid-column: 1; grid-row: auto; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- mega menu, polish */
.mega { counter-reset: svc; padding-top: 22px; border-top: 0; }
.mega::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--ochre) 0%, rgba(198,132,27,.45) 40%, rgba(198,132,27,.08) 100%);
}
.mega > div:not(.mega-aside) {
  counter-increment: svc; position: relative;
  padding: 16px 16px 22px !important; margin: 0 -16px 26px; border-radius: 6px;
  transition: background-color .25s ease;
}
.mega > div:not(.mega-aside):hover { background: var(--greige) !important; }
.mega > div:not(.mega-aside)::before {
  content: "0" counter(svc); display: block;
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--ochre);
  margin-bottom: 10px;
}
.mega .mega-h { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; font-size: 14.5px; letter-spacing: -.01em; }
.mega .mega-h a { position: relative; display: inline-block; }
.mega .mega-h a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--ochre); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.mega > div:hover h4 a::after { transform: scaleX(1); }
.mega p { margin-bottom: 12px; }
.mega ul { border-top: 1px solid var(--line-soft); padding-top: 8px; }
.mega ul a { position: relative; padding-left: 14px; color: #363C45; }
.mega ul a::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 1px; background: var(--line); transition: width .25s var(--ease), background-color .25s ease; }
.mega ul a:hover { padding-left: 18px; }
.mega ul a:hover::before { width: 11px; background: var(--ochre); }

.mega .mega-aside { position: relative; overflow: hidden; background: var(--greige); padding: 22px 22px 22px 24px; }
.mega .mega-aside::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ochre); }
.mega .mega-aside::after { content: ""; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(198,132,27,.16), transparent 70%); pointer-events: none; }
.mega .mega-aside h4 { font-size: 15px; }
.mega .mega-aside .btn { display: inline-flex; align-items: center; gap: 8px; }
.mega .mega-aside .btn::after { content: "\2192"; transition: transform .25s var(--ease); }
.mega .mega-aside .btn:hover::after { transform: translateX(4px); }

.mega-all { padding: 14px 0 18px; }
.mega-all i { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; transition: border-color .25s ease, background-color .25s ease; }
.mega-all:hover i { border-color: var(--ochre); background: rgba(198,132,27,.06); }

/* staggered entrance when the menu opens */
.mega[data-open="true"] > * { animation: fadeUp .45s var(--ease) both; }
.mega[data-open="true"] > :nth-child(1) { animation-delay: .04s; }
.mega[data-open="true"] > :nth-child(2) { animation-delay: .08s; }
.mega[data-open="true"] > :nth-child(3) { animation-delay: .20s; }
.mega[data-open="true"] > :nth-child(4) { animation-delay: .12s; }
.mega[data-open="true"] > :nth-child(5) { animation-delay: .16s; }
.mega[data-open="true"] > :nth-child(6) { animation-delay: .20s; }
.mega[data-open="true"] > :nth-child(7) { animation-delay: .26s; }

@media (max-width: 1150px) {
  .nav.open .mega > div:not(.mega-aside) { margin: 0; padding: 12px 0 !important; }
  .nav.open .mega > div:not(.mega-aside):hover { background: none !important; }
  .nav.open .mega::before { display: none; }
}

/* page headers: no grade over the photograph — only a short blend at its left edge */
.pagehead-media { left: 42%; }
.pagehead-media::after {
  background: linear-gradient(90deg, var(--indigo) 0%, rgba(30,35,41,.7) 7%, rgba(30,35,41,0) 22%);
  box-shadow: none;
}
.pagehead::before {
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 30%, transparent 55%);
}
@media (max-width: 900px) {
  .pagehead-media { left: 0; }
  .pagehead-media::after { background: linear-gradient(90deg, rgba(30,35,41,.9) 0%, rgba(30,35,41,.78) 60%, rgba(30,35,41,.6) 100%); }
}

/* page headers: no gradient on the photograph at all */
.pagehead-media::after { display: none; }
.pagehead.has-media h1, .pagehead.has-media .lede { text-shadow: none; }

/* clip reveal: the figure stays observable; only the image inside is clipped */
html.js-reveal [data-reveal="clip"] { opacity: 1; transform: none; clip-path: none; transition: none; }
html.js-reveal [data-reveal="clip"] > img { clip-path: inset(0 0 100% 0); transform: scale(1.04); transition: clip-path .9s var(--ease), transform 1.3s var(--ease); }
html.js-reveal [data-reveal="clip"].is-in > img { clip-path: inset(0 0 0 0); transform: none; }

/* contact map */
.contact-map { margin-top: 22px; border: 1px solid var(--line-soft); background: var(--greige-deep); overflow: hidden; border-radius: 4px; }
.contact-map iframe { display: block; width: 100%; height: 380px; border: 0; filter: saturate(.85) contrast(1.02); }

/* intro split: text beside a photograph */
.intro-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.intro-text p { max-width: 62ch; }
.intro-text p:last-child { margin-bottom: 0; }
.intro-figure { margin: 0; }
.intro-figure img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; box-shadow: 0 30px 60px -40px rgba(12,14,18,.5); }
@media (max-width: 900px) { .intro-split { grid-template-columns: 1fr; gap: 26px; } }

/* product page headers: still-life photos are centred subjects */
.pagehead-media img[src*='prod-'] { object-position: center 55%; }

/* ---------------------------------------------------------------- page headers: full-bleed photo, copy on a glass panel */
.pagehead.has-media { min-height: clamp(340px, 38vw, 460px); padding: clamp(44px, 6vw, 72px) 0; }
.pagehead-media { left: 0; }
.pagehead-media img { object-position: center 45%; }
.pagehead-media img[src*='prod-'] { object-position: center 50%; }
.pagehead::before { display: none; }
.pagehead.has-media .wrap { position: relative; }
.pagehead.has-media .wrap::before {
  content: ""; position: absolute; left: 24px; top: -28px; bottom: -30px; width: min(100% - 48px, 680px);
  background: rgba(12,14,18,.56); border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.6);
}
.pagehead.has-media .wrap > * { position: relative; margin-left: 32px; margin-right: 32px; max-width: 584px; }
.pagehead.has-media h1 { max-width: 16ch; }
.pagehead.has-media .lede { max-width: 44ch; }
.pagehead.has-media .kicker { margin-left: 32px; }
@media (max-width: 900px) {
  .pagehead-media::after { display: none; }
  .pagehead.has-media .wrap::before { left: 16px; width: calc(100% - 32px); }
  .pagehead.has-media .wrap > * { margin-left: 22px; margin-right: 22px; }
}

/* keep centred subjects clear of the copy panel: scale from the left edge so the middle of the photo moves right */
.pagehead-media { animation: drift 10s var(--ease) both; overflow: hidden; }
.pagehead-media img { animation: none; transform: scale(1.22); transform-origin: 0 50%; }
@media (max-width: 900px) { .pagehead-media img { transform: none; } }
/* framing: keep faces (upper third) in the wide header; still-life products stay centred */
.pagehead-media img { object-position: center 22%; transform-origin: 0 18%; }
.pagehead-media img[src*='prod-'] { object-position: center 50%; transform-origin: 0 50%; }
.pagehead-media img[src*='hero-warehouse'] { object-position: center 35%; transform-origin: 0 35%; }
.pagehead.has-media .wrap::before { width: min(100% - 48px, 620px); }
.pagehead.has-media .wrap > * { max-width: 540px; }
.pagehead.has-media h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.pagehead-media img { transform: scale(1.32); }
.pagehead-media img[src*='prod-'] { transform: scale(1.12); }
@media (max-width: 900px) { .pagehead-media img, .pagehead-media img[src*='prod-'] { transform: none; } }

/* ---------------------------------------------------------------- hero, art direction */
/* Copy held to the left 40%; muted-navy grade; a faint logistics network
   drawn in the dark area; a squarer metallic information bar. */
.hero-copy { max-width: min(600px, 42vw); }
@media (max-width: 1080px) { .hero-copy { max-width: none; } }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(11,14,20,.84) 0%, rgba(11,14,20,.68) 24%, rgba(11,14,20,.30) 50%, rgba(11,14,20,.06) 72%, rgba(11,14,20,.14) 100%),
    linear-gradient(180deg, rgba(11,14,20,.14) 0%, transparent 22%, transparent 62%, rgba(11,14,20,.64) 100%);
}
.hero-net { position: absolute; left: 0; top: 0; width: 42%; height: 100%; pointer-events: none; opacity: .55; }
.hero-net-line { fill: none; stroke: rgba(217,149,42,.35); stroke-width: 1; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawLine 2.6s var(--ease) both 1.2s; }
.hero-net-dots circle { fill: rgba(255,255,255,.45); opacity: 0; animation: fadeIn .6s ease both 2.4s; }
.hero-net-pulse { fill: none; stroke: var(--amber); stroke-width: 1; opacity: 0; animation: netPulse 4s ease-out infinite 3s; }
@keyframes netPulse { 0% { r: 3; opacity: .8; } 100% { r: 22; opacity: 0; } }
@media (max-width: 1080px) { .hero-net { display: none; } }

.hero-bar { border-radius: 6px; background: linear-gradient(180deg, rgba(20,24,31,.62), rgba(12,15,20,.7)); border-color: rgba(255,255,255,.14); box-shadow: 0 30px 60px -36px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08); }
.hstat b { font-size: 28px; }
.hero-title { margin-bottom: 28px; }
.hero .kicker-line { margin-bottom: 36px; }

/* five cards in a three-column grid: last row becomes two wider cards, no empty cell */
.blocks-3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.blocks-3:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
.blocks-3:has(> :nth-child(5):last-child) > :nth-child(4),
.blocks-3:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: span 3; }
@media (max-width: 980px) {
  .blocks-3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the fourth card carries its own span above, so it needs its own reset —
     without it the card keeps spanning three columns and the row runs off
     the side of a phone screen */
  .blocks-3:has(> :nth-child(5):last-child) > *,
  .blocks-3:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: auto; }
  .blocks-3:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .blocks-3:has(> :nth-child(5):last-child) { grid-template-columns: 1fr; }
  .blocks-3:has(> :nth-child(5):last-child) > :nth-child(4),
  .blocks-3:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: auto; }
}

/* ---------------------------------------------------------------- brand logo */
.brand { gap: 12px; }
.brand .mark { width: auto; height: 44px; flex-shrink: 0; }
.brand .wordmark { width: auto; height: 30px; display: block; }
.foot-logo { display: inline-block; margin-bottom: 14px; }
.foot-logo img { width: 220px; height: auto; display: block; }
@media (max-width: 520px) { .brand .mark { height: 38px; } .brand .wordmark { height: 26px; } }

/* footer logo: horizontal white lockup */
.foot-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.foot-logo .mark { width: auto; height: 46px; }
.foot-logo .wordmark { width: auto; height: 30px; }

/* hero: slow crossfade between four photographs (28s cycle, 7s each) */
.hero-slide { opacity: 0; animation: heroFade 28s ease-in-out infinite; }
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 7s; }
.hero-slide:nth-child(3) { animation-delay: 14s; }
.hero-slide:nth-child(4) { animation-delay: 21s; }
@keyframes heroFade { 0% { opacity: 0; } 6% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }
.hero-slide:nth-child(1) { animation-name: heroFadeFirst; }
@keyframes heroFadeFirst { 0% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 94% { opacity: 0; } 100% { opacity: 1; } }
.hero-img-blur { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-slide { animation: none; } .hero-slide:first-child { opacity: 1; } }

/* one dark for the footer (matches the utility bar); the CTA band steps up to graphite */
.ctaband { background: var(--indigo); }
.foot { background: var(--indigo-deep); }
.foot::before { background: rgba(255,255,255,.08); }
.foot .cols { padding-top: clamp(44px, 5.5vw, 64px); }
.icard .vimg img { object-position: center 30%; }
.icard:hover .vimg img { transform: scale(1.03); }

/* navigation: only one underline at a time — the open menu or the hovered item takes it over from the current page */
.nav a.navlink:hover, .megabtn:hover { border-bottom-color: var(--ochre); }
.nav > ul:has(.megabtn[aria-expanded="true"]) a.navlink[aria-current="page"],
.nav > ul:has(.megabtn[aria-expanded="true"]) li.on > a.navlink,
.nav > ul:hover a.navlink[aria-current="page"]:not(:hover),
.nav > ul:hover li.on > a.navlink:not(:hover) { border-bottom-color: transparent; }
.nav > ul:has(.megabtn[aria-expanded="true"]) li.on > .megabtn { border-bottom-color: var(--ochre); }
@media (max-width: 1150px) { .nav.open a.navlink[aria-current="page"] { border-bottom-color: var(--line-soft); color: var(--ochre-deep); } }

/* cta band: no grid lines, just the warm corner glow */
.ctaband::before { background: radial-gradient(ellipse 50% 90% at 100% 0%, rgba(198,132,27,.14), transparent 60%); background-size: auto; }

/* hero slides: 4 seconds each, 16-second loop */
.hero-slide { animation-duration: 16s; }
.hero-slide:nth-child(2) { animation-delay: 4s; }
.hero-slide:nth-child(3) { animation-delay: 8s; }
.hero-slide:nth-child(4) { animation-delay: 12s; }
@keyframes heroFade { 0% { opacity: 0; } 6% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }
@keyframes heroFadeFirst { 0% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 94% { opacity: 0; } 100% { opacity: 1; } }

/* ---------------------------------------------------------------- hero typography, final */
.hero-copy { position: relative; }
.hero-copy::before {
  content: ""; position: absolute; left: -70px; top: -30px; width: 380px; height: 380px; pointer-events: none;
  background: url("../img/logo-mark-white.png") no-repeat center / contain;
  opacity: .05; animation: fadeIn 1.6s ease both .6s;
}
.hero .kicker-line { margin-bottom: 30px; }
.hero-title { font-size: clamp(2.6rem, 5.9vw, 4.9rem); letter-spacing: -0.04em; line-height: .96; margin-bottom: 30px; }
.hero-title .line-serif > span { font-size: .88em; letter-spacing: -0.01em; color: rgba(255,255,255,.88); padding-bottom: .04em; }
.hero-title .line > span { text-shadow: 0 2px 30px rgba(8,10,14,.5); }
.hdia { border-radius: 2px; transform: rotate(45deg) scale(1); width: .17em; height: .17em; margin: 0 .2em; top: -.1em; }
.hdia { animation: diaIn .55s cubic-bezier(.3,1.5,.5,1) both 1.15s, dotGlow 4.4s ease-in-out infinite 1.7s; animation-fill-mode: both, none; }
@keyframes diaIn { from { transform: rotate(45deg) scale(0); } to { transform: rotate(45deg) scale(1); } }
.hero-title .ul::after { height: .05em; bottom: -.02em; background: linear-gradient(90deg, var(--amber) 0%, var(--amber) 55%, rgba(217,149,42,.15) 100%); }

.hero .lede-rule { font-size: clamp(1.04rem, 1.5vw, 1.18rem); line-height: 1.7; color: rgba(226,230,236,.72); max-width: 48ch; padding-left: 24px; }
.hero .lede-rule strong { font-weight: 600; color: #fff; }
.hero .lede-rule::before { width: 2px; background: var(--amber); opacity: .8; }
.hero .btnrow { margin-top: 36px; }
@media (max-width: 1080px) { .hero-copy::before { display: none; } }
.hero-copy::before { opacity: .045; animation: wmIn 1.8s ease both .8s; left: -110px; top: -40px; width: 420px; height: 420px; }
@keyframes wmIn { from { opacity: 0; } to { opacity: .045; } }

/* card images: one fixed height across a grid, whatever the card width */
.blocks .vimg img { aspect-ratio: auto; height: 210px; }
@media (max-width: 980px) { .blocks .vimg img { height: 190px; } }
@media (max-width: 640px) { .blocks .vimg img { height: 200px; } }

/* ---------------------------------------------------------------- hero legibility */
.hero-title .line > span { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35); }
.hero-title .line-serif > span { color: #fff; }
.hero-title { color: #fff; }
.hero .lede-rule { color: #F1F3F6; text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.3); }
.hero .lede-rule strong { color: #fff; }
.hero .kicker-line { color: #D9DEE6; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.hero .kicker-line span:nth-child(2) { color: #fff; }
.hero-call { color: #D9DEE6; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.hero-copy::before { opacity: .03; }
@keyframes wmIn { from { opacity: 0; } to { opacity: .03; } }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(11,14,20,.90) 0%, rgba(11,14,20,.78) 26%, rgba(11,14,20,.40) 52%, rgba(11,14,20,.08) 74%, rgba(11,14,20,.14) 100%),
    linear-gradient(180deg, rgba(11,14,20,.16) 0%, transparent 22%, transparent 62%, rgba(11,14,20,.66) 100%);
}

/* method strip with step photographs */
.method > div { position: relative; }
.step-img { margin: -20px -16px 14px; overflow: hidden; }
.step-img img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center 35%; transition: transform .6s var(--ease); }
.method > div:hover .step-img img { transform: scale(1.04); }
@media (max-width: 1020px) { .step-img img { height: 170px; } }

/* callouts with a photograph on the right */
.callout.has-img { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0; padding: 0; overflow: hidden; }
.callout.has-img .callout-body { padding: 22px 24px; }
.callout.has-img .callout-img { margin: 0; min-height: 180px; }
.callout.has-img .callout-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.callout.has-img::after { display: none; }
.cols-side > div:nth-child(2) .callout.has-img, .cols2 > div .callout.has-img { grid-template-columns: 1fr; }
.cols-side > div:nth-child(2) .callout.has-img .callout-img img, .cols2 > div .callout.has-img .callout-img img { height: 180px; }
@media (max-width: 760px) { .callout.has-img { grid-template-columns: 1fr; } .callout.has-img .callout-img img { height: 190px; } }

/* callout with photo — refined */
.callout.has-img {
  grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--ochre); border-radius: 6px;
  background: var(--paper); box-shadow: 0 24px 50px -40px rgba(12,14,18,.45);
}
.callout.has-img .callout-body { padding: 28px 30px 26px; display: flex; flex-direction: column; justify-content: center; }
.callout.has-img .callout-body h3 { position: relative; padding-top: 12px; margin-bottom: 10px; font-size: 1.08rem; }
.callout.has-img .callout-body h3::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 2px; background: var(--ochre); }
.callout.has-img .callout-body p { font-size: 15.5px; line-height: 1.65; }
.callout.has-img .callout-img { position: relative; min-height: 220px; border-left: 1px solid var(--line-soft); }
.callout.has-img .callout-img img { transition: transform .8s var(--ease); }
.callout.has-img:hover .callout-img img { transform: scale(1.03); }
.callout.has-img .callout-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--ochre), rgba(198,132,27,.2)); }
.sec-deep .callout.has-img { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); border-left-color: var(--ochre); box-shadow: none; }
@media (max-width: 760px) {
  .callout.has-img { grid-template-columns: 1fr; }
  .callout.has-img .callout-img { border-left: 0; min-height: 0; }
  .callout.has-img .callout-img img { height: 200px; }
}

/* callout photo: fill the column exactly, no gaps */
.callout.has-img .callout-img { position: relative; overflow: hidden; background: var(--greige-deep); min-height: 240px; }
.callout.has-img .callout-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; }
html.js-reveal .callout.has-img .callout-img > img { clip-path: none; transform: none; }
@media (max-width: 760px) {
  .callout.has-img .callout-img { min-height: 0; height: 200px; }
}

/* hero: lighter left grade */
.hero-shade {
  background:
    linear-gradient(90deg, rgba(11,14,20,.70) 0%, rgba(11,14,20,.54) 26%, rgba(11,14,20,.24) 52%, rgba(11,14,20,.06) 74%, rgba(11,14,20,.12) 100%),
    linear-gradient(180deg, rgba(11,14,20,.12) 0%, transparent 22%, transparent 64%, rgba(11,14,20,.6) 100%);
  box-shadow: inset 0 0 120px 10px rgba(0,0,0,.16);
}
.hero-title .line > span { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.45); }
.hero .lede-rule { text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.4); }

/* ---------------------------------------------------------------- hero text, living motion */
/* the four service words take the amber in turn */
.kwords i { font-style: normal; color: #A9B0BB; animation: kword 8s ease-in-out infinite; transition: color .4s ease; }
.kwords i:nth-child(1) { animation-delay: 0s; }
.kwords i:nth-child(2) { animation-delay: 2s; }
.kwords i:nth-child(3) { animation-delay: 4s; }
.kwords i:nth-child(4) { animation-delay: 6s; }
@keyframes kword { 0%, 4% { color: #A9B0BB; } 10%, 22% { color: var(--amber); text-shadow: 0 0 14px rgba(217,149,42,.35); } 30%, 100% { color: #A9B0BB; text-shadow: none; } }

/* a soft sheen crosses the bold lines every few seconds */
.hero-title .line:not(.line-serif) > span { position: relative; }
.hero-title .line:not(.line-serif) > span::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  background-size: 250% 100%; mix-blend-mode: overlay;
  animation: sheen 9s ease-in-out infinite 3s;
}
@keyframes sheen { 0% { background-position: 150% 0; opacity: 0; } 8% { opacity: 1; } 30% { background-position: -50% 0; opacity: 1; } 34% { opacity: 0; } 100% { background-position: -50% 0; opacity: 0; } }

/* the amber rule breathes */
.hero-title .ul::after { animation: ruleIn .9s var(--ease) both 1.35s, ruleBreathe 5s ease-in-out infinite 2.4s; }
@keyframes ruleBreathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; box-shadow: 0 0 12px rgba(217,149,42,.35); } }

/* the emphasised words in the supporting line brighten in sequence, very gently */
.hero .lede-rule strong { animation: wordLift 12s ease-in-out infinite; }
.hero .lede-rule strong:nth-of-type(1) { animation-delay: 1s; }
.hero .lede-rule strong:nth-of-type(2) { animation-delay: 4s; }
.hero .lede-rule strong:nth-of-type(3) { animation-delay: 7s; }
.hero .lede-rule strong:nth-of-type(4) { animation-delay: 10s; }
@keyframes wordLift { 0%, 3% { color: #fff; } 8%, 16% { color: #F3D9A6; } 24%, 100% { color: #fff; } }

@media (prefers-reduced-motion: reduce) {
  .kwords i, .hero-title .line > span::after, .hero .lede-rule strong { animation: none !important; }
}

/* ---------------------------------------------------------------- page headers, living text */
.pagehead h1 {
  background: linear-gradient(105deg, #fff 0%, #fff 42%, #FFF1D6 50%, #fff 58%, #fff 100%);
  background-size: 260% 100%; background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fadeUp .7s var(--ease) both .12s, sheenText 9s ease-in-out infinite 2.5s;
}
@keyframes sheenText { 0% { background-position: 130% 0; } 35% { background-position: -30% 0; } 100% { background-position: -30% 0; } }
.pagehead .kicker::before { transform-origin: left; animation: kickerLine .8s var(--ease) both .3s, ruleBreathe 5s ease-in-out infinite 2s; }
@keyframes kickerLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pagehead .kicker { animation: fadeUp .7s var(--ease) both .04s, kickerGlow 6s ease-in-out infinite 2s; }
@keyframes kickerGlow { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 12px rgba(217,149,42,.35); } }
.pagehead .lede { animation: fadeUp .7s var(--ease) both .28s, ledeWarm 12s ease-in-out infinite 4s; }
@keyframes ledeWarm { 0%, 100% { color: #D2D5DA; } 50% { color: #ECE4D4; } }
.pagehead.has-media .lede { color: #D2D5DA; }
.crumbs a { transition: color .2s ease, padding-left .2s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .pagehead h1 { animation: none; background: none; color: #fff; -webkit-text-fill-color: #fff; }
  .pagehead .kicker, .pagehead .kicker::before, .pagehead .lede { animation: none !important; }
}

/* stacked callout (side columns): photo fills its own band exactly */
.cols-side > div:nth-child(2) .callout.has-img .callout-img,
.cols2 > div .callout.has-img .callout-img { min-height: 0; height: 230px; border-left: 0; border-top: 1px solid var(--line-soft); }
.cols-side > div:nth-child(2) .callout.has-img .callout-img img,
.cols2 > div .callout.has-img .callout-img img { height: 100%; object-position: center 35%; }

/* ---------------------------------------------------------------- method strip: no orphans, process feel */
.method:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.method:has(> :nth-child(7):last-child) > div { grid-column: span 3; }
.method:has(> :nth-child(7):last-child) > :nth-child(n + 5) { grid-column: span 4; }
.method:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.method:has(> :nth-child(5):last-child) > div { grid-column: span 2; }
.method:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: span 3; }
.method:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.method:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.method > div { position: relative; padding-top: 24px; }
.method > div::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--line-soft); }
.method > div::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 28px; background: var(--ochre); transition: width .45s var(--ease); }
.method > div:hover::after { width: 100%; }
.method b { display: inline-flex; align-items: center; gap: 8px; }
.method b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ochre); }
.method > div:hover { background: #fff; transform: translateY(-2px); }

@media (max-width: 1020px) {
  .method:has(> :nth-child(7):last-child), .method:has(> :nth-child(5):last-child), .method:has(> :nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .method:has(> :nth-child(7):last-child) > div, .method:has(> :nth-child(5):last-child) > div { grid-column: auto; }
  .method:has(> :nth-child(7):last-child) > :last-child { grid-column: 1 / -1; }
  .method:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: auto; }
  .method:has(> :nth-child(5):last-child) > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .method:has(> :nth-child(7):last-child), .method:has(> :nth-child(5):last-child), .method:has(> :nth-child(4):last-child), .method:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
  .method > div { grid-column: auto !important; }
}

/* ---------------------------------------------------------------- stage strips as numbered lists (matches .steps) */
.method:not(:has(.step-img)) {
  display: block; counter-reset: stage; background: none; border: 0; border-top: 1px solid var(--line);
}
.method:not(:has(.step-img)) > div {
  counter-increment: stage; grid-column: auto !important;
  display: grid; grid-template-columns: 54px minmax(150px, 270px) 1fr; gap: 4px 26px; align-items: start;
  padding: 17px 0; border-bottom: 1px solid var(--line-soft); background: none; transform: none; transition: background-color .25s ease;
}
.method:not(:has(.step-img)) > div:hover { background: rgba(198,132,27,.04); transform: none; }
.method:not(:has(.step-img)) > div::before {
  content: counter(stage, decimal-leading-zero); position: static; height: auto; width: auto; background: none;
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ochre-deep); padding-top: 3px;
}
.method:not(:has(.step-img)) > div::after { display: none; }
.method:not(:has(.step-img)) b { display: none; }
.method:not(:has(.step-img)) h3 { font-size: 1.02rem; margin: 0; align-self: start; }
.method:not(:has(.step-img)) p { margin: 0; font-size: 15.5px; color: var(--muted); max-width: 60ch; }
@media (max-width: 760px) {
  .method:not(:has(.step-img)) > div { grid-template-columns: 40px 1fr; }
  .method:not(:has(.step-img)) > div p { grid-column: 2; }
}

/* hero: no line-work or grid over the photograph */
.hero-net, .hero-grid { display: none; }

/* page headers: keep heads in frame — gentler scale, anchored to the top of the photo */
.pagehead.has-media { min-height: clamp(360px, 30vw, 520px); }
.pagehead-media img { object-position: center 10%; transform: scale(1.14); transform-origin: 0 6%; }
.pagehead-media img[src*='prod-'] { object-position: center 50%; transform: scale(1.06); transform-origin: 0 50%; }
.pagehead-media img[src*='hero-warehouse'] { object-position: center 30%; transform-origin: 0 30%; }
.pagehead-media img[src*='exp-'] { object-position: center 40%; transform-origin: 0 40%; }
@media (min-width: 1700px) { .pagehead.has-media { min-height: 560px; } .pagehead-media img { transform: scale(1.08); } }
@media (max-width: 900px) { .pagehead-media img, .pagehead-media img[src*='prod-'] { transform: none; } }

/* page headers where the subject is centred: copy panel on the right */
@media (min-width: 901px) {
  .pagehead.panel-right .wrap::before { left: auto; right: 24px; }
  .pagehead.panel-right .wrap { display: flex; flex-direction: column; align-items: flex-end; }
  .pagehead.panel-right .wrap > * { margin-right: 32px; margin-left: 0; width: min(100% - 64px, 556px); }
  .pagehead.panel-right .kicker { margin-left: 0; margin-right: 32px; }
  .pagehead.panel-right .pagehead-media img { object-position: center 10%; transform: scale(1.14); transform-origin: 100% 6%; }
}

/* hero: title on a single line, lighter weight */
.hero-title-oneline { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; max-width: none; white-space: nowrap; width: max-content; font-size: clamp(1.7rem, 3.5vw, 3.2rem); }
.hero-title-oneline .line { overflow: hidden; }
.hero-title-oneline .line > span { font-weight: 600; }
.hero-title-oneline .hdia { width: .16em; height: .16em; margin: 0 .22em; }
.hero .hero-copy:has(.hero-title-oneline) { max-width: none; }
.hero .hero-copy:has(.hero-title-oneline) .lede-rule { max-width: 48ch; }
@media (max-width: 900px) {
  .hero-title-oneline { white-space: normal; width: auto; font-size: clamp(1.9rem, 6.5vw, 2.6rem); }
}

/* insights: notes published by the admin, listed beside the intro photograph */
.trade-notes { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.trade-notes-head { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre-deep); margin: 0 0 14px; }
.trade-notes-list { display: grid; gap: 12px; }
.note-card { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--ochre); padding: 16px 18px 14px; }
.note-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.note-card .note-body p { font-size: 15.5px; line-height: 1.6; margin: 0 0 .6em; max-width: 60ch; }
.note-card .note-body p:last-child { margin-bottom: 0; }
.note-card time { display: block; margin-top: 8px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.note-more { margin-top: 14px; }

/* insights admin */
.admin-wrap { max-width: 760px; }
.admin-status { font-family: var(--sans); font-size: 13.5px; color: var(--muted); margin: 0 0 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.admin-status b { color: var(--ink); font-weight: 600; }
.admin-msg { font-family: var(--sans); font-size: 13.5px; margin: 12px 0 0; min-height: 1.2em; }
.admin-msg[data-kind="err"] { color: #A3301C; }
.admin-msg[data-kind="ok"] { color: #2E7D4F; }
.admin-list { display: grid; gap: 12px; margin-top: 28px; }
.admin-list .note-card { border-left-color: var(--line); }
.admin-list .note-card[data-published="true"] { border-left-color: var(--ochre); }
.admin-list .note-card .note-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.admin-list .note-card .note-meta .tag { padding: 2px 8px; border: 1px solid var(--line); border-radius: 2px; }
.admin-list .note-card .note-meta .tag[data-on="true"] { border-color: var(--ochre); color: var(--ochre-deep); }
.admin-list .note-actions { margin-left: auto; display: flex; gap: 6px; }
.admin-list .note-actions button { font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px; cursor: pointer; }
.admin-list .note-actions button:hover { border-color: var(--indigo); }
.admin-list .note-actions button[data-danger] { color: #A3301C; }
.admin-list .note-actions button[data-danger]:hover { border-color: #A3301C; }
.field input[type="password"] { width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; line-height: 1.4; }
.field .check { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14px; color: var(--ink); font-weight: 500; }
.field .check input { width: 16px; height: 16px; accent-color: var(--ochre); }

/* hero: location / keyword line sits under the buttons */
.hero .kicker-line.kicker-below { margin: 26px 0 0; }
.admin-wrap .btn[hidden] { display: none; }

/* hero: two phone numbers in the call line */
.hero-call a { color: inherit; text-decoration: none; }
.hero-call a:hover b { border-bottom-color: var(--amber); }
.hero-call-sep { color: rgba(255,255,255,.4); margin: 0 2px; }

/* blog list: post titles link to the post page */
.note-card h3 a { color: inherit; text-decoration: none; }
.note-card h3 a:hover { color: var(--ochre-deep); }
.note-card .blocklink { display: inline-block; margin-top: 8px; }

/* ---------------------------------------------------------------- exports dropdown */
.has-drop { position: relative; }
.nav li.has-drop.on > .dropbtn { border-bottom-color: var(--ochre); }
.drop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 230px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--ochre);
  box-shadow: 0 18px 44px -28px rgba(12,14,18,.45);
}
.drop[data-open="true"] { display: block; animation: megaIn .28s var(--ease) both; }
.drop li { margin: 0; }
.drop a {
  display: block; padding: 9px 18px; font-family: var(--sans); font-size: 14px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.drop a:hover, .drop a[aria-current="page"] { background: #fff; color: var(--ochre-deep); }
@media (max-width: 1150px) {
  .nav.open .has-drop { position: static; }
  .nav.open .drop { position: static; min-width: 0; border: 0; box-shadow: none; padding: 4px 0 10px 12px; }
  .nav.open .drop a { padding: 8px 0; }
}
/* keep longer header labels (e.g. Vendor & Partner Registration) on one line */
.nav a.navlink, .megabtn { white-space: nowrap; }

/* mega menu: every service card gets a clear, even border (not only a faint hover tint) */
.mega { gap: 0 16px; }
.mega > div:not(.mega-aside) {
  margin: 0 0 22px; border: 1px solid var(--line) !important; border-radius: 6px;
  background: var(--paper) !important; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mega > div:not(.mega-aside):hover {
  background: var(--greige) !important; border-color: var(--ochre) !important;
  box-shadow: 0 10px 24px -18px rgba(12,14,18,.4);
}
.mega ul { border-top: 1px solid var(--line); }
.mega ul a::before { background: #9AA1AB; }
@media (max-width: 1150px) {
  .nav.open .mega > div:not(.mega-aside) { margin: 0 0 10px; padding: 12px 14px !important; }
}

/* mega menu aside: contacts under the "Post your query" button */
.mega .mega-aside .mega-call p { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.mega .mega-aside .mega-call .mega-contacts-h { font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-deep); margin-bottom: 8px; }
.mega .mega-aside .mega-call a { white-space: nowrap; }

/* home "Five businesses" section: photo sits beside the text, centred */
.cols2 > .intro-figure { align-self: center; }

/* ---------------------------------------------------------------- smoothness */
/* Anchor jumps land below the sticky masthead rather than under it. */
html { scroll-padding-top: 92px; }

/* Soft cross-fade between pages in browsers that support cross-document
   view transitions; others navigate exactly as before. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease; }

/* Scroll reveal: shorter travel and duration so content settles quickly
   instead of trailing the scroll. */
html.js-reveal [data-reveal] { transition-duration: .6s, .6s, .7s; }
html.js-reveal [data-reveal="fade-up"] { transform: translateY(16px); }
html.js-reveal [data-reveal="scale"] { transform: translateY(10px) scale(.985); }

/* Looping hero and page-head effects stop once they are scrolled out of
   view (main.js sets .is-offscreen), so scrolling isn't competing with them. */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* Touch devices and small screens: the glass blur sits over a constantly
   cross-fading slideshow, which is the most expensive thing on the page for
   a phone GPU. Swap it for a slightly more solid panel. */
@media (hover: none), (max-width: 900px) {
  .badge, .btn-glass, .hcard, .hero-bar, .pagehead.has-media .wrap::before {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .hcard, .hero-bar { background: rgba(14,17,23,.82); }
  .btn-glass { background: rgba(14,17,23,.6); }
  .pagehead.has-media .wrap::before { background: rgba(12,14,18,.78); }
  .hero-img-blur { display: none; }
}

/* ---------------------------------------------------------------- mega menu, larger text */
.mega .mega-h { font-size: 16.5px; }
.mega p { font-size: 14.5px; line-height: 1.55; }
.mega ul a { font-size: 14.5px; }
.mega .mega-aside h4 { font-size: 16.5px; }
.mega .mega-aside p, .mega .mega-aside .mega-call p { font-size: 14px; }
.mega .mega-aside .btn { font-size: 14.5px; }
.mega .mega-aside .mega-call .mega-contacts-h { font-size: 12px; }
.mega-all b { font-size: 15.5px; }
.mega-all span { font-size: 14px; }
.mega-all i { font-size: 13.5px; }

/* ---------------------------------------------------------------- category tag lines */
/* The short "Men • Women • Kids" lines: under the lede in a page header,
   and under the title on overview cards. */
.pagehead .pagehead-tags {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .03em;
  color: #E4A138; margin-top: 14px; margin-bottom: 0;
  animation: fadeUp .7s var(--ease) both .36s;
}
.block .tags { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ochre-deep); margin: -2px 0 8px; }
@media (prefers-reduced-motion: reduce) { .pagehead .pagehead-tags { animation: none; } }