/* ==========================================================================
   Take Six Africa: v2 design system (pilot on the home page)
   See STYLE-GUIDE.md. Scoped to body.v2. Uses color tokens from style.css only.
   ========================================================================== */

@font-face { font-family: 'Host Grotesk'; src: url('/assets/fonts/HostGrotesk.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Host Grotesk'; src: url('/assets/fonts/HostGrotesk-Italic.woff2') format('woff2'); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/GeistMono.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

body.v2 {
  --f-sans: 'Host Grotesk', 'Montserrat', system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter: clamp(16px, 2.8vw, 40px);
  --section-y: clamp(80px, 12vw, 160px);
  --radius: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --hdr-row: 84px;
  --nav2-h: 46px;
  --header-h: calc(var(--hdr-row) + var(--nav2-h)); /* both header rows: pages pad their heroes by this */
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-white);
}
body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4, body.v2 h5, body.v2 h6 { font-family: var(--f-sans); font-weight: 500; text-transform: none; color: inherit; margin: 0; }
body.v2 p { margin: 0 0 1em; }
body.v2 :focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; }
body.v2.lock { overflow: hidden; }

/* ---------- Type primitives ---------- */
.v2 .display { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; }
.v2 .statement { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -0.01em; font-weight: 500; }
.v2 .title { font-size: 20px; line-height: 1.2; font-weight: 500; }
.v2 .small { font-size: 14px; line-height: 1.5; }
.v2 .label, .v2 .mono {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase;
}
.v2 .label { display: inline-block; }
.v2 .measure { max-width: 38rem; }

/* Mono link with [ + ] marker */
.v2 .tlink { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: inherit; display: inline-flex; gap: .6em; align-items: center; white-space: nowrap; }
.v2 .tlink::after { content: '[ + ]'; display: inline-block; transition: transform .3s var(--ease); }
.v2 .tlink:hover, .v2 .tlink:focus-visible { color: inherit; }
.v2 .tlink:hover::after { transform: rotate(90deg); }

/* Pill button */
.v2 .pill {
  display: inline-flex; align-items: center; gap: .5em; padding: 12px 20px; border-radius: 999px; border: 1px solid currentColor;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  color: inherit; background: transparent; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.v2 .pill:hover, .v2 .pill:focus-visible { background: var(--c-white); color: var(--c-navy); border-color: var(--c-white); }
.v2 .pill.solid { background: var(--c-white); color: var(--c-navy); border-color: var(--c-white); }
.v2 .pill.solid:hover { background: transparent; color: var(--c-white); }
.v2 .pill.ink { color: var(--c-navy); }
.v2 .pill.ink:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }

/* ---------- Layout ---------- */
.v2 .wrap { padding-inline: var(--gutter); }
.v2 .section { position: relative; padding-block: var(--section-y); }
.v2 .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.v2 .hair { border-top: 1px solid var(--c-line-1); }
.v2 .on-dark { color: var(--c-white); }
.v2 .on-dark .hair, .v2 .hair.light { border-top-color: var(--c-menu-link); }

/* ---------- Header ---------- */
.v2 .hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100; color: var(--c-white);
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.v2 .hdr::before { /* blur + brand color once scrolled */
  content: ''; position: absolute; inset: 0; background: var(--hdr-bg, var(--c-deep)); opacity: 0; transition: opacity .35s var(--ease), background-color .2s linear;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.v2 .hdr.scrolled::before { opacity: .96; }
.v2.page-service .hdr::after { /* service pages only (photo heroes): dark fade under the transparent header; hidden once the solid background is on */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 72px); z-index: -1; pointer-events: none;
  background: linear-gradient(var(--c-shadow) 0%, var(--c-shadow) 35%, transparent 100%); transition: opacity .35s var(--ease);
}
.v2.page-service .hdr.scrolled::after, .v2.page-service .hdr.on-light::after, .v2.page-service .hdr.menu-open::after { opacity: 0; }
.v2 .hdr.hidden { transform: translateY(-100%); }
/* Row 1: logo · About · Contact · Get a Quote. Row 2 (.nav): the services, each with its own dropdown. */
.v2 .hdr-in { position: relative; display: flex; align-items: center; gap: 24px; height: var(--hdr-row); padding-inline: var(--gutter); }
.v2 .hdr .brand { display: block; line-height: 0; margin-right: auto; }
.v2 .hdr .brand img { width: auto; height: 72px; transition: filter .35s var(--ease); }
.v2 .nav-top > ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.v2 .nav-top a, .v2 .nav .navlink, .v2 .nav button.navbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font-family: var(--f-sans); font-size: 16px; font-weight: 500; color: inherit; opacity: .8; transition: opacity .2s;
}
.v2 .nav-top a:hover, .v2 .nav-top [aria-current="page"], .v2 .nav .navlink:hover, .v2 .nav .navlink[aria-current="page"],
.v2 .nav button.navbtn:hover, .v2 .nav .open > .navlink, .v2 .nav .open > button.navbtn { opacity: 1; color: inherit; }
.v2 .nav { position: relative; height: var(--nav2-h); padding-inline: var(--gutter); border-top: 1px solid var(--c-menu-link); }
.v2 .hdr.on-light .nav { border-top-color: var(--c-line-1); }
.v2 .nav > ul { display: flex; justify-content: space-between; align-items: center; height: 100%; list-style: none; margin: 0 auto; padding: 0; max-width: 1280px; }
.v2 .nav .navlink { padding: 8px 2px 8px 0; font-size: 15px; white-space: nowrap; }
.v2 .nav button.navbtn { padding: 8px 6px; }
.v2 .navbtn .chev { font-family: var(--f-mono); font-size: 11px; transition: transform .3s var(--ease); }
.v2 .has-drop { position: relative; display: flex; align-items: center; }
.v2 .has-drop.open .chev { transform: rotate(180deg); }
.v2 .drop {
  position: absolute; top: calc(100% + 8px); left: 50%; min-width: 300px; padding: 10px 18px; border-radius: var(--radius);
  background: var(--hdr-bg, var(--c-deep)); color: var(--c-white); list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.v2 .nav > ul > li:first-child .drop { left: 0; transform: translate(0, -6px); }
.v2 .nav > ul > li:last-child .drop { left: auto; right: 0; transform: translate(0, -6px); }
.v2 .drop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.v2 .has-drop.open .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.v2 .nav > ul > li:first-child.open .drop, .v2 .nav > ul > li:last-child.open .drop { transform: translate(0, 0); }
.v2 .drop li + li { border-top: 1px solid var(--c-menu-link); }
.v2 .drop a { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 12px 0; font-size: 16px; color: var(--c-white); }
.v2 .drop a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 4px; }
.v2 .drop a .mono { opacity: .7; }
.v2 .drop a:hover .mono { opacity: 1; }
.v2 .hdr .cta { margin-left: 8px; }
/* Contrast-aware: v2.js adds .on-light while the transparent header sits over a light background. */
/* A soft halo keeps the nav readable over busy photos, in both modes. */
.v2 .hdr:not(.scrolled) :is(.nav-top a, .navlink, .navbtn) { text-shadow: 0 0 14px var(--c-shadow); }
.v2 .hdr.on-light:not(.scrolled):not(.menu-open) { color: var(--c-navy); }
.v2 .hdr.on-light:not(.scrolled):not(.menu-open) :is(.nav-top a, .navlink, .navbtn) { text-shadow: 0 0 10px var(--c-menu-link), 0 0 2px var(--c-menu-link); }
.v2 .hdr.on-light:not(.scrolled):not(.menu-open) .brand img { filter: brightness(0); }
.v2 .hdr.on-light:not(.scrolled):not(.menu-open) .pill:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.v2 .burger { display: none; }

@media (max-width: 1180px) { /* header only: the 6 services need ~1100px, so smaller screens use the burger */
  body.v2 { --hdr-row: 70px; --header-h: 70px; }
  .v2 .hdr .brand img { width: auto; height: 54px; }
  .v2 .nav, .v2 .nav-top { display: none; }
  .v2 .hdr .cta { margin-left: 0; padding: 10px 14px; }
  .v2 .burger {
    display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid currentColor;
    border-radius: 999px; background: none; color: inherit; cursor: pointer;
  }
  .v2 .burger span, .v2 .burger span::before, .v2 .burger span::after { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; transition: transform .3s var(--ease), background-color .3s; }
  .v2 .burger span::before, .v2 .burger span::after { content: ''; position: absolute; left: 0; }
  .v2 .burger span::before { top: -5px; } .v2 .burger span::after { top: 5px; }
  .v2 .hdr.menu-open .burger span { background: transparent; }
  .v2 .hdr.menu-open .burger span::before { transform: translateY(5px) rotate(45deg); }
  .v2 .hdr.menu-open .burger span::after { transform: translateY(-5px) rotate(-45deg); }
}
/* Mobile menu panel */
.v2 .mpanel {
  position: fixed; inset: 0; z-index: 99; background: var(--hdr-bg, var(--c-deep)); color: var(--c-white);
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px; display: flex; flex-direction: column; gap: 28px; overflow-y: auto;
  clip-path: inset(0 0 100% 0); transition: clip-path .5s var(--ease); visibility: hidden;
}
.v2 .mpanel.open { clip-path: inset(0 0 0 0); visibility: visible; }
.v2 .mpanel ul { list-style: none; margin: 0; padding: 0; }
.v2 .mpanel li { border-top: 1px solid var(--c-menu-link); }
.v2 .mpanel a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; color: var(--c-white); font-size: 26px; font-weight: 500; }
.v2 .mpanel .sub a { font-size: 18px; padding: 10px 0; }

/* ---------- Hero ---------- */
.v2 .hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  padding: calc(var(--header-h) + 48px) 0 clamp(40px, 6vw, 72px);
  background-image: linear-gradient(var(--c-teal-2) 0%, var(--c-deep) 100%); color: var(--c-white);
}
.v2 .hero-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.v2 .hero .eyebrow { grid-column: 1 / span 12; margin-bottom: 8px; }
/* One bold white line (wraps only on narrow screens), the short text right under it */
.v2 .hero h1 { grid-column: 1 / -1; color: var(--c-white); font-weight: 700; font-size: clamp(36px, 5.5vw, 108px); line-height: 1; letter-spacing: -0.03em; }
@media (min-width: 900px) { .v2 .hero h1 { white-space: nowrap; } }
.v2 .hero .lead { grid-column: 1 / span 7; margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--c-white); opacity: .92; max-width: 42rem; }

