/* ====================================================================
   PDS · Variation B — content-v6 components
   Everything added by the 6 Aug build brief: ™ treatment, agent coda,
   NOW-column emphasis, Reputation Engine review widget, start-with-
   trust block, plan-card v6, Content in Action switcher, flip-book,
   How We Work blocks. Brand locks unchanged: navy #0A1F50, coral
   #F26B3A, Poppins for all PDS chrome.
   ==================================================================== */

/* ------------------------------------------------------------------ */
/* ™ treatment + Get Found Engine name                                 */
/* ------------------------------------------------------------------ */
sup.tm {
  font-size: .52em;
  line-height: 0;
  vertical-align: super;
  letter-spacing: 0;
  font-weight: 500;
}
.gfe { font-weight: 600; color: var(--navy); white-space: nowrap; }
/* debut accent — first homepage appearance (03) */
.gfe-debut { color: var(--coral-deep); }

/* ------------------------------------------------------------------ */
/* 01 · agent coda + section bridge                                    */
/* ------------------------------------------------------------------ */
/* Round 3 §5.2 · the coda is the page's most forward-looking claim —
   a tight, intentional panel instead of dead air                     */
.agent-coda {
  margin-top: clamp(2rem, 4.5vh, 3rem);
  max-width: 50rem;
  background: #F5F7FC;
  border-left: 3px solid var(--coral);
  border-radius: 0 16px 16px 0;
  padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.3rem, 3vw, 2.2rem);
}
.agent-coda p {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  color: var(--ink-70);
}
.agent-coda strong {
  display: block;
  color: var(--navy);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: .55rem;
}

.act-bridge {
  margin-top: clamp(3rem, 7vh, 5rem);
  max-width: 34ch;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--navy);
}

/* ------------------------------------------------------------------ */
/* WAS/NOW — the NOW column must visually win                          */
/* ------------------------------------------------------------------ */
.t-new {
  background: #fff;
  border: 1px solid rgba(242, 107, 58, .32);
  border-radius: 14px;
  padding: .9rem 1.15rem 1.05rem;
  box-shadow: 0 14px 34px -22px rgba(10, 31, 80, .35);
}
.t-new .t-tag { margin-top: .1rem; }
.t-new p { font-weight: 600; }
.t-old { padding-top: .9rem; }
.t-old p { font-weight: 400; color: var(--ink-55); }

/* ------------------------------------------------------------------ */
/* Collapsible affordance v6 — "+ What you get" / "+ How it works"     */
/* ------------------------------------------------------------------ */
.plan-details summary,
.re-details summary {
  color: var(--coral-deep) !important;
  font-weight: 600;
  justify-content: flex-start !important;
  gap: .5rem !important;
}
.plan-details summary .plus,
.re-details summary .plus {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-weight: 500;
  transition: transform .3s var(--ease);
}
.plan-details summary::after { display: none; }
.plan-details[open] summary .plus,
.re-details[open] summary .plus { transform: rotate(45deg); }
.plan-details summary:hover,
.re-details summary:hover { text-decoration: underline; text-underline-offset: .25em; }

.plan h3 .plan-kind {
  display: inline-block;
  font-size: .62em;
  font-weight: 500;
  color: var(--ink-55);
  letter-spacing: 0;
}

.plan-details li.hero-claim {
  background: var(--coral-soft);
  border-radius: 12px;
  padding: .7rem .9rem .7rem 2.1rem;
}
.plan-details li.hero-claim::before { left: .8rem; top: 1.2rem; }
.plan-details li.hero-claim strong { color: var(--navy); }

/* ------------------------------------------------------------------ */
/* Start with trust — the Reputation Engine doorway                    */
/* ------------------------------------------------------------------ */
.trust-start {
  margin: clamp(2.4rem, 5vh, 3.6rem) 0 clamp(2.8rem, 6vh, 4.2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  background: linear-gradient(135deg, #FDF7F3, #FBF1EA);
  border: 1px dashed rgba(242, 107, 58, .38);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
}
@media (max-width: 880px) { .trust-start { grid-template-columns: 1fr; } }
.trust-copy h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--navy);
  letter-spacing: -0.015em;
}
.trust-copy p {
  margin-top: .9rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-70);
  max-width: 44rem;
}
.trust-copy .plan-more { margin-top: 1rem; }

