/* ==========================================================================
   CVBS, Worldwide Venue Finding Solutions
   Design system (shared). Mobile-first. Built on the cvbs-2026 visual language.
   ========================================================================== */

:root{
  --teal:#3BC9D9; --teal-deep:#32D9F3;
  /* Button fills. 8 Sep 2026: brand teal moved to #32D9F3 at Mel's request.
     The new value is much lighter (luminance .568 vs .335), so white text on
     it measures 1.70:1 and is unreadable. Button labels were flipped from
     white to NAVY, which measures 8.27:1 and clears AAA. Do not revert the
     label colour to white without changing the fill back. */
  --teal-btn:#32D9F3; --teal-btn-hover:#1FC4E0;
  /* Teal as a FOREGROUND: text, icons, numbers. This is the ONLY teal that
     may be used as ink on white or stone. It clears 5.30:1 on white and
     4.84:1 on stone. --teal-deep (#32D9F3) measures 1.70:1 as ink and must
     never be used for text, icons or 1px borders on a light ground.
     8 Sep 2026: finder.css had 19 --teal-deep ink uses; all repointed here.
     --teal and --teal-deep are for FILLS, gradients and tints only.
     To revert the accent colour, change this one line. */
  --teal-ink:#197683;
  /* 7 Sep 2026: every scrim that sits over a PHOTOGRAPH uses this one value.
     The navy washes were failing contrast wherever the photo was bright, and
     navy tinted at low alpha is lighter than neutral black at the same alpha.
     Solid navy backgrounds (footer, .s-navy, cards) are NOT scrims and keep
     the brand navy. Change this line to retune every photo overlay at once. */
  --scrim:rgba(0,0,0,.65);
  --scrim-soft:rgba(0,0,0,.55);
  --navy:#0A2C52; --navy-deep:#061E3B; --brand:#0366C6;
  --stone:#EEF6F7; --stone-deep:#DFEFF1;
  --white:#FFFFFF;
  --text:#0D1F2D; --muted:#666C73; --line:#D6E7E9; --line-dark:rgba(255,255,255,.14);
  --container:1400px;
  --gutter:clamp(1.5rem,5vw,5rem);
  --section-y:clamp(4.5rem,11vh,9rem);
  --r-card:14px; --r-btn:12px; --r-pill:999px;
  --ease:cubic-bezier(.16,.84,.44,1);
  --shadow-sm:0 10px 30px -18px rgba(10,44,82,.45);
  --shadow-md:0 24px 60px -30px rgba(10,44,82,.4);
  --shadow-card:0 30px 60px -34px rgba(10,44,82,.35);
  --maxread:62ch;
}

*{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding-top clears the 74px sticky header. Without it every
   in-page anchor on the site landed with its first 74px hidden behind
   the nav, which on the offers page cut the top off the offer you had
   just clicked. 7 Sep 2026. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);background:var(--stone);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.6;font-size:clamp(1rem,.97rem + .2vw,1.075rem);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.8rem 1.2rem;z-index:200}
.skip:focus{left:1rem;top:1rem}

/* Layout ------------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:980px}
.pad{padding-block:var(--section-y)}
.pad-t{padding-top:var(--section-y)}
.s-white{background:var(--white)}
.s-stone{background:var(--stone)}
.s-stone-deep{background:var(--stone-deep)}
.s-navy{background:var(--navy);color:#EAF1F4}
.s-navy .muted,.s-navy .lead{color:rgba(234,241,244,.74)}
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
@media(min-width:760px){.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.g-4{grid-template-columns:repeat(4,1fr)}}

/* Typography -------------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.85rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--brand)}
.eyebrow::before{content:"";width:34px;height:2px;border-radius:2px;background:var(--teal)}
.s-navy .eyebrow{color:var(--teal)}
.eyebrow--center{justify-content:center}
.display{font-weight:600;line-height:1.04;letter-spacing:-.03em;font-size:clamp(2.3rem,1.5rem + 4vw,4.6rem)}
.display em{font-style:normal;color:var(--teal-ink)}
.s-navy .display em{color:var(--teal)}
h1,h2,h3,h4{font-weight:600;line-height:1.12;letter-spacing:-.02em;color:inherit}
.h2{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.1rem);line-height:1.08;letter-spacing:-.025em}
.h2--sm{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.05rem);line-height:1.15}
.h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem)}
.h4{font-size:1.15rem}
.lead{font-size:clamp(1.1rem,1.02rem + .45vw,1.4rem);color:#37444f;max-width:var(--maxread);line-height:1.5}
.muted{color:var(--muted)}
.measure{max-width:var(--maxread)}
.center{text-align:center}
.center .lead,.center .eyebrow{margin-inline:auto}
.section-head{max-width:760px;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head .h2{margin-top:1rem}
.section-head .lead{margin-top:1rem}
.center.section-head{margin-inline:auto}

/* Buttons ----------------------------------------------------------------- */
.btn{font-size:.97rem;font-weight:600;border-radius:var(--r-btn);cursor:pointer;border:1px solid transparent;
  padding:1rem 1.7rem;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.btn svg{width:17px;height:17px;flex:none}
.btn--navy{background:var(--navy);color:#fff;box-shadow:var(--shadow-sm)}
.btn--navy:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(10,44,82,.55)}
.btn--teal{background:var(--teal-btn);color:var(--navy);box-shadow:0 12px 30px -16px rgba(10,44,82,.5)}
.btn--teal:hover{transform:translateY(-3px);background:var(--teal-btn-hover);color:var(--navy)}
.btn--teal:focus-visible{outline:3px solid var(--navy);outline-offset:2px;background:var(--teal-btn-hover)}
.btn--light{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}
.btn--light:hover{transform:translateY(-3px)}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
.btn--ghost:hover{background:rgba(10,44,82,.06)}
.s-navy .btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
.center .btn-row{justify-content:center}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--brand)}
.link-arrow svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.s-navy .link-arrow{color:var(--teal)}

