/* ==========================================================================
   Gratify Education Consultancy: gratifyedu.com
   Design system: "Editorial Prospectus"
   Warm paper ground, brand violet ink, lime highlighter, serif display.
   ========================================================================== */

/* -------------------------------------------------- 1. Tokens */
:root{
  --ink:#19102F;
  --ink-2:#4A4463;
  --muted:#6B6485;
  --violet:#4E25C8;
  --violet-deep:#2A1766;
  --violet-800:#36227A;
  --violet-soft:#EEE9FB;
  --violet-mist:#F5F2FD;
  --lime:#DDF247;
  --lime-deep:#C3D918;
  --paper:#F7F4ED;
  --paper-warm:#F1EDE2;
  --white:#fff;
  --line:rgba(42,23,102,.15);
  --line-soft:rgba(42,23,102,.08);
  --line-invert:rgba(255,255,255,.18);

  /* semantic roles: these are what flip between light and dark */
  --brand:#4E25C8;            /* filled buttons, active states */
  --deep:#2A1766;             /* deep-violet text on page surfaces */
  --fill:#19102F;             /* button hover fill */
  --fill-fg:#fff;
  --glass:rgba(247,244,237,.86);
  --foot:#19102F;
  --mark:var(--lime);
  --shadow:rgba(42,23,102,.45);
  --glow:rgba(78,37,200,.10);

  --shell:1320px;
  --gut:clamp(20px,5vw,64px);
  --radius:20px;
  --radius-lg:32px;

  --ff-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --ff-body:"Archivo","Helvetica Neue",Helvetica,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

/* Dark theme. Set on <html data-theme="dark"> by the inline head script
   (saved choice, else the OS preference) and by the header toggle. */
:root[data-theme="dark"]{
  --ink:#ECE8F7;
  --ink-2:#C4BEDA;
  --muted:#9B94B6;
  --violet:#A894FF;
  --violet-deep:#24154F;
  --violet-800:#36227A;
  --violet-soft:#2A2149;
  --violet-mist:#1D1636;
  --paper:#110C20;
  --paper-warm:#161028;
  --white:#1B1430;
  --line:rgba(236,232,247,.16);
  --line-soft:rgba(236,232,247,.09);

  --brand:#6340E0;
  --deep:#D9D0FF;
  --fill:#ECE8F7;
  --fill-fg:#19102F;
  --glass:rgba(17,12,32,.82);
  --foot:#0A0714;
  --mark:rgba(221,242,71,.38);
  --shadow:rgba(0,0,0,.7);
  --glow:rgba(168,148,255,.13);
  color-scheme:dark;
}
/* colour changes glide when the theme is switched, then the class is removed */
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
  transition:background-color .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)!important;
}

