/* ==========================================================================
   PINNACLE BJJ — LIGHT THEME (preview overlay)
   Loaded AFTER styles.css. Colour only: not one rule here touches layout,
   type scale, spacing or motion. Every selector below exists to re-ground a
   surface that the dark build hard-coded to ink.

   THE TRANSLATION
   ---------------
   The dark build gets its punch from a ~95% value swing (near-black ground,
   bone type). A light build has maybe 10% of that range, so the punch has to
   come from somewhere else. Two moves carry it:

     1. A four-step light ladder replaces the two-step dark/light alternation,
        so sections still change ground as you scroll — white, bone, warm
        mid, stone — instead of flattening into one cream page.

     2. The blue band motif stops being a glow ON black and becomes the dark
        anchor ITSELF. The closing CTA, the house-rules board, the veteran's
        quote and the contact panel all land on the brand ultramarine. What
        was ink weight is now blue weight, which is more on-brand, not less.

   Result: the only near-black left on the page is the type, the marquee
   ribbon and the belt spines. Everything that used to be a black field is
   now either light or ultramarine.
   ========================================================================== */

/* 01 THE LIGHT LADDER ------------------------------------------------------
   Four grounds, ~3% apart. Close enough to read as one light system, far
   enough apart that a seam between two sections is visible without a rule. */
:root{
  --g-0:#FFFFFF;          /* white  — the airiest sections, and the heroes  */
  --g-1:#F4F1EA;          /* bone   — the existing brand light ground       */
  --g-2:#EDE9E0;          /* warm mid                                       */
  --g-3:#E5E0D4;          /* stone  — the footer floor                      */

  /* The panel ground. --acc-deep (#000285) is the brand ultramarine at full
     saturation, which is right for a 3px rule or a button and far too hot
     across a whole panel. This is the same hue held down in value, so the
     panels read as deep brand navy rather than as a lit screen. */
  --navy:#0A1354;
  /* and the accent that sits ON those panels. Electric cyan against that
     ground was a ~10:1 jump, which is what made the blocks feel loud; this
     lands at 8:1 — still clearly an accent, no longer a flare. */
  --panel-acc:#8FB8E6;

  /* ink type on light needs the hairlines to come back up: .16/.08 alpha was
     tuned for bone-on-black, where the eye forgives a fainter line. */
  --rule-on-light:rgba(10,10,10,.20);
  --hair-on-light:rgba(10,10,10,.11);
  --mute-on-light:rgba(10,10,10,.66);

  --stroke-c:var(--ink);
}

body{ background:var(--g-1); color:var(--ink); }

/* The grain was mixing at 5% overlay against black, where it reads as film.
   At the same value on white it reads as a dirty screen. */
body::after{ opacity:.032; mix-blend-mode:multiply; }

/* 02 SECTION GROUNDS -------------------------------------------------------
   The authored rhythm is preserved exactly; only the values move. A section
   the designer marked "dark" is still the heavier of two neighbours, it is
   just heavier by 3% instead of by 95%. */
.s[data-theme="light"]      { background:var(--g-0); color:var(--ink); }
.s[data-theme="light-deep"] { background:var(--g-1); color:var(--ink); }
.s[data-theme="dark"]       { background:var(--g-2); color:var(--ink); }
.s[data-theme="light-deep"].tone-mute{ background:var(--g-2); }

/* accent + stroke resolution. On light grounds the accent is the deep
   ultramarine; only the surfaces that stay genuinely dark keep the lifted
   azure, and those are enumerated one by one in §04. */
[data-theme="dark"],[data-theme="black"]{
  --acc-c:var(--acc-deep); --acc-c2:var(--acc);
  --acc-line:rgba(0,103,170,.34); --acc-wash:rgba(0,103,170,.08);
  --stroke-c:var(--ink);
  --t-adults:var(--acc-deep); --t-womens:#6C2BD9; --t-kids:#097069;
}

/* 03 THE DARK-SCOPED COMPONENT VARIANTS ------------------------------------
   styles.css carries a [data-theme="dark"]/[black] variant for every card,
   board, rule and field — translucent white surfaces, lifted hairlines. Those
   sections are light now, so each variant has to be handed back its light
   treatment. This is a straight revert, not a redesign. */
[data-theme="dark"] .facts,[data-theme="black"] .facts{ border-top-color:var(--rule-on-light); }
[data-theme="dark"] .facts > div,[data-theme="black"] .facts > div{ border-bottom-color:var(--hair-on-light); }
[data-theme="dark"] .facts > div:nth-child(2n){ border-left-color:var(--hair-on-light); }
[data-theme="dark"] .tline > li,[data-theme="black"] .tline > li{ border-bottom-color:var(--hair-on-light); }
[data-theme="dark"] .tline-year,[data-theme="black"] .tline-year{ border-right-color:var(--rule-on-light); }
[data-theme="dark"] .collage .c3,[data-theme="black"] .collage .c3{ border-color:var(--g-0); }
[data-theme="dark"] .lead-row + .lead-row,
[data-theme="black"] .lead-row + .lead-row{ border-top-color:var(--rule-on-light); }
[data-theme="dark"] .lead-stats,[data-theme="black"] .lead-stats{ border-top-color:var(--rule-on-light); }
[data-theme="dark"] .lead-stats > div{ border-left-color:var(--hair-on-light); }
[data-theme="dark"] .faq,[data-theme="black"] .faq{ border-top-color:var(--rule-on-light); }
[data-theme="dark"] .faq details{ border-bottom-color:var(--hair-on-light); }
[data-theme="dark"] .logo-marquee,[data-theme="black"] .logo-marquee{
  border-top-color:var(--rule-on-light); border-bottom-color:var(--rule-on-light);
}
[data-theme="dark"] .nap > div{ border-bottom-color:var(--hair-on-light); }
[data-theme="dark"] .sched-glance > div{ border-color:var(--hair-on-light); }
[data-theme="dark"] .map-frame{ border-color:var(--rule-on-light); }
[data-theme="dark"] .ccard-bio{ border-top-color:var(--hair-on-light); }
[data-theme="dark"] .cteam--2up .ccard-body{ border-left-color:rgba(10,10,10,.2); }

