@charset "utf-8";
/* ==========================================================================
   MATAR INSURANCE SERVICES — matar.css
   Built to the Matar Insurance brand identity system.

   Colour   Navy #0D1B2A (~60%) · Warm white #F7F5F0 (~32%) · Gold #B99653 (<=8%)
            Ink #14161A (body text). No fifth colour — greys are navy/paper at
            low opacity.
   Type     Archivo, weights 400/500 only. Never bold. No italics. Uppercase +
            wide tracking is reserved for the wordmark and labels — never body copy.
   Figures  Tabular numerals on every premium, policy number, sum insured, date.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root{
  /* brand */
  --navy:      #0D1B2A;
  --navy-lift: #16283C;   /* navy raised — panels on navy, never a new hue */
  --paper:     #F7F5F0;
  --white:     #FFFFFF;
  --gold:      #B99653;
  --ink:       #14161A;

  /* derived greys: navy or paper at low opacity, nothing new */
  --ink-mute:   #5D656D;              /* body-secondary on light — 5.4:1 on paper */
  --paper-mute: #A7AFB8;              /* body-secondary on navy  — 8.0:1 on navy  */
  --rule-light: rgba(20,22,26,.14);   /* hairline on light */
  --rule-dark:  rgba(247,245,240,.16);/* hairline on navy  */
  --gold-soft:  rgba(185,150,83,.34);
  --gold-faint: rgba(185,150,83,.16);

  /* type */
  --latin:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font:   var(--latin);

  /* space */
  --gut: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --band: clamp(72px, 9.5vw, 128px);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}


/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-block-start:88px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  font-synthesis-weight:none;         /* never let the browser fake a bold */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
strong,b{ font-weight:500; }           /* the system has no bold */
em,i{ font-style:normal; }             /* the system has no italic */

::selection{ background:var(--gold); color:var(--navy); }

/* Focus ring. Gold is only 2.5:1 on warm white, which fails WCAG 1.4.11 for a
   focus indicator — so the ring is navy on light surfaces and gold on navy. */
:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:1px;
}
.nav :focus-visible,
.foot :focus-visible,
.hero :focus-visible,
.pagehead :focus-visible,
.menu :focus-visible,
.band--navy :focus-visible,
.on-navy :focus-visible,
.ticker :focus-visible,
.skip:focus-visible{ outline-color:var(--gold); }

.num{ font-variant-numeric:tabular-nums; }

.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--navy); color:var(--paper);
  padding:14px 22px; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ inset-inline-start:0; }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */

.eyebrow{
  font-size:11px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 24px;
  display:flex;
  align-items:center;
  gap:16px;
  line-height:1.4;
}
.eyebrow::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  max-width:104px;
  background:var(--gold-soft);
}
.on-navy .eyebrow{ color:var(--paper-mute); }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ display:none; }

