/* ============================================================================
   SBH Qualif, site-wide extension of the shipped hero's world.

   styles.css is COMPILED Tailwind: a class the old Next.js build never emitted
   has no rule and fails silently, with no console error and no 404. Nothing in
   this file depends on it. Every value is literal and every selector carries
   the sbh- prefix so it cannot collide with what Tailwind emitted.

   Load order is styles.css, then this file, then the hero's inline <style>.
   The hero shipped on 23 Aug 2026 and is verified; it wins over anything here.
   ========================================================================= */

:root{
  --sbh-ink:#0e2b2b;        /* display and body on light                     */
  --sbh-scrim:#081a22;      /* the colour the veils are built from           */
  --sbh-page:#e1d9e2;       /* page colour from the package brief            */
  --sbh-accent:#306a85;     /* accent on light: rules, icons, display type.  */
                            /* Bounded: clears 3.0 on the darkest grain.     */
  --sbh-accent-ink:#234e63; /* same hue, clears 4.5 on the DARKEST grain pixel */
  --sbh-accent-lt:#a8dcf1;  /* accent on dark, as used in the hero headline  */
  --sbh-dim:#e6f0f3;        /* secondary text on dark: a tint of the teal,   */
  --sbh-dim-ink:#384d50;    /* and of the ink on light. Never grey.          */
  --sbh-rule:rgba(14,43,43,.26);
  --sbh-rule-lt:rgba(255,255,255,.26);
}

