/* ==========================================================================
   Chroma Oasis — site.css
   Built to CHROMA-OASIS-BRAND-KIT.md v2.
   Visual world: deep teal gradient ground, white cards with a 1px black
   hairline + violet-to-magenta gradient cap, square wide buttons, light-weight
   Jost headings. Spectrum gradient is reserved for line art, marks and rules.
   ========================================================================== */

:root{
  /* Brand core */
  --teal:#3F5E63; --azure:#2D7FD1; --lagoon:#419FB6; --jade:#4CBB9B;
  --palm:#82D77F; --violet:#705BB2; --orchid:#9041A3;
  --gold:#DFAE53; --sand:#FAECB2;

  /* Teal ramp. teal-50 is the lightest step: the one tint that passes AA as
     small text on every dark ground this site uses (5.6:1 on the teal body,
     9:1 on the chromatic hero). teal-100 is for hairlines and icons only. */
  --teal-50:#9FCAD0;
  --teal-100:#608B93; --teal-200:#48686E; --teal-300:#436368; --teal-400:#3F5E63;
  --teal-500:#375458; --teal-600:#2A4649; --teal-700:#233D41; --teal-800:#1E3233;

  /* Gold ramp */
  --gold-light:#F0CA62; --gold-base:#DFAE53; --gold-deep:#CE8B02;

  /* Neutrals */
  --white:#FFFFFF; --off-white:#F1F1F1; --gray-200:#EAEAEA; --gray-300:#DADCE0;
  --gray-500:#888888; --ink-900:#1A1A1A; --ink-950:#1D1E20;
  --carbon:#2B2C32; --carbon-hover:#121319;
  --muted:#5C5F66;

  /* Gradients */
  --grad-spectrum:linear-gradient(90deg,#4E3DB0 0%,#2563DB 20%,#2D9FD8 35%,#35CCD2 50%,#00DFA8 65%,#42AE7F 80%,#82D77F 100%);
  --grad-mark:linear-gradient(135deg,#3991FD 0%,#01C7C5 40%,#00E1A2 70%,#5FF589 100%);
  --grad-ground:linear-gradient(135deg,#436368 0%,#375458 35%,#2A4649 70%,#1E3233 100%);
  --grad-rule:linear-gradient(90deg,#A967E3 0%,#C564CF 50%,#DF5FBC 100%);
  --grad-gold:linear-gradient(180deg,#F0CA62 0%,#DFAE53 45%,#CE8B02 100%);
  --grad-pastel:linear-gradient(120deg,#7B90FE 0%,#9278F7 30%,#B965E8 55%,#DA71C4 80%,#F277F6 100%);

  /* Type */
  --font-display:'Cinzel','Cormorant Garamond',Georgia,serif;
  --font-label:'Public Sans','Inter',system-ui,sans-serif;
  --font-body:'Jost','Poppins','Century Gothic',system-ui,sans-serif;

  /* Shape */
  --radius-card:12px;
  --shadow-card:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-lift:0 18px 30px -12px rgba(0,0,0,.28),0 6px 10px -6px rgba(0,0,0,.16);
  --gap:24px;
  --max:1200px;
  --max-wide:1600px;
  --header-h:76px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Any author display rule (.btn, .pcard, .modal...) outranks the browser's own
   [hidden] style, so without this, hidden elements stay visible. */
[hidden]{display:none!important}
/* Root size drives every rem on the site; 18px is the global "bigger text" knob. */
html{font-size:18px;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
@media (max-width:480px){ html{font-size:17px} }
body{
  margin:0;
  background:var(--teal-600) var(--grad-ground);
  background-repeat:no-repeat;
  color:var(--gray-200);
  font-family:var(--font-body);
  font-weight:300;font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--palm);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--white);color:var(--ink-900);padding:12px 20px;
  font-family:var(--font-label);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
}
.skip-link:focus{left:12px;top:12px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- typography ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-body);font-weight:400;line-height:1.18;
  margin:0 0 .5em;letter-spacing:normal;color:var(--white);
}
h1{font-size:clamp(2.6rem,1.6rem + 3.8vw,4.75rem)}
h2{font-size:clamp(2.1rem,1.45rem + 2.5vw,3.4rem)}
h3{font-size:clamp(1.55rem,1.2rem + 1.2vw,2.2rem)}
h4{font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem)}
h5{font-size:1.25rem}
h6{font-size:1.05rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:500;color:var(--white)}
.lead{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.7;color:var(--gray-200)}
.eyebrow{
  display:inline-block;font-family:var(--font-label);font-weight:600;
  font-size:.875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal-50);margin:0 0 1rem;line-height:1.6;
}
.eyebrow--accent{
  background:var(--grad-spectrum);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.balance{text-wrap:balance}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:24px}
.container--wide{max-width:var(--max-wide)}
.container--narrow{max-width:820px}
.section{padding-block:clamp(56px,7vw,104px)}
.section--tight{padding-block:clamp(40px,5vw,68px)}
.section-head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.section-head--center{margin-inline:auto;text-align:center}

/* light band — for sections that break the teal ground */
.band-light{background:var(--white);color:var(--ink-900)}
.band-light h1,.band-light h2,.band-light h3,.band-light h4,.band-light h5,.band-light h6{color:var(--ink-950)}
.band-light p,.band-light li{color:var(--ink-900)}
.band-light .eyebrow{color:var(--muted)}
.band-light strong{color:var(--ink-950)}
.band-deep{background:var(--teal-800)}

.grid{display:grid;gap:var(--gap)}
@media (min-width:640px){ .grid-2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:640px) and (max-width:899px){ .grid-4{grid-template-columns:repeat(2,1fr)} }

/* alternating image/text rows (brand section 6.6) */
.split{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--flip > *:first-child{order:2}
}

/* ---------- buttons (square, wide) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-body);font-size:.95rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.07em;text-decoration:none;
  border:1px solid transparent;border-radius:0;
  padding:18px 44px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  text-align:center;line-height:1.4;
}
.btn-primary{
  background:var(--carbon);color:var(--white);border-color:var(--carbon);
  box-shadow:0 12px 24px -12px rgba(0,0,0,.6),0 3px 8px -4px rgba(0,0,0,.35);
}
.btn-primary:hover{background:var(--carbon-hover);border-color:var(--carbon-hover);transform:translateY(-1px);box-shadow:0 16px 28px -12px rgba(0,0,0,.65),0 4px 10px -4px rgba(0,0,0,.4)}
/* Light button: text takes the header's dark teal, and the hover inverts it. */
.btn-light{
  background:var(--white);color:var(--teal-800);border-color:var(--white);
  box-shadow:0 12px 24px -12px rgba(0,0,0,.6),0 3px 8px -4px rgba(0,0,0,.3);
}
.btn-light:hover{background:var(--teal-800);color:var(--white);border-color:var(--teal-800);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.band-light .btn-ghost{color:var(--ink-900);border-color:rgba(0,0,0,.35)}
.band-light .btn-ghost:hover{background:rgba(0,0,0,.05);border-color:var(--ink-900)}
.btn-wide{padding:18px 64px}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.btn-row--center{justify-content:center}
/* On narrow screens the wide/normal padding split makes stacked buttons look
   ragged, so let them share one full-width column instead. */
@media (max-width:559px){
  .btn-row .btn{width:100%;padding-inline:24px}
}

/* ---------- cards ---------- */
.card{
  position:relative;background:var(--white);color:var(--ink-900);
  border:1px solid #000;border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);overflow:hidden;
  padding:32px 28px;
  transition:transform .22s ease,box-shadow .22s ease;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,#A967E3,#C564CF,#DF5FBC,#C564CF,#A967E3);
  background-size:200% 100%;animation:capFlow 9s linear infinite;
}
.card--lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card h3,.card h4{color:var(--ink-950);margin-top:0}
.card p,.card li{color:var(--ink-900);font-size:1.04rem;line-height:1.65}

/* Slow lateral drift for gradient caps and rules. Loops seamlessly because
   each gradient starts and ends on the same colour and is sized 200%. */
@keyframes capFlow{to{background-position:200% 0}}
.card > :last-child{margin-bottom:0}
.card--flat{box-shadow:none}
.card__num{
  font-family:var(--font-label);font-weight:600;font-size:.8125rem;letter-spacing:.1em;
  color:var(--muted);display:block;margin-bottom:.85rem;
}
.card__icon{width:44px;height:44px;margin-bottom:18px}

/* card on dark, glass style — for lists over the teal ground */
.tile{
  background:rgba(255,255,255,.065);
  border:1px solid rgba(96,139,147,.45);
  border-radius:var(--radius-card);
  padding:30px 26px;
  box-shadow:0 18px 32px -18px rgba(0,0,0,.6),0 4px 10px -6px rgba(0,0,0,.35);
  transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.tile:hover{background:rgba(255,255,255,.1);border-color:rgba(130,215,127,.55);transform:translateY(-3px);box-shadow:0 24px 40px -18px rgba(0,0,0,.65),0 6px 12px -6px rgba(0,0,0,.4)}
.tile h3,.tile h4{color:var(--white)}
.tile p{color:var(--gray-200);margin-bottom:0;font-size:1.02rem;line-height:1.65}
.tile > :last-child{margin-bottom:0}

/* Tiles are designed for the dark ground. Inside a white band they would be
   white-on-white, so flip them to a quiet light module instead. */
.band-light .tile{
  background:var(--off-white);border-color:var(--gray-300);
  box-shadow:0 14px 28px -18px rgba(0,0,0,.28),0 3px 8px -5px rgba(0,0,0,.14);
}
.band-light .tile:hover{background:#E8EBEC;border-color:rgba(76,187,155,.6)}
.band-light .tile h3,.band-light .tile h4{color:var(--ink-950)}
.band-light .tile p,.band-light .tile li{color:var(--ink-900)}
.band-light .tile strong{color:var(--ink-950)}

/* <strong> is white by default for the dark ground; every light module must
   bring it back to ink or it vanishes. */
.card strong,.step strong,.form-card strong,.faq__item strong,.band-light .note strong,
table.cmp strong,.shortlist strong{color:var(--ink-950)}

/* Links inside light modules: inherit-colour links are invisible as links. */
.card p a,.faq__a a,.step p a,.band-light .note a,.form-card p a{
  color:#1F63A8;text-decoration:underline;text-underline-offset:3px;
}
.tile p a,.note a{text-decoration:underline;text-underline-offset:3px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(30,50,51,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(96,139,147,.32);
}
.site-header__inner{
  display:flex;align-items:center;gap:20px;
  min-height:var(--header-h);padding-block:10px;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.brand img,.brand svg{width:52px;height:52px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--font-display);font-weight:400;font-size:1.08rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.brand__tag{
  font-family:var(--font-label);font-weight:600;font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-50);margin-top:5px;
}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{
  font-family:var(--font-label);font-weight:600;font-size:.875rem;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  color:var(--gray-200);padding:10px 12px;border-radius:4px;
  transition:color .18s ease,background .18s ease;white-space:nowrap;
}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]::after{
  content:"";display:block;height:2px;margin-top:5px;background:var(--grad-spectrum);
}
.nav__cta{margin-left:12px}
.nav__cta.btn{padding:13px 28px;font-size:.85rem}
/* .nav a would otherwise win on specificity and wash the button text out. */
.nav a.nav__cta{color:var(--teal-800);background:var(--white)}
.nav a.nav__cta:hover{color:var(--white);background:var(--teal-800)}
.nav a.nav__cta::after{display:none}

/* dropdown */
.nav__group{position:relative}
.nav__toggle{
  display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--font-label);font-weight:600;font-size:.875rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gray-200);padding:10px 12px;border-radius:4px;
  transition:color .18s ease,background .18s ease;white-space:nowrap;
}
.nav__toggle:hover{color:var(--white);background:rgba(255,255,255,.08)}
.nav__toggle svg{width:10px;height:10px;transition:transform .2s ease}
.nav__group[data-open="true"] .nav__toggle svg{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:290px;
  background:var(--teal-800);border:1px solid rgba(96,139,147,.42);
  border-radius:var(--radius-card);padding:10px;
  box-shadow:0 24px 48px -12px rgba(0,0,0,.6);
  display:none;flex-direction:column;gap:2px;
}
.nav__group[data-open="true"] .nav__menu{display:flex}
.nav__menu a{padding:11px 14px;font-size:.82rem;border-radius:6px;white-space:normal}
.nav__menu-label{
  font-family:var(--font-label);font-weight:600;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-50);padding:12px 14px 4px;
}
.nav__menu-label:first-child{padding-top:6px}
.nav__menu a::after{display:none}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.35);
  border-radius:4px;width:44px;height:44px;cursor:pointer;color:var(--white);
  align-items:center;justify-content:center;flex:none;
}
.nav-toggle svg{width:20px;height:20px}

@media (max-width:1180px){
  .nav-toggle{display:flex}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--teal-800);border-bottom:1px solid rgba(96,139,147,.32);
    flex-direction:column;align-items:stretch;gap:2px;padding:14px 24px 22px;
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .site-header[data-open="true"] .nav{display:flex}
  .nav a{padding:13px 8px;font-size:.875rem}
  .nav a[aria-current="page"]::after{width:36px}
  .nav__group{position:static}
  .nav__toggle{width:100%;justify-content:space-between;padding:13px 8px;font-size:.875rem}
  .nav__menu{position:static;min-width:0;background:rgba(0,0,0,.22);border:0;margin:2px 0 8px;padding:4px;box-shadow:none}
  .nav__cta{margin:12px 0 0}
  .nav__cta.btn{width:100%;padding:15px 26px;font-size:.75rem}
}

