/* ============================================================
   DATHERMARK v2: GroundAI-derived editorial system
   Full-bleed video hero · white body · Inter Tight + Playfair
   Branch: v2-groundai · Spec ref: GroundAI landing (qclay)
   ============================================================ */

/* ---------- 0 · FONTS (self hosted, latin subsets as Google served them; licences in assets/fonts/) ---------- */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1 · TOKENS ---------- */
:root {
  --bg:         #ffffff;
  --ink:        #171717;
  --ink-mute:   #5c5c5c;
  --ink-faint:  #a3a3a3;
  --char:       #141413;            /* dark card */
  --taupe:      #9E948B;            /* warm, decorative only */
  --taupe-ui:   #756A60;            /* warm taupe deep enough for AA white text */
  --taupe-deep: #887C71;
  --paper:      #F1F0EF;            /* light grey block */
  --quote-bg:   rgba(125, 117, 110, 0.11);
  --line:       #e7e5e2;

  --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-6: 1.5rem;
  --s-8: 2rem;  --s-12: 3rem;  --s-16: 4rem; --s-24: 6rem;

  --font-display: "Inter Tight", "Avenir Next", sans-serif;
  --font-accent: "Playfair Display", Georgia, serif;
  --font-body: "SF Pro Rounded", ui-rounded, system-ui, sans-serif;

  --t-xs: 0.75rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --t-h2: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  --t-h1: clamp(2.5rem, 1.6rem + 4.5vw, 4rem);

  --r-card: 24px;
  --r-pill: 999px;
  --wrap: 1360px;
}

