/* =========================================================
   Skillvelop  |  Study Abroad
   Palette sampled directly from logo.png:
     wordmark indigo  #201848
     arc gradient     #E797BE -> #F48D97 -> #FA7164
   The coral gradient always carries deep indigo text, the way
   the logo does. That pairing clears WCAG AA at 5.9:1, while
   white on coral would not.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#201848;
  --ink-2:#2C2062;
  --ink-3:#3B2D80;
  --ink-soft:#5C5388;
  --ink-mute:#847C9F;

  --rose:#E797BE;
  --blush:#F48D97;
  --coral:#FA7164;
  --coral-d:#D8452F;
  --coral-t:#C13B26;

  --paper:#FFFFFF;
  --cream:#FFF4F0;
  --petal:#FDF0F5;
  --lilac:#F3F1FB;
  --tint:#FAF8FE;
  --line:rgba(32,24,72,.10);
  --line-2:rgba(32,24,72,.17);

  --grad:linear-gradient(102deg,#E797BE 0%,#F48D97 46%,#FA7164 100%);
  --grad-r:linear-gradient(282deg,#E797BE 0%,#F48D97 46%,#FA7164 100%);
  --grad-soft:linear-gradient(140deg,#FFE9E4 0%,#FBE6EE 100%);

  --sh-1:0 1px 2px rgba(32,24,72,.05), 0 4px 14px rgba(32,24,72,.05);
  --sh-2:0 2px 6px rgba(32,24,72,.06), 0 14px 34px rgba(32,24,72,.09);
  --sh-3:0 8px 20px rgba(32,24,72,.09), 0 28px 64px rgba(32,24,72,.14);
  --sh-c:0 10px 26px rgba(250,113,100,.32);

  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:36px;
  --wrap:1216px;
  --pad:clamp(20px,4vw,40px);
  --nav-h:78px;

  --ease:cubic-bezier(.22,.68,0,1);
  --ease-b:cubic-bezier(.34,1.56,.64,1);
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,iframe{max-width:100%; display:block}
img{height:auto}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p,figure,fieldset,legend{margin:0}
fieldset{border:0; padding:0; min-width:0}
address{font-style:normal}
:focus-visible{outline:3px solid var(--coral-d); outline-offset:3px; border-radius:6px}

h1,h2,h3,h4{line-height:1.11; letter-spacing:-.03em; font-weight:800}
h1{font-size:clamp(2.3rem,5vw,3.9rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.3rem); letter-spacing:-.018em}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.section{padding:clamp(66px,8vw,114px) 0; position:relative}
.section--tint{background:var(--tint)}
.section--ink{background:var(--ink); color:#fff}
.ico{width:1.15em; height:1.15em; flex:none; fill:currentColor}
.skip{position:absolute; left:-9999px; top:8px; background:var(--ink); color:#fff; padding:10px 18px; border-radius:8px; z-index:999}
.skip:focus{left:16px}

/* ---------- 2b. Scrollbars ---------- */
/* the default chunky OS bar reads as unfinished next to everything else */
html{scrollbar-width:thin; scrollbar-color:rgba(32,24,72,.26) transparent}
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(32,24,72,.24); border-radius:100px;
  border:3.5px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(32,24,72,.42); background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
.modal__dialog,.sel__pop{scrollbar-width:thin; scrollbar-color:rgba(32,24,72,.22) transparent}
.modal__dialog::-webkit-scrollbar,.sel__pop::-webkit-scrollbar{width:10px}

/* ---------- 3. Scroll progress ---------- */
.progress{position:fixed; inset:0 0 auto 0; height:3px; z-index:120; pointer-events:none}
.progress i{display:block; height:100%; width:0; background:var(--grad); transition:width .1s linear}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:100px; font-weight:800; font-size:.95rem;
  letter-spacing:-.012em; white-space:nowrap; cursor:pointer;
  transition:transform .28s var(--ease-b), box-shadow .28s var(--ease), background .2s, color .2s, border-color .2s;
  will-change:transform;
}
.btn .ico{transition:transform .3s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}

/* coral gradient + indigo text, straight off the logo */
.btn--primary{background:var(--grad); color:var(--ink); box-shadow:var(--sh-c)}
.btn--primary:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(250,113,100,.42)}
.btn--ink{background:var(--ink); color:#fff; box-shadow:0 10px 26px rgba(32,24,72,.26)}
.btn--ink:hover{transform:translateY(-3px); background:var(--ink-2)}
.btn--ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--ink); transform:translateY(-3px); box-shadow:var(--sh-2)}
.section--ink .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.3)}
.section--ink .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn--white{background:#fff; color:var(--ink); box-shadow:0 10px 30px rgba(32,24,72,.18)}
.btn--white:hover{transform:translateY(-3px)}
.btn--outline-ink{border:1.5px solid rgba(32,24,72,.4); color:var(--ink)}
.btn--outline-ink:hover{background:rgba(32,24,72,.07); border-color:var(--ink); transform:translateY(-3px)}
.btn--sm{padding:10px 17px; font-size:.87rem}
.btn--lg{padding:16px 30px; font-size:1.02rem}
/* full width CTAs carry long labels, so they must be allowed to wrap.
   nowrap here gives the button a min-content width that can push a whole
   grid column wider than the viewport. */
.btn--block{width:100%; white-space:normal; text-align:center}
@media (max-width:600px){.btn{white-space:normal}}
.playdot{width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; margin-right:-2px}
.playdot .ico{width:.62em; height:.62em; transform:translateX(1px)}
.btn:hover .playdot .ico{transform:translateX(1px)}

.pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:100px;
  font-size:.78rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  background:var(--cream); color:var(--coral-t); border:1px solid rgba(250,113,100,.28);
}
.pill--soft{background:var(--lilac); color:var(--ink-2); border-color:rgba(59,45,128,.16)}
.pill--light{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28)}
.pill--ink{background:rgba(32,24,72,.1); color:var(--ink); border-color:rgba(32,24,72,.2)}
.pill__dot{width:7px; height:7px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 0 rgba(250,113,100,.6); animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(250,113,100,0)}100%{box-shadow:0 0 0 0 rgba(250,113,100,0)}}