/* ---------- Reel (video carousel) ---------- */
.v2 .reel { position: relative; }
.v2 .reel-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: 32px; }
.v2 .reel-head .copy { grid-column: 1 / span 7; }
.v2 .reel-head .copy .label { margin-bottom: 16px; }
.v2 .reel-head .ctrl { grid-column: 9 / span 4; display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
.v2 .reel-count { font-family: var(--f-mono); font-size: 12px; margin-right: auto; }
.v2 .reel-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
.v2 .reel-btn[disabled] { opacity: .35; cursor: default; }
.v2 .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.v2 .chip { padding: 9px 14px; }
.v2 .chip[aria-pressed="true"] { background: var(--c-white); color: var(--c-navy); border-color: var(--c-white); }
.v2 .reel-track {
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter) 8px; scrollbar-width: none; cursor: grab;
}
.v2 .reel-track::-webkit-scrollbar { display: none; }
.v2 .reel-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.v2 .reel-track.dragging * { pointer-events: none; }
.v2 .card { flex: 0 0 clamp(280px, 42vw, 640px); scroll-snap-align: start; }
.v2 .card[hidden] { display: none; }
.v2 .card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.v2 .card-top .title { margin: 0; }
.v2 .card .vbox { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--c-black); cursor: pointer; }
.v2 .card .vbox img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s; }
.v2 .card:hover .vbox img.poster { transform: scale(1.04); }
.v2 .card .vbox iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
.v2 .card .vbox.playing iframe { opacity: 1; }
.v2 .card .vbox.playing img.poster { opacity: 0; }
.v2 .card .vbox .empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c-white);
  background-image: linear-gradient(135deg, var(--c-teal-2) 0%, var(--c-deep) 100%);
}
.v2 .card .vbox img.poster + .empty { background: none; align-items: flex-end; justify-content: flex-start; padding: 14px; }
.v2 .card .vbox .play {
  position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--c-white); color: var(--c-white);
  display: flex; align-items: center; justify-content: center; background: transparent; transition: background-color .3s, color .3s;
}
.v2 .card .vbox .play svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }
.v2 .card:hover .vbox .play { background: var(--c-white); color: var(--c-navy); }
.v2 .reel-progress { height: 1px; margin: 28px var(--gutter) 0; background: var(--c-line-1); position: relative; }
.v2 .on-dark .reel-progress, .v2 .reel-progress.light { background: var(--c-menu-link); }
.v2 .reel-progress span { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: currentColor; transition: width .2s linear; }
@media (max-width: 767px) {
  .v2 .reel-head .copy, .v2 .reel-head .ctrl { grid-column: 1 / -1; }
  .v2 .reel-head .ctrl { justify-content: flex-start; }
  .v2 .card { flex-basis: 84vw; }
}

/* ---------- The 3 Cs ---------- */
.v2 .three-c { background: var(--c-white); color: var(--c-navy); }
.v2 .three-c .intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-bottom: clamp(40px, 6vw, 80px); }
.v2 .three-c .intro .label { grid-column: 1 / span 3; color: var(--c-teal); }
.v2 .three-c .intro .statement { grid-column: 4 / span 8; }
.v2 .crow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 32px 0 40px; align-items: start; }
.v2 .crow:last-child { border-bottom: 1px solid var(--c-line-1); }
.v2 .crow .idx { grid-column: 1 / span 3; color: var(--c-teal); padding-top: 12px; }
.v2 .crow .word { grid-column: 4 / span 4; display: flex; align-items: center; gap: 18px; font-size: clamp(36px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.02em; font-weight: 500; }
.v2 .crow .word::before { content: ''; flex: 0 0 6px; height: .95em; background: var(--c-teal); border-radius: 1px; }
.v2 .crow .body { grid-column: 8 / span 5; margin: 0; padding-top: 6px; color: var(--c-text); }

/* ---------- About ---------- */
.v2 .about { background: var(--c-sea); color: var(--c-navy); }
/* The slideshow fills the whole section; the text sits on the right on frosted glass, vertically centred. */
.v2 .about.section { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(520px, 78svh, 780px); padding-block: clamp(72px, 8vw, 112px); }
.v2 .about > .wrap { position: static; width: 100%; pointer-events: none; }
.v2 .about .copy { z-index: 1; }
.v2 .about .grid { align-items: center; }
.v2 .about .media { position: absolute; inset: 0; z-index: 0; pointer-events: auto; }
.v2 .about .copy { grid-column: 8 / span 5; padding: clamp(24px, 2.6vw, 36px); pointer-events: auto; }
.v2 .about .copy .label { margin-bottom: 20px; }
.v2 .about .copy .statement { margin-bottom: 24px; }
.v2 .about .copy p { max-width: 36rem; }
.v2 .slideshow { margin: 0; }
.v2 .about .slideshow, .v2 .about .slideshow .oview { height: 100%; }
.v2 .about .slideshow .oview { aspect-ratio: auto; border-radius: 0; }
.v2 .about .slideshow .obar { position: absolute; left: var(--gutter); bottom: clamp(20px, 3vw, 36px); z-index: 2; width: min(440px, calc(100% - 2 * var(--gutter))); margin: 0; }
.v2 .about .slideshow .osegs span { background: var(--c-menu-link); }
.v2 .about .slideshow .osegs i { background: var(--c-white); }
.v2 .about .slideshow .onum { color: var(--c-white); }
.v2 .about .slideshow .ocb { border-color: var(--c-menu-link); color: var(--c-white); }
.v2 .about .slideshow .ocb:hover { background: var(--c-white); color: var(--c-navy); }
@media (max-width: 921px) { .v2 .about .copy { grid-column: 1 / -1; margin-bottom: 56px; } }

/* ---------- Story (full-bleed image) ---------- */
.v2 .story { position: relative; min-height: 92svh; display: flex; align-items: flex-end; color: var(--c-white); overflow: hidden; }
.v2 .story .bg { position: absolute; inset: -8% 0; background-position: center; background-size: cover; }
.v2 .story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, var(--c-shadow) 100%); pointer-events: none; }
.v2 .story .grid { position: relative; z-index: 1; width: 100%; align-items: end; }
.v2 .story .statement { grid-column: 1 / span 8; }
.v2 .story .aside { grid-column: 10 / span 3; }
.v2 .story .aside p { margin-bottom: 20px; }

/* ---------- Services reel section ---------- */
.v2 .services { background: var(--c-sea); color: var(--c-navy); }
.v2 .services .pill { color: var(--c-navy); }
.v2 .services .pill:hover, .v2 .services .chip[aria-pressed="true"] { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.v2 .services .reel-progress { background: var(--c-line-1); }

/* ---------- Numbers ---------- */
.v2 .numbers2 { background-image: linear-gradient(var(--c-teal-3) 0%, var(--c-deep) 100%); color: var(--c-white); }
.v2 .numbers2 .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-bottom: clamp(40px, 6vw, 80px); }
.v2 .numbers2 .head .label { grid-column: 1 / span 3; }
.v2 .numbers2 .head .statement { grid-column: 4 / span 8; }
.v2 .stats2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v2 .stat2 { padding: 28px 24px 8px 0; border-top: 1px solid var(--c-menu-link); }
.v2 .stat2 + .stat2 { padding-left: 24px; border-left: 1px solid var(--c-menu-link); }
.v2 .stat2 .num { display: block; font-size: clamp(56px, 7vw, 104px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; margin-bottom: 18px; }

/* ---------- CTA band ---------- */
.v2 .cta-band { background: var(--c-deep); color: var(--c-white); }
.v2 .cta-band .grid { align-items: end; }
.v2 .cta-band .display { grid-column: 1 / span 8; }
.v2 .cta-band .aside { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.v2 .cta-big {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 16px; padding: 22px 30px 22px 34px; border-radius: 999px;
  border: 0; cursor: pointer; background: var(--c-white); color: var(--c-navy);
  font-family: var(--f-sans); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.01em;
  box-shadow: 0 14px 40px var(--c-shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.v2 .cta-big .arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-orange); color: var(--c-white); transition: transform .35s var(--ease), background-color .35s var(--ease); }
.v2 .cta-big .arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.v2 .cta-big::after { /* shine sweep */
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, var(--c-menu-link), transparent); animation: shine 3.6s var(--ease) infinite;
}
.v2 .cta-big:hover, .v2 .cta-big:focus-visible { transform: translateY(-3px) scale(1.03); background: var(--c-teal); color: var(--c-white); }
.v2 .cta-big:hover .arrow { transform: rotate(-45deg); background: var(--c-white); color: var(--c-teal); }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .v2 .cta-big::after { animation: none; } }

/* ---------- Footer ---------- */
.v2 .ftr { color: var(--c-white); font-size: 16px; line-height: 1.6; }
.v2 .ftr a { color: var(--c-white); }
.v2 .ftr a:hover, .v2 .ftr a:focus-visible { color: var(--c-white); text-decoration: underline; text-underline-offset: 4px; }
.v2 .ftr-top { background: var(--c-deep); padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(40px, 5vw, 64px); }
.v2 .ftr-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.v2 .ftr-cols .intro { grid-column: 1 / span 4; }
.v2 .ftr-lead { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 12px !important; }
.v2 .ftr-cols .intro p { max-width: 24rem; }
.v2 .ftr-cta { margin-top: 12px; padding: 14px 22px; font-size: 13px; }
.v2 .ftr-cols .col { grid-column: span 2; display: block; padding: 0; width: auto; }
.v2 .ftr-cols .col-contact { grid-column: span 4; }
.v2 .ftr-h { display: block; margin: 0 0 16px; font-family: var(--f-sans); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.v2 .ftr-cols ul { list-style: none; margin: 0; padding: 0; }
.v2 .ftr-cols li + li { margin-top: 10px; }
.v2 .ftr-contact li { display: flex; gap: 12px; align-items: flex-start; }
.v2 .ftr-contact i { width: 18px; flex: 0 0 18px; margin-top: 5px; font-size: 15px; text-align: center; }
.v2 .ftr-bottom { background: linear-gradient(var(--c-deep) 0%, var(--c-teal-2) 100%); padding: 28px var(--gutter) 32px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; border-top: 1px solid var(--c-menu-link); }
.v2 .ftr-social { display: flex; align-items: center; gap: 16px; }
.v2 .ftr-social .ftr-h { margin: 0; }
.v2 .ftr-social .icons { display: flex; flex-wrap: wrap; gap: 10px; }
.v2 .ftr-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--c-white); color: var(--c-white); font-size: 16px; transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.v2 .ftr-social a:hover, .v2 .ftr-social a:focus-visible { background: var(--c-white); color: var(--c-deep); text-decoration: none; transform: translateY(-2px); }
.v2 .ftr-social svg { width: 15px; height: 15px; fill: currentColor; }
.v2 .ftr-copy { margin: 0 !important; font-size: 14px; opacity: .9; }
@media (max-width: 921px) {
  .v2 .ftr-cols .intro, .v2 .ftr-cols .col-contact { grid-column: 1 / -1; }
  .v2 .ftr-cols .col { grid-column: span 6; }
  .v2 .ftr-social { flex-wrap: wrap; }
}

/* ---------- Floating quote tab ---------- */
.v2 .quote-float { position: fixed; left: 20px; bottom: 20px; z-index: 90; background: var(--c-deep); color: var(--c-white); border-color: var(--c-deep); box-shadow: 0 10px 30px var(--c-line-1); }
.v2 .quote-float:hover { background: var(--c-white); color: var(--c-navy); border-color: var(--c-white); }