/* ---------- 2 · BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0; }
h1 { font-size: var(--t-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.005em; }
h3 { font-size: var(--t-h3); font-weight: 500; }
.accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
p { margin: 0; max-width: 65ch; }
a { color: inherit; text-decoration: none; }
p a, li a { color: var(--taupe-deep); text-underline-offset: 3px; }
p a:hover, li a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; }
::selection { background: var(--taupe); color: #fff; }
:focus-visible { outline: 2px solid var(--char); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -200vw; top: var(--s-3); z-index: 200;
  background: var(--char); color: #fff;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-weight: 600;
}
.skip-link:focus { left: var(--s-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.section { padding-block: var(--s-24); }
.section--tight { padding-block: var(--s-16); }
.section-head { max-width: 56ch; margin-bottom: var(--s-12); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--s-4); color: var(--ink-mute); }

/* ---------- 3 · PRIMITIVES ---------- */
.label {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 500;
  padding: 0.8rem 1.75rem; border-radius: 16px;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
  min-height: 48px;
}
.btn-fill { background: var(--char); color: #fff; }
.btn-fill:hover { background: #2e2e2c; }
.btn-ghost { border-color: #d6d3cf; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: #000; }
.btn-light:hover { background: #f1f0ef; }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s-6);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease-out;
}
a.card:hover { transform: translateY(-3px); border-color: #cfccc7; }

.icon-chip { display: inline-flex; color: var(--taupe-deep); }
.icon-chip svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.why-grid .card { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); align-items: center; }
.why-grid .card .icon-chip { grid-row: 1; }
.why-grid .card h3 { grid-row: 1; align-self: center; }
.why-grid .card p { grid-column: 1 / -1; color: var(--ink-mute); font-size: var(--t-sm); margin-top: var(--s-2); }

/* ---------- 4 · NAV ---------- */
.nav-shell { position: fixed; inset-inline: 0; top: 0; z-index: 100; padding-top: var(--s-3); }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  max-width: var(--wrap); margin-inline: auto;
  padding: 0.55rem clamp(1rem, 3vw, 1.5rem);
  position: relative;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { display: block; height: 30px; width: auto; }
/* glass pill cluster (GroundAI expanding nav) */
.nav-pill {
  display: flex; flex-direction: row-reverse; align-items: center;
  background: rgba(0, 0, 0, 0.4); border-radius: 26px; height: 72px;
  overflow: hidden; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.motion .nav-pill { max-width: 110px; animation: nav-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards; }
@keyframes nav-grow { to { max-width: 920px; } }
.nav-pill .pill-cta-wrap { padding: 6px; flex-shrink: 0; }
.nav-pill .pill-cta {
  display: inline-flex; align-items: center; height: 56px; padding: 0 1.75rem;
  background: #fff; color: #000; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 1.2rem; font-weight: 500; white-space: nowrap;
  transition: background-color 0.2s ease-out;
}
.nav-pill .pill-cta:hover { background: #f5f5f4; }
.nav-links {
  display: flex; align-items: center; gap: 2.4rem;
  padding-left: 2.4rem; padding-right: 0.75rem; white-space: nowrap;
}
.motion .nav-links { opacity: 0; animation: fade-in 0.5s ease-out 1.5s forwards; }
@keyframes fade-in { to { opacity: 1; } }
.nav-links a { color: #fff; font-size: 1.1rem; opacity: 0.9; transition: opacity 0.15s ease-out; padding-block: 0.5rem; }
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-links a[aria-current="true"] { opacity: 1; }   /* true: the section a service page belongs to */
.nav-toggle {
  display: none; background: rgba(0, 0, 0, 0.4); border: none; border-radius: 50%;
  color: #fff; width: 48px; height: 48px; cursor: pointer;
  align-items: center; justify-content: center;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* light nav variant: subpages over white */
.nav--light {
  background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); border-radius: 20px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav-cta { white-space: nowrap; padding: 0.6rem 1.2rem; min-height: 0; }
.nav--light .nav-logo img { height: 26px; }
.nav--light .nav-pill { background: rgba(20, 20, 19, 0.06); }
.nav--light .nav-links a { color: var(--ink); }
.nav--light .nav-pill .pill-cta { background: var(--char); color: #fff; }
.nav--light .nav-pill .pill-cta:hover { background: #2e2e2c; }
.nav--light .nav-toggle { background: rgba(20, 20, 19, 0.06); color: var(--ink); }
.nav--light .nav-menu { background: rgba(255, 255, 255, 0.92); }
.nav--light .nav-menu a { color: var(--ink); }
/* mobile dropdown */
.nav-menu {
  display: none;
  position: absolute; top: 100%; right: clamp(1rem, 3vw, 1.5rem); margin-top: 12px; width: 240px;
  background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 16px; padding: 1rem;
  flex-direction: column; gap: 0.75rem;
}
.nav.menu-open .nav-menu { display: flex; }
.nav-menu a { color: #fff; padding: 0.6rem 0.75rem; min-height: 44px; display: flex; align-items: center; border-radius: 10px; }
.nav-menu .pill-cta { justify-content: center; background: #fff; color: #000; border-radius: var(--r-pill); height: 44px; font-weight: 500; }

/* ---------- 5 · VIDEO HERO ---------- */
.vhero {
  position: relative; min-height: 100vh; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden; color: #fff;
}
.vhero video, .vhero .hero-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.vhero .hero-fallback { background: linear-gradient(160deg, #2a2a26, #4a443d 55%, #6e6358); }
.vhero .veil {
  position: absolute; inset: 0; z-index: 0;
  /* bottom-weighted: placeholder video has bright passages: footer text must always read */
  background: linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.05) 62%, rgba(0,0,0,0.32) 100%);
}
.vhero .vhero-head { width: 100%; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 20; }
.vhero-head .nav-logo img { height: 44px; }
.vhero-head .nav { margin: 0 0 0 auto; }
.motion .vhero-head { opacity: 0; transform: translateY(45vh); animation: head-rise 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes head-rise { to { opacity: 1; transform: translateY(0); } }

.vhero-center {
  width: 100%; max-width: 800px; margin: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: clamp(1.5rem, 3vw, 2rem); text-align: center; z-index: 10; padding-inline: 1rem;
}
.vhero-center h1 {
  color: #fff; font-weight: 400;
  font-size: clamp(40px, min(7.5vw, 8vh), 64px); line-height: 1.05;
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.55);   /* keep the headline legible over the brighter video */
}
.vhero-center h1 .line { display: block; }
.motion .vhero-center h1 .line { opacity: 0; transform: translateY(12px); animation: rise-in 0.6s ease-out forwards; }
.motion .vhero-center h1 .line:nth-child(1) { animation-delay: 0.3s; }
.motion .vhero-center h1 .line:nth-child(2) { animation-delay: 0.5s; }
.motion .vhero-center h1 .line:nth-child(3) { animation-delay: 0.7s; }
@keyframes rise-in { to { opacity: 1; transform: translateY(0); } }
.vhero-center .cta {
  height: 56px; padding: 0 2rem;
  background: #fff; border-radius: 16px; border: none; cursor: pointer;
  display: inline-flex; justify-content: center; align-items: center;
  color: #000; font-family: var(--font-body); font-size: 1.25rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease-out;
}
.vhero-center .cta:hover { background: #e7e5e2; }
.motion .vhero-center .cta { opacity: 0; transform: translateY(10px); animation: rise-in 0.5s ease-out 1s forwards; }

/* word-by-word reveal (JS splits [data-words]) */
.w { display: inline-block; }
.motion .w { opacity: 0; transform: translateY(10px); animation: rise-in 0.5s ease-out forwards; animation-delay: var(--wd, 0s); }
/* below-fold word blocks hold until scrolled into view */
.motion .words-wait .w { animation-play-state: paused; }
.motion .words-wait.in .w { animation-play-state: running; }
/* unsplit word blocks stay hidden until site.js has built their spans; :where keeps the specificity at 0,2,0 so the overrides below win */
.motion [data-words]:where(:not(.split)) { visibility: hidden; }

/* ---------- 6 · MARQUEE (TrustedBy) ---------- */
.trusted { background: var(--bg); padding: var(--s-16) 40px var(--s-12); }
.trusted h2 { text-align: center; font-size: clamp(1.875rem, 3vw, 2.25rem); font-weight: 500; color: var(--ink); margin-bottom: var(--s-12); }
.marquee-shell { position: relative; overflow: hidden; }
.marquee-shell::before, .marquee-shell::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 10; pointer-events: none;
}
.marquee-shell::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.marquee-shell::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.marquee-track { display: flex; width: max-content; gap: 4rem; padding-right: 4rem; }   /* the end padding equals the gap: the loop moves exactly one set plus one gap, so it never jumps */
.motion .marquee-track { animation: marquee 35s linear infinite; }
.marquee-track .brand {
  display: block; flex-shrink: 0; align-self: center;
  height: 34px; width: auto; max-width: 170px; object-fit: contain;
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- 7 · CRAFT CARDS ---------- */
.craft { background: var(--bg); }
.craft-inner { max-width: var(--wrap); margin-inline: auto; padding: var(--s-16) clamp(1.5rem, 4vw, 3rem) 5rem; }
.craft h2 { text-align: center; font-size: clamp(3rem, 5vw, 3.75rem); line-height: 1.1; margin-bottom: var(--s-12); color: var(--ink); }
.craft-row { display: flex; flex-direction: column; gap: 1.5rem; align-items: stretch; }
@media (min-width: 1080px) { .craft-row { flex-direction: row; justify-content: space-between; } }
.craft-row > * { flex: 1; display: flex; }
.ccard { position: relative; flex: 1; height: 585px; border-radius: var(--r-card); overflow: hidden; }

/* Card 1: style carousel */
.ccard--carousel { background: #d6d3d1 center / cover no-repeat; }
.ccard--carousel .veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1); }
.ccard--carousel .fade-top, .ccard--carousel .fade-bot {
  position: absolute; left: 0; right: 0; height: 6rem; z-index: 5; pointer-events: none;
}
.ccard--carousel .fade-top { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent); }
.ccard--carousel .fade-bot { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.3), transparent); }
.car-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.car-axis { position: relative; width: 100%; height: 80px; }
.car-item {
  position: absolute; left: 0; right: 0; top: 0; height: 80px;
  display: flex; justify-content: center; align-items: center; pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.3, 1.1, 0.4, 1), opacity 0.4s ease-in-out;
  opacity: 0;
}
.car-pill {
  width: 261px; height: 56px; padding: 0 12px;
  background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-pill);
  display: flex; align-items: center; gap: 8.5px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: width 0.55s cubic-bezier(0.3, 1.1, 0.4, 1), height 0.55s cubic-bezier(0.3, 1.1, 0.4, 1),
              background-color 0.4s ease-out, border-radius 0.55s ease-out;
}
.car-item.is-active .car-pill {
  width: calc(100% - 60px); height: 80px; padding: 8.5px;
  background: rgba(255, 255, 255, 0.25); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.car-pill .dot {
  border-radius: 50%; background: rgba(255, 255, 255, 0.3); flex-shrink: 0;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  transition: width 0.55s cubic-bezier(0.3, 1.1, 0.4, 1), height 0.55s cubic-bezier(0.3, 1.1, 0.4, 1);
}
.car-item.is-active .car-pill .dot { width: 63px; height: 63px; }
.car-pill .dot svg { width: 45%; height: 45%; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.car-pill .meta { position: relative; flex: 1; height: 44px; text-align: left; margin-left: 4px; }
.car-pill .meta .real, .car-pill .meta .skel {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  transition: opacity 0.4s ease-in-out;
}
.car-pill .meta .real { opacity: 0; }
.car-item.is-active .car-pill .meta .real { opacity: 1; }
.car-item.is-active .car-pill .meta .skel { opacity: 0; }
.car-pill .meta .real .ttl { color: #fff; font-size: 1.125rem; font-weight: 500; font-family: var(--font-body); line-height: 1.2; }
.car-pill .meta .real .cap { color: rgba(255,255,255,0.7); font-size: 11px; letter-spacing: 0.15em; margin-top: 2px; }
.car-pill .meta .skel { gap: 6px; }
.car-pill .meta .skel i { display: block; height: 8px; border-radius: var(--r-pill); }
.car-pill .meta .skel i:first-child { width: 140px; background: rgba(255,255,255,0.5); }
.car-pill .meta .skel i:last-child { width: 70px; background: rgba(255,255,255,0.35); }

/* Card 2: chat */
.ccard--chat { background: #08203f; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem 0; }
.ccard--chat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.ccard--chat .chat-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 16, 33, 0.88) 0%, rgba(4, 16, 33, 0.35) 45%, rgba(4, 16, 33, 0.12) 100%);
}
.chat-bottom { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: flex-end; padding-inline: 32px; }
.chat-bottom .line-lg { width: 100%; color: #fff; font-size: 2.25rem; line-height: 2.5rem; font-family: var(--font-body); }

/* Card 3: adaptable */
.ccard--adapt { background: #0d4a7d; display: flex; flex-direction: column; padding: 44px 33px 2.5rem; }
.ccard--adapt h3 { color: #fff; font-size: clamp(2.4rem, 3.4vw, 3rem); font-weight: 400; line-height: 1.05; }
.ccard--adapt .sub { color: rgba(255, 255, 255, 0.92); font-size: 1.125rem; line-height: 1.35; max-width: 340px; margin-top: 26px; font-family: var(--font-body); }
.adapt-list { margin-top: auto; z-index: 10; display: flex; flex-direction: column; gap: 12px; position: relative; }
.adapt-list.rotating { display: block; margin-top: 30px; }
.adapt-list.rotating .adapt-item {
  position: absolute; left: 0; top: 0; width: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease-out;
}
.adapt-item {
  width: 100%; padding: 15px 27px; border-radius: 16px; background: #fff;
  display: flex; align-items: center;
}
.adapt-item span { font-size: 1.125rem; font-family: var(--font-body); }
.adapt-fade {
  pointer-events: none; position: absolute; inset-inline: -16px; bottom: -2.5rem; height: 140px; z-index: 20;
  background: linear-gradient(to top, rgba(13,74,125,1) 0%, rgba(13,74,125,1) 35%, rgba(13,74,125,0.7) 65%, rgba(13,74,125,0) 80%);
}
.adapt-wrap { position: relative; margin-top: auto; }

/* ---------- 7b · NINE SYSTEMS, FOUR CARDS ---------- */
/* four cards on a six track grid, 4 + 2 then 2 + 4, both rows equally tall. Each card lists the services that belong
   together. One colour set for all four, set here */
.svc { padding-block: 5rem; }
.svc h2 { text-align: center; margin-bottom: var(--s-12); }
.svc-grid {
  --card: var(--paper); --rule: rgba(13, 74, 125, 0.14); --arrow: #0d4a7d; --cable: rgba(13, 74, 125, 0.24); --beam: #2f8fe6; --shade: rgba(8, 32, 63, 0.16);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--s-4);
}
.svc-card { position: relative; isolation: isolate; grid-column: span 2; display: flex; flex-direction: column; padding: var(--s-8) var(--s-8) 0; border-radius: var(--r-card); background: var(--card); overflow: hidden; }
.svc-card--globe, .svc-card--wide { grid-column: span 4; }
.svc-item { position: relative; padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.svc-item:first-child { padding-top: 0; border-top: 0; }
.svc-item h3 { font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.15; text-wrap: balance; }
.svc-item h3 a { color: var(--ink); }
.svc-item h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole entry is the link's tap target */
.svc-item h3 a span { display: inline-block; color: var(--arrow); transition: transform 0.3s ease-out; }
.svc-item:hover h3 a span, .svc-item:focus-within h3 a span { transform: translateX(6px); }
.svc-item p { margin-top: var(--s-2); max-width: 40ch; color: var(--ink-mute); font-size: var(--t-sm); }
.svc-pic { position: relative; flex: 1; min-height: 10rem; margin: var(--s-4) calc(var(--s-8) * -1) 0 0; border-top-left-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px var(--shade); }
.svc-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.svc-card:hover .svc-pic img { transform: scale(1.05); }

/* the security card: one service with a larger name, part of the globe in the bottom right corner. Its list and its item
   are not positioned, so the card is the containing block of the link's ::after and the whole card is one target. The globe
   box sits at z-index -1 of the card's own stacking context: over the card colour, under the text and under that target.
   The box follows the card's width, not its height (the sphere's radius is 1.1 box heights): a tall row, as with enlarged
   text, then leaves the sphere its size, clear of the text, and the box always holds the sphere's whole left edge */
.svc-card--globe { min-height: 30rem; }
.svc-card--globe .svc-list { max-width: min(23rem, 46%); }
.svc-card--globe .svc-item { position: static; }
.svc-card--globe .svc-item h3 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
.svc-globe { position: absolute; z-index: -1; right: 0; bottom: 0; width: 73%; aspect-ratio: 1.1; max-height: 100%; overflow: hidden; }
/* the still picture is the first frame the live globe draws (shots/make-globe-still.mjs). Sized by the box height and held
   to the bottom right corner, it lies exactly under the canvas. site.js sets is-live once the canvas shows the map: the
   canvas fades in over the picture, and only then the picture leaves */
.svc-globe img { position: absolute; right: 0; bottom: 0; width: auto; height: 100%; max-width: none; }
.svc-globe canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease-out; }
.svc-globe.is-live canvas { opacity: 1; }
.svc-globe.is-live img { opacity: 0; transition: opacity 0.2s ease-out 0.4s; }

/* the wide card: the list on the left, the picture on the right, running off the right and bottom edges */
.svc-card--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-8); }
.svc-card--wide .svc-list { padding-bottom: var(--s-8); }
.svc-card--wide .svc-pic { margin-top: 0; }
.svc-card--wide .svc-pic img { object-position: 30% 50%; }

/* the network: three systems cabled to the core switch. Light runs up each cable in turn (--i, set in the markup), the
   system answers when it lands, and the switch's port lights blink out of step (--k) */
.svc-pic--net { min-height: 13rem; margin: var(--s-6) 0; border-radius: 0; overflow: visible; box-shadow: none; }
.svc-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --t: 3.6s; }
.svc-net-cable path { fill: none; stroke: var(--cable); stroke-width: 1.5; }
.svc-net-beam path { fill: none; stroke: var(--beam); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 16 100; stroke-dashoffset: 16; filter: drop-shadow(0 0 4px var(--beam)); animation: svc-beam var(--t) cubic-bezier(0.5, 0, 0.3, 1) infinite; animation-delay: calc(var(--i) * var(--t) / 3); }
@keyframes svc-beam { 0% { stroke-dashoffset: 16; opacity: 0; } 6% { opacity: 1; } 42% { stroke-dashoffset: -100; opacity: 1; } 46%, 100% { stroke-dashoffset: -100; opacity: 0; } }
.svc-net-device rect, .svc-net-core rect { fill: #fff; filter: drop-shadow(0 6px 12px var(--shade)); }
.svc-net-device path { fill: none; stroke: var(--arrow); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.svc-net-device .ring { fill: none; filter: none; stroke: var(--beam); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: svc-ring var(--t) ease-out infinite; animation-delay: calc(var(--i) * var(--t) / 3); }
@keyframes svc-ring { 0%, 38% { opacity: 0; transform: scale(1); } 44% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.22); } }
.svc-net-core circle { fill: var(--arrow); animation: svc-led 1.6s steps(1, end) infinite; animation-delay: calc(var(--k) * -0.37s); }
@keyframes svc-led { 0%, 55% { fill: #0d4a7d; } 56%, 100% { fill: #9cc8f0; } }
.svc-net-core path { fill: none; stroke: rgba(13, 74, 125, 0.25); stroke-width: 1.5; stroke-linecap: round; }

/* ---------- 8 · TESTIMONIAL ---------- */
.testi { background: var(--bg); }
.testi-inner { max-width: var(--wrap); margin-inline: auto; padding: 5rem clamp(1.5rem, 4vw, 2.5rem); }
.testi-row { display: flex; flex-direction: column; gap: 2rem; align-items: stretch; }
@media (min-width: 1080px) { .testi-row { flex-direction: row; justify-content: space-between; gap: 25px; } }
.testi-left { display: flex; flex-direction: column; gap: 25px; align-items: stretch; }
@media (min-width: 1080px) { .testi-left { flex-direction: row; } }
.testi-blockA { display: flex; flex-direction: row; justify-content: space-between; gap: 1rem; align-items: center; }
@media (min-width: 1080px) { .testi-blockA { flex-direction: column; min-height: 447px; align-items: flex-start; gap: 2rem; } }
.testi-blockA h3 { font-size: 1.875rem; color: #000; line-height: 1.25; max-width: 260px; font-weight: 500; font-family: var(--font-body); }
.testi-dots { display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 1080px) { .testi-dots { display: flex; } }
.testi-dots i { display: block; height: 8px; border-radius: var(--r-pill); background: #d6d3d1; width: 8px; }
.testi-dots i:first-child { width: 32px; background: #0d4a7d; }
.testi-blockA .btn-fill { background: #0d4a7d; }
.testi-blockA .btn-fill:hover { background: #116099; }
.testi-blockA .col { display: flex; flex-direction: column; gap: 1.5rem; flex: 1; }
@media (min-width: 1080px) { .testi-blockA .col { flex: none; } }
.testi-blockB { display: flex; flex-direction: column; gap: 12px; width: 100%; }
@media (min-width: 1080px) { .testi-blockB { width: 282px; } }
.testi-blockB .photo { width: 100%; height: 280px; border-radius: 16px; overflow: hidden; }
@media (min-width: 1080px) { .testi-blockB .photo { height: auto; flex: 1; } }
.testi-blockB .photo img { width: 100%; height: 100%; object-fit: cover; }
.testi-quote {
  max-width: 748px; flex: 1; padding: 2.5rem; border-radius: 16px;
  background: #0b2e52;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
}
.testi-quote .q { font-size: 1.7rem; line-height: 1.45; color: #fff; font-family: var(--font-body); max-width: none; }
.testi-quote .who { display: flex; flex-direction: column; gap: 0.25rem; }
.testi-quote .who .name { font-family: var(--font-accent); font-style: italic; font-size: 1.25rem; color: #fff; }
.testi-quote .who .role { font-size: 1.25rem; color: rgba(255, 255, 255, 0.65); font-family: var(--font-body); }

/* ---------- 9 · SUBPAGE PATTERNS (light theme) ---------- */
.page-hero { position: relative; padding-top: clamp(7rem, 14vh, 10rem); padding-bottom: var(--s-8); }
/* the page name as the title; 3.25rem keeps SOLUTIONS on one line down to a 320px phone, overflow-wrap is the emergency for enlarged text */
.page-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.25rem, 13vw, 11rem); line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
/* the one word titles carry a second, smaller line inside the same h1 that names the subject; it rises with the title */
.page-hero h1 .h1-sub { display: block; font-size: clamp(1.125rem, 2.2vw, 1.75rem); line-height: 1.25; letter-spacing: -0.01em; text-transform: none; font-weight: 500; color: var(--ink); margin-top: var(--s-4); max-width: 32ch; overflow-wrap: normal; }
/* the title rises on its own clock, like the hero lines; the lede words follow on their delays */
.motion .page-hero h1 { opacity: 0; transform: translateY(32px); animation: hero-title 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; }
@keyframes hero-title { to { opacity: 1; transform: none; } }
.page-hero .lede { color: var(--ink-mute); margin-top: var(--s-6); max-width: 56ch; }

/* --- 30th anniversary seal: ring text on a path (turns slowly) around a static numeral --- */
.hero-seal { --seal: 132px; position: relative; width: var(--seal); height: var(--seal); color: #fff; }
.hero-seal .seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-seal .seal-text { font-family: var(--font-display); font-size: 8px; font-weight: 500; letter-spacing: 0.12em; fill: currentColor; }
.hero-seal .seal-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: calc(var(--seal) * 0.36); letter-spacing: -0.04em; line-height: 1; }
/* home: an in-flow flex child below the centred title and CTA, so it can never cover them (from 1200px it sits in the corner, see section 12) */
.vhero .hero-seal { align-self: flex-start; flex: none; margin-top: clamp(1rem, 3vw, 2rem); z-index: 10; }
/* the seal lives only on the home video hero now; the About page uses the real anniversary banner band instead */
.motion .hero-seal { opacity: 0; animation: rise-in 0.6s ease-out 1.2s forwards; }
.motion .hero-seal .seal-ring { animation: seal-spin 48s linear infinite; }
@keyframes seal-spin { to { transform: rotate(360deg); } }
/* phones: no home hero entrance, so the headline paints with the first frame. The nav pill and its links are not shown
   at this width, and the ring's slow turn is not an entrance; both keep their rules */
@media (max-width: 720px) {
  .motion .vhero-head, .motion .vhero-center h1 .line, .motion .vhero-center .cta, .motion .hero-seal { opacity: 1; transform: none; animation: none; }
}

/* --- solutions: expanding-cards strip + dossier panels --- */
.xcards {
  display: grid; grid-template-columns: 5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px; height: clamp(420px, 56vh, 540px);
  transition: grid-template-columns 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* without JS the strip can't expand: panels below carry all content */
html:not(.js) .xcards { display: none; }
.xcard {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: var(--r-card); overflow: hidden;
  background: var(--char); cursor: pointer; text-align: left;
  font-family: inherit; min-width: 0; min-height: 0;
}
.xcard > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transform: scale(1.08);
  transition: filter 0.45s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.xcard.is-active > img { filter: grayscale(0); transform: scale(1); }
.xcard-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 12, 14, 0.82), rgba(10, 12, 14, 0.32) 45%, rgba(10, 12, 14, 0.05));
}
.xcard-side {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-6);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  transition: opacity 0.3s ease-out;
}
.xcard.is-active .xcard-side { opacity: 0; }
.xcard-num { font-family: var(--font-accent); font-style: italic; font-size: 1.3rem; color: rgba(255, 255, 255, 0.75); }
.xcard-vtitle {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88);
  max-height: 240px; overflow: hidden;
}
.xcard-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1rem, 2.5vw, 2rem); gap: 0.45rem;
}
.xcard-body > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.35s ease-out, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.xcard.is-active .xcard-body > * { opacity: 1; transform: none; }
.xcard.is-active .xcard-body > :nth-child(2) { transition-delay: 0.07s; }
.xcard.is-active .xcard-body > :nth-child(3) { transition-delay: 0.14s; }
.xcard.is-active .xcard-body > :nth-child(4) { transition-delay: 0.21s; }
.xcard-kicker {
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.xcard-title {
  font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.1; letter-spacing: -0.005em; color: #fff;
}
.xcard-gist { font-size: var(--t-sm); color: rgba(255, 255, 255, 0.78); max-width: 44ch; }
.xcard-go { margin-top: 0.35rem; font-size: var(--t-sm); font-weight: 600; color: #fff; }
.xcard:focus-visible { outline: 2px solid var(--char); outline-offset: 3px; }

/* full-screen dossier dialog */
.sol-dialog {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  background: var(--bg); color: var(--ink);
  overscroll-behavior: contain;
}
.sol-dialog[open] { display: block; overflow-y: auto; animation: solDialogIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.sol-dialog::backdrop { background: none; }
@keyframes solDialogIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* no JS: dialog renders as plain in-flow container, all dossiers stacked */
html:not(.js) .sol-dialog { display: block; position: static; width: auto; height: auto; max-height: none; }
html:not(.js) .sol-close { display: none; }
/* no JS: the card strip is hidden, so the six service pages are listed in plain links above the stacked dossiers */
.sol-links { display: none; margin: 0 0 var(--s-12); padding: 0; list-style: none; flex-wrap: wrap; gap: var(--s-2) var(--s-8); }
html:not(.js) .sol-links { display: flex; }
.sol-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }

.sol-panel[hidden] { display: none; }
/* the text, with the All solutions pill above the kicker, sits at the foot of the photo; enlarged text grows the hero */
.sol-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(240px, 38vh, 400px); padding-top: var(--s-6); overflow: hidden; background: var(--char); }
.sol-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sol-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 12, 14, 0.78), rgba(10, 12, 14, 0.28) 50%, rgba(10, 12, 14, 0.08));
}
.sol-hero-text { position: relative; z-index: 2; width: 100%; padding-block: var(--s-8); }
.sol-hero-kicker {
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.sol-hero h2 { color: #fff; font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem); margin-top: var(--s-3); }
/* the way back to all solutions, one look and one place everywhere: a dark glass pill with a left arrow and the words, just
   above the kicker of the hero. A link on the service pages (.svc-hero-back), a button that closes the dialog over the dossiers
   (.sol-close). The light ring keeps an edge on any photo and in forced colours */
.svc-hero-back, .sol-close {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1.1rem 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--r-pill);
  background: rgba(10, 12, 14, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff;
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}
.svc-hero-back svg, .sol-close svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.svc-hero-back:hover, .sol-close:hover { background: #fff; border-color: #fff; color: var(--ink); }
.svc-hero-back:hover svg, .sol-close:hover svg { transform: translateX(-3px); }
/* two tone, so one of the two rings shows on any background */
.svc-hero-back:focus-visible, .sol-close:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 0 4px var(--char); border-radius: var(--r-pill); }

/* service pages (solutions/*.html): the dossier look as a page of its own. The fixed nav bar lies over the top of the photo;
   the text sits at the bottom, and the top padding keeps a long title clear of the bar. No entrance: the title paints at once */
.svc-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 56vh, 620px); padding-top: 6.5rem; overflow: hidden; background: var(--char); }
.svc-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 12, 14, 0.78), rgba(10, 12, 14, 0.28) 50%, rgba(10, 12, 14, 0.08));
}
.svc-hero-text { position: relative; z-index: 2; width: 100%; padding-block: var(--s-8); }
.svc-hero h1 { color: #fff; font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem); margin-top: var(--s-3); max-width: 22ch; text-wrap: balance; }
.svc-hero-cta { margin-top: var(--s-6); }
.svc-hero-cta .btn { background: #fff; color: var(--ink); min-height: 44px; }
.svc-hero-cta .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.svc-hero .svc-hero-back, .sol-hero .sol-close { margin-bottom: var(--s-3); }
.svc-page .sol { padding-top: var(--s-12); }
.svc-page-h2 { font-size: var(--t-h3); font-weight: 500; }
.svc-page-proof { padding-bottom: var(--s-8); }
.svc-page-proof > h2 { margin-bottom: var(--s-8); }
.svc-page-proof .go { display: inline-block; margin-top: var(--s-8); font-weight: 600; font-size: var(--t-sm); color: var(--taupe-deep); }
.svc-page-letter { margin-top: var(--s-12); max-width: 72ch; }
/* the related services line before the closing card: a plain uppercase label (as .pr-cell label) and underlined page names (as .sol-links a) */
.svc-related { padding-bottom: var(--s-8); }
.svc-related-h { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.svc-related ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-8); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.svc-related a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }

.sol { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-12); align-items: center; padding: var(--s-2) 0 var(--s-16); }
.sol .body { color: var(--ink-mute); margin-top: var(--s-4); }
.sol .deploy { margin-top: var(--s-6); }
.sol .deploy li { position: relative; padding-left: 1.05rem; color: var(--ink-mute); font-size: var(--t-sm); padding-block: 0.3rem; }
.sol .deploy li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 5px; height: 5px; border-radius: 50%; background: var(--taupe); }
.sol .go { display: inline-block; margin-top: var(--s-6); font-weight: 600; font-size: var(--t-sm); color: var(--taupe-deep); }
.sol-visual {
  border-radius: var(--r-card); min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
}
.sol-proof { background: var(--paper); border-radius: var(--r-card); padding: var(--s-4) var(--s-6); margin-top: var(--s-6); font-size: var(--t-sm); }
/* migrated-content blocks */
.sol-visual--img { padding: 0; overflow: hidden; position: relative; align-self: stretch; }
.sol-visual--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* low-res legacy product shots: frame contained on the paper surface instead of cover-stretching */
.sol-visual--contain img { object-fit: contain; padding: var(--s-8); }
.sol-sub { grid-column: 1 / -1; margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-6); }
.sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s-6); align-items: stretch; }
.sub-card { background: var(--paper); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.sub-card .pic { background: #fff; aspect-ratio: 16/10; min-height: 0; } /* min-height 0: a flex item's content minimum would otherwise let a square photo stretch the box past 16/10 */
.sub-card .pic img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.sub-card .pic--cover img { object-fit: cover; padding: 0; }
.sub-card .pic-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #fff; }
.sub-card .pic-row img { width: 100%; height: auto; aspect-ratio: 8/5; object-fit: contain; padding: 8px; }   /* height auto: the height attribute must not win over the ratio */
.sub-card .pad { padding: var(--s-6); flex: 1; }
.sub-card h3 { font-size: 1.2rem; }
.sub-card .cap { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); margin-top: var(--s-4); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
.gallery img { width: 100%; height: auto; border-radius: 12px; aspect-ratio: 5/3; object-fit: cover; }
.gallery--wide img { aspect-ratio: 16/7; }
.feature-icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-4); }
.feature-icons .fi { background: var(--paper); border-radius: var(--r-card); padding: var(--s-6); text-align: center; }
.feature-icons .fi img { height: 56px; width: auto; margin-inline: auto; }
.feature-icons .fi b { display: block; margin-top: var(--s-3); font-size: var(--t-sm); }
.feature-icons .fi p { font-size: var(--t-sm); color: var(--ink-mute); margin-top: 0.35rem; }