/* ---------- 5. Announcement ticker ---------- */
.ticker{background:var(--ink); color:rgba(255,255,255,.9); font-size:.82rem; overflow:hidden; position:relative; z-index:60}
.ticker__track{display:flex; width:max-content; animation:slide 44s linear infinite}
.ticker__set{display:flex; align-items:center; gap:22px; padding:9px 22px 9px 0}
.ticker__set span{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.ticker__set .ico{color:var(--blush)}
.ticker .dot{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.32)}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 6. Navigation ---------- */
.nav{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.nav.is-stuck{border-bottom-color:var(--line); box-shadow:0 6px 26px rgba(32,24,72,.07)}
.nav__inner{display:flex; align-items:center; gap:clamp(12px,1.8vw,26px); height:var(--nav-h)}
.brand{flex:none}
.brand img{width:auto; height:40px; transition:height .3s var(--ease)}
.nav.is-stuck .brand img{height:34px}

.nav__menu{display:flex; flex:1; align-items:center; min-width:0}
/* deliberately NOT positioned: the mega panel is absolutely positioned and
   must resolve against .nav so it can span the full header width */
.nav__list{display:flex; align-items:center; gap:2px}
.nav__link{
  display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:100px;
  font-size:.92rem; font-weight:600; color:var(--ink-soft); position:relative; z-index:1;
  white-space:nowrap; transition:color .25s var(--ease);
}
.nav__link:hover,.nav__link[aria-expanded="true"],.nav__link.is-active{color:var(--ink)}
.nav__link .caret{width:11px; height:11px; opacity:.5; transition:transform .3s var(--ease), opacity .25s}
.nav__link:hover .caret{opacity:.85}
.nav__link[aria-expanded="true"] .caret{transform:rotate(180deg); opacity:1}

/* the pill slides between items instead of every item having its own hover box.
   Its containing block is .nav, so --x is measured from the header's left edge. */
.nav__ink{
  position:absolute; z-index:0; left:0; top:calc(var(--nav-h) / 2); height:38px; border-radius:100px;
  background:var(--lilac); transform:translateY(-50%) translateX(var(--x,0)); width:var(--w,0);
  opacity:0; transition:transform .38s var(--ease), width .38s var(--ease), opacity .25s;
  pointer-events:none;
}
.nav__list:hover .nav__ink,.nav__ink.is-on{opacity:1}
.nav__link.is-active::after{
  content:""; position:absolute; left:50%; bottom:2px; width:16px; height:2.5px; border-radius:100px;
  background:var(--grad); transform:translateX(-50%);
}

.nav__cta{display:flex; align-items:center; gap:10px; margin-left:auto; flex:none}
.nav__mail{display:none; align-items:center; gap:7px; font-size:.86rem; font-weight:700; color:var(--ink);
  padding:9px 13px; border-radius:100px; white-space:nowrap; transition:background .25s, color .25s}
.nav__mail .ico{color:var(--coral-d); transition:transform .3s var(--ease-b)}
.nav__mail:hover{background:var(--cream)}
.nav__mail:hover .ico{transform:scale(1.12) rotate(-6deg)}
@media (min-width:1320px){.nav__mail{display:inline-flex}}

.burger{display:grid; place-items:center; width:44px; height:44px; border-radius:13px; border:1.5px solid var(--line-2); color:var(--ink);
  transition:background .25s, border-color .25s, color .25s}
.burger:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.burger .ico{width:22px; height:22px}
.burger .ico--close{display:none}
.burger[aria-expanded="true"] .ico--open{display:none}
.burger[aria-expanded="true"] .ico--close{display:block}
@media (min-width:1120px){.burger{display:none}}

.mega{
  position:absolute; left:0; right:0; top:100%; opacity:0; visibility:hidden;
  transform:translateY(-12px); transition:opacity .26s var(--ease), transform .34s var(--ease), visibility .26s;
  background:#fff; border-top:1px solid var(--line); border-radius:0 0 28px 28px;
  box-shadow:0 28px 64px rgba(32,24,72,.16), 0 4px 12px rgba(32,24,72,.05);
  padding:30px 0 34px;
}
.has-mega{position:static}
.has-mega.is-open .mega{opacity:1; visibility:visible; transform:translateY(0)}
.mega__inner{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:34px; align-items:start}
.mega--sm .mega__inner{grid-template-columns:minmax(0,1fr); max-width:1040px}
.mega__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.mega__grid--2{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega__item{display:flex; gap:12px; padding:12px 13px; border-radius:14px; width:100%; text-align:left;
  font:inherit; color:inherit; cursor:pointer; border:0; background:none;
  transition:background .22s, transform .28s var(--ease), box-shadow .28s}
.mega__item:hover{background:var(--tint); transform:translateY(-2px); box-shadow:var(--sh-1)}
.mega__item:hover .mi{transform:scale(1.08) rotate(-6deg)}
.mega__item .mi{transition:transform .35s var(--ease-b)}
.mega__item img{width:26px; height:18px; border-radius:3px; object-fit:cover; margin-top:4px; box-shadow:0 0 0 1px var(--line)}
.mega__item .mi{width:36px; height:36px; border-radius:11px; background:var(--grad-soft); color:var(--coral-d); display:grid; place-items:center; flex:none}
.mega__item>div{min-width:0}
.mega__item b{display:block; font-size:.94rem; font-weight:700; letter-spacing:-.015em; margin-bottom:2px}
.mega__item span{display:block; font-size:.81rem; color:var(--ink-mute); line-height:1.45; text-wrap:pretty}
.mega__promo{background:var(--ink); color:#fff; border-radius:var(--r-m); padding:22px}
.mega__promoTitle{font-size:1.1rem; font-weight:800; letter-spacing:-.02em; margin:12px 0 8px; line-height:1.25}
.mega__promo p{font-size:.85rem; color:rgba(255,255,255,.74); margin-bottom:16px}
.nav__mobileFoot{display:none}
.nav__scrim{position:fixed; inset:0; background:rgba(32,24,72,.45); backdrop-filter:blur(3px); z-index:95; animation:fade .25s}
@keyframes fade{from{opacity:0}}

@media (max-width:1119px){
  /* backdrop-filter here would become the containing block for the
     fixed drawer below and collapse it, so go solid instead */
  .nav{backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff}
  .nav__ink{display:none}
  .nav__link.is-active::after{display:none}
  .nav__menu{
    position:fixed; inset:var(--nav-h) 0 0 auto; width:min(400px,88vw); background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:20px var(--pad) 32px;
    transform:translateX(105%); transition:transform .4s var(--ease); overflow-y:auto; z-index:99;
    box-shadow:-20px 0 60px rgba(32,24,72,.16);
  }
  .nav__menu.is-open{transform:none}
  .nav__list{flex-direction:column; align-items:stretch; gap:2px}
  .nav__link{width:100%; justify-content:space-between; padding:14px 12px; font-size:1.02rem; border-radius:12px}
  .mega{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0;
    display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease)}
  .has-mega.is-open .mega{grid-template-rows:1fr}
  .mega__inner{overflow:hidden; padding:0 0 10px; grid-template-columns:minmax(0,1fr); gap:10px}
  .mega__grid,.mega__grid--2{grid-template-columns:minmax(0,1fr)}
  .mega__item{padding:10px}
  .nav__mobileFoot{display:grid; gap:10px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line)}
  .nav__cta .btn--primary{display:none}
}

/* ---------- 7. Hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(44px,5.5vw,80px) 0 clamp(66px,7vw,106px);
  background:linear-gradient(176deg,#fff 0%,var(--cream) 58%,#fff 100%)}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(72px); opacity:.55}
.blob--1{width:520px; height:520px; background:radial-gradient(circle,#FFD5CC,transparent 68%); top:-190px; right:-110px; animation:drift 22s ease-in-out infinite}
.blob--2{width:460px; height:460px; background:radial-gradient(circle,#E6DEFB,transparent 68%); bottom:-200px; left:-150px; animation:drift 26s ease-in-out infinite reverse}
.blob--3{width:330px; height:330px; background:radial-gradient(circle,#FBDCE8,transparent 70%); top:38%; left:46%; animation:drift 19s ease-in-out infinite}
@keyframes drift{50%{transform:translate3d(38px,-30px,0) scale(1.09)}}
.grid-dots{position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(32,24,72,.13) 1px,transparent 1px); background-size:26px 26px;
  mask-image:radial-gradient(ellipse 76% 60% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 76% 60% at 50% 40%,#000 20%,transparent 78%);
}

.hero__inner{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(34px,4vw,64px); align-items:center}
.hero__copy>*+*{margin-top:20px}
.hero h1{margin-top:18px}
.hl{position:relative; display:inline-block; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hl::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.02em; height:.19em; border-radius:100px;
  background:var(--grad); opacity:.3; transform:scaleX(0); transform-origin:left;
  animation:swipe 1s var(--ease) .5s forwards;
}
@keyframes swipe{to{transform:scaleX(1)}}
.lede{font-size:clamp(1.02rem,1.2vw,1.13rem); color:var(--ink-soft); max-width:57ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

.hero__facts{display:flex; flex-wrap:wrap; gap:9px; margin-top:30px}
.fact{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:100px;
  background:#fff; border:1px solid var(--line); font-size:.83rem; font-weight:700; box-shadow:var(--sh-1);
}
.fact .ico{width:15px; height:15px; color:var(--coral-d)}
.fact--zero .ico{color:#0F9A6A}

/* hero stage, a product style composition rather than a stock photo */
.hero__stage{position:relative; padding:22px 0}
.arcmark{position:absolute; left:-6%; top:-11%; width:112%; height:auto; z-index:0; opacity:.95}
.panel{
  position:relative; z-index:2; background:#fff; border-radius:var(--r-xl); padding:22px;
  box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.9);
  transition:transform .4s var(--ease); transform-style:preserve-3d;
}
.panel__top{display:flex; align-items:center; gap:8px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.panel__dot{width:9px; height:9px; border-radius:50%; background:var(--line-2)}
.panel__dot:nth-child(1){background:var(--coral)}
.panel__dot:nth-child(2){background:var(--blush)}
.panel__dot:nth-child(3){background:var(--rose)}
.panel__top b{margin-left:8px; font-size:.95rem; font-weight:800}
.panel__tag{margin-left:auto; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px; background:var(--lilac); color:var(--ink-2)}
.unirows{display:grid; grid-template-columns:minmax(0,1fr); gap:3px; padding:14px 0}
.unirow{display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:14px; min-width:0; transition:background .25s}
.unirow:hover{background:var(--tint)}
.unirow>img{width:30px; height:21px; flex:none; border-radius:4px; object-fit:cover; box-shadow:0 0 0 1px var(--line)}
.unirow__id{flex:1; min-width:0}
.unirow__id b{display:block; font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.unirow__id span{display:block; font-size:.74rem; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.unirow__band{flex:none; white-space:nowrap; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:100px}
.band--reach{background:#FBE7E4; color:var(--coral-t)}
.band--match{background:#E7F6F0; color:#0B7A54}
.band--safe{background:var(--lilac); color:var(--ink-2)}
.panel__foot{display:flex; gap:14px; padding-top:16px; border-top:1px solid var(--line)}
.panel__foot div{flex:1; padding:12px 14px; border-radius:14px; background:var(--tint)}
.panel__foot span{display:block; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute)}
.panel__foot b{display:block; font-size:1.18rem; font-weight:800; letter-spacing:-.025em; margin-top:3px}
.panel__foot .zero{color:#0F9A6A}

.chipcard{
  position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px;
  border-radius:100px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  box-shadow:var(--sh-2); border:1px solid rgba(255,255,255,.9); animation:bob 5.5s ease-in-out infinite;
}
.chipcard img{width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:center 24%}
/* solid ink disc with a white glyph, so the icon still reads at 38px.
   Indigo on the coral gradient washed out at this size. */
/* scoped to .chipcard so it beats the `.chipcard div span` text rule below */
.chipcard .chipcard__ico{width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; flex:none; font-size:1rem}
.chipcard .chipcard__ico .ico{width:20px; height:20px; stroke-width:2.1}
.chipcard .chipcard__ico--score{background:var(--grad); color:var(--ink)}
.chipcard .chipcard__ico--score .ico{stroke-width:2.3}
.chipcard b{display:block; font-size:.81rem; font-weight:800; line-height:1.2; text-align:left}
.chipcard div span{display:block; font-size:.71rem; color:var(--ink-mute); line-height:1.3; text-align:left}
.chipcard--call{top:-14px; left:-30px}
.chipcard--doc{bottom:66px; right:-26px; animation-delay:1.6s}
.chipcard--score{bottom:-18px; left:8px; animation-delay:2.8s; cursor:pointer; text-align:left;
  transition:transform .3s var(--ease-b), box-shadow .3s}
.chipcard--score:hover{transform:translateY(-4px) scale(1.03); box-shadow:var(--sh-3)}
@keyframes bob{50%{transform:translateY(-10px)}}

@media (max-width:1023px){
  .hero__inner{grid-template-columns:minmax(0,1fr); gap:52px}
  .hero__stage{max-width:520px; margin-inline:auto; width:100%}
  .chipcard--call{left:-8px} .chipcard--doc{right:-6px}
}
@media (max-width:560px){
  .arcmark{display:none}
  .chipcard{padding:8px 12px 8px 8px}
  .chipcard--call{top:-18px; left:-6px}
  .chipcard--doc{bottom:74px; right:-4px}
  .chipcard--score{bottom:-20px; left:0}
  .panel__foot{flex-direction:column}
}

/* ---------- 8. Marquees ---------- */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex; width:max-content; animation:slide var(--dur,40s) linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee__set{display:flex; align-items:center; gap:12px; padding-right:12px}
.marquee:hover .marquee__track{animation-play-state:paused}

.flagband{padding:clamp(34px,4.6vw,54px) 0; background:#fff; border-block:1px solid var(--line); display:grid; gap:12px}
.flagband__head{text-align:center; margin-bottom:6px}
.flagband__head p{display:inline-flex; align-items:center; gap:9px; font-size:.92rem; color:var(--ink-soft)}
.flagband__head .ico{color:var(--coral-d)}
.flagband__head b{color:var(--ink)}
.fchip{
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:100px;
  background:var(--tint); border:1px solid var(--line); font-size:.9rem; font-weight:600; white-space:nowrap;
  transition:transform .3s var(--ease-b), border-color .3s, box-shadow .3s;
}
.fchip:hover{transform:translateY(-3px); border-color:rgba(250,113,100,.45); box-shadow:var(--sh-1)}
.fchip img{width:30px; height:21px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px var(--line)}

/* ---------- 9. Promise band ---------- */
.promise{background:var(--ink); color:#fff; padding:clamp(44px,5vw,64px) 0; position:relative; overflow:hidden}
.promise::before{content:""; position:absolute; inset:0; background:radial-gradient(720px 320px at 84% 0%,rgba(250,113,100,.34),transparent 70%)}
.promise__grid{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px}
.pcell{text-align:center; padding:8px 10px; position:relative}
.pcell+.pcell::before{content:""; position:absolute; left:-11px; top:16%; bottom:16%; width:1px; background:rgba(255,255,255,.16)}
.pcell__ico{width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.1); display:grid; place-items:center; margin:0 auto 12px; color:var(--blush)}
.pcell b{display:block; font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; letter-spacing:-.035em; line-height:1.05}
.pcell p{font-size:.85rem; color:rgba(255,255,255,.68); margin-top:8px; line-height:1.45}
@media (max-width:760px){
  .promise__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px}
  .pcell:nth-child(odd)+.pcell::before{display:none}
  .pcell:nth-child(3)::before{display:none}
}

/* ---------- 10. Section headers ---------- */
.shead{max-width:760px; margin-bottom:clamp(34px,4vw,54px)}
.shead h2{margin:16px 0 14px}
.shead p{color:var(--ink-soft); font-size:1.02rem}
.shead--light h2{color:#fff}
.shead--light p{color:rgba(255,255,255,.74)}
.shead--split{max-width:none; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:clamp(20px,3vw,50px); align-items:end}
.shead--split h2{margin-bottom:0}
.shead--split p{padding-bottom:6px}
@media (max-width:860px){.shead--split{grid-template-columns:minmax(0,1fr); gap:16px} .shead--split p{padding-bottom:0}}

/* ---------- 11. Value cards ---------- */
.cards6{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:28px 26px 30px;
  position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card::after{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card__ico{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--grad-soft); color:var(--coral-t); font-size:1.35rem; transition:transform .45s var(--ease-b);
}
.card:hover .card__ico{transform:translateY(-2px) rotate(-6deg) scale(1.06)}
.card__ico--on-ink{background:rgba(255,255,255,.12); color:var(--blush)}
.card h3{margin-bottom:9px}
.card p{font-size:.95rem; color:var(--ink-soft)}
@media (max-width:960px){.cards6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards6{grid-template-columns:minmax(0,1fr)}}

/* ---------- 12. Destination explorer ---------- */
.dest__controls{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:18px 22px;
  margin-bottom:26px; box-shadow:var(--sh-1);
}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:9px 16px; border-radius:100px; font-size:.87rem; font-weight:600; color:var(--ink-soft);
  border:1.5px solid var(--line-2); transition:all .25s var(--ease)}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:#fff}

.slider{min-width:0; flex:1 1 250px; max-width:330px}
.slider label{display:block; font-size:.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:8px}
.slider label b{color:var(--coral-t); font-weight:800}
.slider__hint{display:block; font-size:.75rem; color:var(--ink-mute); margin-top:6px}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:100px;
  background:var(--lilac); outline-offset:6px; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--grad); border:3px solid #fff; box-shadow:var(--sh-c); cursor:grab; transition:transform .2s var(--ease-b)}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.16); cursor:grabbing}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--coral);
  border:3px solid #fff; box-shadow:var(--sh-c); cursor:grab}

.dgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.dcard{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .45s var(--ease), box-shadow .45s var(--ease), opacity .35s, filter .35s}
.dcard:hover{transform:translateY(-7px); box-shadow:var(--sh-3)}
.dcard.is-hidden{display:none}
.dcard.is-dim{opacity:.34; filter:grayscale(1)}
.dcard__media{position:relative; overflow:hidden; background:var(--lilac)}
.dcard__media>img:first-child{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .7s var(--ease)}
.dcard:hover .dcard__media>img:first-child{transform:scale(1.07)}
.dcard__media::after{content:""; position:absolute; inset:auto 0 0 0; height:52%; background:linear-gradient(transparent,rgba(32,24,72,.52))}
.dcard__flag{position:absolute; left:16px; bottom:16px; width:44px; height:30px; border-radius:5px; object-fit:cover; z-index:2;
  box-shadow:0 3px 12px rgba(0,0,0,.34), 0 0 0 2px rgba(255,255,255,.85)}
.dcard__tag{position:absolute; top:14px; right:14px; z-index:2; padding:6px 12px; border-radius:100px;
  background:rgba(255,255,255,.95); font-size:.72rem; font-weight:800; color:var(--coral-t)}
.dcard__body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.dcard__body h3{margin-bottom:8px}
.dcard__body>p{font-size:.9rem; color:var(--ink-soft); margin-bottom:16px; min-height:4.95em}
.specs{display:grid; gap:1px; background:var(--line); border-radius:14px; overflow:hidden; margin-bottom:18px}
.specs li{display:flex; justify-content:space-between; gap:12px; background:var(--tint); padding:10px 14px; font-size:.82rem}
.specs span{color:var(--ink-mute)}
.specs b{text-align:right; font-weight:700}
.dcard__link{margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-size:.89rem; font-weight:800; color:var(--coral-t)}
.dcard__link .ico{transition:transform .3s var(--ease)}
.dcard__link:hover .ico{transform:translateX(5px)}
.dest__empty{text-align:center; padding:44px 20px; color:var(--ink-mute); font-size:.98rem}
.dest__empty a{color:var(--coral-t); font-weight:700; text-decoration:underline}
@media (max-width:980px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dgrid{grid-template-columns:minmax(0,1fr)} .dest__controls{padding:16px} .slider{max-width:none}}

/* ---------- 13. Services bento ---------- */
.bento{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.bento__cell{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:28px 26px;
  display:flex; flex-direction:column; overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.bento__cell:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.bento__cell h3{margin-bottom:9px}
.bento__cell p{font-size:.94rem; color:var(--ink-soft)}
.bento__cell--wide{grid-column:span 2; flex-direction:row; align-items:center; gap:28px; padding:30px}
.bento__cell--wide .bento__text{flex:1.05}
.bento__img{flex:.95; border-radius:var(--r-m); overflow:hidden}
.bento__img img{width:100%; height:100%; min-height:230px; object-fit:cover; transition:transform .7s var(--ease)}
.bento__cell--wide:hover .bento__img img{transform:scale(1.05)}
.bento__cell--flip{flex-direction:row-reverse}
.bento__thumb{margin-top:20px; border-radius:var(--r-m); overflow:hidden}
.bento__thumb img{width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .7s var(--ease)}
.bento__cell:hover .bento__thumb img{transform:scale(1.06)}
.bento__cell--ink{background:var(--ink); color:#fff; border-color:transparent}
.bento__cell--ink p{color:rgba(255,255,255,.74)}
.ticks{display:grid; gap:9px; margin-top:18px}
.ticks li{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink-soft)}
.ticks .ico{color:#0F9A6A; margin-top:3px}
.ticks--lg li{font-size:.98rem; color:var(--ink)}
.chipsrow,.testrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.chipsrow span{padding:6px 13px; border-radius:100px; font-size:.78rem; font-weight:600; background:rgba(255,255,255,.13); color:#fff}
.tpill{padding:8px 16px; border-radius:100px; font-size:.82rem; font-weight:700; background:var(--grad-soft); color:var(--coral-t); border:1px solid rgba(250,113,100,.2)}
@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__cell--wide{grid-column:span 2; flex-direction:column; align-items:stretch}
  .bento__cell--flip{flex-direction:column}
  .bento__img img{min-height:200px}
}
@media (max-width:620px){.bento{grid-template-columns:minmax(0,1fr)} .bento__cell--wide{grid-column:span 1}}

/* ---------- 14. Process timeline ---------- */
.process{overflow:hidden}
.process::before{content:""; position:absolute; inset:0; background:radial-gradient(620px 320px at 12% 8%,rgba(250,113,100,.24),transparent 70%); pointer-events:none}
.timeline{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.timeline::before{content:""; position:absolute; left:0; right:0; top:62px; height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 8px,transparent 8px 18px)}
/* the card is a flex child so it can never overrun its grid row */
.tl{position:relative; display:flex; flex-direction:column}
.tl__num{display:grid; place-items:center; width:54px; height:54px; border-radius:18px; position:relative; z-index:2;
  background:var(--grad); color:var(--ink); font-weight:800; font-size:1.02rem; letter-spacing:-.02em;
  box-shadow:0 10px 26px rgba(250,113,100,.4); margin-bottom:22px; flex:none;
  transition:transform .45s var(--ease-b)}
.tl:hover .tl__num{transform:translateY(-4px) scale(1.06)}
.tl__body{flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-l);
  padding:24px 22px 22px; backdrop-filter:blur(4px);
  transition:background .35s, border-color .35s, transform .45s var(--ease)}
.tl:hover .tl__body{background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.24); transform:translateY(-4px)}
.tl__ico{width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.1); color:var(--blush); display:grid; place-items:center; margin-bottom:14px}
.tl__body h3{color:#fff; margin-bottom:8px}
.tl__body p{font-size:.92rem; color:rgba(255,255,255,.74)}
.tl__when{display:inline-block; margin-top:14px; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blush)}
.process__cta{margin-top:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-l); padding:24px 26px}
.process__cta p{color:rgba(255,255,255,.84); font-size:1rem}
@media (max-width:960px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))} .timeline::before{display:none}}
@media (max-width:620px){.timeline{grid-template-columns:minmax(0,1fr)}}

/* ---------- 15. Coral creative band ---------- */
.creative{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); background:var(--grad-r); color:var(--ink); overflow:hidden}
.creative__media{position:relative; min-height:420px; background:var(--rose)}
.creative__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:0 42% 42% 0 / 0 16% 16% 0}
.creative__body{display:grid; align-items:center; padding:clamp(44px,6vw,86px) clamp(26px,5vw,74px)}
.creative__inner{position:relative; max-width:640px; min-width:0}
.creative__dots{position:absolute; top:-18px; right:-6px; width:110px; height:110px; opacity:.55}
.creative h2{font-size:clamp(2.2rem,4.4vw,3.7rem); line-height:1.02; letter-spacing:-.035em}
.creative p{margin-top:20px; font-size:clamp(1.01rem,1.35vw,1.16rem); color:rgba(32,24,72,.86); max-width:52ch; line-height:1.56}
.creative__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.creative__logo{margin-top:34px; height:34px; width:auto}
@media (max-width:900px){
  .creative{grid-template-columns:minmax(0,1fr)}
  .creative__media{min-height:300px}
  .creative__media img{border-radius:0 0 46% 46% / 0 0 14% 14%}
}