/* ------------------------------------------------------------------ */
/* Reputation Engine review widget (shared, static at launch)          */
/* ------------------------------------------------------------------ */
.rw {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 1.35rem;
  max-width: 560px;
  box-shadow: 0 24px 60px -34px rgba(10, 31, 80, .35);
  font-size: 1rem;
}
.rw-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .85rem; flex-wrap: wrap; }
.rw-brand { display: flex; align-items: center; gap: .65rem; }
.rw-brand svg { flex: none; }
.rw-title { display: block; font-size: .92rem; font-weight: 500; color: var(--navy); line-height: 1.25; }
.rw-sub { display: block; font-size: .74rem; color: var(--ink-55); }
.rw-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #EDF7F2; border-radius: 999px;
  padding: .3em .8em; font-size: .74rem; color: var(--navy); white-space: nowrap;
}
.rw-rating { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .85rem; flex-wrap: wrap; }
.rw-score { font-size: 1.85rem; font-weight: 600; color: var(--navy); line-height: 1; }
.rw-stars { color: #FBBC05; font-size: 1.05rem; letter-spacing: 2px; }
.rw-stars.sm { font-size: .78rem; letter-spacing: 1px; }
.rw-count { font-size: .76rem; color: var(--ink-55); }
.rw-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .75rem; }
.rw-tile { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; }
.rw-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rw-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 20, 35, .55), rgba(10, 20, 35, 0) 45%);
}
.rw-dur {
  position: absolute; top: .5rem; left: .5rem; z-index: 1;
  font-size: .66rem; color: #f2f2f2;
  background: rgba(0, 0, 0, .38); border-radius: 8px; padding: .1em .45em;
}
.rw-play {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.rw-play::after {
  content: "";
  position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.rw-tile figcaption {
  position: absolute; left: .55rem; bottom: .5rem; z-index: 1;
  font-size: .68rem; font-weight: 500; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.rw-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rw-quote {
  background: var(--paper-tint);
  border: .5px solid var(--line-soft);
  border-radius: 10px;
  padding: .7rem;
}
.rw-quote p { font-size: .76rem; color: var(--ink-70); line-height: 1.55; margin-top: .25rem; }
.rw-quote footer { font-size: .66rem; color: var(--ink-55); margin-top: .4rem; }
.rw-foot {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .75rem; font-size: .72rem; color: var(--ink-70);
}
.rw-note {
  margin-top: .55rem;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
  text-align: right;
}
@media (max-width: 430px) {
  .rw { padding: 1rem; }
  .rw-quotes { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Content in Action switcher (data-driven; js/switcher.js renders)    */
/* Geometry per the measured reference: frame ≤860px, rows of four,    */
/* row height = (inner − 3·gap) / 3.5625, ratios 9:16 and 1:1 only.    */
/* ------------------------------------------------------------------ */
@font-face { font-family: 'InterUI'; font-weight: 400; font-display: swap; src: url(../assets/switcher/fonts/interui-400.woff2) format('woff2'); }
@font-face { font-family: 'InterUI'; font-weight: 500; font-display: swap; src: url(../assets/switcher/fonts/interui-500.woff2) format('woff2'); }
@font-face { font-family: 'InterUI'; font-weight: 600; font-display: swap; src: url(../assets/switcher/fonts/interui-600.woff2) format('woff2'); }
@font-face { font-family: 'InterUI'; font-weight: 700; font-display: swap; src: url(../assets/switcher/fonts/interui-700.woff2) format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 400; font-display: swap; src: url(../assets/switcher/fonts/oswald-400.woff2) format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 500; font-display: swap; src: url(../assets/switcher/fonts/oswald-500.woff2) format('woff2'); }
@font-face { font-family: 'Oswald'; font-weight: 600; font-display: swap; src: url(../assets/switcher/fonts/oswald-600.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 100 900; font-display: swap; src: url(../assets/switcher/fonts/fraunces-var.woff2) format('woff2'); }
@font-face { font-family: 'NunitoS'; font-weight: 100 900; font-display: swap; src: url(../assets/switcher/fonts/nunitos-var.woff2) format('woff2'); }
@font-face { font-family: 'PlexS'; font-weight: 300; font-display: swap; src: url(../assets/switcher/fonts/plexs-300.woff2) format('woff2'); }
@font-face { font-family: 'PlexS'; font-weight: 400; font-display: swap; src: url(../assets/switcher/fonts/plexs-400.woff2) format('woff2'); }
@font-face { font-family: 'PlexS'; font-weight: 500; font-display: swap; src: url(../assets/switcher/fonts/plexs-500.woff2) format('woff2'); }
@font-face { font-family: 'PlexAr'; font-weight: 300; font-display: swap; src: url(../assets/switcher/fonts/plexar-300.woff2) format('woff2'); }

.switcher-mount { margin-top: clamp(4rem, 9vh, 6.5rem); }

.cia {
  --published: #17B26A; --published-ink: #0F7A48; --published-bg: #E6F6EE;
  --scheduled: #3B82F6;
  --k-charcoal: #1C1E22; --k-green: #17B26A; --k-bone: #F1EEE8; --k-concrete: #9A968E;
  --dm-ink: #31203A; --dm-ground: #FBF2F0; --dm-blush: #EBD9D7; --dm-rose: #B57E84;
  --wp-petrol: #0F4A55; --wp-sand: #DFCEB2;
  --cia-gap: 12px;
  text-align: center;
}
.cia-eyebrow {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .72rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--coral-deep);
}
.cia-headline {
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); letter-spacing: -0.01em;
  color: var(--navy); margin-top: .7rem;
}
.cia-tabs { margin-top: 1.2rem; display: flex; justify-content: center; gap: clamp(.9rem, 3vw, 1.7rem); flex-wrap: wrap; }
.cia-tab {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0 2px 7px;
  font-family: 'Poppins', sans-serif; font-size: .82rem; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-40);
  border-bottom: 2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.cia-tab:hover { color: var(--ink-55); }
.cia-tab[aria-selected="true"] { color: var(--navy); font-weight: 600; border-bottom-color: var(--coral); }
.cia-tab:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 3px; }

/* R4.6 §1.1 — the flicker fix. The active layer used to swap
   absolute→relative each tick to give the deck height: a LAYOUT
   invalidation every slide change that reflowed and repainted content
   far outside the component. The deck's height is now set once by JS
   (kept fresh on resize) and every layer stays absolute forever — a
   tick touches only opacity/transform on the slides themselves.
   will-change removed: permanent layer promotion made Chrome re-sort
   and re-rasterise on every z-order tweak.                            */
.cia-deck { position: relative; margin-top: 1.4rem; }
.cia-layer {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; justify-content: center;
  transform-origin: 50% 0;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .55s ease;
}
.cia-layer[data-off="0"] { transform: none; opacity: 1; }
.cia-layer[data-off="1"] { transform: translateY(13px) scale(.972); opacity: .5; pointer-events: none; }
.cia-layer[data-off="2"] { transform: translateY(25px) scale(.945); opacity: .28; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .cia-layer { transition: none; }
  .cia-layer[data-off="1"], .cia-layer[data-off="2"] { opacity: 0; }
}

.cia-frame {
  width: min(100%, 860px); position: relative;
  background: #FFFFFF; border: 1px solid #E4E0D8;
  border-radius: 14px; overflow: hidden; text-align: left;
  box-shadow: 0 1px 2px rgba(28, 30, 34, .04), 0 8px 20px rgba(28, 30, 34, .07), 0 28px 60px rgba(28, 30, 34, .09);
}
.cia-chrome { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #F7F6F2; border-bottom: 1px solid #EDEAE3; }
.cia-lights { display: flex; gap: 7px; }
.cia-lights i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.cia-lights i:nth-child(1) { background: #FF5F57; }
.cia-lights i:nth-child(2) { background: #FEBC2E; }
.cia-lights i:nth-child(3) { background: #28C840; }
.cia-url { flex: 1; margin: 0 16px 0 34px; height: 24px; border-radius: 7px; background: #EFEDE7; display: flex; align-items: center; justify-content: center; font-family: 'InterUI', sans-serif; font-size: 10.5px; color: #94907F; }
.cia-app { padding: clamp(12px, 2.8cqw, 24px); container-type: inline-size; font-family: 'InterUI', system-ui, sans-serif; }
.cia-apphead { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cia-apphead > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cia-apptitle { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: #0A1F50; letter-spacing: -0.005em; }
.cia-pill { height: 26px; padding: 0 11px; border-radius: 999px; background: #F1EFEA; display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; color: #6E6A5E; white-space: nowrap; }
.cia-pill b { font-weight: 600; color: #0A1F50; }
.cia-pill.green { background: var(--published-bg); }
.cia-pill.green b { color: var(--published-ink); }

.cia-grid { margin-top: 16px; display: flex; flex-direction: column; gap: var(--cia-gap); }
.cia-row { display: flex; gap: var(--cia-gap); height: calc((100cqw - 2 * clamp(12px, 2.8cqw, 24px) - 3 * var(--cia-gap)) / 3.5625); }
.tile { height: 100%; flex: 0 0 auto; position: relative; overflow: hidden; border-radius: 10px; container-type: inline-size; }
.r916 { aspect-ratio: 9/16; --k: 1.5; }
.r11 { aspect-ratio: 1/1; --k: 1; }

.chip { position: absolute; top: 6.5%; height: calc(4.6cqw * var(--k)); padding: 0 calc(2.6cqw * var(--k)); border-radius: 999px; display: flex; align-items: center; font-size: calc(2.55cqw * var(--k)); line-height: 1; white-space: nowrap; }
.badge { left: 5.5%; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.state { right: 5.5%; font-weight: 600; gap: calc(1.4cqw * var(--k)); }
.state i { width: calc(1.5cqw * var(--k)); height: calc(1.5cqw * var(--k)); border-radius: 50%; display: block; }
.d-pub { background: var(--published); }
.d-sch { background: var(--scheduled); }
.onDark .chip { background: rgba(255, 255, 255, .92); color: #1C1E22; }
.onLight .chip { background: rgba(28, 30, 34, .88); color: #F6F4EF; }

.playk { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: calc(14cqw * var(--k)); height: calc(14cqw * var(--k)); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .9); display: flex; align-items: center; justify-content: center; }
.playk::after { content: ""; border-left: calc(4.6cqw * var(--k)) solid rgba(255, 255, 255, .95); border-top: calc(2.9cqw * var(--k)) solid transparent; border-bottom: calc(2.9cqw * var(--k)) solid transparent; margin-left: calc(1.3cqw * var(--k)); }

.cdots { position: absolute; left: 50%; bottom: 4.5%; transform: translateX(-50%); display: flex; gap: calc(1.5cqw * var(--k)); }
.cdots i { width: calc(1.5cqw * var(--k)); height: calc(1.5cqw * var(--k)); border-radius: 50%; display: block; }
.onDark .cdots i { background: rgba(255, 255, 255, .40); }
.onDark .cdots i.on { background: rgba(255, 255, 255, .95); }
.onLight .cdots i { background: rgba(28, 30, 34, .28); }
.onLight .cdots i.on { background: rgba(28, 30, 34, .80); }

.art { position: absolute; inset: 0; padding: calc(13.5cqw * var(--k)) calc(7cqw * var(--k)) calc(7cqw * var(--k)); display: flex; flex-direction: column; justify-content: space-between; }
.a-photo {
  background-image:
    linear-gradient(to bottom, rgba(12, 14, 17, .38) 0%, rgba(12, 14, 17, .08) 17%, rgba(12, 14, 17, 0) 32%),
    linear-gradient(to top, rgba(12, 14, 17, .90) 0%, rgba(12, 14, 17, .64) 19%, rgba(12, 14, 17, .22) 45%, rgba(12, 14, 17, 0) 70%),
    var(--photo, linear-gradient(148deg, #5E5A53 0%, #3C3A36 45%, #22242A 100%));
  background-size: cover; background-position: center;
}
.a-green { background: var(--k-green); }
.a-ink { background: var(--dm-ink); }
.a-blush { background: var(--dm-blush); }
.a-petrol { background: var(--wp-petrol); }
.a-sand { background: var(--wp-sand); }
.a-centre { align-items: center; justify-content: center; text-align: center; }
.wp-hi { background-position: center 20%; }

.k-eyebrow { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: calc(3.5cqw * var(--k)); letter-spacing: .2em; text-transform: uppercase; margin-bottom: calc(2.4cqw * var(--k)); }
.k-head { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: calc(10.2cqw * var(--k)); line-height: 1.05; letter-spacing: .012em; text-transform: uppercase; }
.k-head.sm { font-size: calc(8.4cqw * var(--k)); }
.k-sub { font-family: 'InterUI', sans-serif; font-weight: 400; font-size: calc(3.9cqw * var(--k)); line-height: 1.45; margin-top: calc(3.4cqw * var(--k)); }
.k-meta { font-family: 'InterUI', sans-serif; font-weight: 400; font-size: calc(3.2cqw * var(--k)); letter-spacing: .02em; margin-top: calc(2.6cqw * var(--k)); }
.k-cta { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: calc(3.3cqw * var(--k)); letter-spacing: .13em; text-transform: uppercase; margin-top: calc(4cqw * var(--k)); padding-top: calc(3.2cqw * var(--k)); border-top: 1px solid rgba(241, 238, 232, .28); }
.t-bone { color: var(--k-bone); }
.t-bone-soft { color: rgba(241, 238, 232, .78); }
.t-kchar { color: var(--k-charcoal); }
.t-kchar-soft { color: rgba(28, 30, 34, .72); }

.mark { width: calc(13cqw * var(--k)); height: calc(13cqw * var(--k)); flex: 0 0 auto; display: block; }
.a-photo .mark { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .62)) drop-shadow(0 0 7px rgba(0, 0, 0, .45)); }
.m-rev { --mk-top: var(--k-green); --mk-bot: var(--k-bone); }
.m-dark { --mk-top: var(--k-charcoal); --mk-bot: var(--k-charcoal); }
.cia .spacer { flex: 1; }

.dm-eyebrow { font-family: 'NunitoS', sans-serif; font-weight: 800; font-size: calc(3.2cqw * var(--k)); letter-spacing: .22em; text-transform: uppercase; margin-bottom: calc(2.6cqw * var(--k)); }
.dm-head { font-family: 'Fraunces', serif; font-weight: 600; font-size: calc(9.6cqw * var(--k)); line-height: 1.14; letter-spacing: -0.004em; }
.dm-head.sm { font-size: calc(7.6cqw * var(--k)); }
.dm-meta { font-family: 'NunitoS', sans-serif; font-weight: 600; font-size: calc(3.5cqw * var(--k)); letter-spacing: .03em; margin-top: calc(3cqw * var(--k)); }
.dm-cta { font-family: 'NunitoS', sans-serif; font-weight: 700; font-size: calc(3.1cqw * var(--k)); letter-spacing: .14em; text-transform: uppercase; margin-top: calc(4cqw * var(--k)); padding-top: calc(3.2cqw * var(--k)); border-top: 1px solid rgba(251, 242, 240, .30); }
.t-ground { color: var(--dm-ground); }
.t-ground-soft { color: rgba(251, 242, 240, .80); }
.t-dmink { color: var(--dm-ink); }
.m-mono { --s-bot: var(--dm-ground); --s-mid: var(--dm-ground); --s-top: var(--dm-ground); }
.m-colour { --s-bot: var(--dm-ink); --s-mid: var(--dm-rose); --s-top: var(--dm-ink); }
.mark-c { margin: calc(4cqw * var(--k)) auto 0; }

.wp-eyebrow { font-family: 'PlexS', sans-serif; font-weight: 500; font-size: calc(3.1cqw * var(--k)); letter-spacing: .20em; text-transform: uppercase; margin-bottom: calc(2.6cqw * var(--k)); }
.wp-head { font-family: 'PlexS', sans-serif; font-weight: 300; font-size: calc(8.2cqw * var(--k)); line-height: 1.28; letter-spacing: .01em; }
.wp-head.sm { font-size: calc(6.9cqw * var(--k)); }
.wp-fig { font-family: 'PlexS', sans-serif; font-weight: 300; font-size: calc(20cqw * var(--k)); line-height: 1; letter-spacing: .005em; }
.wp-meta { font-family: 'PlexS', sans-serif; font-weight: 400; font-size: calc(3.4cqw * var(--k)); letter-spacing: .02em; margin-top: calc(3cqw * var(--k)); }
.wp-wm { font-family: 'PlexS', sans-serif; font-weight: 400; font-size: calc(3.0cqw * var(--k)); letter-spacing: .24em; text-transform: uppercase; }
.wp-lock { font-family: 'PlexS', sans-serif; font-weight: 300; font-size: calc(13cqw * var(--k)); letter-spacing: .03em; line-height: 1; }
.wp-sub { font-family: 'PlexS', sans-serif; font-weight: 400; font-size: calc(2.9cqw * var(--k)); letter-spacing: .30em; text-transform: uppercase; margin-top: calc(1.6cqw * var(--k)); opacity: .75; }
.wp-ar { font-family: 'PlexAr', 'PlexS', sans-serif; font-weight: 300; direction: rtl; font-size: calc(10cqw * var(--k)); line-height: 1.2; margin-top: calc(4cqw * var(--k)); }
.wp-hr { width: calc(16cqw * var(--k)); height: 1px; background: var(--wp-petrol); opacity: .30; margin: calc(4.5cqw * var(--k)) auto; }
.t-sand { color: var(--wp-sand); }
.t-sand-soft { color: rgba(223, 206, 178, .80); }
.t-petrol { color: var(--wp-petrol); }
.m-sand polygon { fill: var(--wp-sand); }
.m-petrol polygon { fill: var(--wp-petrol); }

/* flick: scheduled → published transition polish */
.tile .state { transition: opacity .25s ease; }
.tile.flicking .state { animation: flickPop .5s var(--ease); }
@keyframes flickPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Mobile: rows become horizontal scrollers with legible tile height   */
@media (max-width: 700px) {
  .cia-row { height: 200px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .tile { scroll-snap-align: start; }
  .cia-apphead { justify-content: center; }
}

/* short one-row homepage variant */
.cia--short .cia-deck { margin-top: 1.2rem; }

/* ------------------------------------------------------------------ */
/* How We Work v6 blocks                                               */
/* ------------------------------------------------------------------ */
.re-block {
  background: linear-gradient(135deg, #FDF7F3, #FBF1EA);
  border: 1px dashed rgba(242, 107, 58, .38);
  border-radius: 28px;
  padding: clamp(1.6rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .re-block { grid-template-columns: 1fr; } }
.re-block .plan-kind { font-size: .62em; font-weight: 500; color: var(--ink-55); }
.re-block h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--navy); letter-spacing: -0.015em; }
.re-block .re-body { margin-top: 1rem; font-size: 1rem; line-height: 1.8; color: var(--ink-70); max-width: 46rem; }
.re-block .re-body strong { color: var(--navy); }
.re-details { margin-top: 1.2rem; border-top: 1px solid rgba(242, 107, 58, .25); }
.re-details summary {
  list-style: none; cursor: pointer; padding-block: .85rem;
  display: flex; align-items: center;
}
.re-details summary::-webkit-details-marker { display: none; }
.re-steps { display: grid; gap: 1rem; padding-bottom: 1rem; }
.re-steps h3 { font-size: .98rem; color: var(--navy); }
.re-steps p { font-size: .94rem; color: var(--ink-70); line-height: 1.7; margin-top: .25rem; }
.re-cta { margin-top: 1.4rem; }

.plan-block .plan-media { margin-top: clamp(1.6rem, 4vh, 2.4rem); grid-column: 1 / -1; }
.outreach-hero { border-radius: 20px; overflow: hidden; border: 1px solid var(--line-soft); box-shadow: 0 22px 50px -30px rgba(10, 31, 80, .4); }
.outreach-hero img { width: 100%; height: auto; display: block; }
.outreach-row {
  margin-top: clamp(.9rem, 2vw, 1.4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.outreach-row figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); }
.outreach-row img { width: 100%; height: auto; display: block; }
.plan-motto-lg {
  margin-top: 1.6rem;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ */
/* Flip-book (reusable): doorway image → overlay pager                 */
/* ------------------------------------------------------------------ */
.book-doorway {
  position: relative;
  display: block;
  border: 0; padding: 0; background: none; cursor: pointer;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 26px 60px -34px rgba(10, 31, 80, .45);
  max-width: 560px;
}
.book-doorway img { width: 100%; height: auto; display: block; transition: transform .5s var(--ease); }
.book-doorway:hover img { transform: scale(1.02); }
.book-doorway .book-hint {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  background: rgba(10, 31, 80, .82); color: #fff;
  font-size: .8rem; font-weight: 500;
  border-radius: 999px; padding: .45em 1.2em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.flipbook-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 14, 36, .88);
  display: grid; place-items: center;
  padding: clamp(.8rem, 3vw, 2.5rem);
}
.flipbook-overlay[hidden] { display: none; }
.flipbook {
  position: relative;
  width: min(94vw, calc((100vh - 140px) * 1.4142), 1100px);
}
.flipbook-page {
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
  background: #fff;
}
.flipbook-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  font-size: 1.3rem; font-weight: 600;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.flipbook-nav:hover { background: #fff; }
.flipbook-prev { left: -10px; }
.flipbook-next { right: -10px; }
.flipbook-close {
  position: absolute; top: -54px; right: 0;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
  border-radius: 999px; padding: .5em 1.2em;
  font-family: 'Poppins', sans-serif; font-size: .9rem; font-weight: 500;
}
.flipbook-count {
  position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .8); font-size: .85rem; letter-spacing: .06em;
}
@media (max-width: 700px) {
  .flipbook-prev { left: 4px; }
  .flipbook-next { right: 4px; }
}

/* HWW page-hero body width */
.hww-lead strong { color: var(--navy); }

/* ====================================================================
   ROUND 1 (12 Aug) — structure & rhythm
   ==================================================================== */

/* §1.1 · hero headline must never clip at phone widths */
@media (max-width: 480px) {
  .hero-title { font-size: min(11.2vw, 3rem); letter-spacing: -0.02em; }
}

/* §3 · alternating section backgrounds (subtle, brand-derived) */
.bg-cream { background: #FBF6EF; }
.bg-wash { background: #F5F7FC; }
/* diagnostic band: cream family with no white edges (so it reads
   distinct from the white plans section above it) */
.act-score { background: linear-gradient(180deg, #FDF6F0 0%, #FCF1EB 100%); }
/* the merged trust band is cream */
.act-trust { background: #FBF6EF; }

/* §4 · the highlighter system — coral sweep behind must-read lines.
   box-decoration-break keeps the sweep intact across mobile wraps;
   the angled gradient edges give it a hand-swept feel.               */
mark.hl {
  color: inherit;
  background: none;
  background-image: linear-gradient(100deg,
    rgba(242, 107, 58, 0) 0.6%,
    rgba(242, 107, 58, .26) 3.5%,
    rgba(242, 107, 58, .26) 96.5%,
    rgba(242, 107, 58, 0) 99.4%);
  /* Round 3 §2: static fallback matches the sweep geometry — a 2/3-
     height band riding low, one band per wrapped line (clone)        */
  background-repeat: no-repeat;
  background-size: 100% .78em;
  background-position: 0 76%;
  padding: 0 .28em;
  margin: 0 -.12em;
  border-radius: .22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.hl--soft {
  background-image: linear-gradient(100deg,
    rgba(242, 107, 58, 0) 0.6%,
    rgba(242, 107, 58, .16) 3.5%,
    rgba(242, 107, 58, .16) 96.5%,
    rgba(242, 107, 58, 0) 99.4%);
}

/* §5 · merged trust band — compressed do/don't on light ground */
.act-trust .dodont { margin-top: clamp(2rem, 4.5vh, 3rem); gap: clamp(1.2rem, 3vw, 2.4rem); }
.act-trust .dodont-col {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
.act-trust .dodont-col h3 { color: var(--coral-deep); font-size: .8rem; margin-bottom: .8rem; }
.act-trust .dodont-col--not h3 { color: var(--ink-55); }
.act-trust .dodont-col li { color: var(--navy); font-weight: 500; margin-bottom: .55rem; font-size: .95rem; line-height: 1.55; }
.act-trust .dodont-col--not li { color: var(--ink-55); font-weight: 400; }
.act-trust .founder { margin-top: clamp(2.2rem, 5vh, 3.4rem); }
/* Round 3.5 §2.5 · the Why-Us closing beat (its own line, not a bullet) */
.dodont-close {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}

/* §6 · WAS/NOW — the NOW column must win (desktop), paired
   before→after stories (mobile) */
.t-new {
  background: #FFF8F4;
  border: 1px solid rgba(242, 107, 58, .45);
  border-left: 4px solid var(--coral);
  border-radius: 14px;
  padding: .9rem 1.15rem 1.05rem;
  box-shadow: 0 14px 34px -20px rgba(242, 107, 58, .35);
}
.t-new p { font-weight: 700; color: var(--navy); }
/* Round 3 §5.1 · the OLD side gets real presence: a ghosted panel
   with legible type. NOW still wins (coral card, weight 700); the old
   game reads as the thing being replaced — its strikethrough draws on
   when the row resolves (text-decoration-color only: cheap paint).   */
.t-old {
  background: #F2F4FA;
  border: 1px dashed rgba(10, 31, 80, .25);
  border-radius: 14px;
  padding: .9rem 1.15rem 1.05rem;
}
.t-old p {
  font-weight: 500;
  color: var(--ink-55);
  text-decoration: line-through;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  /* draws on after the NOW card has landed (Round 3.5 row sequence) */
  transition: text-decoration-color var(--t-soft) var(--ease) 1.7s;
}
@media (max-width: 900px) {
  .t-row { row-gap: .55rem; padding-block: 1.6rem; }
  .t-old p { font-size: 1rem; }
  /* the turn reads downward on mobile: same arrow element, rotated */
  .t-arrow { font-size: 1.15rem; margin: .1rem 0 -.2rem -.05em; }
  .t-arrow i { transform: rotate(90deg); width: 1.2em; }
}

/* §7.2 · chevron toggle affordance (replaces the circled +) */
.plan-details summary .chev,
.re-details summary .chev {
  flex: none;
  transition: transform .3s var(--ease);
  margin-top: .1em;
}
.plan-details[open] summary .chev,
.re-details[open] summary .chev { transform: rotate(180deg); }

/* §8.1 · Facet 7 supporting beat in section 01 */
.facet-beat {
  margin: clamp(2.2rem, 5vh, 3.4rem) auto 0;
  max-width: 680px;
}
.facet-beat figure {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: 0 22px 55px -32px rgba(10, 31, 80, .4);
}
.facet-beat img { width: 100%; height: auto; display: block; }

/* §8.2 · plan-card image slots (Round 2 fills them; must not look
   broken while empty — quiet brand-tinted panel with a ripple mark) */
.plan-media-slot {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(145deg, #F5F7FC, #ECF0F9);
  border: 1px solid var(--line-soft);
  margin: 1.1rem 0 .2rem;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.plan-media-slot.r43 { aspect-ratio: 4 / 3; }
.plan-media-slot.rsq { aspect-ratio: 1 / 1; max-width: 320px; }
.plan-media-slot svg { width: 26%; opacity: .3; }
.plan-media-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* §1.2 · HWW branding strip: stack on mobile, text first */
.brand-addon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: center;
}
@media (max-width: 800px) {
  .brand-addon-grid { grid-template-columns: 1fr; }
  .brand-addon-grid .book-doorway { max-width: 420px; margin: 0 auto; }
}

/* ====================================================================
   ROUND 2 (12 Aug) — imagery, animation & polish
   One timing family: everything below shares var(--ease) and sits in
   the .3s–1.15s duration range; all fire once on scroll-into-view and
   honour prefers-reduced-motion (static end-state instead).
   ==================================================================== */

/* §1.2 · the highlighter PEN STROKE. JS (components.js) splits each
   mark.hl into word spans (.hl-w) and paints them left→right in
   sequence — which is naturally line-by-line on wrapped text. The
   trailing space lives INSIDE each word span, so adjacent word
   backgrounds meet and read as one continuous stroke. Without JS or
   with reduced motion, the mark keeps its static full highlight.     */
mark.hl { --hla: .26; }
mark.hl--soft { --hla: .16; }
mark.hl.hl-armed { background-image: none; }
/* Round 3 §2 geometry: the band is ~2/3 of the line height and rides
   LOW on the text (real-highlighter feel), so consecutive wrapped
   lines keep clear white space between their bands.                  */
.hl-w {
  background-image: linear-gradient(
    rgba(242, 107, 58, var(--hla)),
    rgba(242, 107, 58, var(--hla)));
  background-repeat: no-repeat;
  background-size: 0% .78em;
  background-position: 0 76%;
  padding: 0;
  transition: background-size .46s linear;
}
.hl-w--first { border-radius: .22em 0 0 .22em; }
.hl-w--last { border-radius: 0 .22em .22em 0; }
.hl-run .hl-w { background-size: 100% .78em; }

/* §1.5 · "~900 million" — the written unit sits smaller than the
   numeral but keeps the coral unit colour                             */
.stat-num .unit--word { font-size: .34em; font-weight: 600; letter-spacing: 0; }

/* §1.7 · theatre header drama: "The old game" lands, a beat, then
   "the new game" arrives and underlines itself in coral. Armed by JS
   only when motion is allowed; static otherwise.                      */
.th-new { position: relative; }
.th-new::after {
  content: "";
  position: absolute; left: 0; bottom: -.12em;
  width: 100%; height: 3px;
  border-radius: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
}
.theatre.head-armed .th-old,
.theatre.head-armed .th-vs,
.theatre.head-armed .th-new {
  display: inline-block;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.theatre.head-in .th-old { opacity: 1; transform: none; }
.theatre.head-in .th-vs { opacity: 1; transform: none; transition-delay: 1.15s; }
.theatre.head-in .th-new { opacity: 1; transform: none; transition-delay: 1.4s; }
.theatre.head-in .th-new::after { transform: scaleX(1); transition: transform var(--t-reveal) var(--ease) 2.55s; }

/* §2 · plan-card images in; slots read as photography, not panels    */
.plan-media-slot.r169 { aspect-ratio: 16 / 9; }
.plan-media-slot.filled { background: #fff; }
/* §4.1 · sibling anatomy: image → header → intro → toggle → link.
   The rings aside is retired, so the three cards share the full band
   width, side by side on desktop                                      */
.plan .plan-media-slot { margin: 0 0 1.2rem; }
.plans-wrap { grid-template-columns: 1fr; }
.plans-cards { grid-template-columns: repeat(3, 1fr); align-items: start; }
.plans-cards .plan { padding: clamp(1.4rem, 2vw, 1.9rem); }
@media (max-width: 980px) {
  .plans-cards { grid-template-columns: 1fr; }
  .plans-cards .plan { padding: clamp(1.8rem, 3.6vw, 2.6rem); }
  /* Round 3 §3.1 · mobile card rhythm: title → promise → proof →
     detail. Same image, different slot per breakpoint (flex order). */
  .plans-cards .plan { display: flex; flex-direction: column; }
  .plans-cards .plan .plan-media-slot { order: 1; margin: .3rem 0 .4rem; }
  .plans-cards .plan .plan-details { order: 2; }
  .plans-cards .plan .plan-more { order: 3; }
}
.plan--chosen {
  border-color: rgba(242, 107, 58, .5);
  box-shadow: 0 24px 55px -32px rgba(242, 107, 58, .4);
}

/* §2.4 · brand callout strip: small book image, right on desktop,
   below the text on mobile                                            */
.brand-addon--withimg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 20vw, 210px);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
}
.brand-addon-img {
  width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  justify-self: end;
}
@media (max-width: 640px) {
  .brand-addon--withimg { grid-template-columns: 1fr; }
  .brand-addon-img { max-width: 300px; justify-self: start; }
}

/* §2.5 · engine split without the film tile: the dashboard carries
   the section's visual alone, centred                                 */
.engine-split--solo { grid-template-columns: 1fr; justify-items: center; }
.engine-split--solo .dash { width: 100%; max-width: 720px; }

/* §3.2 · connective lead-in above the switcher                        */
.act-leadin {
  margin: clamp(2.8rem, 6vh, 4.2rem) 0 0;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.8;
  color: var(--ink-70);
  max-width: 46rem;
}
.act-leadin strong { color: var(--navy); font-weight: 600; }

/* §3.3 · switcher caption (rendered by js/switcher.js, both pages)   */
.cia-caption {
  margin-top: .9rem;
  text-align: center;
  font-size: .85rem;
  color: var(--ink-55);
}

/* §4.2 · "Is ChatGPT recommending your business?" — give ascenders
   breathing room so the heading's top never clips                     */
.act-score .act-title { line-height: 1.18; padding-top: .06em; }

/* Soft image arrival — in-flight media images fade/settle in on load
   (js/main.js §8) instead of popping; cached images show instantly   */
img.img-fade { opacity: 0; transform: scale(1.02); transition: opacity .7s var(--ease), transform 1s var(--ease); }
img.img-fade.is-loaded { opacity: 1; transform: none; }

/* ====================================================================
   ROUND 4 (12 Aug) — How We Work page
   ==================================================================== */

/* §1/§3.1 · one section per plan: the section owns the tint and the
   act padding; the block keeps only its internal grid                */
.plan-sec .plan-block { border-top: 0; padding-block: 0; }
.plan-sec { padding-block: clamp(3.5rem, 8vh, 6rem); }
.plan-sec .act-lead { margin-bottom: clamp(2.2rem, 5vh, 3.4rem); }

/* §2 · Get Seen dashboard switcher (rendered by js/switcher.js)      */
.dsw { position: relative; }
.dsw-deck {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #FAF7F1;
  box-shadow: 0 24px 60px -32px rgba(10, 31, 80, .38);
  /* R4.6 §1.1: engine-enforced scoping — layout and paint inside the
     deck can never escape the component */
  contain: layout paint;
}
/* §1.5 (R4.5): the incoming panel fades IN OVER the outgoing one,
   which stays opaque underneath (.was) until the fade ends — a clean
   dissolve with no double-exposure blend at any instant              */
.dsw-panel { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 1; }
.dsw-panel.was { opacity: 1; z-index: 2; transition: none; }
.dsw-panel[data-on="1"] { opacity: 1; z-index: 3; transition: opacity .45s var(--ease); }
.dsw-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* PRE-RENDER ROUND (6 Sep) · no-JS fallback. Both switchers now ship
   their full markup in the served HTML; with JS off the deck height
   is never set and absolute layers would collapse to nothing. Instead
   the layers flow statically — all three industry sets and all seven
   dashboard panels readable in order — and the inert controls hide.
   (html.js is added by the inline gate script; these rules can never
   affect a normal JS render.)                                        */
html:not(.js) .cia-layer {
  position: static; transform: none; opacity: 1;
  pointer-events: auto; margin-bottom: 1.4rem;
}
html:not(.js) .cia-deck { height: auto !important; }
html:not(.js) .cia-tabs { display: none; }
html:not(.js) .dsw-deck { aspect-ratio: auto; contain: none; }
html:not(.js) .dsw-panel { position: static; opacity: 1; }
html:not(.js) .dsw-nav, html:not(.js) .dsw-dots { display: none; }
.dsw-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.dsw-nav:hover { background: #fff; }
.dsw-prev { left: 12px; }
.dsw-next { right: 12px; }
.dsw-dots { display: flex; justify-content: center; gap: 9px; margin-top: 1rem; }
.dsw-dot {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(10, 31, 80, .18);
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.dsw-dot[aria-current="true"] { background: var(--coral); transform: scale(1.25); }

/* §5 · outreach proof panels: hover invitation + lightbox.
   6 Sep A2: prompt line, always-visible magnifier badge (the primary
   affordance on touch), and a lift + zoom-in cursor on hover.        */
.tiles-prompt {
  margin-top: clamp(.9rem, 2vw, 1.4rem);
  margin-bottom: -.2rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-55);
}
.outreach-row .pz {
  position: relative;
  display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.pz-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(6, 14, 36, .35);
  pointer-events: none;
}
.pz-badge svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .pz-badge { width: 26px; height: 26px; } .pz-badge svg { width: 14px; height: 14px; } }
@media (hover: hover) {
  /* subtle lift matching the site's card hover (.plan:hover) */
  .outreach-row figure { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
  .outreach-row figure:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(10, 31, 80, .55); }
}
/* R4.6 §1.3: native <dialog> lightbox                                 */
.lb-dialog {
  border: 0; padding: 0; margin: auto;
  background: none;
  max-width: min(1200px, 92vw);
  overflow: visible;
}
.lb-dialog::backdrop { background: rgba(8, 16, 40, .88); }
.lb-fig { margin: 0; }
.lb-dialog .lb-img { max-height: 76vh; }
.lb-dialog .lb-close { top: -48px; }
@media (max-height: 760px) { .lb-dialog .lb-close { top: 10px; } }

.lb-img {
  display: block; max-width: 100%; max-height: 76vh;
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
/* R4.5 §1.3: the close button used to sit 48px ABOVE the dialog — on
   short viewports the tall centred image pushed it off-screen, so the
   X looked broken. The image now caps at 76vh and the X falls back
   INSIDE the panel's top-right corner on short screens.              */
.lb-close {
  position: absolute; top: -48px; right: 0;
  z-index: 5;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .18); color: #fff;
  border-radius: 999px; padding: .5em 1.2em;
  font-family: 'Poppins', sans-serif; font-size: .9rem; font-weight: 500;
}
@media (max-height: 760px) {
  .lb-close { top: 10px; right: 10px; background: rgba(8, 16, 40, .72); }
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 1.7rem; line-height: 1;
}
.lb-prev { left: -56px; }
.lb-next { right: -56px; }
@media (max-width: 800px) { .lb-prev { left: 6px; } .lb-next { right: 6px; } }
.lb-count {
  position: absolute; bottom: -38px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .8); font-size: .85rem; letter-spacing: .06em;
}

/* ====================================================================
   CONTACT PAGE REBUILD (19 Aug) — two doors, phone/visit, map card
   ==================================================================== */
.contact-doors { padding-top: clamp(1rem, 3vh, 2rem); }
.door {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3.4vw, 2.6rem);
  box-shadow: 0 24px 60px -36px rgba(10, 31, 80, .35);
  display: flex; flex-direction: column; align-items: flex-start;
}
.door-glyph {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--coral-soft);
  color: var(--coral-deep);
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
}
.door-glyph svg { width: 24px; height: 24px; }
.door h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--navy); letter-spacing: -0.015em; }
.door p { margin-top: .7rem; font-size: 1rem; line-height: 1.75; color: var(--ink-70); flex: 1; }
.door .btn { margin-top: 1.4rem; }

.contact-visit .cia-eyebrow { text-align: left; }
.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }
.visit-copy .act-title { margin-top: .55rem; max-width: 16ch; }
.visit-country {
  margin-top: 1.6rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--coral-deep);
}
.visit-phone { margin-top: .5rem; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 500; color: var(--navy); }
.visit-serving { margin-top: .9rem; font-size: .95rem; color: var(--ink-70); font-weight: 500; }
.visit-phone a { color: var(--coral-deep); text-decoration: none; border-bottom: 2px solid rgba(242, 107, 58, .35); }
.visit-phone a:hover { border-bottom-color: var(--coral); }
.visit-address { margin-top: 1rem; font-style: normal; font-size: 1rem; line-height: 1.7; color: var(--ink-70); }
.visit-note { margin-top: 1rem; font-size: .95rem; line-height: 1.7; color: var(--ink-55); max-width: 36rem; }

/* browser-frame map card (same chrome language as the dashboards) */
.map-frame {
  background: #fff;
  border: 1px solid #E4E0D8;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28, 30, 34, .04), 0 8px 20px rgba(28, 30, 34, .07), 0 28px 60px rgba(28, 30, 34, .09);
}
.map-chrome { height: 42px; display: flex; align-items: center; padding: 0 14px; gap: 6px; background: #F7F6F2; border-bottom: 1px solid #EDEAE3; }
.map-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: #E0DDD5; }
.map-chrome .dot:nth-child(1) { background: #F26B3A; }
.map-url { flex: 1; margin-left: 10px; height: 24px; border-radius: 7px; background: #EFEDE7; display: flex; align-items: center; justify-content: center; font-size: .72rem; color: #94907F; }
/* the supplied 600×450 iframe made responsive: width follows the card,
   height follows its 4:3 ratio (1:1 on narrow phones)               */
.map-embed { display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; border: 0; }
@media (max-width: 640px) { .map-embed { aspect-ratio: 1 / 1; } }

/* ====================================================================
   ROUND 4.7 (19 Aug) — primary-CTA sheen
   One light gloss sweep across [data-sheen] "Book a conversation"
   buttons: once on scroll-into-view, once per hover (desktop). Never
   loops; no idle motion; none under reduced motion. Compositor-only
   (transform on a pseudo-element). Secondary/text links untouched.
   ==================================================================== */
@keyframes ctaSheen {
  from { transform: translateX(-140%) skewX(-22deg); }
  to   { transform: translateX(240%) skewX(-22deg); }
}
.btn[data-sheen] { position: relative; overflow: hidden; }
.btn[data-sheen]::before {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 42%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .34) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-22deg);
  pointer-events: none;
}
.btn[data-sheen].sheen-run::before { animation: ctaSheen .9s var(--ease) 1 both; }
@media (prefers-reduced-motion: reduce) {
  .btn[data-sheen]::before { display: none; }
}

/* ====================================================================
   ROUND 4.5 (13 Aug) — How We Work bugs, motion & rhythm
   ==================================================================== */

/* §2.1 · hero entrance (port of the homepage pattern): staggered
   lines, then the lead, then the RE block arrives. Once per load.    */
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } }
.js .page-hero .eyebrow { animation: heroIn var(--t-hero) var(--ease) .15s backwards; }
.js .page-hero h1 { animation: heroIn var(--t-hero) var(--ease) .4s backwards; }
.js .page-hero .page-lead { animation: heroIn var(--t-hero) var(--ease) 1s backwards; }
.js #reputation-engine .re-block { animation: heroIn var(--t-hero) var(--ease) 1.7s backwards; }

/* §4 · OUR PLANS section header                                       */
.plans-head { margin-bottom: clamp(2.2rem, 5vh, 3.2rem); }
.plans-head .cia-eyebrow { text-align: left; }
.plans-head .act-title { margin-top: .55rem; max-width: 24ch; }
.plans-head .act-lead { margin-top: .8rem; }

/* §3 · Reputation Engine widget animations — R4.6 upgrade: stars POP
   in sequence then one shimmer crosses the row; the chip does a real
   flip/settle. Once per load, NOTHING loops (hard rule). Armed by JS
   only when motion is allowed; static end state otherwise.           */
@keyframes chipFlip {
  0% { opacity: 0; transform: perspective(420px) rotateX(88deg); }
  70% { opacity: 1; transform: perspective(420px) rotateX(-12deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes starPop {
  0% { opacity: .15; transform: scale(.35); }
  62% { opacity: 1; transform: scale(1.32); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes starShine {
  to { transform: translateX(130%) skewX(-18deg); }
}
.rw-armed .rw-pill { opacity: 0; transform-origin: 50% 0; }
.rw-in .rw-pill { animation: chipFlip .8s var(--ease) .25s both; }
.rw-rating .rw-stars span { display: inline-block; }
.rw-armed .rw-rating .rw-stars span { opacity: .15; }
.rw-in .rw-rating .rw-stars span { animation: starPop .5s var(--ease) both; }
.rw-armed .rw-rating .rw-stars { position: relative; overflow: hidden; }
.rw-in .rw-rating .rw-stars::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: starShine .8s ease-out 1.45s forwards; /* runs ONCE, ends off-row */
}

/* §6.1 · branded notification card over the outreach photo            */
.outreach-hero { position: relative; }
.note-card {
  position: absolute; right: 4%; bottom: 6%;
  background: #0A1F50;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: .8rem 1rem;
  display: grid; gap: .5rem;
  box-shadow: 0 18px 40px -18px rgba(6, 14, 36, .65);
  max-width: min(72%, 300px);
}
.nc-line {
  display: flex; align-items: center; gap: .55rem;
  color: #fff; font-size: .82rem; font-weight: 500; line-height: 1.3;
  white-space: nowrap;
}
.nc-tick, .nc-cal { flex: none; width: 16px; height: 16px; border-radius: 50%; position: relative; }
.nc-tick { background: #1D9E75; }
.nc-tick::after {
  content: ""; position: absolute; left: 4px; top: 4.5px;
  width: 7px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.nc-cal { background: var(--coral); }
.nc-cal::after {
  content: ""; position: absolute; inset: 4px 3.5px 3.5px;
  border: 1.5px solid #fff; border-radius: 2px;
  border-top-width: 4px;
}
.st-armed .nc-line { opacity: 0; transform: translateX(20px); transition: opacity var(--t-soft) var(--ease), transform var(--t-soft) var(--ease); }
.st-armed.st-in .nc-1 { opacity: 1; transform: none; }
.st-armed.st-in .nc-2 { opacity: 1; transform: none; transition-delay: .95s; }
@media (max-width: 640px) { .note-card { padding: .6rem .75rem; } .nc-line { font-size: .74rem; } }

/* §6.2 · proof-panel entrances (one-two-three, then STILL) + mobile
   tappable-card depth                                                 */
.js .plan-media.rv-armed .outreach-row figure {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--t-soft) var(--ease), transform var(--t-soft) var(--ease);
}
.js .plan-media.rv-armed .outreach-row figure:nth-child(2) { transition-delay: .18s; }
.js .plan-media.rv-armed .outreach-row figure:nth-child(3) { transition-delay: .36s; }
.js .plan-media.rv-armed.is-in .outreach-row figure { opacity: 1; transform: none; }
@media (max-width: 780px) {
  .outreach-row figure {
    box-shadow: 0 12px 28px -14px rgba(10, 31, 80, .55);
    border-color: rgba(10, 31, 80, .18);
  }
}

/* §8 · mobile rhythm — one consistent breathing room                  */
@media (max-width: 640px) {
  .page-hero { padding-top: calc(var(--header-h) + 1.1rem); padding-bottom: 2.4rem; }
  .plan-sec { padding-block: 3rem; }
  #reputation-engine.act { padding-bottom: 3rem; }
  .act-cta-navy { padding-block: 3rem; }
  .plan-block .plan-media { margin-top: 1.4rem; }
  .brand-addon-grid { gap: 1.2rem; }
}

/* §3.1 · the page's navy close                                        */
.act-cta-navy { background: linear-gradient(180deg, #0A1F50 0%, #122A68 100%); }
.act-cta-navy .mini-cta { background: none; margin-block: 0; padding-block: clamp(1rem, 3vh, 2rem); }
.act-cta-navy .mini-cta h2 { color: #fff; }
.act-cta-navy .mini-cta .reassure { color: rgba(255, 255, 255, .72); }