/* ═══════════════════════════════════════════════════
   BRAND PALETTE + BASE
   Target: the whole .cw-proper system.
   Does:   stores every brand colour, the body font and the default
           text colour as named variables; clears stray margins; sets
           the cyan text-selection colour and smooth scrolling.
   Result: one place to change a colour or font and have it flow
           through every rule below.
   ═══════════════════════════════════════════════════ */
.cw-proper {
  --cwp-black: #0a0a0a;
  --cwp-off-black: #0f0f0f;
  --cwp-dark: #161616;
  --cwp-charcoal: #1e1e1e;
  --cwp-deep: #18191b;
  --cwp-slate: #5A6872;
  --cwp-grey: #777;
  --cwp-silver: #a0a0a0;
  --cwp-light: #ccc;
  --cwp-ash: #d6d8da;
  --cwp-mist: #e0e2e4;
  --cwp-frost: #eaecee;
  --cwp-pearl: #f2f3f4;
  --cwp-white: #edeef0;
  --cwp-accent: #44c8f5;
  --cwp-accent-soft: rgba(68,200,245,0.06);
  --cwp-accent-glow: rgba(68,200,245,0.35);
  --cwp-font: 'Raleway', sans-serif;
  --cwp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--cwp-font);
  color: var(--cwp-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
}
.cw-proper *, .cw-proper *::before, .cw-proper *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

/* ELFSIGHT EXEMPTION — keep the universal reset above from zeroing the
   Google reviews widget. Elfsight ships its own spacing; revert hands
   each property back to Elfsight instead of forcing 0. Without this the
   widget renders squashed (padding/margins stripped to 0). */
.cw-proper [class*="eapps-"],
.cw-proper [class*="eapps-"] *,
.cw-proper [class*="eapps-"] *::before,
.cw-proper [class*="eapps-"] *::after,
.cw-proper [class*="es-embed-root"],
.cw-proper [class*="es-embed-root"] * {
  margin: revert;
  padding: revert;
  box-sizing: revert;
}


.cw-proper ::selection {
  background: var(--cwp-accent);
  color: var(--cwp-black);
}
html { scroll-behavior: smooth; }

/* SCROLL PROGRESS BAR
   Target: the thin line fixed to the very top of the window.
   Does:   fills left-to-right as the visitor scrolls down (the JS at
           the bottom drives the fill).
   Result: a subtle "how far through the page am I" indicator in cyan. */
.cwp-scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 2px;
  background: transparent;
  z-index: 99999; pointer-events: none;
}
.cwp-scroll-progress-bar {
  height: 100%;
  background: var(--cwp-accent);
  box-shadow: 0 0 8px var(--cwp-accent-glow);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

/* REVEAL — fade up on scroll
   Target: anything tagged .r (or .r-light).
   Does:   starts it invisible and shifted down, then eases it into
           place the moment it scrolls into view.
   Result: the page feels like it assembles itself rather than just
           being there. */
.cw-proper .r, .cw-proper .r-light {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 1s var(--cwp-ease), transform 1s var(--cwp-ease);
}
.cw-proper .r.v, .cw-proper .r-light.v { opacity: 1; transform: translateY(0); }

/* ACCENT LINES
   Target: the short cyan rules under eyebrows and headings.
   Does:   draws them on scroll — .r-line from the left, .r-line-center
           from the middle outward, .r-line-glow the same with a glow.
   Result: small on-brand punctuation between blocks of text. */
.cw-proper .r-line {
  width: 60px; height: 2px;
  background: var(--cwp-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--cwp-ease);
}
.cw-proper .r-line.v { transform: scaleX(1); }

.cw-proper .r-line-glow {
  width: 60px; height: 2px;
  background: var(--cwp-accent);
  box-shadow: 0 0 12px var(--cwp-accent-glow), 0 0 30px rgba(68,200,245,0.12);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--cwp-ease);
}
.cw-proper .r-line-glow.v { transform: scaleX(1); }

.cw-proper .r-line-center {
  width: 60px; height: 2px;
  background: var(--cwp-accent);
  transform: scaleX(0); transform-origin: center; /* grows from the middle, not the left */
  transition: transform 1.2s var(--cwp-ease);
  margin-left: auto; margin-right: auto;
}
.cw-proper .r-line-center.v { transform: scaleX(1); }

/* SPLIT REVEAL — slide in from the side
   Target: .r-split-left and .r-split-right.
   Does:   slides one in from the left and the other from the right
           (slightly later) as they enter view.
   Result: two-column rows where each half arrives from its own side.
           On tablet/phone these fall back to a plain fade-up (see the
           responsive block near the end). */
.cw-proper .r-split-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1.2s var(--cwp-ease), transform 1.2s var(--cwp-ease);
}
.cw-proper .r-split-left.v {
  opacity: 1;
  transform: translateX(0);
}
.cw-proper .r-split-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1.2s var(--cwp-ease), transform 1.2s var(--cwp-ease);
  transition-delay: 0.15s;
}
.cw-proper .r-split-right.v {
  opacity: 1;
  transform: translateX(0);
}

/* STAGGER — sequence a group's reveals
   Target: a parent tagged .stagger.
   Does:   gives each .r child a slightly longer delay than the last.
   Result: items reveal one after another instead of all at once. */
.cw-proper .stagger > .r:nth-child(1), .cw-proper .stagger > .r-light:nth-child(1) { transition-delay: 0s; }
.cw-proper .stagger > .r:nth-child(2), .cw-proper .stagger > .r-light:nth-child(2) { transition-delay: 0.12s; }
.cw-proper .stagger > .r:nth-child(3), .cw-proper .stagger > .r-light:nth-child(3) { transition-delay: 0.24s; }
.cw-proper .stagger > .r:nth-child(4), .cw-proper .stagger > .r-light:nth-child(4) { transition-delay: 0.36s; }
.cw-proper .stagger > .r:nth-child(5), .cw-proper .stagger > .r-light:nth-child(5) { transition-delay: 0.48s; }
.cw-proper .stagger > .r:nth-child(6), .cw-proper .stagger > .r-light:nth-child(6) { transition-delay: 0.6s; }
.cw-proper .stagger > .r:nth-child(7), .cw-proper .stagger > .r-light:nth-child(7) { transition-delay: 0.72s; }
.cw-proper .stagger > .r:nth-child(8), .cw-proper .stagger > .r-light:nth-child(8) { transition-delay: 0.84s; }