/* ---------- Quote modal ---------- */
.v2 .qm { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; visibility: hidden; }
.v2 .qm.open { visibility: visible; }
.v2 .qm-backdrop { position: absolute; inset: 0; background: var(--c-shadow); opacity: 0; transition: opacity .35s var(--ease); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.v2 .qm.open .qm-backdrop { opacity: 1; }
.v2 .qm-panel {
  position: relative; width: min(720px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; border-radius: 18px;
  background: var(--c-white); color: var(--c-navy); padding: clamp(24px, 4vw, 44px);
  opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.v2 .qm.open .qm-panel { opacity: 1; transform: none; }
.v2 .qm-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; padding: 0; justify-content: center; color: var(--c-navy); }
.v2 .qm-close:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.v2 .qm h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.01em; margin: 12px 0 8px; padding-right: 48px; }
.v2 .qm .lead { color: var(--c-text); margin-bottom: 24px; }
.v2 .qm fieldset { border: 0; margin: 0 0 20px; padding: 0; }
.v2 .qm legend, .v2 .qm .flabel { display: block; margin-bottom: 10px; color: var(--c-teal); }
.v2 .qm .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.v2 .qm input[type="text"], .v2 .qm input[type="email"], .v2 .qm input[type="tel"], .v2 .qm select, .v2 .qm textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--c-navy); background: var(--c-white);
  border: 1px solid var(--c-line-1); border-bottom-color: var(--c-text); border-radius: 8px; transition: border-color .2s;
}
.v2 .qm input:focus, .v2 .qm select:focus, .v2 .qm textarea:focus { outline: none; border-color: var(--c-teal); }
.v2 .qm textarea { min-height: 130px; resize: vertical; }
.v2 .qm .choice { display: flex; flex-wrap: wrap; gap: 8px; }
.v2 .qm .choice label { position: relative; }
.v2 .qm .choice input { position: absolute; opacity: 0; pointer-events: none; }
.v2 .qm .choice span { display: inline-flex; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--c-text); font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; transition: all .2s; }
.v2 .qm .choice input:checked + span { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.v2 .qm .choice input:focus-visible + span { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.v2 .qm .actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 8px; }
.v2 .qm .actions .small { color: var(--c-text); margin: 0; }
.v2 .qm .submit { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); padding: 15px 24px; }
.v2 .qm .submit:hover { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }
.v2 .qm .status { margin-top: 14px; color: var(--c-teal); font-weight: 500; min-height: 1.5em; }
.v2 .qm .hp { position: absolute; left: -9999px; }
.v2 .qm .done { display: none; text-align: left; padding: 24px 0 8px; }
.v2 .qm.sent form { display: none; }
.v2 .qm.sent .done { display: block; }
.v2 .qm .done .statement { margin: 16px 0 12px; }
@media (max-width: 600px) { .v2 .qm .row2 { grid-template-columns: 1fr; } }

/* ---------- Lightbox ---------- */
.v2 .lb { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; background: var(--c-black); visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility .3s; }
.v2 .lb.open { visibility: visible; opacity: 1; }
.v2 .lb .frame { width: min(1280px, 100%); aspect-ratio: 16 / 9; }
.v2 .lb iframe { width: 100%; height: 100%; border: 0; }
.v2 .lb .qm-close { color: var(--c-white); }

/* ---------- Responsive grid collapses ---------- */
@media (max-width: 921px) {
  .v2 .hero h1, .v2 .hero .lead, .v2 .about .copy, .v2 .about .media, .v2 .story .statement, .v2 .story .aside,
  .v2 .cta-band .display, .v2 .cta-band .aside, .v2 .three-c .intro .label, .v2 .three-c .intro .statement,
  .v2 .numbers2 .head .label, .v2 .numbers2 .head .statement { grid-column: 1 / -1; }
  .v2 .crow .idx { grid-column: 1 / -1; padding-top: 0; }
  .v2 .crow .word, .v2 .crow .body { grid-column: 1 / -1; }
  .v2 .stats2 { grid-template-columns: 1fr 1fr; }
  .v2 .stat2:nth-child(3) { border-left: 0; padding-left: 0; }
  .v2 .about .media { max-width: none; }
}

/* ---------- Motion start states (only when JS runs and motion is allowed) ---------- */
html.js.motion .v2 [data-reveal]:not([data-reveal="lines"]) { opacity: 0; }
html.js.motion .v2 [data-reveal="lines"] { visibility: hidden; }
.v2 .line-mask { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after { transition-duration: .01ms !important; }
}
.v2 .card .vbox .empty.dark { background: var(--c-deep); }
@media (max-width: 921px) { .v2 .quote-float { display: none; } } /* header CTA covers mobile */
/* Keep the floating Quote button clear of the last footer row (it's hidden on phones) */
.v2 .ftr-bottom { padding-bottom: 104px; }
.v2 .qm .status:empty { display: none; }
@media (max-width: 921px) { .v2 .ftr-bottom { padding-bottom: 40px; } }
@media (max-width: 921px) { .v2 .ftr-cols .col.col-contact { grid-column: 1 / -1; } }
.v2 .ftr-contact a[href^="tel:"] { white-space: nowrap; }

/* ==========================================================================
   Inner pages (services, about, contact)
   ========================================================================== */

/* Nav: highlight "Our Services" when on a service page */
.v2 .nav .navbtn.current { opacity: 1; }
.v2 .drop a[aria-current="page"] .mono { opacity: 1; }
.v2 .mpanel a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Photo hero ---------- */
.v2 .phero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; color: var(--c-white); overflow: hidden; background: var(--c-deep); }
.v2 .phero .bg { position: absolute; inset: -6% 0; background-position: 50% 0%; background-size: cover; }
.v2 .phero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 20%, var(--c-shadow) 100%); pointer-events: none; }
.v2 .phero .grid { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(40px, 6vw, 80px); align-items: end; }
.v2 .phero .copy { grid-column: 1 / span 8; }
.v2 .phero .copy .label { display: block; margin-bottom: 16px; }
.v2 .phero .tag { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; margin: 20px 0 0; max-width: 34rem; opacity: .95; }
.v2 .phero .aside { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* ---------- Split: label left, statement + body right ---------- */
.v2 .split .grid { align-items: start; }
.v2 .split .side { grid-column: 1 / span 3; }
.v2 .split .main { grid-column: 4 / span 8; }
.v2 .split .main .statement { margin-bottom: 32px; }
.v2 .split .main .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.v2 .split .main .cols p { margin: 0; }
.v2 .sea2 { background: var(--c-sea); color: var(--c-navy); }
.v2 .sea2 p { color: var(--c-black); }
.v2 .white2 { background: var(--c-white); color: var(--c-navy); }
.v2 .white2 .side .label { color: var(--c-teal); }

/* ---------- Media pair ---------- */
.v2 .media-pair { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: end; margin-top: clamp(40px, 6vw, 80px); }
.v2 .media-pair img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.v2 .media-pair .a { aspect-ratio: 4 / 3; }
.v2 .media-pair .b { aspect-ratio: 4 / 5; }


/* ---------- Client logo marquee ---------- */
.v2 .clients { padding-block: clamp(56px, 7vw, 96px); background: var(--c-white); color: var(--c-navy); }
.v2 .clients .head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 32px; }
.v2 .clients .head .label { color: var(--c-teal); }
.v2 .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--c-black) 8%, var(--c-black) 92%, transparent); mask-image: linear-gradient(90deg, transparent, var(--c-black) 8%, var(--c-black) 92%, transparent); }
.v2 .marquee-track { display: flex; align-items: center; gap: clamp(48px, 6vw, 96px); width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
.v2 .marquee:hover .marquee-track { animation-play-state: paused; }
.v2 .marquee img { height: clamp(48px, 5vw, 72px); width: auto; max-width: 200px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .v2 .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .v2 .marquee-track [aria-hidden="true"] { display: none; }
}

/* ---------- About: hero / mission / values / team ---------- */
.v2 .about-hero { background-image: linear-gradient(var(--c-teal-4) 0%, var(--c-deep) 100%); color: var(--c-white); }
.v2 .about-hero .grid { align-items: end; padding-top: calc(var(--header-h) + 56px); padding-bottom: clamp(56px, 7vw, 96px); }
.v2 .about-hero .copy { grid-column: 1 / span 6; }
.v2 .about-hero .copy .label { display: block; margin-bottom: 16px; }
.v2 .about-hero .copy p { color: var(--c-white); margin-top: 24px; max-width: 34rem; }
.v2 .about-hero .media { grid-column: 8 / span 5; }
.v2 .about-hero .media img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.v2 .mv { background-image: linear-gradient(var(--c-taupe) 0%, var(--c-steel) 100%); color: var(--c-white); }
.v2 .mv .grid > div { grid-column: span 6; }
.v2 .mv .label { display: block; margin-bottom: 20px; }
.v2 .values2 { background-image: linear-gradient(var(--c-teal-4) 0%, var(--c-deep) 100%); color: var(--c-white); }
.v2 .values2 .head, .v2 .team2 .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-bottom: clamp(40px, 5vw, 64px); }
.v2 .values2 .head .label, .v2 .team2 .head .label { grid-column: 1 / span 3; }
.v2 .values2 .head .display, .v2 .team2 .head .display { grid-column: 4 / span 9; }
.v2 .vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.v2 .vitem { padding: 28px 0 40px; border-top: 1px solid var(--c-menu-link); }
.v2 .vitem i { font-size: 30px; color: var(--c-black); display: block; margin-bottom: 20px; }
.v2 .vitem h3 { font-size: 22px; line-height: 1.2; margin-bottom: 12px; }
.v2 .vitem p { color: var(--c-black); font-size: 16px; margin: 0; }
.v2 .team2 { background-image: linear-gradient(var(--c-teal-4) 0%, var(--c-black) 100%); color: var(--c-white); }
.v2 .tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.v2 .person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); display: block; margin-bottom: 16px; background-image: linear-gradient(var(--c-teal-4) 0%, var(--c-deep) 100%); }
.v2 .person h3 { font-size: 20px; line-height: 1.2; margin-bottom: 6px; }
.v2 .person .label { opacity: .8; }

/* ---------- Contact ---------- */
/* Form on the left, floating on a photo panel; headline + business hours on the right, vertically centred */
.v2 .contact2 { background-image: linear-gradient(var(--c-teal-2) 0%, var(--c-deep) 100%); color: var(--c-white); }
.v2 .contact2 .grid { padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(56px, 7vw, 96px); align-items: start; }
.v2 .contact2 .formwrap { grid-column: 1 / span 6; }
.v2 .contact2 .formcard { position: relative; z-index: 1; max-width: none; background: var(--c-white); color: var(--c-navy); border-radius: 18px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 24px 60px var(--c-form-shadow); }
.v2 .formcard h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 22px; }
.v2 .contact2 .info { grid-column: 8 / span 5; padding-top: 8px; }
.v2 .contact2 .info .label { display: block; margin-bottom: 16px; }
.v2 .contact2 .info .display { font-size: clamp(34px, 3.6vw, 56px); }
.v2 .contact2 .info .lead { font-size: 18px; margin: 20px 0 28px; max-width: 30rem; }
.v2 .contact2 .hours { padding: 22px 24px; }
.v2 .contact2 .hours h2 { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.v2 .contact2 .hours ul { list-style: none; margin: 0; padding: 0; }
.v2 .contact2 .hours li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.5; }
.v2 .contact2 .hours li + li { margin-top: 6px; }
.v2 .contact2 .hours i { width: 18px; flex: 0 0 18px; font-size: 15px; text-align: center; color: var(--c-orange); }
.v2 .contact-form2 .flabel { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 500; color: var(--c-navy); }
.v2 .contact-form2 > input, .v2 .contact-form2 .row2 { margin-bottom: 16px; }
.v2 .contact2 .contact-form2 input[type="text"], .v2 .contact2 .contact-form2 input[type="email"], .v2 .contact2 .contact-form2 input[type="tel"], .v2 .contact2 .contact-form2 textarea {
  border: 1px solid var(--c-grey-bd); border-bottom-color: var(--c-grey-bd); border-radius: 10px; background: var(--c-input-bg); padding: 12px 14px; font-size: 15px;
}
.v2 .contact2 .contact-form2 input:focus, .v2 .contact2 .contact-form2 textarea:focus { background: var(--c-white); border-color: var(--c-teal); box-shadow: 0 0 0 3px var(--c-mist); }
.v2 .contact-form2 textarea { min-height: 120px; }
.v2 .contact-form2 .submit { display: flex; justify-content: center; width: 100%; margin-top: 18px; padding: 15px 24px; }
@media (max-width: 921px) {
  .v2 .contact2 .info { grid-row: 1; margin-bottom: 32px; }
}
.v2 .map2 iframe { display: block; width: 100%; height: clamp(320px, 45vw, 520px); border: 0; }