/* Header / nav ------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(238,246,247,.82);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(238,246,247,.94);border-color:var(--line);box-shadow:0 10px 30px -24px rgba(10,44,82,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:74px}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:38px;width:auto}
.nav-links{display:none}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-cta .btn{padding:.7rem 1.25rem;font-size:.9rem}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.nav-toggle span{display:block;height:2px;width:20px;margin-inline:auto;background:var(--navy);transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* mobile drawer */
.mobile-menu{position:fixed;inset:74px 0 0;background:var(--stone);transform:translateX(100%);transition:transform .4s var(--ease);z-index:99;padding:var(--gutter);display:flex;flex-direction:column;gap:.25rem;overflow:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{font-size:1.4rem;font-weight:600;padding:1rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.mobile-menu .btn{margin-top:1.5rem;font-size:1.05rem}
body.menu-open{overflow:hidden}
@media(min-width:1000px){
  .nav-toggle{display:none}
  .mobile-menu{display:none}
  .nav-links{display:flex;align-items:center;gap:2rem}
  .nav-links a{font-size:.95rem;font-weight:500;color:#2b3946;position:relative;padding-block:.4rem}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--teal);transition:right .3s var(--ease)}
  .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
}

/* Hero -------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;padding-block:clamp(3rem,7vw,6rem)}
@media(min-width:980px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero h1{font-weight:600;line-height:1.03;letter-spacing:-.03em;font-size:clamp(2.5rem,1.6rem + 4.4vw,4.7rem);margin:1.1rem 0 1.25rem}
/* .hero h1 em teal-ink rule removed 8 Sep 2026: dead code. The hero block at
   line ~461 sets .hero h1 em to var(--teal) at the same specificity and later
   in the file, so this never applied. The hero em is on a scrimmed photo,
   a DARK ground, where bright teal is correct and measures 3.57:1. */
.hero .lead{margin-bottom:2rem}
.hero-proof{margin-top:2rem;display:flex;align-items:center;gap:1rem;font-size:.85rem;color:var(--muted);flex-wrap:wrap}
.hero-media{position:relative;border-radius:calc(var(--r-card) + 6px);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/3.2}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-badge{position:absolute;left:1rem;bottom:1rem;background:rgba(10,44,82,.82);color:#fff;backdrop-filter:blur(6px);padding:.7rem 1rem;border-radius:12px;font-size:.8rem;display:flex;gap:.55rem;align-items:center}
.hero-badge b{color:var(--teal)}

/* page hero (interior pages) */
.page-hero{background:var(--stone);color:var(--navy);position:relative;border-bottom:1px solid var(--line)}
.page-hero .wrap{position:relative;z-index:1;padding-block:clamp(3rem,7vw,5.5rem)}
.page-hero .crumbs,.page-hero .crumbs a{color:var(--muted)}
.page-hero .eyebrow{color:var(--brand)}
.page-hero h1{font-size:clamp(2.1rem,1.4rem + 3.4vw,3.7rem);max-width:18ch;margin:1rem 0 1.1rem;letter-spacing:-.02em;line-height:1.04;color:var(--navy)}
.page-hero .lead{color:var(--muted);max-width:56ch}

/* Breadcrumbs ------------------------------------------------------------- */
.crumbs{font-size:.82rem;color:rgba(234,241,244,.7);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.crumbs a:hover{color:var(--teal)}
.crumbs span{opacity:.5}
.s-stone .crumbs,.s-white .crumbs{color:var(--muted)}

/* Cards ------------------------------------------------------------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.5rem,2.4vw,2.1rem);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#d7d0c0}
.card .icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(59,201,217,.14);color:var(--teal-ink);margin-bottom:1.1rem}
.card .icon svg{width:24px;height:24px}
.card h3{margin-bottom:.6rem}
.card p{color:var(--muted)}
.card-link{display:block}
.s-navy .card{background:rgba(255,255,255,.04);border-color:var(--line-dark);color:#EAF1F4;box-shadow:none}
.s-navy .card p{color:rgba(234,241,244,.72)}
.s-navy .card:hover{border-color:rgba(59,201,217,.5)}

/* feature card with image */
.feature{display:grid;gap:0;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.feature-media{aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy),var(--teal-deep))}
.feature-media img{width:100%;height:100%;object-fit:cover}
.feature-body{padding:clamp(1.5rem,2.4vw,2.1rem)}

/* Process timeline -------------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:1.5rem}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:0;position:relative}
  .steps::before{content:"";position:absolute;top:26px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--teal-deep),var(--teal))}}
.step{position:relative;padding:0 1rem}
.step .num{counter-increment:step;width:54px;height:54px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:600;font-size:1.2rem;position:relative;z-index:1;margin-bottom:1.1rem;box-shadow:0 0 0 6px var(--stone)}
.s-white .step .num{box-shadow:0 0 0 6px #fff}
.step .num::before{content:counter(step,decimal-leading-zero)}
.step h3{font-size:1.15rem;margin-bottom:.45rem}
.step p{color:var(--muted);font-size:.96rem}
@media(max-width:899px){.steps{position:relative;padding-left:14px}
  .step{padding-left:2.5rem;padding-bottom:.5rem}
  .step::before{content:"";position:absolute;left:13px;top:8px;bottom:-1.5rem;width:2px;background:var(--line)}
  .step:last-child::before{display:none}
  .step .num{position:absolute;left:0;top:0;width:40px;height:40px;font-size:1rem;margin:0}}

/* Comparison (DIY vs CVBS) ------------------------------------------------ */
.compare{display:grid;gap:1.25rem}
@media(min-width:820px){.compare{grid-template-columns:1fr 1fr}}
.compare .col{border-radius:var(--r-card);padding:clamp(1.5rem,2.5vw,2.2rem);border:1px solid var(--line)}
.compare .diy{background:var(--stone-deep)}
.compare .cvbs{background:var(--navy);color:#EAF1F4;border-color:transparent;box-shadow:var(--shadow-card)}
.compare ul{list-style:none;margin-top:1.1rem;display:grid;gap:.85rem}
.compare li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem}
.compare li svg{width:20px;height:20px;flex:none;margin-top:2px}
.compare .diy li svg{color:#b9531f}
.compare .cvbs li svg{color:var(--teal)}
.compare .cvbs li{color:rgba(234,241,244,.88)}

/* Stats ------------------------------------------------------------------- */
.stats{display:grid;gap:1.5rem;text-align:center}
@media(min-width:680px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat .n{font-size:clamp(2.2rem,1.5rem + 2.5vw,3.4rem);font-weight:600;letter-spacing:-.03em;color:var(--teal)}
.stat .l{font-size:.9rem;color:rgba(234,241,244,.74);margin-top:.3rem}
.s-white .stat .n,.s-stone .stat .n{color:var(--teal-ink)}
.s-white .stat .l,.s-stone .stat .l{color:var(--muted)}

/* Logos strip ------------------------------------------------------------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem)}
.logos img{height:38px;width:auto;opacity:1;transition:opacity .3s,transform .3s}
.logos img:hover{opacity:1;transform:translateY(-2px)}
.logos--wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;align-items:center;gap:clamp(1.6rem,3vw,2.2rem) clamp(1.5rem,4vw,3rem);max-width:1120px;margin-inline:auto}
@media(min-width:720px){.logos--wall{grid-template-columns:repeat(6,minmax(0,1fr))}}
.logos--wall img{height:auto;width:auto;max-height:34px;max-width:min(140px,100%);object-fit:contain}

/* ==========================================================================
   REBRAND: teal-forward accents + signature teal section
   ========================================================================== */
::selection{background:var(--teal);color:#06323a}
.card:hover{border-color:var(--teal)}
/* signature teal stats band */
.s-teal{background:linear-gradient(135deg,#197B88 0%,#166F7B 52%,#0F5C67 100%);color:#fff;position:relative;overflow:hidden}
.s-teal::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 85% 0%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.s-teal .wrap{position:relative;z-index:1}
.s-teal .stat .n{color:#fff}
.s-teal .stat .l{color:rgba(255,255,255,.9)}
/* keep the hero overlay dark for legibility, add a teal glow */
/* superseded 7 Sep 2026 by the flat var(--scrim) rule further down. Kept as a
   marker so nobody re-adds a directional navy wash here. */
.hero__scrim{background:var(--scrim)}
.logos-label{text-align:center;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:1.75rem;font-weight:600}

/* Testimonials ------------------------------------------------------------ */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.75rem,3vw,2.5rem);box-shadow:var(--shadow-sm)}
.quote .stars{color:var(--teal-ink);letter-spacing:2px;margin-bottom:1rem}
.quote blockquote{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.45;font-weight:500;letter-spacing:-.01em}
.quote .who{display:flex;align-items:center;gap:.85rem;margin-top:1.5rem}
.quote .who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.quote .who .name{font-weight:600;font-size:.95rem}
.quote .who .role{font-size:.85rem;color:var(--muted)}
.who-av{width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.95rem;flex:none;letter-spacing:.02em}
.quote .who img.who-logo{height:34px;width:auto;max-width:150px;border-radius:0;object-fit:contain;flex:none}
/* homepage service icons: bright cyan, larger, no tinted circle (matches brand icon set) */
.svc-cards .icon{background:none;width:auto;height:auto;margin-bottom:1.1rem}
.svc-cards .icon svg{width:42px;height:42px;color:var(--teal);stroke-width:1.6}

/* Offers ------------------------------------------------------------------ */
.offer{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.offer:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.offer .media{aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy),var(--teal-deep));position:relative}
.offer .media img{width:100%;height:100%;object-fit:cover}
.offer .tag{position:absolute;top:.9rem;left:.9rem;background:var(--teal);color:var(--navy-deep);font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.35rem .7rem;border-radius:var(--r-pill)}
.offer .body{padding:1.4rem}
.offer .loc{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.offer h3{margin:.35rem 0 .6rem;font-size:1.25rem}

/* FAQ accordion ----------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.35rem 0;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-weight:600;font-size:clamp(1.02rem,1rem + .3vw,1.18rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--teal);border-color:var(--teal)}
.faq .ans{padding:0 0 1.4rem;color:var(--muted);max-width:var(--maxread)}

/* Forms ------------------------------------------------------------------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:calc(var(--r-card) + 4px);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--shadow-card)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.45rem;color:#2b3946}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;font-size:1rem;background:var(--stone);color:var(--text);transition:border-color .25s,background .25s,box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(59,201,217,.16)}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;gap:1.1rem}
@media(min-width:620px){.field-row.two{grid-template-columns:1fr 1fr}}
.form-note{font-size:.85rem;color:var(--muted);margin-top:.5rem}
.fieldset-title{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--teal-ink);margin:2rem 0 1rem}

/* Footer ------------------------------------------------------------------ */
.site-footer{background:var(--navy-deep);color:rgba(234,241,244,.7);padding-block:clamp(3.5rem,6vw,5rem) 2rem}
.footer-grid{display:grid;gap:2.5rem}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-footer img{height:36px;width:auto;margin-bottom:1.2rem}
.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.site-footer ul{list-style:none;display:grid;gap:.7rem}
.site-footer a:hover{color:var(--teal)}
.site-footer .fnote{max-width:34ch;font-size:.92rem;line-height:1.6}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.82rem}
.footer-contact{display:grid;gap:.6rem;font-size:.92rem}
.footer-contact a{color:#EAF1F4;font-weight:500;display:inline-flex;align-items:center;gap:.55rem}
.footer-contact a svg{width:18px;height:18px;flex:none;color:var(--teal)}

/* CTA band ---------------------------------------------------------------- */
.cta-band{background:var(--navy);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% -10%,rgba(59,201,217,.28),transparent 60%)}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);max-width:18ch;margin-inline:auto}
.cta-band .lead{margin:1.2rem auto 2rem;color:rgba(234,241,244,.82)}
.cta-band .btn-row{justify-content:center}

/* Prose (content pages) --------------------------------------------------- */
.prose{max-width:var(--maxread)}
.prose p{margin-bottom:1.15rem;color:#37444f}
.prose h2{margin:2.5rem 0 1rem;font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem)}
.prose h3{margin:1.75rem 0 .6rem}
.prose ul{margin:0 0 1.15rem 1.1rem;display:grid;gap:.55rem;color:#37444f}
.prose a:not(.btn):not(.link-arrow){color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* checklist */
.ticks{list-style:none;display:grid;gap:.85rem}
.ticks li{position:relative;padding-left:1.95rem}
.ticks li svg{position:absolute;left:0;top:.28em;width:21px;height:21px;color:var(--teal-ink)}

/* Utilities --------------------------------------------------------------- */
.tac{text-align:center}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-0{margin-bottom:0}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(59,201,217,.14);color:var(--teal-ink);font-size:.78rem;font-weight:600;padding:.4rem .85rem;border-radius:var(--r-pill);letter-spacing:.02em}
.s-navy .pill{background:rgba(59,201,217,.16);color:var(--teal)}
.divider{height:1px;background:var(--line);border:0;margin-block:var(--section-y)}

/* Scroll reveal ----------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}

/* ==========================================================================
   IMMERSIVE HERO (ported from original cvbs-2026 build), overrides above
   ========================================================================== */
.site-header--overlay{position:fixed;left:0;right:0;top:0}
.brand .logo-light{display:none}
.site-header--overlay:not(.scrolled){background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Colour brand mark in the transparent hero header (client request, 7 Sep 2026).
   Previously the overlay header swapped to logo-white.png before scroll. The colour
   mark carries its own light outer glow, which separates it from the navy hero scrim.
   Revert = restore the two display-swap rules that were here. */
.site-header--overlay:not(.scrolled) .nav-links a{color:rgba(238,246,247,.92)}
.site-header--overlay:not(.scrolled) .nav-toggle{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
.site-header--overlay:not(.scrolled) .nav-toggle span{background:#fff}
.site-header--overlay:not(.scrolled) .nav-cta .btn--navy{background:#fff;color:var(--navy);box-shadow:0 10px 30px -14px rgba(0,0,0,.45)}
/* when mobile menu is open, force a solid header so logo/toggle/CTA stay legible */
.site-header.nav-open{background:rgba(238,246,247,.98);border-color:var(--line);box-shadow:0 10px 30px -24px rgba(10,44,82,.5)}
.site-header--overlay.nav-open .brand .logo-dark{display:block}
.site-header--overlay.nav-open .brand .logo-light{display:none}
.site-header--overlay.nav-open .nav-links a{color:#2b3946}
.site-header--overlay.nav-open .nav-toggle{background:#fff;border-color:var(--line)}
.site-header--overlay.nav-open .nav-toggle span{background:var(--navy)}
.site-header--overlay.nav-open .nav-cta .btn--navy{background:var(--navy);color:#fff}

/* Homepage brand mark: double size (client request, 27 Aug 2026).
   Scoped to the overlay header so inner pages keep the 38px mark.
   Revert = delete this block. */
.site-header--overlay .brand{flex:none}
.site-header--overlay .brand img{height:76px;flex:none;max-width:none}
.site-header--overlay .nav{height:100px}
.site-header--overlay ~ .mobile-menu{top:100px}
@media(max-width:999px){
  .site-header--overlay .brand img{height:58px}
  .site-header--overlay .nav{height:86px}
  .site-header--overlay ~ .mobile-menu{top:86px}
}
/* small-phone: single-column concierge row */
@media(max-width:420px){.brief__row{grid-template-columns:1fr}}

/* ==========================================================================
   OFFERS (teaser cards + dedicated offer landing pages)
   ========================================================================== */
.offer .media .venue-name{position:absolute;left:1.1rem;bottom:1rem;right:1.1rem;z-index:2;color:#fff;font-weight:600;font-size:1.15rem;line-height:1.2;text-shadow:0 2px 14px rgba(0,0,0,.62)}
.offer .media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.66),rgba(0,0,0,0) 60%)}
.offer .deal-line{color:var(--teal-ink);font-weight:600;margin:.5rem 0 .2rem;font-size:.95rem}
/* deal box (the hook) */
.deal-box{background:var(--navy);color:#EAF1F4;border-radius:calc(var(--r-card) + 4px);padding:clamp(1.6rem,3vw,2.6rem);box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.deal-box::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 130% at 90% 0%,rgba(59,201,217,.26),transparent 55%);pointer-events:none}
.deal-box>*{position:relative;z-index:1}
.deal-box .eyebrow{color:var(--teal)}
.deal-box .big{font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);font-weight:600;letter-spacing:-.02em;color:#fff;margin:.6rem 0 .5rem;line-height:1.1}
.deal-box .big em{color:var(--teal);font-style:normal}
.deal-box .sub{color:rgba(234,241,244,.82);max-width:54ch}
.deal-box .btn{margin-top:1.4rem}
/* spend -> perks tiers */
.perk-tiers{display:grid;gap:.6rem;margin-top:1.2rem}
.perk-tier{display:flex;justify-content:space-between;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.85rem 1.1rem}
.perk-tier .spend{font-weight:600;color:var(--text)}
.perk-tier .reward{color:var(--teal-ink);font-weight:600;font-size:.9rem;white-space:nowrap}
/* perk chips */
.perk-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:1.2rem}
@media(min-width:620px){.perk-grid{grid-template-columns:1fr 1fr}}
.perk-grid li{display:flex;gap:.6rem;align-items:flex-start;background:var(--stone);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;font-size:.93rem}
.perk-grid li svg{width:18px;height:18px;color:var(--teal-ink);flex:none;margin-top:2px}
/* date chips */
.date-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.date-chip{background:rgba(59,201,217,.12);color:var(--teal-ink);font-weight:600;border-radius:999px;padding:.55rem 1.05rem;font-size:.92rem}
/* package cards */
.pkg-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.4rem,2.4vw,2rem);box-shadow:var(--shadow-sm);height:100%}
.pkg-card .price{font-size:1.5rem;font-weight:600;color:var(--teal-ink);letter-spacing:-.02em}
.pkg-card h3{margin-bottom:.5rem}
.fine{font-size:.8rem;color:var(--muted);margin-top:1rem}
/* offer banner (top of each offer block) */
.offer-banner{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/7;box-shadow:var(--shadow-sm)}
.offer-banner img{width:100%;height:100%;object-fit:cover}
.offer-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.14) 62%)}
.offer-banner__txt{position:absolute;left:clamp(1.2rem,3vw,2.4rem);right:1.2rem;bottom:clamp(1.1rem,3vw,1.8rem);z-index:2;color:#fff}
.offer-banner__txt .tag{position:static;display:inline-block;margin-bottom:.6rem}
.offer-banner__txt h2{color:#fff;font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);line-height:1.05;margin:0;letter-spacing:-.02em}
.offer-banner__txt .loc{display:block;margin-top:.4rem;color:rgba(255,255,255,.86);font-size:.92rem;font-weight:500}
@media(max-width:600px){.offer-banner{aspect-ratio:4/3}}

.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;color:var(--white)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(160deg,#cfc6b6 0%,#54707d 45%,var(--navy) 100%)}
.hero__media .kb{position:absolute;inset:-3%;background-image:url('../img/venue-hero-1600.webp?v=202609051700');background-size:cover;background-position:30% center;will-change:transform;transform:translate3d(0,0,0) scale(1.02);animation:heroDrift 16s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:translate3d(0,0,0) scale(1.02)}to{transform:translate3d(-26px,-13px,0) scale(1.08)}}
/* Hero scrim, rebuilt 7 Sep 2026. The old three-gradient navy wash was
   directional: darkest top-left, clearing to nothing on the right. Once the
   hero was shortened the copy moved UP onto the ballroom ceiling, which is the
   brightest part of the frame, and the gradients no longer covered where the
   words land. Measured worst-case at 1300px wide, against the brightest pixel
   behind each element:
       eyebrow 1.53:1, headline 1.29:1, "sourced" 1.07:1, proofs 2.92:1
   All four failed. The nav links were failing too, at 3.56:1.
   A flat black wash at 65% clears every threshold:
       eyebrow 6.66, headline 7.18, "sourced" 3.63, proofs 7.33, nav 5.67
   The binding constraint is the teal <em>sourced</em>: it is the lightest ink
   on the brightest ground, and it needs 3:1 as large text. 62% is the floor
   (3.24) and 65% is the same wash with headroom for a future photograph.
   Do not go back to a directional gradient while the copy sits centred.
   To revert: _backup-pre-hero-overlay-07sep/. */
.hero__scrim{position:absolute;inset:0;z-index:-1;background:var(--scrim)}
.hero__inner{flex:1;width:100%;max-width:var(--container);margin:0 auto;padding:clamp(7rem,14vh,9rem) var(--gutter) clamp(2.5rem,5vh,4rem);display:grid;grid-template-columns:1fr;align-items:center;gap:clamp(2rem,4vw,3rem)}
@media(min-width:980px){.hero__inner{grid-template-columns:1.15fr .85fr}}
.lede{color:var(--white);max-width:760px}
.lede .eyebrow{color:rgba(238,246,247,.92)}
.hero h1{font-size:clamp(2.4rem,1.6rem + 4.2vw,5.4rem);font-weight:700;letter-spacing:-.032em;max-width:17ch;color:var(--white);margin:clamp(1.1rem,3vh,1.7rem) 0 0;line-height:1.02;text-shadow:0 1px 36px rgba(10,44,82,.45)}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .subhead{margin-top:clamp(1.2rem,3vh,1.8rem);font-size:clamp(1.02rem,.97rem + .4vw,1.22rem);line-height:1.6;font-weight:300;color:rgba(238,246,247,.92);max-width:48ch;text-shadow:0 1px 20px rgba(10,44,82,.4)}
.hero .subhead b{font-weight:500;color:var(--white)}
.cta-row{margin-top:clamp(1.6rem,4vh,2.4rem);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-3px)}
/* 3-icon proof strip */
.hero-proofs{margin-top:clamp(1.8rem,4vh,2.4rem);display:flex;flex-wrap:wrap;gap:clamp(1.1rem,3vw,2.2rem)}
.hero-proofs .pf{display:flex;align-items:center;gap:.6rem;color:rgba(238,246,247,.9);font-size:.92rem;font-weight:500}
.hero-proofs .pf svg{width:28px;height:28px;color:var(--teal);flex:none;stroke-width:1.5}
/* concierge form (scoped to .brief) */
.brief{color:var(--white);background:rgba(255,255,255,.1);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.22);border-radius:calc(var(--r-card)+4px);padding:clamp(1.5rem,2vw,2rem);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.brief__head{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem;font-weight:600}
.brief__title{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:1.3rem}
.brief .field{margin-bottom:1rem}
.brief .field label{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(238,246,247,.72);margin-bottom:.45rem;font-weight:600}
.brief .field select,.brief .field input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:.72rem .85rem;color:var(--white);font-family:inherit;font-size:.92rem;appearance:none}
.brief .field select option{color:var(--navy)}
.brief .field select:focus,.brief .field input:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.12);box-shadow:none}
.brief .field input::placeholder{color:rgba(238,246,247,.5)}
.brief__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:.65rem .85rem;cursor:pointer;font-size:.9rem;color:rgba(238,246,247,.85)}
.toggle .sw{width:38px;height:22px;border-radius:100px;background:rgba(255,255,255,.22);position:relative;flex:none;transition:background .3s var(--ease)}
.toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .3s var(--ease)}
.toggle.on .sw{background:var(--teal)}
.toggle.on .sw::after{transform:translateX(16px)}
.brief .btn{width:100%;margin-top:.4rem}
.brief__note{margin-top:.85rem;font-size:.72rem;line-height:1.5;color:rgba(238,246,247,.62);text-align:center}
.scroll{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(238,246,247,.6);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;animation:fadePulse 2.6s ease-in-out infinite;z-index:1;pointer-events:none}
.scroll svg{width:14px;height:20px}
@keyframes fadePulse{0%,100%{opacity:.35;transform:translate(-50%,0)}50%{opacity:.85;transform:translate(-50%,5px)}}
@media(max-width:680px){.scroll{display:none}}

/* ==========================================================================
   3D ROLLING DESTINATIONS STAGE (ported)
   ========================================================================== */
.dest-stage{position:relative;height:clamp(360px,42vw,520px);margin-top:clamp(2rem,4vh,3rem);perspective:1500px;perspective-origin:50% 50%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);mask:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.dcard{position:absolute;left:50%;top:50%;width:clamp(200px,22vw,280px);height:clamp(200px,22vw,280px);border-radius:18px;overflow:hidden;text-decoration:none;backface-visibility:hidden;transform-origin:center center;background:linear-gradient(150deg,#3a5160,var(--navy-deep));box-shadow:0 30px 60px -28px rgba(6,30,59,.75);will-change:transform,opacity}
.dcard:nth-child(2n){background:linear-gradient(150deg,#2f6e78,var(--navy-deep))}
.dcard:nth-child(3n){background:linear-gradient(150deg,#46606f,#0b2a3a)}
.dcard:nth-child(5n){background:linear-gradient(150deg,#3b5566,#0a2330)}
.dcard img{width:100%;height:100%;object-fit:cover}
.dcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.12) 55%,rgba(0,0,0,0) 100%)}
.dcard__txt{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;color:#fff}
.dcard__city{display:block;font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
.dcard__count{display:block;font-size:.78rem;color:rgba(238,246,247,.82);margin-top:.2rem}
@media(max-width:680px){
  .dest-stage{display:grid!important;grid-template-columns:1fr 1fr;gap:.7rem;height:auto!important;padding-inline:var(--gutter);perspective:none;overflow:visible;-webkit-mask:none;mask:none}
  .dest-stage .dcard{position:relative!important;left:auto!important;top:auto!important;transform:none!important;opacity:1!important;width:100%;height:auto;aspect-ratio:1;z-index:auto!important;border-radius:14px}
  .dest-stage .dcard:nth-child(n+7){display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__media .kb{animation:none}
  .dest-stage{display:flex;gap:1rem;height:auto!important;overflow-x:auto;perspective:none;-webkit-mask:none;mask:none}
  .dest-stage .dcard{position:relative!important;left:auto!important;top:auto!important;transform:none!important;opacity:1!important;flex:0 0 240px;height:240px}
}

/* ==========================================================================
   MULTI-STEP BRIEF WIZARD
   ========================================================================== */
.wiz-progress{display:flex;gap:.5rem;margin-bottom:1.8rem}
.wiz-progress .dot{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .3s}
.wiz-progress .dot.active{background:var(--teal)}
.wiz-step{display:none}
.wiz-step.active{display:block;animation:rise .5s var(--ease) both}
.wiz-nav{display:flex;gap:.8rem;margin-top:1.6rem}
.wiz-nav .btn{flex:1}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(min-width:560px){.check-grid{grid-template-columns:1fr 1fr 1fr}}
.check{position:relative;display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;cursor:pointer;font-size:.92rem;background:var(--stone);transition:border-color .25s,background .25s}
.check:hover{border-color:var(--teal-ink)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:20px;height:20px;border:1.5px solid var(--line);border-radius:6px;flex:none;display:grid;place-items:center;transition:background .2s,border-color .2s}
.check .box svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity .2s}
.check input:checked ~ .box{background:var(--teal);border-color:var(--teal)}
.check input:checked ~ .box svg{opacity:1}
.check input:focus-visible ~ .box{outline:3px solid var(--brand);outline-offset:2px}
.inline-check{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--muted);margin-top:.4rem;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   EDITORIAL EVOLUTION  (Inter + existing palette; composition & rhythm only)
   ========================================================================== */
.pad-xl{padding-block:clamp(5rem,11vw,9rem)}
.pad-sm{padding-block:clamp(1.9rem,4vw,3rem)}

/* quiet trust line (left-aligned, understated) */
.trustline{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,3.5vw,2.8rem)}
.trustline .lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;flex:none}
.trustline .logos{justify-content:flex-start;gap:clamp(1.3rem,3.2vw,2.8rem);flex:1}
.trustline .logos img{height:28px;opacity:1}
.trustline .logos img:hover{opacity:1}

/* decades — asymmetric oversized numbers */
.decades{display:grid;gap:clamp(2.2rem,5vw,4rem)}
@media(min-width:920px){.decades{grid-template-columns:1.05fr .95fr;align-items:center}}
.decades .year{font-size:clamp(4.5rem,2rem + 11vw,10.5rem);line-height:.8;letter-spacing:-.045em;font-weight:700;color:var(--navy)}
.decades .year-cap{margin-top:1.3rem;max-width:34ch;color:var(--muted);font-size:1.08rem;line-height:1.6}
.dfacts{border-top:1px solid var(--line)}
.dfact{padding:clamp(1.1rem,2.6vw,1.7rem) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(4.5rem,max-content) 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.dfact .n{font-size:clamp(1.45rem,1.2rem + 1.1vw,1.95rem);font-weight:700;color:var(--teal-ink);letter-spacing:-.02em;white-space:nowrap}
.dfact .k b{display:block;color:var(--navy);font-weight:600;font-size:1rem}
.dfact .k span{color:var(--muted);font-size:.92rem}

/* concierge flow — staggered, not cards */
.flow{counter-reset:f;margin-top:clamp(1.5rem,3vw,2.5rem);max-width:1020px}
.flow-step{display:grid;gap:.4rem;padding:clamp(1.5rem,3.2vw,2.5rem) 0;border-bottom:1px solid var(--line)}
.flow-step:last-child{border-bottom:0}
@media(min-width:780px){
  .flow-step{grid-template-columns:auto 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
  .flow-step:nth-child(even){margin-left:clamp(2rem,9vw,8rem)}
}
.flow-step .fi{counter-increment:f;font-size:clamp(2.4rem,1.6rem + 3vw,4.2rem);line-height:.78;font-weight:700;color:var(--teal-ink);letter-spacing:-.03em}
.flow-step .fi::before{content:"0" counter(f)}
.flow-step h3{font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);letter-spacing:-.01em}
.flow-step p{color:var(--muted);max-width:56ch;margin-top:.25rem}

/* services — offset split, list not cards */
.svc-split{display:grid;gap:clamp(2rem,5vw,4rem)}
@media(min-width:900px){.svc-split{grid-template-columns:.82fr 1.18fr;align-items:start}
  .svc-split .svc-intro{position:sticky;top:108px}}
.svc-list{border-top:1px solid var(--line)}
.svc-item{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,2.4vw,1.6rem);align-items:center;padding:clamp(1.25rem,2.8vw,1.95rem) 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease)}
.svc-item:hover{padding-left:.5rem}
.svc-item .si{color:var(--teal-ink);display:grid;place-items:center}
.svc-item .si svg{width:30px;height:30px}
.svc-item h3{font-size:clamp(1.18rem,1.05rem + .7vw,1.5rem)}
.svc-item p{color:var(--muted);font-size:.95rem;margin-top:.15rem;max-width:50ch}
.svc-item .sa{color:var(--teal-ink);transition:transform .35s var(--ease);flex:none}
.svc-item:hover .sa{transform:translateX(5px)}

/* people / team */
.people{display:grid;gap:clamp(2.4rem,5vw,4rem)}
@media(min-width:920px){.people{grid-template-columns:.92fr 1.08fr;align-items:start}}
.team-row{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.3rem,3vw,2rem)}
@media(min-width:600px){.team-row{grid-template-columns:repeat(2,1fr);max-width:420px}}
@media(min-width:760px){.team-row--4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1160px;gap:clamp(1rem,2vw,1.6rem)}}
.tm .pf{aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:linear-gradient(165deg,var(--navy),var(--teal-deep));display:grid;place-items:center;margin-bottom:.85rem}
.tm .pf img{width:100%;height:100%;object-fit:cover}
.tm .mono{font-size:1.9rem;font-weight:700;color:rgba(255,255,255,.92);letter-spacing:.02em}
.tm .nm{font-weight:600}
.tm .rl{color:var(--muted);font-size:.88rem}

/* editorial testimonials */
.testi-lead{max-width:1020px}
.testi-lead q{display:block;quotes:none;font-size:clamp(1.45rem,1.05rem + 2.1vw,2.55rem);line-height:1.26;letter-spacing:-.01em;color:var(--navy)}
.testi-lead q::before{content:"\201C"}.testi-lead q::after{content:"\201D"}
.testi-by{margin-top:1.6rem;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.testi-by img{height:28px;width:auto}
.testi-by .nm{font-weight:600;font-size:.97rem}
.testi-by .rl{color:var(--muted);font-size:.9rem}
.testi-sub{margin-top:clamp(2.4rem,5vw,3.5rem);padding-top:clamp(1.9rem,4vw,2.5rem);border-top:1px solid var(--line);max-width:660px;margin-left:auto}
.testi-sub q{display:block;quotes:none;font-size:1.12rem;line-height:1.55;color:var(--navy)}
.testi-sub q::before{content:"\201C"}.testi-sub q::after{content:"\201D"}
.testi-sub .testi-by{margin-top:1rem}

/* magazine offers — mixed sizes */
.offers-mag{display:grid;gap:clamp(1.1rem,2.2vw,1.5rem)}
@media(min-width:900px){.offers-mag{grid-template-columns:1.5fr 1fr;align-items:stretch}
  .offers-mag .offer--lead{grid-row:span 2}
  .offers-mag .offer--lead .media{height:100%;min-height:360px;aspect-ratio:auto}
  .offers-mag .offer--lead .body h3{font-size:1.55rem}}
.offer .venue-name{position:absolute;left:.9rem;bottom:.85rem;right:.9rem;color:#fff;font-weight:600;font-size:1.05rem;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.offer .loc{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* about — belief list in two columns off the page rail */
.ticks--2{padding:0;max-width:1120px;margin:0 0 1.6rem}
.ticks--2 li{margin:0}
.ticks--2 li::marker{content:""}
@media(min-width:880px){.ticks--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,4vw,3.4rem);row-gap:1.1rem}}

/* prose component fixes — keep ticks + arrow links clean inside editorial prose */
.prose .ticks{list-style:none;margin:1.4rem 0 1.7rem;padding:0;gap:.9rem}
.prose .ticks li{margin:0}
.prose .ticks li::marker{content:""}
.prose a.link-arrow{text-decoration:none}

/* photographic interior header (opt-in via page_hero img=...) */
.page-hero--img{background:var(--navy);color:#EAF1F4;border-bottom:0;position:relative;overflow:hidden}
.page-hero--img .ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:0}
.page-hero--img::after{content:"";position:absolute;inset:0;z-index:1;background:var(--scrim)}
.page-hero--img .wrap{position:relative;z-index:2;padding-block:clamp(4rem,9vw,7rem)}
.page-hero--img h1{color:#fff;font-size:clamp(2.3rem,5.2vw,3.7rem);line-height:1.06;letter-spacing:-.02em;max-width:18ch}
.page-hero--img .lead{color:rgba(255,255,255,.86)}
.page-hero--img .eyebrow{color:rgba(238,246,247,.92)}
.page-hero--img .crumbs,.page-hero--img .crumbs a{color:rgba(255,255,255,.72)}
.page-hero--img .link-arrow{color:#fff}

/* destinations hub — image-backed city cards */
/* Destination cards. Rebuilt 6 Sep 2026. The overlay version put white body
   copy on the bright half of a photograph, so Sydney, Melbourne and Brisbane
   were close to unreadable, and the nine cities with no photograph were a
   different species of card. Media block on top, solid body underneath, one
   structure whether the media is a photograph or the precinct panel. */
.city-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-card);
  overflow:hidden;isolation:isolate;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.city-card__media{position:relative;aspect-ratio:16/10;background:var(--navy);overflow:hidden;flex:none}
.city-card__media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.city-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--teal-ink)}
.city-card:hover .city-card__media img{transform:scale(1.06)}
.city-card__body{flex:1;display:flex;flex-direction:column;
  padding:clamp(1.15rem,2.2vw,1.45rem);color:var(--text)}
.city-card__body h3{color:var(--navy);font-size:1.22rem;line-height:1.2;letter-spacing:-.015em}
.city-card__body p{color:#4a5762;font-size:.92rem;margin-top:.4rem;line-height:1.5}
.city-card__body .link-arrow{color:var(--teal-ink);margin-top:auto;padding-top:1rem;
  font-weight:600;font-size:.92rem}
.city-card__body .link-arrow svg{transition:transform .3s var(--ease)}
.city-card:hover .link-arrow svg{transform:translateX(4px)}

/* destination featured venue cards (image + body) */
.vcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.vcard__img{position:relative;aspect-ratio:16/10;background:var(--stone-deep);overflow:hidden}
.vcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vcard:hover .vcard__img img{transform:scale(1.05)}
.vcard__ph{position:absolute;inset:0;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 1.2rem;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;line-height:1.25}
.vcard__body{padding:1.2rem 1.3rem 1.4rem}
.vcard__meta{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);font-weight:600;margin:.4rem 0 .65rem}
.vcard__body .muted{font-size:.95rem;line-height:1.5}

/* destination decision-logic list */
.dl{border-top:1px solid var(--line)}
.dl-row{display:grid;gap:.25rem 1.5rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
@media(min-width:620px){.dl-row{grid-template-columns:.95fr 1.05fr;align-items:baseline}}
.dl-need{font-weight:600;color:var(--navy)}
.dl-pick{color:var(--muted)}

/* destination featured venues — editorial alternating rows */
.vfeat{display:grid;gap:clamp(2.5rem,6vw,5rem);margin-top:clamp(1rem,3vw,2rem)}
.vrow{display:grid;gap:clamp(1.4rem,4vw,3.5rem);align-items:center}
@media(min-width:860px){
  .vrow{grid-template-columns:1fr 1fr}
  .vrow.alt .vrow__media{order:2}
}
.vrow__media{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--stone-deep);box-shadow:var(--shadow-sm)}
.vrow__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.vrow:hover .vrow__media img{transform:scale(1.04)}
.vrow__ph{position:absolute;inset:0;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 1.5rem;font-weight:600;font-size:1.1rem;line-height:1.25}
.vrow__num{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink);font-weight:600}
.vrow__name{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.45rem);letter-spacing:-.02em;line-height:1.05;margin:.55rem 0 .5rem}
.vrow__meta{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:1.1rem}
.vrow__desc{color:var(--muted);max-width:48ch;line-height:1.6}
.vrow .link-arrow{margin-top:1.3rem}

/* interactive budget calculator */
.calc{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media(min-width:900px){.calc{grid-template-columns:1.05fr .95fr;align-items:start}.calc__out{position:sticky;top:100px}}
.calc__inputs .field{margin-bottom:1.2rem}
.calc label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.45rem;color:var(--navy)}
.calc input[type=number],.calc select{width:100%;background:var(--stone);border:1px solid var(--field-line,#D8D2C4);border-radius:10px;padding:.75rem .9rem;font:inherit;color:var(--text);transition:border-color .25s var(--ease),background .25s var(--ease)}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--teal);background:#fff}
.calc input:disabled{opacity:.45}
.calc select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E747B' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.2rem}
.calc .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.calc .toggle-row{display:flex;align-items:center;gap:.6rem;cursor:pointer}
.calc .toggle-row input{width:18px;height:18px;accent-color:var(--teal-ink);cursor:pointer;margin:0}
.calc__out{background:var(--navy);color:#EAF1F4;border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.1rem);box-shadow:var(--shadow-md)}
.calc__out .eyebrow{color:var(--teal)}
.calc__total{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.7rem);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.05;margin-top:.7rem}
.calc__sub{color:rgba(234,241,244,.72);font-size:.92rem;margin-top:.4rem}
.calc__rows{margin:1.4rem 0 .4rem;border-top:1px solid rgba(255,255,255,.14)}
.calc__r{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.92rem;color:rgba(234,241,244,.82)}
.calc__r span:last-child{color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc__note{font-size:.8rem;color:rgba(234,241,244,.6);line-height:1.55;margin:1rem 0}

/* mobile: collapse the hero concierge form to a compact CTA strip */
@media(max-width:640px){
  .brief{padding:1.25rem 1.35rem}
  .brief__head{margin-bottom:.4rem}
  .brief__title{font-size:1.25rem;margin-bottom:1rem}
  .brief .field,.brief__row{display:none}
  .brief .btn{margin-top:0}
}

/* mobile hero strip: tap-to-call line */
.brief__call{display:none;align-items:center;justify-content:center;gap:.5rem;margin-top:.9rem;color:rgba(238,246,247,.9);font-size:.86rem;font-weight:600}
.brief__call svg{width:16px;height:16px;color:var(--teal)}
@media(max-width:640px){.brief__note{display:none}.brief__call{display:flex}}

/* mobile: tidy the trust logo strip (label wraps, logos in even bordered cells) */
@media(max-width:640px){
  .trustline{flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
  .trustline .lbl{letter-spacing:.12em;font-size:.66rem;flex:none;line-height:1.4}
  .trustline .logos{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;width:100%;flex:none}
  .trustline .logos img{height:52px;width:100%;max-width:none;object-fit:contain;border:1px solid var(--line);border-radius:10px;padding:.55rem 1rem;background:#fff}
  .trustline .logos img:hover{opacity:1;transform:none}
}

.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* centered hero + horizontal brief bar (preview only: index-strip.html) */
.hero--center .hero__inner{grid-template-columns:1fr;justify-items:center;text-align:center}
.hero--center .lede{max-width:840px}
/* 7 Sep 2026: .hero h1 max-width:17ch was cutting the headline mid-sentence and
   orphaning the last word. The centred hero balances its own rag instead, so the
   shape stays right whatever the headline says. */
.hero--center h1{max-width:none;margin-inline:auto}
.hero--center .eyebrow,.hero--center .cta-row,.hero--center .hero-proofs{justify-content:center}
.hero--center .subhead{margin-inline:auto}
.hero--center .scroll{display:none}
.brief-bar{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-md);margin-top:clamp(-3.5rem,-5vw,-2.5rem);position:relative;z-index:5;padding:clamp(1rem,2vw,1.4rem)}
.brief-bar__row{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:.85rem;align-items:end}
.brief-bar .bf label{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.4rem}
.brief-bar .bf select,.brief-bar .bf input{width:100%;border:1px solid var(--line);border-radius:10px;padding:.72rem .8rem;font:inherit;font-size:.92rem;background:var(--stone);color:var(--text);appearance:none}
/* 7 Sep 2026: attendees is typed, so the row now mixes a placeholder with two
   selects. Unchosen selects carry .is-empty so all three read as empty at the
   same weight, instead of two looking already answered. */
.brief-bar .bf input::placeholder{color:#8E8D85;opacity:1}
.brief-bar .bf select.is-empty{color:#8E8D85}
.brief-bar .bf select:focus,.brief-bar .bf input:focus{outline:none;border-color:var(--teal-ink);background:#fff;box-shadow:0 0 0 3px rgba(50,217,243,.40)}
.brief-bar__go{white-space:nowrap;align-self:end}
.value-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;border-top:1px solid var(--line);margin-top:1.1rem;padding-top:1.1rem}
.vi{display:flex;gap:.7rem;align-items:flex-start}
.vi svg{width:22px;height:22px;color:var(--teal-ink);flex:none;margin-top:2px}
.vi b{display:block;font-size:.92rem;color:var(--navy)}
.vi span{font-size:.84rem;color:var(--muted)}
@media(max-width:820px){.brief-bar__row{grid-template-columns:1fr 1fr}.brief-bar__go{grid-column:1 / -1}.value-row{grid-template-columns:1fr 1fr;gap:.85rem 1rem}}
.brief-bar .brief-bar__mcta{display:none}
@media(max-width:680px){.brief-bar__row{display:none}.brief-bar .brief-bar__mcta{display:flex;width:100%;justify-content:center;margin-top:.2rem}}

.hero .subhead--bold{font-weight:600;color:rgba(255,255,255,.97)}

.logo-marquee{position:relative;overflow:hidden;margin-top:1.4rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;align-items:center;width:max-content;animation:logoMarquee 40s linear infinite;will-change:transform}
.logo-track img{height:34px;width:auto;flex:none;margin-right:clamp(2.6rem,6vw,5rem);opacity:.92}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}
@media(max-width:820px){.logo-track img{height:30px;margin-right:2.4rem}}

/* 10 Sep 2026: the stack ran the full container, so a 54ch paragraph left
   roughly half of every card empty and the band read as four blank slabs.
   Capped at 1020px so the copy fills the card it sits in. */
.proc-stack{margin-top:clamp(2rem,5vw,3.4rem);max-width:1020px}
/* 8 Sep 2026: the card was --stone #EEF6F7 sitting on an .s-white section,
   1.06:1 of separation, so the panels read as smudges and the mint ended up
   dominating the whole band. The card is white everywhere now and is defined
   by EDGE plus ELEVATION instead of tint. The old single shadow was
   -38px spread and 30px down, so it had almost nothing at the card edge,
   which is exactly where a sticky stack needs it as one card slides over the
   one before. Three layers: a contact hairline, a mid lift, a deep pool.
   The four service pages already had white cards via .s-stone, so only the
   homepage ground changes. */
.pcard{position:sticky;top:calc(120px + var(--i)*22px);background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(2rem,4vw,3.4rem);margin-bottom:clamp(1.4rem,3vw,2.2rem);box-shadow:0 1px 2px rgba(10,44,82,.07),0 14px 28px -14px rgba(10,44,82,.20),0 44px 70px -44px rgba(10,44,82,.38);display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3.2rem);align-items:center;min-height:clamp(200px,24vh,244px)}
/* 10 Sep 2026: the numeral was navy at 55 percent, which read as grey and
   left the card with no colour and no dark mass, so the whole band went
   flat. Teal glyphs on white were not an option: #32D9F3 on #fff measures
   about 1.6:1 and looks washed out at any size, which is why the 8 Sep pass
   moved off teal in the first place. The fix keeps the rule that teal is a
   FILL on light grounds by giving the numeral its own ground instead: a
   navy tile carrying the button teal. That is 8.4:1, uses the one teal
   already on the page, and puts the only dark element in the band down the
   left edge of the stack, so the four steps read as a sequence as they
   slide over each other. */
.pcard__n{width:clamp(72px,8.5vw,102px);aspect-ratio:1;display:grid;place-items:center;justify-self:start;border-radius:18px;background:var(--navy);color:var(--teal-btn);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;box-shadow:0 10px 22px -12px rgba(10,44,82,.55)}
.pcard__body h3{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;margin-bottom:.7rem;color:var(--navy)}
.pcard__body p{font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.6;color:var(--muted);max-width:54ch}
.pcard:last-child{margin-bottom:0}
/* cards must always sit lighter than the ground they stack on: stone card on white section (homepage), white card on stone section (service pages) */
/* .s-stone .pcard override removed 8 Sep 2026: .pcard is white everywhere now. */
@media(max-width:680px){.pcard{grid-template-columns:1fr;gap:1.1rem;top:calc(86px + var(--i)*16px);min-height:0}.pcard__n{width:62px;font-size:1.55rem;border-radius:15px}}
@media(prefers-reduced-motion:reduce){.pcard{position:static}}

/* Process rail (home) ------------------------------------------------------
   Added 13 Sep 2026. Replaces the sticky .pcard stack on index.html only.
   A navy spine draws with the scroll between the first and last numeral,
   each step pops its numeral and slides its card in once. Scroll driven,
   no library. Behaviour lives in the "Process rail" block of site.js.
   The .pcard stack is still in use on the four service pages, leave it.
-------------------------------------------------------------------------- */
.prail{position:relative;max-width:1020px;margin-top:clamp(2rem,5vw,3.4rem)}
.prail__track{position:absolute;left:26px;top:0;height:100%;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.prail__fill{position:absolute;inset:0;border-radius:2px;transform:scaleY(0);transform-origin:top center;will-change:transform;background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 88%,var(--teal-btn) 100%)}
.prail__steps{position:relative;display:flex;flex-direction:column;gap:clamp(2.4rem,5vw,4rem)}
.prail__step{position:relative;display:grid;grid-template-columns:54px 1fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:start}
.prail__n{grid-column:1;width:54px;height:54px;margin-top:.35rem;border-radius:16px;display:grid;place-items:center;z-index:1;background:#fff;border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums;transform:scale(.6);transition:transform .4s cubic-bezier(.34,2.1,.64,1),background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
@supports (transition-timing-function:linear(0,1)){.prail__n{transition-timing-function:linear(0,.4735 10%,.808 20%,1.0245 30%,1.144 40%,1.1875 50%,1.176 60%,1.1305 70%,1.072 80%,1.0215 90%,1)}}
.prail__card{grid-column:2;justify-self:start;max-width:44rem;opacity:0;transform:translateX(32px);will-change:transform,opacity;background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(1.5rem,3vw,2.1rem) clamp(1.5rem,3vw,2.4rem);box-shadow:0 1px 2px rgba(10,44,82,.07),0 14px 28px -14px rgba(10,44,82,.18);transition:transform .65s cubic-bezier(.25,1,.5,1) .05s,opacity .65s cubic-bezier(.25,1,.5,1) .05s}
.prail__when{display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--teal-ink)}
.prail__card h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;color:var(--navy);margin:.55rem 0 .6rem}
.prail__card p{font-size:clamp(1rem,1.4vw,1.08rem);line-height:1.6;color:var(--muted);margin:0;max-width:56ch}
.prail__step.in .prail__n{transform:scale(1);background:var(--navy);border-color:var(--navy);color:var(--teal-btn);box-shadow:0 10px 22px -12px rgba(10,44,82,.55)}
.prail__step.in .prail__card{opacity:1;transform:translateX(0)}
@media(max-width:680px){
  .prail__track{left:19px}
  .prail__steps{gap:2rem}
  .prail__step{grid-template-columns:40px 1fr;gap:1rem}
  .prail__n{width:40px;height:40px;margin-top:.2rem;border-radius:12px;font-size:.95rem}
  .prail__card{padding:1.3rem 1.4rem;border-radius:18px;transform:translateX(24px)}
}
@media(prefers-reduced-motion:reduce){
  .prail__fill{transform:scaleY(1)}
  .prail__n,.prail__card{transition:none}
  .prail__card{opacity:1;transform:none}
  .prail__n{transform:scale(1);background:var(--navy);border-color:var(--navy);color:var(--teal-btn)}
}

.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,1.8rem);margin-top:clamp(2rem,4vw,3rem)}
.offer{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -40px rgba(10,44,82,.45);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.offer:hover{transform:translateY(-5px);box-shadow:0 34px 64px -42px rgba(10,44,82,.5)}
.offer__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.offer__tag{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal-ink);background:rgba(59,201,217,.12);border:1px solid rgba(59,201,217,.3);padding:.32rem .6rem;border-radius:999px;white-space:nowrap}
.offer__loc{font-size:.78rem;color:var(--muted);text-align:right;line-height:1.3}
.offer__deal{font-size:clamp(1.22rem,1.8vw,1.5rem);line-height:1.18;color:var(--navy);font-weight:600;margin-bottom:.45rem;letter-spacing:-.01em}
.offer__venue{font-size:.9rem;color:var(--teal-ink);font-weight:600;margin-bottom:1.2rem}
.offer__hook{font-size:1rem;line-height:1.5;color:var(--navy-deep);font-weight:500;margin-bottom:1.1rem}
.offer__list{list-style:none;display:grid;gap:.6rem;margin:0 0 1.4rem;padding:0}
.offer__list li{position:relative;padding-left:1.5rem;font-size:.92rem;line-height:1.5;color:var(--muted)}
.offer__list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.offer__foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.offer__valid{font-size:.78rem;color:var(--muted);max-width:14ch;line-height:1.35}
@media(max-width:900px){.offer-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

.offer__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.offer__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.offer__pin{position:absolute;left:.85rem;top:.8rem;z-index:1;font-size:.74rem;font-weight:600;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:.3rem .65rem;border-radius:999px}
.offer__pad{display:flex;flex-direction:column;flex:1;padding:clamp(1.4rem,2.4vw,1.9rem)}
.offer__pad .offer__tag{align-self:flex-start;margin-bottom:.85rem}

.v-strip .eyebrow::before{display:none}

.offer__logo{position:absolute;left:.9rem;bottom:.9rem;z-index:2;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;padding:.55rem .85rem;height:74px;min-width:96px;max-width:68%;box-shadow:0 10px 24px -8px rgba(10,44,82,.5)}
.offer__logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain;display:block}

.brief-bar__head{margin-bottom:clamp(1.1rem,2vw,1.5rem);padding-bottom:clamp(1.1rem,2vw,1.4rem);border-bottom:1px solid var(--line)}
.brief-bar__head h2{font-size:clamp(1.2rem,1.9vw,1.55rem);color:var(--navy);line-height:1.15;margin:.45rem 0 .4rem}
.brief-bar__lead{font-size:clamp(.92rem,1.1vw,1rem);color:var(--muted);line-height:1.55;max-width:64ch}
@media(max-width:820px){.brief-bar__head{margin-bottom:1rem;padding-bottom:1rem}}

/* v-pro */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.6rem);text-align:center}
.stat-x{display:flex;flex-direction:column;gap:.45rem}
.stat-x__n{font-size:clamp(2.4rem,5vw,3.5rem);font-weight:700;color:var(--teal);line-height:1;letter-spacing:-.02em}
.stat-x__n--word{font-size:clamp(1.9rem,3.6vw,2.5rem)}
.stat-x__l{font-size:.85rem;color:rgba(238,246,247,.82);line-height:1.45;max-width:22ch;margin:0 auto}
@media(max-width:760px){.stat-strip{grid-template-columns:repeat(2,1fr);gap:1.9rem}}
.v-pro .stars{color:#E0B341;letter-spacing:3px;font-size:1.02rem;margin-bottom:.7rem}
.v-pro .v-quote__hi{font-size:clamp(1.45rem,2.7vw,2.05rem);line-height:1.24;font-weight:600;color:var(--navy);max-width:26ch;margin:0 0 1rem;letter-spacing:-.01em}
.v-pro .testi-sub .v-quote__hi{font-size:clamp(1.25rem,2.1vw,1.6rem)}
.v-pro .testi-lead q,.v-pro .testi-sub q{font-size:1rem;line-height:1.6;color:var(--muted);font-style:normal;display:block;max-width:64ch}
.v-pro .offer__media img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.v-pro .offer:hover .offer__media img{transform:scale(1.06)}
.v-pro .dcard img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.v-pro .dcard:hover img{transform:scale(1.06)}
.v-pro .foot-trust{margin:.4rem 0 1.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;color:rgba(255,255,255,.72);text-align:center;letter-spacing:.01em;line-height:1.7}
@media(prefers-reduced-motion:reduce){.v-pro .offer__media img,.v-pro .dcard img{transition:none}}

.offer__brandrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:30px;margin-bottom:1rem}
.offer .offer__brand{height:30px;max-height:30px;width:auto;max-width:48%;object-fit:contain;object-position:left center;display:block}
.offer .offer__brand--text{height:auto;max-height:none;font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--navy);line-height:1.2}
@media(max-width:680px){.offer .offer__brand{height:26px;max-height:26px;max-width:52%}}
.offer__brandrow .offer__tag{margin-bottom:0}
.offer__pad .offer__tag{margin-bottom:0}