/* TEXT WIPE
   Target: a heading tagged .cwp-wipe.
   Does:   sweeps a cyan bar across it left-to-right then off, uncovering
           the words as it passes.
   Result: a more dramatic, deliberate reveal for one key line. */
.cw-proper .cwp-wipe {
  position: relative;
  overflow: hidden;
  display: block;
}
.cw-proper .cwp-wipe > * {
  opacity: 0;
  transition: opacity 0.01s 0.5s;
}
.cw-proper .cwp-wipe.v > * {
  opacity: 1;
}
.cw-proper .cwp-wipe::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  background: var(--cwp-accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 2;
}
.cw-proper .cwp-wipe.v::after {
  animation: cwpWipeSweep 1.2s var(--cwp-ease) forwards;
}
@keyframes cwpWipeSweep {
  0% { transform: scaleX(0); transform-origin: left; }
  45% { transform: scaleX(1); transform-origin: left; }
  45.01% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* SCALE REVEAL
   Target: an element tagged .cwp-scale-in.
   Does:   eases it up from 97% size and slightly low to full size.
   Result: a gentler, zoom-in alternative to the plain fade-up. */
.cw-proper .cwp-scale-in {
  opacity: 0;
  transform: scale(0.97) translateY(15px);
  transition: opacity 1.3s var(--cwp-ease), transform 1.3s var(--cwp-ease);
}
.cw-proper .cwp-scale-in.v {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* FADE-SCALE
   Target: elements added by JavaScript after the page loads.
   Does:   quick fade in from 92% size.
   Result: late-arriving elements still animate in instead of popping. */
.cw-proper .cwp-fade-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s var(--cwp-ease), transform 0.7s var(--cwp-ease);
}
.cw-proper .cwp-fade-scale.v {
  opacity: 1;
  transform: scale(1);
}

/* GRAIN TEXTURE
   Target: any section given the class .cwp-grain.
   Does:   lays a barely-there film grain over it (inline SVG, no image
           request).
   Result: flat backgrounds read like paper rather than plastic. */
.cw-proper .cwp-grain::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.022;
  pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* TYPE — small labels
   Target: the little uppercase, wide-spaced labels above headings.
   Does:   styles the cyan eyebrow, its grey sub-variant, and the
           closing tagline (with a slightly larger hero version).
   Result: consistent kicker labels everywhere, sizes locked in px. */
.cw-proper .cwp-eyebrow,
.cw-proper .cwp-eyebrow * {
  font-family: var(--cwp-font) !important;
  font-size: 15px !important; 
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important; 
  color: var(--cwp-accent) !important; 
  font-weight: 700 !important;
}

.cw-proper .cwp-eyebrow-sub,
.cw-proper .cwp-eyebrow-sub * {
  font-size: 15px !important; 
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important; 
  color: var(--cwp-grey) !important; 
  font-weight: 700 !important;
}
.cw-proper .cwp-eyebrow-sub { margin-top: 4px; }

.cw-proper .cwp-closing-tagline,
.cw-proper .cwp-closing-tagline * {
  font-family: var(--cwp-font) !important;
  font-size: 15px !important; 
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important; 
  color: var(--cwp-accent) !important; 
  font-weight: 700 !important;
}
.cw-proper .cwp-closing-tagline { margin-top: 25px; }

/* Larger closing-tagline, used only in the hero to match its 15px eyebrow */
.cw-proper .cwp-closing-tagline--hero,
.cw-proper .cwp-closing-tagline--hero * {
  font-size: 15px !important;
  letter-spacing: 0.35em !important;
}
.cw-proper .cwp-closing-tagline--hero { margin-top: 35px; }

/* HEADINGS — Playfair italic, never bold
   Target: every heading class on the site.
   Does:   forces the editorial italic serif look, and supports the
           two-line pattern (.cwp-l1 neutral, .cwp-l2 cyan). Colour
           variants for light backgrounds and smaller sizes for tablet
           and phone follow underneath.
   Result: one consistent heading voice, scaled per screen size. */
.cw-proper .cwp-section-title,
.cw-proper .cwp-section-title-light,
.cw-proper .cwp-pillars-title,
.cw-proper .cwp-cta-title,
.cw-proper .cwp-hero-heading,
.cw-proper .cwp-founder-quote,
.cw-proper .cwp-cta-tagline--large {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.22;
  margin-bottom: 25px;
}

.cw-proper .cwp-section-title { font-size: clamp(28px, 5.5vw, 42px); color: var(--cwp-white); }
.cw-proper .cwp-section-title-light { font-size: clamp(28px, 5.5vw, 42px); color: var(--cwp-black); }
.cw-proper .cwp-pillars-title { font-size: clamp(28px, 5.5vw, 42px); color: var(--cwp-white); line-height: 1.25; }
.cw-proper .cwp-cta-title { font-size: clamp(28px, 5.5vw, 42px); color: var(--cwp-white); line-height: 1.2; margin-bottom: 0.3em; }

.cw-proper .cwp-l1 {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 37.5px !important;
  display: block;
  line-height: 1.22;
}
.cw-proper .cwp-l2 {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  color: var(--cwp-accent) !important;
  display: block;
  line-height: 1.25;
}

/* Heading colour variants — which lines are dark, light, or cyan */
.cw-proper .cwp-section-title-light .cwp-l1 { color: var(--cwp-black) !important; }
.cw-proper .cwp-section-title-light .cwp-l2 { color: var(--cwp-accent) !important; }
.cw-proper .cwp-heading-all-dark .cwp-l1,
.cw-proper .cwp-heading-all-dark .cwp-l2 { color: var(--cwp-black) !important; }
.cw-proper .cwp-section-title .cwp-l1,
.cw-proper .cwp-pillars-title .cwp-l1,
.cw-proper .cwp-cta-title .cwp-l1,
.cw-proper .cwp-hero-heading .cwp-l1,
.cw-proper .cwp-founder-quote .cwp-l1 { color: var(--cwp-white) !important; }

/* Smaller heading sizes for tablet and phone */
@media (max-width: 1024px) {
  .cw-proper .cwp-l1 { font-size: 33px !important; }
  .cw-proper .cwp-l2 { font-size: 27px !important; }
  .cw-proper .cwp-l2--large { font-size: 33px !important; }
}
@media (max-width: 768px) {
  .cw-proper .cwp-l1 { font-size: 29px !important; }
  .cw-proper .cwp-l2 { font-size: 23.5px !important; }
  .cw-proper .cwp-l2--large { font-size: 29px !important; }
}
@media (max-width: 480px) {
  .cw-proper .cwp-l1 { font-size: 25px !important; }
  .cw-proper .cwp-l2 { font-size: 20px !important; }
  .cw-proper .cwp-l2--large { font-size: 25px !important; }
}

/* HERO
   Target: the tall top section of a page.
   Does:   full-bleed background image, a dark gradient so the text
           stays readable, and an eyebrow / heading / body that fade up
           in sequence the moment the page loads.
   Result: a confident, cinematic opening. */
.cw-proper .cwp-hero {
  position: relative; min-height: 900px; overflow: hidden;
  display: flex; align-items: center; background: var(--cwp-black); padding: 8vh 0 18vh;
}
.cw-proper .cwp-hero-bg {
  position: absolute; 
  top: -25%; 
  bottom: -20%; 
  left: 0; 
  right: 0;
  background: url('/wp-content/uploads/2026/03/lovely.webp') right center / cover no-repeat;
  will-change: transform; z-index: 1;
}
.cw-proper .cwp-hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to right,
      rgba(10,10,10,0.90) 0%,
      rgba(10,10,10,0.84) 16%,
      rgba(10,10,10,0.70) 36%,
      rgba(10,10,10,0.48) 56%,
      rgba(10,10,10,0.24) 78%,
      rgba(10,10,10,0.05) 100%),
    linear-gradient(to top, rgba(10,10,10,1) 0%, transparent 38%);
}
.cw-proper .cwp-hero-content {
  position: relative; z-index: 3; padding: 0 8vw; max-width: 1000px;
}
.cw-proper .cwp-hero-eyebrow,
.cw-proper .cwp-hero-eyebrow * {
  font-size: 15px !important; letter-spacing: 0.35em !important; text-transform: uppercase !important;
  color: var(--cwp-accent) !important; font-weight: 700 !important; line-height: 1.8;
}
.cw-proper .cwp-hero-eyebrow {
  margin-bottom: 40px;
  opacity: 0; transform: translateY(15px);
  animation: cwpHUp 0.8s var(--cwp-ease) 0.5s forwards;
}
.cw-proper .cwp-hero-heading {
  font-size: clamp(32px, 7vw, 45px) !important;
  letter-spacing: -0.015em;
  margin-bottom: 55px;
  opacity: 0; transform: translateY(30px);
  animation: cwpHUp 1s var(--cwp-ease) 0.7s forwards;
}
.cw-proper .cwp-hero-body {
  font-size: 16px; font-weight: 300; line-height: 1.9;
  color: var(--cwp-light); max-width: 680px;
  opacity: 0; transform: translateY(20px);
  animation: cwpHUp 0.8s var(--cwp-ease) 1.1s forwards;
}
.cw-proper .cwp-hero-body p { margin-bottom: 15px; }
.cw-proper .cwp-hero-body p:last-child { margin-bottom: 0; }
.cw-proper .cwp-hero-body .cwp-hero-closer {
  color: var(--cwp-light); font-weight: 400; font-style: normal; margin-top: 6px;
}
@keyframes cwpHUp { to { opacity: 1; transform: translateY(0); } }