/* -------------------------------------------------- 2. Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:100px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--lime);color:var(--violet-deep)}

/* -------------------------------------------------- 3. Typography */
h1,h2,h3,h4,.display{
  font-family:var(--ff-display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 80,"SOFT" 20;
  text-wrap:balance;
}
.h-xxl{font-size:clamp(42px,7.4vw,92px)}
.h-xl{font-size:clamp(34px,5.2vw,64px)}
.h-lg{font-size:clamp(28px,3.6vw,46px)}
.h-md{font-size:clamp(22px,2.4vw,32px)}
.h-sm{font-size:clamp(19px,1.6vw,23px);line-height:1.2}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
p{text-wrap:pretty}
em.pen{font-style:italic;font-variation-settings:"opsz" 120,"SOFT" 60,"WONK" 1}

.eyebrow{
  font-family:var(--ff-body);
  font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{
  content:attr(data-num);
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.eyebrow.plain::before{content:none}

.mark{
  background:linear-gradient(transparent 58%,var(--mark) 58%,var(--mark) 92%,transparent 92%);
  padding:0 .06em;
}
.u-violet{color:var(--violet)}
.u-mute{color:var(--muted)}
.u-center{text-align:center}

/* -------------------------------------------------- 3b. Icons (Google Material Symbols Rounded)
   Pages load only the glyphs they use (icon_names= in the font URL);
   add a name there when introducing a new icon. */
.ms{
  font-family:"Material Symbols Rounded";
  font-weight:normal;font-style:normal;font-size:1.25em;line-height:1;
  letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;
  display:inline-block;flex:none;width:1em;height:1em;overflow:hidden;
  font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
  user-select:none;
}
.ms-fill{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 20}
.dd .chev{font-size:18px;margin-right:-4px}
.stars .ms{font-size:16px}
.eyebrow .ms{font-size:17px;color:var(--violet)}
.tlink .ms{font-size:17px;transition:transform .35s var(--ease)}
.tlink:hover .ms{transform:translateX(3px)}
.card .ico .ms,.cx .ico .ms{font-variation-settings:"FILL" 0,"wght" 350,"GRAD" 0,"opsz" 24;transition:font-variation-settings .4s var(--ease)}
.card:hover .ico .ms{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
/* -------------------------------------------------- 4. Layout */
.shell{width:min(100% - var(--gut)*2,var(--shell));margin-inline:auto}
.shell-wide{width:min(100% - var(--gut)*2,1560px);margin-inline:auto}
section{position:relative}
.band{padding:clamp(64px,9vw,132px) 0}
.band-sm{padding:clamp(48px,6vw,84px) 0}
.band-ink{background:var(--violet-deep);color:#fff}
.band-ink .lede,.band-ink p{color:rgba(255,255,255,.78)}
.band-ink .eyebrow{color:var(--lime)}
.band-ink .eyebrow::before{color:rgba(255,255,255,.45)}
.band-paper{background:var(--paper-warm)}
.band-white{background:var(--white)}

.grid{display:grid;gap:clamp(24px,3vw,44px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,5vw,80px);align-items:start}
.split-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);align-items:center}
.stack{display:flex;flex-direction:column}
.stack-sm{gap:12px}.stack-md{gap:22px}.stack-lg{gap:36px}
.sticky-col{position:sticky;top:120px}

.rule{height:1px;background:var(--line);border:0;margin:0}
.band-ink .rule{background:var(--line-invert)}

@media(max-width:900px){
  .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split-even{grid-template-columns:minmax(0,1fr)}
  .sticky-col{position:static}
}
@media(max-width:620px){
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
}

/* -------------------------------------------------- 5. Buttons */
.btn{
  --bg:var(--brand);--fg:#fff;--bd:var(--brand);
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;min-height:52px;
  border:1.5px solid var(--bd);border-radius:999px;
  background:var(--bg);color:var(--fg);
  font-size:15px;font-weight:600;letter-spacing:.01em;
  overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .3s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--fill);
  transform:translateY(101%);border-radius:999px;
  transition:transform .5s var(--ease-out);
}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:var(--fill-fg);border-color:var(--fill)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.btn .ms{font-size:19px;transition:transform .4s var(--ease)}
.btn:hover .ms{transform:translateX(4px)}

.btn-lime{--bg:var(--lime);--fg:var(--violet-deep);--bd:var(--lime)}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn-ghost:hover{border-color:var(--fill)}
/* ghost buttons on always-dark surfaces (these used to render dark-on-dark in the CTA strip) */
.band-ink .btn-ghost,.cta-strip .btn-ghost,.band-photo .btn-ghost{--fg:#fff;--bd:rgba(255,255,255,.32)}
.band-ink .btn-ghost::after,.cta-strip .btn-ghost::after,.band-photo .btn-ghost::after{background:#fff}
.band-ink .btn-ghost:hover,.cta-strip .btn-ghost:hover,.band-photo .btn-ghost:hover{color:#2A1766;border-color:#fff}
.band-ink .btn:not(.btn-ghost):not(.btn-lime)::after,.cta-strip .btn:not(.btn-ghost):not(.btn-lime)::after{background:#fff}
.band-ink .btn:not(.btn-ghost):not(.btn-lime):hover,.cta-strip .btn:not(.btn-ghost):not(.btn-lime):hover{color:#2A1766;border-color:#fff}

/* text link with animated underline */
.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:15px;color:var(--violet);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease-out);
  padding-bottom:2px;
}
.tlink:hover{background-size:100% 1.5px}
.band-ink .tlink{color:var(--lime)}

/* -------------------------------------------------- 6. Header */
.site-head{
  position:fixed;inset:0 0 auto;z-index:90;
  padding:14px 0;
  transition:transform .5s var(--ease),background .4s linear,border-color .4s linear;
  border-bottom:1px solid transparent;
}
.site-head.is-solid{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--line-soft)}
.site-head.is-up{transform:translateY(-104%)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:44px;width:auto}
@media(max-width:560px){.brand img{height:38px}}
.brand .logo-on-dark{display:none}
[data-theme="dark"] .brand .logo-on-light{display:none}
[data-theme="dark"] .brand .logo-on-dark{display:block}
.brand:focus-visible{outline:3px solid var(--violet);outline-offset:6px;border-radius:6px}

.nav{display:flex;align-items:center;gap:4px}
.nav>a,.nav .dd-top{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:999px;
  font-size:15px;font-weight:500;color:var(--ink-2);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav>a:hover,.nav>a[aria-current="page"],
.nav .dd:hover .dd-top,.nav .dd:focus-within .dd-top,.nav .dd-top[aria-current="page"]{color:var(--deep);background:var(--violet-soft)}

/* dropdowns: open on hover or keyboard focus, no JS needed */
.dd{position:relative}
.dd .chev{transition:transform .35s var(--ease)}
.dd:hover .chev,.dd:focus-within .chev{transform:rotate(180deg)}
.dd-menu{
  position:absolute;top:100%;left:50%;z-index:5;
  padding-top:12px;min-width:340px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,8px);
  transition:opacity .28s var(--ease),transform .38s var(--ease-out),visibility 0s .38s;
}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .28s var(--ease),transform .38s var(--ease-out),visibility 0s;
}
.dd-in{
  background:var(--white);border:1px solid var(--line-soft);border-radius:18px;
  padding:8px;display:grid;gap:2px;
  box-shadow:0 24px 60px -24px var(--shadow);
}
.dd-wide{min-width:520px}
.dd-wide .dd-in{grid-template-columns:repeat(2,minmax(0,1fr))}
.dd-wide .dd-all{grid-column:1/-1}
.dd-in a{
  display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;
  transition:background .25s var(--ease),transform .3s var(--ease);
}
.dd-in a b{font-size:14.5px;font-weight:600;color:var(--ink)}
.dd-in a span{font-size:12.5px;color:var(--muted);line-height:1.4}
.dd-in a:hover,.dd-in a:focus-visible{background:var(--violet-mist);transform:translateX(3px);outline:0}
.dd-in a:hover b{color:var(--violet)}
.dd-in a[aria-current="page"] b{color:var(--violet)}
.dd-in .dd-all{
  margin-top:4px;border-top:1px solid var(--line-soft);border-radius:0 0 12px 12px;
  font-size:13.5px;font-weight:600;color:var(--violet);flex-direction:row;align-items:center;gap:8px;
}
.dd-in .dd-all::after{content:"arrow_forward";font-family:"Material Symbols Rounded";font-size:17px;font-weight:400;line-height:1;font-feature-settings:"liga";transition:transform .3s var(--ease)}
.dd-in .dd-all:hover::after{transform:translateX(4px)}
/* reveal menu items one after another */
.dd-in a{opacity:0;translate:0 6px;transition:background .25s var(--ease),transform .3s var(--ease),opacity .3s var(--ease),translate .4s var(--ease-out)}
.dd:hover .dd-in a,.dd:focus-within .dd-in a{opacity:1;translate:0 0}
.dd:hover .dd-in a:nth-child(2),.dd:focus-within .dd-in a:nth-child(2){transition-delay:0s,0s,.03s,.03s}
.dd:hover .dd-in a:nth-child(3),.dd:focus-within .dd-in a:nth-child(3){transition-delay:0s,0s,.06s,.06s}
.dd:hover .dd-in a:nth-child(4),.dd:focus-within .dd-in a:nth-child(4){transition-delay:0s,0s,.09s,.09s}
.dd:hover .dd-in a:nth-child(5),.dd:focus-within .dd-in a:nth-child(5){transition-delay:0s,0s,.12s,.12s}
.dd:hover .dd-in a:nth-child(n+6),.dd:focus-within .dd-in a:nth-child(n+6){transition-delay:0s,0s,.15s,.15s}

.head-cta{display:flex;align-items:center;gap:10px;flex:none}

.theme-btn{
  width:44px;height:44px;border-radius:50%;flex:none;
  border:1.5px solid var(--line);color:var(--ink);
  display:grid;place-items:center;position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.theme-btn:hover{border-color:var(--violet);background:var(--violet-soft)}
.theme-btn:active{transform:scale(.92)}
.theme-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.theme-btn .ms{font-size:21px;grid-area:1/1;transition:transform .55s var(--ease-out),opacity .35s var(--ease)}
.theme-btn .i-sun{transform:translateY(130%) rotate(-90deg);opacity:0}
[data-theme="dark"] .theme-btn .i-moon{transform:translateY(-130%) rotate(90deg);opacity:0}
[data-theme="dark"] .theme-btn .i-sun{transform:none;opacity:1}
.head-cta .btn{padding:11px 20px;min-height:44px;font-size:14px}

.burger{display:none;width:46px;height:46px;border:1.5px solid var(--line);border-radius:50%;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.6px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--ink);transition:transform .35s var(--ease)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(5.5px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-5.5px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:80;background:var(--violet-deep);color:#fff;
  padding:110px var(--gut) 40px;display:flex;flex-direction:column;gap:6px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-out);
  overflow-y:auto;
}
body.menu-open .mobile-nav{clip-path:inset(0 0 0 0)}
.mobile-nav a{
  font-family:var(--ff-display);font-size:clamp(28px,7vw,40px);
  padding:10px 0;border-bottom:1px solid var(--line-invert);
  opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
body.menu-open .mobile-nav a{opacity:1;transform:none}
.mobile-nav .m-foot{margin-top:28px;font-size:15px;color:rgba(255,255,255,.72);line-height:1.8}
.mobile-nav .m-foot a{font-family:var(--ff-body);font-size:16px;border:0;padding:0;color:var(--lime);display:inline}

@media(max-width:1280px){.head-cta .btn-ghost{display:none}}
@media(max-width:1180px){.nav>a,.nav .dd-top{padding:9px 11px}}
@media(max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
}
@media(max-width:560px){.head-cta .btn{display:none}}

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--lime);z-index:95;transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* -------------------------------------------------- 7. Hero */
.hero{padding:calc(92px + clamp(28px,6vw,70px)) 0 clamp(44px,6vw,84px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:end}
.hero h1{font-size:clamp(44px,6.6vw,86px);letter-spacing:-.03em}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.hero.ready h1 .ln>span{transform:none}
.hero h1 .ln:nth-child(2)>span{transition-delay:.08s}
.hero h1 .ln:nth-child(3)>span{transition-delay:.16s}

.hero-sub{max-width:52ch;opacity:0;transform:translateY(16px);transition:opacity .8s .35s var(--ease),transform .8s .35s var(--ease)}
.hero.ready .hero-sub{opacity:1;transform:none}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .8s .48s var(--ease),transform .8s .48s var(--ease)}
.hero.ready .hero-acts{opacity:1;transform:none}

.hero-fig{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--violet-deep);
  clip-path:inset(100% 0 0 0);transition:clip-path 1.1s .2s var(--ease-out)}
.hero.ready .hero-fig{clip-path:inset(0 0 0 0)}
.hero-fig img{width:100%;height:clamp(330px,46vw,560px);object-fit:cover;object-position:center 18%;
  transform:scale(1.14);transition:transform 1.4s .2s var(--ease-out)}
.hero.ready .hero-fig img{transform:scale(1)}
.hero-badge{
  position:absolute;left:18px;bottom:18px;right:18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:16px;padding:12px 16px;
}
.hero-badge strong{font-size:14px;font-weight:700;color:var(--deep)}
.hero-badge span{font-size:13.5px;color:var(--ink-2)}
.stars{display:inline-flex;gap:2px;color:var(--violet)}

.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--line);padding-top:26px}
.hero-stats .st{padding-right:16px}
.hero-stats .num{font-family:var(--ff-display);font-size:clamp(30px,3.6vw,46px);font-weight:600;letter-spacing:-.03em;color:var(--deep);display:block;line-height:1}
.hero-stats .lab{font-size:13.5px;color:var(--muted);margin-top:8px;display:block;max-width:20ch}
@media(max-width:860px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
}