.h1{
  font-size:clamp(36px, 5.6vw, 68px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  max-width:19ch;
}
.h2{
  font-size:clamp(28px, 3.6vw, 44px);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.014em;
  margin:0 0 20px;
  max-width:24ch;
}
.h3{
  font-size:clamp(19px, 1.9vw, 23px);
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.006em;
  margin:0 0 10px;
}

.h1 .soft{ display:block; color:var(--paper-mute); }

.lede{
  font-size:clamp(16px, 1.2vw, 18px);
  line-height:1.7;
  color:var(--ink-mute);
  max-width:58ch;
  margin:0;
}
.on-navy .lede{ color:var(--paper-mute); }

.label{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:0;
  line-height:1.5;
}
.on-navy .label{ color:var(--paper-mute); }

/* --------------------------------------------------------------------------
   4. SHELL
   -------------------------------------------------------------------------- */

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.band{ padding-block:var(--band); position:relative; }
.band--navy{ background:var(--navy); color:var(--paper); }
.band--tint{ background:var(--white); }
.band--tight{ padding-block:clamp(52px,6vw,80px); }
.on-navy{ color:var(--paper); }

/* rain motif — gold hairlines, the deck's watermark, used sparingly */
.rain{
  position:absolute; inset-block-start:0; inset-inline-end:0;
  width:min(420px,44vw); height:100%;
  pointer-events:none; opacity:.5;
  overflow:hidden;
}
.rain svg{ width:100%; height:100%; }

.divider{
  height:1px; border:0; margin:0;
  background:var(--rule-light);
}
.on-navy .divider,.band--navy .divider{ background:var(--rule-dark); }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */

.ticker{
  background:var(--navy);
  color:var(--paper-mute);
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-align:center;
  padding:10px var(--gut);
  border-block-end:1px solid var(--rule-dark);
  line-height:1.5;
}
.ticker b{ color:var(--paper); font-weight:500; }

.nav{
  position:sticky; inset-block-start:0; z-index:60;
  background:rgba(13,27,42,.94);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-block-end:1px solid var(--rule-dark);
}
.nav__in{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
  min-height:76px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

/* Logo lockup. The mark carries a second line of type at ~14% of its height,
   so anything under ~44px renders that line illegibly. */
.lockup{ display:flex; align-items:center; flex:none; }
.lockup img{ height:60px; width:auto; }
.foot .lockup img{ height:64px; }
@media (max-width:520px){ .lockup img{ height:44px; } }

.nav__links{
  display:flex; align-items:center; gap:30px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper);
}
.nav__link{ position:relative; padding-block:8px; color:#D5DBE1; transition:color .3s var(--ease); }
.nav__link::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0;
  height:1px; width:0; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav__link:hover{ color:var(--paper); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ width:100%; }
.nav__link[aria-current="page"]{ color:var(--paper); }

.nav__lang{
  font-size:11px; letter-spacing:.16em;
  color:var(--paper-mute);
  padding:8px 12px;
  border:1px solid var(--rule-dark);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.nav__lang:hover{ color:var(--paper); border-color:var(--gold); }

.nav__cta{
  border:1px solid var(--gold-soft);
  color:var(--paper);
  padding:12px 22px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav__cta:hover{ background:var(--gold-faint); border-color:var(--gold); }

/* hamburger */
.burger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--rule-dark); cursor:pointer;
  padding:0;
}
.burger span{
  display:block; width:18px; height:1px; background:var(--paper);
  position:relative; transition:background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1px; background:var(--paper);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

.menu{
  display:none;
  border-block-start:1px solid var(--rule-dark);
  background:var(--navy);
  padding:8px var(--gut) 28px;
}
.menu.is-open{ display:block; }
.menu a{
  display:block;
  padding:16px 0;
  border-block-end:1px solid var(--rule-dark);
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper);
}
.menu a:last-child{ border-block-end:0; }
.menu__lang{ color:var(--gold) !important; }

@media (max-width:900px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
}

/* --------------------------------------------------------------------------
   5b. PHOTO HERO
   Two ways to hang a photograph here, both optional — if neither is used the
   navy gradient carries the page, so a missing image looks deliberate rather
   than broken.

   1. Background slot (simple, no markup):
        <section class="pagehead pagehead--photo"
                 style="--hero-img:url('assets/img/hero-other.jpg')">

   2. Media layer (cinematic — full-bleed image with a slow parallax drift):
        <section class="pagehead pagehead--photo pagehead--cine" data-hero>
          <div class="pagehead__media"><img src="…" alt=""></div>
   -------------------------------------------------------------------------- */

.pagehead.pagehead--photo{
  background-color:var(--navy);
  background-image:var(--hero-img, none);
  background-size:cover;
  background-position:center 55%;
  background-repeat:no-repeat;
  /* Tall enough for a real photograph to read. The content is centred rather
     than top-aligned so the headline sits on the image, not above it. */
  min-height:clamp(420px, 46vw, 600px);
  display:flex; align-items:center;
  padding-block:clamp(64px,8vw,96px);
}

/* ---- cinematic variant ----------------------------------------------------
   Full-bleed photograph, copy anchored low-left where the scrim is heaviest.
   Height is capped in px as well as vh so a tall desktop window does not turn
   the hero into a full page of photograph with a headline lost at the bottom.
   -------------------------------------------------------------------------- */
/* Two classes, because `.pagehead.pagehead--photo` above also sets padding and
   would otherwise win on specificity and flatten this back to symmetric. */
.pagehead.pagehead--cine{
  display:flex;
  align-items:flex-end;
  min-height:clamp(520px, 82vh, 880px);
  /* Heavy at the top, light at the foot: the copy sits low and the space above
     it is the photograph doing its job. */
  padding-block:clamp(132px,17vw,224px) clamp(52px,6.5vw,84px);
}
.pagehead--cine .wrap{ width:100%; }
/* A 58ch measure runs the lede out across the middle of the frame, which is
   where every one of these photographs is brightest. Pulling both measures in
   keeps the copy over the scrim's heavy side instead of asking the scrim to
   cover the whole width — which is what buys the photograph its light scrim. */
.pagehead--cine .lede{ max-width:52ch; }
.pagehead--cine .h1{ max-width:17ch; }

.pagehead__media{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  background:var(--navy);
}
.pagehead__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--focal, 50% 50%);
  /* --par is written by the scroll handler; the scale keeps the parallax shift
     from ever exposing an edge. */
  transform:translate3d(0, var(--par,0px), 0) scale(1.08);
  transform-origin:var(--focal, 50% 50%);
  filter:saturate(1.04) contrast(1.05);
  will-change:transform;
}

/* The image is 4:3-ish and the hero is far wider, so a plain `cover` crops the
   subject hard on a phone. Narrow screens get a squarer frame instead. */
@media (max-width:760px){
  .pagehead.pagehead--cine{
    min-height:clamp(460px,72vh,620px);
    /* Deep enough that the eyebrow clears the light band at the top of the
       scrim — at the old 26vw it landed on the bright part of the photograph
       and measured 3.6:1. */
    padding-block:clamp(140px,40vw,210px) clamp(40px,9vw,60px);
  }
  .pagehead--cine .pagehead__media img{ object-position:var(--focal-sm, var(--focal, 50% 50%)); }
}
/* Navy scrim — without it, text over a bright photo fails contrast. Weighted
   toward the text side so the image still reads on the other.

   The four stops are custom properties because the right strength depends
   entirely on the photograph. A bright image needs the defaults below; a
   near-black one is erased by them, so dark photos override per page:
     style="--scrim-a:.82; --scrim-b:.48; --scrim-c:.10; --scrim-d:0"
   Keep --scrim-a high enough that the headline stays above 4.5:1. */
.pagehead.pagehead--photo{
  --scrim-a: .94;   /* text edge */
  --scrim-b: .86;
  --scrim-c: .58;
  --scrim-d: .44;   /* far edge */
  --scrim-top: .55; /* under the sticky nav */
}
.pagehead.pagehead--photo::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(13,27,42,var(--scrim-a)) 0%, rgba(13,27,42,var(--scrim-b)) 38%,
                            rgba(13,27,42,var(--scrim-c)) 68%, rgba(13,27,42,var(--scrim-d)) 100%),
    linear-gradient(180deg, rgba(13,27,42,var(--scrim-top)) 0%, rgba(13,27,42,0) 30%);
  pointer-events:none;
}
/* Cinematic heroes carry copy at the bottom, so they need a floor as well as a
   left edge — and a vignette to stop the photograph running flat into the nav. */
.pagehead--cine::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    linear-gradient(0deg, rgba(13,27,42,var(--scrim-foot,.88)) 0%,
                          rgba(13,27,42,calc(var(--scrim-foot,.88) * .64)) 30%,
                          rgba(13,27,42,calc(var(--scrim-foot,.88) * .22)) 52%,
                          rgba(13,27,42,0) 72%),
    radial-gradient(120% 90% at 50% 42%, rgba(13,27,42,0) 42%, rgba(13,27,42,.55) 100%);
}
.pagehead.pagehead--photo .rain{ opacity:.32; }