.qcard{max-width:760px;margin:clamp(1.5rem,3vw,2.5rem) auto 0;text-align:center}
.qcard .stars{color:#E0B341;letter-spacing:3px;font-size:1.05rem;margin-bottom:.9rem}
.qcard__hi{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.25;font-weight:600;color:var(--navy);margin:0 auto 1.1rem;max-width:26ch;letter-spacing:-.01em}
.qcard q{display:block;font-style:normal;font-size:1.02rem;line-height:1.6;color:var(--muted);max-width:62ch;margin:0 auto 1.4rem}
.qcard__by{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.qcard__by img{height:26px;width:auto;margin-bottom:.5rem;opacity:.9}
.qcard__by .nm{font-weight:600;color:var(--navy);font-size:.95rem}
.qcard__by .rl{font-size:.85rem;color:var(--muted)}

.venue-marquee{position:relative;overflow:hidden;margin-top:clamp(2rem,4vw,3rem);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.venue-track{display:flex;width:max-content;animation:venueMarquee 125s linear infinite;will-change:transform}
.venue-marquee:hover .venue-track{animation-play-state:paused}
/* Fixed height, natural width. Every frame keeps its own ratio: the visit library
   is mostly portrait and a 4/3 tile was cropping half of it away. 7 Sep 2026. */
.vshow{position:relative;flex:none;height:clamp(210px,26vw,290px);width:auto;max-width:none;margin-right:clamp(1rem,2vw,1.5rem);border-radius:16px;overflow:hidden;box-shadow:0 22px 44px -30px rgba(10,44,82,.5);background:var(--stone-deep)}
.vshow img{height:100%;width:auto;max-width:none;aspect-ratio:auto;object-fit:contain;display:block;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.vshow:hover img{transform:scale(1.04)}
.vshow figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .95rem .85rem;color:#fff;font-weight:600;font-size:.95rem;background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,0))}
@keyframes venueMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.venue-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:1rem}}
@media(max-width:680px){.vshow{height:200px}}
/* Venue-visit tiles inside the marquee. Added 7 Sep 2026. */
a.vshow{display:block;text-decoration:none;color:inherit}
a.vshow:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px}
.vshow--seen::before{content:"Inspected by CVBS";position:absolute;top:.7rem;left:.7rem;z-index:2;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--scrim);padding:.34rem .62rem;border-radius:999px}