/* -------------------------------------------------- 8. Reveal animations */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}
[data-rv="fade"]{transform:none}
[data-rv="left"]{transform:translateX(-28px)}
[data-rv="right"]{transform:translateX(28px)}
[data-rv="scale"]{transform:scale(.95)}
[data-rv].in{transform:none}

.clipfig{clip-path:inset(100% 0 0 0);transition:clip-path 1.05s var(--ease-out);overflow:hidden}
.clipfig.in{clip-path:inset(0 0 0 0)}
.clipfig img{transform:scale(1.16);transition:transform 1.5s var(--ease-out)}
.clipfig.in img{transform:scale(1)}

.lines .ln{display:block;overflow:hidden}
.lines .ln>span{display:block;transform:translateY(105%);transition:transform .95s var(--ease-out)}
.lines.in .ln>span{transform:none}
.lines.in .ln:nth-child(2)>span{transition-delay:.07s}
.lines.in .ln:nth-child(3)>span{transition-delay:.14s}
.lines.in .ln:nth-child(4)>span{transition-delay:.21s}

/* -------------------------------------------------- 9. Figures */
figure{position:relative}
.fig{border-radius:var(--radius);overflow:hidden;background:var(--violet-soft)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig-r4{aspect-ratio:4/3}
.fig-r1{aspect-ratio:1/1}
.fig-r34{aspect-ratio:3/4}
.fig-wide{aspect-ratio:21/9}
.fig cap,.fig figcaption{display:block;font-size:13px;color:var(--muted);padding-top:10px}

.band-photo{position:relative;overflow:hidden;color:#fff;isolation:isolate}
.band-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(26,16,47,.9),rgba(42,23,102,.72))}
.band-photo .lede,.band-photo p{color:rgba(255,255,255,.8)}
.band-photo .eyebrow{color:var(--lime)}
.band-photo .eyebrow::before{color:rgba(255,255,255,.5)}