.pagehead.pagehead--photo::before{ z-index:1; }
.pagehead--cine .wrap{ z-index:3; }
.pagehead.pagehead--photo .wrap{ position:relative; z-index:3; }

@media (prefers-reduced-motion:reduce){
  .pagehead__media img{ transform:none; transition:none; }
}
@media (max-width:760px){
  /* On a narrow screen the text covers the whole width, so the scrim goes flat
     — but still scaled off the page's own values, or a dark photo vanishes. */
  .pagehead.pagehead--photo::before{
    background:linear-gradient(180deg,
      rgba(13,27,42, calc(var(--scrim-a) * .82)) 0%,
      rgba(13,27,42, calc(var(--scrim-a) * .92)) 100%);
  }
  /* …except the cinematic hero, which keeps a clear band of photograph at the
     top and then goes dark fast. On a phone the frame crops to the brightest
     part of both photographs and the copy covers most of the height, so this
     has to be much heavier than the left-to-right wash it replaces —
     measured, not guessed: at .30 the headline came out at 1.5:1. */
  .pagehead--cine.pagehead--photo::before{
    background:linear-gradient(180deg,
      rgba(13,27,42,var(--scrim-top)) 0%,
      rgba(13,27,42,.84) 20%,
      rgba(13,27,42,.93) 46%,
      rgba(13,27,42,.95) 100%);
  }
}

/* ---- hero furniture -------------------------------------------------------
   A rule of small facts under the buttons — the things a visitor scans for
   before they read a word of the page.
   -------------------------------------------------------------------------- */
.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 34px;
  margin-block-start:clamp(30px,4vw,44px);
  padding-block-start:20px;
  border-block-start:1px solid var(--rule-dark);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-mute);
  max-width:74ch;
}
.hero__meta span{ display:flex; align-items:center; gap:10px; }
.hero__meta span::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex:none;
  box-shadow:0 0 0 3px var(--gold-faint);
}

/* Scroll cue. Hidden once the visitor has moved past the fold. */
.scrollcue{
  position:absolute; inset-block-end:20px; inset-inline-start:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(247,245,240,.5);
  transition:opacity .5s var(--ease);
}
.scrollcue::after{
  content:""; width:1px; height:34px;
  background:linear-gradient(180deg, var(--gold-soft), rgba(185,150,83,0));
  animation:cueFall 2.6s var(--ease) infinite;
  transform-origin:top;
}
@keyframes cueFall{
  0%   { transform:scaleY(0); opacity:0; }
  35%  { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1) translateY(34px); opacity:0; }
}
.is-scrolled .scrollcue{ opacity:0; }
@media (max-width:760px){ .scrollcue{ display:none; } }
@media (prefers-reduced-motion:reduce){ .scrollcue::after{ animation:none; } }

/* photo credit, bottom corner */
.photocred{
  position:absolute; inset-block-end:10px; inset-inline-end:16px;
  z-index:3; margin:0;
  font-size:10px; letter-spacing:.08em; color:rgba(247,245,240,.42);
}
.photocred a{ border-block-end:1px solid rgba(247,245,240,.24); }

/* --------------------------------------------------------------------------
   5c. OVERVIEW CARDS — the home page's route into the product pages
   -------------------------------------------------------------------------- */

.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--rule-light);
  border:1px solid var(--rule-light);
  margin-block-start:48px;
}
@media (max-width:880px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } }

.card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--paper);
  padding:clamp(26px,3vw,36px);
  min-height:230px;
  transition:background .35s var(--ease);
}
.band--tint .card{ background:var(--white); }
.card:hover{ background:var(--navy); }
.card:hover .card__t,.card:hover .card__go{ color:var(--paper); }
.card:hover .card__d{ color:var(--paper-mute); }
.card:hover .card__n{ color:var(--gold); }

.card__n{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 16px; font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
.card__t{
  font-size:clamp(20px,2.1vw,24px); font-weight:500; line-height:1.25;
  margin:0 0 10px; letter-spacing:-.008em;
  transition:color .3s var(--ease);
}
.card__d{
  margin:0 0 22px; font-size:14.5px; line-height:1.65; color:var(--ink-mute);
  transition:color .3s var(--ease);
}
.card__go{
  margin:auto 0 0;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); display:flex; align-items:center; gap:10px;
  transition:color .3s var(--ease);
}
.card__go::after{
  content:""; width:18px; height:1px; background:currentColor;
  transition:width .3s var(--ease);
}
.card:hover .card__go::after{ width:30px; }
/* whole card is the link target */
.card__link::after{ content:""; position:absolute; inset:0; }
.card:focus-within{ background:var(--navy); }
.card:focus-within .card__t,.card:focus-within .card__go{ color:var(--paper); }
.card:focus-within .card__d{ color:var(--paper-mute); }

/* --------------------------------------------------------------------------
   5d. PLACES — the two-market panel on the home page

   Each panel takes a photograph through --place-img. If the file is absent the
   layer resolves to `none` and the gradient underneath carries it, so the
   section still looks deliberate before the photography arrives.
   -------------------------------------------------------------------------- */

.places{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  margin-block-start:clamp(36px,4vw,52px);
}
@media (max-width:760px){ .places{ grid-template-columns:1fr; } }