/* HERO SKYLINE — shared footer band for all heroes
   Target: any hero section tagged .cwp-hero-skyline.
   Does:   pins a centered skyline stencil to the bottom edge and draws
           a 2px cyan accent line along the very bottom of the hero.
           The image and its height are custom properties, so a page
           picks a stencil by adding a registered modifier class
           (see REGISTERED STENCILS below) rather than pasting a URL.
   Result: every hero closes on a branded horizon; the set of allowed
           stencils lives in one place.
   Sits above the dark overlay (z2) but below the text content (z3),
   so it never covers a headline.
   Usage:  add cwp-hero-skyline to the hero <section> (works on
           .cwp-hero and .cwp-person hero variants). For a variant,
           add one modifier class, e.g.:
             class="cwp-hero cwp-hero-skyline cwp-skyline--skyline-extended"
           Genuine one-off (no engine edit) — set the var inline:
             style="--cwp-skyline-img: url('...'); --cwp-skyline-h: 120px;" */
.cw-proper .cwp-hero-skyline {
  --cwp-skyline-img: url('/wp-content/uploads/2026/07/Skyline-extended.webp');
  --cwp-skyline-h: 200px;
  border-bottom: 2px solid var(--cwp-accent);
}
.cw-proper .cwp-hero-skyline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 92%);
  height: var(--cwp-skyline-h);
  background: var(--cwp-skyline-img) bottom center / contain no-repeat;
  z-index: 2;
  pointer-events: none;
}

/* REGISTERED STENCILS — the curated set Tim chooses from.
   Add one block per stencil; override --cwp-skyline-h only when a
   silhouette sits taller or shorter than the default city line.
   REPLACE the placeholder URLs below with real WP media URLs before
   using these classes on a live page. */
.cw-proper .cwp-skyline--skyline-extended {
  --cwp-skyline-img: url('/wp-content/uploads/2026/07/Skyline-extended.webp');
  --cwp-skyline-h: 200px;
}
.cw-proper .cwp-skyline--coastal {
  --cwp-skyline-img: url('/wp-content/uploads/2026/07/PLACEHOLDER-coastal.webp');
}

