/* ═══════════════════════════════════════════════════════════════════════════
   WPC E-Portal — Homepage (v2)
   ---------------------------------------------------------------------------
   Loaded ONLY on the front page (see functions.php enqueue). Every selector is
   scoped under .wpc-home so this file can never affect another template, and
   deleting it can never break the rest of the portal.

   Palette, radii and shadows deliberately reuse the portal's existing brand
   tokens (navy / teal / gold) rather than introducing a new design system.
   ═══════════════════════════════════════════════════════════════════════════ */

.wpc-home {
  /* ── brand tokens (inherited from the portal's existing palette) ── */
  --navy:    #0C2340;
  --navy-2:  #10305A;
  --navy-3:  #16406F;
  --navy-ink:#071628;

  --teal:    #0D9B8A;   /* brand teal — fills/icons/dark backgrounds */
  --teal-2:  #12B7A3;
  --teal-3:  #5EEAD4;   /* teal text ON dark navy */
  --gold:    #D4A012;

  /* Brand teal on a light background is only ~3.4:1, so small teal TEXT gets
     this darkened variant instead. Fills and icons keep the brand teal. */
  --teal-ink: #07766A;
  /* Deeper gradient for solid teal buttons — the brand teal fails AA behind
     white 15px bold label text; this passes at both ends of the gradient. */
  --teal-btn-1: #06705F;
  --teal-btn-2: #0A8073;

  --ink:     #101F35;
  --body:    #43556E;
  /* muted/faint were 3.9:1 and 2.6:1 on the page background — both below the
     4.5:1 AA floor for the body copy and notes that use them. */
  --muted:   #5F7089;
  --faint:   #7A8AA0;

  --bg:      #F5F8FC;
  --bg-2:    #ECF2F9;
  --card:    #FFFFFF;
  --line:    #E2EAF3;
  --line-2:  #CEDBEA;

  /* ── radii ── */
  --r-xs: 10px;
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ── shadows: wide + low opacity reads calmer than tight + dark ── */
  --sh-xs: 0 1px 2px rgba(16,31,53,.04), 0 2px 8px rgba(16,31,53,.04);
  --sh-sm: 0 2px 4px rgba(16,31,53,.03), 0 6px 18px rgba(16,31,53,.06);
  --sh:    0 4px 10px rgba(16,31,53,.04), 0 14px 40px rgba(16,31,53,.09);
  --sh-lg: 0 10px 24px rgba(16,31,53,.07), 0 30px 70px rgba(16,31,53,.14);

  --ease: cubic-bezier(.4, 0, .2, 1);
  /* "Expo out" — snaps into motion, settles gently. Used for hover lifts and
     the parallax layer, where --ease's linear-ish start reads as sluggish. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Masi / tapa motif — a nod to the existing design's Pacific character,
     kept far subtler here so it reads as texture rather than pattern. */
  --masi: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='60,6 114,60 60,114 6,60' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.6'/%3E%3Cpolygon points='60,30 90,60 60,90 30,60' fill='none' stroke='white' stroke-opacity='.10' stroke-width='1.2'/%3E%3Cpolygon points='60,46 74,60 60,74 46,60' fill='white' fill-opacity='.07'/%3E%3C/svg%3E");

  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--body);
  background: var(--bg);
  overflow-x: clip;
  /* Roboto renders noticeably cleaner with these on the large display sizes. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* :where() keeps this reset at zero added specificity. A plain `.wpc-home a`
   selector (0,1,1) outranks every .wpc-btn-* colour rule (0,1,0) and silently
   forces buttons to inherit their parent's colour — which rendered the white
   CTA button as white-on-white and left the others correct only by accident. */
.wpc-home :where(a) { text-decoration: none; color: inherit; }
.wpc-home img { max-width: 100%; display: block; }
.wpc-home h1, .wpc-home h2, .wpc-home h3,
.wpc-home h4, .wpc-home p  { margin: 0; }
.wpc-home ul  { margin: 0; padding: 0; list-style: none; }
.wpc-home button { font-family: inherit; }