/* ---------- chromatic dark ground ----------
   A near-black teal base lit from behind by soft pools of the brand's violet,
   azure, orchid and jade. The pools drift very slowly, which is what keeps the
   section from reading as a flat colour. Used by every hero and by any section
   carrying .bg-chroma. */
.hero,.bg-chroma{position:relative;background-color:#0F1E21;overflow:hidden;isolation:isolate}
.hero::before,.bg-chroma::before{
  content:"";position:absolute;inset:-22%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(44% 56% at 16% 26%, rgba(112,91,178,.62) 0%, rgba(112,91,178,0) 70%),
    radial-gradient(40% 52% at 84% 20%, rgba(45,127,209,.5) 0%, rgba(45,127,209,0) 70%),
    radial-gradient(42% 56% at 72% 86%, rgba(144,65,163,.56) 0%, rgba(144,65,163,0) 70%),
    radial-gradient(36% 46% at 26% 90%, rgba(76,187,155,.42) 0%, rgba(76,187,155,0) 70%),
    radial-gradient(30% 40% at 52% 52%, rgba(65,159,182,.22) 0%, rgba(65,159,182,0) 70%),
    linear-gradient(135deg,#142528 0%,#0E1B1E 48%,#161A2E 100%);
  animation:chromaDrift 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes chromaDrift{
  0%  {transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50% {transform:translate3d(-2.5%,2%,0) rotate(1.5deg) scale(1.04)}
  100%{transform:translate3d(2%,-2.5%,0) rotate(-1.5deg) scale(1.02)}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(64px,8vw,132px)}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,#4E3DB0,#2563DB,#35CCD2,#00DFA8,#82D77F,#00DFA8,#35CCD2,#2563DB,#4E3DB0);
  background-size:200% 100%;animation:capFlow 14s linear infinite;opacity:.85;
}
.hero__glow{
  position:absolute;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.3;
}
.hero__glow--a{width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,#4CBB9B,transparent 68%)}
.hero__glow--b{width:460px;height:460px;bottom:-200px;left:-140px;background:radial-gradient(circle,#705BB2,transparent 68%)}
.hero__inner{position:relative;z-index:1;display:grid;gap:clamp(36px,4vw,64px);align-items:center}
@media (min-width:980px){ .hero__inner{grid-template-columns:1.08fr .92fr} }
.hero h1{margin-bottom:.35em}
.hero__sub{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.7;color:var(--gray-200);max-width:36em}
.hero__points{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px 28px}
.hero__points li{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-label);font-weight:600;font-size:.95rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--white);
}
.hero__points svg{
  width:26px;height:26px;flex:none;
  filter:drop-shadow(0 0 6px rgba(95,245,137,.45));
  animation:badgePulse 3.6s ease-in-out infinite;
}
.hero__points li:nth-child(2) svg{animation-delay:.6s}
.hero__points li:nth-child(3) svg{animation-delay:1.2s}
@keyframes badgePulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px rgba(95,245,137,.3))}
  50%    {transform:scale(1.14);filter:drop-shadow(0 0 10px rgba(95,245,137,.7))}
}
.hero--inner{padding-block:clamp(52px,6vw,92px)}

/* hero product photo: floats gently over a soft chromatic pool */
.hero__photo{position:relative;margin:0;display:grid;place-items:center;padding:12px}
.hero__photo::before{
  content:"";position:absolute;inset:8% 6%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(65,159,182,.45),rgba(112,91,178,.28) 55%,transparent 75%);
  filter:blur(28px);
}
.hero__photo img{
  width:min(100%,520px);height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 6px 12px rgba(0,0,0,.35));
  animation:heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* gradient-filled display word */