/* -------------------------------------------------- 10. Cards */
.card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card:hover{border-color:var(--violet);transform:translateY(-4px);box-shadow:0 18px 40px -26px var(--shadow)}
.card h3{font-size:21px;line-height:1.2}
.card p{font-size:15px;color:var(--ink-2);margin:0}
.card .ico{width:44px;height:44px;border-radius:12px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;flex:none}
.card .ico .ms{font-size:23px}
.band-ink .card{background:rgba(255,255,255,.055);border-color:var(--line-invert)}
.band-ink .card h3{color:#fff}
.band-ink .card p{color:rgba(255,255,255,.72)}
.band-ink .card .ico{background:rgba(221,242,71,.16);color:var(--lime)}
.band-ink .card:hover{border-color:var(--lime)}

/* flagship service card with photo */
.svc{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--white);border:1px solid var(--line-soft);
  display:flex;flex-direction:column;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.svc:hover{transform:translateY(-6px);box-shadow:0 26px 60px -34px var(--shadow)}
.svc-media{aspect-ratio:16/10;overflow:hidden;background:var(--violet-soft)}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.svc:hover .svc-media img{transform:scale(1.06)}
.svc-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.svc-body h3{font-size:clamp(21px,2vw,26px)}
.svc-body p{font-size:15px;color:var(--ink-2);flex-grow:1}
.svc-no{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--violet-deep);color:#fff;font-size:12px;font-weight:600;letter-spacing:.1em;
  padding:6px 12px;border-radius:999px;font-variant-numeric:tabular-nums;
}
.svc.is-flag .svc-no{background:var(--lime);color:var(--violet-deep)}

/* bare list card (non-flagship services) */
.mini{
  border-top:2px solid var(--deep);padding-top:16px;
  display:flex;flex-direction:column;gap:7px;
  transition:border-color .4s var(--ease)
}
.mini:hover{border-color:var(--lime-deep)}
.mini h4{font-size:17px;font-family:var(--ff-body);font-weight:700;letter-spacing:0}
.mini p{font-size:14.5px;color:var(--muted);margin:0}

/* -------------------------------------------------- 11. Numbered steps */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;
  display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(14px,3vw,40px);align-items:start;
  padding:26px 0;border-top:1px solid var(--line);
  transition:background .4s var(--ease)
}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--ff-display);font-size:19px;color:var(--violet);
  font-variant-numeric:tabular-nums;padding-top:2px
}
.step h3{font-size:clamp(19px,1.9vw,25px)}
.step p{font-size:15.5px;color:var(--ink-2)}
.band-ink .step{border-color:var(--line-invert)}
.band-ink .step::before{color:var(--lime)}
.band-ink .step p{color:rgba(255,255,255,.72)}
@media(max-width:780px){.step{grid-template-columns:44px minmax(0,1fr)}.step p{grid-column:2}}