.place{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(300px,32vw,400px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(24px,2.8vw,36px);
  border:1px solid var(--rule-dark);
  color:var(--paper);
  /* Gradient shows through wherever there is no photograph. */
  background-color:var(--navy);
  background-image:
    radial-gradient(110% 80% at 28% 18%, rgba(185,150,83,.18) 0%, rgba(13,27,42,0) 62%),
    linear-gradient(158deg, var(--navy-lift) 0%, var(--navy) 78%);
}
/* A real <img> rather than a CSS background: a url() inside a custom property
   resolves against the stylesheet, not the page, so it needs a root-relative
   path and then breaks when the file is opened locally. This works in both. */
.place__media{
  position:absolute; inset:0; z-index:0;
  margin:0; pointer-events:none;
}
.place__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--place-focal, center);
}
/* Legibility scrim, weighted to the bottom where the text sits. */
.place::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(13,27,42,.24) 0%, rgba(13,27,42,.62) 48%,
    rgba(13,27,42,.88) 78%, rgba(13,27,42,.94) 100%);
  transition:opacity .45s var(--ease);
}
.place > :not(.place__media){ position:relative; z-index:2; }
@media (hover:hover){
  .place:hover::before{ opacity:.86; }
}

.place__flag{
  display:flex; align-items:center; gap:11px;
  margin:0 0 auto;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-mute);
}
.place__flag .dot{ flex:none; }
.place__flag--soon{ color:var(--gold); }

.place__city{
  font-size:clamp(26px,3vw,36px); font-weight:400; line-height:1.15;
  letter-spacing:-.014em; margin:22px 0 10px;
}
.place__d{
  margin:0; font-size:15px; line-height:1.65; color:#C8CFD6; max-width:40ch;
}
.place__note{
  margin:16px 0 0; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-mute);
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

.hero{
  background:var(--navy);
  color:var(--paper);
  position:relative; overflow:hidden;
  padding-block:clamp(56px,7.5vw,104px) clamp(24px,3vw,40px);
}
.hero__grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(36px,5vw,72px);
  align-items:center;
}
@media (max-width:960px){ .hero__grid{ grid-template-columns:1fr; } }

/* Home hero: the simulator is the landing element, so the copy above it stays
   to two lines and the calculator sits centred and dominant beneath. */
.hero--focus{
  padding-block:clamp(44px,5.5vw,76px) clamp(40px,5vw,68px);
  text-align:center;
}
.hero--focus .h1{ margin-inline:auto; max-width:20ch; }
.hero--focus .lede{ margin-inline:auto; margin-block-start:20px; }
.hero--focus .sim{
  max-width:740px;
  margin-block-start:clamp(30px,3.6vw,46px);
  margin-inline:auto;
  text-align:start;
}

.hero__lede{ margin-block-start:26px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-block-start:36px; }

.hero__foot{
  position:relative; z-index:2;
  margin-block-start:clamp(44px,5.5vw,76px);
  border-block-start:1px solid var(--rule-dark);
  padding-block-start:22px;
  display:flex; flex-wrap:wrap; gap:10px 40px;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-mute);
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */

.btn{
  position:relative; overflow:hidden;
  font-family:inherit;
  font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  padding:16px 30px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  border:1px solid transparent;
  background:none;
  cursor:pointer;
  text-align:center;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
/* A light sweeping across the face on hover. Sits under the label because the
   label is the only child with a stacking position. */
.btn::before{
  content:"";
  position:absolute; inset-block:0; inset-inline-start:-140%;
  width:60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg);
  transition:inset-inline-start .65s var(--ease);
  pointer-events:none;
}
.btn:hover::before,.btn:focus-visible::before{ inset-inline-start:160%; }

.btn--primary{ background:var(--paper); color:var(--ink); }
.btn--primary:hover{
  background:var(--white); transform:translateY(-2px);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.6);
}
.btn--primary::before{ background:linear-gradient(100deg, transparent, rgba(185,150,83,.30), transparent); }

.btn--ghost{ border-color:var(--gold-soft); color:var(--paper); }
.btn--ghost:hover{
  border-color:var(--gold); background:var(--gold-faint);
  box-shadow:0 0 24px -6px rgba(185,150,83,.45), inset 0 0 22px -14px var(--gold);
}

.btn--navy{ background:var(--navy); color:var(--paper); }
.btn--navy:hover{
  background:var(--navy-lift); transform:translateY(-2px);
  box-shadow:0 12px 28px -16px rgba(13,27,42,.8);
}

.btn--line{ border-color:var(--rule-light); color:var(--ink); }
.btn--line:hover{ border-color:var(--gold); background:rgba(185,150,83,.08); }
.btn--line::before{ background:linear-gradient(100deg, transparent, rgba(185,150,83,.24), transparent); }

.btn[disabled]{ opacity:.5; cursor:progress; transform:none; }
.btn[disabled]::before{ display:none; }

@media (prefers-reduced-motion:reduce){
  .btn::before{ display:none; }
}

/* --------------------------------------------------------------------------
   8. VALUE SLIDER — shared by the simulator
   -------------------------------------------------------------------------- */

input[type=range].sim__slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; margin:0; background:transparent; cursor:grab; display:block;
}
input[type=range].sim__slider::-webkit-slider-runnable-track{ height:1px; background:rgba(247,245,240,.26); }
input[type=range].sim__slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; margin-top:-6.5px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 5px rgba(185,150,83,.18);
}
input[type=range].sim__slider::-moz-range-track{ height:1px; background:rgba(247,245,240,.26); }
input[type=range].sim__slider::-moz-range-thumb{
  width:14px; height:14px; border:none; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 5px rgba(185,150,83,.18);
}
input[type=range].sim__slider:active{ cursor:grabbing; }

/* --------------------------------------------------------------------------
   8b. PREMIUM SIMULATOR — the hero's working element
   -------------------------------------------------------------------------- */

.sim{
  background:var(--navy-lift);
  border:1px solid var(--rule-dark);
  border-block-start:1px solid var(--gold-soft);
  padding:clamp(24px,3vw,34px);
  display:block;
}
.sim__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-mute); line-height:1.5;
  padding-block-end:20px; border-block-end:1px solid var(--rule-dark);
}
.sim__eff{ color:var(--gold); white-space:nowrap; }

.sim__field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.sim__field > label{
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-mute);
}

.sim__money{
  display:flex; align-items:baseline; gap:12px;
  border-block-end:1px solid var(--rule-dark);
  padding-block-end:8px;
  transition:border-color .25s var(--ease);
}
.sim__money:focus-within{ border-block-end-color:var(--gold); }
.sim__money .sim__cur{ font-size:12px; letter-spacing:.2em; color:var(--paper-mute); flex:none; }