.chroma-text{
  background:var(--grad-spectrum);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Brighter variant with enough luminance to sit on the chromatic dark ground. */
.chroma-text--bright{
  background:linear-gradient(90deg,#9FDCFF 0%,#4FE8DB 40%,#8CF07A 80%,#4FE8DB 100%);
  background-size:200% 100%;animation:capFlow 8s linear infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- stats band ---------- */
.stats{display:grid;gap:1px;background:rgba(96,139,147,.32);border-block:1px solid rgba(96,139,147,.32)}
@media (min-width:640px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--teal-700);padding:36px 26px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.stat__value{
  font-family:var(--font-body);font-weight:400;font-size:clamp(2.3rem,1.7rem + 1.8vw,3.3rem);
  line-height:1.05;margin-bottom:.45rem;
  background:linear-gradient(90deg,#9FDCFF,#4FE8DB,#8CF07A,#4FE8DB,#9FDCFF);
  background-size:200% 100%;animation:capFlow 10s linear infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.stat__label{
  font-family:var(--font-label);font-weight:600;font-size:.82rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gray-200);line-height:1.6;
}

/* ---------- numbered steps ---------- */
.steps{display:grid;gap:var(--gap)}
@media (min-width:700px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .steps{grid-template-columns:repeat(4,1fr)} }
/* Each step is a proper module: white, hairline, shadow, animated spectrum cap.
   Works identically on light bands and on the dark ground. */
.step{
  position:relative;background:var(--white);color:var(--ink-900);
  border:1px solid #000;border-radius:var(--radius-card);
  padding:34px 28px 30px;box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.step__rule{
  position:absolute;inset:0 0 auto 0;height:4px;margin:0;
  background:linear-gradient(90deg,#4E3DB0,#2563DB,#35CCD2,#00DFA8,#82D77F,#00DFA8,#35CCD2,#2563DB,#4E3DB0);
  background-size:200% 100%;animation:capFlow 12s linear infinite;
}
.step__n{
  font-family:var(--font-label);font-weight:600;font-size:.8rem;letter-spacing:.12em;
  color:var(--muted);display:block;margin-bottom:.8rem;
}
.step .eyebrow,.card .eyebrow,.form-card .eyebrow{color:var(--muted)}
.step h3{font-size:1.4rem;margin-bottom:.55rem;color:var(--ink-950)}
.step p{color:var(--ink-900);margin-bottom:0;font-size:1.04rem;line-height:1.65}

/* ---------- checklist ---------- */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checklist li{position:relative;padding-left:34px;line-height:1.65}
.checklist li::before{
  content:"";position:absolute;left:0;top:.42em;width:19px;height:19px;border-radius:50%;
  background:var(--grad-mark);
}
.checklist li::after{
  content:"";position:absolute;left:5.5px;top:.76em;width:7px;height:3.5px;
  border-left:2px solid #16302f;border-bottom:2px solid #16302f;transform:rotate(-45deg);
}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;border-block:1px solid rgba(96,139,147,.32);
  background:rgba(0,0,0,.16);padding-block:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  display:flex;align-items:center;gap:14px;padding-inline:26px;
  font-family:var(--font-label);font-weight:600;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gray-200);white-space:nowrap;
}
.marquee__item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--palm);opacity:.8}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- FAQ accordion ---------- */
.faq{display:grid;gap:12px}
.faq__item{
  background:var(--white);border:1px solid #000;border-radius:var(--radius-card);
  overflow:hidden;position:relative;box-shadow:var(--shadow-card);
}
.faq__item::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,#A967E3,#C564CF,#DF5FBC,#C564CF,#A967E3);
  background-size:200% 100%;animation:capFlow 9s linear infinite;
}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:24px 24px 22px;color:var(--ink-950);
  font-family:var(--font-label);font-weight:600;font-size:.95rem;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.5;
}
.faq__sign{position:relative;width:16px;height:16px;flex:none}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;background:var(--ink-950);transition:transform .22s ease,opacity .22s ease;
}
.faq__sign::before{inset:7px 0 auto 0;height:2px}
.faq__sign::after{inset:0 7px auto 7px;width:2px;height:16px}
.faq__item[data-open="true"] .faq__sign::after{transform:scaleY(0);opacity:0}
.faq__a{display:none;padding:0 24px 26px;color:var(--ink-900);font-size:1.04rem;line-height:1.65}
.faq__item[data-open="true"] .faq__a{display:block}
.faq__a > :last-child{margin-bottom:0}