.brand-group { padding: var(--s-12) 0; border-top: 1px solid var(--line); }
.brand-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); }
.brand-tile { padding: var(--s-6); display: flex; align-items: center; justify-content: center; }
.brand-tile .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.05em; }
.brand-tile .wordmark img { display: block; height: 38px; width: auto; max-width: 100%; object-fit: contain; }

.timeline { position: relative; max-width: 960px; margin-inline: auto; padding-block: var(--s-8); }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line); transform: translateX(-50%); }
.tl-item { position: relative; padding-block: var(--s-6); }
.tl-node { position: absolute; top: 0; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--taupe-ui); color: #fff; display: grid; place-items: center; }
.tl-node svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tl-connect { position: absolute; top: 27px; height: 0; border-top: 2px dashed var(--taupe); }
.tl-connect::after { content: ""; position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--taupe-ui); }
.tl-card { width: 50%; padding-top: 4.5rem; }
.tl-card .y { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.tl-card h3 { font-size: var(--t-h3); font-weight: 600; color: var(--ink); margin-top: var(--s-2); }
.tl-card p { color: var(--ink-mute); font-size: var(--t-sm); margin-top: var(--s-3); }
.tl-item:nth-child(odd) .tl-card { margin-right: 50%; padding-right: var(--s-12); text-align: right; }
.tl-item:nth-child(odd) .tl-node { left: 0; }
.tl-item:nth-child(odd) .tl-connect { left: 56px; right: 50%; }
.tl-item:nth-child(odd) .tl-connect::after { right: -1px; }
.tl-item:nth-child(even) .tl-card { margin-left: 50%; padding-left: var(--s-12); text-align: left; }
.tl-item:nth-child(even) .tl-node { right: 0; }
.tl-item:nth-child(even) .tl-connect { right: 56px; left: 50%; }
.tl-item:nth-child(even) .tl-connect::after { left: -1px; }


/* about: mission and vision band */
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-12); padding: var(--s-12); background: var(--paper); border-radius: var(--r-card); }
.mv-line { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.01em; margin-top: var(--s-4); max-width: 18ch; overflow-wrap: anywhere; }