input.sim__value{
  font-family:var(--latin);
  font-size:clamp(30px,3.6vw,42px);
  font-weight:400; line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--paper);
  background:none; border:0; border-radius:0;
  padding:0; width:100%; min-width:0;
  appearance:none;
}
input.sim__value:focus{ outline:none; }
input.sim__value::placeholder{ color:rgba(247,245,240,.34); }

.sim__slider{ margin-block-start:14px; }
.sim__scale{
  display:flex; justify-content:space-between;
  margin-block-start:6px;
  font-size:10px; letter-spacing:.14em; color:var(--paper-mute);
  font-variant-numeric:tabular-nums;
}

.sim__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px; margin-block-start:22px;
}
@media (max-width:520px){ .sim__grid{ grid-template-columns:1fr; } }

.sim__field select{
  font-family:inherit; font-size:15px; line-height:1.5;
  color:var(--paper);
  background-color:transparent;
  border:1px solid var(--rule-dark); border-radius:0;
  padding:12px 14px; width:100%;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A7AFB8' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-inline-end:38px;
  transition:border-color .25s var(--ease);
}
.sim__field select:focus{ outline:none; border-color:var(--gold); }
/* The dropdown list itself is painted by the OS, not by us — force legibility */
.sim__field select option{ background:var(--navy); color:var(--paper); }