/* ---------- forms ---------- */
.form-card{
  background:var(--white);border:1px solid #000;border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);position:relative;overflow:hidden;
  padding:clamp(28px,3.5vw,44px);color:var(--ink-900);
}
.form-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-rule)}
.form-card h2,.form-card h3{color:var(--ink-950)}
.form-grid{display:grid;gap:22px 20px}
@media (min-width:640px){
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .field--full{grid-column:1/-1}
}
.field{display:flex;flex-direction:column;gap:8px}
.field label{
  font-family:var(--font-body);font-weight:400;font-size:.9375rem;color:var(--ink-900);
}
.field label .req{color:#C0392B;margin-left:2px}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-weight:300;font-size:1rem;color:var(--ink-900);
  background:var(--off-white);border:1px solid #000;border-radius:4px;
  min-height:48px;padding:12px 14px;width:100%;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#6B6E75}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--azure);box-shadow:0 0 0 3px rgba(45,127,209,.18);
}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px;
}
.field__hint{font-size:.8125rem;color:var(--muted);line-height:1.5}
.field--error input,.field--error select,.field--error textarea{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.field__err{font-size:.8125rem;color:#C0392B;display:none}
.field--error .field__err{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.8125rem;color:var(--muted);line-height:1.6}
.consent input{width:18px;height:18px;min-height:0;flex:none;margin-top:2px;accent-color:var(--azure)}
.consent a{color:#1F63A8}
.field--error .consent{
  color:#8E2A1E;background:#FDEDEC;border-radius:6px;
  outline:2px solid #C0392B;outline-offset:6px;
}
.field--error .consent input{outline:2px solid #C0392B;outline-offset:2px}
.form-status{margin-top:18px;padding:16px 18px;border-radius:8px;font-size:.9375rem;display:none;line-height:1.6}
.form-status[data-state="ok"]{display:block;background:#E8F7F1;border:1px solid var(--jade);color:#14503E}
.form-status[data-state="err"]{display:block;background:#FDEDEC;border:1px solid #E6A9A2;color:#8E2A1E}
.form-status[data-state="busy"]{display:block;background:var(--off-white);border:1px solid var(--gray-300);color:var(--muted)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* A form that an "Apply" button scrolls to should fit on one screen.
   On desktop and laptop heights, tighten the vertical rhythm so the whole card,
   first field to submit button, sits between the sticky header and the fold. */
@media (min-width:900px) and (max-height:1000px){
  .form-card{padding:26px 30px 24px}
  .form-card .form-grid{gap:12px 18px}
  .form-card .field{gap:4px}
  .form-card .field label{font-size:.85rem}
  .form-card .field input,.form-card .field select{min-height:42px;padding:8px 12px;font-size:.95rem}
  .form-card .field textarea{min-height:58px;height:58px;padding:8px 12px;font-size:.95rem}
  .form-card .consent{font-size:.72rem;line-height:1.5;gap:10px}
  .form-card .btn-row{margin-top:14px}
  .form-card .btn{padding:14px 44px}
  .form-card .form-status{margin-top:12px;padding:12px 14px;font-size:.88rem}
  .form-card .field__err{font-size:.75rem}
}
@media (min-width:900px) and (max-height:760px){
  .form-card{padding:20px 26px 18px}
  .form-card .form-grid{gap:9px 16px}
  .form-card .field input,.form-card .field select{min-height:38px;padding:6px 12px}
  .form-card .field textarea{min-height:46px;height:46px}
  .form-card .btn-row{margin-top:10px}
  .form-card .btn{padding:12px 40px}
}
/* Phones: a 9-field form cannot fit one screen, so make it as short as it can
   honestly be while keeping 44px+ tap targets and 16px+ text (below 16px, iOS
   zooms the page whenever a field is focused). */
@media (max-width:639px){
  .form-card{padding:22px 18px 20px}
  .form-card .form-grid{gap:14px}
  .form-card .field{gap:6px}
  .form-card .field textarea{min-height:84px;height:84px}
  .form-card .field input,.form-card .field select,.form-card .field textarea{font-size:16px}
  .form-card .consent input{width:22px;height:22px}
  .form-card .btn-row{margin-top:18px}
}

/* ---------- footer ---------- */
.site-footer{background:var(--carbon);color:var(--gray-200);padding-top:clamp(48px,6vw,76px)}
.site-footer__top{display:grid;gap:36px}
@media (min-width:760px){ .site-footer__top{grid-template-columns:1.6fr 1fr 1fr} }
@media (min-width:1060px){ .site-footer__top{grid-template-columns:1.8fr 1fr 1fr 1fr} }
.site-footer h4{
  font-family:var(--font-label);font-weight:600;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--white);margin-bottom:1.1rem;
}
.site-footer p{color:var(--gray-200)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.site-footer a{color:var(--gray-200);text-decoration:none;transition:color .18s ease}
.site-footer a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.footer-area{margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);font-size:.875rem;color:#B9BCC4;line-height:1.75}
.site-footer__bottom{
  margin-top:26px;padding-block:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;
  font-size:.8125rem;color:#9BA0A9;
}
.footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.footer-brand img,.footer-brand svg{width:46px;height:46px}
.footer-brand .brand__name{font-size:1.05rem}
.site-footer p{font-size:1rem}
.site-footer a{font-size:1rem}

/* ---------- misc ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(96,139,147,.5);border-radius:999px;
  padding:9px 18px;font-family:var(--font-label);font-weight:600;
  font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-200);
  background:rgba(255,255,255,.05);text-decoration:none;transition:background .18s ease,border-color .18s ease;
}
a.pill:hover{background:rgba(255,255,255,.11);border-color:rgba(130,215,127,.6);color:var(--white)}
.band-light .pill{border-color:var(--gray-300);color:var(--ink-900);background:var(--off-white)}

.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:2em}
.prose h3{margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:.6em}
.prose a{color:var(--azure);text-decoration:underline;text-underline-offset:3px}
.band-light .prose a{color:#1F63A8}

.cta-band{position:relative;background:var(--teal-800);overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad-spectrum)}

.note{
  border-left:3px solid var(--gold);background:rgba(223,174,83,.09);
  padding:18px 22px;border-radius:0 8px 8px 0;font-size:.9375rem;line-height:1.7;
}
.band-light .note{background:#FCF6E8}

table.cmp{width:100%;border-collapse:collapse;font-size:.9375rem;background:var(--white);color:var(--ink-900)}
table.cmp th,table.cmp td{border:1px solid var(--gray-300);padding:14px 16px;text-align:left;vertical-align:top}
table.cmp thead th{
  background:var(--teal-800);color:var(--white);
  font-family:var(--font-label);font-weight:600;font-size:.75rem;
  letter-spacing:.07em;text-transform:uppercase;
}
table.cmp tbody th{font-weight:400;background:var(--off-white)}
.table-scroll{overflow-x:auto;border-radius:var(--radius-card);border:1px solid #000;box-shadow:var(--shadow-card)}

/* ---------- product catalogue ---------- */
.pgroup{margin-bottom:clamp(40px,5vw,72px)}
.pgroup__title{
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  padding-bottom:14px;margin-bottom:28px;position:relative;
}
.pgroup__title::after{
  content:"";position:absolute;left:0;bottom:0;width:120px;height:2px;background:var(--grad-spectrum);
}
.pcat{margin-bottom:40px;scroll-margin-top:calc(var(--header-h) + 150px)}
.modal .pcat{scroll-margin-top:8px}
.pcat__none{color:var(--gray-200);text-align:center;padding:40px 0}

/* category jump links: one scrollable row of pills */
.cat-nav{
  flex:1 1 100%;display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cat-nav::-webkit-scrollbar{display:none}
.cat-nav .pill{flex:none;padding:7px 14px;font-size:.72rem;white-space:nowrap}
.pill--toggle{cursor:pointer;flex:none}
.pill--toggle[aria-pressed="true"]{background:rgba(130,215,127,.2);border-color:var(--palm);color:var(--white)}
.pcat__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid rgba(96,139,147,.32);
}
.pcat__head h3{font-size:1.15rem;margin:0}
.pcat__price,.pcat__count{
  font-family:var(--font-label);font-weight:600;font-size:.72rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--teal-50);margin-left:auto;
}
.pgrid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(142px,1fr));
}
.pcard{display:flex}
.pcard__btn{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(255,255,255,.055);border:1px solid rgba(96,139,147,.42);
  border-radius:var(--radius-card);padding:14px 10px 12px;cursor:pointer;
  color:var(--gray-200);font-family:var(--font-body);font-size:.78rem;line-height:1.35;
  text-align:center;position:relative;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.pcard__btn:hover{background:rgba(255,255,255,.1);border-color:rgba(130,215,127,.55);transform:translateY(-2px)}
.pcard.is-picked .pcard__btn{
  background:rgba(130,215,127,.14);border-color:var(--palm);color:var(--white);
}
.pcard__media{
  width:100%;aspect-ratio:1;display:grid;place-items:center;
  background:var(--white);border-radius:8px;overflow:hidden;padding:6px;
}
.pcard__media img,.pcard__media svg{width:100%;height:100%;object-fit:contain}
.pcard__btn{justify-content:flex-start}
.pcard__name{display:block;font-size:.84rem;line-height:1.3;font-weight:400;color:var(--white)}
.pcard__cap{display:block;font-size:.72rem;line-height:1.4;color:rgba(234,234,234,.72);margin-top:-4px}
.pcard__h{
  position:absolute;top:8px;left:8px;z-index:1;
  font-family:var(--font-label);font-weight:600;font-size:.52rem;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 6px;border-radius:3px;
  background:#1F6F5A;color:#DFFBEF;
}
.pcard__tick{
  position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);
  display:grid;place-items:center;transition:background .18s ease,border-color .18s ease;
}
.pcard.is-picked .pcard__tick{background:var(--grad-mark);border-color:transparent}
.pcard.is-picked .pcard__tick::after{
  content:"";width:8px;height:4px;margin-top:-2px;
  border-left:2px solid #16302f;border-bottom:2px solid #16302f;transform:rotate(-45deg);
}

.shortlist{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.shortlist__empty{
  font-size:.875rem;color:var(--muted);line-height:1.6;
  border:1px dashed var(--gray-300);border-radius:8px;padding:14px 16px;width:100%;
}
.shortlist__item{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--off-white);border:1px solid var(--gray-300);border-radius:999px;
  padding:6px 6px 6px 14px;font-size:.8125rem;color:var(--ink-900);
}
.shortlist__rm{
  width:20px;height:20px;border:0;border-radius:50%;cursor:pointer;
  background:var(--gray-300);color:var(--ink-900);font-size:14px;line-height:1;
  display:grid;place-items:center;transition:background .18s ease;
}
.shortlist__rm:hover{background:#C0392B;color:#fff}

.catalog-bar{
  position:sticky;top:var(--header-h);z-index:30;
  background:rgba(30,50,51,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-block:1px solid rgba(96,139,147,.32);
  padding-block:14px;margin-bottom:clamp(28px,4vw,48px);
}
.catalog-bar__inner{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.catalog-bar input[type="search"]{
  flex:1 1 220px;min-height:44px;padding:10px 14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(96,139,147,.5);
  border-radius:6px;color:var(--white);font-family:var(--font-body);font-size:.9375rem;
}
.catalog-bar input[type="search"]::placeholder{color:var(--teal-50)}
.catalog-bar input[type="search"]:focus{outline:none;border-color:var(--palm);box-shadow:0 0 0 3px rgba(130,215,127,.2)}
.catalog-bar__count{
  font-family:var(--font-label);font-weight:600;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gray-200);white-space:nowrap;
}

/* ---------- thank-you modal (post-application catalogue picker) ---------- */
html.has-modal{overflow:hidden}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(8px,2vw,28px)}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(6,14,16,.74);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:modalFade .25s ease;
}
.modal__dialog{
  width:min(1120px,100%);max-height:min(92vh,1000px);
  display:flex;flex-direction:column;
  border:1px solid rgba(96,139,147,.5);border-radius:16px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.85),0 8px 24px -8px rgba(0,0,0,.5);
  color:var(--gray-200);outline:none;
  animation:modalRise .32s cubic-bezier(.2,.8,.2,1);
}
.modal__dialog::after{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:1;
  background:linear-gradient(90deg,#4E3DB0,#2563DB,#35CCD2,#00DFA8,#82D77F,#00DFA8,#35CCD2,#2563DB,#4E3DB0);
  background-size:200% 100%;animation:capFlow 12s linear infinite;
}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

.modal__close{
  position:absolute;top:16px;right:16px;z-index:3;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.32);background:rgba(0,0,0,.35);
  color:var(--white);font-size:26px;line-height:1;display:grid;place-items:center;
  transition:background .18s ease,border-color .18s ease;
}
.modal__close:hover{background:rgba(255,255,255,.14);border-color:var(--white)}

.modal__head{padding:36px 36px 20px;padding-right:76px;flex:none}
.modal__head .eyebrow{margin-bottom:.6rem;color:var(--palm)}
.modal__head h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);margin-bottom:.4em}
.modal__lead{font-size:1.1rem;line-height:1.65;color:var(--gray-200);max-width:62ch;margin:0}

.modal__bar{
  flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  padding:14px 36px;background:rgba(0,0,0,.26);
  border-block:1px solid rgba(96,139,147,.32);
}
.modal__bar input[type="search"]{
  flex:1 1 220px;min-height:46px;padding:10px 14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(96,139,147,.55);
  border-radius:6px;color:var(--white);font-family:var(--font-body);font-size:1rem;
}
.modal__bar input[type="search"]::placeholder{color:var(--teal-50)}
.modal__bar input[type="search"]:focus{outline:none;border-color:var(--palm);box-shadow:0 0 0 3px rgba(130,215,127,.2)}
.modal__count{
  font-family:var(--font-label);font-weight:600;font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--white);white-space:nowrap;
}
.modal__clear{
  background:none;border:0;cursor:pointer;padding:6px 4px;
  font-family:var(--font-label);font-weight:600;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-50);text-decoration:underline;text-underline-offset:3px;
}
.modal__clear:hover{color:var(--white)}