/* -------------------------------------------------- 12. Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;background:var(--paper-warm)}
.marquee-track{display:flex;gap:0;width:max-content;animation:slide 64s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  padding:0 26px;font-family:var(--ff-display);font-size:clamp(17px,1.7vw,22px);
  color:var(--deep);opacity:.72;white-space:nowrap;display:flex;align-items:center;gap:26px
}
.marquee-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime-deep)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* -------------------------------------------------- 13. Accordion / FAQ */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;text-align:left;
  font-family:var(--ff-display);font-size:clamp(18px,1.9vw,23px);font-weight:600;line-height:1.25;
  color:var(--ink);transition:color .3s
}
.acc-q:hover{color:var(--violet)}
.acc-q .pm{flex:none;width:30px;height:30px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;position:relative;transition:border-color .3s,background .3s}
.acc-q .pm::before,.acc-q .pm::after{content:"";position:absolute;background:currentColor;transition:transform .4s var(--ease)}
.acc-q .pm::before{width:11px;height:1.6px}
.acc-q .pm::after{width:1.6px;height:11px}
.acc-item.open .acc-q .pm{background:var(--brand);border-color:var(--brand);color:#fff}
.acc-item.open .acc-q .pm::after{transform:scaleY(0)}
.acc-a{overflow:hidden;height:0;transition:height .5s var(--ease-out)}
.acc-a-in{padding:0 0 24px;max-width:72ch;color:var(--ink-2);font-size:16px}
.acc-a-in p+p{margin-top:12px}

/* -------------------------------------------------- 14. Tabs & filters */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 17px;border:1.5px solid var(--line);border-radius:999px;
  font-size:14px;font-weight:600;color:var(--ink-2);background:transparent;
  transition:all .3s var(--ease);
}
.chip:hover{border-color:var(--violet);color:var(--violet)}
.chip[aria-pressed="true"],.chip.active{background:var(--violet-deep);border-color:var(--violet-deep);color:#fff}
.chip:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* -------------------------------------------------- 15. College directory */
.state-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:2px solid var(--deep);margin-bottom:26px
}
.state-head .count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
/* hairlines come from cell borders, so a part-filled last row leaves no grey block */
.col-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.col-item{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper);padding:16px 18px;display:flex;flex-direction:column;gap:5px;
  transition:background .3s var(--ease)
}
.col-item:hover{background:var(--white)}
.col-item .nm{font-size:15.5px;font-weight:600;line-height:1.3}
.col-item .mt{font-size:12.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.col-item .tag{color:var(--violet);font-weight:600}
.empty{padding:40px;text-align:center;color:var(--muted);grid-column:1/-1;background:var(--paper)}

.loc-card{position:relative;border-radius:var(--radius);overflow:hidden;display:block;aspect-ratio:4/3;background:var(--violet-deep)}
.loc-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out);opacity:.9}
.loc-card:hover img{transform:scale(1.07)}
.loc-card figcaption{
  position:absolute;inset:auto 0 0;padding:20px;color:#fff;
  background:linear-gradient(transparent,rgba(26,16,47,.86));
  font-family:var(--ff-display);font-size:23px
}
.loc-card figcaption small{display:block;font-family:var(--ff-body);font-size:13px;opacity:.8;margin-top:3px;font-weight:500}

/* -------------------------------------------------- 16. Course explorer */
.course-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:940px){.course-wrap{grid-template-columns:minmax(0,1fr)}}
.course-nav{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line)}
.course-btn{
  width:100%;text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:16px;font-weight:600;color:var(--ink-2);
  transition:background .3s var(--ease),color .3s var(--ease),padding-left .3s var(--ease)
}
.course-btn:hover{background:var(--violet-mist);color:var(--deep);padding-left:22px}
.course-btn[aria-selected="true"]{background:var(--violet-deep);color:#fff;border-color:var(--violet-deep)}
.course-btn .n{font-size:12px;opacity:.6;font-variant-numeric:tabular-nums}
.course-panel{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:clamp(22px,3vw,38px)}
.course-panel[hidden]{display:none}
.pill-row{display:flex;flex-wrap:wrap;gap:7px}
.pill{border:1.5px solid var(--violet);color:var(--violet);border-radius:999px;padding:5px 13px;font-size:13.5px;font-weight:600}
.pill-solid{background:var(--violet-deep);border-color:var(--violet-deep);color:#fff}
.pill-lime{background:var(--lime);border-color:var(--lime);color:var(--violet-deep)}

/* -------------------------------------------------- 17. Blog */
.post-card{display:flex;flex-direction:column;gap:14px;height:100%}
.post-card .fig{aspect-ratio:3/2}
.post-card img{transition:transform 1s var(--ease-out)}
.post-card:hover img{transform:scale(1.05)}
.post-meta{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--lime-deep)}
.post-card h3{font-size:clamp(20px,2vw,25px);line-height:1.18}
.post-card:hover h3{color:var(--violet)}
.post-card h3{transition:color .3s}

.prose{max-width:70ch;font-size:17.5px;line-height:1.75}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(26px,3vw,36px);margin-top:1.8em;line-height:1.14}
.prose h3{font-size:clamp(20px,2.2vw,25px);margin-top:1.5em}
.prose p{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--violet);font-weight:500;border-bottom:1.5px solid var(--line);transition:border-color .3s}
.prose a:hover{border-color:var(--violet)}
.prose ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-left:26px;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:4px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--lime-deep)}
.prose ol{padding-left:22px;display:flex;flex-direction:column;gap:10px;color:var(--ink-2)}
.prose blockquote{
  border-left:3px solid var(--lime);padding:4px 0 4px 24px;margin-left:0;
  font-family:var(--ff-display);font-size:clamp(20px,2.3vw,27px);line-height:1.35;color:var(--deep)
}
.prose figure{margin:2em 0}
.prose figure img{border-radius:var(--radius)}
.prose figcaption{font-size:13.5px;color:var(--muted);padding-top:10px}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose th{background:var(--violet-soft);font-weight:600;font-size:14px}