/* Visible focus for every interactive element — never remove without replacing. */
.wpc-home a:focus-visible,
.wpc-home button:focus-visible,
.wpc-home input:focus-visible {
  outline: 3px solid var(--teal-2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── skip link ─────────────────────────────────────────────────────────── */
.wpc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff;
  padding: 14px 22px; border-radius: 0 0 var(--r-xs) 0;
  font-weight: 700; font-size: 14px;
}
.wpc-skip:focus { left: 0; color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-wrap {
  /* width + min-width are load-bearing, not decoration: the hero is a flex
     container, and a flex item defaults to sizing from its content with
     min-width:auto. Without these the wrap ignores max-width, centres itself
     on its own content on desktop and overflows the viewport on mobile. */
  width: 100%;
  min-width: 0;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* The portal's navbar is position:fixed, so an anchor jump would otherwise
   land with the section heading hidden underneath it. */
.wpc-home [id] { scroll-margin-top: 88px; }

/* Was clamp(64px,8vw,112px): two adjacent sections each contributing their
   own top+bottom padding meant up to 224px of dead space where they met —
   the gap between "Permits & Services" and "How It Works" in particular.
   Tightened so the worst case is well under half that. */
.wpc-sec { padding: clamp(40px, 5vw, 72px) 0; }
.wpc-sec.tight   { padding-top: clamp(24px, 3vw, 40px); }
.wpc-sec.pb-0    { padding-bottom: 0; }
.wpc-sec.on-white{ background: var(--card); }

/* ── section headings ── */
.wpc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-ink);
  margin-bottom: 16px;
}
.wpc-eyebrow::before {
  content: ''; width: 24px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .9;
}

.wpc-h2 {
  font-size: clamp(29px, 3.9vw, 45px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.14;
  color: var(--ink);
  margin-bottom: 16px;
  text-wrap: balance;
}
.wpc-lead {
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.72;
  color: var(--muted);
  max-width: 62ch;
}
.wpc-sec-head { max-width: 760px; margin-bottom: clamp(34px, 4.5vw, 56px); }


/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-sm);
  font-weight: 700; font-size: 15px; letter-spacing: .005em;
  border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  /* min touch target */
  min-height: 50px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), border-color .22s var(--ease);
}
.wpc-btn i { font-size: .95em; }

.wpc-btn-primary {
  background: linear-gradient(135deg, var(--teal-btn-1) 0%, var(--teal-btn-2) 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(13,155,138,.32);
}
.wpc-btn-primary:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(13,155,138,.42);
}

/* On-photo secondary: frosted so it stays legible over any part of the image. */
.wpc-btn-glass {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
}
.wpc-btn-glass:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  color: #fff; transform: translateY(-2px);
}

.wpc-btn-navy {
  background: var(--navy); color: #fff;
  box-shadow: 0 6px 18px rgba(12,35,64,.24);
}
.wpc-btn-navy:hover { background: var(--navy-2); color: #fff; transform: translateY(-2px); }

.wpc-btn-white { background: #fff; color: var(--navy); box-shadow: var(--sh-sm); }
.wpc-btn-white:hover { color: var(--teal); transform: translateY(-2px); box-shadow: var(--sh); }

.wpc-btn-line {
  background: transparent; color: var(--navy); border-color: var(--line-2);
}
.wpc-btn-line:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }


/* ═══════════════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════════════════ */
/* Gated behind .js-rv, which a tiny inline script adds while the page parses.
   Without JavaScript the class never appears, so .rv is never hidden and the
   whole page stays readable — rather than 35 invisible blocks. */
.wpc-home.js-rv .rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  will-change: opacity, transform;
}
.wpc-home.js-rv .rv.in { opacity: 1; transform: none; will-change: auto; }
.wpc-home .rd1 { transition-delay: .07s }
.wpc-home .rd2 { transition-delay: .14s }
.wpc-home .rd3 { transition-delay: .21s }
.wpc-home .rd4 { transition-delay: .28s }
.wpc-home .rd5 { transition-delay: .35s }


/* ═══════════════════════════════════════════════════════════════════════
   HERO  —  gem.jpg as the full-bleed foundation
   ---------------------------------------------------------------------
   Structure:
     .wpc-hero
       .wpc-hero-media   → the photograph (object-fit cover, srcset)
       .wpc-hero-scrim   → gradient overlays for text contrast
       .wpc-wrap         → content, sits above both
   The photo is a real <img> rather than a CSS background so it can carry
   srcset/sizes, fetchpriority and an alt-free decorative role properly.
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(92svh, 880px);
  padding-top: clamp(104px, 13vh, 150px);
  /* Was clamp(96px,12vh,150px) — sized to leave clearance for the quick-action
     row that used to overlap this edge with a negative margin. Now that row
     sits fully in-flow below, so this only needs normal breathing room. */
  padding-bottom: clamp(48px, 6vh, 84px);
  background: var(--navy-ink);   /* paints before the image decodes */
  color: #fff;
  overflow: hidden;
}

.wpc-hero-media {
  position: absolute; left: 0; right: 0; z-index: -2; overflow: hidden;
  /* Extends past the hero's own edges (clipped by .wpc-hero's overflow:hidden)
     so the scroll parallax in home.js has travel room — without this, shifting
     the layer at all would expose the navy background at whichever edge it
     moved away from. */
  top: -8%; bottom: -8%;
  will-change: transform;
  /* home.js sets this layer's transform directly from scroll position — a
     pure function of where the page is, nothing time-based. This transition
     is what turns that into smooth motion: consecutive scroll-driven updates
     (a mouse wheel fires in discrete jumps, not a continuous stream) each
     ease into place over 150ms instead of snapping. Short and bounded on
     purpose — it settles within a fixed window of the *last* update rather
     than continuing to drift afterward, so the image never appears to move
     on its own once the visitor's input actually stops. */
  transition: transform .15s cubic-bezier(.22, .61, .36, 1);
}
.wpc-hero-media picture { display: block; width: 100%; height: 100%; }
.wpc-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Focal point: keeps the island + reef in frame while the text column
     sits over the open water on the left. Re-tuned per breakpoint below. */
  object-position: 64% 52%;
  /* No ambient animation here on purpose. This used to carry a permanent
     46s scale "breathe" independent of scroll — meaning the photo visibly
     moved even while the visitor sat still. Combined with the scroll
     parallax on the parent (home.js), that gave two uncoordinated motions
     on the same image at once, which is what read as dizzying rather than
     a deliberate effect. The photo is now static except for the one motion
     that's actually tied to something the visitor is doing: scrolling. */
}