/* Shared v2 form fields (contact page) */
.v2 .form2 { position: relative; }
.v2 .form2 .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.v2 .form2 .flabel { display: block; margin-bottom: 10px; color: var(--c-teal); }
.v2 .form2 input[type="text"], .v2 .form2 input[type="email"], .v2 .form2 input[type="tel"], .v2 .form2 textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--c-navy); background: var(--c-white);
  border: 1px solid var(--c-line-1); border-bottom-color: var(--c-text); border-radius: 8px;
}
.v2 .form2 input:focus, .v2 .form2 textarea:focus { outline: none; border-color: var(--c-teal); }
.v2 .form2 textarea { min-height: 150px; resize: vertical; }
.v2 .form2 .hp { position: absolute; left: -9999px; }
.v2 .form2 .actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 20px; }
.v2 .form2 .actions .small { margin: 0; color: var(--c-text); }
.v2 .form2 .submit { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); padding: 15px 24px; }
.v2 .form2 .submit:hover { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }
.v2 .form2 .status { margin: 14px 0 0; color: var(--c-teal); font-weight: 500; }
.v2 .form2 .status:empty { display: none; }

@media (max-width: 921px) {
  .v2 .phero .copy, .v2 .phero .aside, .v2 .split .side, .v2 .split .main, .v2 .about-hero .copy, .v2 .about-hero .media,
  .v2 .mv .grid > div, .v2 .values2 .head .label, .v2 .values2 .head .display, .v2 .team2 .head .label, .v2 .team2 .head .display,
  .v2 .contact2 .info, .v2 .contact2 .formwrap { grid-column: 1 / -1; }
  .v2 .split .main .cols { grid-template-columns: 1fr; }
  .v2 .vgrid, .v2 .tgrid { grid-template-columns: 1fr 1fr; }
  .v2 .media-pair { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .v2 .vgrid { grid-template-columns: 1fr; }
  .v2 .form2 .row2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gel gradients: slow, subtle, living gradients (STYLE-GUIDE §6)
   Each gradient section keeps its own linear gradient as the base; a blurred layer of
   soft blobs in the *same two colors* drifts on top, behind the content.
   ========================================================================== */
.v2 :is(.hero, .numbers2, .about-hero, .mv, .values2, .team2, .contact2, .ftr-bottom, .gel) { position: relative; isolation: isolate; overflow: hidden; }
.v2 :is(.hero, .numbers2, .about-hero, .mv, .values2, .team2, .contact2, .ftr-bottom, .gel)::before {
  content: ''; position: absolute; inset: -35%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 28%, var(--g2) 0%, transparent 70%),
    radial-gradient(42% 50% at 78% 72%, var(--g1) 0%, transparent 70%),
    radial-gradient(30% 38% at 62% 22%, var(--g2) 0%, transparent 72%),
    radial-gradient(34% 40% at 30% 80%, var(--g1) 0%, transparent 72%);
  filter: blur(48px); opacity: .55; will-change: transform;
  animation: gel var(--gel-dur, 26s) ease-in-out infinite alternate;
}
@keyframes gel {
  0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  33%  { transform: translate3d(5%, 2%, 0) rotate(6deg) scale(1.08); }
  66%  { transform: translate3d(-2%, 5%, 0) rotate(-4deg) scale(1.04); }
  100% { transform: translate3d(3%, -4%, 0) rotate(3deg) scale(1.1); }
}
/* Colors per section = that section's own gradient stops */
.v2 .hero        { --g1: var(--c-teal-2); --g2: var(--c-orange); }
.v2 .numbers2    { --g1: var(--c-teal-3); --g2: var(--c-orange); --gel-dur: 30s; }
.v2 .about-hero  { --g1: var(--c-teal-4); --g2: var(--c-orange); }
.v2 .mv          { --g1: var(--c-taupe);  --g2: var(--c-steel); --gel-dur: 32s; }
.v2 .values2     { --g1: var(--c-teal-4); --g2: var(--c-orange); --gel-dur: 34s; }
.v2 .team2       { --g1: var(--c-teal-4); --g2: var(--c-black); --gel-dur: 36s; }
.v2 .contact2    { --g1: var(--c-teal-2); --g2: var(--c-orange); }
.v2 .ftr-bottom  { --g1: var(--c-teal-3);   --g2: var(--c-teal-2); --gel-dur: 30s; }
.v2 .gel         { --g1: var(--c-teal-4); --g2: var(--c-orange); }
.v2 .gel.grad-hero { background-image: linear-gradient(var(--c-teal-2) 0%, var(--c-deep) 100%); --g1: var(--c-teal-2); --g2: var(--c-orange); }
.v2 .gel.grad-coral { background-image: linear-gradient(var(--c-teal-4) 0%, var(--c-deep) 100%); }
.v2 .gel.grad-num { background-image: linear-gradient(var(--c-teal-3) 0%, var(--c-deep) 100%); --g1: var(--c-teal-3); --g2: var(--c-orange); }
/* The hero's GSAP parallax target stays above the gel layer */
.v2 .hero > * { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .v2 :is(.hero, .numbers2, .about-hero, .mv, .values2, .team2, .contact2, .ftr-bottom, .gel)::before { animation: none; }
}

/* ==========================================================================
   Secondary pages: page hero, services list, gallery, blog, articles, videos
   ========================================================================== */
.v2 .pagehero { color: var(--c-white); }
.v2 .pagehero .grid { padding-top: calc(var(--header-h) + 64px); padding-bottom: clamp(56px, 7vw, 96px); align-items: end; }
.v2 .pagehero .copy { grid-column: 1 / span 8; }
.v2 .pagehero .copy .label { display: block; margin-bottom: 16px; }
.v2 .pagehero .copy .tag { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; margin: 20px 0 0; max-width: 36rem; }
.v2 .pagehero .aside { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* Services list (old /services/ page) */
.v2 .svcrows { color: var(--c-white); }
.v2 .svcrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--c-menu-link); align-items: center; }
.v2 .svcrow:last-child { border-bottom: 1px solid var(--c-menu-link); }
.v2 .svcrow .idx { grid-column: 1 / span 1; align-self: start; padding-top: 10px; }
.v2 .svcrow .txt { grid-column: 2 / span 5; }
.v2 .svcrow .txt h2 { font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 16px; }
.v2 .svcrow .txt p { max-width: 32rem; margin: 0; }
.v2 .svcrow .med { grid-column: 8 / span 5; }
.v2 .svcrow .med img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); display: block; }
.v2 .svcrow .med .vbox { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--c-deep); cursor: pointer; }
.v2 .svcrow .med .vbox .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c-white); }
.v2 .svcrow .med .vbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
.v2 .svcrow .med .vbox.playing iframe { opacity: 1; }
.v2 .svcrow .med .vbox .play { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--c-white); color: var(--c-white); display: flex; align-items: center; justify-content: center; }
.v2 .svcrow .med .vbox .play svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }

/* Photo wall (gallery) */
.v2 .wall { columns: 3 320px; column-gap: 16px; }
.v2 .wall figure { margin: 0 0 16px; break-inside: avoid; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.v2 .wall img { width: 100%; height: auto; display: block; transition: transform 1.2s var(--ease); }
.v2 .wall figure:hover img { transform: scale(1.04); }
.v2 .lb.img .frame { aspect-ratio: auto; width: auto; max-width: min(1280px, 100%); }
.v2 .lb.img .frame img { max-width: 100%; max-height: calc(100svh - 64px); width: auto; height: auto; display: block; border-radius: 8px; }

/* News rows (blog index, categories) */
.v2 .news { background: var(--c-white); color: var(--c-navy); }
.v2 .nrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 28px 0 36px; border-top: 1px solid var(--c-line-1); align-items: start; color: var(--c-navy); }
.v2 .nrow:last-child { border-bottom: 1px solid var(--c-line-1); }
.v2 .nrow:hover { color: var(--c-navy); }
.v2 .nrow h2 { grid-column: 1 / span 4; font-size: 22px; line-height: 1.2; }
.v2 .nrow .meta { grid-column: 5 / span 2; color: var(--c-teal); }
.v2 .nrow .ex { grid-column: 7 / span 3; font-size: 15px; color: var(--c-text); margin: 0; }
.v2 .nrow .thumb { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.v2 .nrow .thumb img { width: 100%; max-width: 240px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); transition: transform .8s var(--ease); }
.v2 .nrow .thumb .ph { width: 100%; max-width: 240px; aspect-ratio: 4 / 3; border-radius: var(--radius); background-image: linear-gradient(var(--c-teal-4) 0%, var(--c-deep) 100%); }
.v2 .nrow:hover .thumb img { transform: scale(1.03); }
.v2 .nrow .tlink { color: var(--c-navy); }

/* Article */
.v2 .article { background: var(--c-white); color: var(--c-navy); }
.v2 .article .feat { margin: 0 0 clamp(40px, 5vw, 64px); }
.v2 .article .feat img { width: 100%; max-height: 78svh; object-fit: cover; border-radius: var(--radius); display: block; }
.v2 .article .grid { align-items: start; }
.v2 .article .side { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 12px; }
.v2 .article .side .label { color: var(--c-teal); }
.v2 .prose { grid-column: 4 / span 7; font-size: 18px; line-height: 1.65; color: var(--c-text); }
.v2 .prose p { margin: 0 0 1.2em; }
.v2 .prose h2, .v2 .prose h3, .v2 .prose h4, .v2 .prose h5, .v2 .prose h6 { color: var(--c-navy); font-size: 24px; line-height: 1.25; margin: 1.6em 0 .6em; }
.v2 .prose h6 { font-size: 20px; }
.v2 .prose ol, .v2 .prose ul { margin: 0 0 1.2em 1.2em; padding: 0; }
.v2 .prose li h6 { margin: 1.2em 0 .4em; }
.v2 .prose a { color: var(--c-teal); text-decoration: underline; text-underline-offset: 3px; }
.v2 .prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.v2 .prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--c-teal); font-size: 1.15em; line-height: 1.5; color: var(--c-navy); }
.v2 .prose blockquote p:last-child { margin-bottom: 0; }
.v2 .postnav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--c-line-1); margin-top: clamp(40px, 6vw, 80px); }
.v2 .postnav a { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; color: var(--c-navy); }
.v2 .postnav a + a, .v2 .postnav .next { text-align: right; align-items: flex-end; }
.v2 .postnav .t { font-size: 20px; line-height: 1.25; font-weight: 500; }
.v2 .postnav .label { color: var(--c-teal); }

/* Video card grid (video archive pages) */
.v2 .cardgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
.v2 .cardgrid .card { flex: none; }
.v2 .single-video .vbox { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--c-deep); cursor: pointer; }