.sim__check{
  display:flex; align-items:flex-start; gap:11px;
  margin-block-start:18px;
  font-size:13.5px; line-height:1.55; color:var(--paper-mute);
  cursor:pointer;
}
.sim__check input{
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; margin:3px 0 0; flex:none;
  border:1px solid var(--rule-dark); background:none; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.sim__check input:checked{
  border-color:var(--gold); background:var(--gold);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9'%3E%3Cpath d='M1 4.5l3.2 3.2L11 1' fill='none' stroke='%230D1B2A' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}

.sim__out{
  margin-block-start:24px; padding-block-start:22px;
  border-block-start:1px solid var(--rule-dark);
}
.sim__outk{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-mute); margin:0 0 10px;
}
.sim__amount{
  display:flex; align-items:baseline; gap:12px; margin:0;
  color:var(--paper); font-family:var(--latin);
}
.sim__amount .sim__cur{ font-size:13px; letter-spacing:.2em; color:var(--gold); flex:none; }
.sim__amount .sim__fig{
  font-size:clamp(36px,4.6vw,54px); line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.sim__out[data-state="refer"] .sim__fig{ color:var(--paper-mute); }
.sim__planname{
  margin:10px 0 0; font-size:14px; color:var(--gold);
  letter-spacing:.02em;
}
.sim__planname:empty{ display:none; }
.sim__note{ margin:12px 0 0; font-size:13px; line-height:1.65; color:#C8CFD6; }
.sim__note:empty{ display:none; }

.sim__cta{ margin-block-start:18px; }
.sim__cta[hidden]{ display:none; }

.sim__legal{
  margin:20px 0 0; padding-block-start:18px;
  border-block-start:1px solid var(--rule-dark);
  font-size:11.5px; line-height:1.6; color:var(--paper-mute);
}
.sim__legal a{ border-block-end:1px solid var(--gold-soft); }
.sim__legal a:hover{ border-block-end-color:var(--gold); }

/* --------------------------------------------------------------------------
   8c. PLAN COMPARISON TABLE
   -------------------------------------------------------------------------- */

.tablewrap{
  margin-block-start:44px;
  overflow-x:auto;
  border:1px solid var(--rule-light);
  -webkit-overflow-scrolling:touch;
}
.tablewrap:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

table.plans{
  width:100%; min-width:760px;
  border-collapse:collapse;
  background:var(--white);
  font-size:13.5px; line-height:1.6;
}
table.plans caption{
  text-align:start; padding:20px 22px;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mute); border-block-end:1px solid var(--rule-light);
}

table.plans th,table.plans td{
  padding:16px 20px;
  border-block-start:1px solid var(--rule-light);
  vertical-align:top;
  text-align:start;
  font-weight:400;
  transition:background .22s var(--ease), color .22s var(--ease);
}
table.plans thead th{
  position:sticky; inset-block-start:0; z-index:2;
  background:var(--navy); color:var(--paper);
  border-block-start:0;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  white-space:nowrap;
}
table.plans thead th:first-child{ background:var(--navy); }
table.plans tbody th{
  width:26%; min-width:200px;
  color:var(--ink); font-weight:500;
  background:var(--paper);
}
table.plans td{ width:24.6%; color:var(--ink-mute); }
table.plans tbody tr:hover th,table.plans tbody tr:hover td{ background:#FBFAF7; }
table.plans .na{ color:#9AA2AA; }
table.plans .num{ color:var(--ink); }

/* ---- column spotlight -----------------------------------------------------
   Nineteen rows across three plans is a lot to hold in your head. Hovering
   anywhere in a column lifts that whole plan out of the table; clicking a plan
   heading pins it, so you can scroll the rows with one plan held bright.

   data-hot / data-pin carry the 1-based column index and are written by the
   script. A pinned column beats a hovered one.
   -------------------------------------------------------------------------- */
table.plans[data-hot] tbody td,
table.plans[data-pin] tbody td{ color:#9BA3AB; }

table.plans[data-hot="2"] tbody td:nth-of-type(1),
table.plans[data-hot="3"] tbody td:nth-of-type(2),
table.plans[data-hot="4"] tbody td:nth-of-type(3),
table.plans[data-pin="2"] tbody td:nth-of-type(1),
table.plans[data-pin="3"] tbody td:nth-of-type(2),
table.plans[data-pin="4"] tbody td:nth-of-type(3){
  background:#FFFCF5;
  color:var(--ink);
  box-shadow:inset 1px 0 0 var(--gold-faint), inset -1px 0 0 var(--gold-faint);
}
table.plans[data-hot="2"] tbody td:nth-of-type(1).na,
table.plans[data-hot="3"] tbody td:nth-of-type(2).na,
table.plans[data-hot="4"] tbody td:nth-of-type(3).na,
table.plans[data-pin="2"] tbody td:nth-of-type(1).na,
table.plans[data-pin="3"] tbody td:nth-of-type(2).na,
table.plans[data-pin="4"] tbody td:nth-of-type(3).na{ color:#8E2F24; }

table.plans[data-hot="2"] thead th:nth-child(2),
table.plans[data-hot="3"] thead th:nth-child(3),
table.plans[data-hot="4"] thead th:nth-child(4),
table.plans[data-pin="2"] thead th:nth-child(2),
table.plans[data-pin="3"] thead th:nth-child(3),
table.plans[data-pin="4"] thead th:nth-child(4){
  background:var(--navy-lift);
  box-shadow:inset 0 -2px 0 var(--gold);
}

/* The plan headings gain a button once the script is running. It fills the
   cell so the whole heading stays the click target. */
table.plans thead th[data-col]{ padding:0; }
table.plans thead th[data-col] > button{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit; background:none; border:0; border-radius:0;
  display:block; width:100%; text-align:start;
  padding:16px 20px;
  cursor:pointer; user-select:none;
}
table.plans thead th[data-col] > button:focus-visible{ outline-offset:-3px; }
table.plans thead th[data-col] .pin{
  display:block; margin-block-start:6px;
  font-size:9px; letter-spacing:.18em; text-transform:none; color:var(--gold);
  opacity:0; transition:opacity .25s var(--ease);
}
table.plans thead th[data-col] > button:hover .pin,
table.plans thead th[data-col] > button:focus-visible .pin{ opacity:.75; }
table.plans[data-pin="2"] thead th:nth-child(2) .pin,
table.plans[data-pin="3"] thead th:nth-child(3) .pin,
table.plans[data-pin="4"] thead th:nth-child(4) .pin{ opacity:1; }

.tablehint{
  margin:14px 0 0; font-size:12.5px; color:var(--ink-mute);
}
.tablehint--desk{ display:none; }
@media (min-width:900px){
  .tablehint{ display:none; }
  .tablehint--desk{ display:block; }
}

/* --------------------------------------------------------------------------
   8d. STAT ROW — a few figures pulled out of the tariff
   -------------------------------------------------------------------------- */

.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--rule-dark);
  border:1px solid var(--rule-dark);
  margin-block-start:clamp(36px,4.5vw,56px);
}
@media (max-width:880px){ .stats{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .stats{ grid-template-columns:1fr; } }

.stat{
  position:relative;
  background:var(--navy);
  padding:clamp(22px,2.6vw,30px);
  transition:background .35s var(--ease);
}
.stat::before{
  content:""; position:absolute;
  inset-block-start:0; inset-inline-start:0;
  height:2px; width:0; background:var(--gold);
  box-shadow:0 0 12px 0 rgba(185,150,83,.7);
  transition:width .45s var(--ease);
}
.stat:hover{ background:var(--navy-lift); }
.stat:hover::before{ width:100%; }
.stat__n{
  margin:0 0 8px;
  font-size:clamp(28px,3.4vw,40px); line-height:1;
  letter-spacing:-.02em; color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.stat__k{
  margin:0; font-size:11.5px; line-height:1.6; color:var(--paper-mute);
}
.stat__k b{ color:var(--gold); font-weight:400; }

/* --------------------------------------------------------------------------
   8e. ACCORDION — long detail that should not be a wall of text
   -------------------------------------------------------------------------- */

.acc{ border-block-start:1px solid var(--rule-light); margin-block-start:34px; }
.acc__i{
  border-block-end:1px solid var(--rule-light);
  background:var(--paper);
  transition:background .3s var(--ease);
}
.band--tint .acc__i{ background:var(--white); }
.acc__i[open]{ background:var(--white); }
.band--tint .acc__i[open]{ background:var(--paper); }

.acc__i summary{
  position:relative;
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 48px 20px 20px;
  cursor:pointer; list-style:none;
  font-size:16px; line-height:1.5; color:var(--ink);
  transition:color .3s var(--ease), padding-inline-start .3s var(--ease);
}
.acc__i summary::-webkit-details-marker{ display:none; }
/* the gold tick, matching .checks */
.acc__i summary::before{
  content:""; position:absolute;
  inset-inline-start:0; inset-block-start:30px;
  width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease), box-shadow .35s var(--ease);
}
/* the +/− */
.acc__i summary::after{
  content:""; position:absolute;
  inset-inline-end:20px; inset-block-start:26px;
  width:11px; height:11px;
  background:
    linear-gradient(var(--ink-mute),var(--ink-mute)) center/11px 1px no-repeat,
    linear-gradient(var(--ink-mute),var(--ink-mute)) center/1px 11px no-repeat;
  transition:transform .35s var(--ease), background-size .35s var(--ease);
}
.acc__i[open] summary::after{ transform:rotate(90deg); background-size:11px 1px, 0 0; }
.acc__i summary:hover{ color:var(--ink); padding-inline-start:32px; }
.acc__i summary:hover::before{ width:20px; box-shadow:0 0 10px 1px rgba(185,150,83,.5); }
.acc__i[open] summary{ padding-inline-start:32px; }
.acc__i[open] summary::before{ width:20px; }

.acc__b{
  margin:0; padding:0 48px 22px 32px;
  font-size:14.5px; line-height:1.75; color:var(--ink-mute);
  max-width:70ch;
}
@media (prefers-reduced-motion:no-preference){
  .acc__i[open] .acc__b{ animation:accOpen .38s var(--ease); }
  @keyframes accOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
}

/* --------------------------------------------------------------------------
   9. COVERAGE
   -------------------------------------------------------------------------- */

.split{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,4.5vw,64px);
  align-items:start;
}
.split--wide{ grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); }
@media (max-width:920px){ .split,.split--wide{ grid-template-columns:1fr; } }

.primary{
  position:relative;
  background:var(--paper);
  border:1px solid var(--rule-light);
  border-block-start:2px solid var(--gold);
  padding:clamp(26px,3.2vw,42px);
  transition:box-shadow .4s var(--ease);
}
.band--tint .primary{ background:var(--paper); }
.primary:hover{ box-shadow:0 22px 60px -40px rgba(13,27,42,.55); }

.checks{ list-style:none; margin:24px 0 0; padding:0; }
.checks li{
  position:relative;
  padding-block:13px;
  padding-inline-start:30px;
  border-block-start:1px solid var(--rule-light);
  font-size:15px; line-height:1.65;
  color:var(--ink-mute);
  transition:color .3s var(--ease), padding-inline-start .35s var(--ease);
}
/* The gold tick. It draws out to a longer rule as the row lights up, which is
   the same gesture as the card arrow — one motion language across the site. */
.checks li::before{
  content:""; position:absolute;
  inset-inline-start:2px; inset-block-start:23px;
  width:12px; height:1px; background:var(--gold);
  transition:width .35s var(--ease), box-shadow .35s var(--ease);
}
/* A pale wash behind the row, bled past the padding so it reads as light
   falling on the row rather than a box drawn around it. */
.checks li::after{
  content:""; position:absolute;
  inset-block:1px 0; inset-inline:-14px;
  background:linear-gradient(90deg, rgba(185,150,83,.11), rgba(185,150,83,0) 68%);
  opacity:0; transition:opacity .35s var(--ease);
  pointer-events:none;
}
.checks li:hover{ color:var(--ink); padding-inline-start:38px; }
.checks li:hover::before{ width:22px; box-shadow:0 0 10px 1px rgba(185,150,83,.5); }
.checks li:hover::after{ opacity:1; }
.checks strong{ color:var(--ink); font-weight:500; }
.on-navy .checks li,.band--navy .checks li{ border-block-start-color:var(--rule-dark); color:var(--paper-mute); }
.on-navy .checks li:hover,.band--navy .checks li:hover{ color:var(--paper); }
.on-navy .checks strong,.band--navy .checks strong{ color:var(--paper); }

.lines{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--rule-light);
  border:1px solid var(--rule-light);
}
@media (max-width:640px){ .lines{ grid-template-columns:1fr; } }
.line{
  position:relative;
  background:var(--paper);
  padding:26px 24px 28px;
  transition:background .35s var(--ease), transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.band--tint .line{ background:var(--white); }
/* A gold rail that runs across the top edge as the tile turns navy. */
.line::before{
  content:""; position:absolute;
  inset-block-start:0; inset-inline-start:0;
  height:2px; width:0; background:var(--gold);
  transition:width .45s var(--ease);
}
.line:hover,.line:focus-within{ background:var(--navy); z-index:2; box-shadow:0 20px 46px -30px rgba(13,27,42,.8); }
.line:hover::before,.line:focus-within::before{ width:100%; }
.line:hover .line__t,.line:focus-within .line__t{ color:var(--paper); }
.line:hover .line__d,.line:focus-within .line__d{ color:var(--paper-mute); }
.line__t{
  font-size:19px; font-weight:500; margin:0 0 8px; line-height:1.3;
  transition:color .3s var(--ease);
}
.line__d{ margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-mute); transition:color .3s var(--ease); }

/* --------------------------------------------------------------------------
   10. TRIO / APPROACH
   -------------------------------------------------------------------------- */

.trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.5vw,52px); }
@media (max-width:880px){ .trio{ grid-template-columns:1fr; } }
.trio__item{
  position:relative;
  border-block-start:1px solid var(--rule-dark);
  padding-block-start:24px;
  transition:transform .35s var(--ease);
}
.band--tint .trio__item,.band:not(.band--navy) .trio__item{ border-block-start-color:var(--rule-light); }
.band--navy .trio__item{ border-block-start-color:var(--rule-dark); }
/* The top rule lights gold from the left as you read down the step. */
.trio__item::before{
  content:""; position:absolute;
  inset-block-start:-1px; inset-inline-start:0;
  height:1px; width:0; background:var(--gold);
  box-shadow:0 0 8px 0 rgba(185,150,83,.6);
  transition:width .5s var(--ease);
}
.trio__item:hover{ transform:translateY(-3px); }
.trio__item:hover::before{ width:100%; }
.trio__n{
  font-size:10.5px; letter-spacing:.22em; color:var(--gold);
  margin:0 0 12px; font-variant-numeric:tabular-nums;
  transition:letter-spacing .35s var(--ease);
}
.trio__item:hover .trio__n{ letter-spacing:.34em; }
.trio__k{ font-size:19px; font-weight:500; margin:0 0 10px; line-height:1.3; }
.trio__item p:last-child{ margin:0; font-size:15px; line-height:1.7; color:var(--paper-mute); }
.band:not(.band--navy) .trio__item p:last-child{ color:var(--ink-mute); }
@media (prefers-reduced-motion:reduce){
  .trio__item:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   11. MARKETS
   -------------------------------------------------------------------------- */

.markets{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--rule-light); border:1px solid var(--rule-light);
  margin-block-start:44px;
}
@media (max-width:720px){ .markets{ grid-template-columns:1fr; } }
.market{ background:var(--paper); padding:clamp(26px,3.2vw,40px); }
.market__flag{
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-soft); flex:none; }
.dot--live{ background:var(--gold); box-shadow:0 0 0 4px var(--gold-faint); }
.market__city{ font-size:clamp(24px,2.8vw,32px); font-weight:400; margin:0 0 10px; letter-spacing:-.012em; line-height:1.2; }
.market p:last-child{ margin:0; color:var(--ink-mute); font-size:15px; }