/* Blur-up placeholder: the LQIP is set inline as a background-image on the
   media wrapper, so the hero is never a flat void while the photo loads. */
.wpc-hero-media {
  background-size: cover;
  background-position: 64% 52%;
  background-image: var(--lqip-d);
}
/* The fade is opt-in via a class JS adds on init, so if JS never runs the
   photograph is simply visible — it can never be left stuck at opacity 0. */
.wpc-hero-media.js-fade img { opacity: 0; transition: opacity .85s var(--ease); }
.wpc-hero-media.js-fade.loaded img { opacity: 1; }

.wpc-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* top: seats the fixed navy navbar against the sky */
    linear-gradient(180deg, rgba(7,22,42,.72) 0%, rgba(7,22,42,.22) 12%, transparent 26%),
    /* left: the text bed — deep at the left edge, gone by ~80% so the island
       and reef stay fully visible. The 45–62% stops are held heavier than
       looks necessary because the subtitle's last line reaches into the
       bright turquoise shallows, where a lighter scrim drops the worst-case
       pixel contrast to ~2.8:1. */
    linear-gradient(96deg,
      rgba(7,22,42,.94)  0%,
      rgba(8,26,48,.90) 26%,
      rgba(9,30,54,.78) 45%,
      rgba(10,32,58,.52) 62%,
      rgba(12,35,64,.18) 80%,
      rgba(12,35,64,0)  100%),
    /* base: soft vignette so the floating cards below have something to sit on */
    linear-gradient(0deg, rgba(7,22,42,.62) 0%, rgba(7,22,42,.10) 22%, transparent 42%);
}

.wpc-hero-inner { position: relative; z-index: 2; max-width: 660px; }

.wpc-hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  /* Solid dark bed, not a teal tint: --teal-3 is a light mint, and over the
     bright sky at narrow widths a translucent tint left it at ~1.4:1. Sitting
     the badge on its own dark plate makes it legible over any part of the photo. */
  background: rgba(7,22,42,.62);
  border: 1px solid rgba(94,234,212,.34);
  color: var(--teal-3);
  border-radius: var(--r-pill);
  padding: 9px 18px 9px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
  margin-bottom: 26px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.wpc-hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-3); flex-shrink: 0;
  animation: wpc-pulse 2.2s ease-out infinite;
}
@keyframes wpc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(94,234,212,.55); }
  100% { box-shadow: 0 0 0 11px rgba(94,234,212,0); }
}

.wpc-hero h1 {
  font-size: clamp(38px, 5.6vw, 66px);
  font-weight: 900;
  letter-spacing: -.032em;
  line-height: 1.05;
  margin-bottom: 22px;
  text-wrap: balance;
  /* Lifts the type off the photograph without needing a heavier scrim. */
  text-shadow: 0 2px 30px rgba(4,14,28,.5);
}
.wpc-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--teal-3) 0%, #8AF0DE 50%, var(--teal-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.wpc-hero-sub {
  font-size: clamp(15.5px, 1.65vw, 18.5px);
  line-height: 1.75;
  color: rgba(233,242,252,.86);
  max-width: 56ch;
  margin-bottom: 34px;
  text-shadow: 0 1px 16px rgba(4,14,28,.45);
}
.wpc-hero-sub b { color: var(--teal-3); font-weight: 700; }

.wpc-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }

.wpc-hero-trust {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.wpc-trust {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 500;
  color: rgba(233,242,252,.76);
}
.wpc-trust i { color: var(--teal-3); font-size: 15px; }


/* ═══════════════════════════════════════════════════════════════════════
   QUICK ACTIONS
   ---------------------------------------------------------------------
   Previously pulled up over the hero's lower edge with a negative margin.
   That overlap amount was tied to a fixed clamp() while the hero's actual
   height varies with content (three lines of copy vs. two, session-state
   CTA labels of different lengths) — so at some viewport/state combinations
   the row cleared the photo cleanly, and at others it sat on top of the
   hero's own text. A plain in-flow section is the same at every height.
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-quick {
  padding: clamp(24px, 3vw, 40px) 0;
}
.wpc-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}
@media (min-width: 700px) {
  /* Exactly three cards now — let them share the row evenly instead of
     auto-fit deciding a width per card independently. */
  .wpc-quick-grid { grid-template-columns: repeat(3, 1fr); }
}
.wpc-qa {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #fff 0%, var(--bg-2) 130%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 24px;
  box-shadow: var(--sh-sm);
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out),
              border-color .3s var(--ease);
}
/* Accent bar grows in from the left on hover rather than sitting there
   permanently — keeps the row calm at rest, confirms the target on hover. */