.svc-feature{width:100%;border-radius:18px;aspect-ratio:4/5;object-fit:cover;display:block;box-shadow:0 26px 52px -34px rgba(10,44,82,.5)}
@media(max-width:820px){.svc-feature{aspect-ratio:16/10}}
.svc-photo-card{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -34px rgba(10,44,82,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.svc-photo-card:hover{transform:translateY(-5px);box-shadow:0 30px 56px -40px rgba(10,44,82,.5)}
.svc-photo-card .spc-media{aspect-ratio:16/10;overflow:hidden}
.svc-photo-card .spc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.svc-photo-card:hover .spc-media img{transform:scale(1.06)}
.svc-photo-card .spc-body{padding:1.1rem 1.25rem 1.35rem}
.svc-photo-card .spc-body h3{color:var(--navy)}

.mock-shot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;display:block;box-shadow:0 22px 44px -30px rgba(10,44,82,.5)}

.logos--trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.4rem,3vw,2.6rem);margin-top:1.6rem;max-width:915px;margin-inline:auto}
.logos--trust img{height:auto;width:auto;max-height:34px;max-width:min(140px,100%);object-fit:contain;opacity:1;transition:transform .3s var(--ease)}
.logos--trust img:hover{transform:translateY(-3px)}

/* Per-brand optical sizing for the client logo walls. Wordmarks and square marks
   sit at very different widths at a shared height, so each is capped to read at
   the same visual weight. Updated 10 Sep 2026 with the current client set. */