/* cards: back onto a real white surface with a visible edge */
[data-theme="dark"] .fcard,[data-theme="black"] .fcard,
[data-theme="dark"] .pcard,[data-theme="black"] .pcard{
  background:var(--g-0); border-color:var(--bone-mute);
  box-shadow:0 14px 34px -28px rgba(10,10,10,.42);
}
[data-theme="dark"] .pcard-spec{ border-top-color:var(--bone-mute); }
[data-theme="dark"] .pcard-spec > div{ border-bottom-color:var(--bone-deep); }
[data-theme="dark"] .ccard,[data-theme="black"] .ccard{
  border-color:var(--hair-on-light); background:rgba(10,10,10,.015);
}
[data-theme="dark"] .ccard-media{ background:var(--bone-mute); }
[data-theme="dark"] .ccard--black .ccard-belt b{ color:var(--belt-black); }
[data-theme="dark"] .ccard--black .ccard-spine{ background:var(--belt-black); }
[data-theme="dark"] .book-tab,[data-theme="black"] .book-tab{
  background:var(--g-0); border-color:var(--bone-mute);
}

/* the timetable board */
[data-theme="dark"] .week,[data-theme="black"] .week{
  background:var(--g-0); border-color:var(--bone-mute);
  box-shadow:0 18px 44px -34px rgba(10,10,10,.42);
}
[data-theme="dark"] .day{ border-left-color:var(--bone-deep); }
[data-theme="dark"] .day.is-today{ background:var(--acc-wash); }
[data-theme="dark"] .day-name{ background:var(--g-1); border-bottom-color:var(--bone-mute); }
[data-theme="dark"] .day:nth-child(n+5){ border-top-color:var(--bone-deep); }
[data-theme="dark"] .slot{ border-bottom-color:var(--bone-deep); }
[data-theme="dark"] .slot-time{ color:var(--acc-deep); }
[data-theme="dark"] .day--rest{
  background:repeating-linear-gradient(115deg,transparent 0 9px,var(--hair-on-light) 9px 10px);
}
[data-theme="dark"] .chip,[data-theme="black"] .chip{ border-color:var(--rule-on-light); }
[data-theme="dark"] .chip[aria-pressed="true"],
[data-theme="black"] .chip[aria-pressed="true"]{
  background:var(--acc-deep); border-color:var(--acc-deep);
}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,
[data-theme="black"] .field input,[data-theme="black"] .field select{
  border-color:var(--rule-on-light);
}

/* the beam: the light variant already existed, it just was not reachable
   from a section marked dark */
.beam[data-theme="dark"],.beam[data-theme="black"]{
  background-image:linear-gradient(112deg,
    transparent 40%, rgba(0,2,133,.09) 48%, rgba(0,103,170,.07) 57%, transparent 68%);
}

/* the band field: blurred ultramarine at 55% was reading as a bruise on
   bone. Same geometry, a third of the weight, and the hairline overlay
   flips from white to ink or it disappears entirely. */
.bg-bands::before{
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(0,2,133,.38) 18% 27%, transparent 27% 34%,
                             rgba(11,63,212,.26) 34% 41%, transparent 41% 52%,
                             rgba(0,103,170,.30) 52% 60%, transparent 60% 66%,
                             rgba(16,227,220,.28) 66% 70%, transparent 70%);
  opacity:.30;
}
.bg-bands::after{
  background:repeating-linear-gradient(115deg,
    transparent 0 62px, rgba(10,10,10,.05) 62px 63px, transparent 63px 126px);
}

/* watermark type: an ink hairline outline at 30% is far louder than a bone
   one on black, because it sits on a ground with no noise to absorb it */
.outline-type{ opacity:.17; }
.numeral{ opacity:.13; }

/* 04 THE SURFACES THAT STAY DARK — now ultramarine, not ink -----------------
   Five inset panels in the dark build sat on ink-deep so they would separate
   from the bone sections around them. On a light page they still need to
   separate, and the brand already owns a colour that does it. */