.toc{background:var(--violet-mist);border-radius:var(--radius);padding:24px;font-size:15px}
.toc h4{font-family:var(--ff-body);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:12px}
.toc ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;color:var(--ink-2);transition:color .3s}
.toc a::before{content:counter(t,decimal-leading-zero);color:var(--violet);font-variant-numeric:tabular-nums;font-size:13px}
.toc a:hover{color:var(--violet)}

/* -------------------------------------------------- 18. Quotes / testimonials */
.quote{
  background:var(--white);border-radius:var(--radius-lg);padding:clamp(26px,3vw,40px);
  display:flex;flex-direction:column;gap:20px;border:1px solid var(--line-soft);height:100%
}
.quote blockquote{font-family:var(--ff-display);font-size:clamp(19px,1.9vw,24px);line-height:1.38;color:var(--deep)}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote .av{width:44px;height:44px;border-radius:50%;background:var(--violet-soft);display:grid;place-items:center;font-weight:700;color:var(--violet);flex:none;font-size:15px}
.quote .who b{display:block;font-size:15px}
.quote .who span{font-size:13.5px;color:var(--muted)}

/* -------------------------------------------------- 19. Forms */
.form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--white);font-size:16px;transition:border-color .3s,box-shadow .3s
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(78,37,200,.12)
}
.field .hint{font-size:12.5px;color:var(--muted)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:620px){.form-row{grid-template-columns:minmax(0,1fr)}}
.form-note{font-size:13.5px;color:var(--muted)}
.form-ok{background:var(--lime);color:var(--violet-deep);padding:16px 20px;border-radius:12px;font-weight:600;font-size:15px}

/* -------------------------------------------------- 20. Contact rail */
.cx{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
.cx .ico{width:42px;height:42px;border-radius:12px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;flex:none}
.cx .ico .ms{font-size:21px}
.cx b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:3px}
.cx a,.cx p{font-size:16.5px;color:var(--ink);font-weight:500;line-height:1.5}
.cx a:hover{color:var(--violet)}
.band-ink .cx{border-color:var(--line-invert)}
.band-ink .cx .ico{background:rgba(255,255,255,.1);color:var(--lime)}
.band-ink .cx b{color:rgba(255,255,255,.55)}
.band-ink .cx a,.band-ink .cx p{color:#fff}

/* -------------------------------------------------- 21. CTA strip */
.cta-strip{position:relative;overflow:hidden;background:var(--violet-deep);color:#fff;border-radius:var(--radius-lg);padding:clamp(34px,5vw,68px)}
.cta-strip h2{font-size:clamp(30px,4.2vw,54px)}
.cta-strip .arc{position:absolute;right:-90px;top:-90px;width:380px;height:380px;border:70px solid rgba(255,255,255,.055);border-radius:50%;pointer-events:none}
.cta-strip p{color:rgba(255,255,255,.78);max-width:56ch}

.ribbon{background:var(--lime);color:var(--violet-deep);padding:13px 0;overflow:hidden}
.ribbon .marquee-track{animation-duration:38s}
.ribbon .marquee-track span{font-family:var(--ff-body);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-deep);opacity:1;padding:0 18px;gap:18px}
.ribbon .marquee-track span::after{background:var(--violet-deep)}

/* -------------------------------------------------- 22. Footer */
.site-foot{background:var(--foot);color:rgba(255,255,255,.72);padding:clamp(52px,6vw,86px) 0 30px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.site-foot h4{font-family:var(--ff-body);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);font-weight:600;margin-bottom:16px}
.site-foot ul{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0}
.site-foot a{transition:color .3s}
.site-foot a:hover{color:#fff}
.site-foot img.logo{height:42px;width:auto;margin-bottom:18px}
.foot-bot{margin-top:clamp(36px,4vw,58px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.5)}
.foot-bot a:hover{color:var(--lime)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;transition:all .35s var(--ease)}
.social a:hover{background:var(--lime);border-color:var(--lime);color:var(--violet-deep)}
.social svg{width:17px;height:17px}
@media(max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* -------------------------------------------------- 23. Breadcrumb + page head */
.page-head{padding:calc(92px + clamp(30px,5vw,60px)) 0 clamp(30px,4vw,56px)}
.crumb{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:22px;flex-wrap:wrap}
.crumb a:hover{color:var(--violet)}
.crumb span{opacity:.5}
.band-ink .crumb,.band-photo .crumb{color:rgba(255,255,255,.65)}
.band-ink .crumb a:hover,.band-photo .crumb a:hover{color:var(--lime)}

/* -------------------------------------------------- 24. Floating actions */
.fab{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px}
.fab a{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--violet-deep);color:#fff;box-shadow:0 10px 30px -10px rgba(26,16,47,.6);
  transition:transform .35s var(--ease),background .35s
}
.fab a:hover{transform:scale(1.08) translateY(-2px)}
.fab a.wa{background:#1FAF54}
.fab svg{width:24px;height:24px}
@media(max-width:560px){.fab a{width:48px;height:48px}}

/* -------------------------------------------------- 25. Utilities */
.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}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--violet-deep);color:#fff;padding:12px 18px;border-radius:0 0 10px 10px;transition:top .3s}
.skip:focus{top:0}
.mw-50{max-width:50ch}.mw-60{max-width:60ch}.mw-70{max-width:70ch}
.mt-a{margin-top:auto}
.flow>*+*{margin-top:1em}
.tabnum{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}

/* -------------------------------------------------- 26. Map embed */
.map-fig{aspect-ratio:21/8}
.map-fig iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:820px){.map-fig{aspect-ratio:3/2}}
@media(max-width:520px){.map-fig{aspect-ratio:1/1}}