@media (max-width: 768px) {
  .cw-proper .cwp-hero-skyline { --cwp-skyline-h: 120px; }
}
@media (max-width: 480px) {
  .cw-proper .cwp-hero-skyline { --cwp-skyline-h: 80px; }
}

/* SECTIONS — the building blocks
   Target: standard content sections.
   Does:   sets the padded section, its dark/alt/deep background shades,
           the hairline top border, and the default body copy inside.
   Result: the consistent dark canvas the rest of the page sits on. */
.cw-proper .cwp-section { padding: 14vh 8vw; position: relative; }
.cw-proper .cwp-section--alt { background: var(--cwp-off-black); }
.cw-proper .cwp-section--dark { background: var(--cwp-black); }
.cw-proper .cwp-section--deep { background: var(--cwp-deep); }
.cw-proper .cwp-section-border { border-top: 1px solid rgba(255,255,255,0.035); }
.cw-proper .cwp-definition-inner { max-width: 680px; }
.cw-proper .cwp-body-text {
  font-size: 16px; font-weight: 300; line-height: 2; color: var(--cwp-white);
}
.cw-proper .cwp-body-text p + p { margin-top: 15px; }
.cw-proper .cwp-coda {
  font-size: 16px; font-weight: 400; color: var(--cwp-light); font-style: italic; margin-top: 20px;
}

/* SPLIT LAYOUT — half image, half text
   Target: two-column rows.
   Does:   image on one side, content on the other, full height; the
           --reverse variant flips which side is which.
   Result: alternating image/text rows that stack to one column on
           tablet and below. */
.cw-proper .cwp-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 100vh;
  align-items: stretch;
}
.cw-proper .cwp-split-layout--reverse {
  direction: rtl;
}
.cw-proper .cwp-split-layout--reverse > * {
  direction: ltr;
}
.cw-proper .cwp-split-image {
  position: relative;
  overflow: hidden;
  min-height: 500px;
}
.cw-proper .cwp-split-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.cw-proper .cwp-split-content {
  display: flex;
  align-items: center;
  padding: 10vh 6vw;
}
.cw-proper .cwp-split-content-inner {
  max-width: 580px;
}

/* BUTTON — outline
   Target: the .cwp-btn link/button.
   Does:   bordered cyan button that fills solid cyan with dark text on
           hover.
   Result: the standard call-to-action style. */
.cw-proper .cwp-btn {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid var(--cwp-accent);
  color: var(--cwp-accent);
  font-family: var(--cwp-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.4s ease, color 0.4s ease;
}
.cw-proper .cwp-btn:hover {
  background: var(--cwp-accent);
  color: var(--cwp-black);
}

/* "MORE" LINK — reusable underline arrow-link (v2.5.2)
   Target: the .cwp-more-link component. Used for things like "The rest
           of the story" toggles and small "read more / visit X" links,
           anywhere on the site.
   Does:   dark sections (default) — white text at rest, accent on
           hover. Light sections (.cwp-light-section, .cwp-cta--light,
           .cwp-clients-half--light, .cwp-scorecard) — black text at
           rest, same accent on hover. The thin accent underline never
           changes.
   Works as either a <button> (toggle use — flip aria-expanded to
   "true" via JS and the arrow rotates) or a plain <a> (navigation use —
   just omit aria-expanded, the arrow sits still).
   Markup:
     <button type="button" class="cwp-more-link" aria-expanded="false">
       <span>Read more</span>
       <span class="cwp-more-link-arrow" aria-hidden="true">&rarr;</span>
     </button>
     <a href="/people/" class="cwp-more-link">
       <span>Meet the team</span>
       <span class="cwp-more-link-arrow" aria-hidden="true">&rarr;</span>
     </a>
   Result: one consistent "quiet" link style, correct on any background
           without the module needing its own copy of this CSS. */
.cw-proper .cwp-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 5px;
  background: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--cwp-accent);
  color: var(--cwp-white);
  font-family: var(--cwp-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.cw-proper .cwp-more-link:hover { color: var(--cwp-accent); }
.cw-proper .cwp-more-link-arrow { display: inline-block; transition: transform 0.3s ease; }
.cw-proper .cwp-more-link[aria-expanded="true"] .cwp-more-link-arrow { transform: rotate(-90deg); }

/* Light-section variant — black at rest, same accent hover as dark */
.cw-proper .cwp-light-section .cwp-more-link,
.cw-proper .cwp-cta--light .cwp-more-link,
.cw-proper .cwp-clients-half--light .cwp-more-link,
.cw-proper .cwp-scorecard .cwp-more-link {
  color: var(--cwp-black);
}
.cw-proper .cwp-light-section .cwp-more-link:hover,
.cw-proper .cwp-cta--light .cwp-more-link:hover,
.cw-proper .cwp-clients-half--light .cwp-more-link:hover,
.cw-proper .cwp-scorecard .cwp-more-link:hover {
  color: var(--cwp-accent);
}

@media (prefers-reduced-motion: reduce) {
  .cw-proper .cwp-more-link-arrow { transition: none; }
}

/* ARTICLE — long-form editor content (v2.6.0)
   Target: post/article bodies written in the WordPress editor and
           rendered through a Beaver Themer Post Content module. Wrap the
           post content in <div class="cw-proper"><div class="cwp-article">,
           or add cw-proper to the row and cwp-article to the Post Content
           module (Advanced > Class).
   Does:   styles the bare tags the editor emits (p, h2-h4, a, ul/ol,
           blockquote, img, figure) in the brand voice — Raleway body,
           Playfair italic headings, cyan accents, px sizing — so every
           post matches the site with no per-post work and no second
           source of brand values.
   Note:   the editor styles CLASSES nowhere; it emits bare tags. That is
           why this component targets tags rather than reusing
           .cwp-light-body etc.
   Result: one place that owns article styling, versioned with the
           engine. */
.cw-proper .cwp-article {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--cwp-font);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--cwp-charcoal);
}
.cw-proper .cwp-article p { margin: 0 0 22px; }
/* collapse the empty <p></p> a double-Enter leaves behind, so it adds no
   gap on top of the margin above. Fixing at source is still better. */