/* about: awards ledger and client commendations */
.awards { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); align-items: start; }
.awards-photo { margin: 0; padding: var(--s-6); background: var(--paper); border-radius: var(--r-card); }
.awards-photo img { width: 100%; height: auto; }
.awards-photo figcaption { margin-top: var(--s-4); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.awards-list { list-style: none; margin: 0; padding: 0; }
.awards-list li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-sm); overflow-wrap: anywhere; }
.awards-list li:last-child { border-bottom: 1px solid var(--line); }
.awards-list .y { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; color: var(--ink-mute); }
.letters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-16); }
.letter { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-8); background: var(--quote-bg); border-radius: var(--r-card); }
.letter blockquote { margin: 0; font-family: var(--font-accent); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.letter blockquote p { max-width: none; }
.letter-who { margin-top: auto; display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--t-sm); overflow-wrap: anywhere; }
.letter-who .name { font-weight: 600; }
.letter-who .role { color: var(--ink-mute); }

/* the awards heading can hold a single long word; let it break rather than push the page wide at large text sizes */
#rec-h { overflow-wrap: anywhere; }

/* about: the real 30-years banner, contained so its 648px source is never upscaled */
.anniv { max-width: 648px; margin-inline: auto; }
.anniv img { width: 100%; height: auto; border-radius: var(--r-card); box-shadow: 0 10px 30px rgba(20, 37, 54, 0.10); }