@font-face{font-family:'SBH Inter';src:url(/assets/inter.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

.sbh-sec{font-family:'SBH Inter',system-ui,-apple-system,'Segoe UI',sans-serif}

/* ---- shared type ------------------------------------------------------- */
.sbh-kicker{margin:0 0 clamp(12px,1.6vw,18px);font-weight:800;font-size:clamp(11px,1vw,11.5px);letter-spacing:.32em;text-transform:uppercase}
.sbh-kicker i{font-style:normal;color:var(--sbh-accent-lt)}
.sbh-sec--light .sbh-kicker i{color:var(--sbh-accent-ink)}
.sbh-h2{margin:0;font-weight:800;font-size:clamp(29px,4.1vw,58px);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;transform:scaleX(.94);transform-origin:left center}
.sbh-h2 em{font-style:normal;color:var(--sbh-accent-lt)}
.sbh-sec--light .sbh-h2 em{color:var(--sbh-accent)}
.sbh-standfirst{max-width:58ch;margin:clamp(16px,2vw,22px) 0 0;font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.62}

.sbh-sec--dark{color:#fff}
.sbh-sec--dark .sbh-standfirst{color:var(--sbh-dim)}
.sbh-sec--light{color:var(--sbh-ink)}
.sbh-sec--light .sbh-standfirst{color:var(--sbh-dim-ink)}

/* ---- dark band: a photograph carrying a section, as the hero does ------- */
.sbh-band{position:relative;overflow:hidden;background:var(--sbh-scrim);padding:clamp(74px,9vw,126px) 0}
.sbh-band-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sbh-band-veil{position:absolute;inset:0;z-index:1}
.sbh-band-in{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}

/* Tuned against the decoded JPEG, not by eye. surplomb-village is a bright
   aerial: the village and the bay sit centre-right, so the type takes the left
   and the veil is weighted that way, leaving the terrain legible on the right. */
.sbh-band--challenge .sbh-band-photo{object-position:56% 42%}
.sbh-band--challenge .sbh-band-veil{background:
  linear-gradient(90deg,rgba(8,26,34,.55) 0%,rgba(8,26,34,.44) 45%,rgba(8,26,34,.30) 100%),
  linear-gradient(180deg,rgba(8,26,34,.34) 0%,rgba(8,26,34,.20) 30%,rgba(8,26,34,.24) 72%,rgba(8,26,34,.40) 100%),
  linear-gradient(180deg,rgba(8,26,34,.46) 0%,rgba(8,26,34,.46) 100%)}

/* st-barth-runway is the runway seen along the island: the close is the only
   place on the page it appears at size, so the veil sits lower and lets the
   strip read. */
.sbh-band--contact .sbh-band-photo{object-position:50% 46%}
.sbh-band--contact .sbh-band-veil{background:
  linear-gradient(90deg,rgba(8,26,34,.52) 0%,rgba(8,26,34,.40) 46%,rgba(8,26,34,.28) 100%),
  linear-gradient(180deg,rgba(8,26,34,.36) 0%,rgba(8,26,34,.20) 26%,rgba(8,26,34,.26) 70%,rgba(8,26,34,.44) 100%),
  linear-gradient(180deg,rgba(8,26,34,.44) 0%,rgba(8,26,34,.44) 100%)}

/* ---- light ground: page colour plus a real paper tooth ------------------
   The texture layers are re-centred on their blend neutral (mean 239 for the
   multiply layers), so they add tooth and drift without shifting the ground
   colour. A layer whose mean is not neutral is a tint pretending to be a
   texture. */
.sbh-paper{position:relative;background:var(--sbh-page);padding:clamp(74px,9vw,126px) 0}
.sbh-paper::before{content:"";position:absolute;inset:0;background-image:url(/assets/tex/grain.jpg?v=2);background-size:340px 340px;opacity:.7;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.sbh-paper--haze::before{background-image:url(/assets/tex/haze.jpg?v=2);background-size:cover;background-position:50% 50%;opacity:.85}
.sbh-paper-in{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}

/* ---- sharp photographic plate ------------------------------------------
   These photographs are small. A plate is capped at or below its native width
   so it is never enlarged; that is the whole reason plates exist here. */
.sbh-plate{display:block;width:100%;height:auto}
.sbh-plate-fig{margin:0}
.sbh-plate-cap{margin:10px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--sbh-dim-ink)}
.sbh-sec--dark .sbh-plate-cap{color:var(--sbh-dim)}

/* ---- a heading block with a sharp plate beside it ----------------------- */
.sbh-head-2col{display:grid;grid-template-columns:1fr minmax(0,400px);gap:clamp(28px,4vw,64px);align-items:end}
@media (max-width:900px){.sbh-head-2col{grid-template-columns:1fr}.sbh-head-2col figure{max-width:400px}}

.sbh-cta-row{margin:clamp(24px,3vw,34px) 0 0}
.sbh-faq-more{margin:clamp(26px,3vw,36px) 0 0}

/* ---- the four facts, ruled like the hero's spec row, not carded --------- */
.sbh-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(42px,5vw,68px) 0 0;border-top:1px solid var(--sbh-rule-lt);padding:0;list-style:none}
.sbh-fact{padding:clamp(22px,2.4vw,30px) clamp(16px,2vw,30px) 0 0;margin-right:clamp(16px,2vw,30px);border-right:1px solid rgba(255,255,255,.16)}
.sbh-fact:last-child{border-right:0;margin-right:0;padding-right:0}
.sbh-fact svg{display:block;width:28px;height:28px;margin:0 0 15px;fill:none;stroke:var(--sbh-accent-lt);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.sbh-fact h3{margin:0 0 9px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#fff}
.sbh-fact p{margin:0;font-size:13.5px;line-height:1.6;color:var(--sbh-dim)}

/* ---- three programmes, ruled columns ----------------------------------- */
.sbh-progs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px);margin:clamp(42px,5vw,64px) 0 0;list-style:none;padding:0}
.sbh-prog{display:flex;flex-direction:column;border-top:1px solid var(--sbh-rule);padding-top:18px}
.sbh-prog--lead{border-top:3px solid var(--sbh-ink)}
.sbh-prog-tag{display:block;margin:0 0 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--sbh-dim-ink)}
.sbh-prog--lead .sbh-prog-tag{color:var(--sbh-accent-ink)}
.sbh-prog h3{margin:0 0 18px;font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--sbh-ink)}
.sbh-prog ul{margin:0 0 26px;padding:0;list-style:none;flex:1 1 auto}
.sbh-prog li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid rgba(14,43,43,.13);font-size:13.5px;line-height:1.5;color:var(--sbh-dim-ink)}
.sbh-prog li svg{flex:0 0 15px;width:15px;height:15px;margin-top:3px;fill:none;stroke:var(--sbh-accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- buttons, in the hero's vocabulary --------------------------------- */
.sbh-a1,.sbh-a2{display:inline-block;text-decoration:none;font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;text-align:center;transition:background .2s ease,color .2s ease,border-color .2s ease}
.sbh-a1{background:var(--sbh-ink);color:#fff;padding:14px 28px}
.sbh-a1:hover{background:var(--sbh-accent);color:#fff}
.sbh-a2{border:1.5px solid var(--sbh-rule);color:var(--sbh-ink);padding:12.5px 26px}
.sbh-a2:hover{border-color:var(--sbh-ink);background:rgba(14,43,43,.06)}
.sbh-sec--dark .sbh-a1{background:#fff;color:var(--sbh-ink)}
.sbh-sec--dark .sbh-a1:hover{background:var(--sbh-accent-lt);color:var(--sbh-ink)}
.sbh-sec--dark .sbh-a2{border-color:rgba(255,255,255,.6);color:#fff}
.sbh-sec--dark .sbh-a2:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.sbh-prog .sbh-a1,.sbh-prog .sbh-a2{display:block}

/* ---- FAQ: a tall plate beside the questions ---------------------------- */
.sbh-faq-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,4vw,64px);align-items:start;margin-top:clamp(38px,4.4vw,58px)}
.sbh-faq-aside{position:sticky;top:104px}
.sbh-qs{margin:0;padding:0;border-top:1px solid var(--sbh-rule)}
.sbh-q{border-bottom:1px solid var(--sbh-rule)}
.sbh-q summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font-weight:800;font-size:15px;line-height:1.35;letter-spacing:-.01em;color:var(--sbh-ink)}
.sbh-q summary::-webkit-details-marker{display:none}
.sbh-q summary::after{content:"";position:absolute;right:6px;top:24px;width:11px;height:11px;border-right:1.6px solid var(--sbh-accent);border-bottom:1.6px solid var(--sbh-accent);transform:rotate(45deg);transition:transform .22s ease}
.sbh-q[open] summary::after{transform:rotate(225deg);top:27px}
.sbh-q summary:hover{color:var(--sbh-accent)}
.sbh-q p{margin:0 0 20px;padding-right:34px;font-size:13.5px;line-height:1.65;color:var(--sbh-dim-ink);max-width:70ch}

/* ---- the close --------------------------------------------------------- */
.sbh-close{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);align-items:end}
.sbh-card{border:1px solid var(--sbh-rule-lt);padding:clamp(24px,2.6vw,34px);min-width:min(330px,100%)}
.sbh-card dt{margin:0 0 4px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--sbh-dim)}
.sbh-card dd{margin:0 0 18px;font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
.sbh-card dd:last-of-type{margin-bottom:24px}
.sbh-card a{color:#fff}

/* ---- article pages -----------------------------------------------------
   These two pages have no photograph big enough to carry a full-bleed header,
   so the header is ink carrying a plate. The ink is not flat: ink-wash.jpg is
   re-centred near black and screened over it, which adds light without the fog
   a straight overlay would produce. */
.sbh-ink-head{position:relative;overflow:hidden;background:var(--sbh-ink);padding:clamp(58px,7vw,96px) 0 clamp(46px,5.5vw,74px)}
.sbh-ink-head::before{content:"";position:absolute;inset:0;background-image:url(/assets/tex/ink-wash.jpg?v=2);background-size:cover;background-position:50% 50%;opacity:.55;mix-blend-mode:screen;pointer-events:none;z-index:0}
.sbh-ink-head .sbh-band-in{z-index:1}
.sbh-crumb{margin:0 0 clamp(18px,2.4vw,26px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--sbh-dim)}
.sbh-crumb a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.sbh-crumb a:hover{border-bottom-color:#fff}
.sbh-crumb span{opacity:.7;padding:0 6px}
.sbh-h1-page{margin:0;font-weight:800;font-size:clamp(31px,4.6vw,64px);line-height:.88;letter-spacing:-.035em;text-transform:uppercase;transform:scaleX(.94);transform-origin:left center;color:#fff}
.sbh-h1-page em{font-style:normal;color:var(--sbh-accent-lt)}

.sbh-paper-in--narrow{max-width:940px}
.sbh-art{max-width:none}
.sbh-art h2{margin:clamp(44px,5vw,66px) 0 16px;font-weight:800;font-size:clamp(21px,2.3vw,30px);line-height:1;letter-spacing:-.025em;text-transform:uppercase;color:var(--sbh-ink);border-top:1px solid var(--sbh-rule);padding-top:20px}
.sbh-art h2:first-child{margin-top:0}
.sbh-art p{margin:0 0 15px;font-size:14.5px;line-height:1.7;color:var(--sbh-dim-ink);max-width:68ch}
.sbh-art ul{margin:0 0 18px;padding:0;list-style:none;max-width:68ch}
.sbh-art ul li{position:relative;padding:0 0 9px 20px;font-size:14.5px;line-height:1.65;color:var(--sbh-dim-ink)}
.sbh-art ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1.5px;background:var(--sbh-accent)}
.sbh-art strong{color:var(--sbh-ink);font-weight:800}

/* ---- incumbent components, brought into the world -----------------------
   These four classes come from the original build and still appear in the nav,
   the footer, the booking form and the endorsement page. Restyling them here
   is what stops the new sections from looking like a graft: a gold gradient
   pill and a blurred glass card belong to the identity this replaced. Selector
   specificity is unchanged, so source order alone decides, and sbh.css loads
   after styles.css. */
.btn-primary{background:var(--sbh-ink);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;padding:14px 26px;border-radius:0;box-shadow:none;transition:background .2s ease,color .2s ease}
.btn-primary:hover{background:var(--sbh-accent);color:#fff}
.btn-secondary{background:transparent;border:1.5px solid var(--sbh-rule);color:var(--sbh-ink);font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;padding:12.5px 24px;border-radius:0;transition:border-color .2s ease,background .2s ease}
.btn-secondary:hover{border-color:var(--sbh-ink);background:rgba(14,43,43,.06)}
/* over the hero the nav is transparent, so its call to action takes the
   hero's own white plate rather than ink on a dark photograph */
#nav.bg-transparent .btn-primary{background:#fff;color:var(--sbh-ink)}
#nav.bg-transparent .btn-primary:hover{background:var(--sbh-accent-lt);color:var(--sbh-ink)}

.glass-card{background:rgba(255,255,255,.72);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--sbh-rule);border-radius:0;box-shadow:none}
.glow-card{background:rgba(255,255,255,.82);border:1px solid var(--sbh-rule);border-radius:0;box-shadow:none;animation:none}

.input-field{background:#fff;border:1px solid var(--sbh-rule);border-radius:0;padding:12px 14px;color:var(--sbh-ink);font-size:14px;transition:border-color .2s ease,box-shadow .2s ease}
.input-field:focus{border-color:var(--sbh-accent);box-shadow:inset 0 -2px 0 var(--sbh-accent);outline:none}
.input-field::placeholder{color:var(--sbh-dim-ink);opacity:1}

/* Emphasis comes from weight and size. A gradient fill on a headline is the
   one thing on this page that could not survive being printed. */
.gradient-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--sbh-accent)}

.sbh-pagefoot{background:var(--sbh-page);border-top:1px solid var(--sbh-rule)}
.text-text-muted{color:var(--sbh-dim-ink)}
.sbh-pagefoot .text-\[\#0A1128\],.sbh-pagefoot p{color:var(--sbh-ink)}

/* ---- browser surfaces: the parts not drawn still carry the design ------ */
::selection{background:var(--sbh-accent);color:#fff}
.sbh-sec :focus-visible,.sbh-sec a:focus-visible{outline:2px solid var(--sbh-accent-lt);outline-offset:3px}
.sbh-sec--light :focus-visible{outline-color:var(--sbh-accent)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:1000px){
  .sbh-facts{grid-template-columns:repeat(2,1fr)}
  .sbh-fact:nth-child(2n){border-right:0;margin-right:0;padding-right:0}
  .sbh-fact:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16);margin-top:6px}
  .sbh-progs{grid-template-columns:1fr;gap:0}
  .sbh-prog{margin-top:30px}
  .sbh-faq-grid{grid-template-columns:1fr}
  .sbh-faq-aside{position:static;max-width:340px}
  .sbh-close{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sbh-facts{grid-template-columns:1fr}
  .sbh-fact{border-right:0;margin-right:0;padding-right:0}
  .sbh-fact:nth-child(n+2){border-top:1px solid rgba(255,255,255,.16);margin-top:4px}
  .sbh-band,.sbh-paper{padding:62px 0}
  .sbh-h2{font-size:27px}
}

/* ---------------------------------------------------------------------------
   The incumbent gold, and the last sub-floor type.

   #d4a017 is not in this palette (see DESIGN.md section 2), but it survived in
   two regions of markup that were reclassed rather than rewritten: the nav
   language switcher and the page footer. Overriding here, at equal specificity
   and later in source order, avoids inventing a Tailwind class that the
   compiled stylesheet would not carry.

   Attribute selectors are used rather than escaped arbitrary-value class
   selectors (.bg-\[rgba\(212\,160\,23\,0\.06\)\]) because the escaping is
   error-prone and fails silently, which is the one failure mode this site
   cannot afford.
   ------------------------------------------------------------------------- */
[class*="border-[rgba(212,160,23"]{border-color:var(--sbh-rule)}
[class*="bg-[rgba(212,160,23"]{background-color:transparent}
[class*="bg-[#D4A017]"]{background-color:var(--sbh-ink);color:#fff}
.bg-primary-accent{background-color:var(--sbh-accent)}

/* Two labels still sat at 10px in the nav and the footer, under the 11px floor
   that DESIGN.md section 7 sets for functional text. */
[class*="text-[10px]"]{font-size:11px}

/* ---------------------------------------------------------------------------
   The scrolled nav.

   site.js removes .bg-transparent past the hero and adds .bg-white/90 -- a
   class the compiled Tailwind never emitted. It therefore painted nothing, and
   the nav spent the whole page transparent with no background at all: dark
   link text over the two dark photographic bands. This is the silent-failure
   mode DESIGN.md section 1 warns about, caught only once the contrast scan was
   extended to cover #nav.

   Fixed here in literal CSS rather than by changing the class site.js adds, so
   the behaviour no longer depends on a utility class existing.
   ------------------------------------------------------------------------- */
#nav:not(.bg-transparent){
  background:rgba(225,217,226,.94);
  -webkit-backdrop-filter:saturate(1.35) blur(14px);
  backdrop-filter:saturate(1.35) blur(14px);
  border-bottom:1px solid var(--sbh-rule);
}
#nav:not(.bg-transparent) a:not(.btn-primary),
#nav:not(.bg-transparent) span,
#nav:not(.bg-transparent) button{color:var(--sbh-ink)}
#nav:not(.bg-transparent) .text-text-muted{color:var(--sbh-dim-ink)}
#nav:not(.bg-transparent) a:not(.btn-primary):hover{color:var(--sbh-accent)}
/* The CTA and the language chip keep their own grounds in both nav states. */
#nav:not(.bg-transparent) .btn-primary{background:var(--sbh-ink);color:#fff}
#nav:not(.bg-transparent) span[data-sbh="langpill"]{background:var(--sbh-ink);color:#fff}