/* belt and braces: nothing may push the page sideways */
html,body{max-width:100%}

/* -------------------------------------------------- 27. Page-head proportions */
.page-head .split{grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);align-items:end}
.page-head h1.h-xxl{font-size:clamp(40px,6.2vw,78px)}
.page-head .lede{padding-bottom:.5em}
@media(max-width:900px){
  .page-head .split{grid-template-columns:minmax(0,1fr)}
  .page-head .lede{padding-bottom:0}
}

/* -------------------------------------------------- 28. Service sidebar nav */
.svc-side li a{display:block;padding:7px 0;color:var(--ink-2);transition:color .3s,padding-left .3s var(--ease)}
.svc-side li a:hover{color:var(--violet);padding-left:7px}
.svc-side li a[aria-current="page"]{color:var(--deep);font-weight:700}
.svc-side li a[aria-current="page"]::before{content:"";display:inline-block;width:14px;height:2px;background:var(--lime-deep);vertical-align:middle;margin-right:8px}

/* -------------------------------------------------- 29. Cards on photo bands
   .band-photo sets white text, so plain white cards came out white-on-white. */
.band-photo .card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.band-photo .card h3{color:#fff}
.band-photo .card p{color:rgba(255,255,255,.76)}
.band-photo .card:hover{border-color:var(--lime)}

/* -------------------------------------------------- 30. Dark theme details */
[data-theme="dark"] .chip[aria-pressed="true"],[data-theme="dark"] .chip.active,
[data-theme="dark"] .course-btn[aria-selected="true"],[data-theme="dark"] .pill-solid{background:var(--brand);border-color:var(--brand)}
[data-theme="dark"] .fab a:not(.wa){background:var(--brand)}
[data-theme="dark"] .loc-card img{opacity:.8}
[data-theme="dark"] .band-photo::after{background:linear-gradient(100deg,rgba(10,7,20,.92),rgba(36,21,79,.8))}

/* -------------------------------------------------- 31. Hover & pointer effects
   JS sets --mx/--my for the glow, inline transforms for tilt and `translate`
   for magnetic buttons. All of it is skipped on touch and reduced motion. */
.card,.quote,.col-item,.svc{position:relative;isolation:isolate}
.card::before,.quote::before,.col-item::before,.svc::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 46%);
  opacity:0;transition:opacity .45s var(--ease);
}
.card:hover::before,.quote:hover::before,.col-item:hover::before,.svc:hover::before{opacity:1}
.band-ink .card,.band-photo .card{--glow:rgba(221,242,71,.12)}

.col-item{transition:background .3s var(--ease),box-shadow .35s var(--ease)}
.col-item:hover{box-shadow:inset 3px 0 0 var(--violet)}
.col-item .nm{transition:translate .35s var(--ease-out)}
.col-item:hover .nm{translate:4px 0}

.fig img{transition:transform 1s var(--ease-out)}
.fig:hover img,.clipfig.in:hover img{transform:scale(1.04)}

.loc-card figcaption{transition:translate .5s var(--ease-out)}
.loc-card:hover figcaption{translate:0 -6px}

.chip{transition:all .3s var(--ease),translate .3s var(--ease-out)}
.chip:hover{translate:0 -2px}

.step::before{transition:translate .45s var(--ease-out)}
.step:hover::before{translate:6px 0}
.step h3{transition:color .3s var(--ease)}
.step:hover h3{color:var(--violet)}
.band-ink .step:hover h3{color:var(--lime)}

.quote{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease)}
.quote:hover{border-color:var(--violet);box-shadow:0 22px 50px -30px var(--shadow)}

.btn,.theme-btn,.fab a,.social a{transition:color .45s var(--ease),border-color .45s var(--ease),background .35s var(--ease),transform .3s var(--ease),translate .45s var(--ease-out)}

.hero.ready .hero-fig img{transform:scale(1.05) translate3d(var(--px,0px),var(--py,0px),0)}
.hero.settled .hero-fig img{transition:transform .9s var(--ease-out)}