/* about: text-with-photo lead (the photo fills a reserved box so a portrait image cannot dictate the row height) */
.lead-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-12); align-items: stretch; }
.lead-copy { overflow-wrap: anywhere; }
.lead-copy p { color: var(--ink-mute); margin-top: var(--s-4); max-width: 52ch; }
.lead-photo { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 340px; }
.lead-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* about: stat rows (label left, figure right) inside a soft card band */
.stats { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-card); padding: 0 var(--s-8); }
.stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-6); border-top: 1px solid var(--line); text-align: left; }
.stat:first-child { border-top: none; }
.stat .d { overflow-wrap: anywhere; color: var(--ink-mute); font-size: var(--t-md); }
.stat .n { flex: none; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.02em; }

/* about: numbered "how we work" cards */
.method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.method-card { padding: var(--s-8); background: var(--paper); border-radius: var(--r-card); }
.method-card .mnum { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: var(--ink-faint); letter-spacing: -0.02em; }
.method-card h3 { margin-top: var(--s-3); font-size: var(--t-h3); }
.method-card p { margin-top: var(--s-2); color: var(--ink-mute); font-size: var(--t-sm); }
.expertise-line { margin-top: var(--s-8); color: var(--ink-mute); font-size: var(--t-sm); max-width: none; overflow-wrap: anywhere; }
.expertise-line .label { margin-right: var(--s-3); }