.wpc-qa::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.wpc-qa:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(13,155,138,.3);
}
.wpc-qa:hover::before { transform: scaleX(1); }
.wpc-qa-ico {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 19px; color: var(--teal);
  background: linear-gradient(135deg, rgba(13,155,138,.14), rgba(18,183,163,.06));
  box-shadow: inset 0 0 0 1px rgba(13,155,138,.14);
  transition: transform .45s var(--ease-out), background .35s var(--ease),
              color .35s var(--ease), box-shadow .35s var(--ease);
}
.wpc-qa:hover .wpc-qa-ico {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(13,155,138,.35);
}
/* The label block sits between the icon and the arrow; min-width:0 lets it
   shrink so long labels wrap instead of pushing the arrow out of the card. */
.wpc-qa-body { flex: 1; min-width: 0; }
/* display:block matters — these are spans, and without it the title and
   subtitle run together on one line. */
.wpc-qa-t {
  display: block;
  font-size: 15px; font-weight: 700; color: var(--ink);
  line-height: 1.3; margin-bottom: 3px;
}
.wpc-qa-s { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }


/* ═══════════════════════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(322px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.wpc-svc {
  display: flex; flex-direction: column;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 2.4vw, 30px);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out),
              border-color .26s var(--ease);
}
/* Hairline accent that grows on hover — quieter than a permanent colour bar. */
.wpc-svc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, var(--teal));
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
.wpc-svc:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh);
  border-color: var(--line-2);
}
.wpc-svc:hover::before { transform: scaleX(1); }

.wpc-svc-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.wpc-svc-ico {
  width: 52px; height: 52px; border-radius: var(--r-xs);
  display: grid; place-items: center;
  font-size: 21px;
  color: var(--accent, var(--teal));
  background: var(--accent-bg, rgba(13,155,138,.10));
}
.wpc-svc-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 12px; white-space: nowrap;
}
.wpc-svc h3 {
  font-size: 20px; font-weight: 700; letter-spacing: -.012em;
  color: var(--ink); line-height: 1.28; margin-bottom: 10px;
}
.wpc-svc-desc {
  font-size: 14.5px; line-height: 1.72; color: var(--body);
  margin-bottom: 18px;
}
.wpc-svc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.wpc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 6px 11px;
}
.wpc-chip i { font-size: 10.5px; color: var(--faint); }
.wpc-svc-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--accent, var(--teal));
}
.wpc-svc-cta i { transition: transform .24s var(--ease); font-size: 12px; }
.wpc-svc:hover .wpc-svc-cta i { transform: translateX(4px); }