/* cursor ring (desktop pointer only, added by JS) */
.cursor{
  position:fixed;left:0;top:0;z-index:300;pointer-events:none;
  width:36px;height:36px;margin:-18px 0 0 -18px;
  opacity:0;transition:opacity .3s var(--ease);will-change:transform;
  mix-blend-mode:difference;
}
.cursor.on{opacity:1}
.cursor i{
  display:block;width:100%;height:100%;border-radius:50%;
  border:1.5px solid #fff;background:rgba(255,255,255,0);
  transition:transform .35s var(--ease-out),background .3s var(--ease);
}
.cursor.big i{transform:scale(1.7);background:#fff}
.cursor.down i{transform:scale(.8)}
.cursor.big.down i{transform:scale(1.5)}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

/* -------------------------------------------------- 32. Full-bleed home hero
   Always dark, whatever the site theme: the photo sets the mood. */
.hero-full{
  min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
  padding:calc(92px + 48px) 0 clamp(56px,8vw,112px);
  background:#0d0919;color:#fff;isolation:isolate;
}
.hero-bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:74% 20%;
  transform:scale(1.14);transition:transform 1.8s var(--ease-out);
}
.hero.ready .hero-bg{transform:scale(1.05) translate3d(var(--px,0px),var(--py,0px),0)}
.hero.settled .hero-bg{transition:transform .9s var(--ease-out)}
.hero-full::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(13,9,25,.95) 0%,rgba(13,9,25,.82) 34%,rgba(13,9,25,.3) 66%,rgba(13,9,25,.12) 100%),
    linear-gradient(0deg,rgba(13,9,25,.8) 0%,rgba(13,9,25,0) 42%),
    linear-gradient(180deg,rgba(13,9,25,.55) 0%,rgba(13,9,25,0) 22%);
}
.hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.4vw,28px)}
.hero-full .eyebrow{color:var(--lime)}
.hero-full h1{color:#fff;font-size:clamp(46px,7vw,104px);max-width:13ch}
.hero-full .hero-sub{color:rgba(255,255,255,.82);max-width:38ch}

/* Desktop: the photo is near-square, so stretching it edge to edge crops it
   hard and puts faces behind the headline. Pin it to the right at full height
   instead, and give the text a clean dark panel on the left. */
@media(min-width:761px){
  .hero-full{align-items:center}
  .hero-bg{left:auto;right:0;width:62%;object-position:50% 16%}
  .hero-full::after{
    background:
      linear-gradient(90deg,#0d0919 0%,#0d0919 38%,rgba(13,9,25,.82) 44%,rgba(13,9,25,.35) 54%,rgba(13,9,25,0) 66%),
      linear-gradient(0deg,rgba(13,9,25,.75) 0%,rgba(13,9,25,0) 30%),
      linear-gradient(180deg,rgba(13,9,25,.6) 0%,rgba(13,9,25,0) 20%);
  }
  .hero-in{max-width:min(46%,760px);margin-left:max(var(--gut),calc((100% - 1560px)/2))}
  .hero-full h1{font-size:clamp(44px,5.4vw,96px)}
}
@media(min-width:761px) and (max-width:1100px){
  .hero-bg{width:70%}
  .hero-in{max-width:56%}
}
.hero-full .btn-ghost{--fg:#fff;--bd:rgba(255,255,255,.36)}
.hero-full .btn-ghost::after{background:#fff}
.hero-full .btn-ghost:hover{color:#2A1766;border-color:#fff}
.hero-full .hero-badge{
  position:static;margin-top:6px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:999px;padding:9px 16px;
  opacity:0;transform:translateY(16px);transition:opacity .8s .6s var(--ease),transform .8s .6s var(--ease);
}
.hero.ready .hero-badge{opacity:1;transform:none}
.hero-full .hero-badge .stars,.hero-full .hero-badge .stars .ms{color:var(--lime)}
.hero-full .hero-badge strong{color:#fff}
.hero-full .hero-badge span{color:rgba(255,255,255,.66)}
.hero-after .hero-stats{margin-top:0;border-top:0;padding-top:0}
@media(max-width:760px){
  .hero-bg{object-position:62% 18%}
  .hero-full::after{
    background:linear-gradient(0deg,rgba(13,9,25,.97) 0%,rgba(13,9,25,.86) 42%,rgba(13,9,25,.35) 75%,rgba(13,9,25,.55) 100%);
  }
}

/* header while it sits over the dark hero photo */
.has-hero .site-head:not(.is-solid) .nav>a,
.has-hero .site-head:not(.is-solid) .nav .dd-top{color:rgba(255,255,255,.86)}
.has-hero .site-head:not(.is-solid) .nav>a:hover,
.has-hero .site-head:not(.is-solid) .nav>a[aria-current="page"],
.has-hero .site-head:not(.is-solid) .nav .dd:hover .dd-top,
.has-hero .site-head:not(.is-solid) .nav .dd:focus-within .dd-top{color:#fff;background:rgba(255,255,255,.12)}
.has-hero .site-head:not(.is-solid) .logo-on-light{display:none}
.has-hero .site-head:not(.is-solid) .logo-on-dark{display:block}
.has-hero .site-head:not(.is-solid) .head-cta .btn-ghost{--fg:#fff;--bd:rgba(255,255,255,.36)}
.has-hero .site-head:not(.is-solid) .head-cta .btn-ghost::after{background:#fff}
.has-hero .site-head:not(.is-solid) .head-cta .btn-ghost:hover{color:#2A1766}
.has-hero .site-head:not(.is-solid) .theme-btn{color:#fff;border-color:rgba(255,255,255,.36)}
.has-hero .site-head:not(.is-solid) .theme-btn:hover{background:rgba(255,255,255,.12);border-color:#fff}
.has-hero .site-head:not(.is-solid) .burger{border-color:rgba(255,255,255,.36)}
.has-hero .site-head:not(.is-solid) .burger span,
.has-hero .site-head:not(.is-solid) .burger span::before,
.has-hero .site-head:not(.is-solid) .burger span::after{background:#fff}
.has-hero.menu-open .site-head .burger span{background:transparent}