/* --------------------------------------------------------------------------
   12. CLOSE
   -------------------------------------------------------------------------- */

.close{ text-align:center; }
.close .h2,.close .lede{ margin-inline:auto; }
.close .hero__actions{ justify-content:center; }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */

.foot{ background:var(--navy); color:var(--paper-mute); padding-block:clamp(48px,6vw,72px) 32px; }
.foot__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(28px,4vw,52px);
  padding-block-end:36px; border-block-end:1px solid var(--rule-dark);
}
@media (max-width:780px){
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__grid > :first-child{ grid-column:1 / -1; }
}
.foot h2{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px; font-weight:500;
}
.foot ul{ list-style:none; margin:0; padding:0; font-size:14.5px; }
.foot li{ margin-block-end:10px; }
.foot a{ transition:color .25s var(--ease); }
.foot a:hover{ color:var(--paper); }
.foot__note{ margin:20px 0 0; font-size:12.5px; line-height:1.7; color:#7C8792; max-width:64ch; }
.foot__bar{
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;
  margin-block-start:24px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#7C8792;
}

/* --------------------------------------------------------------------------
   14. PAGE HEAD (interior pages)
   -------------------------------------------------------------------------- */

.pagehead{
  /* background-COLOR, not the shorthand: the shorthand resets background-image
     and would erase the photo on .pagehead--photo, which is declared earlier. */
  background-color:var(--navy); color:var(--paper);
  padding-block:clamp(52px,6.5vw,88px);
  position:relative; overflow:hidden;
}
.pagehead .wrap{ position:relative; z-index:2; }

/* --------------------------------------------------------------------------
   15. FORM
   -------------------------------------------------------------------------- */

.form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px; }
/* An author `display` beats the UA stylesheet's [hidden] rule, so the script's
   `form.hidden = true` would otherwise do nothing after a successful send. */