/* Restrained, harmonised accent set — ocean/reef tones, not a rainbow. */
.wpc-svc.a-teal  { --accent:#07766A; --accent-bg:rgba(13,155,138,.10); }
.wpc-svc.a-green { --accent:#0F7359; --accent-bg:rgba(18,135,106,.10); }
.wpc-svc.a-cyan  { --accent:#0B6480; --accent-bg:rgba(14,124,155,.10); }
.wpc-svc.a-amber { --accent:#8A6408; --accent-bg:rgba(184,134,11,.10); }
.wpc-svc.a-slate { --accent:#3F5478; --accent-bg:rgba(76,99,144,.10); }
.wpc-svc.a-blue  { --accent:#1F5C9E; --accent-bg:rgba(44,111,184,.10); }


/* ═══════════════════════════════════════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  position: relative;
}
.wpc-step { position: relative; }
.wpc-step-n {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
  box-shadow: 0 8px 20px rgba(12,35,64,.2);
  margin-bottom: 20px;
  position: relative; z-index: 2;
}
.wpc-step:nth-child(1) .wpc-step-n { background: linear-gradient(135deg, var(--teal), var(--teal-2)); box-shadow: 0 8px 20px rgba(13,155,138,.28); }
/* connector rail between steps (desktop only) */
.wpc-step::after {
  content: ''; position: absolute;
  top: 27px; left: 62px; right: -18px; height: 2px;
  background: linear-gradient(90deg, var(--line-2), rgba(206,219,234,.25));
  z-index: 1;
}
.wpc-step:last-child::after { display: none; }
.wpc-step h4 {
  font-size: 17.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.35; margin-bottom: 10px;
}
.wpc-step p { font-size: 14.5px; line-height: 1.72; color: var(--muted); }


/* ═══════════════════════════════════════════════════════════════════════
   ACCOUNT TYPES
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
.wpc-acct {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 2.6vw, 34px);
  box-shadow: var(--sh-xs);
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out);
  position: relative;
}
.wpc-acct:hover { transform: translateY(-4px); box-shadow: var(--sh); }
/* The company tier carries the most capability — give it visual primacy. */
.wpc-acct.featured {
  border-color: rgba(13,155,138,.34);
  box-shadow: 0 4px 12px rgba(13,155,138,.08), 0 20px 50px rgba(16,31,53,.10);
}
.wpc-acct-tag {
  position: absolute; top: 20px; right: 20px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-ink); background: rgba(13,155,138,.10);
  border: 1px solid rgba(13,155,138,.22);
  border-radius: var(--r-pill); padding: 5px 11px;
}
.wpc-acct-ico {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; font-size: 22px;
  color: var(--teal); background: rgba(13,155,138,.10);
  margin-bottom: 18px;
}
.wpc-acct.a-com .wpc-acct-ico { color: var(--navy-2); background: rgba(16,48,90,.09); }
.wpc-acct.a-grp .wpc-acct-ico { color: var(--gold);   background: rgba(212,160,18,.12); }
.wpc-acct h3 {
  font-size: 21px; font-weight: 700; color: var(--ink);
  letter-spacing: -.015em; margin-bottom: 8px;
}
.wpc-acct > p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin-bottom: 20px; }
.wpc-acct ul { display: grid; gap: 12px; }
.wpc-acct li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; line-height: 1.62; color: var(--body);
}
.wpc-acct li i {
  color: var(--teal); font-size: 12px; margin-top: 5px; flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   DIVISIONS
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-div-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.wpc-div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 2.4vw, 30px);
  box-shadow: var(--sh-xs);
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out);
}
.wpc-div:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.wpc-div-code {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-ink); background: rgba(13,155,138,.09);
  border-radius: var(--r-pill); padding: 6px 12px; margin-bottom: 14px;
}
.wpc-div h3 {
  font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -.015em; margin-bottom: 12px;
}
.wpc-div address {
  font-style: normal;
  font-size: 14px; line-height: 1.72; color: var(--muted); margin-bottom: 16px;
}
.wpc-div-tel {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: var(--navy-2);
  padding: 4px 0;
}
.wpc-div-tel i { color: var(--teal); font-size: 13px; }
.wpc-div-tel:hover { color: var(--teal); }
.wpc-div-note {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════
   VERIFY BAND
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-verify {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(22px, 3vw, 44px); flex-wrap: wrap;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
  border-radius: var(--r-lg);
  padding: clamp(30px, 3.4vw, 46px);
  color: #fff; position: relative; overflow: hidden;
}
.wpc-verify::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--masi); background-size: 108px 108px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(105deg, transparent 55%, #000 100%);
          mask-image: linear-gradient(105deg, transparent 55%, #000 100%);
  pointer-events: none;
}
.wpc-verify-l {
  display: flex; align-items: flex-start; gap: 20px;
  position: relative; z-index: 2; max-width: 680px;
}
.wpc-verify-ico {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 23px; color: var(--teal-3);
  background: rgba(94,234,212,.13);
  border: 1px solid rgba(94,234,212,.24);
}
.wpc-verify h3 {
  font-size: clamp(21px, 2.3vw, 27px); font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 9px; color: #fff;
}
.wpc-verify p {
  font-size: 14.5px; line-height: 1.7; color: rgba(233,242,252,.72);
}
.wpc-verify .wpc-btn { position: relative; z-index: 2; }


/* ═══════════════════════════════════════════════════════════════════════
   LEGISLATION
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-law {
  background: linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 55%, var(--navy-2) 100%);
  color: #fff;
  padding: clamp(58px, 7vw, 92px) 0;
  position: relative; overflow: hidden;
}
/* A real element (not ::before) so JS can translate it for the parallax
   drift below — a pseudo-element has no DOM node to attach a transform to.
   Extended 16% past each edge so that drift never exposes a bare seam. */
.wpc-law-parallax {
  position: absolute; left: 0; right: 0; top: -16%; bottom: -16%;
  background-image: var(--masi); background-size: 120px 120px;
  opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 88% 12%, #000, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 90% at 88% 12%, #000, transparent 72%);
  will-change: transform;
  pointer-events: none;
  /* Same reasoning as .wpc-hero-media: smooths discrete scroll-event jumps
     without ever animating independently of the visitor's own scrolling. */
  transition: transform .15s cubic-bezier(.22, .61, .36, 1);
}
.wpc-law-head {
  display: flex; align-items: flex-start; gap: 20px;
  margin-bottom: clamp(30px, 3.6vw, 46px);
  position: relative; z-index: 2; max-width: 720px;
}
.wpc-law-head > i {
  font-size: 25px; color: var(--teal-3); margin-top: 4px; flex-shrink: 0;
}
.wpc-law-head h3 {
  font-size: clamp(22px, 2.6vw, 31px); font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 10px; color: #fff;
}
.wpc-law-head p { font-size: 14.5px; line-height: 1.7; color: rgba(233,242,252,.68); }
.wpc-law-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  position: relative; z-index: 2;
}
.wpc-law-item {
  display: flex; gap: 15px; align-items: flex-start;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-sm);
  padding: 19px 21px;
  transition: background .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.wpc-law-item:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(94,234,212,.28);
  transform: translateY(-3px);
}
.wpc-law-item > i { color: var(--teal-3); font-size: 16px; margin-top: 3px; flex-shrink: 0; }
.wpc-law-item b {
  display: block; font-size: 14.5px; font-weight: 700; color: #fff;
  line-height: 1.4; margin-bottom: 5px;
}
.wpc-law-item span { font-size: 12.5px; line-height: 1.6; color: rgba(233,242,252,.62); }