.logos--wall img[src*="astrazeneca"],.logos--trust img[src*="astrazeneca"]{max-height:30px}
.logos--wall img[src*="merck"],.logos--trust img[src*="merck"]{max-height:23px}
.logos--wall img[src*="sandvik"],.logos--trust img[src*="sandvik"]{max-height:27px}
.logos--wall img[src*="abbvie"],.logos--trust img[src*="abbvie"]{max-height:26px}
.logos--wall img[src*="abundium"],.logos--trust img[src*="abundium"]{max-height:26px;max-width:min(150px,100%)}
.logos--wall img[src*="aspen"],.logos--trust img[src*="aspen"]{max-height:32px}
.logos--wall img[src*="bdo"],.logos--trust img[src*="bdo"]{max-height:30px}
.logos--wall img[src*="lend-lease"],.logos--trust img[src*="lend-lease"]{max-height:30px}
.logos--wall img[src*="randstad"],.logos--trust img[src*="randstad"]{max-height:40px;max-width:54px}
.logos--wall img[src*="edwards"],.logos--trust img[src*="edwards"]{max-height:36px;max-width:36px}
.logos--wall img[src*="hungry-jacks"],.logos--trust img[src*="hungry-jacks"]{max-height:44px;max-width:44px}
.logos--wall img[src*="bausch"],.logos--trust img[src*="bausch"]{max-height:27px;max-width:min(165px,100%)}

/* Venue and hotel groups band - suppliers, not clients, so it sits quieter. */
.logos--venues{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.6rem,4vw,3.2rem);margin-top:1.6rem;max-width:900px;margin-inline:auto}
.logos--venues img{height:auto;width:auto;max-height:30px;max-width:min(130px,100%);object-fit:contain}
.logos--venues img[src*="peppers"]{max-height:40px}
.logos--venues img[src*="qt"]{max-height:36px}
.logos--venues img[src*="ihg"]{max-height:36px}

@media(max-width:680px){
  .logos--trust{gap:1.4rem 1.8rem}
  .logos--trust img,.logos--wall img{max-height:26px;max-width:min(120px,100%)}
  .logos--trust img[src*="randstad"],.logos--wall img[src*="randstad"]{max-height:32px;max-width:44px}
  .logos--trust img[src*="edwards"],.logos--wall img[src*="edwards"]{max-height:28px;max-width:28px}
  .logos--trust img[src*="hungry-jacks"],.logos--wall img[src*="hungry-jacks"]{max-height:34px;max-width:34px}
  .logos--trust img[src*="merck"],.logos--wall img[src*="merck"]{max-height:19px}
  .logos--venues img{max-height:24px}
  .logos--venues img[src*="peppers"]{max-height:32px}
  .logos--venues img[src*="qt"]{max-height:29px}
  .logos--venues img[src*="ihg"]{max-height:29px}
}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sub-band{background:var(--navy-deep);color:#fff;padding:clamp(2.4rem,5vw,3.6rem) 0;border-top:1px solid rgba(255,255,255,.08)}
.sub-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.sub-band .eyebrow{color:var(--teal)}
.sub-band .eyebrow::before{background:var(--teal)}
.sub-title{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.16;color:#fff;margin:.5rem 0 .55rem;letter-spacing:-.01em}
.sub-lead{color:rgba(255,255,255,.72);font-size:.98rem;line-height:1.55;max-width:48ch}
.sub-row{display:flex;gap:.6rem}
.sub-form input[type=email]{flex:1;min-width:0;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:.9rem 1rem;font:inherit;font-size:1rem;transition:border-color .25s,background .25s}
.sub-form input[type=email]:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.1)}
.sub-form input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.sub-form .btn{white-space:nowrap}
.sub-fine{color:rgba(255,255,255,.5);font-size:.78rem;margin-top:.75rem}
.sub-ok{color:var(--teal);font-weight:600;font-size:1rem;margin-top:.4rem}
.form-error{color:#ffd1d1;font-size:.84rem;line-height:1.5;margin-top:.75rem}
.form-error a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){.sub-inner{grid-template-columns:1fr;gap:1.3rem}.sub-row{flex-direction:column}.sub-form .btn{width:100%}}
/* strong variant: light card on the offers page */
.sub-band--strong{background:var(--stone);color:var(--navy);border-top:0;padding:clamp(2.6rem,5vw,4rem) 0}
.sub-band--strong .sub-inner{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(1.8rem,4vw,2.8rem);box-shadow:0 26px 52px -40px rgba(10,44,82,.4)}
.sub-band--strong .sub-title{color:var(--navy)}
.sub-band--strong .eyebrow{color:var(--brand)}
.sub-band--strong .eyebrow::before{background:var(--teal)}
.sub-band--strong .sub-lead{color:var(--muted)}
.sub-band--strong .sub-form input[type=email]{border:1px solid var(--line);background:var(--stone);color:var(--text)}
.sub-band--strong .sub-form input[type=email]::placeholder{color:var(--muted)}
.sub-band--strong .sub-fine{color:var(--muted)}
.sub-band--strong .sub-ok{color:var(--teal-ink)}
.sub-band--strong .form-error{color:#9d2f2f}


@media(min-width:1000px){
  .nav-item--has{position:relative;display:flex;align-items:center}
  .nav-top{display:inline-flex;align-items:center;gap:.25rem}
  .nav-chev{transition:transform .25s}
  .nav-item--has:hover .nav-chev,.nav-item--has:focus-within .nav-chev{transform:rotate(180deg)}
  .nav-drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);min-width:252px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 26px 54px -28px rgba(10,44,82,.4);padding:.5rem;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:120}
  .nav-drop::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
  .nav-item--has:hover .nav-drop,.nav-item--has:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .nav-drop a{display:block;padding:.62rem .85rem;border-radius:9px;font-size:.92rem;line-height:1.25;color:#2b3946;white-space:nowrap;font-weight:500}
  .nav-drop a:hover{background:var(--stone);color:var(--brand)}
  .nav-drop a:last-child{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.72rem;color:var(--brand)}
}
.mobile-menu .m-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:none;border:0;border-bottom:1px solid var(--line);font-size:1.4rem;font-weight:600;color:inherit;font-family:inherit;padding:1rem 0;cursor:pointer;text-align:left}
.mobile-menu .m-top .nav-chev{width:20px;height:20px;transition:transform .3s;flex:none}
.mobile-menu .m-item.open .m-top .nav-chev{transform:rotate(180deg)}
.mobile-menu .m-sub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.mobile-menu .m-item.open .m-sub{max-height:560px}
.mobile-menu .m-sub a{font-size:1.02rem;font-weight:500;padding:.62rem 0 .62rem 1rem;border-bottom:0;opacity:.9}
.mobile-menu .m-sub a:last-child{color:var(--brand);opacity:1}

.footer-legal{display:flex;gap:1.1rem}
.footer-legal a{opacity:.85}
.footer-legal a:hover{opacity:1;text-decoration:underline}
.footer-credit a{color:var(--teal);font-weight:500;text-decoration:none}
.footer-credit a:hover{text-decoration:underline}

@media(max-width:640px){
  .hero__inner{padding-top:5.75rem;padding-bottom:1.25rem;gap:1.05rem}
  .hero .subhead{margin-top:.9rem;line-height:1.5}
  .hero--center .cta-row{margin-top:1.15rem;gap:.6rem;width:100%;flex-direction:column}
  .hero--center .cta-row .btn{width:100%}
  .hero-proofs{margin-top:1.2rem;gap:.7rem}
  /* homepage hero: one CTA is enough on a phone (header + brief card + sticky bar already carry it) */
  .hero--center .cta-row--m-hide{display:none}
  .hero--center .cta-row--m-hide + .hero-proofs{margin-top:1.6rem}
}