.form[hidden]{ display:none; }
.field{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.field--full{ grid-column:1 / -1; }
@media (max-width:680px){ .form{ grid-template-columns:1fr; } .field{ grid-column:1 / -1; } }

.field label{
  font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
/* Not gold: this is small type on white, where gold fails contrast. */
.field .req{ color:var(--ink-mute); }

.field input,.field select,.field textarea{
  font-family:inherit; font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--white);
  border:1px solid var(--rule-light); border-radius:0;
  padding:14px 15px; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235D656D' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-inline-end:42px;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(185,150,83,.16);
}
.field input::placeholder,.field textarea::placeholder{ color:#9AA2AA; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#8E2F24; box-shadow:0 0 0 3px rgba(142,47,36,.10);
}
.err{ font-size:12.5px; color:#8E2F24; margin:0; min-height:0; }
.err:empty{ display:none; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.vehicle{ display:contents; }
.vehicle[hidden]{ display:none; }

.form__foot{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
  margin-block-start:8px;
}
.form__hint{ margin:0; font-size:12.5px; line-height:1.6; color:var(--ink-mute); max-width:46ch; }

.form__status{
  grid-column:1 / -1;
  margin:0; padding:16px 18px;
  border-inline-start:2px solid var(--gold);
  background:var(--white);
  font-size:14.5px; line-height:1.65;
}
.form__status:empty{ display:none; }
.form__status[data-state="error"]{ border-inline-start-color:#8E2F24; }

.sent{
  border:1px solid var(--rule-light);
  border-block-start:2px solid var(--gold);
  background:var(--white);
  padding:clamp(28px,3.4vw,44px);
  margin-block-start:34px;
}
.sent[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   16. CONTACT ASIDE
   -------------------------------------------------------------------------- */

.aside{ background:var(--white); border:1px solid var(--rule-light); padding:clamp(24px,2.8vw,34px); }
.detail{ border-block-start:1px solid var(--rule-light); padding-block:18px; }
.detail:first-of-type{ border-block-start:0; padding-block-start:0; }
.detail__k{
  font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 8px;
}
.detail__v{ margin:0; font-size:16px; line-height:1.6; color:var(--ink); }
.detail__v a{ border-block-end:1px solid var(--ink-mute); transition:border-color .25s var(--ease); }
.detail__v a:hover{ border-block-end-color:var(--gold); }
.detail__sub{ margin:6px 0 0; font-size:13.5px; color:var(--ink-mute); }

/* --------------------------------------------------------------------------
   17. 404
   -------------------------------------------------------------------------- */

.oops{
  min-height:62vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px;
}
.oops__code{
  font-size:clamp(64px,11vw,132px); line-height:1; font-weight:400;
  letter-spacing:-.03em; color:var(--gold); font-variant-numeric:tabular-nums;
  font-family:var(--latin);
}
/* Gold reaches 6.25:1 on navy, so the 404 sits on a navy band. */
.oops a{ border-block-end:1px solid var(--gold); }

/* --------------------------------------------------------------------------
   18. REVEAL
   -------------------------------------------------------------------------- */

.rv{ opacity:0; transform:translateY(16px); }
.rv.is-in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.rv-1.is-in{ transition-delay:.08s; }
.rv-2.is-in{ transition-delay:.16s; }
.rv-3.is-in{ transition-delay:.24s; }

/* JS off — never hide content behind an animation that will not run */
.no-js .rv{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv,.rv.is-in{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .btn:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   19. PRINT
   -------------------------------------------------------------------------- */

@media print{
  .nav,.ticker,.menu,.burger,.rain,.hero__actions,.form,.sim__slider,.sim__cta{ display:none !important; }
  .sim,.tablewrap{ border:1px solid #999 !important; overflow:visible !important; }
  table.plans{ min-width:0 !important; font-size:9pt; }
  table.plans thead th{ background:#fff !important; color:#000 !important; border-bottom:1px solid #000; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .band,.hero,.pagehead,.foot,.band--navy{ background:#fff !important; color:#000 !important; padding-block:18px; }
  .lede,.line__d,.checks li,.trio__item p{ color:#000 !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#444; }
}