/* ═══════════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-faq-bar {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; margin-bottom: 26px;
}
.wpc-faq-search { position: relative; flex: 1 1 300px; max-width: 400px; }
.wpc-faq-search i {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: 14px; pointer-events: none;
}
.wpc-faq-search input {
  width: 100%; min-height: 50px;
  padding: 14px 18px 14px 46px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink);
  background: var(--card);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.wpc-faq-search input::placeholder { color: var(--faint); }
.wpc-faq-search input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(13,155,138,.13);
}
.wpc-faq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wpc-fchip {
  border: 1.5px solid var(--line-2);
  background: var(--card);
  color: var(--muted);
  border-radius: var(--r-pill);
  padding: 9px 17px; min-height: 40px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .2s var(--ease);
}
.wpc-fchip:hover { border-color: var(--teal); color: var(--teal); }
.wpc-fchip.on {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

.wpc-faq-list { display: grid; gap: 12px; }
.wpc-faq {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.wpc-faq:hover { border-color: var(--line-2); }
.wpc-faq.open { border-color: rgba(13,155,138,.34); box-shadow: var(--sh-sm); }
.wpc-faq-q {
  width: 100%;
  display: flex; align-items: center; gap: 15px;
  background: none; border: none; cursor: pointer;
  padding: 19px 22px; text-align: left;
  font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.5;
}
.wpc-faq-q .qi {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 14px; color: var(--teal); background: rgba(13,155,138,.09);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.wpc-faq.open .wpc-faq-q .qi { background: var(--teal); color: #fff; }
.wpc-faq-q .qt { flex: 1; }
.wpc-faq-q .chev {
  color: var(--faint); font-size: 13px; flex-shrink: 0;
  transition: transform .3s var(--ease), color .22s var(--ease);
}
.wpc-faq.open .wpc-faq-q .chev { transform: rotate(180deg); color: var(--teal); }
.wpc-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .38s var(--ease);
}
.wpc-faq-a-in {
  padding: 0 22px 21px 75px;
  font-size: 14.5px; line-height: 1.78; color: var(--body);
}
.wpc-faq-a-in p { margin-bottom: 11px; }
.wpc-faq-a-in p:last-child { margin-bottom: 0; }
.wpc-faq-a-in strong { color: var(--ink); font-weight: 700; }
.wpc-faq-none {
  display: none;
  text-align: center; padding: 40px 20px;
  color: var(--muted); font-size: 15px;
  background: var(--card); border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
}
.wpc-faq-more {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 16px;
  padding: 15px 20px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2); background: var(--card);
  color: var(--navy); font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease);
}
.wpc-faq-more:hover { border-color: var(--teal); color: var(--teal); background: rgba(13,155,138,.05); }
.wpc-faq-more i { font-size: 12px; color: var(--faint); transition: color .22s var(--ease); }
.wpc-faq-more:hover i { color: var(--teal); }
.wpc-faq-more[hidden] { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   CLOSING CTA  —  the photograph returns, heavily veiled
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-cta {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg);
  padding: clamp(46px, 6vw, 84px) clamp(26px, 4vw, 64px);
  text-align: center; color: #fff;
  background: var(--navy);
}
.wpc-cta-media { position: absolute; inset: 0; z-index: -2; }
.wpc-cta-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
}
.wpc-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(135deg, rgba(7,22,42,.95) 0%, rgba(10,32,58,.90) 50%, rgba(13,60,86,.86) 100%);
}
.wpc-cta h2 {
  font-size: clamp(27px, 3.6vw, 42px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.16;
  margin-bottom: 16px; color: #fff; text-wrap: balance;
}
.wpc-cta p {
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.72;
  color: rgba(233,242,252,.8);
  max-width: 60ch; margin: 0 auto 32px;
}
.wpc-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }


/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════ MASI TRIM — closes the page before the footer ═══════════
   Same woven kesa band used above the footer on the v1 homepage
   (home/front-page-legacy.php .wfp-masi) and as the masthead trim on
   page/applications.php — reused verbatim rather than inventing a new
   pattern, so the cultural motif stays consistent across the theme. */