.mbar{display:none}
@media(max-width:820px){
  .mbar{display:grid;grid-template-columns:auto 1fr;gap:.55rem;position:fixed;left:0;right:0;bottom:0;z-index:96;transition:transform .34s var(--ease);padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-top:1px solid var(--line)}
  .mbar__call{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:12px;font-weight:600;color:var(--navy);background:#fff;font-size:.95rem}
  .mbar__call svg{width:18px;height:18px}
  .mbar__cta{border-radius:12px;padding:.85rem 1rem}
  .mbar.mbar--hidden{transform:translateY(140%)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

.ticks--x li svg{color:#B0654A}
.ticks--x li{color:var(--muted)}

/* 8 Sep 2026: comparison ticks on dark sections were unreadable.
   --muted (#666C73) on the navy card is 2.4:1 and both icon colours,
   --teal-ink and #B0654A, were under 3:1. On DARK ground the ink is
   lifted off the white ramp for text and brightened for the icons.
   Hierarchy is kept by weight, not by making one column illegible:
   Going direct sits at 82 percent, Through CVBS at full ink.
   Light sections are untouched, where the original values pass. */
.s-navy .ticks li,.compare .cvbs .ticks li{color:#EAF1F4}
.s-navy .ticks li svg,.compare .cvbs .ticks li svg{color:var(--teal)}
.s-navy .ticks--x li,.compare .cvbs .ticks--x li{color:rgba(234,241,244,.82)}
.s-navy .ticks--x li svg,.compare .cvbs .ticks--x li svg{color:#E4907A}

.site-header.nav-open .nav-cta .btn{display:none}

.stmt-video{position:relative;overflow:hidden;background:var(--navy-deep);isolation:isolate}
.stmt-video__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stmt-video::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.90),rgba(0,0,0,.64) 56%,rgba(0,0,0,.26))}
.stmt-video .wrap{position:relative;z-index:2}
.stmt-video .h2{color:#fff}
.stmt-video .lead{color:rgba(238,246,247,.86)}
.stmt-video .eyebrow{color:var(--teal)}
.stmt-video .link-arrow{color:#fff}
.stmt-video__bg{object-position:66% 42%}
@media(max-width:820px){.stmt-video__bg{object-position:74% 45%}.stmt-video::after{background:linear-gradient(180deg,rgba(0,0,0,.86),rgba(0,0,0,.72) 30%,rgba(0,0,0,.64))}}

/* dropdown text stays dark even under the transparent hero header */
.site-header--overlay:not(.scrolled) .nav-drop a{color:#2b3946}
.site-header--overlay:not(.scrolled) .nav-drop a:hover{color:var(--brand);background:var(--stone)}
.site-header--overlay:not(.scrolled) .nav-drop a:last-child{color:var(--brand)}

/* ==========================================================================
   Venue index (.vidx) — shared component for all destination pages.
   Data lives in a JSON island (#vidx-data) on each city page; the renderer
   is in site.js. Nothing here is city-specific.
   ========================================================================== */
.vidx{margin-top:clamp(1.5rem,3vw,2.25rem)}

/* The answer block. Definitive first sentence, above the fold of the section. */
.vidx-lede{display:grid;gap:clamp(1.1rem,2.2vw,1.6rem);align-items:stretch}
@media(min-width:1040px){.vidx-lede{grid-template-columns:minmax(0,1.6fr) minmax(270px,.8fr)}}
.vidx-answer{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r-card);padding:clamp(1.25rem,2.6vw,1.9rem) clamp(1.25rem,3vw,2.1rem);max-width:82ch;box-shadow:var(--shadow-sm)}
.vidx-answer{max-width:none}
.vidx-answer__tag{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--teal-ink);margin-bottom:.75rem}
.vidx-answer p{line-height:1.62;color:#37444f}
.vidx-answer p+p{margin-top:.85rem}
.vidx-answer b{color:var(--text);font-weight:600}
.vidx-answer a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.vidx-answer a:hover{color:var(--navy)}

/* At a glance rail. Numbers computed from the data, so they cannot go stale. */
.vidx-stats{background:var(--navy);color:#fff;border-radius:var(--r-card);padding:clamp(1.25rem,2.4vw,1.75rem);display:grid;gap:1.05rem;align-content:space-between;box-shadow:var(--shadow-md)}
.vidx-stats__tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--teal)}
.vidx-stat{border-top:1px solid rgba(255,255,255,.14);padding-top:.9rem}
.vidx-stat:first-of-type{border-top:none;padding-top:0}
.vidx-stat__n{font-size:clamp(1.7rem,1.2rem + 1.4vw,2.25rem);font-weight:600;letter-spacing:-.035em;line-height:1;color:#fff}
.vidx-stat__n small{font-size:.42em;font-weight:600;color:var(--teal);letter-spacing:.02em;margin-left:.3rem}
.vidx-stat__l{font-size:.82rem;color:rgba(255,255,255,.66);margin-top:.4rem;line-height:1.45}

/* One brief, solved. The proof module. */
.brief-proof{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(min-width:900px){.brief-proof{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.brief-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-card)}
.brief-card__tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--teal-ink)}
.brief-card dl{margin-top:1.1rem}
.brief-card__row{display:flex;justify-content:space-between;gap:1.2rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.brief-card__row:last-child{border-bottom:none}
.brief-card__row dt{font-size:.86rem;color:var(--muted)}
.brief-card__row dd{font-size:.92rem;font-weight:600;color:var(--navy);text-align:right}
.brief-steps{counter-reset:bs}
.brief-step{position:relative;padding-left:3.1rem;padding-bottom:1.5rem}
.brief-step:last-child{padding-bottom:0}
.brief-step::before{counter-increment:bs;content:counter(bs);position:absolute;left:0;top:-.1rem;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:.85rem;font-weight:600}
.brief-step::after{content:"";position:absolute;left:1.05rem;top:2.3rem;bottom:.2rem;width:1px;background:var(--line)}
.brief-step:last-child::after{display:none}
.brief-step h3{font-size:1.05rem;margin-bottom:.3rem}
.brief-step p{font-size:.92rem;color:var(--muted);line-height:1.6}
.brief-outcome{margin-top:1.4rem;background:#FFF9E8;border:1px solid #F0E2B8;border-radius:var(--r-card);padding:1.1rem 1.3rem}
.brief-outcome__tag{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#8a6a15}
.brief-outcome p{font-size:.9rem;color:#5c4d24;line-height:1.6;margin-top:.45rem}

/* The people behind the relationships */
.team-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:clamp(1.5rem,3vw,2.25rem)}
@media(min-width:820px){.team-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
.team-photo{border-radius:var(--r-card);overflow:hidden;background:var(--stone-deep);aspect-ratio:4/5;box-shadow:var(--shadow-card)}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-copy h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);letter-spacing:-.02em;line-height:1.12}
.team-copy p{color:var(--muted);margin-top:.9rem;line-height:1.65;max-width:56ch}
.team-copy .who{margin-top:1.2rem;font-size:.9rem;color:var(--text);font-weight:600}
.team-copy .who span{display:block;font-weight:400;color:var(--muted);margin-top:.2rem}
.team-grid + .grid{margin-top:clamp(2.75rem,6vw,4.5rem)}

/* Boundary statement. Says what the index is not, which is what makes it an index. */
/* Controls */
.vidx-controls{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1rem,2vw,1.35rem);display:grid;gap:.9rem;grid-template-columns:1fr;box-shadow:var(--shadow-sm);margin-top:clamp(1.75rem,3.5vw,2.5rem)}
@media(min-width:640px){.vidx-controls{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vidx-controls{grid-template-columns:repeat(3,1fr) auto;align-items:end}}
@media(min-width:1320px){.vidx-controls{grid-template-columns:1.2fr repeat(4,1fr) auto}}
.vidx-ctl{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.vidx-ctl label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.vidx-ctl select{font-family:inherit;font-size:.95rem;font-weight:500;color:var(--text);padding:.7rem 2.1rem .7rem .8rem;border:1px solid var(--line);border-radius:10px;background-color:var(--stone);width:100%;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E747B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:15px;
  transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.vidx-ctl select:hover{border-color:var(--teal)}
.vidx-ctl select:focus{outline:none;border-color:var(--teal);background-color:#fff;box-shadow:0 0 0 3px rgba(59,201,217,.18)}
.vidx-ctl input[type=search]{font-family:inherit;font-size:.95rem;font-weight:500;color:var(--text);padding:.7rem .8rem .7rem 2.3rem;border:1px solid var(--line);border-radius:10px;background-color:var(--stone);width:100%;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E747B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left .72rem center;background-size:15px;transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.vidx-ctl input[type=search]:hover{border-color:var(--teal)}
.vidx-ctl input[type=search]:focus{outline:none;border-color:var(--teal);background-color:#fff;box-shadow:0 0 0 3px rgba(59,201,217,.18)}
.vidx-ctl input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.vidx-reset{background:none;border:none;font-size:.9rem;font-weight:600;color:var(--brand);cursor:pointer;padding:.75rem .2rem;text-align:left;white-space:nowrap}
.vidx-reset:hover{text-decoration:underline}

/* Result count */
.vidx-count{font-size:.92rem;color:var(--muted);margin:1.25rem 0 .9rem;display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:baseline}
.vidx-count b{color:var(--text);font-weight:600}
.vidx-showall{background:none;border:none;padding:0;font-family:inherit;font-size:inherit;font-weight:600;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.vidx-showall:hover{color:var(--navy)}
.vidx-count .vidx-hidden{font-size:.85rem;color:var(--muted);opacity:.85}

/* Filtered a set down? Then it becomes a brief. */
.vidx-handoff{margin:1.1rem 0 .3rem;background:var(--navy);color:#fff;border-radius:var(--r-card);padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.15rem,2.6vw,1.75rem);display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;align-items:center;justify-content:space-between;box-shadow:var(--shadow-md)}
.vidx-handoff[hidden]{display:none}
.vidx-handoff__q{font-size:1.02rem;line-height:1.45;max-width:52ch}
.vidx-handoff__q b{font-weight:600;color:var(--teal)}
.vidx-handoff__s{font-size:.8rem;color:rgba(255,255,255,.6);letter-spacing:.02em;flex-basis:100%;order:3;margin-top:-.3rem}
.vidx-handoff .btn{flex:none}

/* Table */
.vidx-scroll{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
@media(min-width:1100px){.vidx-scroll{overflow-x:auto}}
.vidx-table{width:100%;border-collapse:collapse;font-size:.9rem;table-layout:auto}
.vidx-table tbody tr[hidden]{display:none}
@media(min-width:1100px){
  .vidx-table{min-width:1040px;table-layout:fixed}
  .vidx-table col.c-name{width:17%}
  .vidx-table col.c-prec{width:10%}
  .vidx-table col.c-cap{width:9%}
  .vidx-table col.c-ceil{width:8%}
  .vidx-table col.c-br{width:9%}
  .vidx-table col.c-gr{width:8.5%}
  .vidx-table col.c-suit{width:29%}
  .vidx-table col.c-enq{width:9.5%}
}
.vidx-table thead th{background:var(--navy);color:#fff;text-align:left;padding:.85rem .95rem;font-weight:600;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;white-space:normal;line-height:1.25;vertical-align:bottom}
.vidx-table th.is-sortable{cursor:pointer;user-select:none;transition:background .25s var(--ease)}
.vidx-table th.is-sortable:hover{background:#12406f}
.vidx-table th .vidx-arr{opacity:.4;margin-left:.3rem;font-size:.95em;display:inline-block}
.vidx-table th.asc .vidx-arr,.vidx-table th.desc .vidx-arr{opacity:1;color:var(--teal)}
.vidx-table th.num,.vidx-table td.num{text-align:right}
.vidx-table tbody td{padding:.7rem .9rem;border-top:1px solid var(--line);vertical-align:top}
.vidx-table tbody tr{transition:background .2s var(--ease)}
.vidx-table tbody tr:hover td{background:#F6FCFD}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.vidx-cap{font-weight:600;color:var(--navy);font-size:1rem}
.vidx-name{font-weight:600;color:var(--navy);font-size:.94rem;line-height:1.28}
.vidx-space{font-size:.77rem;color:var(--muted);margin-top:.12rem}
.vidx-setup{font-size:.72rem;color:var(--muted);margin-top:.15rem;text-transform:lowercase}
.vidx-suit{font-size:.84rem;color:#4a5762;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vidx-tag{display:inline-block;font-size:.64rem;font-weight:600;padding:.15rem .45rem;border-radius:5px;background:var(--stone-deep);color:var(--navy);white-space:nowrap;margin-top:.35rem}
.vidx-tag--worked{background:var(--navy);color:#fff;display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem .2rem .42rem}
.vidx-tag--worked svg{width:10px;height:10px;color:var(--teal)}
.vidx-tag--conv{background:rgba(59,201,217,.16);color:var(--teal-ink)}
.vidx-tag--hotel{background:rgba(3,102,198,.1);color:var(--brand)}
.vidx-tag--event{background:#F3EFE4;color:#8a6a15}
.vidx-none{color:var(--muted);font-weight:400}
.vidx-enq{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--teal-ink);white-space:nowrap}
.vidx-enq svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.vidx-enq:hover{color:var(--navy)}
.vidx-enq:hover svg{transform:translateX(3px)}
.vidx-empty{padding:3rem 1.25rem;text-align:center;color:var(--muted)}
.vidx-empty a{color:var(--brand);font-weight:600;text-decoration:underline}

/* Methodology. One line, on the page rather than in a comment. */
.vidx-method{margin-top:1.1rem;font-size:.8rem;color:var(--muted);line-height:1.6;max-width:94ch}
.vidx-method b{color:var(--text);font-weight:600}

/* Ceiling qualifier, e.g. "at the dome apex; 9m to the rigging star" */
.vidx-qual{display:block;font-size:.72rem;color:var(--muted);font-weight:400;line-height:1.35;margin-top:.2rem;white-space:normal}

/* Full specification panel. Always in the DOM so it stays readable and citable. */
.vidx-more{display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--brand);white-space:nowrap;margin-bottom:.4rem}
.vidx-more svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.vidx-more:hover{text-decoration:underline}
.vidx-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.vidx-specrow>td{background:var(--stone);padding:0 !important}
.vidx-spec{display:grid;gap:clamp(1.1rem,2.5vw,2.25rem);padding:clamp(1.15rem,2.4vw,1.6rem) clamp(1rem,2vw,1.5rem);border-top:2px solid var(--teal)}
@media(min-width:700px){.vidx-spec{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.vidx-spec{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.vidx-spec__col h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:.7rem}
.vidx-spec__row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.4rem 0;border-bottom:1px solid var(--line)}
.vidx-spec__row:last-child{border-bottom:none}
.vidx-spec__row dt{font-size:.85rem;color:#4a5762}
.vidx-spec__row dd{font-size:.9rem;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;text-align:right}
.vidx-spec__full{font-size:.88rem;color:#4a5762;line-height:1.55}
.vidx-spec__second{font-size:.95rem;color:var(--navy);margin-bottom:.4rem}
.vidx-spec__note{font-size:.82rem;color:var(--muted);line-height:1.5;margin-top:.7rem}
.vidx-specrow:hover>td{background:var(--stone)}

/* Mobile: the table becomes stacked cards. No horizontal scrolling. */
@media(max-width:1099px){
  .vidx-scroll{border:none;background:none;box-shadow:none;border-radius:0}
  .vidx-table,.vidx-table tbody,.vidx-table tr,.vidx-table td{display:block;width:100%}
  .vidx-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vidx-table tbody tr{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-sm);padding:1.15rem 1.25rem;margin-bottom:1rem}
  .vidx-table tbody tr[hidden]{display:none}
  .vidx-table tbody tr:hover td{background:none}
  .vidx-table tbody td{border-top:none;padding:0}
  .vidx-table td[data-l]{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;padding:.5rem 0;border-top:1px solid var(--line);text-align:right}
  .vidx-table td[data-l]::before{content:attr(data-l);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);text-align:left}
  .vidx-table td.vidx-c-name{padding-bottom:.65rem}
  .vidx-table td.vidx-c-suit{padding-top:.9rem;border-top:1px solid var(--line);margin-top:.35rem}
  .vidx-table td.vidx-c-suit .vidx-suit{max-width:none}
  .vidx-table td.vidx-c-enq{padding-top:.9rem}
  .vidx-table td.num{text-align:right}
  .vidx-table td[data-l] .vidx-setup{grid-column:2;margin-top:.1rem}
  .vidx-table td[data-l] .vidx-qual{grid-column:2;text-align:right}
  .vidx-table tr.vidx-specrow{padding:0;border:none;box-shadow:none;background:none;margin-top:-1rem;margin-bottom:1rem}
  .vidx-table tr.vidx-specrow>td{background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
  .vidx-spec{grid-template-columns:1fr;border-top:2px solid var(--teal);border-radius:var(--r-card)}
  /* On a phone the specification tables are long, and the site visit record is
     the reason to read the panel at all. Put the description first, the visit
     record second, and the numbers after both. */
  .vidx-spec__col--wide{order:-2}
  .vidx-visit{order:-1;margin-top:0;padding-top:0;border-top:none;
    padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
  .vidx-table td.vidx-c-enq{display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .vidx-more{margin-bottom:0}
  .vidx-handoff{flex-direction:column;align-items:flex-start}
  .vidx-handoff .btn{width:100%}
  .vidx-empty{background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
  .vidx-sortnote{display:block}
}
.vidx-sortnote{display:none;font-size:.83rem;color:var(--muted);margin-bottom:.9rem}

/* answer block used standalone, outside the venue index grid */
.answer-solo{max-width:92ch;margin-inline:auto}
.logos-note{margin-top:1.1rem;text-align:center;font-size:.92rem;line-height:1.6;color:var(--muted,#5b6b78);max-width:70ch;margin-inline:auto}


/* Nine destinations have no photograph. Rather than a navy tile with ghost
   text, the precincts we cover become the media: legible, and it is the thing
   a planner actually wants to know about a city. */
.city-card--prec .city-card__prec{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:.42rem;padding:clamp(1.15rem,2.2vw,1.45rem);
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 100%);
  overflow:hidden;pointer-events:none;user-select:none}
.city-card--prec .city-card__prec::before{content:"Areas we cover";display:block;
  margin-bottom:.55rem;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal)}
.city-card--prec .city-card__prec span{position:relative;padding-left:.85rem;font-size:.88rem;
  font-weight:600;letter-spacing:-.005em;line-height:1.3;color:rgba(255,255,255,.82);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city-card--prec .city-card__prec span::before{content:"";position:absolute;left:0;top:.52em;
  width:4px;height:4px;border-radius:50%;background:var(--teal);opacity:.85}

/* The firsthand record. Prints only where a site visit is logged in the data,
   so an empty field shows nothing rather than implying a visit. */
.vidx-seen{display:flex;align-items:center;gap:.34rem;margin-top:.34rem;font-size:.74rem;
  font-weight:600;letter-spacing:.01em;color:var(--teal-deep,#1F818C);line-height:1.3}
.vidx-seen svg{width:13px;height:13px;flex:none}
.vidx-spec__seen{margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--line);
  font-size:.84rem;line-height:1.55;color:#4a5762}
.vidx-spec__seen b{color:var(--navy);font-weight:600}
.vidx-method--seen{margin-top:.8rem}

/* The experience filter carries the longest option label in the control row. */
.vidx-ctl:has(#vidx-seen){min-width:16rem}
.vidx-ctl #vidx-seen{min-width:15rem}

/* --- Homepage offer cards: whole card clicks through to the full offer --- */
.offer:has(.offer__hit){position:relative}
.offer__hit{position:absolute;inset:0;z-index:1}
.offer:has(.offer__hit):hover{border-color:var(--teal);box-shadow:var(--shadow-md)}
.offer:has(.offer__hit):focus-within{outline:2px solid var(--brand);outline-offset:3px}
.offer__full{position:static;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem;color:var(--teal-ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.offer__full svg{transition:transform .3s var(--ease)}
.offer:hover .offer__full{border-bottom-color:currentColor}
.offer:hover .offer__full svg{transform:translateX(3px)}
.offer__enq{position:relative;z-index:2}
.offer:has(.offer__hit) .offer__media img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.offer:has(.offer__hit):hover .offer__media img{transform:scale(1.04)}
.offer:has(.offer__hit) .offer__foot{flex-direction:column;align-items:flex-start;gap:.85rem}
.offer__acts{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}

/* ==========================================================================
   Conference venue finding: rate card, draft state, worked example
   ========================================================================== */
:root{--draft:#B4690E;--draft-bg:#FDF6EC;--draft-line:#E9C89A}

/* --- shared draft treatment. Remove .is-draft on the section to publish. --- */
.ratecard__badge{flex:none;display:inline-block;background:var(--draft);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .6rem;border-radius:var(--r-pill)}
.ratecard__flag,.worked__flag{display:none;align-items:flex-start;gap:.85rem;background:var(--draft-bg);border-bottom:1px solid var(--draft-line);padding:.95rem clamp(1.1rem,2.4vw,1.6rem);font-size:.86rem;line-height:1.5;color:#5B4423}
.ratecard__flagtxt b{color:var(--draft)}
.is-draft .ratecard__flag,.is-draft .worked__flag{display:flex}
.is-draft .ratecard,.is-draft .worked{border-color:var(--draft-line);box-shadow:0 0 0 1px var(--draft-line) inset,var(--shadow-sm)}
.is-draft .prov{background:var(--draft-bg);border-bottom:1px dotted var(--draft);border-radius:4px;padding:.1rem .35rem;color:#5B4423}
.is-draft .shortlist b,.is-draft .ruledout b{color:#5B4423}

/* --- rate card --- */
.ratecard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm)}
.ratecard__scroll{overflow-x:auto}
.ratetable{width:100%;border-collapse:collapse;min-width:560px;font-size:clamp(.9rem,1.6vw,1rem)}
.ratetable caption{caption-side:top;text-align:left;padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.4vw,1.6rem) .5rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ratetable th,.ratetable td{text-align:left;padding:.85rem clamp(1.1rem,2.4vw,1.6rem);border-bottom:1px solid var(--line)}
.ratetable thead th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line)}
.ratetable tbody th{font-weight:600;color:var(--navy);white-space:nowrap}
.ratetable tbody td{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.ratetable tbody tr:last-child th,.ratetable tbody tr:last-child td{border-bottom:0}
.ratetable tbody tr:hover{background:var(--stone)}
.ratecard__note{margin:0;padding:1rem clamp(1.1rem,2.4vw,1.6rem);background:var(--stone);border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}

/* --- worked example --- */
.worked{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm)}
.worked__grid{display:grid;gap:clamp(1.6rem,3.5vw,3rem);padding:clamp(1.4rem,3vw,2.4rem)}
@media(min-width:900px){.worked__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.worked__brief{background:var(--stone);border-radius:var(--r-card);padding:clamp(1.3rem,2.6vw,1.8rem);align-self:start}
.brieflist{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.1rem;margin:1rem 0 0}
.brieflist dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:.18rem}
.brieflist dd{margin:0;font-size:.95rem;line-height:1.5;color:var(--text)}
.shortlist{counter-reset:sl;list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.9rem}
.shortlist li{position:relative;padding-left:2.4rem;font-size:.95rem;line-height:1.6;color:var(--muted)}
.shortlist li::before{counter-increment:sl;content:counter(sl,decimal-leading-zero);position:absolute;left:0;top:.05rem;font-size:.78rem;font-weight:700;color:var(--teal-ink);letter-spacing:.04em}
.shortlist b{color:var(--navy);font-weight:600}
.ruledout{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.9rem}
.ruledout li{position:relative;padding-left:2.4rem;font-size:.95rem;line-height:1.6;color:var(--muted)}
.ruledout li::before{content:"";position:absolute;left:.55rem;top:.62em;width:10px;height:1.5px;background:var(--muted);border-radius:2px}
.ruledout b{color:var(--navy);font-weight:600;letter-spacing:.01em}
@media(max-width:699px){
  .ratetable{min-width:0;display:block}
  .ratetable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ratetable tbody,.ratetable tr,.ratetable tbody th,.ratetable tbody td{display:block}
  .ratetable tbody tr{border-bottom:1px solid var(--line);padding:.75rem 0}
  .ratetable tbody tr:last-child{border-bottom:0}
  .ratetable tbody tr:hover{background:none}
  .ratetable tbody th{border-bottom:0;padding-bottom:.45rem;font-size:1.02rem}
  .ratetable tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:0;padding-top:.22rem;padding-bottom:.22rem}
  .ratetable tbody td::before{content:attr(data-label);color:var(--muted);font-size:.86rem;font-weight:500;white-space:nowrap}
  .ratetable caption{display:block;width:100%;padding-bottom:.9rem;letter-spacing:.08em}
}

/* image heroes: on narrow screens the 90deg wash hid the photo entirely.
   Vertical scrim + art-directed portrait crop so the room reads. 26 Aug 2026 */
@media (max-width:760px){
  .page-hero--img::after{background:var(--scrim)}
  .page-hero--img .ph-bg{object-position:52% 62%}
}

/* Heroes were eating a whole phone screen before anything could be done.
   711px of a 844px viewport on the Sydney page. Tightened 5 Sep 2026 so the
   page's actual content starts inside the first screen. */
@media (max-width:760px){
  .page-hero .wrap,
  .page-hero--img .wrap{padding-block:1.9rem 2.1rem}
  .page-hero h1,
  .page-hero--img h1{font-size:clamp(1.75rem,6.4vw,2.3rem);line-height:1.12;margin:.6rem 0 .7rem;max-width:22ch}
  .page-hero .lead{font-size:.98rem;line-height:1.55;max-width:46ch}
  .page-hero .crumbs{font-size:.78rem}
  .page-hero .btn-row{margin-top:1rem;gap:.6rem}
  .page-hero .btn{padding:.7rem 1.1rem;font-size:.92rem}
}

/* ============================================================
   MOBILE HERO + BRIEF CARD  ·  26 Aug 2026
   Fixes: hero scrim failed WCAG on phones (white text hit CR 1.0
   over the bright window in the photo); the brief card's negative
   margin sliced the last hero proof in half; two equal-weight
   full-width CTAs; the value grid wrapped 4 lines a cell at 2-up.
   ============================================================ */

/* 1. Scrim. REMOVED 7 Sep 2026. This used to be a separate navy vertical
      wash for phones, added 26 Aug because the old desktop gradient was
      directional and left the right-hand side of the photo unscrimmed.
      The base .hero__scrim is now a flat var(--scrim), which has no
      direction to get wrong, so phones and desktop can share one rule.
      Measured before removing, worst case behind each element:
        navy vertical, iPhone 15 : eyebrow 6.06  h1 6.80  sourced 3.79  proofs 8.08
        flat var(--scrim),   same : eyebrow 6.43  h1 7.02  sourced 3.64  proofs 6.79
      Both pass, so this was a look decision, not a fix. Do not add a
      phone-only scrim back: retune --scrim in :root instead. */

@media(max-width:640px){
  .hero__inner{padding-top:5.5rem;padding-bottom:4.75rem}

  .hero .eyebrow{font-size:.62rem;letter-spacing:.14em}
  .hero .eyebrow::before{width:22px}

  .hero h1{font-size:clamp(2.2rem,9.6vw,2.8rem);margin-top:1rem;line-height:1.05}

  /* 2. Short subhead on phones. The long identity sentence stays in
        the DOM for crawlers and answer engines, it just does not eat
        eight lines of a 393px screen. */
  .hero .sh-lg{display:none}
  .hero .sh-sm{display:inline}
  .hero .subhead{margin-top:.85rem;font-size:1rem;line-height:1.5}
  .hero .subhead--bold{font-weight:500}

  /* 3. One primary action. The secondary drops to a text link so it
        stops competing with it at equal weight. */
  .hero--center .cta-row{margin-top:1.3rem;gap:.3rem}
  .hero--center .cta-row .btn--ghost-light{
    width:auto;background:none;border-color:transparent;box-shadow:none;
    padding:.75rem .4rem;font-size:.95rem;font-weight:500;
    text-decoration:underline;text-underline-offset:5px;
    text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45)}
  .hero--center .cta-row .btn--ghost-light:hover{background:none;border-color:transparent;transform:none}

  /* 4. Proofs stack left-aligned as a block, optically centred, so
        the three lines share one left edge instead of ragging. */
  .hero--center .hero-proofs{flex-direction:column;align-items:flex-start;
    width:100%;margin-top:1.15rem;gap:.6rem;text-align:left}
  .hero-proofs .pf{font-size:clamp(.78rem,3.4vw,.9rem);gap:.5rem;align-items:flex-start;line-height:1.35}
  .hero-proofs .pf svg{width:19px;height:19px;margin-top:1px}

  /* 5. The card lifts into the photo on phones as well as desktop.
        The flat join read as a hard seam under the hero. The lift is
        shorter here (44px, not 56px) and the hero carries it as extra
        bottom padding, so the last proof line still clears the card
        instead of being sliced by it. */
  .brief-bar{margin-top:-2.75rem}
}

/* 6. Two columns inside a 311px card gave 145px cells and four-line
      wraps. One column reads, and is shorter. */
@media(max-width:520px){
  .brief-bar__lead{font-size:.94rem;line-height:1.5}
  .value-row{grid-template-columns:1fr;gap:.95rem}
  .vi b{font-size:.95rem}
  .vi span{font-size:.86rem;line-height:1.4}
}

/* 7. Short-form subhead is phone-only. The long identity sentence is
      the default everywhere else, and stays in the DOM on phones. */
.sh-sm{display:none}

/* 8. The brief card lifts up to 56px into the hero. When hero content
      is taller than the viewport, `align-items:center` split the
      overflow top and bottom, eating the padding that was meant to
      keep the card off the copy: the last proof line was cropped at
      1024, 1280 and 1440 wide. `safe center` centres when it fits and
      falls back to start when it does not, so the bottom padding is
      always honoured. */
.hero__inner{align-items:safe center}
@media(min-width:641px){
  .hero--center .hero__inner{padding-bottom:clamp(4.5rem,7vh,6rem)}
}

/* 9. On a 375px phone the header CTA wrapped to two lines and crowded
      the menu button. Tighten it below 400px so it stays one line. */
@media(max-width:400px){
  .site-header .nav-cta .btn{padding:.78rem 1rem;font-size:.88rem}
}

/* ============================================================================
   SITE VISIT RECORD  (added 27 Aug 2026)
   The firsthand proof layer. Photographs taken by CVBS on a site visit, dated
   and attributed, sitting inside the expanded venue panel.

   DESIGN INTENT, do not "improve" this into a gallery. These photographs are
   evidence, not marketing imagery, and they will always lose a beauty contest
   against the venue's own professionally lit photography. They win on the one
   thing the venue cannot publish: someone from CVBS was standing there on a
   named date. So the treatment is deliberately plain. Hairline frames, no
   shadows, no rounded corners, no hover zoom, no captions over the image.
   The caption carries the value. The photograph is the receipt.
   ========================================================================== */

.vidx-visit{grid-column:1/-1;margin-top:.4rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.vidx-visit__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-bottom:.7rem}
.vidx-visit__tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--navy)}
.vidx-visit__tag svg{width:14px;height:14px;flex:none;color:var(--teal-ink)}
.vidx-visit__who{font-size:.9rem;color:#4a5762;margin:0}
.vidx-visit__who b{color:var(--navy);font-weight:600}
.vidx-visit__prov{margin:0;margin-left:auto;font-size:.74rem;color:var(--muted);font-style:italic}
.vidx-visit__note{font-size:.88rem;line-height:1.6;color:#4a5762;margin:0 0 1.15rem;max-width:78ch}
.vidx-visit__note b{color:var(--navy);font-weight:600}

.vidx-visit__strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:1.1rem clamp(.85rem,1.8vw,1.35rem)}
/* flex, not grid, so one photograph is the same size as six. A lone item in an
   auto-fit grid stretches to the full width and reads as a hero image, which is
   exactly the wrong register for a site visit record. */
.vidx-visit__item{margin:0;min-width:0;flex:1 1 190px;max-width:290px}
.vidx-visit__btn{display:block;width:100%;padding:0;border:1px solid rgba(10,44,82,.22);background:var(--white);
  border-radius:2px;cursor:zoom-in;overflow:hidden;line-height:0;transition:border-color .18s var(--ease)}
.vidx-visit__btn:hover,.vidx-visit__btn:focus-visible{border-color:var(--navy)}
.vidx-visit__btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.vidx-visit__btn img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.vidx-visit__cap{margin:.5rem 0 0;font-size:.78rem;line-height:1.5;color:#4a5762}
.vidx-visit__num{color:var(--teal-ink);font-weight:700;font-variant-numeric:tabular-nums;margin-right:.4rem}

/* the row level marker, sits under the "Walked by" line in the name cell */
.vidx-seen__n{display:inline-flex;align-items:center;gap:.28rem;margin-left:.45rem;font-weight:600;color:var(--teal-ink)}
.vidx-seen__n svg{width:12px;height:12px;flex:none}

/* --- recently visited, sits above the index filters -------------------------
   A full venue record per visit, not a thumbnail grid. Photograph and caption
   on the left, the venue and its complete published specification on the right.
   Slower to read than a table row on purpose. --------------------------------- */
.vidx-recent{margin:0 0 clamp(1.75rem,3.5vw,2.75rem);padding:clamp(1.25rem,2.6vw,2rem);
  background:var(--stone);border:1px solid var(--line);border-radius:var(--r-card)}
.vidx-recent__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;margin-bottom:1.25rem}
.vidx-recent__tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--navy);flex:none}
.vidx-recent__tag svg{width:14px;height:14px;flex:none;color:var(--teal-ink)}
.vidx-recent__sub{margin:0;font-size:.86rem;line-height:1.55;color:var(--muted);max-width:62ch}
.vidx-recent__grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.35rem)}
/* One record per row. Two up looked efficient and made the specification
   columns 160px wide, which wrapped every label. A record is not a tile. */
.vidx-recent__foot{margin:1.15rem 0 0;font-size:.78rem;line-height:1.55;color:var(--muted)}

.vrec{margin:0;min-width:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(1.15rem,2.4vw,1.75rem)}
/* Collapsed by default. CVBS walk a lot of rooms, and a page of full records
   becomes a wall very quickly. What stays visible is the part nobody else can
   publish: who was there, when, and what they noticed. The specification is
   reference material and sits behind the click. */
.vrec__lead{display:grid;gap:clamp(1rem,2.2vw,1.5rem);align-items:start}
@media(min-width:660px){.vrec__lead{grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(1.25rem,2.6vw,2rem)}}
.vrec__media{min-width:0}
.vrec__media .vidx-visit__btn{cursor:zoom-in}
.vrec__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.vrec__words{min-width:0}
.vrec__w{display:flex;align-items:center;gap:.34rem;margin:0 0 .3rem;font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--teal-ink)}
.vrec__w svg{width:13px;height:13px;flex:none}
.vrec__n{font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.25;color:var(--navy);margin:0}
.vrec__meta{margin:.25rem 0 0;font-size:.78rem;color:var(--muted)}
.vrec__note{margin:.75rem 0 0;font-size:.88rem;line-height:1.6;color:#4a5762;max-width:70ch}
.vrec__note b{color:var(--navy);font-weight:600}
.vrec__acts{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;margin-top:1.05rem}

.vrec__toggle{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:0;
  font:inherit;font-size:.82rem;font-weight:600;color:var(--teal-ink);cursor:pointer;
  border-bottom:1px solid transparent}
.vrec__toggle:hover{border-bottom-color:currentColor}
.vrec__toggle:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.vrec__toggle svg{width:15px;height:15px;flex:none;transition:transform .2s var(--ease)}
.vrec__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.vrec__detail{margin-top:1.35rem;padding-top:1.35rem;border-top:1px solid var(--line)}
.vrec__sum{margin:0 0 1.15rem;font-size:.88rem;line-height:1.6;color:#4a5762;max-width:78ch}
.vrec__specs{min-width:0;display:grid;gap:0 clamp(1.1rem,2.4vw,2rem)}
@media(min-width:760px){.vrec__specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vrec__speccol{min-width:0}
.vrec__speccol h4{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--muted);margin:0 0 .35rem}
.vrec__speccol + .vrec__speccol h4{margin-top:1.1rem}
@media(min-width:760px){.vrec__speccol + .vrec__speccol h4{margin-top:0}}
.vrec__speccol dl{margin:0}
.vrec__unpub{grid-column:1/-1;margin:.9rem 0 0;font-size:.78rem;line-height:1.55;color:var(--muted)}
/* a long value wraps beside its label rather than dropping to its own line */
.vrec .vidx-spec__row dt{flex:0 0 auto;white-space:nowrap}
.vrec .vidx-spec__row dd{min-width:0}

.vrec__photos{list-style:none;margin:1.35rem 0 0;padding:1.35rem 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem clamp(.85rem,1.8vw,1.35rem)}
.vrec__photos .vidx-visit__item{flex:1 1 190px;max-width:300px}
.vrec__photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

.vidx-recent__all{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.25rem;background:none;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.55rem 1.1rem;font:inherit;
  font-size:.82rem;font-weight:600;color:var(--navy);cursor:pointer;background:var(--white)}
.vidx-recent__all:hover{border-color:var(--navy)}
.vidx-recent__all:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.vidx-recent__all svg{width:15px;height:15px;flex:none;transition:transform .2s var(--ease)}
.vidx-recent__all.is-open svg{transform:rotate(180deg)}

@media(max-width:699px){
  .vrec__photos .vidx-visit__item{flex:1 1 150px;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .vrec__toggle svg,.vidx-recent__all svg{transition:none}
}

/* --- lightbox --- */
.vlb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(0,0,0,.93)}
.vlb.is-open{display:flex}
.vlb__box{max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:.9rem}
.vlb__img{max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain;display:block;
  margin:0 auto;border-radius:2px;background:#061E3B}
.vlb__meta{color:#fff;max-width:78ch;margin:0 auto;text-align:left}
.vlb__cap{margin:0;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.94)}
.vlb__attr{margin:.45rem 0 0;font-size:.76rem;color:rgba(255,255,255,.62)}
.vlb__close,.vlb__nav{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:var(--r-pill);cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;transition:background .18s var(--ease)}
.vlb__close:hover,.vlb__nav:hover{background:rgba(255,255,255,.22)}
.vlb__close:focus-visible,.vlb__nav:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.vlb__close{top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem)}
.vlb__close svg,.vlb__nav svg{width:20px;height:20px}
.vlb__nav{top:50%;transform:translateY(-50%)}
.vlb__prev{left:clamp(.5rem,2vw,1.5rem)}
.vlb__next{right:clamp(.5rem,2vw,1.5rem)}
.vlb__nav[hidden]{display:none}

@media(max-width:699px){
  .vidx-visit__prov{margin-left:0;width:100%}
  .vidx-visit__item{flex:1 1 150px;max-width:none}
  .vlb__img{max-height:58vh}
  .vlb__nav{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  .vidx-visit__btn,.vlb__close,.vlb__nav{transition:none}
}

/* --- venues we have walked. Destination and service page band. -------------
   One card per inspected venue, linking to its record under /venue-visits/.
   Hides itself entirely when there is nothing to show, so a city page never
   advertises an empty promise. See _venue-visits-source/. -------------------- */
.vwalk{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem}
.vwalk__card a{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;text-decoration:none;
  box-shadow:var(--shadow-sm);transition:.25s var(--ease)}
.vwalk__card a:hover{transform:translateY(-3px);border-color:var(--teal)}
.vwalk__img{display:block;line-height:0;background:var(--stone)}
.vwalk__img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.vwalk__img--none{aspect-ratio:4/3;display:grid;place-items:center;line-height:1.4;background:repeating-linear-gradient(135deg,var(--stone),var(--stone) 10px,#EFF3F5 10px,#EFF3F5 20px)}
.vwalk__img--none span{font-size:.78rem;font-weight:600;color:#8a99a4;letter-spacing:.02em}
.vwalk__body{display:block;padding:1.1rem 1.2rem 1.2rem}
.vwalk__body b{display:block;color:var(--navy);font-size:1.06rem;margin-bottom:.28rem}
.vwalk__meta{display:block;font-size:.85rem;font-weight:600;color:var(--teal-ink);margin-bottom:.5rem}
.vwalk__line{display:block;font-size:.92rem;line-height:1.55;color:#5c6a75;margin-bottom:.7rem}
.vwalk__seen{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;
  color:var(--navy);border-left:3px solid var(--teal);padding-left:.55rem}
.vwalk__seen svg{width:14px;height:14px;color:var(--teal-ink)}


/* ============================================================
   HERO BRIEF STARTER  ·  5 Sep 2026
   Competitor audit (VenueNow, Tagvenue) showed marketplaces put a working
   form in the hero and reach content in 0.1 screens on 24-33 words. Agency
   competitors put a statement and bury the form 2,400px down. This is the
   agency version of the marketplace pattern: the hero form starts a real
   brief rather than searching a database.
   ============================================================ */
.ph-brief{margin:1.15rem 0 0;max-width:620px;background:rgba(255,255,255,.96);
  border-radius:14px;padding:.7rem;display:grid;grid-template-columns:1fr 1fr auto;
  gap:.5rem;align-items:center;box-shadow:0 14px 34px rgba(6,30,59,.28)}
.ph-brief .vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph-brief select,.ph-brief input{width:100%;border:1px solid var(--line);border-radius:9px;
  padding:.75rem .85rem;font:inherit;font-size:.95rem;color:var(--navy);background:#fff;
  appearance:none;-webkit-appearance:none;min-height:46px}
.ph-brief select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2C52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .65rem center;background-size:16px;padding-right:2.1rem}
.ph-brief select:focus,.ph-brief input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--teal)}
.ph-brief .btn{width:100%;justify-content:center;white-space:nowrap;min-height:46px}
.page-hero--img .hero-proofs{margin-top:.9rem}
@media(max-width:700px){
  .ph-brief{grid-template-columns:1fr 1fr;padding:.6rem;gap:.45rem;margin-top:1rem}
  .ph-brief .btn{grid-column:1 / -1}
  .ph-brief select,.ph-brief input{font-size:16px}
}

/* Guides are articles, so the prose stays. But a reader should be able to hand
   the job over without scrolling the whole piece. 5 Sep 2026 */
.guide-act{background:var(--navy);color:#EAF1F4}
.guide-act .wrap{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  padding-block:.9rem}
.guide-act p{margin:0;flex:1 1 320px;font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.9)}
.guide-act .btn{flex:0 0 auto}
@media(max-width:600px){.guide-act .wrap{padding-block:.85rem}.guide-act p{font-size:.9rem}
  .guide-act .btn{width:100%;justify-content:center}}

/* One quiet second door under the hero brief form. It has to read clearly on
   the scrim without competing with the primary action beside it. */
.hero-alt{margin:1.1rem 0 0;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.78)}
.hero-alt a{color:#fff;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.hero-alt a:hover{border-color:var(--teal)}
.hero-alt svg{vertical-align:-3px;margin-left:.15rem}
@media(max-width:700px){.hero-alt{font-size:.88rem}}

/* An unfinished brief for a different event. The visitor chooses; nothing is
   restored or erased behind their back. */
.draft-choice{background:#FFF8E8;border:1px solid #E3C98A;border-radius:12px;padding:1rem 1.15rem;margin-bottom:1.6rem;font-size:.95rem;line-height:1.5;color:#4A3A18}
.draft-choice p{margin:0 0 .85rem}
.draft-choice__acts{display:flex;gap:.6rem;flex-wrap:wrap}

/* What we are actually sending, shown before the submit button. */
/* One quiet line above the CTA confirming the only field whose mistake
   loses the lead. Replaced the full "Before you send it" replay, 8 Sep 2026. */
.send-to{margin:1.5rem 0 1.2rem;padding-left:.85rem;border-left:3px solid var(--teal-ink,#197683);font-size:.95rem;line-height:1.5;color:var(--muted)}
.send-to strong{color:var(--navy);font-weight:600;overflow-wrap:anywhere}

/* An empty result names the filter that is costing the results, and offers to
   drop it, rather than only offering to send a brief. */
.vf-empty__try{margin:1.1rem 0 .6rem;font-size:.9rem;font-weight:600;color:var(--navy)}
.vf-empty__acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.vf-empty__acts .btn{font-size:.85rem}

/* A shared shortlist, opened by someone who was sent the link. */
.vf-shared{background:rgba(59,201,217,.10);border:1px solid rgba(25,118,131,.45);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.5rem}
.vf-shared p{margin:0 0 .8rem;font-size:.95rem;line-height:1.5;color:var(--navy)}
.vf-shared__acts{display:flex;flex-wrap:wrap;gap:.55rem}

/* ------------------------------------------------------------------ print
   An EA does not forward a link to a manager. They paste it into a deck or
   print it to PDF and attach it to an approval email. That is the moment CVBS
   enters the client's internal process, so the printed page has to be a
   readable document: the venues, their capacities, and who to call. Navigation,
   filters, the sticky tray and every button come off.                        */
@media print {
  @page { margin: 14mm; }
  *,*::before,*::after{background:transparent!important;box-shadow:none!important;
    color:#000!important;text-shadow:none!important}
  body{font-size:11pt;line-height:1.4}
  .site-header,.mobile-menu,.mbar,.vf-tray,.vf-refine,.vf-ask,.vf-chips,.vf-sort,
  .sub-band,.cta-band,.guide-act,.site-footer,.vf-shared__acts,.vf-empty__acts,
  .btn,.vf-card__act,[data-save],[data-cmp],.skip,.crumbs,.vf-showing{display:none!important}
  .page-hero{padding:0 0 .6rem!important}
  main,.wrap{max-width:none!important;padding:0!important;margin:0!important}
  section{padding:0!important;break-inside:avoid}
  h1{font-size:19pt;margin:0 0 .2rem}
  h2,h3{font-size:12pt;margin:.5rem 0 .2rem}
  .vf-list{list-style:none;padding:0;margin:.6rem 0 0;display:block}
  .vf-list > li{break-inside:avoid;page-break-inside:avoid;border:1px solid #999;
    border-radius:0;padding:.5rem .6rem;margin:0 0 .45rem;display:block}
  .vf-list img,.vf-card__img,img{display:none!important}
  a[href]::after{content:""}
  .vf-shared{border:0;padding:0;margin:0 0 .6rem}
  /* The page has to say who produced it once it is off the screen. */
  .vf-list::after{content:"Prepared by Conference Venues and Booking Services. "
    "0414 784 999. karen@conferencevenues.com.au. Capacities are each venue's own "
    "published figures. Inventory is not availability: ask us to check your dates.";
    display:block;margin-top:1rem;padding-top:.5rem;border-top:1px solid #999;
    font-size:9pt;line-height:1.35}
}

/* ------------------------------------------------------- CVBS focus baseline
   A keyboard user has to be able to see where they are. Several components
   carried their own focus treatment and several carried none, so tabbing
   through the finder and the brief went dark in places. One visible ring
   everywhere, drawn outside the element so it is never clipped by a card.

   :focus-visible rather than :focus, so a mouse click on a button does not
   leave a ring behind it. */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:3px}
.s-navy :focus-visible,.s-teal :focus-visible,.site-footer :focus-visible,
.vf-tray :focus-visible{outline-color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand);outline-offset:1px;border-color:var(--brand)}

/* Skip link has to become visible when it is focused, not merely exist. */
.skip:focus,.skip:focus-visible{position:fixed;left:1rem;top:1rem;width:auto;height:auto;
  padding:.7rem 1.1rem;background:var(--navy);color:#fff;z-index:9999;border-radius:8px;
  clip:auto;clip-path:none;overflow:visible}

/* Someone who has asked their system to reduce motion should not be given
   entrance animations, parallax or a scrolling counter. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ===== Homepage hero simplified, 7 Sep 2026 =====
   Mel: the hero was too chaotic. Removed the long subhead, the inline
   .ph-brief destination/people form and the "not ready to hand it over yet"
   venue-results line. What remains is eyebrow, headline, one CTA and the
   proof strip, and it stays CENTRED at every width, as it always was.
   Two things were tried on 7 Sep and rejected by Mel, in this order:
   1. left-aligning the hero copy on desktop (a .hero--lhs modifier)
   2. moving the .brief-bar card into the hero as a right-hand column
   Do not rebuild either without her asking. See the project memory note
   cvbs-hero-simplified-07sep for why the card in particular is a bad fit.
   Nothing was lost from capture: the full brief form still sits in the
   .brief-bar section directly below the hero. */

/* ===========================================================================
   OFFER PAGES.  Added 7 Sep 2026.
   Until now the three live offers were anchor sections on offers.html, under a
   card grid that showed the same photograph, the same teal tag, the same venue
   name and the same location as the section it scrolled to. Clicking a card
   scrolled you to a bigger copy of the card you clicked. If the hash was
   already set it moved nothing at all, and loading offers.html#voco-darwin-suites
   did not reach the offer either. Each offer now has its own page, generated by
   _offers-source/build_offers.py, and these are the parts that page adds.
   =========================================================================== */

/* The booking deadline. The HTML carries the date so the page is correct with
   no JavaScript; site.js turns it into time remaining, which is the part that
   makes somebody act. The site is static and rebuilt by hand, so a day count
   written into the file would start lying the next morning. */
.odead{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.7rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34);color:#fff;
  font-weight:600;font-size:.94rem;padding:.62rem 1.15rem;border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.odead svg{flex:none;opacity:.8}
.odead b{color:var(--teal);font-weight:700}
.odead--soon{background:rgba(255,201,120,.18);border-color:rgba(255,201,120,.55)}
.odead--soon b{color:#FFC978}
.odead--past{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.odead--past b{color:rgba(255,255,255,.7)}

/* The same thing on a light card. */
.ocard-days{display:inline-flex;align-items:center;gap:.45rem;font-size:.83rem;font-weight:600;
  color:var(--teal-ink);margin:0}
.ocard-days svg{flex:none;width:16px;height:16px;opacity:.75}
.ocard-days b{color:var(--navy);font-weight:700}
.ocard-days--soon b{color:#B4531A}
.ocard-days--inline{margin-left:.15rem}
.ocount{color:var(--muted);margin:0 0 clamp(1.4rem,3vw,2rem);font-size:.98rem}

/* Does this fit your event? Minimum spend and blackout dates used to sit in
   grey fine print at the very bottom of a long page, which wasted the reader's
   time and Karen's. They go above the pitch now. */
.ofacts-band .wrap{padding-block:clamp(2rem,4vw,2.8rem)}
.ofacts-h{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:0 0 1.1rem}
.ofacts{display:grid;gap:.9rem;grid-template-columns:1fr;margin:0}
@media(min-width:620px){.ofacts{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.ofacts{grid-template-columns:repeat(4,1fr)}}
.ofacts>div{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.05rem 1.2rem;box-shadow:var(--shadow-sm)}
.ofacts dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--teal-ink)}
.ofacts dd{margin:.45rem 0 0;font-size:.97rem;line-height:1.42;color:var(--navy);font-weight:500}

/* The offer itself, said once, in the box people look in. It used to be split
   between this box and a tick list three screens further down. */
.deal-box--page .sub{max-width:62ch}
.deal-box .incl{list-style:none;display:grid;gap:.8rem;margin:1.6rem 0 0;padding:0}
@media(min-width:780px){.deal-box .incl{grid-template-columns:1fr 1fr;gap:.85rem 1.8rem}}
.deal-box .incl li{display:flex;gap:.7rem;align-items:flex-start;color:#EAF1F4;
  font-size:1rem;line-height:1.45}
.deal-box .incl svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--teal)}
.deal-box__act{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;margin-top:1.9rem}
.deal-box__act .btn{margin-top:0}
.deal-box__note{font-size:.88rem;color:rgba(234,241,244,.74)}

/* The full terms, still on the page, no longer the thing between you and the
   answer. */
.ofine{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.3rem}
.ofine summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:.94rem;
  list-style:none;display:inline-flex;align-items:center;gap:.55rem}
.ofine summary::-webkit-details-marker{display:none}
.ofine summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--teal-ink);
  border-bottom:2px solid var(--teal-ink);transform:rotate(45deg);margin-top:-3px;
  transition:transform .25s var(--ease)}
.ofine[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.ofine summary:hover{color:var(--teal-ink)}
.ofine p{margin-top:.9rem;font-size:.85rem;color:var(--muted);line-height:1.65;max-width:78ch}

/* Cards on offers.html. The whole card is the click target now, and the card
   carries the fact that decides whether the offer is usable at all. */
.offer .body{display:flex;flex-direction:column;flex:1}
.ocard-fact{font-size:.86rem;color:var(--muted);margin:.55rem 0 0;line-height:1.45}
.ocard-fact b{color:var(--navy);font-weight:600}
.ocard-foot{margin-top:auto;padding-top:1.15rem;display:flex;flex-direction:column;
  align-items:flex-start;gap:.2rem}

/* The offer page hero sits on the venue photograph, so the gradient scrim needs
   to run bottom-to-top as well as left-to-right or the deadline pill lands on
   sky. */
.page-hero--img .odead{position:relative;z-index:2}
.ochoices{margin-top:clamp(2rem,4vw,2.8rem)}
.ochoices h3{margin-top:1.1rem;font-size:1.15rem}
.ochoices h3[style]{margin-top:2rem}

/* A closing-soon chip, amber rather than teal so it does not read as one more
   decorative label. site.js only shows it inside the window. */
.offer .tag--soon{background:#FFC978;color:#5A3208;font-weight:700}

/* The offer page carries one navy box in this band. The section default is
   built for a full band of content and left it floating. */
.offer-page-deal{padding-block:clamp(2.4rem,4.5vw,3.4rem)}
.offer-page-deal + .s-white{border-top:0}

/* 760px of section head at 3.1rem broke the venue headline over three lines
   with half the row empty beside it. */
.ofpage .section-head{max-width:900px}
.ofpage .section-head .h2{font-size:clamp(1.75rem,1.2rem + 1.9vw,2.5rem)}

/* The offers page is a page about three cards. It was spending the whole first
   screen on the headline and pushing all three below the fold. */
.page-hero--tight .wrap{padding-block:clamp(2.2rem,4.5vw,3.4rem)}
.page-hero--tight h1{max-width:26ch;font-size:clamp(2rem,1.4rem + 2.6vw,3rem);margin:.9rem 0 1rem}
@media(max-width:520px){
  .odead{font-size:.86rem;padding:.55rem .95rem;line-height:1.35;align-items:flex-start}
  .odead svg{margin-top:2px}
}

/* ==========================================================================
   Desktop hero, 7 September 2026.
   The full-viewport hero pushed the brief-bar, the actual conversion widget,
   completely below the fold. 62vh is the proportion VenueNow uses. Phones
   keep 100svh, they need the room. These sit at the end of the file on
   purpose: .hero h1 above has equal specificity, so source order decides.
   ========================================================================== */
@media(min-width:900px){
  .hero{min-height:clamp(560px,72vh,760px)}
  .hero__inner{padding-top:clamp(5.5rem,9vh,7rem);padding-bottom:clamp(2rem,4vh,3rem)}
  /* wide enough that "The right venue isn't searched." holds one line, so the
     manual break in the markup produces the two lines it was written for */
  .hero--center .lede{max-width:1180px}
  .hero h1{font-size:clamp(2.4rem,1.1rem + 3.1vw,4.05rem)}
  .hero-proofs{gap:clamp(1rem,2.4vw,1.8rem)}
  .hero-proofs .pf{font-size:.88rem}
  .hero-proofs .pf svg{width:23px;height:23px}
}

/* ==========================================================================
   PHONES: THE BRIEF CARD AT THE FOLD                        7 Sep 2026
   The phone hero was min-height:100svh, which put "Start your brief" 41px
   BELOW the fold on a 393x700 screen: the card head was never seen without
   a scroll, so the conversion widget was invisible on open. The hero is now
   content-height with a 66svh floor. Measured after the change at 393x700:
   card top 458, eyebrow 480, heading bottom 531, lead paragraph fully in
   view at 650, button edge showing. At 375x590 the eyebrow and heading are
   in view. The floor stops the hero collapsing on short landscape screens.
   The 44px lift of the card into the photo (item 5 above) is unchanged, and
   so is the 100svh default everywhere else.
   Do not restore min-height:100svh on phones.
   ========================================================================== */
@media(max-width:640px){
  .hero{min-height:66svh}
}

/* Image save deterrent. Pairs with the contextmenu/dragstart handler in site.js.
   Images only, so text selection everywhere else is untouched. */
img, picture {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}