.cta-strip,
.rulebook,
.quote-card,
.contact-form,
.book-head{ background:var(--navy); color:#fff; }

/* The band motif was drawn at 45-72% alpha because on pure black it had to
   fight its way out of the ground. On the calmer navy it only needs to
   suggest a direction, and the cyan stop is dropped entirely — it was the
   thing turning the middle of every panel into a hotspot. */
.cta-strip::before{
  background:linear-gradient(100deg,var(--navy) 20%,rgba(11,63,212,.18) 58%,transparent 100%);
}
.rulebook::before,.contact-form::before{
  background:linear-gradient(112deg,
    transparent 38%, rgba(11,63,212,.14) 54%, rgba(0,103,170,.14) 66%, transparent 80%);
}
.quote-card::before{ background:linear-gradient(to bottom,var(--acc-cyan),var(--acc-lift)); }
.quote-card::after{ color:var(--acc-cyan); opacity:.16; }
.quote-card cite span{ color:#fff; opacity:.62; }

/* these five keep the dark-ground accent resolution */
.cta-strip,.rulebook,.quote-card,.contact-form,.book-head,.marquee.inv,.modal-aside{
  --acc-c:var(--acc-lift); --acc-c2:var(--acc-lift); --stroke-c:var(--bone);
  --rule-on-light:rgba(255,255,255,.22); --hair-on-light:rgba(255,255,255,.13);
  --mute-on-light:rgba(255,255,255,.66);
}
/* a white-on-navy button hovering to ink would go muddy; cyan is the reveal */
.cta-strip .btn::before,.contact-form .btn::before{ background:var(--acc-cyan); }
.cta-strip .btn:hover,.cta-strip .btn:focus-visible{ color:var(--ink-deep); }
.cta-strip .btn-ghost{ border-color:rgba(255,255,255,.5); }
.cta-strip .btn-ghost::before{ background:var(--acc-cyan); }
.cta-strip .btn-ghost:hover,.cta-strip .btn-ghost:focus-visible{ color:var(--ink-deep); }
.cta-strip .cta-copy p,.cta-strip .cta-trust{ opacity:.84; }
.rulebook .rule-pts li,.rulebook .rule-head h3{ color:#fff; }
.contact-form .field label,.contact-form .fineprint,
.contact-form .contact-form-note{ color:#fff; }

/* the rules board no longer needs its own inset variant: on a light section
   the solid navy already separates, so both variants render identically */
.rulebook--inset{
  background:var(--navy); border:0;
  box-shadow:0 30px 70px -40px rgba(0,2,133,.55);
}
.rulebook{ box-shadow:0 30px 70px -40px rgba(0,2,133,.5); }
.quote-card{ box-shadow:0 26px 60px -38px rgba(0,2,133,.45); }
.contact-form{ box-shadow:0 30px 70px -44px rgba(0,2,133,.5); }

/* 05 HEADER ---------------------------------------------------------------
   data-chrome still flips per section; there is simply only one section left
   on the whole site that asks for the dark chrome, and it is the CTA band. */
.site-head{ color:var(--ink); }
body[data-scrolled] .site-head{
  background:rgba(244,241,234,.93);
  border-bottom-color:var(--hair-on-light);
}
body[data-scrolled][data-chrome="dark"] .site-head{
  background:rgba(0,2,133,.90); border-bottom-color:rgba(255,255,255,.14);
}
.brand .brand-mark{ opacity:0; }
.brand .brand-mark-ink{ opacity:1; }
body[data-chrome="dark"] .brand .brand-mark{ opacity:1; }
body[data-chrome="dark"] .brand .brand-mark-ink{ opacity:0; }
.nav-link::after{ background:var(--acc-deep); }
body[data-chrome="dark"] .nav-link::after{ background:var(--acc-cyan); }
.head-progress{ background:var(--acc-deep); }
body[data-chrome="dark"] .head-progress{ background:var(--acc-cyan); }
/* styles.css scopes the header button to body[data-chrome="light"], which
   outranks a bare .head-cta — the prefix has to be carried here or the rule
   below silently loses and the button stays ink. */
body[data-chrome="light"] .head-cta{ --btn-bg:var(--acc-royal); --btn-fg:#fff; }
body[data-chrome="light"] .head-cta::before{ background:var(--acc-deep); }
body[data-chrome="light"] .head-cta:hover,
body[data-chrome="light"] .head-cta:focus-visible{ color:#fff; }
body[data-chrome="dark"] .head-cta{ --btn-bg:var(--bone); --btn-fg:var(--ink); }
body[data-chrome="dark"] .head-cta::before{ background:var(--acc-cyan); }
body[data-chrome="dark"] .head-cta:hover{ color:var(--ink-deep); }

.sub{ background:var(--g-0); color:var(--ink); border-color:var(--rule-on-light);
      box-shadow:0 22px 50px -32px rgba(10,10,10,.4); }
.sub a:hover,.sub a:focus-visible{ background:rgba(0,2,133,.07); }

/* mobile overlay: bone ground, ink type, the band kept as a tint */
.mobile-nav{ background:var(--g-1); color:var(--ink); }
.mobile-nav::before{
  background:linear-gradient(112deg,transparent 38%,rgba(0,2,133,.10) 52%,
             rgba(0,103,170,.07) 64%,rgba(16,227,220,.05) 72%,transparent 86%);
}
.mnav-label{ color:var(--acc-deep); }
.mnav-list{ border-top-color:var(--hair-on-light); }
.mnav-list > li{ border-bottom-color:var(--hair-on-light); }
.mnav-list > li > a::before,.mnav-row > a::before{ color:var(--acc-deep); }
.mnav-toggle{ color:var(--ink); border-left-color:var(--hair-on-light); }
.mnav-toggle::after{ border-right-color:var(--acc-deep); border-bottom-color:var(--acc-deep); }
.mnav-sub li{ border-left-color:var(--acc-deep); }
.mnav-sub a{ color:var(--ink); }
.mnav-sub a:hover,.mnav-sub a[aria-current="page"],
.mnav-list > li > a[aria-current="page"],
.mnav-row > a[aria-current="page"]{ color:var(--acc-deep); }
.mobile-foot{ color:var(--mute-on-light); }
.mobile-foot a:hover{ color:var(--acc-deep); }
.mnav-social a{ border-color:var(--rule-on-light); }
.mnav-social a:hover{ border-color:var(--acc-deep); color:var(--acc-deep); }

/* 06 HEROES ---------------------------------------------------------------
   The photographs were carrying a brightness(.74) and a near-opaque black
   scrim because bone type had to survive on top of them. No type sits on the
   photograph any more, so the picture is allowed to be a picture: full
   brightness, and the scrim becomes a bone dissolve at the seam. */
.hero,.phero{ background:var(--g-0); color:var(--ink); }

.hero-media img{ filter:contrast(1.02) saturate(1.02); }
.hero-media::after{
  background:
    linear-gradient(to top, rgba(255,255,255,.86) 0%, rgba(255,255,255,.34) 42%,
                            rgba(255,255,255,.14) 70%, rgba(255,255,255,.4) 100%),
    radial-gradient(120% 90% at 50% 100%, transparent 40%, rgba(244,241,234,.5) 100%);
}
.hero-kicker{ color:var(--acc-deep); }
.hero-rule{ background:linear-gradient(to right,var(--acc-deep),var(--acc)); }
.hero-strip{ border-top-color:var(--rule-on-light); }
.hero-strip li{ opacity:.78; }
.hero-strip li b{ color:var(--acc-deep); opacity:1; }
.hero-grid i{ border-right-color:var(--hair-on-light); }

.hero-split .hero-strip::before{
  background:var(--g-0); border-top-color:var(--rule-on-light);
}
/* ── THE HERO PHOTOGRAPH ───────────────────────────────────────────────
   The dark build treated this picture as a backdrop: a blurred copy of
   itself behind, the photo masked to transparent at both edges, a scrim on
   top. Three softening layers stacked, which on black read as depth and on
   white read as fog.

   All three are gone. The picture is now a plate: hard edges, its own
   rectangle, held in the same band as the headline beside it rather than
   running the full height of the section. The blue does the work the blur
   used to — a gradient edge across the top and an offset hairline stepping
   out behind it, both of which the cards, the timetable and the founder
   portrait already use, so the hero is speaking the site's own language
   rather than inventing one.
   ------------------------------------------------------------------- */
/* the copy was allowed half the section because the photograph behind it was
   soft-edged and could be run into. A hard plate cannot, so the column pulls
   back enough to leave a real gutter between type and picture. */
.hero-split .hero-in > *{ max-width:min(46%, 40rem); }

.hero-split .hero-shot{
  /* held to the copy's band, and squared off against the shell's right edge
     instead of the raw viewport so it lines up with the header and the
     sections below */
  top:calc(var(--head-h) + clamp(1.5rem,3.4vw,3rem));
  /* clears the info strip below plus the hairline's own step, so the frame
     lands on the page rather than disappearing behind the strip */
  bottom:clamp(5.5rem,8.5vw,7.5rem);
  right:max(var(--gut), calc(50% - var(--shell)/2 + var(--gut)));
  width:min(42%, 560px);
  overflow:visible;                 /* the offset frame steps outside the box */
  z-index:1;                        /* over the column guides, not under them */
}
.hero-shot img{
  position:absolute; inset:0;
  width:100%; height:100%; max-width:none; margin:0;
  object-fit:cover; object-position:50% 46%;
  filter:none;
  -webkit-mask-image:none; mask-image:none;
}
/* the offset hairline. Same figure language as .split figure and .lead-shot,
   one step heavier because this is the hero. */
.hero-shot::before{
  content:""; display:block; position:absolute; inset:0; z-index:0;
  background:none; filter:none;
  border:1px solid rgba(0,103,170,.55);
  transform:translate(clamp(.7rem,1.4vw,1.15rem), clamp(.7rem,1.4vw,1.15rem));
}
/* the house edge — .facts, .week, .sched-glance and the footer all carry it */
.hero-shot::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:3;
  background:var(--acc-grad);
  inset-inline:0; bottom:auto;
}
/* a crisp boundary so the plate reads against the page, and just enough lift
   to separate it from the ground without turning into a drop-shadowed card */
.hero-split .hero-shot img{
  box-shadow:0 0 0 1px rgba(0,2,133,.14), 0 26px 54px -34px rgba(10,10,10,.4);
}

/* Between the burger breakpoint and roughly a laptop, 42% of the section is
   not enough for the two hero buttons to sit on one line. The plate gives the
   width back rather than letting the actions stack. */
@media (max-width:1280px){
  .hero-split .hero-in > *{ max-width:min(50%, 40rem); }
  .hero-split .hero-shot{ width:min(38%, 460px); }
}

@media (max-width:900px){
  /* The two rules above cap the hero copy at 46% / 50% so it clears the
     photograph beside it. Below 900px the photograph is no longer beside it —
     it stacks underneath — and the base sheet says so in its own 900px block.
     But this file loads after it at equal specificity, so the 1280px cap was
     still winning on phones: the column stayed 175px wide on a 390px screen,
     which is what cut the headline off and sliced the ends off both hero
     buttons. Stacked, the copy gets the full measure. */
  .hero-split .hero-in > *{ max-width:none; }
  /* stacked, the plate becomes a full-width band: the offset frame has no
     room to step out, so it is retired and the gradient edge carries it */
  .hero-split .hero-shot{
    top:auto; bottom:auto; right:auto; width:100%; overflow:hidden;
  }
  .hero-shot img{ object-position:50% 55%; }
  .hero-shot::before{ display:none; }
  .phero-media::after{
    background:linear-gradient(to top, rgba(255,255,255,.6), rgba(255,255,255,0) 60%);
  }
}

.phero-media img{ filter:contrast(1.02) saturate(1.02); }
.phero-media::after{
  background:linear-gradient(to right, var(--g-0) 0%, rgba(255,255,255,.45) 22%, rgba(255,255,255,0) 46%);
}
.phero-seam{ background:var(--ink); opacity:.16; }
.phero .lede{ color:var(--mute-on-light); }
.phero::after{ background:var(--ink); opacity:.14; }
.crumbs{ color:var(--mute-on-light); border-bottom-color:var(--rule-on-light); }
.crumbs a:hover{ color:var(--ink); }
.phero-tags span{ border-color:var(--rule-on-light); color:var(--mute-on-light); }

/* 07 FOOTER ---------------------------------------------------------------
   Stone, not ink. It is the floor of the page rather than a second hero, and
   the ultramarine CTA band directly above it is already doing the anchoring.
   The gradient hairline across the top edge survives unchanged. */
.site-foot{ background:var(--g-3); color:var(--ink); }
.foot-brand p{ opacity:.72; }
.foot-col h3{ color:var(--acc-deep); }
.foot-col a{ opacity:.78; }
.foot-col a:hover{ opacity:1; color:var(--acc-deep); }
.foot-col address{ opacity:.78; }
.foot-col address a:hover{ color:var(--acc-deep); }
.foot-bottom{ border-top-color:var(--hair-on-light); }
.foot-bottom p,.foot-bottom a{ opacity:.62; }
.foot-bottom a:hover{ opacity:1; color:var(--acc-deep); }
.socials a{ border-color:var(--rule-on-light); }
.socials a:hover{ border-color:var(--acc-deep); color:var(--acc-deep); }
.book-foot .foot-bottom{ border-top:0; }

/* 08 TRIAL MODAL ----------------------------------------------------------
   The navy rail stays exactly as designed; only the form half comes up to
   white, so the panel now reads as one navy block and one paper block. */
.modal-veil{ background:rgba(10,10,10,.55); }
.modal-panel{
  background:var(--g-0); color:var(--ink); border-color:var(--rule-on-light);
  box-shadow:0 40px 90px -40px rgba(10,10,10,.45);
}
.modal-intro{ color:var(--mute-on-light); opacity:1; }
.modal-body .field label{ color:var(--ink); opacity:.75; }
.modal-body .field input,.modal-body .field select{
  background-color:#fff; border-color:var(--rule-on-light); color:var(--ink);
}
.modal-body .field input:focus,.modal-body .field select:focus{
  border-color:var(--acc-deep); box-shadow:0 0 0 2px rgba(0,2,133,.14);
  background-color:#fff;
}
.modal-body .field input::placeholder{ color:rgba(10,10,10,.38); }
.modal-body .req{ color:var(--acc-deep); }
.modal-body .form-status{ border-left-color:var(--acc-deep); background:var(--acc-wash); }
.modal-body .btn{ --btn-bg:var(--acc-royal); --btn-fg:#fff; }
.modal-body .btn::before{ background:var(--acc-deep); }
.modal-body .btn:hover,.modal-body .btn:focus-visible{ color:#fff; }
.modal-body .fineprint{ color:var(--mute-on-light); opacity:1; }
.modal-body .fineprint a{ color:var(--acc-deep); }
.modal-close{
  background:rgba(255,255,255,.75); border-color:var(--rule-on-light); color:var(--ink);
}
.modal-close:hover{ border-color:var(--acc-deep); color:var(--acc-deep); background:#fff; }

/* 09 THE REMAINING INK FIELDS ---------------------------------------------
   Kept deliberately. A thin black ribbon and a black caption chip read as
   ink on paper, which is the point; a black SECTION would not. */
.collage figcaption,.gallery figcaption{ background:var(--ink); color:var(--bone); }
.field option{ background:var(--g-0); color:var(--ink); }
.marquee{ background:var(--g-2); border-color:var(--rule-on-light); }

/* 10 FORM + MISC ----------------------------------------------------------- */
.contact-form .field input,.contact-form .field select{
  background-color:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26);
}
.contact-form .field input:focus,.contact-form .field select:focus{
  background-color:rgba(255,255,255,.14);
}
.panel-lift{ box-shadow:0 26px 60px -34px rgba(10,10,10,.34); }
.pcard,.fcard{ box-shadow:0 14px 34px -28px rgba(10,10,10,.42); }
@media (hover:hover) and (pointer:fine){
  .pcard:hover{ box-shadow:0 22px 48px -26px rgba(10,10,10,.4); }
}
.week{ box-shadow:0 18px 44px -34px rgba(10,10,10,.42); }
.book-cal-frame{ box-shadow:0 26px 60px -40px rgba(10,10,10,.4); }
.sched-live{ box-shadow:0 18px 44px -34px rgba(10,10,10,.42); }
.book-alert{ box-shadow:0 24px 60px -34px rgba(0,2,133,.5); }
.book-facts > div{ border-bottom-color:var(--hair-on-light); }
.book-steps li{ border-top-color:var(--rule-on-light); }
.book-tel span{ color:#fff; }
.map-frame{ border-color:var(--rule-on-light); }

/* ==========================================================================
   11 CORRECTION PASS — the things that only show up once it is rendered
   ========================================================================== */

/* — the diagonal band. The cyan stop was reading as mint against bone, which
     is a hue the brand does not own. Dropping it leaves ultramarine → azure,
     which is the part of the gradient that means something. ---------------- */
.bg-bands::before{
  background:linear-gradient(115deg,
    transparent 0 18%, rgba(0,2,133,.34) 18% 27%, transparent 27% 34%,
    rgba(11,63,212,.24) 34% 41%, transparent 41% 52%,
    rgba(0,103,170,.26) 52% 60%, transparent 60% 70%);
  opacity:.26;
}

/* — the textures were calibrated as light-on-black. The same alpha as
     ink-on-bone is roughly twice as loud, and .bg-ledger in particular was
     turning the section into ruled notepaper. -------------------------------- */
.bg-ledger::before   { opacity:.05; }
.bg-blueprint::before{ opacity:.05; }
.bg-lattice::before  { opacity:.04; }
.bg-dots::before     { opacity:.07; }
.bg-cols::before     { opacity:.05; }
.bg-rings::before    { opacity:.05; }
.bg-mesh::before     { opacity:.04; }
.bg-spot::after      { opacity:.05; }
.hero-grid i         { border-right-color:rgba(10,10,10,.07); }

/* — CONTRAST.
     This is the one place where a straight port genuinely does not work.
     Bone type on black is forgiving: at 55% alpha it still clears 7:1. Ink
     type on bone at the same 55% lands at 4.3:1 and fails. Every muted value
     below is lifted to clear 4.5:1 against the lightest ground it can land
     on. Nothing else about these rules changes. ---------------------------- */
.fineprint,
.lead-stats span,
.sched-glance dd,
.rules-mission cite,
.ccard-bio summary,
.book-tab-s,
.book-cal-loading,
.book-cal-prompt,
.sched-live-loading,
.slot-who,
.strip-foot{ opacity:.68; }

.tline-year span,
.ccard-bio .bio-text cite,
.nap-row.is-off,
.day-rest{ opacity:.62; }

/* .55 put the day-count at 4.3:1, and it is set at 9px — the smallest type on
   the timetable and the one a phone screen struggles with most. */
.opt{ opacity:.55; }
.day-count{ opacity:.72; }
.edge-label{ opacity:.5; }
.lead-title{ opacity:.66; }

/* nested opacity multiplies: a .78 link inside a .78 address resolved to .61,
   which is why the phone and email read lighter than the street address
   directly above them */
.foot-col address a,.foot-col address{ opacity:1; color:var(--mute-on-light); }
.foot-col address a:hover{ color:var(--acc-deep); }
/* same trap in the mobile menu: .7 inside .mobile-foot's .66 resolved to .46,
   which put the opening hours at 3.2:1 — on the one surface that only ever
   gets read on a phone */
.mnav-hours{ opacity:1; color:var(--mute-on-light); }

/* — the affiliation marks sit on white plates so that mixed source files (an
     opaque JPEG seal, a transparent PNG, a mark on its own black field) all
     read as one row. On a white section the plate disappeared and the marks
     looked like they were floating, so the plate needs an edge. ------------ */
.logo-item{ border:1px solid var(--bone-mute); }

/* — azure on ultramarine is around 2.5:1. Cyan is the accent that survives
     on this ground, and it is already the one the navy panels use. --------- */
.quote-card cite{ color:var(--acc-cyan); }


/* opacity on a parent cannot be undone by a child: dimming .fineprint to .68
   was dragging the cyan phone and email links down with it. Mute by colour
   here instead, so the links keep their full value. */
.contact-form .fineprint,.modal-body .fineprint{ opacity:1; }
.contact-form .fineprint{ color:rgba(255,255,255,.74); }
.contact-form .fineprint a{ color:var(--acc-cyan); opacity:1; }
.modal-body .fineprint a{ color:var(--acc-deep); opacity:1; }

/* — two inheritance traps. .modal-aside and .book-head both draw their own
     navy ground but take their text colour from an ancestor (.modal-panel,
     .site-head), and both of those ancestors just went ink. Result: ink type
     on ultramarine, effectively invisible. They need the colour stated. */
.modal-aside{ color:#fff; }
.modal-aside .modal-points li,.modal-aside h2,.modal-aside .modal-call{ color:#fff; }
.book-head{ color:var(--bone); }
.book-head .brand .brand-mark{ opacity:1; }
.book-head .brand .brand-mark-ink{ opacity:0; }

/* — the band behind the mobile overlay was a full-strength motif on ink. Even
     at a tenth of the alpha it was streaking the bone ground; a flat, very
     low wash keeps the reference without the smear. */
.mobile-nav::before{
  background:linear-gradient(112deg,transparent 40%,rgba(0,2,133,.05) 56%,
             rgba(0,103,170,.035) 68%,transparent 84%);
}

/* — the booking page was authored as a black page, so its accents are all
     cyan. Cyan on white is roughly 1.5:1. Everything below the navy bar and
     the navy alert moves to the deep ultramarine; the two navy surfaces keep
     their cyan, because that is where cyan works. --------------------------- */
.book-title em,
.book-facts dt,
.book-steps .is-current .book-step-s,
.book-cal-h::after{ color:var(--acc-deep); }
.book-steps li{ opacity:.58; }
.book-steps .is-done{ opacity:.85; }
.book-steps .is-current{ opacity:1; border-top-color:var(--acc-deep); }
.book-steps .is-current .book-step-n{
  background:var(--acc-deep); border-color:var(--acc-deep); color:#fff;
}
.mnav-toggle:focus-visible{ outline-color:var(--acc-deep); }

/* .site-head was set to ink unconditionally above. The closing CTA band is the
   one section left that still inverts the chrome, so the bar needs its bone
   text back for the length of that band. The logo pair already swaps. */
body[data-chrome="dark"] .site-head{ color:var(--bone); }

/* the dropdown's top edge is drawn with currentColor so it inverts with the
   panel. On a bone panel that resolves to a solid black bar; the accent is
   the better read and it ties the panel to the rest of the chrome. */
.sub::before{ background:var(--acc-deep); }

/* ==========================================================================
   12 CALL-TO-ACTION BUTTONS
   In the dark build an ink button was the one genuinely light-on-dark object
   on the page, so black WAS the emphasis. Invert the ground and that reading
   inverts with it: a black slab on white is a hole, not a call to action.

   The primary moves onto the brand royal — brighter, the same weight, and
   the same blue already carrying the gradient edges, the panels and the mark
   itself. Hover deepens to the ultramarine instead of flipping to a light
   fill, so the label stays white the whole way through and nothing flashes
   mid-transition.

   Two surfaces are deliberately excluded and re-asserted at the end: the
   ultramarine CTA band and the navy contact panel. A royal button on an
   ultramarine ground would vanish; those keep the bone button they need.
   ========================================================================== */
[data-theme="light"] .btn,
[data-theme="light-deep"] .btn,
[data-theme="dark"] .btn{ --btn-bg:var(--acc-royal); --btn-fg:#fff; }

[data-theme="light"] .btn::before,
[data-theme="light-deep"] .btn::before,
[data-theme="dark"] .btn::before{ background:var(--acc-deep); }

[data-theme="light"] .btn:hover,[data-theme="light"] .btn:focus-visible,
[data-theme="light-deep"] .btn:hover,[data-theme="light-deep"] .btn:focus-visible,
[data-theme="dark"] .btn:hover,[data-theme="dark"] .btn:focus-visible{ color:#fff; }

/* the outline partner: blue rule, blue label, filling solid on hover */
[data-theme="light"] .btn-ghost,
[data-theme="light-deep"] .btn-ghost,
[data-theme="dark"] .btn-ghost{
  --btn-bg:transparent; --btn-fg:var(--acc-royal);
  color:var(--acc-royal); border-color:rgba(11,63,212,.5);
}
[data-theme="light"] .btn-ghost::before,
[data-theme="light-deep"] .btn-ghost::before,
[data-theme="dark"] .btn-ghost::before{ background:var(--acc-royal); }
[data-theme="light"] .btn-ghost:hover,[data-theme="light"] .btn-ghost:focus-visible,
[data-theme="light-deep"] .btn-ghost:hover,[data-theme="light-deep"] .btn-ghost:focus-visible,
[data-theme="dark"] .btn-ghost:hover,[data-theme="dark"] .btn-ghost:focus-visible{
  color:#fff; border-color:var(--acc-royal);
}

/* the two navy grounds keep their bone button — stated after the rules above
   so section theme cannot drag them back to blue-on-blue */
.cta-strip .btn,.contact-form .btn{ --btn-bg:var(--bone); --btn-fg:var(--ink); }
.cta-strip .btn-ghost{
  --btn-bg:transparent; --btn-fg:#fff;
  color:#fff; border-color:rgba(255,255,255,.5);
}

/* ==========================================================================
   13 THE NAVY PANEL FAMILY, CALMED
   Six surfaces share one treatment: full-saturation ultramarine, a diagonal
   bloom at 45-72% alpha, and electric cyan accents on top. That stack was
   built to survive on a pure-black page, where it had to shout to register.
   Sitting in a light layout it is the loudest thing on the site.

   Three moves, applied to the whole family so they stay one system:
     · the ground drops to the held-down navy (see --navy)
     · the bloom drops to ~.14 and loses its cyan stop, so the panel reads
       as an even field with a direction rather than a lit patch
     · cyan and lifted azure are re-pointed at --panel-acc for anything
       INSIDE a panel, which catches every accent in one rule instead of
       chasing thirty selectors

   Nothing outside these six surfaces changes: the timetable tags, the card
   badges and the marquee keep the original cyan.
   ========================================================================== */
.feature-panel,
.modal-aside,
.book-alert,
.feature-shot figcaption{ background:var(--navy); }

.feature-panel::after,
.modal-aside::after,
.book-alert::after,
.rulebook--inset::before{
  background:linear-gradient(112deg,
    transparent 38%, rgba(11,63,212,.14) 54%, rgba(0,103,170,.14) 66%, transparent 80%);
}
/* the cyan halo over the CTA band was the last hotspot left in it */
.cta-glow{ opacity:.4; }

/* the one rule that re-points every accent inside a panel. Custom properties
   resolve where they are USED, so overriding them on the container reaches
   every descendant — the eyebrows, the stat numerals, the outline numbers,
   the belt stripes, the bullet dots, the link rules, all of it. */
.feature-panel,
.modal-aside,
.rulebook,
.quote-card,
.contact-form,
.cta-strip,
.book-alert,
.book-head{
  --acc-cyan:var(--panel-acc);
  --acc-lift:var(--panel-acc);
}

/* ==========================================================================
   14 TWO BLUES
   The build had inherited five: ultramarine #000285, royal #0B3FD4, azure
   #0067AA, lifted azure #2E9BDD and cyan #10E3DC, plus the navy panels.
   Nothing was wrong with any one of them; there were simply too many, and
   they were close enough to read as drift rather than as a system.

   Everything now resolves to two, taken from the brand itself:

     --brand  #0023A7   sampled straight out of the logo mark. The action
                        colour: buttons, the nav underline, the scroll rule,
                        the live states.
     --navy   #0A1354   the panel ground. Every blue WORD on a light page —
                        the address line, the marquee, section numerals,
                        stat figures, eyebrows, rules.

   Plus one tint, --panel-acc, for accents sitting ON the navy, where either
   of the two would disappear.

   This is done by re-pointing the primitives rather than by chasing the
   several hundred rules that use them, so anything referencing the old
   names follows automatically and nothing can be missed.
   ========================================================================== */
:root{
  --brand:#0023A7;

  --acc-deep:#0A1354;          /* was #000285 — the one navy            */
  --acc-royal:var(--brand);    /* was #0B3FD4 — the logo blue           */
  --acc:var(--brand);          /* was #0067AA — azure folded in         */
  --acc-lift:var(--panel-acc); /* was #2E9BDD — lives only on navy now  */
  --acc-cyan:var(--panel-acc); /* was #10E3DC — cyan retired            */

  --acc-line:rgba(0,35,167,.30);
  --acc-wash:rgba(0,35,167,.07);

  /* the signature edge, rebuilt on the two blues and their tint */
  --acc-grad:linear-gradient(115deg,var(--navy) 0%,var(--brand) 62%,var(--panel-acc) 100%);
}

/* the theme-scoped copies of the same two variables */
[data-theme="dark"],[data-theme="black"],
[data-theme="light"],[data-theme="light-deep"]{
  --acc-c:var(--navy); --acc-c2:var(--brand);
  --acc-line:rgba(0,35,167,.30); --acc-wash:rgba(0,35,167,.07);
}
/* …re-asserted for the navy panels, where a navy accent would vanish */
.feature-panel,.modal-aside,.rulebook,.quote-card,.contact-form,
.cta-strip,.book-alert,.book-head,.marquee.inv{
  --acc-c:var(--panel-acc); --acc-c2:var(--panel-acc);
}
.marquee{ --acc-c:var(--navy); }

/* the literal rgba values that could not be expressed through a token */
.hero-shot::before{ border-color:rgba(0,35,167,.42); }
[data-theme="light"] .btn-ghost,
[data-theme="light-deep"] .btn-ghost,
[data-theme="dark"] .btn-ghost{ border-color:rgba(0,35,167,.5); }
.sub a:hover,.sub a:focus-visible{ background:rgba(0,35,167,.07); }
body[data-scrolled][data-chrome="dark"] .site-head{ background:rgba(10,19,84,.93); }
.cta-strip::before{
  background:linear-gradient(100deg,var(--navy) 20%,rgba(0,35,167,.26) 58%,transparent 100%);
}
.feature-panel::after,.modal-aside::after,.book-alert::after,
.rulebook::before,.rulebook--inset::before,.contact-form::before{
  background:linear-gradient(112deg,
    transparent 38%, rgba(0,35,167,.22) 54%, rgba(0,35,167,.13) 68%, transparent 82%);
}
.bg-bands::before{
  background:linear-gradient(115deg,
    transparent 0 18%, rgba(10,19,84,.34) 18% 27%, transparent 27% 34%,
    rgba(0,35,167,.24) 34% 41%, transparent 41% 52%,
    rgba(0,35,167,.20) 52% 60%, transparent 60% 70%);
}
.beam[data-theme="dark"],.beam[data-theme="black"],
.beam[data-theme="light"],.beam[data-theme="light-deep"]{
  background-image:linear-gradient(112deg,
    transparent 40%, rgba(10,19,84,.08) 48%, rgba(0,35,167,.06) 57%, transparent 68%);
}
.mobile-nav::before{
  background:linear-gradient(112deg,transparent 40%,rgba(10,19,84,.06) 56%,
             rgba(0,35,167,.04) 68%,transparent 84%);
}
.rulebook,.rulebook--inset{ box-shadow:0 30px 70px -40px rgba(10,19,84,.55); }
.quote-card{ box-shadow:0 26px 60px -38px rgba(10,19,84,.5); }
.contact-form{ box-shadow:0 30px 70px -44px rgba(10,19,84,.55); }
.book-alert{ box-shadow:0 24px 60px -34px rgba(10,19,84,.5); }
.hero-split .hero-shot img{
  box-shadow:0 0 0 1px rgba(0,35,167,.16), 0 26px 54px -34px rgba(10,10,10,.4);
}
.modal-body .field input:focus,.modal-body .field select:focus{
  box-shadow:0 0 0 2px rgba(0,35,167,.16);
}

/* the active filter chip is a live state, so it takes the action colour */
[data-theme="dark"] .chip[aria-pressed="true"],
[data-theme="black"] .chip[aria-pressed="true"],
.chip[aria-pressed="true"],.chip.on{ background:var(--brand); border-color:var(--brand); }

/* ==========================================================================
   15 BROWN BELT
   The belt scale stopped at purple because nobody held a brown one when the
   site was built. Coach Lang was promoted in July, so the rank needs a real
   colour rather than falling through to the default grey.
   ========================================================================== */
:root{ --belt-brown:#6B4423; }
.ccard--brown .ccard-belt b{ color:var(--belt-brown); }
.ccard--brown .ccard-belt i{ opacity:1; }
.ccard--brown .ccard-spine{ background:var(--belt-brown); }

/* ==========================================================================
   16 INSTRUCTOR PHOTOGRAPHS
   Not theme work — these are faults in the responsive rules that exist in the
   dark build too. They live here so styles.css stays revertible; fold them
   back into the base sheet whenever the light theme stops being a layer.

   a) Below 560px the coach portrait is re-cut to 16/10, but the FRAME it sits
      in keeps its 4/5 ratio. The picture fills the top and the rest of the
      box renders as empty grey. The frame has to be re-cut with it.

   b) Albert's photograph is the only landscape file in the set (2500x1667;
      every other coach is a ~2:3 portrait). Cropped to a portrait frame from
      the horizontal centre it cuts him in half, because he stands at about
      26% from the left rather than in the middle. He needs his own anchor.
   ========================================================================== */
@media (max-width:560px){
  .cteam--2up .ccard-media{ aspect-ratio:16/10; }
}
img[src$="albert-abril-coach-pinnacle-bjj.jpg"]{ object-position:4% 18% !important; }

/* c) An odd number of coaches leaves the last card spanning both columns, so
      the base sheet narrows that one portrait to 21% to stop it dominating.
      Correct on a two-column grid — but the grid collapses to one column at
      900px and the override never lifts, so with three coaches Jessica's
      photograph stays pinned at 21% of the card all the way down to a phone
      (78px wide on a 414px screen). The selector carries five classes, so it
      outranks every responsive rule that tries to reset it. */
@media (max-width:900px){
  .cteam--2up .ccard:last-child:nth-child(odd) .ccard-media{
    width:37%; aspect-ratio:4/5;
  }
}
@media (max-width:560px){
  .cteam--2up .ccard:last-child:nth-child(odd) .ccard-media{
    width:100%; aspect-ratio:16/10;
  }
}

/* d) .cteam--2up asks for one column below 900px, but a later .cteam rule in
      the base sheet re-asserts two columns below 980px. Equal specificity, so
      source order decides and the wrong one wins: on a tablet the coach cards
      stay two-up with a 127px-wide photograph strip. Same selector, one class
      heavier, so the intent holds. */
@media (max-width:900px){
  .cteam.cteam--2up{ grid-template-columns:minmax(0,1fr); }
}

/* ==========================================================================
   17 INSTAGRAM CALL-OUT  (experience page)
   The gallery's hover captions are gone, so the mosaic is now purely visual
   and the handoff to the live feed is the section's only action. It gets the
   weight of one: the house gradient edge, the mark, the handle and a real
   button, rather than a line of small print nobody reads.
   ========================================================================== */
.ig-cta{
  display:flex; align-items:center; gap:clamp(.9rem,2vw,1.6rem);
  flex-wrap:wrap;
  margin-top:clamp(1.4rem,2.8vw,2.2rem);
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.1rem,2.4vw,1.8rem);
  background:var(--g-0);
  border:1px solid var(--bone-mute);
  border-top:3px solid transparent;
  border-image:var(--acc-grad) 1;
  border-image-width:3px 0 0 0;
  box-shadow:0 18px 44px -34px rgba(10,10,10,.4);
}
.ig-mark{
  flex:none; width:clamp(34px,4vw,42px); height:auto;
  color:var(--brand);
}
.ig-copy{ flex:1 1 20rem; min-width:0; display:grid; gap:.25rem; }
.ig-copy b{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  letter-spacing:var(--track-display);
  font-size:clamp(1.15rem,2vw,1.5rem); line-height:1;
  color:var(--navy);
}
.ig-copy span{ font-size:.9rem; line-height:1.5; color:var(--mute-on-light); }
.ig-cta .btn{ flex:none; }
@media (max-width:560px){
  .ig-cta{ gap:.9rem; }
  .ig-cta .btn{ width:100%; justify-content:center; }
}

/* the masthead's Instagram button — the mark sized to the label beside it */
.phero-ig{ margin-top:clamp(1rem,2vw,1.4rem); }
.phero-ig .ig-mark{ width:1.2em; height:1.2em; flex:none; color:currentColor; }

/* ==========================================================================
   20 THE MOBILE HEADER — a solid bar, not a frosted one
   A translucent bar over a backdrop blur is a wide-screen treatment: there is
   room around it, and the blur reads as depth. On a handset the same bar is
   64px of an ~840px screen with the whole page running directly under it, and
   93% is not opaque — a navy section or a photograph ghosts straight through
   it, so the page visibly scrolls behind the navigation.

   Below the burger breakpoint the bar gets a solid ground instead, in both
   chrome modes, and it arrives without a fade: the background transition is
   dropped here so the ground is simply there the moment the first scroll
   registers rather than cross-fading in over a quarter of a second while the
   page moves underneath. The blur goes with it — it costs a compositor layer
   on exactly the devices least able to spare one, and with an opaque ground
   there is nothing left to blur.

   The bar carries its ground at rest too. Letting it go transparent until the
   first scroll looked better in a screenshot, but it put the one thing that
   must never fail behind a condition that can.
   ========================================================================== */
/* THE RULE MUST NOT DEPEND ON JAVASCRIPT.
   The first version of this keyed off body[data-scrolled], which main.js sets
   on scroll. That is fine until main.js is slow, cached stale, blocked or
   throws — and then the bar has no ground at all, for the whole session, and
   the page runs visibly under a transparent header. That is the exact failure
   being reported from a real handset, and it is not reproducible in a desktop
   browser where the script always arrives. So on mobile the ground is
   unconditional: it is painted by CSS alone, scrolled or not, and nothing the
   script does or fails to do can take it away.

   Every state is spelled out because styles.css reaches the header through
   `body[data-scrolled][data-chrome="light"] .site-head` — three attributes
   and a class. Anything lighter loses to it regardless of file order. The
   :not(.book-head) guard keeps book.html and 404.html on their own navy
   masthead, which is position:static by design and scrolls away. */
@media (max-width:1024px){
  body .site-head:not(.book-head),
  body[data-chrome="light"] .site-head:not(.book-head),
  body[data-scrolled] .site-head:not(.book-head),
  body[data-scrolled][data-chrome="light"] .site-head:not(.book-head){
    background:var(--g-1);
    border-bottom-color:var(--hair-on-light);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:height 420ms var(--ease), color var(--chrome-t) var(--ease),
               border-color var(--chrome-t) var(--ease);
  }
  body[data-chrome="dark"] .site-head:not(.book-head),
  body[data-scrolled][data-chrome="dark"] .site-head:not(.book-head){
    background:var(--navy);
    border-bottom-color:rgba(255,255,255,.14);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* The film grain is position:fixed across the whole viewport with a blend
     mode, at z-index 9000 — above the header's 8000. A full-screen blended
     layer has to be recomposited on every scroll frame, and on iOS that is a
     well-worn way to make position:fixed elements lag behind the scroll, which
     reads as the bar coming unstuck. At 3.2% on a phone screen it is buying a
     texture nobody can see. It stays on desktop, where it was designed. */
  body::after{ display:none; }
}