@media (max-width: 921px) {
  .v2 .pagehero .copy, .v2 .pagehero .aside { grid-column: 1 / -1; }
  .v2 .svcrow .idx, .v2 .svcrow .txt, .v2 .svcrow .med { grid-column: 1 / -1; }
  .v2 .nrow h2, .v2 .nrow .meta, .v2 .nrow .ex, .v2 .nrow .thumb { grid-column: 1 / -1; }
  .v2 .nrow .thumb { align-items: flex-start; }
  .v2 .article .side { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
  .v2 .prose { grid-column: 1 / -1; font-size: 17px; }
  .v2 .cardgrid { grid-template-columns: 1fr; }
}

/* Blog post titles can be long: smaller than .display */
.v2.page-post .pagehero .display { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.08; }
.v2.page-post .pagehero .copy { grid-column: 1 / span 9; }

/* ---------- Content round 1: new services, values, promise ---------- */
/* Values: white icons in an outlined circle */
.v2 .vitem { display: flex; flex-direction: column; align-items: flex-start; }
.v2 .vitem .vicon {
  display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 20px;
  border-radius: 50%; border: 1.5px solid var(--c-white); color: var(--c-white);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.v2 .vitem .vicon i { font-size: 26px; color: inherit; margin: 0; display: block; }
.v2 .vitem:hover .vicon { background: var(--c-white); color: var(--c-teal-4); transform: translateY(-3px); }
.v2 .vitem > .label { margin-bottom: 10px; opacity: .8; }
.v2 .vitem h3 { color: var(--c-white); }
.v2 .vitem p + p { margin-top: 10px; }
.v2 .vgrid { gap: 0 32px; }

/* Value promise */
.v2 .promise { background: var(--c-sea); color: var(--c-navy); }
.v2 .promise .label { grid-column: 1 / span 3; }
.v2 .promise .statement { grid-column: 4 / span 9; }

/* Home service cards: one-liner under the video */
.v2 .card .desc { margin: 16px 0 12px; font-size: 16px; line-height: 1.5; max-width: 34rem; }
.v2 .services .card .desc { color: var(--c-black); }
.v2 .services .card .tlink { color: var(--c-navy); }

/* Services hub: sub-service list */
.v2 .svcrow .sublist { list-style: none; margin: 20px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v2 .svcrow .sublist li { padding: 7px 12px; border: 1px solid var(--c-menu-link); border-radius: 999px; font-size: 14px; }
.v2 .svcrow .txt .tlink { color: var(--c-white); }

@media (max-width: 921px) {
  .v2 .promise .label, .v2 .promise .statement { grid-column: 1 / -1; }
}

/* About page: all text white (user preference) */
.v2.page-about .vitem p,
.v2.page-about .promise, .v2.page-about .promise .statement, .v2.page-about .promise .label,
.v2.page-about .mv, .v2.page-about .team2 .person .label { color: var(--c-white); }

/* Home: About and Our services sections in white text (user preference) */
.v2.page-home .about, .v2.page-home .about p, .v2.page-home .about .tlink,
.v2.page-home .services, .v2.page-home .services .card .desc, .v2.page-home .services .tlink { color: var(--c-white); }
.v2.page-home .services .pill { color: var(--c-white); }
.v2.page-home .services .pill:hover { background: var(--c-white); color: var(--c-navy); border-color: var(--c-white); }
.v2.page-home .services .reel-progress { background: var(--c-menu-link); }

/* ==========================================================================
   Content round 2 (2026): mobile service menu, offer videos, hero overlays,
   numbers over a testimonial, team placeholders, WhatsApp links
   ========================================================================== */
/* Mobile menu: each service opens to its sub-items */
.v2 .mpanel .msvc details { border-top: 1px solid var(--c-menu-link); }
.v2 .mpanel .msvc summary {
  display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; cursor: pointer; list-style: none;
  font-size: 22px; font-weight: 500;
}
.v2 .mpanel .msvc summary::-webkit-details-marker { display: none; }
.v2 .mpanel .msvc summary .mono::after { content: ' +'; }
.v2 .mpanel .msvc details[open] summary .mono::after { content: ' −'; }
.v2 .mpanel .msvc .sub { padding: 0 0 12px 14px; }
.v2 .mpanel .msvc .sub li { border-top: 0; }
.v2 .mpanel .msvc .sub a { font-size: 17px; padding: 7px 0; opacity: .9; }
.v2 .mpanel .msvc > .label { margin-bottom: 8px; }

/* Header dropdown links land on the right row, clear of the fixed header */
.v2 .orow[id], .v2 .photo-sec[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Home hero: the videos play by themselves; label + title always visible on a frosted strip at the bottom. */
.v2 .vbox .ov {
  position: absolute; left: 14px; bottom: 14px; right: 72px; z-index: 2; display: flex; flex-direction: column; gap: 6px;
  color: var(--c-white); pointer-events: none;
}
.v2 .vbox .ov .title { margin: 0; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.1; letter-spacing: -0.01em; }
.v2 .vbox .ov .label { opacity: .9; }
.v2 .vbox .play { z-index: 3; }
.v2 .hero .vbox { box-shadow: inset 0 0 0 1px var(--c-menu-link); }

/* ---------- Frosted glass under text that sits on a photo or video ---------- */
/* "Liquid glass" (iOS style): a clear layer behind the text (::before) with crisp rounded edges, a bright rim
   along the top, a light white sheen and a faint dark base so white text stays readable on bright photos. */
.v2 :is(.phero .copy, .story .statement, .story .aside, .about .copy, .contact2 .hours, .numbers2 .stat2, .vbox .ov, .oslide .ov) { isolation: isolate; }
.v2 :is(.phero .copy, .story .statement, .story .aside, .about .copy, .contact2 .hours, .numbers2 .stat2) { position: relative; }
.v2 :is(.phero .copy, .story .statement, .story .aside, .about .copy, .contact2 .hours, .numbers2 .stat2, .vbox .ov, .oslide .ov)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 22px;
  background: linear-gradient(150deg, var(--c-glass-sheen) 0%, transparent 45%), var(--c-glass-mid);
  border: 1px solid var(--c-glass-line);
  box-shadow: inset 0 1px 0 var(--c-glass-rim), inset 1px 0 0 var(--c-glass-line), inset 0 -1px 0 var(--c-glass-line), 0 10px 30px var(--c-form-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
}
.v2 :is(.phero .copy, .story .statement, .story .aside, .about .copy, .contact2 .hours, .numbers2 .stat2, .vbox .ov, .oslide .ov) { text-shadow: 0 1px 12px var(--c-form-shadow); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v2 :is(.phero .copy, .story .statement, .story .aside, .about .copy, .contact2 .hours, .numbers2 .stat2, .vbox .ov, .oslide .ov)::before { background: var(--c-shadow); }
}
.v2 .vbox .ov::before, .v2 .oslide .ov::before { border-radius: 16px; }
.v2 .vbox .ov { padding: 12px 16px 14px; align-items: flex-start; width: fit-content; max-width: calc(100% - 86px); }
.v2 .phero .copy { padding: clamp(20px, 2.6vw, 36px); }
.v2 .story .statement { padding: clamp(20px, 2.4vw, 32px); }
.v2 .story .aside { padding: 20px 22px; }
.v2 .story .aside p:last-child { margin-bottom: 0; }

/* Numbers: two stats over a muted client-testimonial video */
.v2 .numbers2.has-bgv { min-height: 90svh; display: flex; align-items: center; }
.v2 .numbers2.has-bgv > .wrap { position: relative; z-index: 1; width: 100%; }
.v2 .bgv { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.v2 .bgv iframe, .v2 .bgv .yt { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.v2 .bgv.playing iframe { opacity: 1; }
.v2 .bgv::after { content: ''; position: absolute; inset: 0; background: var(--c-shadow); opacity: 0; transition: opacity 1.2s var(--ease); }
.v2 .bgv.playing::after { opacity: 1; }
.v2 .stats2.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2 .stat2 .note { margin: 14px 0 0; max-width: 28rem; font-size: 16px; line-height: 1.5; }
.v2 .numbers2 .more { margin-top: clamp(32px, 4vw, 56px); text-align: center; }
.v2 .stats2.two .stat2 { text-align: center; padding-inline: 24px; }
.v2 .stats2.two .stat2 .note { margin-inline: auto; }
@media (max-width: 600px) {
  .v2 .stats2.two { grid-template-columns: 1fr; }
  .v2 .stats2.two .stat2 + .stat2 { border-left: 0; padding-left: 0; }
}

/* About: team member waiting for a photo */
.v2 .person .ph { width: 100%; aspect-ratio: 1; border-radius: var(--radius); margin-bottom: 16px; background-image: linear-gradient(var(--c-teal-4) 0%, var(--c-deep) 100%); opacity: .6; }

/* Phone numbers: the phone icon and a WhatsApp link side by side in the icon column, then the number.
   Email and address rows get the same column width so all the text lines up. */
.v2 .ftr-contact { --icol: 52px; }
.v2 .ftr-contact li > i:first-child { flex: 0 0 var(--icol); width: var(--icol); text-align: left; padding-left: 1px; }
.v2 .ftr-contact .ic2 { flex: 0 0 var(--icol); display: inline-flex; align-items: center; gap: 8px; }
.v2 .ftr-contact .ic2 > i { width: 18px; flex: 0 0 18px; margin: 0; }
.v2 .ftr-contact .tel { align-items: center; }
.v2 .ftr-contact .wa { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--c-whatsapp); color: var(--c-white); line-height: 1; transition: transform .2s var(--ease); }
.v2 .ftr-contact .wa i { width: auto; flex: none; margin: 0; font-size: 14px; }
.v2 .ftr-contact .wa:hover, .v2 .ftr-contact .wa:focus-visible { transform: scale(1.12); text-decoration: none; }
.v2 .ftr-contact li + li { margin-top: 6px; }

/* Studio photography: one titled wall per sub-service */
.v2 .photo-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.v2 .photo-head .label { grid-column: 1 / span 3; color: var(--c-teal); }
.v2 .photo-head .display { grid-column: 4 / span 9; }
.v2 .photo-sec + .photo-sec { padding-top: 0; }
@media (max-width: 921px) { .v2 .photo-head .label, .v2 .photo-head .display { grid-column: 1 / -1; } }
.v2 .vbox .ov .label { color: var(--c-white); }

/* ==========================================================================
   Refresh (2026-10): service carousels + shapes from the client's deck
   ========================================================================== */
/* ---------- Service pages: "What we do" items. One item open at a time (v2.js adds .acc to the section);
   its media is a carousel a third of the section wide, beside a list of its slides. ---------- */
.v2 .orows { border-bottom: 1px solid var(--c-line-1); }
.v2 .orow { border-top: 1px solid var(--c-line-1); }
.v2 .ohead { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.v2 .obtn {
  box-sizing: border-box; width: 100%; margin: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--c-navy);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding: 26px 0;
}
.v2 button.obtn { cursor: pointer; }
.v2 .obtn:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 4px; }
.v2 .nsq {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  font-family: var(--f-mono); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .02em;
  color: var(--c-teal); border: 1px solid currentColor; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.v2 .orow .nsq { grid-column: 1 / span 3; justify-self: start; }
.v2 .orow.open .nsq { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-white); }
.v2 .oname { grid-column: 4 / span 6; font-size: clamp(26px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; }
.v2 .oname .client { display: block; margin-top: 10px; color: var(--c-teal); }
.v2 .ocount { grid-column: 10 / span 2; justify-self: end; color: var(--c-text); white-space: nowrap; }
.v2 .oplus { grid-column: 12; justify-self: end; position: relative; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--c-line-1); color: var(--c-navy); transition: transform .45s var(--ease), background-color .3s, border-color .3s, color .3s; }
.v2 .oplus::before, .v2 .oplus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.v2 .oplus::after { transform: translate(-50%, -50%) rotate(90deg); }
.v2 .obtn:hover .oplus { border-color: var(--c-navy); }
.v2 .orow.open .oplus { transform: rotate(45deg); background: var(--c-navy); border-color: var(--c-navy); color: var(--c-white); }
.v2 .opanel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease); }
.v2 .offers.acc .orow:not(.open) .opanel { grid-template-rows: 0fr; }
.v2 .oin { min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; visibility: visible; transition: visibility 0s; }
.v2 .offers.acc .orow:not(.open) .oin { visibility: hidden; transition: visibility 0s .6s; }
.v2 .olist { grid-column: 4 / span 4; align-self: start; list-style: none; margin: 0 0 40px; padding: 0; }
.v2 .olist button {
  box-sizing: border-box; width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--c-line-1); background: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: baseline; padding: 11px 0; font: inherit; font-size: 15px; line-height: 1.35; color: var(--c-text);
  transition: color .25s;
}
.v2 .olist button:hover { color: var(--c-navy); }
.v2 .olist button:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.v2 .olist .n { font-family: var(--f-mono); font-size: 12px; color: var(--c-teal); }
.v2 .olist .k { opacity: .65; }
.v2 .olist button[aria-current="true"] { color: var(--c-navy); font-weight: 600; }
.v2 .ocar { grid-column: 9 / span 4; min-width: 0; margin-bottom: 40px; }
.v2 .oview {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; background: var(--c-black);
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.v2 .oview::-webkit-scrollbar { display: none; }
.v2 .otrack { display: flex; height: 100%; }
.v2 .oslide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.v2 .oslide .vbox { height: 100%; aspect-ratio: auto; border-radius: 0; }
.v2 figure.oslide { cursor: zoom-in; }
.v2 figure.oslide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.v2 figure.oslide:hover img { transform: scale(1.04); }
/* The slide's tile (number · service, title, client) stays visible; a video's tile fades while its preview plays. */
.v2 .oslide .ov, .v2 .oslide .vbox .ov {
  position: absolute; left: 12px; bottom: 12px; right: auto; top: auto; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  width: fit-content; max-width: calc(100% - 76px); padding: 10px 14px 12px; color: var(--c-white);
  opacity: 1; transform: none; pointer-events: none; transition: opacity .6s var(--ease);
}
.v2 .oslide .ov > * { transform: none; }
.v2 .oslide .ov .label { font-size: 10px; opacity: .85; color: var(--c-white); }
.v2 .oslide .ov .title { margin: 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; }
.v2 .oslide .ov p { margin: 0; font-size: 13px; line-height: 1.35; }
.v2 .oslide .vbox.playing .ov { opacity: 0; }
.v2 .oslide .vbox .play { width: 40px; height: 40px; right: 12px; bottom: 12px; }
@media (hover: none) { .v2 .oslide .ov p { display: block; } }
.v2 .obar { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.v2 .osegs { flex: 1; display: flex; gap: 4px; }
.v2 .osegs span { position: relative; flex: 1; height: 2px; overflow: hidden; background: var(--c-line-1); }
.v2 .osegs i { position: absolute; inset: 0; background: var(--c-teal); transform-origin: left; transform: scaleX(0); }
.v2 .onum { font-variant-numeric: tabular-nums; color: var(--c-text); }
.v2 .ocb { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid var(--c-line-1); background: none; color: var(--c-navy); cursor: pointer; transition: background-color .25s, color .25s; }
.v2 .ocb:hover { background: var(--c-navy); color: var(--c-white); }
.v2 .ocb:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.v2 .ocb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v2 .ocb .ir { display: none; fill: currentColor; stroke: none; }
.v2 .ocb[aria-pressed="true"] .ip { display: none; }
.v2 .ocb[aria-pressed="true"] .ir { display: inline; }
@media (max-width: 921px) {
  .v2 .obtn { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 20px 0; }
  .v2 .orow .nsq, .v2 .oname, .v2 .oplus { grid-column: auto; }
  .v2 .ocount { display: none; }
  .v2 .oin { grid-template-columns: minmax(0, 1fr); }
  .v2 .ocar { grid-column: 1; grid-row: 1; margin-bottom: 20px; }
  .v2 .olist { grid-column: 1; grid-row: 2; margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 .opanel, .v2 .oin, .v2 .oplus, .v2 .nsq, .v2 figure.oslide img { transition: none; }
}

/* ---------- Deck shapes: quarter circles (steel fill + offset white outline), drawn in CSS ---------- */
.v2 .qc { position: absolute; z-index: 0; width: clamp(90px, 11vw, 170px); aspect-ratio: 1; pointer-events: none; }
.v2 .qc::before, .v2 .qc::after { content: ''; position: absolute; inset: 0; }
.v2 .qc::before { background: var(--c-steel); opacity: .75; }
.v2 .qc::after { border: 2px solid var(--c-white); opacity: .9; }
.v2 .qc.tr { top: 0; right: 0; }
.v2 .qc.tr::before { border-bottom-left-radius: 100%; }
.v2 .qc.tr::after { border-bottom-left-radius: 100%; border-top: 0; border-right: 0; transform: translate(-18%, 18%); }
.v2 .qc.bl { bottom: 0; left: 0; }
.v2 .qc.bl::before { border-top-right-radius: 100%; }
.v2 .qc.bl::after { border-top-right-radius: 100%; border-bottom: 0; border-left: 0; transform: translate(18%, -18%); }
.v2 .qc.sm { width: clamp(70px, 8vw, 120px); }
.v2 .qc.coral::before { background: var(--c-orange); }
.v2 :is(.mv, .values2, .team2, .cta-band) > .wrap { position: relative; z-index: 1; }
.v2 .cta-band { position: relative; isolation: isolate; overflow: hidden; }
/* A line across the section ending in an outlined box */
.v2 .rulebox { display: flex; align-items: center; grid-column: 1 / -1; margin-top: clamp(40px, 6vw, 72px); }
.v2 .rulebox::before { content: ''; flex: 1; height: 2px; background: currentColor; opacity: .9; }
.v2 .rulebox span { border: 2px solid currentColor; padding: 10px 18px; font-size: 15px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 600px) { .v2 .qc { width: 72px; } .v2 .qc.sm { width: 56px; } .v2 .rulebox span { font-size: 13px; padding: 8px 12px; } }

/* ---------- About: Mission / Vision on slate, numbered ---------- */
.v2 .mv { background: var(--c-deep); --g1: var(--c-deep); --g2: var(--c-steel); }
.v2 .mv .grid { align-items: center; }
.v2 .mv .grid > .mv-title { grid-column: 1 / span 6; margin: 0; font-size: clamp(38px, 5.4vw, 76px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.v2 .mv .grid > .mv-pic { grid-column: 8 / span 5; display: flex; gap: 16px; align-items: center; justify-content: flex-end; }
.v2 .mv-pic img { width: min(300px, 100%); aspect-ratio: 2.1; object-fit: cover; display: block; }
.v2 .mv-chev { flex: none; display: grid; place-items: center; width: 68px; aspect-ratio: 1; background: var(--c-white); color: var(--c-orange); }
.v2 .mv-chev svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3; }
.v2 .mv .grid > .mv-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 6vw, 80px); }
.v2 .mv-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.v2 .mv-item .nsq { background: var(--c-white); color: var(--c-deep); border: 0; width: 48px; height: 48px; font-family: var(--f-sans); font-size: 17px; font-weight: 700; }
.v2 .mv-item h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.v2 .mv .mv-item .statement { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; margin: 0; }
@media (max-width: 921px) {
  .v2 .mv .grid > .mv-title, .v2 .mv .grid > .mv-pic { grid-column: 1 / -1; justify-content: flex-start; }
  .v2 .mv .grid > .mv-pair { grid-template-columns: 1fr; }
}

/* ---------- About: core values as white cards on slate ---------- */
.v2 .values2 { background: var(--c-deep); --g1: var(--c-deep); --g2: var(--c-steel); }
.v2 .values2 .head .display { font-weight: 300; }
.v2 .vgrid { gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.v2 .vitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 14px; align-content: start; padding: 26px 24px 28px; border: 0; border-radius: 22px; background: var(--c-white); color: var(--c-text); }
.v2 .values2 .vitem > .label { display: inline-grid; place-items: center; width: 42px; height: 42px; grid-column: 1; grid-row: 1; align-self: center; background: var(--c-deep); color: var(--c-white); font-family: var(--f-sans); font-size: 15px; font-weight: 700; }
.v2 .vitem h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--c-deep); }
.v2 .vitem .vicon { grid-column: 3; grid-row: 1; align-self: center; }
.v2 .vitem i { font-size: 20px; margin: 0; color: var(--c-teal); }
.v2 .vitem p { grid-column: 1 / -1; font-size: 15px; line-height: 1.55; color: var(--c-text); }
.v2 .vitem h3 + p { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line-1); }
.v2 .vitem p + p { margin-top: 12px; }
.v2.page-about .values2 .vitem p { color: var(--c-text); }
.v2 .mv .grid > .rulebox { grid-column: 1 / -1; }