.cw-proper .cwp-article p:empty { display: none; }

.cw-proper .cwp-article h2,
.cw-proper .cwp-article h3,
.cw-proper .cwp-article h4 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--cwp-black);
  line-height: 1.25;
  margin: 48px 0 18px;
}
.cw-proper .cwp-article h2 { font-size: 30px; }
.cw-proper .cwp-article h3 { font-size: 24px; }
.cw-proper .cwp-article h4 { font-size: 20px; }
.cw-proper .cwp-article > h2:first-child,
.cw-proper .cwp-article > h3:first-child { margin-top: 0; }

.cw-proper .cwp-article a {
  color: var(--cwp-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--cwp-accent-glow);
  transition: border-color 0.2s ease;
}
.cw-proper .cwp-article a:hover { border-bottom-color: var(--cwp-accent); }

.cw-proper .cwp-article ul,
.cw-proper .cwp-article ol { margin: 0 0 22px; padding-left: 24px; }
.cw-proper .cwp-article li { margin-bottom: 10px; }
.cw-proper .cwp-article ul li::marker { color: var(--cwp-accent); }

.cw-proper .cwp-article blockquote {
  margin: 32px 0;
  padding: 6px 0 6px 24px;
  border-left: 2px solid var(--cwp-accent);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--cwp-black);
}
.cw-proper .cwp-article blockquote p:last-child { margin-bottom: 0; }

.cw-proper .cwp-article img { max-width: 100%; height: auto; border-radius: 4px; margin: 12px 0; }
.cw-proper .cwp-article figure { margin: 32px 0; }
.cw-proper .cwp-article figcaption { font-size: 13px; color: var(--cwp-grey); margin-top: 8px; }

.cw-proper .cwp-article strong { font-weight: 600; color: var(--cwp-black); }
.cw-proper .cwp-article em { font-style: italic; }

@media (max-width: 768px) {
  .cw-proper .cwp-article { font-size: 16px; }
  .cw-proper .cwp-article h2 { font-size: 26px; }
  .cw-proper .cwp-article h3 { font-size: 22px; }
  .cw-proper .cwp-article blockquote { font-size: 19px; }
}

/* BEAVER BUILDER BUTTONS — brand style, site-wide (v2.5.0)
   Model:
   · Label is ALWAYS WHITE — every button, rest and hover, dark or
     light. Set once by the generic rules below; light sections need no
     label rules of their own (v2.5.0 removed them).
   · Dark sections — rest: transparent fill + accent border. Hover:
     solid accent fill + accent border.
   · Light sections — rest: accent fill + accent border. Hover: black
     fill + accent border. (BOX only; see LIGHT-SECTION BOX below.)
   Light sections are: .cwp-light-section, .cwp-cta--light, the split
   module's white half .cwp-clients-half--light, and .cwp-scorecard
   (added v2.6.0).
   Covers both label spans BB emits: .fl-button__label and the older
   .fl-button-text. */

/* box */
.cw-proper .fl-button {
  background: transparent !important;
  border: 1px solid var(--cwp-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px !important;
}

/* resting label — white, all sections */
.cw-proper .fl-button,
.cw-proper .fl-button .fl-button__label,
.cw-proper .fl-button .fl-button-text {
  color: #ffffff !important;
  font-family: var(--cwp-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
}

/* hover / focus / active — solid fill; label always white (dark base) */
.cw-proper .fl-button:hover,
.cw-proper .fl-button:focus,
.cw-proper .fl-button:active {
  background: var(--cwp-accent) !important;
  border-color: var(--cwp-accent) !important;
  color: #ffffff !important;
}
.cw-proper .fl-button:hover .fl-button__label,
.cw-proper .fl-button:hover .fl-button-text,
.cw-proper .fl-button:focus .fl-button__label,
.cw-proper .fl-button:focus .fl-button-text,
.cw-proper .fl-button:active .fl-button__label,
.cw-proper .fl-button:active .fl-button-text {
  color: #ffffff !important;
}

/* LIGHT-SECTION BOX — solid accent chip (v2.5.0)
   Labels are white in every state from the generic rules above, so the
   only thing light sections change is the BOX fill/border:
   · Rest:  accent fill, accent border.
   · Hover / focus / active: black fill, accent border.
   Light rest selectors (0,3,0) out-rank the generic box (0,2,0); light
   hover selectors (0,4,0 — the :hover counts as a class) out-rank the
   generic hover box (0,3,0). border-color only overrides the colour of
   the generic 1px solid border, so the 1px width/style carry through.
   Dark-section buttons are untouched.
   v2.6.0 — .cwp-scorecard added: it is a white section but was not a
   registered light context, so its buttons were inheriting the dark
   default (white label on white). */
.cw-proper .cwp-light-section .fl-button,
.cw-proper .cwp-cta--light .fl-button,
.cw-proper .cwp-clients-half--light .fl-button,
.cw-proper .cwp-scorecard .fl-button {
  background: var(--cwp-accent) !important;
  border-color: var(--cwp-accent) !important;
}
.cw-proper .cwp-light-section .fl-button:hover,
.cw-proper .cwp-light-section .fl-button:focus,
.cw-proper .cwp-light-section .fl-button:active,
.cw-proper .cwp-cta--light .fl-button:hover,
.cw-proper .cwp-cta--light .fl-button:focus,
.cw-proper .cwp-cta--light .fl-button:active,
.cw-proper .cwp-clients-half--light .fl-button:hover,
.cw-proper .cwp-clients-half--light .fl-button:focus,
.cw-proper .cwp-clients-half--light .fl-button:active,
.cw-proper .cwp-scorecard .fl-button:hover,
.cw-proper .cwp-scorecard .fl-button:focus,
.cw-proper .cwp-scorecard .fl-button:active {
  background: var(--cwp-black) !important;
  border-color: var(--cwp-accent) !important;
}

/* LIGHT SECTIONS
   Target: the white/frost counterpart to the dark sections.
   Does:   light background (optionally an image behind a white veil),
           dark body copy, plus the quote callout and the dashed
           feature list used inside.
   Result: a bright "breather" section between the dark bands. */
.cw-proper .cwp-light-section {
  position: relative; overflow: hidden;
  padding: 14vh 8vw;
  background: #ffffff;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.cw-proper .cwp-light-section--frost {
  background: var(--cwp-frost);
}
.cw-proper .cwp-light-section--full {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.cw-proper .cwp-light-bg {
  position: absolute;
  top: -15%; bottom: -15%;
  left: 0; right: 0;
  background-size: cover;
  background-position: center 20%;
  will-change: transform;
  z-index: 1;
}
.cw-proper .cwp-bg-partnership {
  background-position: 12% 20%;
}
.cw-proper .cwp-light-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(255,255,255,0.72);
}
.cw-proper .cwp-light-content {
  position: relative; z-index: 3;
  width: 100%;
}
.cw-proper .cwp-light-body {
  font-size: 16px; font-weight: 300; line-height: 2; color: var(--cwp-slate);
}
.cw-proper .cwp-light-body p + p { margin-top: 15px; }
.cw-proper .cwp-light-coda {
  font-size: 16px; font-weight: 400; color: var(--cwp-slate); font-style: italic; margin-top: 20px;
}
.cw-proper .cwp-light-emphasis {
  font-size: 16px; font-weight: 400; color: var(--cwp-black); font-style: italic; margin-top: 20px;
}
.cw-proper .cwp-light-callout {
  padding: 25px 30px;
  border-left: 2px solid var(--cwp-accent);
  background: var(--cwp-mist);
  margin-bottom: 30px;
}
.cw-proper .cwp-light-callout-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(13px, 2.5vw, 20px);
  font-weight: 400; line-height: 1.5; color: var(--cwp-black);
}
.cw-proper .cwp-light-callout .cwp-quote-mark {
  color: var(--cwp-accent); font-size: 1.3em; font-weight: 400; font-style: italic;
}
.cw-proper .cwp-light-callout .cwp-quote-meta {
  font-size: 12px; letter-spacing: 0.25em; color: var(--cwp-grey);
  text-transform: uppercase; font-weight: 400; margin-top: 10px;
  font-family: var(--cwp-font);
  font-style: normal;
}
.cw-proper .cwp-feature-list {
  list-style: none; padding: 0; margin: 30px 0;
}
.cw-proper .cwp-feature-list li {
  font-size: 16px; font-weight: 300; line-height: 1.85;
  color: var(--cwp-slate);
  padding: 14px 0 14px 25px;
  border-bottom: 1px solid var(--cwp-ash);
  position: relative;
}
.cw-proper .cwp-feature-list li::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 12px; height: 1px;
  background: var(--cwp-accent);
  transform: translateY(-50%);
}
.cw-proper .cwp-feature-list li:last-child { border-bottom: none; }