/* Darkened to sit IN the footer's own navy family rather than as a pale
   strip above it — the light version (#EEF3F9) read as washed-out against
   the navy footer immediately below it. Same weave geometry, same palette
   family as the v3 homepage's masthead trim (css/home-v3.css --masi-dark),
   reused rather than invented, just re-based on this file's own navy/teal
   tokens (--navy-ink / --navy / --navy-2 / --teal / --teal-2) so it's a
   correct match for v2's footer specifically. */
.wpc-masi-trim {
  height: 16px; width: 100%;
  background-color: #071628; /* var(--navy-ink) */
  background-image: url("data:image/svg+xml,%3Csvg width='76' height='26' viewBox='0 0 76 26' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='76' height='26' fill='%23071628'/%3E%3Cpath d='M0 26 L19 5 L38 26 Z' fill='%230C2340'/%3E%3Cpath d='M38 0 L57 21 L76 0 Z' fill='%23134C4E'/%3E%3Cpolygon points='19,12 22.5,15.5 19,19 15.5,15.5' fill='%230D9B8A'/%3E%3Cpolygon points='57,7 60.5,10.5 57,14 53.5,10.5' fill='%2312B7A3'/%3E%3C/svg%3E");
  background-size: 46px 16px; background-repeat: repeat-x;
  border-top: 1.5px solid rgba(255,255,255,.08); border-bottom: 1.5px solid rgba(255,255,255,.08);
}

.wpc-footer {
  background: var(--navy-ink);
  color: rgba(233,242,252,.62);
  padding: clamp(52px, 6vw, 78px) 0 0;
  position: relative; overflow: hidden;
}
.wpc-footer::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--masi); background-size: 120px 120px;
  opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 6% 0%, #000, transparent 68%);
          mask-image: radial-gradient(ellipse 60% 80% at 6% 0%, #000, transparent 68%);
  pointer-events: none;
}
.wpc-footer-grid {
  position: relative; z-index: 2;
  display: grid;
  /* Explicit columns per breakpoint rather than auto-fit: an auto-fit track
     list with px minimums sums to more than a phone's width and overflows
     (clipped by overflow-x, which silently hides footer links). */
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(38px, 4.5vw, 54px);
}
@media (max-width: 900px) {
  .wpc-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .wpc-footer-grid > *:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .wpc-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
.wpc-f-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.wpc-f-brand img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.wpc-f-org { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; }
.wpc-f-sub { font-size: 12.5px; color: rgba(233,242,252,.55); margin-top: 3px; }
.wpc-f-desc { font-size: 13.5px; line-height: 1.75; max-width: 46ch; }
.wpc-f-hd {
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #fff; margin-bottom: 16px;
}
.wpc-footer ul { display: grid; gap: 2px; }
.wpc-footer ul a {
  font-size: 13.5px; color: rgba(233,242,252,.62);
  transition: color .2s var(--ease);
  /* Comfortable tap target — these were ~26px tall with the old spacing. */
  display: inline-block; padding: 9px 0; line-height: 1.35;
}
.wpc-footer ul a:hover { color: var(--teal-3); }
.wpc-f-contact {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.7; margin-bottom: 13px;
}
.wpc-f-contact i { color: var(--teal-3); font-size: 13px; margin-top: 5px; flex-shrink: 0; }
/* Phone/email are tap targets on mobile, not just text. */
.wpc-f-contact a { color: inherit; display: inline-block; padding: 5px 0; }
.wpc-f-contact a:hover { color: var(--teal-3); }
.wpc-f-bottom {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 22px 0 26px;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
  font-size: 12.5px; color: rgba(233,242,252,.5);
}
.wpc-f-bottom i { color: var(--teal-3); margin-right: 7px; }


/* ═══════════════════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════════════════ */
.wpc-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--navy); color: #fff; font-size: 15px;
  box-shadow: var(--sh);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .28s var(--ease), transform .28s var(--ease),
              visibility .28s var(--ease), background .22s var(--ease);
}
.wpc-top.show { opacity: 1; visibility: visible; transform: none; }
.wpc-top:hover { background: var(--teal); }


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   Each breakpoint re-frames the photograph rather than just shrinking it.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── large tablet / small laptop ── */
@media (max-width: 1080px) {
  .wpc-hero-media img { object-position: 62% 50%; }
  .wpc-hero-scrim {
    background:
      linear-gradient(180deg, rgba(7,22,42,.74) 0%, rgba(7,22,42,.24) 13%, transparent 28%),
      linear-gradient(96deg,
        rgba(7,22,42,.94)  0%,
        rgba(8,26,48,.90) 32%,
        rgba(9,30,54,.72) 54%,
        rgba(10,32,58,.40) 72%,
        rgba(12,35,64,.14) 100%),
      linear-gradient(0deg, rgba(7,22,42,.66) 0%, rgba(7,22,42,.12) 24%, transparent 44%);
  }
}