/* ==========================================================================
   Client round (2026-10-05): brand teal + orange, home "How we work" cards,
   "Trusted by" as its own section, softer photo shades (text sits on frosted glass)
   ========================================================================== */
.v2 .qc.orange::before { background: var(--c-orange); }
.v2 .phero::after { background: linear-gradient(transparent 45%, var(--c-shadow) 100%); opacity: .6; }
.v2 .story::after { opacity: .5; }

/* Home "How we work": the original numbered rows, with a colour per row (teal, orange, charcoal) */
.v2.page-home .three-c { position: relative; isolation: isolate; overflow: hidden; background: var(--c-ice); }
.v2.page-home .three-c > .wrap { position: relative; z-index: 1; }
.v2.page-home .crow { --acc: var(--c-teal); border-top: 2px solid var(--acc); transition: background-color .4s var(--ease); }
.v2.page-home .crow:nth-child(3n+2) { --acc: var(--c-orange); }
.v2.page-home .crow:nth-child(3n+3) { --acc: var(--c-grey-33); }
.v2.page-home .crow:last-child { border-bottom: 2px solid var(--acc); }
.v2.page-home .crow:hover { background: var(--c-white); }
.v2.page-home .crow .idx { align-self: start; justify-self: start; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; margin-top: 4px; background: var(--acc); color: var(--c-white); font-size: 14px; font-weight: 700; }
.v2.page-home .crow .word::before { background: var(--acc); }

/* Home "How we work" (2026-10-07): bolder and colourful. The home hero's teal → plum gel meets the CTA band's
   deep teal + orange glow; white text, each row a liquid-glass card with its colour on the left edge */