/* PROOF — Google reviews band
   Target: the social-proof section.
   Does:   dark image background, an animated row of stars, a heading,
           and a bordered testimonial quote.
   Result: third-party credibility, on brand. */
.cw-proper .cwp-proof {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 100vh; padding: 14vh 0;
  background: var(--cwp-black);
}
.cw-proper .cwp-proof-bg {
  position: absolute; inset: 0;
  background: url('/wp-content/uploads/2026/03/whiteman.webp') 30% center / cover no-repeat;
  z-index: 1;
}
.cw-proper .cwp-proof-overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to right, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.75) 50%, rgba(10,10,10,0.2) 100%),
    linear-gradient(to bottom, rgba(10,10,10,1) 0%, transparent 12%),
    linear-gradient(to top, rgba(10,10,10,1) 0%, transparent 12%);
}
.cw-proper .cwp-proof-content {
  position: relative; z-index: 3;
  padding: 0 8vw; max-width: 720px;
}
.cw-proper .cwp-proof-stars {
  display: flex; gap: 4px; margin-bottom: 15px;
}
.cw-proper .cwp-proof-star {
  font-size: 16px; color: var(--cwp-accent);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cw-proper .cwp-proof-stars.v .cwp-proof-star { opacity: 1; transform: translateY(0); }
.cw-proper .cwp-proof-stars.v .cwp-proof-star:nth-child(1) { transition-delay: 0.1s; }
.cw-proper .cwp-proof-stars.v .cwp-proof-star:nth-child(2) { transition-delay: 0.2s; }
.cw-proper .cwp-proof-stars.v .cwp-proof-star:nth-child(3) { transition-delay: 0.3s; }
.cw-proper .cwp-proof-stars.v .cwp-proof-star:nth-child(4) { transition-delay: 0.4s; }
.cw-proper .cwp-proof-stars.v .cwp-proof-star:nth-child(5) { transition-delay: 0.5s; }
.cw-proper .cwp-testimonial {
  margin-top: 40px;
  padding: 25px 0 25px 20px;
  border-left: 2px solid var(--cwp-accent);
}
.cw-proper .cwp-testimonial-text {
  font-size: 16px; font-weight: 300; line-height: 2;
  color: var(--cwp-silver); font-style: italic;
}
.cw-proper .cwp-testimonial-text p + p { margin-top: 12px; }
.cw-proper .cwp-testimonial-author {
  font-size: 16px; font-weight: 700; color: var(--cwp-white); margin-top: 15px;
}
.cw-proper .cwp-testimonial-source {
  font-size: 12px; letter-spacing: 0.2em;
  color: var(--cwp-accent); font-weight: 500; margin-top: 3px;
}

/* PILLARS — feature grid
   Target: the four-up grid of cards.
   Does:   each card has a number, an italic title and text, and lifts
           slightly on hover.
   Result: scannable feature/value cards; drops to two columns on
           tablet and one on phone. */
.cw-proper .cwp-pillars-header { max-width: 560px; margin-bottom: 8vh; }
.cw-proper .cwp-pillars-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,0.035);
}
.cw-proper .cwp-pillar {
  background: var(--cwp-off-black); padding: 35px 25px;
  transition: background 0.5s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.cw-proper .cwp-pillar:hover {
  background: var(--cwp-dark); transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.cw-proper .cwp-pillar-num { font-size: 12px; letter-spacing: 0.3em; color: var(--cwp-accent); font-weight: 700; margin-bottom: 15px; }
.cw-proper .cwp-pillar-title { 
  font-family: 'Playfair Display', serif; 
  font-style: italic; 
  font-size: 22px; 
  font-weight: 400; 
  color: var(--cwp-white); 
  margin-bottom: 9px; 
  letter-spacing: 0.02em; 
}
.cw-proper .cwp-pillar-text { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--cwp-silver); }

/* STATS — big figures
   Target: the row of headline numbers.
   Does:   large cyan figures with small labels (the JS can count them
           up from zero), plus an animated star-row variant.
   Result: punchy, quick-read proof points. */
.cw-proper .cwp-stats { padding: 9vh 8vw; display: flex; justify-content: center; }
.cw-proper .cwp-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6vw; text-align: center;
}
.cw-proper .cwp-stat-fig {
  font-size: clamp(25px, 4.5vw, 38px); font-weight: 100;
  color: var(--cwp-accent) !important; letter-spacing: -0.02em; line-height: 1; margin-bottom: 7px;
}
.cw-proper .cwp-stat-fig span { color: var(--cwp-accent) !important; }
.cw-proper .cwp-stat-fig--bold {
  font-size: clamp(25px, 4.5vw, 38px); font-weight: 700;
  color: var(--cwp-accent) !important; letter-spacing: -0.02em; line-height: 1; margin-bottom: 7px;
}
.cw-proper .cwp-stat-label {
  font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--cwp-grey); font-weight: 400; line-height: 1.6;
}
.cw-proper .cwp-stat-stars {
  display: flex; justify-content: center; gap: 3px;
}
.cw-proper .cwp-stat-star {
  opacity: 0;
  transform: translateY(12px) scale(0.5);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cw-proper .cwp-stat-stars.v .cwp-stat-star {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cw-proper .cwp-stat-stars.v .cwp-stat-star:nth-child(1) { transition-delay: 0.4s; }
.cw-proper .cwp-stat-stars.v .cwp-stat-star:nth-child(2) { transition-delay: 0.8s; }
.cw-proper .cwp-stat-stars.v .cwp-stat-star:nth-child(3) { transition-delay: 1.2s; }
.cw-proper .cwp-stat-stars.v .cwp-stat-star:nth-child(4) { transition-delay: 1.6s; }
.cw-proper .cwp-stat-stars.v .cwp-stat-star:nth-child(5) { transition-delay: 2.0s; }

/* PERSON — founder / quote section
   Target: the portrait section.
   Does:   dark photo background, a large italic quote, and a name/role
           card that can sit pinned bottom-right on desktop.
   Result: a human, signed moment; the card stacks under the quote on
           phone. */
.cw-proper .cwp-person {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: 100vh; padding: 14vh 0;
}
.cw-proper .cwp-person-bg {
  position: absolute; inset: 0;
  background: url('/wp-content/uploads/2026/03/tim-black.webp') 70% center / cover no-repeat;
  z-index: 1;
}
.cw-proper .cwp-person-overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to right, rgba(10,10,10,0.93) 0%, rgba(10,10,10,0.6) 45%, rgba(10,10,10,0.15) 100%),
    linear-gradient(to bottom, rgba(10,10,10,1) 0%, rgba(10,10,10,0.6) 8%, transparent 20%),
    linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.6) 8%, transparent 20%);
}
.cw-proper .cwp-person-content {
  position: relative; z-index: 3; padding: 0 8vw; max-width: 920px;
}
.cw-proper .cwp-founder-quote {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.cw-proper .cwp-founder-quote::before,
.cw-proper .cwp-founder-quote::after {
  display: none !important;
}
.cw-proper .cwp-founder-quote .cwp-l1 {
  color: var(--cwp-white) !important;
}
.cw-proper .cwp-founder-quote .cwp-l2 {
  color: var(--cwp-accent) !important;
}
.cw-proper .cwp-founder-card {
  margin-top: 30px; padding-left: 15px; border-left: 2px solid var(--cwp-accent);
}
.cw-proper .cwp-founder-card-absolute {
  position: absolute;
  bottom: 8vh;
  right: 26vw;
  z-index: 3;
  padding-left: 15px;
  border-left: 2px solid var(--cwp-accent);
}
/* NAME + ROLE — the global defaults for every name/role card on the site
   (person sections, claim attributions, anywhere .cwp-founder-card is
   used). A page that wants a different treatment overrides these in its
   OWN module, scoped to that section's ID — never by editing these two
   lines, or every other card on the site changes with it.
   v2.6.0 — the name rule below had been replaced by a page-level
   #cwp-person-tim rule, which left every other name on the site with no
   engine styling at all. Restored.
   v2.6.0 — role weight logged at 400 (unbold); it was already live. */
.cw-proper .cwp-founder-name { font-size: 16px; font-weight: 700; color: var(--cwp-white); margin-bottom: 3px; }
.cw-proper .cwp-founder-role { font-size: 12px; letter-spacing: 0.2em; color: var(--cwp-accent); font-weight: 400; }

/* CALL TO ACTION
   Target: the centred closing block.
   Does:   heading, body and button, centred; includes a light-background
           variant. The button itself is now styled by the global
           BEAVER BUILDER BUTTONS block above (v2.2.8).
   Result: the page's final ask. */
.cw-proper .cwp-cta {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12vh 8vw;
}
.cw-proper .cwp-cta-inner { max-width: 600px; }
.cw-proper .cwp-cta-body {
  font-size: 16px; 
  font-weight: 300; 
  line-height: 2; 
  color: var(--cwp-light); 
  margin-top: 45px;
  margin-bottom: 45px;
}
.cw-proper .cwp-cta-btn-wrap { margin-top: 20px; }
.cw-proper .cwp-cta-tagline {
  font-size: 15px; font-weight: 300; color: var(--cwp-white); font-style: italic; margin-top: 30px;
}
.cw-proper .cwp-cta--light {
  background: #ffffff;
}
.cw-proper .cwp-cta--light .cwp-cta-title {
  color: var(--cwp-black);
}
.cw-proper .cwp-cta--light .cwp-cta-body {
  color: var(--cwp-light);
}
.cw-proper .cwp-cta--light .cwp-eyebrow {
  color: var(--cwp-accent);
}
.cw-proper .cwp-cta-tagline--large {
  font-size: clamp(28px, 5.5vw, 42px);
  line-height: 1.2;
  color: var(--cwp-slate); margin-top: 30px;
}

/* RESPONSIVE — tablet and phone
   Target: smaller screens.
   Does:   re-flows grids to fewer columns, eases padding, re-aims the
           background images, and turns the side-slide reveals into
           plain fade-ups.
   Result: the same design, comfortable on any width. */
@media (max-width: 1024px) {
  .cw-proper .cwp-pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .cw-proper .cwp-hero-bg { background-position: 75% 20%; }
  .cw-proper .cwp-light-bg { background-position: 35% 20%; }
  .cw-proper .cwp-proof-bg { background-position: 25% center; }
  .cw-proper .cwp-split-layout { grid-template-columns: 1fr; }
  .cw-proper .cwp-split-layout--reverse { direction: ltr; }
  .cw-proper .cwp-split-image { min-height: 400px; }
  /* When stacked, side-slide reveals become a simple fade-up */
  .cw-proper .r-split-left { transform: translateY(45px); }
  .cw-proper .r-split-left.v { transform: translateY(0); }
  .cw-proper .r-split-right { transform: translateY(45px); transition-delay: 0s; }
  .cw-proper .r-split-right.v { transform: translateY(0); }
}
@media (max-width: 768px) {
  .cw-proper .cwp-section,
  .cw-proper .cwp-light-section { padding: 10vh 7vw; }
  .cw-proper .cwp-hero-content { padding: 0 7vw; }
  .cw-proper .cwp-pillars-grid { grid-template-columns: 1fr; }
  .cw-proper .cwp-stats-grid { grid-template-columns: 1fr; gap: 4vh; }
  .cw-proper .cwp-hero-bg { background-position: 78% 15%; }
  .cw-proper .cwp-hero-overlay {
    background:
      linear-gradient(to right,
        rgba(10,10,10,0.86) 0%,
        rgba(10,10,10,0.78) 25%,
        rgba(10,10,10,0.60) 55%,
        rgba(10,10,10,0.38) 80%,
        rgba(10,10,10,0.22) 100%),
      linear-gradient(to top, rgba(10,10,10,1) 0%, transparent 40%);
  }
  .cw-proper .cwp-light-bg { background-position: 30% 20%; }
  .cw-proper .cwp-proof { min-height: auto; padding: 12vh 0; }
  .cw-proper .cwp-proof-bg { background-position: 20% center; }
  .cw-proper .cwp-proof-overlay {
    background:
      linear-gradient(rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.8) 100%),
      linear-gradient(to bottom, rgba(10,10,10,1) 0%, transparent 15%),
      linear-gradient(to top, rgba(10,10,10,1) 0%, transparent 15%);
  }
  .cw-proper .cwp-person { min-height: 70vh; }
  .cw-proper .cwp-founder-card-absolute { position: relative; bottom: auto; right: auto; margin-top: 30px; padding: 0 8vw; }
  .cw-proper .cwp-person-bg { background-position: 95% 15%; }
  .cw-proper .cwp-person-overlay {
    background:
      linear-gradient(rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.5) 30%, rgba(10,10,10,0.7) 70%, rgba(10,10,10,0.95) 100%),
      linear-gradient(to bottom, rgba(10,10,10,1) 0%, transparent 15%),
      linear-gradient(to top, rgba(10,10,10,1) 0%, transparent 15%);
  }
  .cw-proper .cwp-split-content { padding: 8vh 7vw; }
}
@media (max-width: 480px) {
  .cw-proper .cwp-section,
  .cw-proper .cwp-light-section { padding: 8vh 6vw; }
  .cw-proper .cwp-hero-content { padding: 0 6vw; }
  .cw-proper .cwp-proof-content { padding: 0 6vw; }
  .cw-proper .cwp-person-content { padding: 0 6vw; }
  .cw-proper .cwp-hero-bg { background-position: 90% 10%; }
  .cw-proper .cwp-hero-overlay {
    background:
      linear-gradient(to right,
        rgba(10,10,10,0.84) 0%,
        rgba(10,10,10,0.74) 30%,
        rgba(10,10,10,0.54) 60%,
        rgba(10,10,10,0.34) 85%,
        rgba(10,10,10,0.18) 100%),
      linear-gradient(to top, rgba(10,10,10,1) 0%, transparent 45%);
  }
  .cw-proper .cwp-person-bg { background-position: 95% 10%; }
  .cw-proper .cwp-light-section--full { min-height: 80vh; }
  .cw-proper .cwp-light-bg { background-position: 25% 15%; }
  .cw-proper .cwp-proof-bg { background-position: 15% center; }
  .cw-proper .cwp-split-content { padding: 8vh 6vw; }
}

/* REDUCED MOTION — accessibility
   Target: visitors whose device is set to "reduce motion".
   Does:   switches off every animation here so elements simply appear.
   Result: no nausea-inducing motion for those who opt out; zero effect
           for everyone else. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cw-proper .r, .cw-proper .r-light,
  .cw-proper .r-split-left, .cw-proper .r-split-right,
  .cw-proper .cwp-scale-in, .cw-proper .cwp-fade-scale,
  .cw-proper .cwp-wipe > *,
  .cw-proper .cwp-hero-eyebrow, .cw-proper .cwp-hero-heading, .cw-proper .cwp-hero-body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .cw-proper .r-line, .cw-proper .r-line-glow, .cw-proper .r-line-center {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .cw-proper .cwp-wipe::after { display: none !important; }
}