/* ── tablet ── */
@media (max-width: 860px) {
  .wpc-hero {
    min-height: auto;
    padding-top: clamp(96px, 15vh, 130px);
    padding-bottom: clamp(44px, 6vh, 72px);
    text-align: left;
  }
  /* Portrait framing: the island keeps a genuinely bright window in the upper
     third, and the copy is anchored to the bottom where the scrim is deep —
     rather than centred across the middle, where headline glyphs landed on
     sunlit sky at ~2:1. */
  .wpc-hero { align-items: flex-end; }
  /* Below 860px the <picture> swaps to the cropped island/beach/reef frame,
     so the focal point is re-centred for that crop, not the wide original. */
  .wpc-hero-media img { object-position: 50% 50%; }
  .wpc-hero-media {
    background-position: 50% 50%;
    background-image: var(--lqip-m, var(--lqip-d));
  }
  /* The headline occupies ~28–42% of the hero at this width, so the ramp has
     to be deep by 27% — measured, not eyeballed. Above that the photo keeps a
     clear bright window. */
  .wpc-hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(7,22,42,.78)  0%,
        rgba(7,22,42,.26)  8%,
        rgba(7,22,42,.16) 18%,
        rgba(8,26,48,.70) 27%,
        rgba(9,29,52,.92) 38%,
        rgba(9,30,54,.96) 52%,
        rgba(9,30,54,.97) 100%);
  }
  .wpc-hero-inner { max-width: 100%; }
  .wpc-hero h1 { font-size: clamp(34px, 7.4vw, 46px); }

  /* Steps stack — swap the horizontal rail for a vertical one. */
  .wpc-steps { gap: 26px; }
  .wpc-step { display: grid; grid-template-columns: 54px 1fr; gap: 0 18px; }
  .wpc-step-n { margin-bottom: 0; grid-row: span 2; }
  .wpc-step h4 { align-self: center; margin-bottom: 6px; }
  .wpc-step p { grid-column: 2; }
  .wpc-step::after {
    top: 60px; bottom: -26px; left: 26px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--line-2), rgba(206,219,234,.2));
  }

  .wpc-verify { flex-direction: column; align-items: flex-start; }
  .wpc-verify .wpc-btn { width: 100%; }
}

/* ── mobile ── */
@media (max-width: 620px) {
  .wpc-hero {
    padding-top: 96px;
    padding-bottom: 40px;
    min-height: 88svh;
  }
  .wpc-hero-media img { object-position: 50% 46%; }
  .wpc-hero-media { background-position: 50% 46%; }
  /* Headline sits at ~22–31% on a phone — ramp deep by 22%. Above that the
     veil is kept light so the island canopy reads as a photograph. */
  .wpc-hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(7,22,42,.72)  0%,
        rgba(7,22,42,.22)  7%,
        rgba(7,22,42,.14) 15%,
        rgba(8,26,48,.66) 23%,
        rgba(9,29,52,.92) 33%,
        rgba(9,30,54,.97) 46%,
        rgba(9,30,54,.98) 100%);
  }
  .wpc-hero h1 { font-size: clamp(31px, 8.4vw, 40px); letter-spacing: -.028em; }
  .wpc-hero-sub { font-size: 15.5px; margin-bottom: 28px; }
  /* Full-width CTAs are far easier to hit one-handed. */
  .wpc-hero-ctas { gap: 11px; }
  .wpc-hero-ctas .wpc-btn { width: 100%; }
  .wpc-hero-trust { gap: 12px 20px; padding-top: 22px; }
  .wpc-trust { font-size: 12.5px; }

  .wpc-qa { padding: 17px 18px; }

  .wpc-svc { padding: 22px; }
  .wpc-svc-top { margin-bottom: 15px; }
  .wpc-faq-q { padding: 16px 17px; font-size: 14.5px; gap: 12px; }
  .wpc-faq-a-in { padding: 0 17px 18px 17px; }
  .wpc-faq-bar { gap: 13px; }
  .wpc-faq-search { max-width: 100%; }
  .wpc-cta-btns .wpc-btn { width: 100%; }
  .wpc-f-bottom { flex-direction: column; align-items: flex-start; }
  .wpc-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}

/* ── very small phones ── */
@media (max-width: 380px) {
  .wpc-hero h1 { font-size: 29px; }
  .wpc-qa { gap: 12px; }
  .wpc-qa-ico { width: 40px; height: 40px; font-size: 16px; }
  .wpc-svc-top { flex-direction: column; align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════
   REDUCED MOTION  —  honoured globally, last so it always wins
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* must out-specify .wpc-home.js-rv .rv */
  .wpc-home.js-rv .rv,
  .wpc-home .rv { opacity: 1; transform: none; transition: none; }
  .wpc-home *,
  .wpc-home *::before,
  .wpc-home *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .wpc-hero-media img { animation: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRINT  —  strip the photography and the dark panels
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  .wpc-hero-media, .wpc-hero-scrim,
  .wpc-top, .wpc-cta-media { display: none !important; }
  .wpc-hero, .wpc-law, .wpc-footer, .wpc-cta, .wpc-verify {
    background: #fff !important; color: #000 !important;
  }
  .wpc-home .rv { opacity: 1 !important; transform: none !important; }
}