.faq { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-3); }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: border-color 0.2s ease-out; }
.faq-item[open] { border-color: var(--taupe); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6); font-weight: 600; min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-display); font-size: 1.3rem; color: var(--taupe-deep); transition: transform 0.2s ease-out; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .a { padding: 0 var(--s-6) var(--s-6); color: var(--ink-mute); font-size: var(--t-sm); }

.cta-card {
  position: relative; overflow: hidden; text-align: left;
  border-radius: var(--r-card); padding: clamp(2.5rem, 6vw, 4.5rem);
  background-color: #15181c;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.05) 100%), url("consultation-bg.webp");
  background-size: cover; background-position: center 25%; background-repeat: no-repeat;
  color: #fff;
}
.cta-card .label { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--s-3); }
.cta-card h2 { max-width: 16ch; color: #fff; }
.cta-card p { color: rgba(255, 255, 255, 0.92); margin-top: var(--s-4); }
.cta-card .hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-8); }
.cta-card .btn-fill { background: #fff; color: var(--ink); }
.cta-card .btn-fill:hover { background: var(--paper); }
.cta-card .btn-ghost { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.cta-card .btn-ghost:hover { border-color: #fff; }
.hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-12); align-items: start; }
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: var(--s-4); }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink);
  background: #fff; border: 1px solid #d6d3cf; border-radius: 12px;
  padding: 0.75rem 1rem; min-height: 44px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--char); outline-offset: 1px; border-color: transparent; }
.field .opt { color: var(--ink-mute); font-weight: 400; }
/* the honeypot field of the enquiry form: off screen for people, present for bots (enquiry.php refuses a filled one) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the outcome of a submission: enquiry.php sends the visitor back to /contact#sent or /contact#send-failed, and only the
   block whose id is the fragment shows, with or without JS */
/* as wide as the fields; the fragment jump stops below the fixed nav, not under it */
.form-status { display: none; max-width: none; margin-bottom: var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: 8px; scroll-margin-top: 8.5rem; }
.form-status:target { display: block; }
/* the bilingual line above the first field that links the privacy notice; links on the notice page and here are ink and
   always underlined (the taupe of other body links is too light for small text) */
.form-note { max-width: none; margin-bottom: var(--s-2); color: var(--ink-mute); font-size: var(--t-sm); }
.form-note + .field { margin-top: var(--s-4); }
.form-note a, .notice a, .notice-lang a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* the privacy notice: one reading column, English then Malay, each language a section the language links jump to */
.notice-lang { margin-top: var(--s-6); font-size: var(--t-sm); }
.notice section { max-width: 72ch; scroll-margin-top: 8.5rem; overflow-wrap: break-word; }
.notice section > * + * { margin-top: var(--s-4); }
.notice section > h3 { margin-top: var(--s-8); }
.notice section + section { margin-top: var(--s-16); padding-top: var(--s-16); border-top: 1px solid var(--line); scroll-margin-top: 4rem; }
.notice-dates { color: var(--ink-mute); font-size: var(--t-sm); }
.notice ul { list-style: disc; padding-left: 1.25em; }
.notice li + li { margin-top: var(--s-2); }
/* the aside: Call, Write and Visit in one rhythm, a label with its value 8px under it and 32px from one item to the next.
   The first label lines up with the form's first label (no margin above it) */
.contact-grid aside { display: flex; flex-direction: column; gap: var(--s-8); }
/* overflow-wrap lets the email wrap inside its fit content item under enlarged text */
.contact-item { display: flex; flex-direction: column; align-items: flex-start; overflow-wrap: anywhere; }
.contact-item .label { margin-bottom: var(--s-2); }
.contact-item a { position: relative; color: var(--ink); }
.contact-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the phone and the email keep a 44px tap height without the box pushing their text away from the label */
.contact-item a::after { content: ""; position: absolute; inset: calc(50% - 22px) 0; }
.contact-tel { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; }
.contact-hours { color: var(--ink-mute); font-size: var(--t-sm); }
.contact-item address { font-style: normal; color: var(--ink-mute); font-size: var(--t-sm); }
.contact-call { display: none; }   /* phones only: a call button in the first screen, the phone number sits far below the form there */
.map-link { display: block; border-radius: 16px; border: 1px solid var(--line); padding: var(--s-6); background: var(--paper); color: var(--ink-mute); font-size: var(--t-sm); }
.map-link strong { color: var(--ink); display: block; margin-bottom: 0.3rem; font-family: var(--font-display); }
.map-link:hover { border-color: var(--taupe); }