.v2.page-home .three-c.gel {
  background: linear-gradient(180deg, var(--c-deep) 0%, var(--c-teal-2) 45%, var(--c-deep) 100%);
  color: var(--c-white); --g1: var(--c-teal-3); --g2: var(--c-orange); --gel-dur: 30s;
}
.v2.page-home .three-c.gel::before { opacity: .42; }
/* The hero bleeds into the 3 Cs: both fade to plain plum at the seam, over their gel blobs */
.v2.page-home .hero::after, .v2.page-home .three-c.gel::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: -1; height: clamp(180px, 22vw, 320px); pointer-events: none;
}
.v2.page-home .hero::after { bottom: 0; background: linear-gradient(transparent, var(--c-deep)); }
.v2.page-home .three-c.gel::after { top: 0; background: linear-gradient(var(--c-deep), transparent); }
.v2.page-home .three-c.gel .intro .label { color: var(--c-white); }
.v2.page-home .three-c.gel .intro .statement { font-weight: 700; color: var(--c-white); }
.v2.page-home .three-c.gel .flow .w ~ .w ~ .w .arr { background: var(--c-orange); color: var(--c-white); }
.v2.page-home .three-c.gel .crow {
  --acc: var(--c-sea); position: relative; padding: clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 36px); margin-bottom: 14px;
  border: 1px solid var(--c-glass-line); border-left: 6px solid var(--acc); border-radius: var(--radius);
  background: linear-gradient(150deg, var(--c-glass-sheen) 0%, transparent 55%), var(--c-glass-mid);
  box-shadow: inset 0 1px 0 var(--c-glass-rim), 0 10px 30px var(--c-form-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
.v2.page-home .three-c.gel .crow:nth-child(3n+2) { --acc: var(--c-orange); }
.v2.page-home .three-c.gel .crow:nth-child(3n+3) { --acc: var(--c-white); }
.v2.page-home .three-c.gel .crow:last-child { margin-bottom: 0; }
.v2.page-home .three-c.gel .crow:hover { background-color: var(--c-glass-mid); transform: translateY(-2px); }
.v2.page-home .three-c.gel .crow .idx { background: var(--acc); color: var(--c-white); box-shadow: 0 6px 18px var(--c-form-shadow); }
.v2.page-home .three-c.gel .crow:nth-child(3n+3) .idx { color: var(--c-deep); }
.v2.page-home .three-c.gel .crow:nth-child(3n+1) .idx { background: var(--c-teal); }
.v2.page-home .three-c.gel .crow .word { font-weight: 700; color: var(--c-white); }
.v2.page-home .three-c.gel .crow .body { color: var(--c-white); }
/* "Trusted by": a section of its own, big centred title above the moving logos */
.v2 .clients { padding-block: clamp(72px, 9vw, 128px); background: var(--c-ice); }
.v2 .clients .head { justify-content: center; text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.v2 .clients .head .display { color: var(--c-navy); }
.v2 .clients .head .display::after { content: ''; display: block; width: 64px; height: 4px; margin: 18px auto 0; background: var(--c-orange); }
.v2 .clients .marquee img { height: clamp(56px, 6vw, 88px); max-width: 220px; }

/* "Have a story to tell?" band: just the website box, no line (client request 2026-10-05) */
.v2 .cta-band .rulebox { justify-content: flex-end; }
/* Get a Quote centred in the band, on its own row under the headline (client request 2026-10-07) */
.v2 .cta-band .aside { grid-column: 1 / -1; align-items: center; text-align: center; gap: 16px; margin-top: clamp(8px, 1.5vw, 16px); }
.v2 .cta-band { padding-block: clamp(56px, 7vw, 96px); }
.v2 .cta-band .display { margin-bottom: 0; }
.v2 .cta-band .rulebox { margin-top: clamp(-48px, -3vw, 0px); }
.v2 .cta-band .aside .small { max-width: 46ch; }
.v2 .cta-band .rulebox::before { display: none; }

/* ==========================================================================
   Brand pass (2026-10-05): teal + orange, liquid-glass buttons, gel CTA band
   ========================================================================== */
/* Liquid-glass buttons (same recipe as the text panels, on the button itself) */
.v2 :is(.about .slideshow .ocb, .hero .reel-btn, .phero .aside .pill, .numbers2 .more .pill) {
  color: var(--c-white); border: 1px solid var(--c-glass-line);
  background: linear-gradient(150deg, var(--c-glass-sheen) 0%, transparent 55%), var(--c-glass-mid);
  box-shadow: inset 0 1px 0 var(--c-glass-rim), 0 8px 24px var(--c-form-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.v2 :is(.about .slideshow .ocb, .hero .reel-btn, .phero .aside .pill, .numbers2 .more .pill):is(:hover, :focus-visible) {
  background: var(--c-white); color: var(--c-navy); border-color: var(--c-white); transform: translateY(-1px);
}
.v2 .hero .reel-btn[disabled] { opacity: .45; transform: none; }
.v2 .about .slideshow .ocb { width: 40px; height: 40px; }
.v2 .phero .aside .pill { padding: 14px 22px; }

/* Numbers speak: the two stats on glass cards over the testimonial video; numbers fade from white to orange */
.v2 .numbers2 { background-image: linear-gradient(var(--c-deep) 0%, var(--c-teal-3) 100%); --g1: var(--c-teal-2); --g2: var(--c-orange); }
.v2 .numbers2::before { opacity: .35; }
.v2 .stats2.two { gap: clamp(16px, 2.4vw, 32px); }
.v2 .stats2.two .stat2, .v2 .stats2.two .stat2 + .stat2 { border: 0; padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); }
.v2 .numbers2 .stat2 .num {
  background: linear-gradient(180deg, var(--c-white) 35%, var(--c-orange) 150%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* "Have a story to tell?" band: a slow gel gradient like the home hero, deep teal with a warm orange glow */
.v2 .cta-band.gel { background: linear-gradient(135deg, var(--c-deep) 0%, var(--c-teal-2) 100%); --g1: var(--c-teal-3); --g2: var(--c-orange); --gel-dur: 30s; }
.v2 .cta-band.gel::before { opacity: .45; }
.v2 .cta-big .arrow { background: var(--c-orange); }

/* Page heroes: one look everywhere (the home hero's teal to plum) */
.v2 .gel.grad-coral, .v2 .about-hero { background-image: linear-gradient(var(--c-teal-2) 0%, var(--c-deep) 100%); --g1: var(--c-teal-2); --g2: var(--c-orange); }

/* Footer: deep teal with a thin orange line on top (the header is untouched) */
.v2 .ftr-top { background: var(--c-deep); border-top: 3px solid var(--c-orange); }
.v2 .ftr-bottom { background: linear-gradient(var(--c-deep) 0%, var(--c-teal) 100%); --g1: var(--c-teal-2); --g2: var(--c-orange); }
.v2 .ftr-bottom::before { opacity: .3; }
.v2 .ftr-social a:hover, .v2 .ftr-social a:focus-visible { color: var(--c-deep); }
.v2 .ftr-cta:hover, .v2 .ftr-cta:focus-visible { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-white); }

/* Small orange touches; placeholders in brand teal */
.v2 .osegs i { background: var(--c-orange); }
.v2 .mv-chev { color: var(--c-orange); }
.v2 .person .ph, .v2 .person img, .v2 .nrow .thumb .ph { background-image: linear-gradient(var(--c-teal-2) 0%, var(--c-deep) 100%); }
.v2 .person .ph { opacity: .85; }

/* Home "How we work" headline: the row words joined by animated orange arrows (generated from the rows) */
.v2 .flow .w { white-space: nowrap; }
.v2 .flow .arr { vertical-align: -0.12em; margin: 0 .3em 0 .05em; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 999px; background: var(--c-orange); color: var(--c-white); box-shadow: 0 6px 18px var(--c-form-shadow); }
.v2 .flow .arr svg { width: .62em; height: .62em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: flow-nudge 2.4s var(--ease) infinite; }
.v2 .flow .w ~ .w ~ .w .arr { background: var(--c-orange); }
.v2 .flow .w ~ .w ~ .w .arr svg { animation-delay: .3s; }
@keyframes flow-nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(.18em); } }
@media (prefers-reduced-motion: reduce) { .v2 .flow .arr svg { animation: none; } }

/* ==========================================================================
   Client round (2026-10-09): service pages get the home "How we work" look from top to bottom,
   a liquid-glass strip under the client logos, a slightly bigger header
   ========================================================================== */
.v2 .hdr .cta { font-size: 13px; }

/* One gel gradient behind every section between the hero and the CTA band (template: .svc-body in service.php) */
.v2 .svc-body.gel {
  background: linear-gradient(180deg, var(--c-deep) 0%, var(--c-teal-2) 30%, var(--c-deep) 62%, var(--c-teal-3) 85%, var(--c-deep) 100%);
  color: var(--c-white); --g1: var(--c-teal-3); --g2: var(--c-orange); --gel-dur: 30s;
}
.v2 .svc-body.gel::before { opacity: .42; }
.v2 .svc-body > section { position: relative; z-index: 1; background: transparent; color: var(--c-white); }
.v2 .svc-body :is(.label, .display, .statement, p, .photo-head .label, .white2 .side .label, .sea2 p) { color: var(--c-white); }
.v2 .svc-body .three-c .intro .label { color: var(--c-white); }
.v2 .svc-body .three-c .intro .statement { font-weight: 700; }

/* "How we create value" rows: liquid-glass cards with a colour on the left edge (teal, orange, white) */
.v2 .svc-body .orows { border: 0; }
.v2 .svc-body .orow {
  --acc: var(--c-sea); --sq: var(--c-teal); --sq-ink: var(--c-white);
  padding: 0 clamp(20px, 2.6vw, 36px); margin-bottom: 14px;
  border: 1px solid var(--c-glass-line); border-left: 6px solid var(--acc); border-radius: var(--radius);
  background: linear-gradient(150deg, var(--c-glass-sheen) 0%, transparent 55%), var(--c-glass-mid);
  box-shadow: inset 0 1px 0 var(--c-glass-rim), 0 10px 30px var(--c-form-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  transition: transform .4s var(--ease);
}
.v2 .svc-body .orow:nth-child(3n+2) { --acc: var(--c-orange); --sq: var(--c-orange); }
.v2 .svc-body .orow:nth-child(3n+3) { --acc: var(--c-white); --sq: var(--c-white); --sq-ink: var(--c-deep); }
.v2 .svc-body .orow:last-child { margin-bottom: 0; }
.v2 .svc-body .orow:not(.open):hover { transform: translateY(-2px); }
.v2 .svc-body .obtn { color: var(--c-white); }
.v2 .svc-body .obtn:focus-visible, .v2 .svc-body .olist button:focus-visible, .v2 .svc-body .ocb:focus-visible { outline-color: var(--c-white); }
.v2 .svc-body .orow .nsq, .v2 .svc-body .orow.open .nsq {
  background: var(--sq); border-color: var(--sq); color: var(--sq-ink); font-family: var(--f-sans); font-weight: 700; box-shadow: 0 6px 18px var(--c-form-shadow);
}
.v2 .svc-body .oname { font-weight: 700; }
.v2 .svc-body .oname .client { color: var(--c-white); opacity: .8; }
.v2 .svc-body .ocount { color: var(--c-white); opacity: .8; }
.v2 .svc-body .oplus { border-color: var(--c-glass-rim); color: var(--c-white); }
.v2 .svc-body .obtn:hover .oplus { border-color: var(--c-white); }
.v2 .svc-body .orow.open .oplus { background: var(--c-white); border-color: var(--c-white); color: var(--c-deep); }
.v2 .svc-body .olist button { color: var(--c-white); border-bottom-color: var(--c-glass-line); opacity: .85; }
.v2 .svc-body .olist button:hover, .v2 .svc-body .olist button[aria-current="true"] { color: var(--c-white); opacity: 1; }
.v2 .svc-body .olist .n { color: var(--c-orange); }
.v2 .svc-body .onum { color: var(--c-white); }
.v2 .svc-body .osegs span { background: var(--c-glass-line); }
.v2 .svc-body .ocb { color: var(--c-white); border-color: var(--c-glass-rim); }
.v2 .svc-body .ocb:hover { background: var(--c-white); color: var(--c-deep); }

/* Text, photo walls and the big-photo story sit straight on the gradient */
.v2 .svc-body .split .main .statement { font-weight: 700; }
.v2 .svc-body .wall figure { box-shadow: 0 10px 30px var(--c-form-shadow); }

/* "Trusted by": title in white with its orange bar; the logos run edge to edge on a frosted-glass strip
   (the liquid-glass recipe, but light, because most logos are dark) */
.v2 .svc-body .clients .head .display { color: var(--c-white); font-weight: 700; }
.v2 .svc-body .clients .marquee {
  position: relative; overflow: hidden; padding-block: clamp(24px, 3vw, 40px);
  border-block: 1px solid var(--c-glass-rim);
  background: linear-gradient(150deg, var(--c-glass-rim) 0%, var(--c-glass-sheen) 100%); /* lighter glass: the logos are dark */
  box-shadow: inset 0 1px 0 var(--c-glass-rim), inset 0 -1px 0 var(--c-glass-line), 0 10px 30px var(--c-form-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
  -webkit-mask-image: none; mask-image: none;
}

/* About: the board sits under the team after a small gap, no heading (client request 2026-10-09) */
.v2 .team2 .tgrid.board { margin-top: clamp(88px, 10vw, 160px); }

/* ==========================================================================
   Client round (2026-10-10): orange header and footer bar, logo 8, social icons in the header,
   the CTA band's gradient (deep teal → teal, warm orange glow) on every hero, no plum/red anywhere,
   About page in the colourful style of the home "How we work"
   ========================================================================== */
/* Header: always the orange → amber blend, navy text, logo 8 as supplied */
.v2 .hdr { color: var(--c-navy); }
.v2 .hdr::before, .v2 .hdr.scrolled::before { opacity: 1; background: linear-gradient(100deg, var(--c-orange) 0%, var(--c-amber) 100%); box-shadow: 0 6px 24px var(--c-form-shadow); }
.v2.page-service .hdr::after { display: none; }
.v2 .hdr :is(.nav-top a, .navlink, .navbtn), .v2 .hdr:not(.scrolled) :is(.nav-top a, .navlink, .navbtn),
.v2 .hdr.on-light:not(.scrolled):not(.menu-open) :is(.nav-top a, .navlink, .navbtn) { text-shadow: none; }
.v2 .hdr.on-light:not(.scrolled):not(.menu-open) { color: var(--c-navy); }
.v2 .hdr.on-light:not(.scrolled):not(.menu-open) .brand img { filter: none; }
.v2 .hdr .nav, .v2 .hdr.on-light .nav { border-top-color: var(--c-line-1); }
.v2 .hdr .pill { font-weight: 600; }
.v2 .hdr .pill:is(:hover, :focus-visible) { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.v2 .drop { background: linear-gradient(160deg, var(--c-orange) 0%, var(--c-amber) 100%); color: var(--c-navy); box-shadow: 0 14px 34px var(--c-form-shadow); }
.v2 .drop a, .v2 .drop a:hover { color: var(--c-navy); }
.v2 .drop li + li { border-top-color: var(--c-line-1); }
/* Social icons in the top row (desktop) and in the mobile menu */
.v2 .hdr-social, .v2 .msocial { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v2 :is(.hdr-social, .msocial) a {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid currentColor;
  color: inherit; font-size: 14px; transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.v2 .hdr-social a:is(:hover, :focus-visible) { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); transform: translateY(-1px); }
.v2 .msocial a { width: 42px; height: 42px; font-size: 16px; color: var(--c-white); padding: 0; }
.v2 .msocial a:is(:hover, :focus-visible) { background: var(--c-white); color: var(--c-deep); }
@media (max-width: 1180px) { .v2 .hdr-social { display: none; } }
/* Mobile menu: the CTA gradient under the orange bar */
.v2 .mpanel { background: linear-gradient(160deg, var(--c-deep) 0%, var(--c-teal-2) 100%); }
/* Floating Get a Quote: same orange blend as the header */
.v2 .quote-float { background: linear-gradient(100deg, var(--c-orange) 0%, var(--c-amber) 100%); color: var(--c-navy); border-color: transparent; font-weight: 600; box-shadow: 0 10px 30px var(--c-form-shadow); }
.v2 .quote-float:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }

/* Every hero and page top: the CTA band's gradient (deep teal → teal, drifting warm orange glow) */
.v2 :is(.hero, .about-hero, .contact2, .gel.grad-hero, .gel.grad-coral, .gel.grad-num) {
  background-image: linear-gradient(135deg, var(--c-deep) 0%, var(--c-teal-2) 100%); --g1: var(--c-teal-3); --g2: var(--c-orange); --gel-dur: 30s;
}
.v2 :is(.hero, .about-hero, .contact2, .gel.grad-hero, .gel.grad-coral, .gel.grad-num)::before { opacity: .45; }
/* Home: the headline in brand orange */
.v2.page-home .hero h1 { color: var(--c-orange); }

/* Footer: the social links bar in the orange blend */
.v2 .ftr-bottom { background: linear-gradient(100deg, var(--c-orange) 0%, var(--c-amber) 100%); color: var(--c-navy); --g1: var(--c-amber); --g2: var(--c-orange); }
.v2 .ftr-bottom::before { opacity: .35; }
.v2 .ftr-social a { border-color: currentColor; color: var(--c-navy); }
.v2 .ftr-social a:hover, .v2 .ftr-social a:focus-visible { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.v2 .ftr-copy, .v2 .ftr-copy a { color: var(--c-navy); opacity: 1; }

/* ---------- About: the colour and flair of the home "How we work" ---------- */
.v2.page-about :is(.values2, .team2, .mv) .head .display, .v2.page-about .mv .grid > .mv-title { font-weight: 700; }
.v2.page-about :is(.values2, .team2) .head .label, .v2.page-about .promise .label { color: var(--c-amber); }
/* Mission & Vision: deep teal with an orange glow, the two items as glass cards (orange and teal number squares) */
.v2.page-about .mv { background-image: linear-gradient(160deg, var(--c-deep) 0%, var(--c-teal-3) 100%); --g1: var(--c-teal-2); --g2: var(--c-orange); --gel-dur: 32s; }
.v2.page-about .mv::before { opacity: .4; }
.v2.page-about .mv .qc.bl::before, .v2.page-about .team2 .qc.tr::before, .v2.page-about .values2 .qc.tr::before { background: var(--c-orange); }
.v2.page-about .mv-item {
  --acc: var(--c-orange); padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--c-glass-line); border-radius: var(--radius);
  background: linear-gradient(150deg, var(--c-glass-sheen) 0%, transparent 55%), var(--c-glass-mid);
  box-shadow: inset 0 1px 0 var(--c-glass-rim), 0 10px 30px var(--c-form-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
}
.v2.page-about .mv-item + .mv-item { --acc: var(--c-teal-2); }
.v2.page-about .mv-item .nsq { background: var(--acc); color: var(--c-white); box-shadow: 0 6px 18px var(--c-form-shadow); }
.v2.page-about .mv-item h3 { color: var(--c-amber); }
/* Value promise: teal → deep with the orange glow; the promise on a glass card */
.v2.page-about .promise { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, var(--c-teal-2) 0%, var(--c-deep) 100%); }
.v2.page-about .promise::before {
  content: ''; position: absolute; inset: -35%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 80% 30%, var(--c-orange) 0%, transparent 70%), radial-gradient(42% 50% at 20% 75%, var(--c-teal-3) 0%, transparent 70%);
  filter: blur(48px); opacity: .45; animation: gel 30s ease-in-out infinite alternate;
}
.v2.page-about .promise .statement {
  position: relative; padding: clamp(24px, 3vw, 44px); font-weight: 700; border: 1px solid var(--c-glass-line); border-radius: var(--radius);
  background: linear-gradient(150deg, var(--c-glass-sheen) 0%, transparent 55%), var(--c-glass-mid);
  box-shadow: inset 0 1px 0 var(--c-glass-rim), 0 10px 30px var(--c-form-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
}
/* Core values: the CTA gradient; each value a glass card with a teal, orange or white number square (no side strips, client 2026-10-10) */
.v2.page-about .values2 { background-image: linear-gradient(160deg, var(--c-deep) 0%, var(--c-teal-2) 100%); --g1: var(--c-teal-3); --g2: var(--c-orange); --gel-dur: 34s; }
.v2.page-about .values2::before { opacity: .45; }
.v2.page-about .values2 .vitem {
  --acc: var(--c-sea); --sq: var(--c-teal); --sq-ink: var(--c-white); color: var(--c-white);
  border: 1px solid var(--c-glass-line);
  background: linear-gradient(150deg, var(--c-glass-sheen) 0%, transparent 55%), var(--c-glass-mid);
  box-shadow: inset 0 1px 0 var(--c-glass-rim), 0 10px 30px var(--c-form-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  transition: transform .4s var(--ease);
}
.v2.page-about .values2 .vitem:nth-child(3n+2) { --acc: var(--c-orange); --sq: var(--c-orange); }
.v2.page-about .values2 .vitem:nth-child(3n+3) { --acc: var(--c-white); --sq: var(--c-white); --sq-ink: var(--c-deep); }
.v2.page-about .values2 .vitem:hover { transform: translateY(-3px); }
.v2.page-about .values2 .vitem > .label { background: var(--sq); color: var(--sq-ink); box-shadow: 0 6px 18px var(--c-form-shadow); }
.v2.page-about .values2 .vitem h3, .v2.page-about .values2 .vitem p { color: var(--c-white); }
.v2.page-about .values2 .vitem h3 + p { border-top-color: var(--c-glass-line); }
.v2.page-about .values2 .vitem i { color: var(--c-amber); }
/* Team and board: the CTA gradient, orange corner */
.v2.page-about .team2 { background-image: linear-gradient(160deg, var(--c-teal-2) 0%, var(--c-deep) 100%); --g1: var(--c-teal-3); --g2: var(--c-orange); }
.v2.page-about .team2 .person .label { color: var(--c-amber); }
@media (prefers-reduced-motion: reduce) { .v2.page-about .promise::before { animation: none; } }
.v2 :is(.hdr-social, .msocial) svg { width: 14px; height: 14px; fill: currentColor; }
.v2 .mpanel .msocial a { justify-content: center; align-items: center; }

/* Home "How we create value" (the services reel): the CTA gradient with its drifting orange glow (client 2026-10-10) */
.v2.page-home .services { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, var(--c-deep) 0%, var(--c-teal-2) 100%); }
.v2.page-home .services::before {
  content: ''; position: absolute; inset: -35%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 22% 28%, var(--c-orange) 0%, transparent 70%), radial-gradient(42% 50% at 78% 72%, var(--c-teal-3) 0%, transparent 70%),
    radial-gradient(30% 38% at 62% 22%, var(--c-orange) 0%, transparent 72%);
  filter: blur(48px); opacity: .45; animation: gel 30s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .v2.page-home .services::before { animation: none; } }