/* ---------- 16. Independence comparison ---------- */
.indep{background:var(--tint)}
.vs{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(16px,2.4vw,30px); align-items:stretch}
.vsCard{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:28px 26px}
.vsCard--us{background:var(--ink); color:#fff; border-color:transparent; box-shadow:var(--sh-3)}
.vsCard h3{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.vsCard>span{display:block; font-size:.85rem; color:var(--ink-mute); margin-bottom:20px}
.vsCard--us>span{color:rgba(255,255,255,.6)}
.vsCard li{display:flex; gap:11px; align-items:flex-start; font-size:.93rem; padding:11px 0; border-top:1px solid var(--line)}
.vsCard--us li{border-top-color:rgba(255,255,255,.12); color:rgba(255,255,255,.88)}
.vsCard li:first-of-type{border-top:0}
.vsCard li .ico{margin-top:3px; flex:none}
.vsCard--them li .ico{color:var(--ink-mute)}
.vsCard--us li .ico{color:#3FD9A2}
.vsSplit{display:grid; place-items:center}
.vsSplit span{width:46px; height:46px; border-radius:50%; background:var(--grad); color:var(--ink);
  display:grid; place-items:center; font-weight:800; font-size:.8rem; box-shadow:var(--sh-c)}
@media (max-width:860px){.vs{grid-template-columns:minmax(0,1fr)} .vsSplit span{transform:rotate(90deg)}}

/* ---------- 17. Cost calculator ---------- */
.calc__grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4vw,60px); align-items:start}
.calc__intro{min-width:0}
.calc__intro h2{margin:16px 0 14px}
.calc__intro>p{color:var(--ink-soft)}
.micro{font-size:.8rem; color:var(--ink-mute); margin-top:22px; line-height:1.55; max-width:46ch}
.calc__panel{min-width:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(22px,2.6vw,32px); box-shadow:var(--sh-2)}
.calc__row{margin-bottom:20px; min-width:0}
.calc__row>label{display:block; font-size:.86rem; font-weight:700; color:var(--ink-soft); margin-bottom:9px}
.calc__row>label b{color:var(--coral-t)}
/* ---------- Select, native fallback then enhanced listbox ---------- */
.selectwrap{position:relative}
.selectwrap select{-webkit-appearance:none; appearance:none; width:100%; padding:13px 44px 13px 16px; border-radius:14px;
  border:1.5px solid var(--line-2); background:#fff; font-size:.95rem; font-weight:600; cursor:pointer;
  transition:border-color .2s, box-shadow .2s}
.selectwrap select:hover{border-color:var(--ink-mute)}
.selectwrap select:focus{border-color:var(--coral); box-shadow:0 0 0 4px rgba(250,113,100,.18); outline:none}
.selectwrap>.ico{position:absolute; right:15px; top:50%; transform:translateY(-50%); width:16px; height:16px;
  color:var(--ink-mute); pointer-events:none; transition:transform .3s var(--ease), color .2s}

/* once JS takes over, the native control stays in the DOM for form semantics
   but is taken out of the visual and tab order */
.selectwrap.is-enhanced select{position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; padding:0; border:0}
.selectwrap.is-enhanced>.ico{z-index:2}
.selectwrap.is-open>.ico{transform:translateY(-50%) rotate(180deg); color:var(--coral-d)}

.sel__btn{
  width:100%; text-align:left; padding:13px 44px 13px 16px; border-radius:14px;
  border:1.5px solid var(--line-2); background:#fff; font-size:.95rem; font-weight:600; color:var(--ink);
  cursor:pointer; transition:border-color .2s, box-shadow .2s, background .2s;
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sel__btn:hover{border-color:var(--ink-mute)}
.selectwrap.is-open .sel__btn,.sel__btn:focus-visible{
  border-color:var(--coral); box-shadow:0 0 0 4px rgba(250,113,100,.18); outline:none;
}
.sel__btn[data-empty="1"]{color:#ABA5BE; font-weight:500}

.sel__pop{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 8px);
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:6px;
  box-shadow:0 18px 46px rgba(32,24,72,.18), 0 2px 6px rgba(32,24,72,.06);
  max-height:264px; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top center;
  transition:opacity .22s var(--ease), transform .28s var(--ease), visibility .22s;
}
.selectwrap.is-open .sel__pop{opacity:1; visibility:visible; transform:none}
.selectwrap.is-up .sel__pop{top:auto; bottom:calc(100% + 8px); transform-origin:bottom center}
.sel__opt{
  display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:11px; cursor:pointer;
  font-size:.92rem; font-weight:600; color:var(--ink-soft); transition:background .16s, color .16s;
}
.sel__opt:hover,.sel__opt.is-cursor{background:var(--tint); color:var(--ink)}
.sel__opt[aria-selected="true"]{background:var(--lilac); color:var(--ink); font-weight:700}
.sel__opt[aria-selected="true"]::after{content:""; margin-left:auto; width:16px; height:16px; flex:none;
  background:var(--grad); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 6.8'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 6.8'/%3E%3C/svg%3E") center/12px no-repeat;
}
.field.is-bad .sel__btn{border-color:#E3453C; box-shadow:0 0 0 4px rgba(227,69,60,.1)}
.segmented{display:grid; grid-auto-flow:column; gap:5px; background:var(--tint); padding:5px; border-radius:14px; border:1px solid var(--line)}
.segmented button{padding:10px 12px; border-radius:10px; font-size:.86rem; font-weight:700; color:var(--ink-soft); transition:all .25s var(--ease)}
.segmented button:hover{color:var(--ink)}
.segmented button.is-on{background:#fff; color:var(--ink); box-shadow:var(--sh-1)}

.calc__out{margin-top:26px; padding-top:24px; border-top:1px dashed var(--line-2)}
.calc__bar{display:flex; height:16px; border-radius:100px; overflow:hidden; background:var(--lilac); margin-bottom:16px}
.seg{height:100%; transition:width .6s var(--ease)}
.seg--tuition{background:var(--grad)}
.seg--living{background:var(--ink-2)}
.seg--once{background:var(--rose)}
.calc__legend{display:flex; flex-wrap:wrap; gap:16px; font-size:.83rem; color:var(--ink-soft)}
.calc__legend li{display:flex; align-items:center; gap:7px}
.calc__legend b{color:var(--ink); font-weight:800}
.k{width:11px; height:11px; border-radius:4px; display:block}
.k--tuition{background:var(--coral)} .k--living{background:var(--ink-2)} .k--once{background:var(--rose)}
.calc__total{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  margin-top:22px; padding:20px; border-radius:var(--r-m); background:var(--cream); border:1px solid rgba(250,113,100,.2)}
.calc__total span{display:block; font-size:.8rem; color:var(--ink-soft); margin-bottom:4px}
.calc__total strong{font-size:clamp(1.6rem,2.6vw,2.15rem); font-weight:800; letter-spacing:-.03em; line-height:1}
.calc__emi{text-align:right}
.calc__emi strong{font-size:1.2rem; color:var(--ink-2)}
.calc__emi i{font-style:normal; font-size:.78rem; font-weight:600; color:var(--ink-mute)}
.calc__note{margin:14px 0 18px; font-size:.85rem; font-weight:700; color:#0F9A6A; min-height:1.3em}
@media (max-width:900px){.calc__grid{grid-template-columns:minmax(0,1fr)} .calc__emi{text-align:left}}
@media (max-width:460px){.segmented{grid-auto-flow:row}}

/* ---------- 18. Scenario carousel ---------- */
.carousel{position:relative}
.carousel__viewport{overflow:hidden; border-radius:var(--r-l); cursor:grab}
.carousel__viewport.is-drag{cursor:grabbing}
.carousel__track{display:flex; gap:20px; transition:transform .6s var(--ease); will-change:transform}
.scard{flex:0 0 calc((100% - 40px)/3); background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:26px 26px 24px; display:flex; flex-direction:column; user-select:none;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease)}
.scard:hover{box-shadow:var(--sh-2); transform:translateY(-4px)}
.scard__head{display:flex; align-items:center; gap:13px; margin-bottom:18px}
.scard__head img{width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:center 22%; flex:none}
.scard__head b{display:block; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--coral-t)}
.scard__head span{display:block; font-size:.86rem; color:var(--ink-mute); line-height:1.35}
.scard h3{margin-bottom:10px}
.scard>p{font-size:.94rem; color:var(--ink-soft); line-height:1.62; flex:1}
.scard__do{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.scard__do b{display:block; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:7px}
.scard__do p{font-size:.9rem; color:var(--ink); line-height:1.55}
.carousel__ui{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:26px}
.carousel__dots{display:flex; gap:8px}
.carousel__dots button{width:9px; height:9px; border-radius:100px; background:var(--line-2); transition:all .3s var(--ease)}
.carousel__dots button.is-on{width:28px; background:var(--coral)}
.carousel__btns{display:flex; gap:9px}
.cbtn{width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; background:#fff; transition:all .28s var(--ease)}
.cbtn:hover{background:var(--ink); border-color:var(--ink); color:#fff; transform:translateY(-2px)}
.cbtn--prev .ico{transform:rotate(180deg)}
.disclaim{margin-top:20px; font-size:.78rem; color:var(--ink-mute)}
@media (max-width:980px){.scard{flex:0 0 calc((100% - 20px)/2)}}
@media (max-width:660px){.scard{flex:0 0 100%; padding:24px 22px}}

/* ---------- 19. FAQ ---------- */
.faq__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,60px); align-items:start}
.faq__side h2{margin:16px 0 14px}
.faq__side>p{color:var(--ink-soft)}
.faq__cta{margin-top:30px; border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line); background:#fff}
.faq__cta img{width:100%; aspect-ratio:16/9; object-fit:cover}
.faq__cta div{padding:20px 22px 24px}
.faq__cta b{display:block; font-size:1.05rem; font-weight:800}
.faq__cta p{font-size:.9rem; color:var(--ink-soft); margin:5px 0 14px}
.faq__list{display:grid; gap:10px}
.ac{background:#fff; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; transition:border-color .3s, box-shadow .3s}
.ac[open]{border-color:rgba(250,113,100,.4); box-shadow:var(--sh-1)}
.ac summary{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 22px;
  cursor:pointer; list-style:none; font-weight:700; font-size:1rem; letter-spacing:-.012em}
.ac summary::-webkit-details-marker{display:none}
.ac summary:hover{background:var(--tint)}
.ac summary i{width:30px; height:30px; border-radius:50%; background:var(--lilac); color:var(--ink-2); flex:none;
  display:grid; place-items:center; transition:transform .35s var(--ease), background .3s, color .3s}
.ac[open] summary i{transform:rotate(135deg); background:var(--grad); color:var(--ink)}
.ac__body{padding:0 22px 22px}
.ac__body p{font-size:.94rem; color:var(--ink-soft)}
.ac[open] .ac__body{animation:acIn .35s var(--ease)}
@keyframes acIn{from{opacity:0; transform:translateY(-6px)}}
@media (max-width:900px){.faq__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 20. Lead form ---------- */
.lead{background:var(--ink); color:#fff; overflow:hidden; position:relative}
.lead::before{content:""; position:absolute; inset:0; background:radial-gradient(780px 430px at 8% 92%,rgba(250,113,100,.3),transparent 68%); pointer-events:none}
.lead__grid{position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(30px,4vw,64px); align-items:start}
.lead__pitch h2{margin:16px 0 16px; color:#fff}
.lead__pitch>p{color:rgba(255,255,255,.78)}
.lead__points{display:grid; gap:12px; margin-top:28px}
.lead__points li{display:flex; align-items:flex-start; gap:12px; font-size:.96rem; color:rgba(255,255,255,.9)}
.lead__points span{width:26px; height:26px; border-radius:50%; background:rgba(63,217,162,.18); color:#3FD9A2; display:grid; place-items:center; flex:none; margin-top:1px}
.lead__points .ico{width:14px; height:14px}
.lead__mini{display:flex; flex-wrap:wrap; gap:20px; margin-top:28px}
.lead__mini a{display:inline-flex; align-items:center; gap:8px; font-size:.94rem; font-weight:700; color:#fff; opacity:.9; transition:opacity .2s}
.lead__mini a:hover{opacity:1; text-decoration:underline}
.lead__mini .ico{color:var(--blush)}

.lead__formwrap{min-width:0; background:#fff; color:var(--ink); border-radius:var(--r-xl); padding:clamp(24px,2.8vw,36px); box-shadow:var(--sh-3)}
.steps{display:flex; gap:6px; margin-bottom:14px}
.steps span{display:flex; align-items:center; gap:8px; flex:1; font-size:.79rem; font-weight:700; color:var(--ink-mute); transition:color .3s}
.steps span i{width:24px; height:24px; border-radius:50%; background:var(--lilac); color:var(--ink-mute);
  display:grid; place-items:center; font-size:.72rem; font-style:normal; font-weight:800; transition:all .3s var(--ease)}
.steps span.is-on{color:var(--ink)}
.steps span.is-on i{background:var(--grad); color:var(--ink)}
.steps span.is-done i{background:#0F9A6A; color:#fff}
.prog{height:5px; border-radius:100px; background:var(--lilac); overflow:hidden; margin-bottom:26px}
.prog i{display:block; height:100%; background:var(--grad); transition:width .45s var(--ease)}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fs{display:none; animation:fsIn .4s var(--ease)}
.fs.is-on{display:block}
@keyframes fsIn{from{opacity:0; transform:translateX(14px)}}
.fs legend{font-size:1.16rem; font-weight:800; letter-spacing:-.02em; margin-bottom:18px}
.f2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.83rem; font-weight:700; color:var(--ink-soft); display:flex; align-items:baseline; gap:7px}
.field label em{color:var(--coral-t); font-style:normal}
.field label small{font-weight:500; color:var(--ink-mute); font-size:.76rem}
.field input,.field textarea,.field select{width:100%; padding:13px 15px; border-radius:13px; border:1.5px solid var(--line-2);
  background:#fff; font-size:.95rem; transition:border-color .2s, box-shadow .2s}
.field textarea{resize:vertical; min-height:84px; font-family:inherit}
.field input::placeholder,.field textarea::placeholder{color:#ABA5BE}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--coral); box-shadow:0 0 0 4px rgba(250,113,100,.18); outline:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea,.field.is-bad .phone{border-color:#E3453C; box-shadow:0 0 0 4px rgba(227,69,60,.1)}
.phone{display:flex; align-items:center; border:1.5px solid var(--line-2); border-radius:13px; overflow:hidden; transition:border-color .2s, box-shadow .2s}
.phone:focus-within{border-color:var(--coral); box-shadow:0 0 0 4px rgba(250,113,100,.18)}
.phone span{padding:13px 12px 13px 15px; font-weight:700; font-size:.95rem; color:var(--ink-soft); background:var(--tint); align-self:stretch; display:flex; align-items:center}
.phone input{border:0; border-radius:0; padding-left:12px}
.phone input:focus{box-shadow:none}
.err{font-size:.76rem; font-weight:600; color:#C6362D; display:none}
.field.is-bad .err,.err.is-on{display:block}

/* equal width tiles rather than ragged pills, so the block reads as a set.
   Rows are forced equal height and long names wrap instead of truncating,
   which is what "New Zealand" needs in a narrow form column. */
.pickers{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); grid-auto-rows:1fr; gap:8px}
.pick{
  position:relative; display:flex; align-items:center; gap:8px; min-height:44px;
  padding:9px 27px 9px 10px; border-radius:13px; cursor:pointer; background:#fff;
  border:1.5px solid var(--line-2); font-size:.83rem; font-weight:700; color:var(--ink);
  transition:border-color .22s, background .22s, color .22s, transform .3s var(--ease-b), box-shadow .3s;
  user-select:none; min-width:0;
}
.pick:hover{border-color:var(--ink-mute); transform:translateY(-2px); box-shadow:var(--sh-1)}
.pick input{position:absolute; opacity:0; width:0; height:0}
.pick__flag{width:24px; height:17px; border-radius:3px; object-fit:cover; flex:none; box-shadow:0 0 0 1px var(--line)}
.pick__ico{width:24px; height:17px; display:grid; place-items:center; flex:none; color:var(--ink-mute)}
.pick__name{min-width:0; line-height:1.2; text-wrap:pretty}
.pick--any{grid-column:1/-1; border-style:dashed; min-height:0}
/* the picker sits directly above the next field row, which has no margin of its own */
.fs>.field{margin-bottom:18px}

/* the tick badge only appears once the tile is chosen */
.pick__tick{
  position:absolute; top:50%; right:8px; transform:translateY(-50%) scale(.5);
  width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); color:var(--ink); opacity:0;
  transition:opacity .2s var(--ease), transform .3s var(--ease-b);
}
.pick__tick .ico{width:11px; height:11px; stroke-width:3.2}
.pick:has(input:checked){background:var(--ink); border-color:var(--ink); border-style:solid; color:#fff}
.pick:has(input:checked) .pick__tick{opacity:1; transform:translateY(-50%) scale(1)}
.pick:has(input:checked) .pick__ico{color:var(--blush)}
.pick:has(input:focus-visible){outline:3px solid var(--coral-d); outline-offset:2px}
.pick.is-locked{opacity:.4; cursor:not-allowed; transform:none; box-shadow:none}
.pick.is-locked:hover{border-color:var(--line-2)}

.pickcount{margin-left:auto; font-weight:700 !important; color:var(--ink-mute)}
.pickcount.is-full{color:var(--coral-t)}
@media (max-width:420px){.pickers{grid-template-columns:repeat(2,minmax(0,1fr))}}

.consent{display:flex; gap:11px; align-items:flex-start; margin-top:20px; font-size:.83rem; color:var(--ink-soft); cursor:pointer; line-height:1.55}
.consent input{width:19px; height:19px; margin-top:2px; accent-color:var(--coral-d); flex:none; cursor:pointer}
.consent a{color:var(--coral-t); text-decoration:underline}
.consent em{color:var(--coral-t); font-style:normal}
.err--consent{margin-top:6px}
.fnav{display:flex; gap:10px; margin-top:24px}
.formnote{display:flex; align-items:center; gap:8px; margin-top:16px; font-size:.78rem; color:var(--ink-mute)}
.formnote .ico{color:#0F9A6A}
.btn.is-busy{opacity:.7; pointer-events:none}
.btn.is-busy span::after{content:""; animation:dots 1.2s infinite steps(4)}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.done{text-align:center; padding:26px 10px 14px; animation:fsIn .5s var(--ease)}
.done__tick{width:74px; height:74px; border-radius:50%; background:rgba(15,154,106,.12); color:#0F9A6A; display:grid; place-items:center; margin:0 auto 20px; font-size:1.9rem; animation:pop .5s var(--ease-b)}
@keyframes pop{from{transform:scale(.4); opacity:0}}
.done__tick--warn{background:rgba(250,113,100,.14); color:var(--coral-t)}
.done__why{font-size:.74rem; color:var(--ink-mute); margin-top:16px; word-break:break-word}
.done h3{font-size:1.5rem; margin-bottom:10px}
.done p{color:var(--ink-soft); font-size:.96rem; max-width:46ch; margin:0 auto 22px}
.done a[href^="mailto"]{color:var(--coral-t); font-weight:700}
@media (max-width:900px){.lead__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.f2{grid-template-columns:minmax(0,1fr)} .steps span{font-size:0; gap:0} .steps span i{font-size:.72rem}}

/* ---------- 21. Contact ---------- */
.contact__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:start}
.contact h2{margin:16px 0 14px}
.contact__lead{color:var(--ink-soft)}
.contact__list{display:grid; gap:20px; margin-top:32px}
.contact__list li{display:flex; gap:16px}
.ci{width:46px; height:46px; border-radius:14px; background:var(--grad-soft); color:var(--coral-t); display:grid; place-items:center; flex:none}
.contact__list b{display:block; font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:5px}
.contact__list p,.contact__list address{font-size:.97rem; line-height:1.6; color:var(--ink)}
.contact__list .big{font-size:1.12rem; font-weight:800; letter-spacing:-.02em}
.contact__list .big:hover{color:var(--coral-t)}
.regnote{font-size:.86rem; color:var(--ink-mute); line-height:1.55}

.howcard{background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:clamp(26px,3vw,36px); box-shadow:var(--sh-3); position:relative; overflow:hidden}
.howcard::before{content:""; position:absolute; inset:0; background:radial-gradient(520px 300px at 100% 0%,rgba(250,113,100,.32),transparent 70%)}
.howcard>*{position:relative}
.howcard h3{font-size:1.35rem; margin-bottom:8px}
.howcard>p{color:rgba(255,255,255,.74); font-size:.95rem}
.howsteps{display:grid; gap:14px; margin:24px 0 26px}
.howsteps li{display:flex; gap:14px; align-items:flex-start}
.howsteps i{width:30px; height:30px; border-radius:50%; background:var(--grad); color:var(--ink); display:grid; place-items:center;
  font-style:normal; font-weight:800; font-size:.8rem; flex:none}
.howsteps b{display:block; font-size:.95rem; font-weight:800}
.howsteps span{display:block; font-size:.86rem; color:rgba(255,255,255,.7); line-height:1.5}
@media (max-width:900px){.contact__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 22. Footer ---------- */
.foot{background:var(--ink); color:rgba(255,255,255,.74); padding:clamp(48px,6vw,76px) 0 0}
.foot__top{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.5fr); gap:clamp(22px,3vw,38px); padding-bottom:44px}
/* light artwork rather than brightness(0) invert(1), which flattened
   the coral arc to white and lost half the mark */
.foot__brand img{height:44px; width:auto}
.foot__brand p{font-size:.9rem; margin-top:18px; max-width:34ch; line-height:1.6}
.social{display:flex; gap:9px; margin-top:22px}
.social a{width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition:all .28s var(--ease)}
.social a:hover{background:var(--grad); color:var(--ink); transform:translateY(-3px)}
.foot__col h3{font-size:.8rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#fff; margin-bottom:16px}
.foot__col li+li{margin-top:9px}
.foot__col a{font-size:.9rem; transition:color .2s}
.foot__col a:hover{color:var(--blush)}
/* one address line per row, so nothing wraps mid phrase in a narrow column */
.addr{display:grid; gap:2px; margin:0}
.addr__l{display:block; font-size:.84rem; line-height:1.5; color:rgba(255,255,255,.58); text-wrap:pretty}
.foot__contact .lbl{display:block; font-size:.72rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:rgba(255,255,255,.42); margin:20px 0 7px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.1)}
.foot__contact a{display:flex; align-items:center; gap:9px; font-size:.92rem; font-weight:700; color:#fff; min-width:0; overflow-wrap:anywhere}
.foot__contact a:hover{color:var(--blush)}
.foot__contact .ico{color:var(--blush)}
.foot__bar{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:22px 0 26px; border-top:1px solid rgba(255,255,255,.1); font-size:.8rem}
.foot__legal{max-width:60ch; text-align:right; color:rgba(255,255,255,.5)}
@media (max-width:1000px){.foot__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)} .foot__brand{grid-column:1/-1}}
@media (max-width:640px){.foot__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .foot__bar{flex-direction:column; align-items:flex-start} .foot__legal{text-align:left}}

/* ---------- 23. Floating actions ---------- */
.totop{position:fixed; right:22px; bottom:22px; z-index:90; width:48px; height:48px; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(14px); transition:all .35s var(--ease)}
.totop.is-on{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--ink-3)}
.stickybar{position:fixed; inset:auto 0 0 0; z-index:88; display:none; gap:10px;
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  transform:translateY(105%); transition:transform .4s var(--ease)}
.stickybar.is-on{transform:none}
.stickybar .btn{flex:1}
.stickybar .btn--ghost{flex:0 0 auto}
@media (max-width:720px){
  .stickybar{display:flex}
  .totop{right:14px; bottom:78px; width:44px; height:44px}
}

/* ---------- 23b. Score predictor band ----------
   Ink ground, not coral. A coral ring on a coral background was
   invisible, and it also put two coral bands close together. On ink
   the gradient ring is the brightest thing on the page. */
.predband{
  background:var(--ink); color:#fff; padding:clamp(52px,6.5vw,86px) 0;
  overflow:hidden; position:relative;
}
.predband::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(680px 340px at 88% 42%, rgba(250,113,100,.34), transparent 68%),
    radial-gradient(520px 300px at 4% 100%, rgba(231,151,190,.20), transparent 70%);
}
.predband__inner{
  position:relative; display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,4vw,56px); align-items:center;
}
.predband__copy h2{font-size:clamp(1.7rem,3vw,2.5rem); margin:16px 0 14px; color:#fff}
.predband__copy p{color:rgba(255,255,255,.76); max-width:56ch; margin-bottom:26px}

.predband__viz{display:grid; place-items:center}
.predband__ring{
  width:min(250px,64vw); height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
.predband__track{stroke:rgba(255,255,255,.13)}
.predband__prog{
  stroke:url(#gBrand); stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(250,113,100,.55));
}
.predband__ticks{stroke:rgba(255,255,255,.22)}
.predband__num{font-size:62px; font-weight:800; fill:#fff; letter-spacing:-.04em}
.predband__lbl{font-size:11px; font-weight:800; fill:var(--blush); letter-spacing:.2em}

/* the ring draws itself in once the band scrolls into view */
.predband__prog{stroke-dasharray:540; stroke-dashoffset:540}
.predband__viz.is-in .predband__prog{
  animation:ringIn 1.5s var(--ease) .15s forwards;
}
@keyframes ringIn{to{stroke-dashoffset:150}}
@media (prefers-reduced-motion:reduce){
  .predband__prog{stroke-dashoffset:150}
  .predband__viz.is-in .predband__prog{animation:none}
}
@media (max-width:820px){
  .predband__inner{grid-template-columns:minmax(0,1fr); gap:30px}
  .predband__viz{order:-1}
}

/* ---------- 23c. Modal shell ---------- */
.modal{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(10px,3vw,32px)}
.modal[hidden]{display:none}
.modal__scrim{position:absolute; inset:0; background:rgba(20,14,48,.62); backdrop-filter:blur(5px); animation:fade .3s}
.modal__dialog{
  position:relative; width:min(1020px,100%); max-height:92vh; overflow-y:auto; overscroll-behavior:contain;
  background:#fff; border-radius:var(--r-xl); box-shadow:0 30px 90px rgba(20,14,48,.4);
  animation:popIn .4s var(--ease-b);
}
@keyframes popIn{from{opacity:0; transform:translateY(22px) scale(.97)}}
/* solid, not a fade. A translucent sticky header let the form and the gauge
   scroll visibly underneath it, which read as broken overlap. */
.modal__head{
  position:sticky; top:0; z-index:5; display:flex; gap:20px; align-items:flex-start;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px) 18px;
  background:#fff; border-bottom:1px solid var(--line);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal__dialog.is-scrolled .modal__head{box-shadow:0 10px 24px rgba(32,24,72,.09)}
.modal__head h2{font-size:clamp(1.4rem,2.4vw,1.9rem); margin:12px 0 8px}
.modal__head p{font-size:.87rem; color:var(--ink-soft); max-width:62ch}
.modal__x{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center;
  flex:none; margin-left:auto; background:#fff; transition:all .25s var(--ease)}
.modal__x:hover{background:var(--ink); border-color:var(--ink); color:#fff; transform:rotate(90deg)}
.modal__body{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,2.6vw,32px);
  padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,32px) clamp(24px,3vw,34px)}
@media (max-width:840px){.modal__body{grid-template-columns:minmax(0,1fr)}}
/* a tall sticky header eats a short viewport, so trim it there */
@media (max-width:640px), (max-height:720px){
  .modal__head .pill{display:none}
  .modal__head h2{margin:0 0 6px}
  .modal__head p{font-size:.82rem}
}
body.is-locked{overflow:hidden}

/* predictor form */
.pf__row{margin-bottom:18px}
.pf__row>label{display:flex; align-items:baseline; gap:9px; font-size:.84rem; font-weight:700; color:var(--ink-soft); margin-bottom:9px}
.pf__val{margin-left:auto; font-size:.95rem; font-weight:800; color:var(--coral-t); letter-spacing:-.02em}
.pf__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}
@media (max-width:520px){.pf__grid{grid-template-columns:minmax(0,1fr)}}
.segmented--mini{margin-bottom:12px}
.segmented--mini button{padding:7px 10px; font-size:.79rem}

/* predictor result */
.pr{background:var(--tint); border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(20px,2.4vw,26px); align-self:start}
.pr__gauge{position:relative; width:min(210px,62%); margin:0 auto 16px}
.pr__gauge svg{width:100%; height:auto; display:block}
#prArc{transition:stroke-dashoffset .7s var(--ease)}
.pr__center{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.pr__center strong{display:block; font-size:2.9rem; font-weight:800; letter-spacing:-.04em; line-height:1}
.pr__center span{display:block; font-size:.72rem; font-weight:700; color:var(--ink-mute); letter-spacing:.05em; margin-top:4px}
.pr__band{text-align:center; font-weight:800; font-size:1.02rem; margin-bottom:18px; letter-spacing:-.02em}
.pr__band[data-tier="strong"]{color:#0B7A54}
.pr__band[data-tier="good"]{color:var(--ink-2)}
.pr__band[data-tier="work"]{color:var(--coral-t)}
.pr__band[data-tier="early"]{color:var(--ink-mute)}

.pr__bars{display:grid; gap:9px; margin-bottom:20px}
.prbar{display:grid; grid-template-columns:88px minmax(0,1fr) 34px; align-items:center; gap:10px; font-size:.76rem}
.prbar span{color:var(--ink-mute); font-weight:600}
.prbar i{display:block; height:7px; border-radius:100px; background:var(--lilac); overflow:hidden}
.prbar i::after{content:""; display:block; height:100%; width:var(--v,0%); border-radius:100px;
  background:var(--grad); transition:width .6s var(--ease)}
.prbar b{text-align:right; font-weight:800; color:var(--ink)}

.pr__notes{margin-bottom:20px}
.pr__notes>b{display:block; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px}
.pr__notes li{display:flex; gap:9px; align-items:flex-start; font-size:.86rem; color:var(--ink-soft); line-height:1.5; padding:7px 0; border-top:1px solid var(--line)}
.pr__notes li:first-child{border-top:0}
.pr__notes li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--coral); flex:none; margin-top:8px}
.pr__fine{font-size:.74rem; color:var(--ink-mute); line-height:1.5; margin-top:14px}

/* button that lives inline in body copy */
button.inline{font:inherit; border:0; padding:0; cursor:pointer}

/* ---------- 23d. Small screen hardening ----------
   Long unbreakable strings (emails, URLs, big numbers) and nowrap children
   were widening grid tracks past the viewport. These are the guards. */
body{overflow-wrap:break-word}
.wrap{min-width:0}
.f2>.field,.field,.fs{min-width:0}
.panel,.hero__stage,.bento__cell,.dcard,.card,.tl__body,.ac,.pcell{min-width:0}

@media (max-width:520px){
  /* two footer columns cannot hold an email address at this width */
  .foot__top{grid-template-columns:minmax(0,1fr)}
  .foot__brand p{max-width:none}
  .dest__controls{flex-direction:column; align-items:stretch}
  .slider{max-width:none}
  .calc__total{flex-direction:column; align-items:flex-start; gap:14px}
  .calc__legend{gap:10px 14px}
  .panel__foot{flex-direction:column}
  .creative__actions .btn,.hero__actions .btn{width:100%}
  .process__cta{flex-direction:column; align-items:stretch}
  .process__cta .btn{width:100%; justify-content:center}
}

@media (max-width:380px){
  .creative__dots{width:72px; height:72px; right:0; top:-10px}
  .unirow{gap:9px; padding:10px 8px}
  .unirow__band{font-size:.6rem; padding:3px 7px}
  .pickers{grid-template-columns:minmax(0,1fr)}
  .segmented{grid-auto-flow:row}
}

/* ---------- 24. Reveal on scroll ---------- */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}

/* ---------- 25. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal]{opacity:1; transform:none}
  .blob,.chipcard{animation:none}
}

/* ---------- 26. Print ---------- */
@media print{
  .nav,.ticker,.totop,.stickybar,.progress,.carousel__ui{display:none !important}
  body{font-size:12pt}
  .section{padding:18px 0; break-inside:avoid}
  .lead,.promise,.section--ink,.creative,.foot,.howcard{background:#fff !important; color:#000 !important}
}