/* ========================= TOKENS ========================= */ /* Official brand palette. Every colour below is derived from one of the two brand values, so the whole site inherits one system: --brand-blue #386487 hue 207, sat 41% --brand-gold #F6BC3E hue 41, sat 91% The darks, tints, lines and shadows are the same two hues at different lightness. Nothing here introduces a third hue. */ :root{ /* ---------- the two official brand colours ---------- */ --brand-blue:#386487; --brand-gold:#F6BC3E; /* ---------- blue scale, hue 207 ---------- */ --navy:#182B3A; /* dark surfaces + headings L 16% */ --midnight:#101D28; /* deeper surfaces L 11% */ --deep:#0C151D; /* deepest surfaces L 8% */ --blue-deep:#2B4D69; /* hover / pressed state of the brand blue */ --sky:#76A3C6; /* light decorative tint */ --blue-soft:rgba(56,100,135,.14); /* ---------- neutrals, cooled onto the blue hue ---------- */ --ink:#172A39; /* body text 14.8:1 on white */ --ink-soft:#475E70; /* secondary text 6.8:1 on white */ --ivory:#F4EEE2; --cream:#FBF8F1; --white:#fff; /* ---------- gold scale, hue 41 ---------- */ --gold:#F6BC3E; /* brand gold: fills, accents, gold-on-dark text */ --gold-hover:#D9A537; /* darker gold for hover on gold fills */ --gold-deep:#826017; /* the ONLY gold safe as text on light: 5.8:1 white, 5.0:1 ivory */ --gold-soft:rgba(246,188,62,.16); /* ---------- lines, focus ---------- */ --line:rgba(24,43,58,.12); --line-lt:rgba(255,255,255,.16); /* Focus ring. Blue by default because the gold is only 1.7:1 on white. Dark surfaces re-declare --focus as the gold further down. */ --focus:var(--brand-blue); /* Height of the fixed header. Pages that open with a hero clear it with the hero padding; pages that open straight into content use this. */ --topbar-h:70px; --fs-hero:clamp(2.6rem,1.5rem + 5.4vw,6rem); --fs-h1:clamp(2.15rem,1.5rem + 3.6vw,4.3rem); --fs-h2:clamp(1.8rem,1.32rem + 2.5vw,3.1rem); --fs-h3:clamp(1.35rem,1.1rem + 1.1vw,2rem); --fs-h4:clamp(1.12rem,1rem + .5vw,1.4rem); --fs-lead:clamp(1.06rem,.99rem + .4vw,1.28rem); --fs-body:clamp(1rem,.96rem + .2vw,1.09rem); --fs-sm:.92rem; --fs-xs:.78rem; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --s10:96px; --s11:120px; --r-btn:12px; --r-card:22px; --r-img:26px; --r-input:11px; --r-pill:999px; --sh-sm:0 1px 2px rgba(24,43,58,.06); --sh-md:0 18px 40px -24px rgba(24,43,58,.45); --sh-card:0 1px 0 var(--line),0 26px 50px -36px rgba(24,43,58,.42); --sh-gold:0 14px 30px -18px rgba(217,165,55,.55); --container:1280px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:var(--fs-body);line-height:1.65;color:var(--ink);background:var(--cream); -webkit-font-smoothing:antialiased;overflow-x:clip} /* height:auto cancels the HTML height attribute, which browsers apply as a presentational hint. Without it, any image whose CSS sets width but not height renders at a fixed attribute height and distorts. Author rules that set a real height (.vidcard img, .canvas img) are more specific and win. */ img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} h1,h2,h3,h4,h5{font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--navy);font-weight:700;letter-spacing:-.022em;line-height:1.1;text-wrap:balance} h1{font-weight:700;line-height:1.06;letter-spacing:-.028em} h2{font-weight:700;line-height:1.12;letter-spacing:-.024em} h3{font-weight:600;line-height:1.18;letter-spacing:-.018em} h4{font-weight:600;line-height:1.28;letter-spacing:-.012em} p{text-wrap:pretty} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4);letter-spacing:-.01em} p{max-width:66ch} .serif{font-family:"Manrope",sans-serif;font-weight:700;letter-spacing:-.02em;font-style:normal} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)} .section{padding-block:clamp(60px,8.5vw,118px)} .lead{font-size:var(--fs-lead);color:var(--ink-soft);line-height:1.6;max-width:62ch;font-weight:400} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:600; color:var(--gold-deep);margin-bottom:18px} .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--gold);border-radius:2px} .eyebrow.on-dark{color:var(--gold)} .skip{position:absolute;left:-999px;top:12px;z-index:400;background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px} .skip:focus{left:12px} :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px} /* ========================= BUTTONS ========================= */ .btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem; padding:14px 26px;border-radius:var(--r-btn);transition:all .3s var(--ease); border:1.5px solid transparent;line-height:1;white-space:nowrap} .btn svg{width:17px;height:17px;transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn-primary{background:var(--gold);color:var(--midnight);box-shadow:var(--sh-gold)} .btn-primary:hover{background:var(--gold-hover);transform:translateY(-2px)} .btn-ghost{border-color:var(--line);color:var(--navy);background:rgba(255,255,255,.6)} .btn-ghost:hover{border-color:var(--brand-blue);background:#fff;transform:translateY(-2px)} .btn-onDark{border-color:var(--line-lt);color:#fff} .btn-onDark:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)} /* ========================= PHOTO CANVAS (drop-in zones) ========================= */ .canvas{position:relative;border-radius:var(--r-img);overflow:hidden;isolation:isolate; background:radial-gradient(120% 90% at 12% 0%,rgba(56,100,135,.30),transparent 55%), linear-gradient(150deg,var(--navy),var(--midnight));display:flex;align-items:flex-end} .canvas::after{content:"";position:absolute;inset:0;background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px; -webkit-mask-image:radial-gradient(120% 120% at 50% 30%,#000,transparent 78%); mask-image:radial-gradient(120% 120% at 50% 30%,#000,transparent 78%)} .canvas .tag{position:relative;z-index:2;margin:16px;padding:7px 13px;border-radius:var(--r-pill); background:rgba(16,29,40,.55);border:1px solid var(--line-lt);backdrop-filter:blur(6px); color:rgba(255,255,255,.85);font-size:var(--fs-xs);font-weight:500} .canvas .tag b{color:var(--gold);font-weight:600} /* ========================= HEADER ========================= */ .topbar{position:fixed;inset:0 0 auto 0;z-index:120;transition:background .35s var(--ease),padding .35s var(--ease)} .topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px; max-width:1440px;margin-inline:auto;padding:20px clamp(20px,5vw,56px);transition:padding .35s var(--ease)} .topbar.solid{background:rgba(16,29,40,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-lt)} .topbar.solid .topbar__in{padding-block:12px} .logo{display:flex;align-items:center;gap:12px} .logo img{height:52px;width:auto;transition:height .35s var(--ease)} .topbar.solid .logo img{height:42px} .topbar__right{display:flex;align-items:center;gap:14px} .menu-btn{display:inline-flex;align-items:center;gap:12px;color:#fff;font-weight:600;font-size:1rem; padding:8px 4px} .menu-btn .bars{display:flex;flex-direction:column;gap:5px} .menu-btn .bars span{width:26px;height:2px;background:#fff;border-radius:2px;transition:.3s} .menu-btn:hover .bars span{background:var(--gold)} .topbar .btn-onDark{padding:11px 20px;font-size:.9rem} /* ========================= FULLSCREEN MENU ========================= */ .overlay{position:fixed;inset:0;z-index:200;background:var(--navy); clip-path:circle(0% at calc(100% - 60px) 44px);transition:clip-path .6s var(--ease); visibility:hidden} .overlay.open{clip-path:circle(150% at calc(100% - 60px) 44px);visibility:visible} .overlay::before{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none; background:radial-gradient(60% 80% at 80% 20%,var(--sky),transparent 60%)} .overlay__in{position:relative;height:100%;max-width:1440px;margin-inline:auto; padding:clamp(24px,5vw,56px);display:flex;flex-direction:column} .overlay__top{display:flex;flex-direction:column-reverse;align-items:flex-end;gap:26px} .overlay__top img{height:clamp(72px,9vw,120px);width:auto} .ov-close{width:44px;height:44px;border:none;color:#fff;font-size:2.1rem;line-height:1; display:grid;place-items:center;transition:color .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease);opacity:.9} .ov-close:hover{color:var(--gold);transform:rotate(90deg);opacity:1} .overlay__body{flex:1;display:flex;align-items:center;min-height:0} .ov-primary{list-style:none;display:flex;flex-direction:column;gap:clamp(6px,1.5vh,16px)} .ov-primary>li>a{display:inline-flex;align-items:center; font-size:clamp(1.5rem,1rem + 2vw,2.5rem);font-weight:600;text-transform:uppercase;letter-spacing:.01em; color:rgba(255,255,255,.9);padding:2px 0;transition:color .25s,transform .25s var(--ease);text-align:left} .ov-primary>li>a::before{content:"";width:0;height:2px;background:var(--gold);margin-right:0;flex-shrink:0; transition:width .28s var(--ease),margin-right .28s var(--ease)} .ov-primary>li:hover>a,.ov-primary>li.active>a{color:#fff;transform:translateX(8px)} .ov-primary>li:hover>a::before,.ov-primary>li.active>a::before{width:28px;margin-right:14px} .ov-foot-links,.ov-foot-social{display:flex;flex-wrap:wrap;gap:26px} .ov-foot-social{font-weight:500} .ov-sub{display:none} .ov-sub__group{display:none} .ov-sub__group.show{display:block;animation:fadeUp .4s var(--ease)} .ov-sub h5{color:var(--gold);font-size:.8rem;letter-spacing:.1em;font-weight:700;margin-bottom:18px} .ov-sub ul{list-style:none;display:grid;gap:12px} .ov-sub a{color:rgba(255,255,255,.8);font-weight:500;font-size:1.05rem;display:inline-flex; align-items:center;gap:10px;transition:color .2s} .ov-sub a:hover{color:var(--gold)} .ov-sub a svg{width:15px;height:15px;opacity:.5;transition:.2s} .ov-sub a:hover svg{opacity:1;transform:translateX(3px)} .overlay__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px; padding-top:26px;border-top:1px solid var(--line-lt);color:rgba(255,255,255,.6);font-size:.92rem} .overlay__foot nav{display:flex;flex-wrap:wrap;gap:24px} .overlay__foot a:hover{color:var(--gold)} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ========================= PAGE ROUTER ========================= */ [data-page]{display:none} [data-page].active{display:block;animation:pageIn .5s var(--ease)} @keyframes pageIn{from{opacity:0}to{opacity:1}} /* ========================= HERO ========================= */ .hero{position:relative;min-height:94vh;display:grid;place-items:center;text-align:center; color:#fff;overflow:hidden;background: radial-gradient(90% 70% at 50% 120%,rgba(56,100,135,.18),transparent 60%), linear-gradient(180deg,var(--deep),var(--midnight) 60%,var(--navy))} .hero__media{position:absolute;inset:0;z-index:0} .hero__media::after{content:"";position:absolute;inset:0;background: linear-gradient(180deg,rgba(16,29,40,.42),rgba(16,29,40,.28) 42%,rgba(12,21,29,.72))} /* shield-motif triangles */ .hero__tri{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.9} .hero__tri svg{width:100%;height:100%} .hero__grid{position:absolute;inset:0;z-index:1;opacity:.35;pointer-events:none;background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:40px 40px; -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000,transparent 75%); mask-image:radial-gradient(120% 90% at 50% 30%,#000,transparent 75%)} .hero__in{position:relative;z-index:3;padding:120px 24px 90px;max-width:1000px} .hero__badge{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:var(--r-pill); border:1px solid var(--line-lt);background:rgba(255,255,255,.06);font-size:.85rem;font-weight:600; color:#fff;margin-bottom:30px;backdrop-filter:blur(6px)} .hero__badge i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)} .hero__script{font-family:"Manrope",sans-serif;font-weight:500; font-size:clamp(1.9rem,1.1rem + 3vw,3.5rem);color:rgba(255,255,255,.95);margin-bottom:0;line-height:1.05} .hero__word{display:block;font-size:var(--fs-hero);font-weight:700;letter-spacing:.02em;text-transform:uppercase; color:#fff;line-height:1;min-height:1.05em} .hero__word .w{display:inline-block;color:#fff} .hero__sub{max-width:60ch;margin:26px auto 34px;color:rgba(255,255,255,.82);font-size:var(--fs-lead);line-height:1.5} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .hero__cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.85)} .hero__cue span{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5); display:grid;place-items:center;transition:.3s var(--ease)} .hero__cue span svg{width:19px;height:19px;animation:cueBob 2s var(--ease) infinite} @keyframes cueBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}} /* page hero (inner pages) */ .phero{position:relative;min-height:62vh;display:grid;align-items:center;color:#fff;overflow:hidden; background:linear-gradient(180deg,var(--deep),var(--navy))} .phero .hero__tri{opacity:.7} .phero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 40%} .phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,29,40,.78),rgba(16,29,40,.62) 45%,rgba(12,21,29,.85))} .phero__in{position:relative;z-index:3; /* padding-block, NOT the padding shorthand: the shorthand reset the inline padding this element inherits from .container, so hero copy sat flush against the screen edge on every page that has a page hero. */ padding-block:clamp(112px,13vw,150px) clamp(48px,6vw,70px)} .phero h1{color:#fff;font-size:var(--fs-h1);max-width:18ch} .phero p{color:rgba(255,255,255,.8);margin-top:20px;max-width:56ch;font-size:var(--fs-lead)} .crumb{display:flex;gap:8px;align-items:center;color:rgba(255,255,255,.55);font-size:.85rem;margin-bottom:22px;font-weight:500} .crumb a:hover{color:var(--gold)} .crumb span{opacity:.5} /* ========================= JOURNEY SELECTOR ========================= */ .journey{background:var(--cream)} .journey__head{max-width:640px;margin-bottom:44px} .journey__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .path{position:relative;border-radius:var(--r-img);overflow:hidden;min-height:440px;display:flex; align-items:flex-end;color:#fff;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .path::before{content:"";position:absolute;inset:0;z-index:0;transition:transform .6s var(--ease); background:radial-gradient(120% 90% at 20% 0%,rgba(56,100,135,.34),transparent 55%),linear-gradient(150deg,var(--navy),var(--midnight))} .path::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(12,21,29,.82))} .path:hover{transform:translateY(-6px);box-shadow:var(--sh-md)} .path:hover::before{transform:scale(1.06)} .path__body{position:relative;z-index:2;padding:36px} .path__kicker{font-size:.8rem;letter-spacing:.12em;color:var(--gold);font-weight:700;margin-bottom:12px} .path h3{color:#fff;font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem);margin-bottom:10px} .path p{color:rgba(255,255,255,.78);font-size:.98rem;margin-bottom:22px;max-width:38ch} .path__go{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:#fff} .path__go svg{width:18px;height:18px;transition:transform .3s var(--ease)} .path:hover .path__go svg{transform:translateX(6px);color:var(--gold)} .path .tag{position:absolute;top:16px;right:16px;margin:0} /* ========================= TRUST STRIP ========================= */ .trust{background:var(--navy);color:#fff} .trust__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--line-lt); border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line-lt)} .trust__item{background:var(--navy);padding:30px 24px;display:flex;flex-direction:column;gap:12px} .trust__item .ic{width:42px;height:42px;border-radius:11px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center} .trust__item .ic svg{width:22px;height:22px} .trust__item strong{font-size:1.02rem;color:#fff} .trust__item span{font-size:.86rem;color:rgba(255,255,255,.62);line-height:1.45} /* ========================= GENERIC LAYOUT HELPERS ========================= */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,84px);align-items:center} .split--wideL{grid-template-columns:1.05fr .95fr} .sec-head{max-width:720px;margin-bottom:clamp(38px,5vw,58px)} .sec-head.center{margin-inline:auto;text-align:center} .sec-head p{margin-top:16px} .values{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none} .values li{padding:9px 16px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line); font-size:.9rem;font-weight:700;color:var(--navy)} .values li b{color:var(--gold-deep)} .checklist{list-style:none;display:grid;gap:12px 24px;margin:24px 0 30px} .checklist.two{grid-template-columns:1fr 1fr} .checklist li{display:flex;align-items:flex-start;gap:10px;font-weight:500} .checklist li svg{width:19px;height:19px;color:var(--gold-deep);flex-shrink:0;margin-top:3px} /* cards */ .cardgrid{display:grid;gap:20px} .cardgrid.c3{grid-template-columns:repeat(3,1fr)} .cardgrid.c4{grid-template-columns:repeat(4,1fr)} .fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:30px; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} .fcard:hover{transform:translateY(-5px);box-shadow:var(--sh-card);border-color:transparent} .fcard .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,var(--navy),var(--midnight)); color:var(--gold);display:grid;place-items:center;margin-bottom:18px} .fcard .ic svg{width:26px;height:26px} .fcard h4{margin-bottom:10px} .fcard p{font-size:var(--fs-sm);color:var(--ink-soft)} /* dark academics */ .dark{background:var(--midnight);color:#fff;position:relative;overflow:hidden} .dark::before{content:"";position:absolute;top:-25%;right:-8%;width:520px;height:520px; background:radial-gradient(circle,rgba(246,188,62,.15),transparent 68%);pointer-events:none} .dark h2{color:#fff} .dark .lead{color:rgba(255,255,255,.72)} .subjects{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .subj{padding:22px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line-lt); transition:background .3s,transform .3s var(--ease)} .subj:hover{background:rgba(246,188,62,.12);transform:translateY(-4px)} .subj .ic{color:var(--gold);margin-bottom:12px} .subj .ic svg{width:24px;height:24px} .subj strong{display:block;color:#fff;font-weight:600;margin-bottom:3px} .subj span{font-size:.82rem;color:rgba(255,255,255,.55)} /* whole child petals */ .petals{display:grid;grid-template-columns:1fr 1fr;gap:16px} .petal{padding:24px;border-radius:18px;background:#fff;border:1px solid var(--line)} .petal .ic{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;margin-bottom:12px} .petal .ic svg{width:22px;height:22px} .petal strong{display:block;color:var(--navy);font-weight:700;margin-bottom:5px;font-size:1.05rem} .petal span{font-size:.86rem;color:var(--ink-soft);line-height:1.5} /* chips */ .chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .chips li{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:var(--r-pill); background:rgba(255,255,255,.05);border:1px solid var(--line-lt);font-size:.88rem;font-weight:600} .chips svg{width:15px;height:15px;color:var(--gold)} /* student life mosaic */ .mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:16px} .cell{border-radius:var(--r-img);position:relative;overflow:hidden} .cell.tall{grid-row:span 2} .cell.wide{grid-column:span 2} .cell .lbl{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;font-weight:700;font-size:1.05rem;text-shadow:0 2px 12px rgba(0,0,0,.4)} .cell .lbl span{display:block;font-size:.76rem;font-weight:500;color:rgba(255,255,255,.72);text-shadow:none} /* steps */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:s} .step{position:relative;padding:28px 22px;border-radius:var(--r-card);background:#fff;border:1px solid var(--line)} .step::before{counter-increment:s;content:counter(s);font-family:"Manrope",sans-serif;font-weight:800; font-size:2.4rem;color:var(--gold);line-height:1;display:block;margin-bottom:14px} .step h4{font-size:1.1rem;margin-bottom:8px} .step p{font-size:.88rem;color:var(--ink-soft)} /* accordion */ .acc{border-top:1px solid var(--line)} .acc__item{border-bottom:1px solid var(--line)} .acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:22px 4px;font-weight:600;font-size:1.08rem;color:var(--navy);text-align:left} .acc__q .pm{width:26px;height:26px;flex-shrink:0;position:relative} .acc__q .pm::before,.acc__q .pm::after{content:"";position:absolute;top:50%;left:50%;background:var(--gold-deep);transition:.3s} .acc__q .pm::before{width:14px;height:2px;transform:translate(-50%,-50%)} .acc__q .pm::after{width:2px;height:14px;transform:translate(-50%,-50%)} .acc__item.open .pm::after{transform:translate(-50%,-50%) scaleY(0)} .acc__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)} .acc__a p{padding:0 4px 22px;color:var(--ink-soft);font-size:.98rem} /* testimonials */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:30px} .tcard .quote{font-size:1.02rem;line-height:1.6;color:var(--ink);margin-bottom:20px;font-weight:500} .tcard .who{display:flex;align-items:center;gap:12px} .tcard .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--navy),var(--midnight));color:var(--gold);display:grid;place-items:center;font-weight:700} .tcard .who strong{display:block;color:var(--navy);font-size:.95rem} .tcard .who span{font-size:.82rem;color:var(--ink-soft)} .tnote{font-size:.8rem;color:var(--gold-deep);margin-top:18px;font-weight:600} /* forms */ .formwrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,4vw,44px);box-shadow:var(--sh-card)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px} .field label{font-weight:600;font-size:.9rem;color:var(--navy)} .field label .req{color:var(--gold-deep)} .field input,.field select,.field textarea{font-family:inherit;font-size:1rem;padding:13px 15px; border:1.5px solid var(--line);border-radius:var(--r-input);background:var(--cream);color:var(--ink);transition:border-color .2s,background .2s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-blue);background:#fff} .field textarea{resize:vertical;min-height:110px} .field .err{font-size:.8rem;color:#b4432f;display:none} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0553f;background:#fdf4f2} .field.invalid .err{display:block} .form-note{font-size:.82rem;color:var(--ink-soft);margin-top:8px} .form-ok{display:none;text-align:center;padding:20px} .form-ok.show{display:block;animation:fadeUp .4s var(--ease)} .form-ok .ic{width:64px;height:64px;border-radius:50%;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;margin:0 auto 18px} .form-ok .ic svg{width:32px;height:32px} /* CTA band */ .ctaband{background:var(--midnight);color:#fff;position:relative;overflow:hidden} .ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0%,rgba(246,188,62,.18),transparent 60%)} .ctaband__in{position:relative;text-align:center;max-width:720px;margin-inline:auto} .ctaband h2{color:#fff;margin-bottom:18px} .ctaband h2 em{font-style:normal;font-family:"Manrope",sans-serif;font-weight:800;color:var(--gold)} .ctaband p{margin:0 auto 32px;color:rgba(255,255,255,.74);max-width:52ch} .ctaband__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* contact rows */ .cinfo{list-style:none;display:grid;gap:18px} .cinfo li{display:flex;gap:14px;align-items:flex-start} .cinfo .ic{width:46px;height:46px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;flex-shrink:0} .cinfo .ic svg{width:22px;height:22px} .cinfo strong{display:block;color:var(--navy);font-size:.85rem;letter-spacing:.04em;margin-bottom:3px} .cinfo a,.cinfo span{color:var(--ink-soft)} /* ========================= FOOTER ========================= */ .footer{background:var(--navy);color:rgba(255,255,255,.7);padding-block:clamp(54px,7vw,84px) 0} .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;border-bottom:1px solid var(--line-lt)} .footer img{height:58px;margin-bottom:18px} .footer__about{font-size:.92rem;line-height:1.6;max-width:34ch} .footer h5{color:#fff;font-size:.78rem;letter-spacing:.1em;font-weight:700;margin-bottom:18px} .footer ul{list-style:none;display:flex;flex-direction:column;gap:11px} .footer ul a{font-size:.94rem;transition:color .2s} .footer ul a:hover{color:var(--gold)} .footer__c li{display:flex;gap:11px;font-size:.94rem;line-height:1.5;margin-bottom:12px} .footer__c svg{width:17px;height:17px;color:var(--gold);flex-shrink:0;margin-top:3px} .footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:24px;font-size:.85rem} .footer__bottom nav{display:flex;gap:22px} .footer__bottom a:hover{color:var(--gold)} .socials{display:flex;gap:10px} .socials a{width:40px;height:40px;border-radius:11px;border:1px solid var(--line-lt);display:grid;place-items:center;transition:.25s} .socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--midnight)} .socials svg{width:18px;height:18px} /* reveal */ [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} [data-reveal].in{opacity:1;transform:none} /* ========================= RESPONSIVE ========================= */ @media(max-width:1000px){ .cardgrid.c4{grid-template-columns:repeat(2,1fr)} .subjects{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:1fr 1fr} .tgrid{grid-template-columns:1fr} .overlay__body{grid-template-columns:1fr;align-content:center;gap:24px} .ov-sub{display:none} } @media(max-width:860px){ .split,.split--wideL{grid-template-columns:1fr} .journey__grid{grid-template-columns:1fr} .path{min-height:340px} .trust__grid{grid-template-columns:1fr 1fr} .cardgrid.c3{grid-template-columns:1fr 1fr} .checklist.two{grid-template-columns:1fr} .petals{grid-template-columns:1fr 1fr} .footer__grid{grid-template-columns:1fr 1fr} .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:160px} .frow{grid-template-columns:1fr} .topbar .btn-onDark{display:none} } @media(max-width:560px){ .cardgrid.c3,.cardgrid.c4,.subjects,.trust__grid,.footer__grid,.petals{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .mosaic{grid-template-columns:1fr;grid-auto-rows:200px} .cell.wide,.cell.tall{grid-column:span 1;grid-row:span 1} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} [data-reveal]{opacity:1;transform:none} .hero__cue span svg{animation:none} } /* ===================== VELUNO-STYLE NAV (light bar) ===================== */ .topbar,.topbar.solid{position:fixed;inset:0 0 auto 0;z-index:120;background:var(--ivory); border-bottom:1px solid var(--line);backdrop-filter:none;transition:box-shadow .3s var(--ease)} .topbar.solid{box-shadow:0 8px 26px -20px rgba(24,43,58,.45)} .topbar__in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px; max-width:var(--container);margin-inline:auto; padding-block:11px;padding-inline:clamp(20px,5vw,56px)} .topbar.solid .topbar__in{padding-block:11px} .logo img,.topbar.solid .logo img{height:46px;width:auto} .nav-links{display:flex;justify-content:center;gap:clamp(14px,2.1vw,34px)} .nav-links a{color:var(--ink);font-weight:500;font-size:.98rem;white-space:nowrap;position:relative;padding:6px 2px;transition:color .2s} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brand-blue);transition:width .25s var(--ease)} .nav-links a:hover{color:var(--brand-blue)} .nav-links a:hover::after{width:100%} .topbar__right{display:flex;align-items:center;gap:10px;justify-content:flex-end} .search{display:flex;align-items:center;gap:8px;background:var(--ivory);border-radius:var(--r-pill); padding:9px 15px;color:var(--ink-soft);min-width:168px} .search svg{width:16px;height:16px;flex-shrink:0} .search input{border:none;background:none;outline:none;font-family:inherit;font-size:.9rem;color:var(--ink);width:100%} .search input::placeholder{color:var(--ink-soft)} .icircle{width:42px;height:42px;border-radius:50%;background:var(--ivory);display:grid;place-items:center;color:var(--ink);transition:.2s} .icircle svg{width:18px;height:18px} .icircle:hover{background:var(--brand-blue);color:#fff} .apply-badge{width:44px;height:44px;border-radius:50%;background:var(--brand-blue);color:#fff; display:grid;place-items:center;transition:.25s var(--ease);box-shadow:var(--sh-md)} .apply-badge svg{width:18px;height:18px;transition:transform .25s var(--ease)} .apply-badge:hover{background:var(--gold);color:var(--midnight);transform:translateY(-1px)} .apply-badge:hover svg{transform:translate(2px,-2px)} .menu-btn{display:none;color:var(--ink)} .menu-btn .bars span{background:var(--ink)} @media(max-width:960px){ .nav-links,.search{display:none} .menu-btn{display:inline-flex} } /* ===================== VELUNO-STYLE HERO ===================== */ .vhero{padding:clamp(80px,8vw,106px) clamp(14px,3.4vw,40px) clamp(30px,4vw,48px);background:var(--cream)} .vhero__frame{position:relative;max-width:1280px;margin-inline:auto} .vslides{position:relative;border-radius:clamp(20px,2vw,30px);overflow:hidden; min-height:clamp(440px,62vh,640px);box-shadow:0 44px 84px -52px rgba(24,43,58,.5)} .vslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease);z-index:1} .vslide.is-active{opacity:1;visibility:visible;z-index:2} .vslide__media{position:absolute;inset:0;z-index:0} .vslide__media::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(12,21,29,.74) 0%,rgba(12,21,29,.42) 34%,rgba(12,21,29,.06) 58%,transparent 72%), radial-gradient(80% 88% at 6% 92%,rgba(10,18,25,.62),transparent 62%), linear-gradient(0deg,rgba(12,21,29,.34),transparent 34%)} .vslide--a .vslide__media{background-image:url('../img/pages/hero-slide-1-cambridge.jpg');background-size:cover;background-position:center 42%} .vslide--b .vslide__media{background-image:url('../img/pages/hero-slide-2-nursery.jpg');background-size:cover;background-position:center 42%} .vslide--c .vslide__media{background-image:url('../img/pages/hero-slide-3-leadership.jpg');background-size:cover;background-position:center 42%} .vslide__tag{position:absolute;top:20px;left:22px;z-index:3;padding:7px 14px;border-radius:var(--r-pill); background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px); color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.02em} .vslide__content{position:absolute;left:clamp(22px,4.2vw,64px);bottom:clamp(56px,6.4vw,78px);z-index:3;max-width:min(540px,62%);color:#fff;display:flex;flex-direction:column;align-items:flex-start} .vhero__eyebrow{font-family:"Plus Jakarta Sans",sans-serif;font-size:max(.74rem,12px);font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:clamp(14px,1.6vw,20px);padding-left:26px;position:relative;line-height:1.4} .vhero__eyebrow::before{content:"";position:absolute;left:0;top:.55em;width:18px;height:1.5px;background:var(--gold)} .vhero__title{font-family:"Manrope",sans-serif;font-weight:600;color:#fff;font-size:clamp(1.95rem,1.15rem + 2.5vw,3.5rem);line-height:1.1;letter-spacing:-.028em;margin:0;max-width:15ch;text-wrap:balance;text-shadow:0 2px 26px rgba(10,18,25,.34)} .vhero__sub{margin:clamp(16px,1.8vw,22px) 0 clamp(24px,2.6vw,32px);color:rgba(255,255,255,.86);font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(.95rem,.9rem + .25vw,1.06rem);line-height:1.62;max-width:40ch;font-weight:400;text-shadow:0 1px 16px rgba(10,18,25,.3)} .vhero__btn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--navy);font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:.95rem;padding:13px 26px;min-height:48px;border-radius:var(--r-pill);transition:.25s var(--ease)} .vhero__btn svg{width:16px;height:16px;transition:transform .25s var(--ease)} .vhero__btn:hover{background:var(--brand-blue);color:#fff;transform:translateY(-2px)} .vhero__btn:hover svg{transform:translateX(3px)} .vhero__play{position:absolute;right:36%;top:44%;z-index:3;width:52px;height:52px;border-radius:50%; border:1.5px solid rgba(255,255,255,.7);background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.25s;backdrop-filter:blur(3px)} .vhero__play span{width:9px;height:9px;border-radius:50%;background:#fff;display:block} .vhero__play:hover{background:#fff} .vhero__play:hover span{background:var(--brand-blue)} .vspot{position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(78px,9vw,104px);z-index:4;display:flex;gap:14px;align-items:center; background:#fff;border-radius:20px;padding:14px;width:min(360px,72%);box-shadow:0 30px 60px -34px rgba(24,43,58,.55)} .vspot__img img{width:100%;height:100%;object-fit:cover;display:block} .vspot__img{width:96px;height:104px;border-radius:14px;flex-shrink:0;overflow:hidden;background:radial-gradient(120% 120% at 60% 30%,var(--sky),var(--brand-blue))} .vspot__body h4{font-size:1.05rem;color:var(--navy);margin:0 0 5px;letter-spacing:-.01em} .vspot__body p{font-size:.8rem;color:var(--ink-soft);line-height:1.4;margin:0 0 9px} .vspot__tag{font-size:1rem;font-weight:700;color:var(--gold-deep)} .vdots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;display:flex;gap:9px} .vdot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);border:none;padding:0;transition:.3s var(--ease);cursor:pointer} .vdot.is-active{background:#fff;width:26px;border-radius:6px} .vdot:hover{background:rgba(255,255,255,.85)} @media(max-width:900px){ .vspot,.vhero__play{display:none} } @media(max-width:900px){ .vslide__content{max-width:min(430px,84%)} } @media(max-width:760px){ /* mobile: text sits in the lower band, image stays visible above it */ .vslides{min-height:clamp(520px,80vh,620px)} .vslide__content{left:22px;right:22px;bottom:clamp(52px,8vw,66px);max-width:none} .vhero__title{max-width:15ch;font-size:clamp(1.72rem,1.05rem + 2.9vw,2.35rem);line-height:1.14} .vhero__eyebrow{letter-spacing:.12em;padding-left:22px;margin-bottom:12px} .vhero__eyebrow::before{width:14px} .vhero__sub{max-width:36ch;font-size:.95rem} .vhero__btn{width:auto} .vslide__media::after{background: linear-gradient(0deg,rgba(12,21,29,.88) 0%,rgba(12,21,29,.66) 30%,rgba(12,21,29,.28) 52%,transparent 74%)} .vslide__media{background-position:center 30%!important} } /* ===================== WHY ALIS — SCROLL-STACKED DECK ===================== */ .why{background:var(--ivory);position:relative} .why__sticky{padding-block:clamp(56px,7vw,92px); /* This block sits outside .container, so it needs the same gutter or its heading and cards run to the screen edge on mobile. Same token as .container, so the whole page keeps one left edge. */ padding-inline:clamp(20px,5vw,56px)} .why__head{max-width:700px;margin:0 auto clamp(28px,4vw,44px);text-align:center} .why__title{font-size:var(--fs-h2)} .why__cursor{color:var(--gold-deep);font-weight:300;margin-left:3px;animation:whyBlink 1.1s step-end infinite} @keyframes whyBlink{50%{opacity:0}} /* default deck = responsive grid (fallback / mobile / reduced-motion) */ .why__deck{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1120px;margin-inline:auto} .wcard{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-card); padding:24px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--sh-card)} .wcard .num{position:absolute;top:20px;right:22px;font-weight:800;font-size:1.05rem;color:var(--gold-deep);opacity:.85;letter-spacing:.02em} .wcard__cat{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep)} .wcard__intro h3{font-size:1.32rem;color:var(--navy);letter-spacing:-.01em;margin-top:5px} .wcard__line{font-size:.92rem;color:var(--ink-soft);line-height:1.5} .wcard__tags{display:flex;flex-wrap:wrap;gap:7px} .wcard__tags span{font-size:.72rem;font-weight:600;color:var(--navy);background:var(--gold-soft); border:1px solid rgba(246,188,62,.3);padding:5px 11px;border-radius:var(--r-pill)} .wcard__img img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1} .wcard__img{height:118px;border-radius:16px;overflow:hidden;position:relative; background:radial-gradient(120% 120% at 28% 0%,rgba(56,100,135,.32),transparent 55%),linear-gradient(150deg,var(--navy),var(--midnight))} .wcard__img::after{content:"";position:absolute;inset:0;background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:26px 26px;-webkit-mask-image:radial-gradient(120% 120% at 50% 20%,#000,transparent 78%);mask-image:radial-gradient(120% 120% at 50% 20%,#000,transparent 78%)} @media(max-width:900px){ .why__deck{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ .why__deck{grid-template-columns:1fr} } /* animated (pinned deck) mode — enabled by JS on capable screens */ .why.is-animated{height:360vh} .why.is-animated .why__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column; align-items:center;justify-content:center;overflow:hidden;padding-block:24px} .why.is-animated .why__head{margin-bottom:clamp(18px,3.4vh,36px)} .why.is-animated .why__deck{position:relative;display:block;max-width:none; width:min(560px,92vw);height:min(470px,60vh);margin-inline:auto} .why.is-animated .wcard{position:absolute;inset:0;height:100%;padding:28px;gap:14px; box-shadow:0 40px 70px -40px rgba(24,43,58,.5);will-change:transform,opacity;backface-visibility:hidden} .why.is-animated .wcard__img{height:auto;flex:1;min-height:100px} /* ===================== NAV DROPDOWNS (Academics / Branches) ===================== */ .nav-dd{position:relative;display:flex} .nav-dd__btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer; font-family:inherit;color:var(--ink);font-weight:500;font-size:.98rem;white-space:nowrap;padding:6px 2px;position:relative;transition:color .2s} .nav-dd__btn::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brand-blue);transition:width .25s var(--ease)} .nav-dd:hover .nav-dd__btn,.nav-dd.open .nav-dd__btn{color:var(--navy)} .nav-dd:hover .nav-dd__btn::after,.nav-dd.open .nav-dd__btn::after{width:100%} .nav-dd__chev{width:12px;height:12px;transition:transform .25s var(--ease)} .nav-dd:hover .nav-dd__chev,.nav-dd.open .nav-dd__chev{transform:rotate(180deg)} .nav-dd__panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px); min-width:214px;background:var(--cream);border:1px solid var(--line);border-radius:14px; box-shadow:0 26px 54px -30px rgba(24,43,58,.55);padding:8px;display:flex;flex-direction:column; opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:130} .nav-dd__panel::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .nav-dd:hover .nav-dd__panel,.nav-dd.open .nav-dd__panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .nav-dd__panel a{color:var(--ink);font-weight:500;font-size:.94rem;padding:9px 14px;border-radius:9px;white-space:nowrap;transition:.18s} .nav-dd__panel a::after{display:none} .nav-dd__panel a:hover{background:var(--gold-soft);color:var(--navy)} /* overlay sub-links (mobile) */ .ov-primary>li{display:flex;flex-direction:column} .ov-sublinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px} .ov-sublinks a{font-size:.98rem;font-weight:500;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.7);transform:none!important} .ov-sublinks a:hover{color:#fff} /* --- premium typography refinements --- */ body{line-height:1.68;font-weight:400;letter-spacing:-.005em} .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:.76rem} .nav-links a,.nav-dd__btn{font-family:"Plus Jakarta Sans",sans-serif;font-weight:500;letter-spacing:-.005em} .top-link{font-weight:600} .btn,.book-btn,.menu-btn,.vhero__btn{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;letter-spacing:.005em} .ov-primary>li>a{font-family:"Manrope",sans-serif;font-weight:700;letter-spacing:.005em} .vhero__title{font-family:"Manrope",sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.04} .vhero__sub{font-weight:400;line-height:1.6} .why__title{letter-spacing:-.026em} .wcard__cat,.path__kicker{text-transform:uppercase;letter-spacing:.14em;font-weight:600} .fcard h4,.wcard__intro h3,.tcard .quote{letter-spacing:-.015em} .tcard .quote{font-weight:500;line-height:1.62} .step h4{letter-spacing:-.012em} .acc__q{font-family:"Manrope",sans-serif;font-weight:600;letter-spacing:-.012em} p{line-height:1.68} /* micro-text legibility floor (never below 12px) */ .wcard__cat{font-size:.78rem} .wcard__tags span{font-size:.76rem} .vspot__body p{font-size:max(.82rem,12px)} .cell .lbl span{font-size:.78rem} .vslide__tag{font-size:max(.78rem,12px)} /* ===================== VIDEO SHOWCASE (isolated) ===================== */ .vidsec__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)} .vidcard{position:relative;border:none;padding:0;background:none;cursor:pointer;border-radius:var(--r-img); overflow:hidden;aspect-ratio:16/9;display:block;width:100%;box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .vidcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .vidcard img,.vidcard iframe{width:100%;height:100%;object-fit:cover;display:block;border:0} .vidcard__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,29,40,.18),rgba(16,29,40,.62));transition:opacity .3s} .vidcard:hover .vidcard__veil{opacity:.82} .vidcard__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%; background:rgba(255,255,255,.94);display:grid;place-items:center;transition:transform .3s var(--ease)} .vidcard__play svg{width:22px;height:22px;fill:var(--navy);margin-left:3px} .vidcard:hover .vidcard__play{transform:translate(-50%,-50%) scale(1.08)} .vidcard__cap{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;font-weight:600;font-size:.98rem;text-align:left;text-shadow:0 2px 12px rgba(0,0,0,.45)} @media(max-width:900px){ .vidsec__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto} } /* ===================== FOOTER — MATCHES REFERENCE (scoped .ftr) ===================== */ .ftr{position:relative;background:var(--ivory);color:var(--ink-soft);overflow:hidden;isolation:isolate; padding-top:clamp(48px,5.4vw,78px)} .ftr__watermark{position:absolute;left:50%;top:clamp(30px,5vw,70px);transform:translateX(-50%); width:min(880px,78vw);opacity:.028;z-index:0;pointer-events:none;filter:grayscale(1) brightness(.35)} .ftr .container{position:relative;z-index:2} /* row 1 — three columns (reference proportions) */ .ftr__grid{display:grid;grid-template-columns:minmax(280px,1.5fr) minmax(180px,.9fr) minmax(250px,1.05fr); column-gap:clamp(30px,4.6vw,80px);row-gap:clamp(30px,3.6vw,44px);align-items:start; padding-bottom:clamp(34px,4vw,52px)} .ftr__col{display:flex;flex-direction:column} .ftr__stack{margin-top:clamp(26px,3vw,38px)} .ftr__logo{height:clamp(58px,5.6vw,74px);width:auto;display:block} .ftr__about{margin-top:18px;font-size:.94rem;line-height:1.7;max-width:40ch;color:var(--ink-soft)} .ftr__h5{font-family:"Manrope",sans-serif;color:var(--navy);font-size:max(1rem,14px);font-weight:700; letter-spacing:-.01em;text-transform:none;margin:0 0 14px} .ftr__h5--follow{margin-top:clamp(24px,2.8vw,34px);margin-bottom:16px} .ftr__links{list-style:none;display:flex;flex-direction:column;gap:9px} .ftr__links a{font-size:.94rem;color:var(--ink-soft);transition:color .2s ease} .ftr__links a:hover{color:var(--gold-deep)} /* socials — flat icons, no containers (as in the reference) */ .ftr__socials{display:flex;gap:18px;align-items:center} .ftr__socials a{color:var(--navy);display:inline-flex;transition:color .2s ease,transform .2s ease} .ftr__socials svg{width:22px;height:22px} .ftr__socials a:hover{color:var(--gold-deep);transform:translateY(-2px)} /* contact + campuses */ .ftr__campuses,.ftr__contactlist{list-style:none;display:flex;flex-direction:column;gap:13px} .ftr__campuses li,.ftr__contactlist li{display:flex;gap:10px;font-size:.93rem;line-height:1.62;color:var(--ink-soft)} .ftr__ic{flex-shrink:0;width:18px;color:var(--gold-deep);margin-top:2px} .ftr__ic svg{width:16px;height:16px} .ftr__campuses b{display:block;color:var(--navy);font-weight:600;font-size:.94rem;margin-bottom:2px} .ftr__contactlist a{color:var(--ink-soft);transition:color .2s} .ftr__contactlist a:hover{color:var(--gold-deep)} .ftr__contactlist li>span>a{display:block;margin-bottom:4px} /* row 2 — Our Projects: logos sit directly on the surface, evenly spaced (reference badge row) */ .ftr__projects{border-top:1px solid var(--line);padding-block:clamp(26px,3vw,38px)} .ftr__projhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:clamp(20px,2.4vw,28px)} .ftr__projhead .ftr__h5{margin-bottom:0} .ftr__projsub{font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink-soft);margin:0;font-size:max(.9rem,13px)} .ftr__projrow{list-style:none;display:grid;grid-template-columns:repeat(9,1fr); gap:clamp(12px,2vw,30px);align-items:center;justify-items:center} .ftr__projrow li{display:flex;align-items:center;justify-content:center;width:100%; height:clamp(48px,5vw,74px);transition:transform .2s ease} .ftr__projrow img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} .ftr__projrow li:hover{transform:translateY(-2px)} /* row 3 — legal bar */ .ftr__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px; border-top:1px solid var(--line);padding-block:22px;font-size:.85rem;color:var(--ink-soft)} .ftr__copy i{font-style:normal;color:var(--gold-deep);margin-inline:6px} .ftr__legal{display:flex;gap:24px} .ftr__legal a{color:var(--ink-soft);transition:color .2s} .ftr__legal a:hover{color:var(--gold-deep)} .ftr a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px} @media(max-width:1024px){ .ftr__grid{grid-template-columns:1fr 1fr} .ftr__brand{grid-column:1/-1;max-width:620px} .ftr__projrow{grid-template-columns:repeat(5,1fr);row-gap:22px} } @media(max-width:720px){ .ftr{padding-top:40px} .ftr__watermark{width:150vw;opacity:.04} .ftr__grid{grid-template-columns:1fr;gap:30px;padding-bottom:30px} .ftr__brand{max-width:none} .ftr__stack{margin-top:26px} .ftr__projrow{grid-template-columns:repeat(3,1fr);gap:16px} .ftr__projrow li{height:52px} .ftr__bottom{padding-block:20px;gap:10px} } @media(prefers-reduced-motion:reduce){ .ftr__projrow li,.ftr__socials a{transition:none} } /* ===================== GLOBAL ALIGNMENT & RHYTHM PASS ===================== */ /* one grid-gap scale for all card grids (Watch + trust strip keep their own by design) */ .cardgrid,.subjects,.petals,.mosaic,.steps{gap:clamp(14px,1.6vw,22px)} /* consistent button treatment across the site (matches the header + hero pill language) */ .btn{min-height:46px;border-radius:var(--r-pill)} /* consistent measure for section intro copy */ .sec-head .lead{max-width:62ch} .sec-head.center .lead{margin-inline:auto} .book-btn,.menu-btn{min-height:44px} /* ===================== PARENT VOICES — EDITORIAL SOCIAL PROOF (.pv) ===================== */ .pv__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px); align-items:end;padding-bottom:clamp(26px,3vw,38px);border-bottom:1px solid var(--line)} .pv__headL h2{margin:0;max-width:14ch} .pv__headR{display:flex;flex-direction:column;gap:18px;align-items:flex-start} .pv__note{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.65;max-width:34ch} /* understated text switch — no pills */ .pv__switch{display:inline-flex;align-items:center;gap:18px} .pv__sw{background:none;border:0;padding:4px 0 8px;cursor:pointer;font-family:"Plus Jakarta Sans",sans-serif; font-weight:600;font-size:.95rem;letter-spacing:.01em;color:var(--ink-soft);position:relative; min-height:36px;transition:color .22s ease} .pv__sw::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)} .pv__sw:hover{color:var(--navy)} .pv__sw.is-active{color:var(--navy)} .pv__sw.is-active::after{transform:scaleX(1)} .pv__sep{width:1px;height:16px;background:var(--line)} /* continuous stream */ .pv__stream{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden; padding-block:clamp(30px,3.6vw,48px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .pv__track{list-style:none;display:flex;width:max-content;align-items:stretch;gap:clamp(14px,1.5vw,20px); animation:pvFlow 64s linear infinite;will-change:transform} .pv__stream:hover .pv__track,.pv__stream:focus-within .pv__track{animation-play-state:paused} @keyframes pvFlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} /* items: crisp editorial panels, not glossy cards */ .pv__item{flex:0 0 auto;width:clamp(230px,22vw,290px);background:#fff;border:1px solid var(--line); border-radius:6px;padding:clamp(20px,1.8vw,26px);display:flex;flex-direction:column;gap:16px;min-height:190px} .pv__item:nth-child(3n+2){width:clamp(200px,19vw,250px)} .pv__item:nth-child(4n+3){width:clamp(255px,25vw,320px)} .pv__stars{color:var(--gold);opacity:.32;letter-spacing:.18em;font-size:.9rem;line-height:1} .pv__lines{display:flex;flex-direction:column;gap:9px} .pv__lines i{height:9px;border-radius:2px;display:block;background:rgba(24,43,58,.075)} .pv__lines i:nth-child(1){width:100%} .pv__lines i:nth-child(2){width:88%} .pv__lines i:nth-child(3){width:56%} .pv__item:nth-child(3n+2) .pv__lines i:nth-child(3){width:72%} .pv__item:nth-child(4n+3) .pv__lines i:nth-child(2){width:96%} .pv__foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:12px} .pv__mark{font-size:max(.76rem,12px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)} .pv__who{width:56px;height:9px;border-radius:2px;background:rgba(24,43,58,.075)} .pv a:focus-visible,.pv button:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:3px} @media(max-width:860px){ .pv__head{grid-template-columns:1fr;align-items:start;gap:22px} .pv__headL h2{max-width:18ch} .pv__note{max-width:46ch} } @media(max-width:720px){ .pv__item{width:clamp(210px,66vw,260px);min-height:178px} .pv__item:nth-child(3n+2),.pv__item:nth-child(4n+3){width:clamp(210px,66vw,260px)} .pv__stream{padding-block:28px} } @media(prefers-reduced-motion:reduce){ .pv__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center} .pv__stream{-webkit-mask-image:none;mask-image:none;width:auto;margin-left:0} .pv__item[aria-hidden="true"]{display:none} } /* --- pv refinements: rhythm + less repetition --- */ .pv{padding-bottom:clamp(44px,5vw,72px)} .pv__item{min-height:auto} .pv__lines{gap:10px} /* vary the shape of the stream so panels don't read as identical repeats */ .pv__item:nth-child(5n+4) .pv__lines i:nth-child(3){display:none} .pv__item:nth-child(6n+5) .pv__lines i:nth-child(2){width:74%} .pv__item:nth-child(3n+2) .pv__stars{letter-spacing:.14em} .pv__stream{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} /* ===================== ADMISSIONS — THE ROUTE (isolated .jn) ===================== */ .jn{overflow:hidden} .jn__head{max-width:640px;margin-bottom:clamp(46px,6vw,86px)} .jn__headline{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.4rem);line-height:1.08;letter-spacing:-.028em;margin:0;max-width:12ch} .jn__lead{margin:16px 0 0;color:var(--ink-soft);font-size:var(--fs-lead);line-height:1.6;max-width:44ch} /* the route: a drawn line the stops sit on */ .jn__route{position:relative;padding-top:clamp(70px,8vw,120px)} .jn__path{position:absolute;top:0;left:0;width:100%;height:clamp(70px,8vw,120px);overflow:visible} .jn__pathBase{stroke:var(--line)} .jn__pathDraw{stroke:var(--gold);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease)} .jn__stops{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,30px);margin:0;padding:0} /* each stop rises to meet the curve — the stagger is the composition, not decoration */ .jn__stop{position:relative;padding-top:14px;opacity:0;transform:translateY(18px); transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--i) * 90ms)} .jn__stop.is-in{opacity:1;transform:translateY(var(--lift,0px))} /* --lift is computed from the actual curve at runtime (see script) */ /* the node sits on the line above each stop */ .jn__stop::before{content:"";position:absolute;top:-11px;left:0;width:7px;height:7px;border-radius:50%; background:var(--cream);border:1.5px solid var(--line);transition:.4s var(--ease);transition-delay:calc(var(--i) * 90ms)} .jn__stop.is-in::before{background:var(--gold);border-color:var(--gold)} .jn__num{display:block;font-family:"Manrope",sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1; font-size:clamp(1.7rem,1.1rem + 1.9vw,2.9rem);color:var(--navy);opacity:.13;transition:opacity .4s var(--ease)} .jn__stop.is-in .jn__num{opacity:.26} .jn__stop:hover .jn__num{opacity:.55} .jn__tick{display:block;width:26px;height:1.5px;background:var(--gold);opacity:.5;margin:16px 0 14px; transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease);transition-delay:calc(var(--i) * 90ms + 180ms)} .jn__stop.is-in .jn__tick{transform:scaleX(1)} .jn__title{font-size:clamp(1.1rem,.98rem + .5vw,1.34rem);margin:0 0 8px;letter-spacing:-.018em;line-height:1.22} .jn__copy{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.6;max-width:26ch} /* editorial weighting: the first and last stops anchor the route */ .jn__stop:first-child .jn__title,.jn__stop:last-child .jn__title{font-size:clamp(1.18rem,1rem + .68vw,1.5rem)} .jn__stop:nth-child(3) .jn__copy{max-width:22ch} .jn__end{display:flex;justify-content:flex-start;margin-top:clamp(30px,3.4vw,48px)} /* editorial CTA — a rule that redraws, not a button */ .jn__cta{display:inline-flex;align-items:center;gap:12px;font-family:"Manrope",sans-serif;font-weight:700; font-size:1.05rem;letter-spacing:-.01em;color:var(--navy);padding-bottom:10px;position:relative;min-height:44px} .jn__cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--brand-blue); transform-origin:left;transition:transform .4s var(--ease),background .3s} .jn__cta svg{width:17px;height:17px;transition:transform .35s var(--ease)} .jn__cta:hover{color:var(--gold-deep)} .jn__cta:hover::after{background:var(--gold);transform:scaleX(1.07)} .jn__cta:hover svg{transform:translateX(6px)} /* quiet brand marquee — a divider, not a feature */ .jn__marquee{margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--line);border-bottom:1px solid var(--line); overflow:hidden;padding-block:16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .jn__mtrack{display:flex;align-items:center;gap:clamp(24px,3vw,44px);width:max-content; animation:jnFlow 46s linear infinite;will-change:transform} .jn__mtrack span{font-family:"Plus Jakarta Sans",sans-serif;font-size:max(.8rem,12px);font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap} .jn__mtrack b{color:var(--gold-deep);font-size:.7rem;line-height:1} @keyframes jnFlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .jn__marquee:hover .jn__mtrack{animation-play-state:paused} /* tablet — the route folds into two ranks, keeping the rise */ @media(max-width:1024px){ .jn__stops{grid-template-columns:repeat(3,1fr);row-gap:clamp(34px,5vw,52px)} .jn__path{display:none} .jn__route{padding-top:0} .jn__stop{padding-top:0} .jn__stop.is-in{transform:none} .jn__stop::before{top:auto;bottom:calc(100% + 12px)} .jn__copy{max-width:30ch!important} } /* mobile — a vertical spine so the journey still reads as a journey */ @media(max-width:640px){ .jn__stops{grid-template-columns:1fr;gap:0;position:relative} .jn__stops::before{content:"";position:absolute;left:3px;top:10px;bottom:18px;width:1px;background:var(--line)} .jn__stop{display:grid;grid-template-columns:auto 1fr;column-gap:18px;padding:0 0 30px 26px} .jn__stop:last-child{padding-bottom:0} .jn__stop::before{top:8px;bottom:auto;left:0} .jn__num{grid-column:1;font-size:1.05rem;opacity:.32} .jn__tick{display:none} .jn__title{grid-column:2;grid-row:1;margin:0 0 6px} .jn__copy{grid-column:2;max-width:none!important} } @media(prefers-reduced-motion:reduce){ .jn__stop{opacity:1;transform:none;transition:none} .jn__stop.is-in{transform:translateY(var(--lift,0px))} .jn__tick{transform:scaleX(1);transition:none} .jn__pathDraw{transition:none;stroke-dashoffset:0} .jn__mtrack{animation:none} } /* header Book a Visit button (restored) */ .book-btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--midnight); font-weight:700;font-size:.92rem;padding:11px 20px;border-radius:var(--r-pill);white-space:nowrap; box-shadow:0 8px 20px -12px rgba(246,188,62,.7);transition:.25s var(--ease)} .book-btn svg{width:15px;height:15px;transition:transform .25s var(--ease)} .book-btn:hover{background:var(--brand-blue);color:#fff;transform:translateY(-1px)} .book-btn:hover svg{transform:translateX(3px)} @media(max-width:430px){ .menu-btn,.book-btn{padding:9px 15px;font-size:.85rem} } .book-btn,.menu-btn{min-height:44px} /* fix: column ratios as classes (inline styles overrode the mobile collapse) */ .split--formL{grid-template-columns:.85fr 1.15fr;align-items:start} .split--wideR{grid-template-columns:.9fr 1.1fr} @media(max-width:860px){ .split--formL,.split--wideR{grid-template-columns:1fr} } /* fix: grid items must be allowed to shrink; long CTAs wrap on small phones */ .cardgrid>*{min-width:0} @media(max-width:480px){ .btn{white-space:normal;text-align:center} } /* ===================== ADVISORY BOARD — coverflow (isolated .ab) ===================== */ .ab{overflow:hidden} .ab__head{max-width:660px;margin:0 auto clamp(32px,4vw,50px);text-align:center} .ab__head .eyebrow{justify-content:center} .ab__head .lead{margin-inline:auto} .ab__stage{position:relative;height:clamp(400px,56vw,540px);perspective:1700px; touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab} .ab__stage.is-drag{cursor:grabbing} .ab__card{--w:clamp(206px,25vw,306px); position:absolute;top:0;left:50%;width:var(--w);height:100%;margin-left:calc(var(--w) / -2); border-radius:clamp(16px,1.6vw,22px);overflow:hidden;background:var(--midnight); box-shadow:0 34px 66px -36px rgba(24,43,58,.6); transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease); will-change:transform;backface-visibility:hidden;transform-style:preserve-3d} .ab__card img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block} .ab__card::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 42%,rgba(16,29,40,.72) 74%,rgba(12,21,29,.94))} .ab__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,2vw,24px);color:#fff} .ab__name{font-family:"Manrope",sans-serif;font-weight:700;letter-spacing:-.018em;line-height:1.18; font-size:clamp(1.02rem,.92rem + .42vw,1.28rem);margin:0} .ab__bio{margin:8px 0 0;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.78);max-width:34ch; opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)} .ab__card.is-active .ab__bio{opacity:1;transform:none} .ab__card:not(.is-active){filter:grayscale(1)} .ab__card:not(.is-active) .ab__name{font-size:.95rem;color:rgba(255,255,255,.82)} /* controls */ .ab__ui{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(26px,3vw,38px)} .ab__count{font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-size:.9rem;font-weight:600;letter-spacing:.14em;color:var(--gold-deep);font-variant-numeric:tabular-nums} .ab__count b{color:var(--navy);font-weight:700} .ab__row{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px)} .ab__nav{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:#fff; color:var(--navy);display:grid;place-items:center;flex-shrink:0;transition:.25s var(--ease)} .ab__nav svg{width:18px;height:18px} .ab__nav:hover{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;transform:translateY(-2px)} .ab__nav[disabled]{opacity:.32;pointer-events:none} .ab__dots{display:flex;align-items:center;gap:9px;list-style:none;margin:0;padding:0} .ab__dot{width:26px;height:3px;border-radius:2px;background:var(--line);border:0;padding:0; cursor:pointer;transition:.3s var(--ease)} .ab__dot:hover{background:var(--sky)} .ab__dot.is-active{background:var(--gold);width:44px} .ab__hint{font-family:"Plus Jakarta Sans",sans-serif;font-size:.72rem;font-weight:600; letter-spacing:.19em;text-transform:uppercase;color:var(--ink-soft)} .ab__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media(max-width:640px){ .ab__dots{gap:6px} .ab__dot{width:16px} .ab__dot.is-active{width:30px} .ab__nav{width:46px;height:46px} .ab__hint{font-size:.66rem;letter-spacing:.14em} } /* pre-JS: one card, not a stack of nine. advisory-board.js adds .is-ready. */ .ab__stage:not(.is-ready) .ab__card{opacity:0} .ab__stage:not(.is-ready) .ab__card:nth-child(5){opacity:1} /* ===================== VACANCIES — repeating records (isolated .vac) ===================== */ .vac__rec{border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(18px,2.2vw,26px); background:var(--cream);margin-bottom:16px} .vac__rechead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px} .vac__recno{font-family:"Manrope",sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.08em; text-transform:uppercase;color:var(--gold-deep)} .vac__del{font-family:"Plus Jakarta Sans",sans-serif;font-size:.82rem;font-weight:600;color:#b4432f; padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;transition:.2s} .vac__del:hover{background:#fdf4f2;border-color:#c0553f} .vac__add{display:inline-flex;align-items:center;gap:8px;font-family:"Plus Jakarta Sans",sans-serif; font-weight:600;font-size:.9rem;color:var(--navy);padding:11px 18px;border-radius:var(--r-pill); border:1.5px dashed var(--line);background:#fff;transition:.2s var(--ease)} .vac__add:hover{border-color:var(--gold);border-style:solid;background:var(--gold-soft)} .vac__add svg{width:15px;height:15px} .vac__grp{margin-bottom:clamp(30px,4vw,44px)} .vac__grp h3{font-size:var(--fs-h4);margin-bottom:6px} .vac__grp>p{font-size:.92rem;color:var(--ink-soft);margin-bottom:20px} @media(max-width:560px){ .vac__rechead{flex-direction:column;align-items:flex-start;gap:10px} } /* ===================== RESPONSIVE HARDENING (append-only, no visual change) ===================== */ /* Native selects size to their widest