.modal__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 36px 12px}
.modal__body .pgroup{margin-bottom:34px}
.modal__body .pgroup__title{font-size:1.45rem;margin-bottom:22px}
.modal__loading{color:var(--gray-200);padding:32px 0;text-align:center}
.modal__loading a{color:var(--palm)}

.modal__foot{flex:none;padding:16px 36px 22px;background:rgba(0,0,0,.32);border-top:1px solid rgba(96,139,147,.32)}
.modal__foot .form-status{margin:0 0 14px}
.modal__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.modal__actions .btn{padding:15px 34px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-light[disabled]:hover{background:var(--white);color:var(--teal-800);border-color:var(--white)}

@media (max-width:640px){
  .modal{padding:0}
  .modal__dialog{max-height:none;height:100vh;height:100dvh;border-radius:0;border:0}
  .modal__head{padding:22px 20px 14px;padding-right:66px}
  .modal__head .eyebrow{margin-bottom:.35rem}
  .modal__head h2{font-size:1.55rem}
  .modal__lead{font-size:1rem;line-height:1.55}
  .modal__bar{padding:10px 20px;gap:8px 14px}
  .modal__bar input[type="search"]{flex:1 1 120px;min-height:44px}
  .modal__body{padding:22px 20px 8px}
  .modal__foot{padding:14px 20px 18px}
  .modal__actions .btn{flex:1 1 0;padding:15px 12px}
  .modal__close{top:10px;right:10px}
}

/* Product photo inside a card (white studio shots sit naturally on white). */
.photo-frame{
  display:grid;place-items:center;aspect-ratio:1;margin:-4px -4px 22px;
  border-radius:8px;background:var(--white);overflow:hidden;
}
.photo-frame img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.card--lift:hover .photo-frame img{transform:scale(1.04)}
.photo-frame--pair{grid-template-columns:1fr 1fr;gap:6px}
.photo-frame--pair img{width:100%}

/* Illustrated stand-in where a real product photo will go. */
.photo-slot{
  position:relative;display:grid;place-items:center;
  aspect-ratio:4/3;margin:-4px -4px 22px;
  border-radius:8px;background:var(--off-white);
  color:var(--teal-200);overflow:hidden;
}
.photo-slot svg{width:auto;height:78%;max-width:80%}
.photo-slot::after{
  content:attr(data-slot);position:absolute;left:10px;bottom:10px;
  font-family:var(--font-label);font-weight:600;font-size:.6rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}

.breadcrumb{font-size:.8125rem;color:var(--teal-50);margin-bottom:1.2rem}
.breadcrumb a{color:var(--teal-50);text-decoration:none}
.breadcrumb a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.breadcrumb span{opacity:.8;margin-inline:.45em}