/* ---------- 10 · FOOTER ---------- */
/* the closing section (the consultation card) ends at its card; the footer's margin below it is the one gap */
main > .section:last-child { padding-bottom: 0; }
body > footer { border-top: 1px solid var(--line); margin-top: var(--s-16); overflow: hidden; background: var(--bg); container-type: inline-size; }
/* the brand block takes the left; the three link columns hug their text with equal 96px gaps and end on the right edge */
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, max-content); gap: var(--s-12) var(--s-24); padding-block: var(--s-12) var(--s-8); }
.foot-grid .foot-h { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 var(--s-4); color: var(--ink-mute); }
.foot-logo { display: block; width: auto; height: 30px; margin: 0.3125rem 0 var(--s-3); }   /* 0.3125rem is the cap offset of the 12px headings: the logo top meets their capitals */
.foot-grid p, .foot-grid li { color: var(--ink-mute); font-size: var(--t-sm); }
.foot-grid ul { margin: 0; padding: 0; list-style: none; }
.foot-grid address { font-style: normal; line-height: 1.7; font-size: var(--t-sm); color: var(--ink-mute); }
.foot-grid a:not(.foot-tel) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink-mute); text-decoration: none; transition: color 0.2s; }
.foot-grid a:not(.foot-tel):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-tel { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--ink); }
.foot-base { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--line); color: var(--ink-mute); font-size: var(--t-xs); }
/* the privacy notice link after the copyright: the footer's link sizes (44px rows, 32px on mouse only screens) */
.foot-base a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-left: var(--s-4); color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.foot-base a:hover { color: var(--ink); }
/* mouse only screens from 721px: 32px link rows (WCAG 2.2 asks 24px). The heading gains 8px so the first link, the phone number
   and the line under the logo share one baseline */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .foot-grid .foot-h { margin-bottom: var(--s-6); }
  .foot-grid a:not(.foot-tel) { min-height: 32px; }
  .foot-grid .foot-tel { min-height: 32px; line-height: 1.2; }
  .foot-base a { min-height: 32px; }
}
/* any touch input, a touch laptop with a mouse included: the 44px rows come back */
@media (any-pointer: coarse) {
  .foot-grid .foot-h { margin-bottom: var(--s-4); }
  .foot-grid a:not(.foot-tel), .foot-grid .foot-tel, .foot-base a { min-height: 44px; }
  .foot-grid .foot-tel { line-height: normal; }
}
/* two columns below a 1080px footer at the default text size. A container query in rem follows a larger root size too, so the
   link columns can never squeeze the brand block to nothing */
@container (max-width: 67.5rem) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-12); }
}

/* ---------- 11 · MOTION ---------- */
.reveal { opacity: 1; transform: none; }
.motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.motion .reveal.in { opacity: 1; transform: none; }
/* subpages: the blocks in view at load follow the title one by one (site.js marks them first with --i) */
.motion .reveal.first { transition-delay: calc(1s + var(--i, 0) * 0.12s); }
/* focus-triggered reveal: instant, so a tabbed-into control is visible on the first frame */
.motion .reveal.now { transition: none; }
.motion .words-wait.now .w { animation-duration: 0s; animation-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .motion .reveal, .motion .w, .motion .vhero-head, .motion .vhero-center h1 .line, .motion .vhero-center .cta,
  .motion .nav-links, .motion .page-hero h1, .motion .hero-seal { opacity: 1; transform: none; }
  .motion [data-words] { visibility: visible; }
  .motion .nav-pill { max-width: 920px; }
}

/* ---------- 12 · RESPONSIVE ---------- */
/* home hero from 1200px: the seal leaves the column for the corner. In the column it took 164px of the height and pushed
   the title up against the nav on a laptop screen. It cannot cover the title or the CTA here: their 800px column starts
   200px or more from the edge and the seal ends at 180px. The row gap keeps the title off the nav in a very short window. */
@media (min-width: 1200px) {
  .vhero { row-gap: 2.5rem; }
  .vhero .hero-seal { position: absolute; left: clamp(1.5rem, 4vw, 3rem); bottom: clamp(1.5rem, 4vw, 3rem); margin-top: 0; }
  .vhero-head .nav.menu-open .nav-menu { display: none; }   /* a menu opened below 1200px must not stay open once its button is gone */
}
/* home hero below 1200px: the 719px nav pill and the 324px logo no longer fit side by side, so the menu button takes over */
@media (max-width: 1199px) {
  .vhero-head .nav-pill { display: none; }
  .vhero-head .nav-toggle { display: flex; }
}
@media (max-width: 1080px) {
  .ccard { height: auto; min-height: 500px; }
  .ccard--carousel { height: 585px; }
  .method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* nine cards: a collapsed track is about 45px here, so the side number needs less room */
  .xcard-side { padding: var(--s-4); }
  .xcard-num { font-size: 1.1rem; }
  /* nine systems: two equal columns, and every card stacks its list above its picture. The globe is a band along the bottom */
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-card, .svc-card--globe, .svc-card--wide { grid-column: auto; display: flex; min-height: 0; padding: var(--s-6) var(--s-6) 0; }
  .svc-card--globe .svc-list { max-width: none; }
  .svc-globe { position: relative; flex: none; width: auto; height: 21rem; aspect-ratio: auto; max-height: none; margin: auto calc(var(--s-6) * -1) 0; }
  .svc-card--wide .svc-list { padding-bottom: 0; }
  .svc-pic, .svc-card--wide .svc-pic { min-height: 11rem; margin: var(--s-6) calc(var(--s-6) * -1) 0 0; }
  .svc-pic--net { min-height: 12rem; margin: var(--s-4) 0 var(--s-6); }
}
/* subpage nav up to 64em: the logo, five links and the CTA need about 945px, so the menu button takes over at the same
   width as the About page (about.css, 64rem container query); em follows an enlarged browser text size the same way */
@media (max-width: 64em) {
  .nav--light .nav-links, .nav--light .nav-cta { display: none; }
  .nav--light .nav-toggle { display: flex; }
  /* subpage fallback dropdown (old markup uses .nav-links directly) */
  .js .nav--light.menu-open .nav-links {
    display: flex; flex-direction: column; gap: 0; opacity: 1; animation: none; /* the dropdown must not inherit the desktop nav-links entrance fade (opacity:0 until 1.5s) */
    position: absolute; top: calc(100% + 10px); right: 0.75rem; width: 240px;
    background: #fff; border: 1px solid var(--line);
    border-radius: 16px; padding: 0.75rem;
  }
  .js .nav--light.menu-open .nav-links a { padding: 0.85rem 1rem; min-height: 44px; color: var(--ink); opacity: 1; }
}
@media (max-width: 720px) {
  .section { padding-block: var(--s-16); }
  .nav-links, .nav-pill, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-logo img { height: 24px; }
  /* hero heading: let it flow as one balanced block (desktop line-groups orphan words on narrow screens) */
  .vhero-center h1 { font-size: clamp(28px, 8vw, 40px); text-wrap: balance; }
  .vhero-center h1 .line { display: inline; }
  .why-grid { grid-template-columns: 1fr; }
  .sol, .contact-grid { grid-template-columns: 1fr; }
  .contact-call { display: inline-flex; margin-top: var(--s-6); }
  .brand-tiles { grid-template-columns: repeat(2, 1fr); }
  .brand-tile { padding: var(--s-4); }
  .sol-visual { min-height: 180px; }
  /* expanding strip goes vertical on small screens */
  .xcards { grid-template-columns: 1fr !important; grid-template-rows: 5fr repeat(8, 1fr); height: 832px; gap: 8px; }
  .xcard-vtitle { writing-mode: horizontal-tb; transform: none; max-height: none; }
  .xcard-side { flex-direction: row; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); }
  .timeline { max-width: 100%; }
  .timeline::before { left: 28px; }
  .tl-item { padding-block: var(--s-4); }
  .tl-item:nth-child(odd) .tl-card,
  .tl-item:nth-child(even) .tl-card { width: auto; margin: 0 0 0 80px; padding: 0; text-align: left; }
  .tl-item:nth-child(odd) .tl-node,
  .tl-item:nth-child(even) .tl-node { left: 0; right: auto; }
  .tl-connect { display: none; }
  .mv, .awards, .letters, .method, .lead-split { grid-template-columns: minmax(0, 1fr); }
  /* rem paddings grow with an enlarged root font; trim them on phones so the cards keep a side gutter */
  .mv { padding: var(--s-8); }
  .letter { padding: var(--s-6); }
  .lead-photo { min-height: 240px; }
  .vhero .hero-seal { --seal: 96px; }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s-8); padding-block: var(--s-8); }
  .foot-base { flex-direction: column; }
  .chat-bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .ccard--adapt { min-height: auto; padding: var(--s-8) var(--s-6); }
  .adapt-wrap { margin-top: var(--s-8); }
  .adapt-fade { display: none; }
  .adapt-list.rotating { margin-top: 0; overflow: hidden; }
  .bubble-skel { margin-inline: 24px; }
  .bubble-morph { margin-inline: 18px; }
  .testi-blockA { flex-direction: column; align-items: flex-start; }
  .svc { padding-block: var(--s-16); }
  .svc-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--s-3); }
  .svc-globe { height: 17rem; }
  /* 404 page: the five recovery links wrap unevenly (two, then three) as a flex row, so on a phone they form an even grid with Home across the top */
  .nf-links { display: grid; grid-template-columns: 1fr 1fr; }
  .nf-links .btn { justify-content: center; }
  .nf-links .btn:first-child { grid-column: 1 / -1; }
}

/* ---------- 12 · PROJECTS ---------- */
.proj-tile { aspect-ratio: 5 / 3; background: var(--taupe-ui); display: grid; place-items: center; }
.client-cols { display: grid; gap: var(--s-12); }
.client-tiles { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3) var(--s-4); }
/* client logos: each file is trimmed to its ink and its width and height attributes give every mark the same visual area (about
   3600 CSS px squared, at most 64 px tall and the cell wide); the tiles share one height so the rows line up */
.client-tile { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: var(--s-4); }
.client-tile img { display: block; max-width: 100%; height: auto; }
.pr-filters { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html:not(.js) .pr-filters, html:not(.js) .pr-count { display: none; }
.pr-cell { display: flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: 0 var(--s-4); border-left: 1px solid var(--line); }
.pr-cell:first-child { border-left: 0; }
.pr-cell label { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.pr-cell select, .pr-cell input {
  font: inherit; font-size: var(--t-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  background: transparent; border: 0; flex: 1; min-width: 0; min-height: 44px;
}
.pr-cell select {
  appearance: none; padding-right: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23171717' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center / 10px 6px;
}
.pr-cell select:focus-visible, .pr-cell input:focus-visible, .pr-clear:focus-visible, .pr-media--scroll:focus-visible { outline: 2px solid var(--char); outline-offset: 2px; }
.pr-clear { font: inherit; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: 0; color: var(--ink-mute); cursor: pointer; min-height: 44px; padding: 0 var(--s-2); }
.pr-count, .pr-empty { font-size: var(--t-sm); color: var(--ink-mute); margin: var(--s-4) 0 var(--s-2); }
.pr-empty { padding-block: var(--s-8); }
.pr-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.pr-row {
  --pr-h: clamp(180px, 20vw, 300px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start;
  padding-block: var(--s-8); border-top: 1px solid var(--line);
}
.pr-row[hidden] { display: none; }
/* rows are content-driven; the photo strip sets the minimum so the link sits at its bottom edge in the common case */
.pr-info { display: flex; flex-direction: column; min-height: var(--pr-h); }
.pr-info h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.15; font-weight: 500; text-wrap: balance; }
.pr-meta { margin: var(--s-6) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); }
.pr-meta-wide { grid-column: 1 / -1; }
.pr-meta dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.2rem; }
.pr-meta dd { margin: 0; font-size: var(--t-sm); color: var(--ink); }
/* the contact link and the solution link sit side by side where the single link sat; each is a 44px tap target */
.pr-links { margin-top: auto; padding-top: var(--s-6); display: flex; flex-wrap: wrap; gap: 0 var(--s-6); }
.pr-link { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
/* the explicit row track sizes every photo; padding or a native scrollbar only add below it */
.pr-media { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: var(--pr-h); gap: var(--s-3); overflow: hidden; }
.pr-media img { display: block; object-fit: cover; }
.pr-media img, .pr-media .proj-tile { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; }
/* a client logo in place of a word tile (the owner's request of 2026-10-09): the logo is the whole picture, on the hairline grey so
   the first row still fades in above the proof's 5% ink; one 2:1 box, 60% of the tile tall and at most 80% of it wide, holds every mark */
.pr-media .proj-tile--logo { background: var(--line); container-type: size; }
.pr-media .proj-tile--logo .pr-logo { width: min(80cqw, 120cqh); height: 60cqh; object-fit: contain; }
.pr-media--scroll { padding-bottom: 10px; grid-auto-columns: calc(50% - var(--s-3) / 2); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--char) transparent; }
.pr-media--scroll::-webkit-scrollbar { height: 2px; }
.pr-media--scroll::-webkit-scrollbar-thumb { background: var(--char); }
.pr-media--scroll img { scroll-snap-align: start; }
@media (max-width: 1080px) {
  .client-tiles { grid-template-columns: repeat(4, 1fr); }
  .pr-filters { grid-template-columns: repeat(2, 1fr); }
  .pr-cell:nth-child(3) { border-left: 0; }
  .pr-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .client-tiles { grid-template-columns: repeat(2, 1fr); }
  .client-tile { padding: var(--s-3); }
  .pr-filters { grid-template-columns: minmax(0, 1fr); }   /* minmax(0, ...): a cell may shrink below its content, so the bar never pushes a 320px page wide */
  .pr-cell { border-left: 0; }
  .pr-cell + .pr-cell { border-top: 1px solid var(--line); }
  .pr-row { grid-template-columns: 1fr; gap: var(--s-6); --pr-h: 200px; }
  .pr-info { min-height: 0; }
  .pr-media--scroll { grid-auto-columns: 85%; }
}

/* fallback: the bootstrap gave up on site.js, everything shows at once with no residual transition */
.fallback .reveal, .fallback .w, .fallback [data-words], .fallback .page-hero h1 { transition: none !important; animation: none !important; }

/* print: nothing waits for a scroll or an animation */
@media print {
  .motion [data-words] { visibility: visible !important; }
  .motion .reveal, .motion .words-wait, .motion .w, .motion .page-hero h1, .motion .hero-seal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}