/* ============================================================ Start Right Up — shared component styles Direction 1 "The Planner", Blue Bar header. Client-approved 09 Sep 2026. Loaded by all 45 addresses, byte-identical in every language. ============================================================ */ *,*::before,*::after{box-sizing:border-box} body{ margin:0; font-family:var(--font); font-size:var(--size-body); line-height:var(--lh-body); color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; } /* Headings carry weight as well as size. Everything used to sit at 600, which left size doing the ranking alone — the reason the page read as flat. The working contrast is 300 against 700; h3 keeps 600 because it ranks below a heading and above body, and needs a step on both sides. */ h1,h2{margin:0 0 .5em;line-height:var(--lh-tight);color:var(--navy);font-weight:var(--fw-bold);text-wrap:balance} h3{margin:0 0 .5em;line-height:1.25;color:var(--navy);font-weight:var(--fw-semi);text-wrap:balance;font-size:var(--fs-h3)} /* Unwritten copy, marked as unwritten. Italic is the whole job here, so it is Latin only — see tokens.css for why Thai and Chinese get a rule instead. */ .todo{font-style:italic;color:var(--muted);opacity:.9} html[lang|="th"] .todo,html[lang|="zh"] .todo{ font-style:normal;font-weight:var(--fw-body); border-bottom:1px dotted var(--line);padding-bottom:.05em} /* --muted on navy is 2.1:1. The placeholder has to stay readable wherever it lands, so it takes the ground's own muted tone rather than one fixed grey. */ .section--navy .todo,.stat .todo,.foot .todo,.hero .todo{color:var(--on-navy-muted)} html[lang|="th"] .section--navy .todo,html[lang|="zh"] .section--navy .todo, html[lang|="th"] .stat .todo,html[lang|="zh"] .stat .todo, html[lang|="th"] .foot .todo,html[lang|="zh"] .foot .todo{border-bottom-color:rgba(255,255,255,.35)} /* A stat is a figure. Until there is one, the slot says so at note size instead of hyphenating "copywriting" across two lines at display size. */ .stat b .todo{font-size:var(--fs-sm);font-weight:var(--fw-body);letter-spacing:0; line-height:1.4;display:inline-block} /* Tracking tightens as type grows, and relaxes as it shrinks. */ .hero h1{letter-spacing:-.035em} .hero--stage h1,.founder__name{letter-spacing:-.025em} .sec-hd h2,.stages__hd h2,.svc__hd h2,.close h2{letter-spacing:-.022em} .stat b{letter-spacing:-.025em} h3{letter-spacing:-.008em} .ti__tx,.jump__tx,.field label{letter-spacing:.005em} p{margin:0 0 1rem;max-width:64ch} a{color:var(--action);text-underline-offset:.15em} ul{margin:0;padding:0;list-style:none} img{max-width:100%;display:block} /* Browser surfaces — these ship with defaults that belong to no design system */ ::selection{background:var(--navy);color:#fff} body{caret-color:var(--action);scrollbar-color:var(--line) var(--mist)} :focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:3px} /* On a navy ground the navy ring vanishes (measured 1:1, 01/10). Every dark ground gets the white ring; the white language menu inside the bar gets navy back. contrast-states.mjs checks the ring itself, at 3:1. */ .nav :focus-visible,.hero :focus-visible,.section--navy :focus-visible, .foot :focus-visible,.lp-mark :focus-visible,.lp-copyright :focus-visible{outline-color:#fff} .nav .langmenu :focus-visible{outline-color:var(--navy)} .skip{position:absolute;left:1rem;top:-3rem;background:#fff;color:var(--navy);padding:.5rem 1rem;border-radius:6px;z-index:100;transition:top .15s} .skip:focus{top:1rem} html{scroll-behavior:smooth} /* Every jump target clears the sticky bar instead of hiding beneath it. */ [id]{scroll-margin-top:5.5rem} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:600;padding:.72em 1.4em;border-radius:10px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform 130ms var(--ease)} .btn--primary{background:var(--action);color:#fff;border-color:var(--action)} .btn--primary:hover{background:var(--action-hover);border-color:var(--action-hover)} .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .btn--ghost:hover{border-color:#fff} .on-light .btn--primary,.btn--primary.on-light{background:var(--navy);border-color:var(--navy)} .on-light .btn--primary:hover,.btn--primary.on-light:hover{background:var(--navy-lift);border-color:var(--navy-lift)} .on-light .btn--ghost{color:var(--navy);border-color:var(--line)} .on-light .btn--ghost:hover{border-color:var(--navy)} .btn[aria-disabled="true"]{opacity:.5;pointer-events:none} /* Press feedback fires on pointer-down and is deliberately faster in than out: the acknowledgement must feel instant, the release can relax. */ .btn:active{transform:scale(.975);transition-duration:60ms} .nav__cta:active,.nav__links a:active,.langmenu a:active,.drawer a:active, .fcard:active,.jump a:active,.nextstage a:active,.foot a:active{transform:scale(.98)} .nav__cta,.nav__links a,.langmenu a,.drawer a,.jump a,.nextstage a,.foot a{ transition:transform 90ms var(--ease),color .18s,background .18s} .fcard:active{box-shadow:var(--sh-1)} .jump a:active .jump__ic{background:var(--navy);color:#fff} /* ---------- Navigation (Blue Bar) ---------- */ .nav{background:var(--navy);position:sticky;top:0;z-index:40; transition:box-shadow .25s var(--ease),background-color .25s var(--ease)} .nav[data-scrolled="true"]{ background:rgba(2,46,100,.94); -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); box-shadow:0 6px 24px rgba(2,20,45,.22)} .nav__in{max-width:var(--wrap-nav);margin-inline:auto;padding:.9rem var(--gutter);display:flex;align-items:center;gap:1rem} .brand{color:#fff;font-weight:700;font-size:1.28rem;text-decoration:none;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:.55rem} .brand__logo{height:1.55em;width:auto;background:#fff;border-radius:5px;display:block;flex:0 0 auto} .brand b{color:#fff} /* Links sit against the brand. The slack lives between the two groups, which is what stops the bar reading as an empty left half and a crowded right one — and that repositioning is what actually fixes the crowding, at zero width cost. The gap then goes 0.75rem -> 1rem, which is as far as 1280 affords: 1.15rem measured out at 1266px for English, leaving 14px, too thin to survive a fallback face. Brand separation is left to the bar's own 1rem gap; an extra margin here bought nothing and cost 8px. */ .nav__links{display:flex;gap:.9rem} /* 1rem → .9rem on 11/10 to fit the Pay link; measured with scripts/measure-nav.mjs */ .nav__util{display:flex;align-items:center;gap:1rem;margin-left:auto} /* nowrap on purpose: without it flex compresses a label onto two lines and the bar looks like it fits while it does not. Overflow must be visible to be caught. */ .nav__links a{color:var(--on-navy-muted);text-decoration:none;font-size:var(--fs-xs);font-weight:500;white-space:nowrap} .nav__links li{flex:0 0 auto} .nav__links a:hover,.nav__links a[aria-current="page"]{color:#fff} /* Journey Planner menu (11/10 evening): opens on hover and on keyboard focus, from the link it belongs to, the same white card as the language menu. A bridge keeps it open while the pointer crosses the gap. No JS, so it cannot break anything else. */ .nav__dd{position:relative} .ddmenu{position:absolute;top:calc(100% + .9rem);left:-.7rem;min-width:13rem;margin:0;padding:.35rem;list-style:none;background:#fff;border-radius:10px;box-shadow:var(--sh-3);z-index:50; opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s var(--ease),transform .2s var(--ease),visibility 0s linear .2s} .ddmenu::before{content:"";position:absolute;left:0;right:0;top:-1rem;height:1rem} .nav__dd:hover .ddmenu,.nav__dd:focus-within .ddmenu{opacity:1;visibility:visible;transform:none;transition:opacity .16s var(--ease),transform .2s var(--ease),visibility 0s} .nav__links .ddmenu a{display:flex;align-items:center;min-height:40px;padding:0 .7rem;border-radius:7px;color:var(--ink);font-size:var(--fs-ctrl)} .nav__links .ddmenu a:hover{background:var(--mist);color:var(--ink)} .nav__links .ddmenu a[aria-current="page"]{color:var(--navy);font-weight:600} .nav__dd:has(.ddmenu a[aria-current="page"])>a{color:#fff} .nav__pay{color:var(--on-navy-muted);text-decoration:none;font-size:var(--fs-xs);font-weight:500;white-space:nowrap} .nav__pay:hover,.nav__pay[aria-current="page"]{color:#fff} @media (prefers-reduced-motion:reduce){.ddmenu{transform:none;transition:opacity .12s linear,visibility 0s linear .12s}} /* ---------- Language toggle ---------- */ /* Fixed width, not intrinsic. "EN", "ไทย" and "中文" are three different widths, and a control that resized between languages would move every element after it — the one thing the layout-parity guarantee forbids. */ .nav__lang{position:relative} .langbtn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem; width:5.15rem;height:34px;padding:0 .4rem;box-sizing:border-box; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:8px; color:var(--on-navy-muted);font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.02em; cursor:pointer;position:relative; transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)} /* 34px is the drawn height the 68px bar affords; 44px is the target a finger needs. The difference is a pseudo-element, so the hit area grows and the bar's measured geometry does not — the same trick the three links used. */ .langbtn::before{content:"";position:absolute;inset:-6px -2px} .langbtn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff} .langbtn[aria-expanded="true"]{background:#fff;border-color:#fff;color:var(--navy)} .langbtn__globe{width:14px;height:14px;flex:0 0 auto;opacity:.85} .langbtn__cur{flex:0 0 auto} .langbtn__chev{width:12px;height:12px;flex:0 0 auto;opacity:.7; transition:transform .2s var(--ease)} .langbtn[aria-expanded="true"] .langbtn__chev{transform:rotate(180deg)} .langmenu{position:absolute;top:calc(100% + .5rem);right:0;min-width:9.5rem; background:#fff;border-radius:10px;box-shadow:var(--sh-3);padding:.35rem; list-style:none;margin:0;z-index:50} .langmenu[hidden]{display:none} .langmenu a{display:flex;align-items:center;min-height:40px;padding:0 .7rem; color:var(--ink);text-decoration:none;font-size:var(--fs-ctrl);font-weight:500;border-radius:7px; white-space:nowrap} .langmenu a:hover{background:var(--mist)} .langmenu a[aria-current="true"]{font-weight:600;color:var(--navy)} /* The active language is marked by a rule, not a tick glyph: a Unicode check mark is not an icon system, and the mark has to read in all three scripts. */ .langmenu a[aria-current="true"]::before{content:"";width:2px;height:1em; background:var(--accent);border-radius:1px;margin-right:.55rem;margin-left:-.2rem} .langmenu a:not([aria-current="true"])::before{content:"";width:2px;height:1em; margin-right:.55rem;margin-left:-.2rem} .nav__cta{background:#fff;color:var(--navy);padding:.5em 1em;border-radius:9px;text-decoration:none;font-weight:600;font-size:var(--fs-ctrl);white-space:nowrap} .menu-btn{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.4);border-radius:6px;width:44px;height:44px;color:#fff;cursor:pointer} .menu-btn svg{width:22px;height:22px} /* 1280px. Re-measured 16 Sep with the language switcher actually in the markup and the full "Singapore Journey Planner" label the 27/08 decision requires ("Singapore stays in the display name"). The 14/08 decision set 1160 from a bar that had neither. With both present the requirement is: en 1238px · th 1171px · zh 993px at link 0.8125rem / gap 0.75rem / bar gap 1rem. 1160 is not reachable — the tightest legible setting tested still needs 1189px. 1280 leaves 42px of headroom. Re-run `node scripts/measure-nav.mjs` on the deploy, where IBM Plex actually loads; these numbers come from a fallback face. */ @media(max-width:1279px){ .nav__links,.nav__util{display:none} .menu-btn{display:flex;align-items:center;justify-content:center} } /* ---------- Drawer ---------- */ .drawer{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:#fff;z-index:60; transform:translateX(100%);visibility:hidden;box-shadow:var(--sh-3);padding:1.5rem 1.4rem; display:flex;flex-direction:column;gap:.1rem;overflow-y:auto;overscroll-behavior:contain; touch-action:pan-y;will-change:transform} /* Fallback only: if the script never runs, the panel still opens and closes. */ .no-js .drawer{transition:transform .28s var(--ease)} .drawer[data-open="true"]{transform:translateX(0);visibility:visible} .drawer a{color:var(--ink);text-decoration:none;font-weight:500;padding:.75rem 0;border-bottom:1px solid var(--line-soft)} .drawer a.drawer__sub{padding-left:1rem;font-weight:400;color:var(--muted)} .drawer .btn{margin-top:1rem;justify-content:center} /* `.drawer a` (0,1,1) outranks `.btn--primary` (0,1,0), so the drawer CTA was rendering ink-on-navy — about 1.1:1. Found 30/09; the contrast script never saw it because the drawer is visibility:hidden while that script measures. */ .drawer .btn--primary{color:#fff;border-bottom:0} .drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem} .drawer__top .brand{color:var(--navy)} .drawer__top .brand b{color:var(--accent)} .drawer__close{background:none;border:none;font-size:1.7rem;line-height:1;color:var(--navy);cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:10px;margin-right:-.5rem} .drawer__close:active{background:var(--mist)} .drawer__langlabel{display:flex;align-items:center;gap:.4rem;margin:1.2rem 0 .1rem; padding-top:1rem;border-top:1px solid var(--line-soft); font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .drawer__langlabel svg{width:14px;height:14px;flex:0 0 auto} .drawer__lang{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin-top:.1rem} .drawer__lang a{border:0;padding:.6rem .4rem;font-size:var(--fs-ctrl);font-weight:500;color:var(--muted);min-height:44px;display:inline-flex;align-items:center} .drawer__lang a[aria-current="true"]{font-weight:600} .drawer__lang a[aria-current="true"]{color:var(--navy);text-decoration:underline;text-underline-offset:.25em} .scrim{position:fixed;inset:0;background:rgba(2,20,45,.4);z-index:55;opacity:0;visibility:hidden;transition:opacity .2s} .scrim[data-open="true"]{opacity:1;visibility:visible} /* ---------- Hero ---------- */ .hero{background:linear-gradient(155deg,var(--navy),var(--navy-deep));color:#fff;position:relative;overflow:hidden;padding-block:5.5rem 11rem} .hero::before{content:"";position:absolute;left:-6%;top:-40%;width:52%;height:180%;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent);pointer-events:none} .hero__map{position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);width:118%;height:auto;z-index:1;pointer-events:none} .hm__world{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.14);stroke-width:.6;stroke-linejoin:round} .hm__pulse{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.4} .hm__pin-o{fill:#fff} .hm__pin-i{fill:var(--signal)} .hm__lbl{fill:rgba(255,255,255,.62);font:600 13px var(--font);letter-spacing:.06em} .hero__in{position:relative;z-index:2} .hero h1{color:#fff;font-size:var(--fs-display);font-weight:600;max-width:18ch;margin-bottom:1.4rem} .hero__lead{color:var(--on-navy-muted);font-size:1.25rem;font-weight:var(--fw-light);max-width:54ch;margin-bottom:2rem} .hero__cta{display:flex;gap:.8rem;flex-wrap:wrap} /* Stage-page hero — shorter than the homepage, and deep enough at the foot for the jump card to break the seam the way the credibility strip does on home. */ .hero--stage{padding-block:4.5rem 9rem} .hero--stage h1{font-size:var(--fs-h1);max-width:20ch} .hero--short{padding-block:3.5rem 3.5rem} /* ---------- Section jump card ---------- Sits over the hero seam. Ice's requirement: clicking a service goes to that section on the same page. This is the thing you click. */ .jump{display:flex;align-items:stretch} .jump a{flex:1;display:flex;flex-direction:column;gap:.55rem;padding:.3rem 1.2rem;text-align:center;align-items:center;text-decoration:none;position:relative;color:var(--navy)} .jump a:not(:last-child)::after{content:"";position:absolute;right:0;top:8%;height:84%;width:1px;background:var(--line-soft)} .jump__ic{width:50px;height:50px;border-radius:14px;background:var(--mist);display:grid;place-items:center;color:var(--navy);flex:0 0 auto;transition:background .18s,color .18s} .jump__ic svg{width:25px;height:25px} .jump a:hover .jump__ic{background:var(--navy);color:#fff} .jump__tx{overflow-wrap:anywhere;font-size:var(--fs-sm);line-height:1.3;color:var(--navy);font-weight:600} /* ---------- Service section ---------- Left rail carries the icon and heading, body takes the measure. Uses the full container instead of leaving the right-hand 40% empty. */ .svc{display:grid;grid-template-columns:19rem minmax(0,1fr);gap:3.5rem;align-items:start} .svc__hd{position:sticky;top:6.5rem} .svc__ic{width:46px;height:46px;border-radius:13px;background:var(--mist);border:1px solid var(--line-soft);display:grid;place-items:center;color:var(--accent);margin-bottom:1.1rem} .section--tint .svc__ic{background:#fff} .section--navy .svc__ic{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff} .svc__ic svg{width:24px;height:24px} .svc__hd h2{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.1rem);color:var(--accent);margin:0} .section--navy .svc__hd h2{color:#fff} .svc__body p{font-size:var(--fs-body);color:var(--muted);max-width:68ch} .svc__body p:last-child{margin-bottom:0} .section--navy .svc__body p{color:var(--on-navy-muted)} /* An offer, not a paragraph. Used where a section takes money directly. */ .offer{background:#fff;border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--sh-2);padding:2rem 2.2rem} .section--tint .offer{background:#fff} .offer p:last-of-type{margin-bottom:1.2rem} .offer__foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:1.2rem} @media(max-width:900px){ .hero--stage{padding-block:3.5rem 8rem} .svc{grid-template-columns:minmax(0,1fr);gap:1.5rem} .svc__hd{position:static;display:flex;align-items:center;gap:.85rem} /* icon beside its heading, as on desktop (12/10) */ .svc__ic{margin-bottom:0;flex:0 0 auto} .jump{flex-direction:column;align-items:stretch} .jump a{flex-direction:row;justify-content:flex-start;gap:.8rem;padding:.85rem .4rem;text-align:left} .jump a:not(:last-child){border-bottom:1px solid var(--line-soft)} .jump a:not(:last-child)::after{display:none} .offer{padding:1.5rem 1.4rem} } /* ---------- Credibility strip ---------- */ .seam{background:var(--white);position:relative} .panel{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .planner{background:#fff;border:1px solid var(--line-soft);border-radius:18px;box-shadow:var(--sh-3);margin-top:-7rem;position:relative;z-index:3;padding:2.1rem 1rem} .trust{display:flex;align-items:stretch} .ti{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;padding:.3rem 1.2rem;position:relative} .ti:not(:last-child)::after{content:"";position:absolute;right:0;top:8%;height:84%;width:1px;background:var(--line-soft)} .ti__ic{width:50px;height:50px;border-radius:14px;background:var(--mist);display:grid;place-items:center;color:var(--navy);flex:0 0 auto} .ti__ic svg{width:25px;height:25px} .ti__tx{overflow-wrap:anywhere;font-size:var(--fs-sm);line-height:1.3;color:var(--navy);font-weight:600} /* ---------- Generic section ---------- */ .section{padding-block:5rem} .section--tint{background:var(--mist)} .section--navy{background:var(--navy);color:#fff} .section--navy h2,.section--navy h3{color:#fff} .section--navy p{color:var(--on-navy-muted)} .sec-hd{max-width:48ch;margin-bottom:2.8rem} .sec-hd h2,.sec-hd .ty-h{font-size:var(--fs-h2);color:var(--accent)} .sec-hd .ty-h{letter-spacing:-.022em} /* 25/10b: the thank-you message is the page's only heading, so it is its h1, at the h2 size */ .section--navy .sec-hd h2{color:#fff} .sec-hd p{color:var(--muted);font-size:var(--fs-lead);font-weight:var(--fw-light)} .section--navy .sec-hd p{color:var(--on-navy-muted)} /* ---------- People ---------- */ .people{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;max-width:820px} .person{display:flex;gap:1.2rem;align-items:flex-start} .person__ph{width:92px;height:92px;border-radius:16px;background:#fff;border:1px dashed var(--line);flex:0 0 auto;display:grid;place-items:center;color:var(--muted);font-size:.68rem;text-align:center;padding:.4rem;line-height:1.3} .person h3{margin:0 0 .25rem} .person p{font-size:var(--fs-sm);color:var(--muted);margin:0} /* ---------- Stage cards ---------- */ .stages{padding-block:5rem} .stages__hd{max-width:48ch;margin-bottom:2.8rem} .stages__hd h2{font-size:var(--fs-h2);color:var(--accent)} .stages__hd p{color:var(--muted);font-size:var(--fs-lead);font-weight:var(--fw-light)} .flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;align-items:stretch} .fcard{position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:1.9rem 1.7rem 1.7rem;box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease);display:flex;flex-direction:column} .fcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)} .fcard__ic{width:46px;height:46px;border-radius:13px;background:var(--mist);border:1px solid var(--line-soft);display:grid;place-items:center;color:var(--accent);margin-bottom:1.1rem} .fcard__ic svg{width:24px;height:24px} .fcard h3{margin:0 0 .5rem} .fcard p{font-size:var(--fs-sm);color:var(--muted);margin:0 0 1.1rem;flex:1} .fcard a{font-weight:600;font-size:var(--fs-sm);color:var(--navy);text-decoration:none} .fcard a:hover{text-decoration:underline} /* ---------- Stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem} .stat b{display:block;overflow-wrap:anywhere;font-size:clamp(2rem,1.3rem + 2vw,2.8rem);font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stat span{display:block;margin-top:.5rem;font-size:var(--fs-sm);color:var(--on-navy-muted)} /* ---------- Steps ---------- */ .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem} .step__n{width:44px;height:44px;border-radius:50%;background:var(--white);border:2px solid var(--navy);color:var(--navy);font-weight:700;display:grid;place-items:center;margin-bottom:1rem;font-variant-numeric:tabular-nums} .section--tint .step__n{background:var(--mist)} .step h3{margin:0 0 .4rem} .step p{font-size:var(--fs-sm);color:var(--muted);margin:0} /* ---------- Comparison table ---------- Never collapses into stacked cards. The comparison is the point. Horizontal scroller, first column pinned. internal-spec.md §6. */ .compare__scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:16px; scrollbar-color:var(--line) var(--mist);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .compare__scroll:focus-visible{outline:2px solid var(--navy);outline-offset:3px} /* The fade says "there is more this way" without a hard divider. */ .compare__scroll[data-more="true"]{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)} .ctable{border-collapse:collapse;width:100%;min-width:660px;background:#fff} .ctable th,.ctable td{padding:1rem 1.4rem;border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm);vertical-align:middle;text-align:left;position:relative} .ctable td:not(:first-child),.ctable thead th:not(:first-child){text-align:center} .ctable thead th{background:var(--navy);color:#fff;font-weight:600;position:sticky;top:0} .ctable th:first-child,.ctable td:first-child{position:sticky;left:0;background:#fff;z-index:2;box-shadow:1px 0 0 var(--line-soft);font-weight:600;color:var(--ink)} .ctable thead th:first-child{background:var(--navy);color:#fff;z-index:3} .ctable td.us{background:var(--cell-us);font-weight:600} /* 11/10: Ice's tables. Her own column subtitles, the Start Right Up column carried by colour and a drawn tick (decoration, aria-hidden), and the homepage's closing "The Difference" row. */ .ctable thead th small{display:block;font-size:.78rem;font-weight:400;color:#C9D6E8;margin-top:.2rem} .ctable thead th.us{background:var(--action)} .ctable thead th.us small{color:#fff} .ctable td.us{color:var(--navy)} .ctable td.us .tick{display:inline-block;width:1.15rem;height:1.15rem;margin-right:.5rem;vertical-align:-.2rem;border-radius:50%;background:var(--tick); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/contain no-repeat} .ctable td.us .tick::after{content:"";display:block;width:100%;height:100%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.2 3L17 8.5'/%3E%3C/svg%3E") center/70% no-repeat} .ctable--4{min-width:860px} .ctable--4 td.us,.ctable--3 td.us{text-align:left} .ctable tfoot th,.ctable tfoot td{background:var(--mist);border-bottom:0;font-size:var(--fs-sm)} .ctable tfoot th:first-child{background:var(--mist)} .ctable tfoot td.us{background:var(--cell-us);font-weight:700;color:var(--navy);text-align:left} .ctable tfoot td[colspan]{text-align:left;color:var(--ink)} .tick{color:var(--tick);font-weight:700} .cross{color:var(--muted)} .compare__hint{font-size:.82rem;color:var(--muted);margin-top:.8rem} /* ---------- Placeholders ---------- */ .video-ph{aspect-ratio:16/9;border-radius:16px;background:#fff;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);text-align:center;padding:1.5rem} .section--tint .video-ph{background:var(--mist)} .survey-ph{border:1px dashed var(--line);border-radius:16px;background:#fff;padding:2.5rem;text-align:center;color:var(--muted)} .section--tint .survey-ph{background:var(--mist)} .map-ph{aspect-ratio:16/7;border-radius:16px;background:var(--mist);border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);text-align:center;padding:1.5rem} /* ---------- Testimonials ---------- */ .quotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem} .quote{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:1.6rem;box-shadow:var(--sh-1);display:flex;flex-direction:column;margin:0} .quote .mark{color:var(--accent);font-size:1.7rem;line-height:.5;font-weight:700;margin-bottom:.9rem} .quote p{font-size:var(--fs-sm);color:var(--ink);flex:1;margin:0 0 1rem} .quote cite{font-style:normal;font-weight:600;color:var(--navy);font-size:var(--fs-sm)} /* ---------- Instagram ---------- */ /* ---------- Instagram, option B "profile mirror" (01/10/2026) ---------- Reads as the account itself: who it is on the left, the grid on the right, 4:5 tiles and hairline gaps the way Instagram draws a profile. On a phone the account row sits above and the grid runs edge to edge, as in the app. */ .igp{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:4rem;align-items:start} .igp__side{display:flex;flex-direction:column;gap:1.75rem} .igp__side .sec-hd{margin:0} .igp__acct{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av h" "f f";gap:1rem 1rem;align-items:center; padding:1.1rem;background:#fff;border:1px solid var(--line-soft);border-radius:14px} .igp__av{grid-area:av;width:64px;height:64px;border-radius:999px;object-fit:contain;background:#fff;padding:8px;box-sizing:border-box; box-shadow:0 0 0 1px var(--line)} .igp__h{grid-area:h;font-weight:var(--fw-semi);font-size:1.0625rem;color:var(--navy);overflow-wrap:anywhere} .igp__follow{grid-area:f;justify-self:start} .igp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden} .igp__t{aspect-ratio:4/5;display:grid;place-items:center;background:#fff;color:var(--muted);font-size:var(--fs-xs);text-align:center} /* All tiles white with hairline gaps: an alternating grey tile took the "to fill" marker to 4.32:1 (caught by contrast-states, 01/10). */ @media(max-width:900px){ .igp{grid-template-columns:minmax(0,1fr);gap:1.5rem} .igp__acct{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"av h f";padding:0;background:none;border:0} .igp__av{width:48px;height:48px;padding:6px} .igp__follow{justify-self:end} .igp__grid{gap:2px;border-radius:0;border-inline:0;margin-inline:calc(-1 * var(--gutter))} } /* A small phone has no room for the button beside the handle: it drops below and spans the row, which also makes it the easier target. */ @media(max-width:520px){ .igp__acct{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"av h" "f f"} .igp__follow{justify-self:stretch;justify-content:center} } /* ---------- Prose block (stage page sections) ---------- */ .prose{max-width:68ch} .prose p{font-size:1rem;color:var(--muted)} .prose p:last-child{margin-bottom:0} .meta-line{display:inline-flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:var(--fs-sm);font-weight:600;color:var(--navy);background:var(--mist);border:1px solid var(--line-soft);border-radius:999px;padding:.45rem 1rem;margin-top:.6rem} .section--tint .meta-line{background:#fff} /* ---------- Founder block ---------- Portrait and bio side by side, sides alternating down the page so two founders do not read as two identical cards. */ .founder{display:grid;grid-template-columns:22rem minmax(0,1fr);gap:3.5rem;align-items:start} .founder--flip{grid-template-columns:minmax(0,1fr) 22rem} .founder--flip .founder__ph{order:2} /* 25/10b: the founders' own accounts under their names */ .founder__social{list-style:none;margin:.2rem 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;font-size:var(--fs-sm)} .founder__social a{display:inline-block;padding:.3rem 0;color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.25em} .founder__social a:hover{text-decoration-color:currentColor} .founder__ph{aspect-ratio:5/6;border-radius:18px;background:var(--mist);border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);font-size:.8rem;text-align:center;padding:1rem;line-height:1.4;box-shadow:var(--sh-1)} .section--tint .founder__ph{background:#fff} .founder__name{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.2rem);color:var(--accent);margin:0 0 .3rem} .founder__role{font-size:1rem;font-weight:600;color:var(--navy);margin:0 0 1.4rem} .founder__body p{font-size:var(--fs-body);color:var(--muted);max-width:68ch} .founder__body p:last-child{margin-bottom:0} /* ---------- Narrative lead ---------- The story section. One oversized opening line, then the body at a real reading measure. Emphasis from size, never from a gradient or an eyebrow. */ .narrative{max-width:72ch} .narrative p:first-of-type{font-size:clamp(1.2rem,1rem + .7vw,1.45rem);font-weight:var(--fw-light);line-height:1.5;color:var(--ink)} .narrative p{font-size:var(--fs-body);color:var(--muted)} .narrative p:last-child{margin-bottom:0} /* ---------- Pull statement ---------- Mission. A short line that earns the whole band. */ .pull{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.3rem);font-weight:var(--fw-light);line-height:1.35;letter-spacing:-.02em;max-width:24ch;margin:0} .section--navy .pull{color:#fff} /* ---------- Case study ---------- */ .story{display:grid;grid-template-columns:24rem minmax(0,1fr);gap:3rem;align-items:start;padding-block:3rem;border-top:1px solid var(--line-soft)} .story:first-of-type{border-top:0;padding-top:0} .story--flip{grid-template-columns:minmax(0,1fr) 24rem} .story--flip .story__ph{order:2} .story__ph{aspect-ratio:3/2;border-radius:16px;background:var(--mist);border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);font-size:.8rem;text-align:center;padding:1rem} .section--tint .story__ph{background:#fff} .story h3{font-size:1.5rem;margin:0 0 .8rem;color:var(--navy)} .story p{font-size:1rem;color:var(--muted);max-width:68ch;margin:0} /* ---------- Milestone timeline ---------- Eight steps down one rail. The sequence carries information — a parent reads it against their own dates — so the numbers stay. */ /* Milestones, reworked 11/10: a timeline read left to right, four steps a row, one rule running through each row. Time is the axis, so the layout is the infographic; each step gets air instead of a dense list. Below 900px it turns into a calm vertical rail. */ .rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:2.2rem;row-gap:3.6rem;position:relative} .mile{position:relative;padding-top:2.6rem} .mile::before{content:"";position:absolute;top:.85rem;left:0;right:-2.2rem;height:1px;background:var(--line)} .mile:nth-child(4n)::before,.mile:last-child::before{right:0} .mile__n{position:absolute;top:0;left:0;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--navy);color:#fff;font-size:.78rem;font-weight:700;display:grid;place-items:center;z-index:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 6px var(--mist)} .section:not(.section--tint) .mile__n{box-shadow:0 0 0 6px #fff} .mile__body{display:block} .mile__when{margin:0;font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .mile__h{margin:.55rem 0 .45rem;font-size:1.08rem;line-height:1.3;color:var(--navy);letter-spacing:-.01em} .mile__tx{font-size:var(--fs-sm);line-height:1.6;color:var(--muted);margin:0;max-width:32ch} /* 11/10: calendar data tables on the Journey Planner */ .cal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;align-items:start} .cal__block{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:1.3rem 1.4rem;box-shadow:var(--sh-1)} .cal__h{margin:0 0 .8rem;font-size:1.05rem;color:var(--navy)} .cal__note{margin:.9rem 0 0;font-size:var(--fs-sm);color:var(--muted)} .dtable{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .dtable th,.dtable td{padding:.65rem .2rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top} .dtable thead th{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom-color:var(--line)} .dtable tbody th{font-weight:600;color:var(--navy);padding-right:1rem;width:45%} .dtable td{font-variant-numeric:tabular-nums} .dtable--wide tbody th{width:28%} .dtable tbody tr:last-child>*{border-bottom:0} .plist{margin:.4rem 0 0;padding-left:1.2rem}.plist li{margin:.5rem 0} @media (max-width:860px){.cal{grid-template-columns:1fr}} /* ---------- Next-stage link ---------- */ .nextstage{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:1.8rem;margin-top:3rem} .nextstage span{color:var(--muted);font-size:.95rem} .nextstage a{font-weight:600;color:var(--navy);text-decoration:none} .nextstage a:hover{text-decoration:underline} /* ---------- Form ---------- */ .form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.1rem;max-width:720px} .field{display:flex;flex-direction:column;gap:.35rem} .field--full{grid-column:1/-1} .field label{font-size:.85rem;font-weight:600;color:var(--navy)} .field input,.field select,.field textarea{font:inherit;font-size:.95rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%} .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--action);outline-offset:1px;border-color:var(--action)} .field textarea{min-height:120px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1} .field__hint{font-size:.78rem;color:var(--muted)} .field__err{font-size:.78rem;color:var(--accent);font-weight:600;min-height:1.1em} .field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{ border-color:var(--accent);box-shadow:0 0 0 3px rgba(161,28,24,.1)} .field input,.field select,.field textarea{transition:border-color .15s,box-shadow .15s} .tel-row{display:flex;gap:.5rem} .tel-row select{flex:0 0 7.5rem} /* 24/10: survey. Ticked choices sit in a plain group: a legend for the question, a row of 44px targets. */ .choice{border:0;margin:0;padding:0;min-width:0} .choice legend{padding:0;margin-bottom:.45rem;font-size:.85rem;font-weight:600;color:var(--navy)} .choice__opts{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem} .choice__opts--col{flex-direction:column;gap:.2rem} .field .choice__o{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;font-size:.95rem;font-weight:400;color:var(--ink);cursor:pointer} .choice__o input{width:1.15rem;height:1.15rem;margin:0;flex:none;accent-color:var(--navy)} .survey{max-width:760px} .survey [data-when-svc][hidden]{display:none} /* 25/10: the survey in three numbered steps. Each step lays its fields on the form's own grid. */ .sv__g{grid-column:1/-1;display:grid;grid-template-columns:inherit;gap:inherit;padding-top:1.7rem;border-top:1px solid var(--line-soft)} .sv__g:first-of-type{padding-top:0;border-top:0} .sv__h{grid-column:1/-1;display:flex;align-items:center;gap:.7rem;margin:0 0 .15rem;font-size:1.0625rem;font-weight:var(--fw-semi);color:var(--navy);letter-spacing:-.005em} .sv__n{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--navy);color:#fff; font-size:.8125rem;font-weight:var(--fw-semi);font-variant-numeric:tabular-nums;line-height:1} .sv__send{padding-top:.6rem} .choice__hint{display:block;font-weight:var(--fw-body);color:var(--muted);font-size:.8rem;margin-top:.1rem} /* Step 3 arrives from where the eye already is: a short rise, not a jump. */ .js .sv__g[data-when-svc]:not([hidden]){animation:sv-in .38s var(--ease)} @keyframes sv-in{from{transform:translateY(-6px)}} /* movement only: the text is readable from the first frame */ @media (prefers-reduced-motion:reduce){.js .sv__g[data-when-svc]:not([hidden]){animation:none}} /* Unwritten text shows nothing (25/10): a paragraph or heading left empty takes no room. */ main p:empty,main h2:empty,main h3:empty{display:none} /* ---------- Closing ---------- */ .close{background:var(--mist);border-top:1px solid var(--line-soft)} .close__in{padding-block:4rem;display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:2rem;align-items:center} .close h2{font-size:clamp(1.7rem,1.1rem + 2vw,2.4rem);margin:0 0 .5rem;color:var(--accent)} .close p{color:var(--muted);margin:0;max-width:52ch} /* ---------- Footer ---------- */ .foot{background:var(--navy);color:var(--on-navy-muted);padding:2.6rem 0;font-size:var(--fs-sm)} .foot .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} .foot b{color:#fff} .foot a{color:var(--on-navy-muted);text-decoration:none} .foot a:hover{color:#fff} /* ---------- Landing page chrome (no nav, no footer) ---------- */ .lp-mark{background:var(--navy);padding:1rem var(--gutter);display:flex;justify-content:center} .lp-copyright{background:var(--navy);color:var(--on-navy-muted);text-align:center;font-size:.82rem;padding:1.5rem var(--gutter)} .lp-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem} .lp-benefit h3{font-size:1.15rem;margin:0 0 .45rem} .lp-benefit p{font-size:var(--fs-sm);color:var(--muted);margin:0} .lp-proof{background:var(--mist);border:1px solid var(--line-soft);border-radius:16px;padding:2rem;max-width:68ch} .lp-proof p{margin:0;color:var(--ink)} /* ---------- Responsive ---------- */ @media(max-width:1160px){ .trust{flex-direction:column;align-items:stretch} .ti{flex-direction:row;justify-content:flex-start;gap:.8rem;padding:.85rem .4rem;text-align:left} .ti:not(:last-child){border-bottom:1px solid var(--line-soft)} .ti:not(:last-child)::after{display:none} } @media(max-width:900px){ .hero{padding-block:3.5rem 9rem} .hero__map{width:235%;left:82%;top:17%;transform:translate(-78.8%,-49.2%)} .hm__world{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.1)} .hm__lbl{display:none} .planner{margin-top:-6rem} .flow,.lp-benefits{grid-template-columns:minmax(0,1fr);gap:1.4rem} .people{grid-template-columns:minmax(0,1fr)} .stats,.steps{grid-template-columns:1fr 1fr;gap:2rem} .quotes{grid-auto-flow:column;grid-auto-columns:80%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem} .quote{scroll-snap-align:start} .close__in{grid-template-columns:minmax(0,1fr);gap:1.4rem} .form{grid-template-columns:minmax(0,1fr)} .founder,.founder--flip,.story,.story--flip{grid-template-columns:minmax(0,1fr);gap:1.5rem} .founder--flip .founder__ph,.story--flip .story__ph{order:-1} /* photo first on phones for both founders (12/10) */ .founder__ph{max-width:16rem} } @media(max-width:560px){.stats,.steps{grid-template-columns:minmax(0,1fr)}} /* ---------- Journey rail ---------- Single origin → Singapore. One dot. Vertical right (desktop), horizontal bottom (phone). Scroll-linked and eased. */ .prail{position:fixed;z-index:30;pointer-events:none;top:0;right:14px;bottom:0;width:44px} .prail__track{position:absolute;top:104px;bottom:72px;left:50%;transform:translateX(-50%);width:2px} .prail__line{position:absolute;inset:0;background:repeating-linear-gradient(to top,rgba(120,132,156,.55) 0 2px,transparent 2px 8px)} .prail__trail{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--signal);box-shadow:0 0 8px rgba(205,4,2,.5);border-radius:2px} .prail__dest{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:24px;height:24px} .prail__ring{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--signal);transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none} .prail__dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(2,46,100,.25);display:grid;place-items:center;transition:transform .35s var(--ease)} .prail__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal)} .prail__sin{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);font-size:.6rem;font-weight:700;letter-spacing:.06em;color:var(--navy);background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:2px 7px;box-shadow:0 2px 6px rgba(2,46,100,.15);white-space:nowrap} .prail__dest.arrived .prail__dot{transform:translate(-50%,-50%) scale(1.45)} .prail__dest.arrived .prail__ring{animation:prailping 1.4s ease-out infinite} @keyframes prailping{0%{transform:translate(-50%,-50%) scale(.6);opacity:.85}100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}} .prail__origin{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);width:7px;height:7px;border-radius:50%;background:var(--muted)} .prail__plane{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(2,46,100,.28);border:1px solid var(--line-soft);display:grid;place-items:center;will-change:bottom,left} .prail__plane svg{width:16px;height:16px;color:var(--navy);display:block} @media(max-width:820px){ .prail{top:auto;right:0;left:0;bottom:0;width:auto;height:54px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:1px solid var(--line-soft)} .prail__track{top:50%;bottom:auto;left:52px;right:52px;transform:translateY(-50%);width:auto;height:2px} .prail__line{background:repeating-linear-gradient(to right,rgba(120,132,156,.55) 0 2px,transparent 2px 8px)} .prail__trail{top:0;bottom:0;left:0;right:auto;width:0;height:2px} .prail__dest{top:50%;left:auto;right:0;transform:translate(50%,-50%)} .prail__sin{right:auto;left:50%;top:auto;bottom:calc(100% + 7px);transform:translateX(-50%)} .prail__origin{bottom:auto;top:50%;left:0;transform:translate(-50%,-50%)} .prail__plane{top:50%;bottom:auto;left:0;transform:translate(-50%,-50%);width:32px;height:32px} .prail__plane svg{transform:rotate(90deg)} body{padding-bottom:54px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .prail__plane,.prail__trail,.prail__dot{transition:none} .prail__dest.arrived .prail__ring{animation:none} .fcard{transition:none} .fcard:hover{transform:none;box-shadow:var(--sh-2)} /* Presses still acknowledge — they are feedback, not travel. */ .btn:active,.nav__cta:active,.nav__links a:active,.nav__lang a:active, .drawer a:active,.fcard:active,.jump a:active,.nextstage a:active,.foot a:active{transform:none;opacity:.72} .drawer,.scrim{transition:opacity .2s ease} } /* Translucency is a preference, not a given. Frost it solid rather than dropping the layer, so hierarchy survives. */ @media(prefers-reduced-transparency:reduce){ .nav[data-scrolled="true"]{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none} .prail{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none} } /* More contrast means defined edges, not just darker text. */ @media(prefers-contrast:more){ :root{--muted:#3C4761;--line:#8A94A6;--line-soft:#B8C0CE;--on-navy-muted:#DCE6F5} .fcard,.quote,.offer,.planner,.compare__scroll{border-color:var(--line)} .btn--ghost{border-color:currentColor} .nav[data-scrolled="true"]{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none} :focus-visible{outline-width:3px} } /* ============================================================ Feedback ------------------------------------------------------------ Two problems with :active alone. On touch it does not fire until the browser has decided the gesture is a tap, which is exactly the delay the feedback exists to cover; and it cannot be cancelled by dragging off. data-pressed is set on pointerdown and cleared on release or on a drag past the threshold, so the acknowledgement is immediate on every input and still retractable. :active is kept underneath as the no-JS path. ============================================================ */ [data-pressed="true"]{transform:scale(.975)} .btn[data-pressed="true"]{transform:scale(.97)} .fcard[data-pressed="true"],.jump a[data-pressed="true"], .nextstage a[data-pressed="true"]{transform:scale(.99)} .langbtn[data-pressed="true"],.menu-btn[data-pressed="true"], .drawer__close[data-pressed="true"]{transform:scale(.94)} /* In, fast. Out, slower. The press must feel instant; the release can relax. The base transition is declared on the components themselves, above, so it is in place before the attribute lands — an element whose transition arrives on the same frame as its transform has nothing to animate from. */ [data-pressed="true"]{transition-duration:60ms} /* ---------- Busy states ---------- */ /* The label stays in place and the spinner sits over it. Swapping the text for "Sending…" would resize the button mid-action, which is a layout shift at the exact moment the user is watching that element. */ .btn[data-busy="true"],.nav__cta[data-busy="true"]{ pointer-events:none;position:relative} .btn[data-busy="true"] > *,.nav__cta[data-busy="true"] > *{opacity:0} .btn[data-busy="true"]::after,.nav__cta[data-busy="true"]::after{ content:"";position:absolute;top:50%;left:50%;width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em; border:2px solid currentColor;border-top-color:transparent;border-radius:50%; animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* Navigation progress. Only appears once a page has actually been slow — a bar that flashes on every fast click is noise, not status. */ .navprog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80; background:var(--action);transform:scaleX(0);transform-origin:0 50%; opacity:0;pointer-events:none; transition:transform .3s var(--ease),opacity .2s} .navprog[data-on="true"]{opacity:1} /* A field being checked against the server, and a region waiting on content. */ .field[data-busy="true"] input,.field[data-busy="true"] select,.field[data-busy="true"] textarea{opacity:.6;pointer-events:none} .isloading{position:relative;min-height:3rem} .isloading::after{content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(90deg,var(--mist) 25%,var(--line-soft) 37%,var(--mist) 63%); background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}} /* Status line for anything that finished or failed. Named states, not colour alone — colour is not available to every reader. */ .status{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--fs-sm); margin-top:.9rem;min-height:1.4em} .status[data-state="error"]{color:var(--accent);font-weight:var(--fw-semi)} .status[data-state="done"]{color:var(--tick);font-weight:var(--fw-semi)} .status[data-state="busy"]{color:var(--muted)} .status:empty{display:none} @media(prefers-reduced-motion:reduce){ /* Status must survive: a spinner that does not spin says nothing. It is slowed, not stopped. Decorative shimmer is replaced by a flat tone. */ .btn[data-busy="true"]::after,.nav__cta[data-busy="true"]::after{animation-duration:1.6s} .isloading::after{animation:none;background:var(--line-soft)} [data-pressed]{transition-duration:0s} /* Was opacity:.7, which faded text below 4.5:1 while pressed (01/10). The press is still acknowledged — by a shade on filled controls and an underline on text links — without touching the text colour. */ [data-pressed="true"]{transform:none} a[data-pressed="true"]:not(.btn):not(.nav__cta){text-decoration:underline;text-underline-offset:.2em} .btn[data-pressed="true"],.nav__cta[data-pressed="true"],.langbtn[data-pressed="true"], .menu-btn[data-pressed="true"],.drawer__close[data-pressed="true"]{box-shadow:inset 0 0 0 100vmax rgba(2,20,45,.16)} .navprog{transition:opacity .2s} } /* ============================================================ Pages added 27/09 — T&C, FAQ, news, article, payment All of them ship with no client copy, so every one of these components has to look right while holding nothing but placeholders. That is the state they will be reviewed in. ============================================================ */ /* A hero with no CTA row. The content below is the point on these pages. */ .hero--plain{padding-bottom:2.6rem} .hero--plain .hero__lead{margin-bottom:0} .hero--plain .hero__lead + .hero__cta{margin-top:2rem} /* Reading measure. Prose pages get a narrower column than the 1160 wrap — a legal clause set to the full grid is unreadable. */ .wrap--read{max-width:74ch;margin-inline:auto} /* ---------- Document pages (T&C) ---------- */ .doc{max-width:74ch} .doc h2,.doc__h{font-size:var(--fs-h3);color:var(--navy);margin:2.4rem 0 .6rem; padding-top:1.4rem;border-top:1px solid var(--line-soft)} .doc h2:first-child{margin-top:0;padding-top:0;border-top:0} .doc p{font-size:var(--fs-body);color:var(--muted)} .doc__stamp{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--line-soft); font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* ---------- FAQ ---------- */ /* Aligned to the wrap, not centred in it: the section heading above sits at the wrap edge, and a centred list under a left-aligned heading reads as two different columns. */ .faq{max-width:74ch;border-top:1px solid var(--line-soft)} .faq__i{border-bottom:1px solid var(--line-soft)} .faq__i summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem; padding:1.15rem 0;cursor:pointer;list-style:none; font-size:var(--fs-body);font-weight:var(--fw-semi);color:var(--navy); min-height:44px;transition:color .18s var(--ease)} .faq__i summary::-webkit-details-marker{display:none} .faq__i summary:hover{color:var(--action)} /* Drawn, not a glyph: two rules that cross, and the vertical one retracts. */ .faq__mk{position:relative;flex:0 0 auto;width:14px;height:14px;margin-top:.35em} .faq__mk::before,.faq__mk::after{content:"";position:absolute;background:var(--action); border-radius:1px;transition:transform .22s var(--ease),opacity .22s var(--ease)} .faq__mk::before{top:6px;left:0;width:14px;height:2px} .faq__mk::after{top:0;left:6px;width:2px;height:14px} .faq__i[open] .faq__mk::after{transform:scaleY(0);opacity:0} .faq__a{padding:0 0 1.3rem} .faq__a p{font-size:var(--fs-body);color:var(--muted);margin:0;max-width:66ch} /* ---------- News index ---------- */ /* The first article is the lead. A grid of six identical cards says nothing about which one to read; one large and five small is an archive. */ .posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.8rem} .post{display:flex;flex-direction:column;min-width:0} .post__ph{aspect-ratio:3/2;border-radius:12px;background:var(--mist); border:1px dashed var(--line);margin-bottom:1rem} .post__t{font-size:var(--fs-h3);margin:0 0 .45rem} .post__t a{color:var(--navy);text-decoration:none} .post__t a:hover{color:var(--action);text-decoration:underline;text-underline-offset:.18em} .post__x{font-size:var(--fs-sm);color:var(--muted);margin:0 0 .6rem;max-width:none} .post__meta{order:2;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin:0} /* The lead article places every child explicitly. Left to auto-placement the four children fill the two columns in source order and the excerpt lands under the image instead of beside the title. */ .post:first-child{grid-column:1 / -1;display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto auto 1fr;gap:.5rem 2rem} .post:first-child .post__ph{grid-column:1;grid-row:1 / span 3;aspect-ratio:16/10;margin:0;align-self:center} .post:first-child .post__t{grid-column:2;grid-row:1;align-self:end; font-size:var(--fs-h2);letter-spacing:-.022em;margin:0 0 .2rem} .post:first-child .post__x{grid-column:2;grid-row:2; font-size:var(--fs-lead);font-weight:var(--fw-light);margin:0 0 .6rem} .post:first-child .post__meta{grid-column:2;grid-row:3;align-self:start} /* ---------- Article ---------- */ .article__back{font-size:var(--fs-sm);margin-bottom:1.6rem} .article__hd h1{font-size:var(--fs-h1);letter-spacing:-.025em;margin-bottom:.5rem} .article__meta{font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin:0 0 2rem} .article__ph{aspect-ratio:16/9;border-radius:14px;background:var(--mist); border:1px dashed var(--line);margin-bottom:2.2rem} /* 25/10: one 16:9 cover everywhere (cards, lead card, article): one upload fits all three exactly. An article with no cover shows none on its page, and a tinted logo tile on cards. */ .post__ph,.post:first-child .post__ph{aspect-ratio:16/9} .post__ph:not(.has-img){border:0;background:var(--mist) url(logo.png) center/22% auto no-repeat;opacity:.9} .post__ph:not(.has-img){background-blend-mode:luminosity} .article__ph:not(.has-img){display:none} .article__ph.has-img{box-shadow:var(--sh-1)} .post__ph.has-img>img{transition:transform .5s var(--ease)} .post:hover .post__ph.has-img>img{transform:scale(1.025)} /* ---------- Empty states (25/10): News with no article, FAQ with no question ---------- */ .empty{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:2.5rem 3.5rem; max-width:980px;padding:clamp(1.6rem,1rem + 2vw,3rem);border-radius:20px;background:var(--mist);border:1px solid var(--line-soft)} .empty--slim{grid-template-columns:minmax(0,1fr);max-width:720px} .empty__art{color:var(--navy);display:grid;place-items:center} .empty__art svg{width:100%;max-width:320px;height:auto;overflow:visible} .empty__dot{fill:var(--signal)} .js .empty__dot{animation:empty-pulse 2.6s var(--ease) infinite} @keyframes empty-pulse{0%,100%{opacity:1}50%{opacity:.45}} .empty__tx h2{font-size:clamp(1.55rem,1.1rem + 1.4vw,2.1rem);color:var(--accent);letter-spacing:-.02em;margin:0 0 .6rem;text-wrap:balance} .empty__tx>p{color:var(--muted);font-size:var(--fs-lead);font-weight:var(--fw-light);margin:0 0 1.5rem;max-width:46ch} .empty__more{font-size:var(--fs-sm)!important;font-weight:var(--fw-body)!important;color:var(--muted);margin:1.8rem 0 .5rem!important} .empty__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem} .empty__links a{font-weight:var(--fw-semi);color:var(--navy);text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .empty__links a::after{content:" \203A";color:var(--action);margin-left:.25em} .empty__links a:hover{color:var(--action);text-decoration:underline;text-underline-offset:.2em} @media (max-width:760px){.empty{grid-template-columns:minmax(0,1fr);gap:1.5rem}.empty__art svg{max-width:240px}} @media (prefers-reduced-motion:reduce){.js .empty__dot{animation:none}} /* ---------- Comments (25/10) ---------- */ .cmts{margin-top:3.6rem;padding-top:2.4rem;border-top:1px solid var(--line-soft)} .cmts__h{font-size:1.5rem;color:var(--navy);letter-spacing:-.015em;margin:0 0 1.4rem} .cmts__list{list-style:none;margin:0 0 2.4rem;padding:0;display:grid;gap:1.6rem} .cmt{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.9rem;align-items:start} .cmt__av{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--cell-us);color:var(--navy);font-weight:var(--fw-semi);text-transform:uppercase} .cmt__by{margin:0 0 .25rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem} .cmt__by b{color:var(--ink)} .cmt__by span{font-size:var(--fs-xs);color:var(--muted)} .cmt__tx{color:var(--ink);font-size:var(--fs-body)} .cmt__tx p{margin:0 0 .7em}.cmt__tx>*:last-child{margin-bottom:0} .cmts__none{color:var(--muted);margin:0 0 2rem} .cmts__fh{grid-column:1/-1;font-size:1.0625rem;color:var(--navy);margin:0} .cmts__form{max-width:none;padding:1.6rem;border-radius:16px;background:var(--mist);border:1px solid var(--line-soft)} .cmts__send{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.6rem 1.2rem} .cmts__send .btn{align-self:auto} .cmts__note{margin:0;font-size:var(--fs-xs);color:var(--muted)} .cmts__held{display:none;margin:0 0 1.2rem;padding:.9rem 1.1rem;border-radius:12px;background:#E9F6EE;color:#0B5A2C;font-weight:var(--fw-med)} .cmts__held[data-state="held"]{display:block} /* ---------- Survey link page (25/10): logo, languages, the survey ---------- */ .sv-mark{justify-content:space-between;align-items:center;gap:1rem;max-width:none} .sv-lang{display:flex;gap:.2rem} .sv-lang a{color:var(--on-navy-muted);text-decoration:none;font-size:var(--fs-xs);font-weight:var(--fw-semi);padding:.55rem .7rem;border-radius:8px;min-height:40px;display:inline-flex;align-items:center} .sv-lang a:hover{color:#fff;background:rgba(255,255,255,.08)} .sv-lang a[aria-current="true"]{color:#fff;background:rgba(255,255,255,.14)} .sv-lang a:focus-visible{outline:2px solid #fff;outline-offset:1px} .sv-page__in{max-width:820px} .sv-page__hd h1{font-size:var(--fs-h1);color:var(--accent);letter-spacing:-.025em;margin:0 0 .6rem;text-wrap:balance} /* ---------- Payment ---------- */ .checkout{margin:.4rem 0 .6rem} .checkout__note{font-size:var(--fs-sm);color:var(--muted); display:flex;align-items:center;gap:.45rem} /* ---------- Footer ---------- */ .foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 2rem} .foot__brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem} .foot__tag{color:var(--on-navy-muted)} .foot__links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-inline:auto} .foot__links a{color:var(--on-navy-muted);text-decoration:none; min-height:44px;display:inline-flex;align-items:center} .foot__links a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em} .foot__mail{color:var(--on-navy-muted)} .foot__contact{font-style:normal;display:flex;flex-direction:column;gap:.3rem;max-width:22rem} .foot__ig{display:inline-flex;align-items:center;gap:.4rem}.foot__ig svg{width:1.05rem;height:1.05rem} /* 23/10: footer logo tile (as in the header) and icons before address and email. */ .foot__home{display:inline-flex;align-items:center;gap:.55rem;font-size:1.15rem} .foot__logo{height:1.6em} .foot__addr,.foot__mail{display:inline-flex;align-items:flex-start;gap:.4rem} .foot__addr svg,.foot__mail svg{width:1.05rem;height:1.05rem;flex:none;margin-top:.15em} .foot__base{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;font-size:var(--fs-xs)} .foot__plabel{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;margin-right:.4rem;color:var(--on-navy-muted)} .foot__partner{color:#fff} @media(max-width:900px){ .posts{grid-template-columns:repeat(2,minmax(0,1fr))} .post:first-child{grid-template-columns:minmax(0,1fr);gap:1rem} .post:first-child .post__ph{aspect-ratio:3/2} .post:first-child .post__t{font-size:var(--fs-h3)} .post:first-child .post__x{font-size:var(--fs-sm);font-weight:var(--fw-body)} } @media(max-width:560px){ .posts{grid-template-columns:minmax(0,1fr)} .foot__in{flex-direction:column;align-items:flex-start;gap:.3rem} .foot__links{margin-inline:0} } /* ---------- Admin-driven slots (added 30/09) ---------- Everything below renders only when the client has supplied something: an image, an embed, rich text, or a preset. With nothing supplied the markup is the placeholder it always was, so these rules are inert. */ /* An image slot keeps the placeholder's box — same size, same radius — and the photo fills it. The dashed "waiting" border goes. */ .has-img{padding:0;border:0;overflow:hidden;background:var(--mist);box-shadow:none} .has-img>img{display:block;width:100%;height:100%;object-fit:cover} .founder__ph.has-img{box-shadow:var(--sh-1)} .person__ph.has-img{border:0;padding:0} /* 92px avatar from the 5:6 portrait: head and shoulders, the faces sit at the same height in both files */ .person__ph.has-img>img{transform:scale(1.9);transform-origin:47% 19%} /* Embeds sit in the placeholder's box as well. */ .has-embed{padding:0;border:0;overflow:hidden;background:var(--navy)} .has-embed>iframe{display:block;width:100%;height:100%;border:0} .yt{position:relative;display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:var(--navy)} .yt>img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .2s ease} /* 24/10 (Au): the cover always fills the 16:9 box, centred. A 4:3 YouTube cover has black bands top and bottom; centred and cropped, they are cut off evenly instead of the top band showing. */ .video-ph.has-embed{display:block} .yt>img{aspect-ratio:16/9;object-position:center} .yt:hover>img{opacity:.88} .yt__play{position:absolute;inset:50% auto auto 50%;width:72px;height:72px;margin:-36px 0 0 -36px; border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(2,46,100,.28)} .yt__play::after{content:"";position:absolute;left:29px;top:22px;border-style:solid; border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--navy)} .yt:focus-visible{outline:3px solid var(--action);outline-offset:3px} /* ---------- Welcome video player (25/10) ---------- Our cover and our controls; YouTube's player underneath with its own chrome off. The iframe is drawn 140px taller than the box: the 16:9 picture sits exactly in the visible area and YouTube's title bar and logo fall outside it (overflow: hidden). */ .vp{position:relative;isolation:isolate;aspect-ratio:16/9;border-radius:16px;box-shadow:var(--sh-2)} .vp>.yt{position:absolute;inset:0;z-index:2;transition:opacity .3s var(--ease),visibility 0s} .vp>.yt>img{transition:opacity .2s ease,transform .6s var(--ease)} .vp>.yt:hover>img{opacity:1;transform:scale(1.012)} /* Before play: a quiet pill in the lower-left corner, so the cover's own design (its words, the faces) stays clear. The centre is left to the picture. */ .vp>.yt .yt__cta{position:absolute;left:clamp(12px,2.2vw,24px);bottom:clamp(12px,2.2vw,24px);display:inline-flex;align-items:center;gap:.7rem; padding:.4rem 1.1rem .4rem .4rem;border-radius:999px;background:rgba(255,255,255,.94);color:var(--navy); font-weight:var(--fw-semi);font-size:.95rem;box-shadow:0 8px 24px rgba(2,46,100,.22),0 1px 2px rgba(2,46,100,.12); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .vp>.yt .yt__play{position:relative;inset:auto;margin:0;width:44px;height:44px;background:var(--navy);box-shadow:none;flex:none} .vp>.yt .yt__play::after{left:17px;top:13px;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff} .vp>.yt:hover .yt__cta{transform:translateY(-2px);box-shadow:0 12px 30px rgba(2,46,100,.28),0 1px 2px rgba(2,46,100,.12)} .vp>.yt:active .yt__cta{transform:scale(.97);transition-duration:70ms} .vp__big .yt__play{transition:transform .18s var(--ease)} .vp__big:active .yt__play{transform:scale(.94);transition-duration:70ms} .vp__stage{position:absolute;inset:0;z-index:1;overflow:hidden;background:#000} .vp__stage iframe{position:absolute;left:0;top:-70px;width:100%;height:calc(100% + 140px);border:0;pointer-events:none} /* Pressed: the play button breathes until the first frame, the cover stays (no black flash). */ .vp[data-state="loading"]>.yt .yt__play{animation:vp-wait .9s var(--ease) infinite alternate} @keyframes vp-wait{to{transform:scale(.86);opacity:.75}} /* Hidden only after the fade (the delay sits on the hidden state); shown at once, so focus can return to it. */ .vp[data-state="playing"]>.yt,.vp[data-state="paused"]>.yt{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s var(--ease),visibility 0s linear .45s} /* Touch: the first tap must land in the player itself, so ours lets it through. */ .vp[data-touch="true"]>.yt,.vp[data-touch="true"] .vp__shield,.vp[data-touch="true"] .vp__big{pointer-events:none} .vp__ui{position:absolute;inset:0;z-index:3;pointer-events:none} .vp__shield{position:absolute;inset:0;pointer-events:auto;cursor:pointer} .vp[data-state="loading"] .vp__ui,.vp[data-state="ready"] .vp__ui{display:none} .vp[data-idle="true"]{cursor:none} .vp[data-idle="true"] .vp__shield{cursor:none} /* Paused: our play button over a soft scrim, in place of YouTube's pause panel. */ .vp__big{position:absolute;inset:0;margin:auto;width:96px;height:96px;padding:0;border:0;border-radius:50%; background:none;cursor:pointer;pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s} .vp__big .yt__play{position:absolute} .vp__ui::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,20,45,.25),rgba(3,20,45,.05) 35%,rgba(3,20,45,.1) 60%,rgba(3,20,45,.6)); opacity:0;transition:opacity .25s ease} .vp[data-state="paused"] .vp__ui::before{opacity:1} .vp[data-state="paused"] .vp__big{opacity:1;visibility:visible;transition-delay:0s} /* The bar: a frosted pill over the picture. Hidden while playing untouched, back on any move. */ .vp__bar{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:.35rem; padding:.3rem .55rem;border-radius:14px;pointer-events:auto;color:#fff; background:rgba(3,20,45,.74);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%); /* dark enough for white text over the brightest frame */ box-shadow:0 6px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12); transition:opacity .25s ease,transform .3s var(--ease)} .vp[data-idle="true"] .vp__bar{opacity:0;transform:translateY(8px);pointer-events:none} .vp__btn{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:10px; background:transparent;color:#fff;cursor:pointer;transition:background .15s,transform 100ms var(--ease)} .vp__btn svg{width:22px;height:22px} .vp__btn:hover{background:rgba(255,255,255,.14)} .vp__btn:active{transform:scale(.92);transition-duration:60ms} .vp__btn:focus-visible,.vp__big:focus-visible,.vp__seek:focus-visible{outline:2px solid #fff;outline-offset:2px} .vp__time{flex:none;min-width:2.9em;font-size:.8125rem;font-variant-numeric:tabular-nums;color:#fff;text-align:center} /* Position: played (white), loaded (soft), the rest (faint). The thumb grows on hover and while held. */ .vp__seek{--p:0%;--b:0%;flex:1 1 auto;min-width:60px;height:28px;margin:0 .25rem;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer} .vp__seek::-webkit-slider-runnable-track{height:4px;border-radius:4px; background:linear-gradient(90deg,#fff 0 var(--p),rgba(255,255,255,.45) var(--p) var(--b),rgba(255,255,255,.2) var(--b))} .vp__seek::-moz-range-track{height:4px;border-radius:4px; background:linear-gradient(90deg,#fff 0 var(--p),rgba(255,255,255,.45) var(--p) var(--b),rgba(255,255,255,.2) var(--b))} .vp__seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;border:0; box-shadow:0 1px 4px rgba(0,0,0,.35);transform:scale(.85);transition:transform .15s var(--ease)} .vp__seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.35)} .vp__seek:hover::-webkit-slider-thumb,.vp__seek:active::-webkit-slider-thumb{transform:scale(1.15)} .vp:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh;background:#000} @media (max-width:560px){ .vp{border-radius:12px} /* A phone-sized cover has no room for the label: the round button alone, in the corner. */ .vp>.yt .yt__cta{padding:3px;gap:0;left:10px;bottom:10px} .vp>.yt .yt__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .vp>.yt .yt__play{width:34px;height:34px} .vp>.yt .yt__play::after{left:13px;top:10px;border-width:7px 0 7px 11px} .vp__bar{left:8px;right:8px;bottom:8px;padding:.2rem .35rem;gap:.15rem} .vp__btn{width:36px;height:36px} .vp__dur{display:none} } @media (prefers-reduced-motion:reduce){ .vp *,.vp>.yt{transition:none!important;animation:none!important} } @media (prefers-reduced-transparency:reduce){ .vp__bar{background:rgba(3,20,45,.9);-webkit-backdrop-filter:none;backdrop-filter:none} } /* Rich text written in the admin. Block fields (an FAQ answer, a clause, an article) arrive as paragraphs and lists; inline fields carry bold, italic and links only. Both inherit the muted body colour the placeholders use. */ .faq__a,.doc__body{font-size:var(--fs-body);color:var(--muted);max-width:66ch} .doc__body>*:last-child,.faq__a>*:last-child{margin-bottom:0} .doc__body ul,.doc__body ol,.faq__a ul,.faq__a ol,.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1em} .doc__body li,.faq__a li,.prose li{margin:.25em 0} .doc__body p,.faq__a p{margin:0 0 1em} main a:not([class]){color:var(--navy);text-underline-offset:.2em} main a:not([class]):hover{color:var(--action)} strong,b{font-weight:var(--fw-semi)} /* Named presets. One setting per paragraph, applied to all three languages at once, drawn from the locked scale — this is what replaces free font and size control (decided 27/09). */ .pre{display:block} .pre--lead{font-size:var(--fs-lead);font-weight:var(--fw-light);color:var(--ink)} .pre--small{font-size:var(--fs-sm)} .section--navy .pre--lead,.hero .pre--lead{color:inherit} /* ---------- Payment, Option 1 (chosen 11/10) ---------- One package on screen at a time from a segmented switcher; "Continue" turns the stage into the checkout in place, so the page never jumps. The same panels make the direct-payment page (/pay). Packages come from the admin. */ .pay3{padding-top:2.6rem} .seg{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto 2rem;padding:4px;border-radius:14px;background:var(--mist);border:1px solid var(--line-soft)} .seg[hidden],.seg:not(:has(.seg__b)){display:none} .seg__thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(2,46,100,.08),0 4px 12px rgba(2,46,100,.08); transition:transform .38s cubic-bezier(.2,.9,.25,1),width .38s cubic-bezier(.2,.9,.25,1)} .seg__b{position:relative;z-index:1;display:flex;align-items:center;gap:.5rem;padding:.7rem 1.3rem;border:0;background:none;font:inherit;font-weight:500;color:var(--muted);cursor:pointer;border-radius:10px;transition:color .2s,transform 120ms var(--ease)} .seg__b[aria-selected="true"]{color:var(--navy);font-weight:600} .seg__b svg{width:1.25rem;height:1.25rem;flex:none} .seg__b:active{transform:scale(.97)} .xstage{max-width:60rem;margin:0 auto} .xp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:3rem;padding:2.4rem;border-radius:24px;background:#fff;border:1px solid var(--line-soft); box-shadow:0 1px 2px rgba(2,46,100,.04),0 18px 44px rgba(2,46,100,.08)} /* Visible by default: with no script every package shows, stacked, each with its own button. */ .xstage .xp+.xp{margin-top:1.4rem} /* With the script: before it runs the first package shows (the first state is painted, never a blank stage); once it runs, the chosen one. A script failure costs the switcher, never the page. */ .js .xstage:not(.ready) .xp:not(:first-of-type),.js .xstage.ready .xp:not(.is-on){display:none} .js .xstage .xp+.xp{margin-top:0} .xstage.switched .xp.is-on{animation:xin .45s cubic-bezier(.2,.9,.25,1) both} /* only on a switch: the first state is painted, not faded in */ @keyframes xin{from{opacity:.001;transform:translateY(6px) scale(.995)}to{opacity:1;transform:none}} .xp:focus{outline:none} .xp__icon{width:3.4rem;height:3.4rem;border-radius:16px;display:grid;place-items:center;background:var(--cell-us);color:var(--action);margin-bottom:1.2rem} .xp__icon svg{width:1.8rem;height:1.8rem} .xp__n{margin:0;font-size:1.7rem;color:var(--navy);letter-spacing:-.02em;line-height:1.2} .xp__f{margin:.4rem 0 0;color:var(--muted)} .xp__p{display:flex;align-items:flex-start;margin:1.6rem 0 1rem;font-size:3.4rem;font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .cur{font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--muted);margin:.35rem .35rem 0 0} .xp__s{display:flex;gap:.45rem;align-items:flex-start;margin:0;font-size:var(--fs-sm)} .xp__s svg{width:1.15rem;height:1.15rem;flex:none;color:var(--tick);margin-top:.2rem} .gauge{display:block;height:6px;border-radius:99px;background:var(--mist);margin:.7rem 0 1.4rem;overflow:hidden} .gauge>span{display:block;height:100%;width:min(100%,calc(var(--d) / 60 * 100%));border-radius:inherit;background:linear-gradient(90deg,#7FB0E3,var(--action))} .xp__btn{width:100%;justify-content:center;padding:.95em 1.4em} .xp__r h4{margin:.4rem 0 .6rem;font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .incl{list-style:none;margin:0;padding:0;font-size:var(--fs-sm)} .incl li{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem 0;border-top:1px solid var(--line-soft)} .incl li:first-child{border-top:0} .incl li::before{content:"";flex:none;width:1rem;height:1rem;margin-top:.2rem;background:var(--tick); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat} p.incl{line-height:1.7} .xpay{max-width:40rem;margin:0 auto} .xstage.switched .xpay{animation:xin .45s cubic-bezier(.2,.9,.25,1) both} .xpay[hidden],.checkout[hidden]{display:none} .xpay__back{font:inherit;font-size:var(--fs-sm);color:var(--action);background:none;border:0;cursor:pointer;padding:.6rem 0;margin-bottom:.4rem;min-height:44px} .chosen{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;border-radius:14px;background:var(--cell-us);margin-bottom:1rem} .chosen:has(.chosen__n:empty){display:none} .chosen__icon{color:var(--action);display:flex}.chosen__icon svg{width:1.4rem;height:1.4rem} .chosen__n{font-weight:600;color:var(--navy)} .chosen__p{margin-left:auto;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums} .checkout__mount{min-height:22rem;border-radius:16px;border:1px solid var(--line-soft);background:#fff} .assure{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.6rem;font-size:var(--fs-sm);color:var(--muted)} .assure li{display:flex;gap:.6rem;align-items:flex-start} .assure svg{width:1.15rem;height:1.15rem;flex:none;color:var(--navy);margin-top:.15rem} .assure .checkout__note{display:inline} .byp{margin-top:1rem;border-top:1px solid var(--line-soft);padding-top:.3rem} .byp summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:.6rem 0;min-height:44px;font-weight:600;color:var(--navy);font-size:var(--fs-sm)} .byp summary::-webkit-details-marker{display:none} .byp summary::after{content:"";width:.45rem;height:.45rem;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)} .byp[open] summary::after{transform:rotate(-135deg)} .byp p{margin:.2rem 0 .6rem;font-size:var(--fs-sm)} .pay3__h{font-size:1.15rem;color:var(--navy);margin:3.4rem 0 1rem;letter-spacing:-.01em} .more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);border-radius:16px;overflow:hidden;border:1px solid var(--line-soft)} .more__i{display:flex;gap:.9rem;padding:1.2rem 1.25rem;background:#fff} .more__i .ic{width:1.5rem;height:1.5rem;flex:none;color:var(--action);margin-top:.1rem} .more__i h3{margin:0;font-size:1rem;color:var(--navy)} .more__i p{margin:.2rem 0 0;font-size:var(--fs-sm)} .more__p{font-weight:600;color:var(--ink)} /* 23/10: "Other ways to start" items are links. */ .more__a{color:inherit;text-decoration:none} .more__a::after{content:" \203A";color:var(--action)} .more__a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px} a.more__tag{color:inherit;text-decoration:none} a.more__tag:hover{text-decoration:underline;text-underline-offset:.2em} .tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem!important} .tags span,.tags a{padding:.15rem .6rem;border-radius:99px;background:var(--mist);font-size:.82rem} .tags a{min-height:32px;display:inline-flex;align-items:center} @media (max-width:820px){ .xp{grid-template-columns:1fr;gap:1.6rem;padding:1.6rem 1.3rem} .seg{width:100%} .seg__b{flex:1;justify-content:center;padding:.7rem .3rem;flex-direction:column;gap:.25rem;font-size:.8rem;text-align:center;line-height:1.25} .xp__p{font-size:2.8rem} .more{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){.xstage.switched .xp.is-on,.xstage.switched .xpay{animation:none}.seg__thumb,.seg__b{transition:none}} /* Direct-payment page */ body:has(.pl){background:var(--mist)} .pl{max-width:36rem;margin:0 auto;padding:1.25rem 1rem 2.4rem} .pl__hd{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem 0 1.6rem} .pl__hd .brand{display:flex;align-items:center;gap:.55rem;color:var(--navy);font-weight:700;font-size:1.05rem} .pl__hd .brand b{color:var(--signal)} .pl__hd .brand__logo{width:2rem;height:2rem} .pl__lang{display:flex;gap:.15rem;font-size:var(--fs-xs)} .pl__lang a{padding:.55rem .6rem;border-radius:8px;color:var(--muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .pl__lang a[aria-current="true"]{background:#fff;color:var(--navy);font-weight:600} .pl__h{font-size:clamp(1.9rem,1.4rem + 2vw,2.4rem);color:var(--navy);margin:0;letter-spacing:-.02em} .pl__lead{color:var(--muted);margin:.5rem 0 1.4rem;font-size:var(--fs-sm);line-height:1.6} .pl__h2{font-size:1.05rem;color:var(--navy);margin:2rem 0 .8rem} .pl .xp{grid-template-columns:1fr;gap:1.4rem;padding:1.6rem 1.4rem} .pl .xp__btn{display:none} .pl__ft{margin-top:2.4rem;text-align:center;font-size:var(--fs-xs);color:var(--muted)} /* Multi-paragraph client copy (30/09): founder bios and case-study stories arrive as paragraphs, with bold section labels in the stories. */ .founder__bio,.story__body{font-size:var(--fs-body);color:var(--muted);max-width:68ch} .founder__bio p,.story__body p{margin:0 0 1em} .founder__bio>*:last-child,.story__body>*:last-child{margin-bottom:0} .story__body strong{color:var(--ink)} .story__body p:first-child:not(:has(strong)){font-weight:var(--fw-semi);color:var(--navy)} /* the subtitle line, not a "The challenge" paragraph (12/10) */ .story__body p:has(> strong:only-child){margin-bottom:.35em} .story__body ul{margin:0 0 1em;padding-left:1.15rem;display:grid;gap:.35rem;list-style:disc} .story__body li{padding-left:.2rem;font-size:1rem;line-height:var(--lh-body)} .story__body li::marker{color:var(--accent)} @media (max-width:1000px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}.mile:nth-child(2n)::before{right:0}} @media (max-width:640px){ .rail{grid-template-columns:1fr;row-gap:0} .mile{padding:0 0 2.2rem 2.9rem} .mile::before,.mile:nth-child(2n)::before,.mile:nth-child(4n)::before{top:1.75rem;bottom:0;left:.85rem;right:auto;width:1px;height:auto} .mile:last-child{padding-bottom:0}.mile:last-child::before{display:none} .mile__h{margin-top:.35rem} } /* Date tables, 11/10: hairlines and space, no boxes — the numbers are the content. */ .cal{column-gap:4rem} .cal__block{background:none;border:0;box-shadow:none;padding:0} .cal__h{font-size:1rem;margin-bottom:1rem} .dtable th,.dtable td{padding:.85rem 0} .dtable tbody th{font-weight:500;color:var(--ink)} .dtable td{color:var(--navy);font-weight:500;text-align:right} .dtable thead th:last-child{text-align:right} .dtable--wide td{text-align:left;font-weight:400;color:var(--ink)} .dtable--wide thead th:last-child{text-align:left} /* Homepage table, 11/10: the Start Right Up column keeps each answer on one line. */ .ctable--4{min-width:960px} .ctable--4 td.us,.ctable--4 th.us,.ctable--3 td.us{white-space:nowrap} .ctable--4 tbody th,.ctable--4 td{padding:1.05rem 1.1rem} .ctable--4 tfoot td[colspan]{white-space:normal}.ctable--4 thead th,.ctable--4 tbody th,.ctable--4 tfoot th,.ctable--3 thead th{white-space:nowrap} .dtable:not(.dtable--wide) td{padding-left:1rem} @media (min-width:1000px){.dtable:not(.dtable--wide) td{white-space:nowrap}} .dtable:not(.dtable--wide) tbody th{width:auto} .ctable--4 tbody td,.ctable--4 tbody th{padding:1.05rem .85rem} @media (max-width:640px){ .dtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .dtable tbody tr{display:grid;gap:.15rem;padding:.8rem 0;border-bottom:1px solid var(--line-soft)} .dtable tbody tr:last-child{border-bottom:0} .dtable tbody th,.dtable tbody td,.dtable:not(.dtable--wide) td{padding:0;border:0;text-align:left;width:auto} .dtable--wide tbody td{color:var(--muted)} } /* ---------- Journey Planner, reworked 11/10 ---------- The road: eight stops on one line, the chosen step's detail beneath, a progress fill to the chosen stop. The calendar: a year of small months tinted by type, filter chips that double as the legend, and the chosen month's dates beside it. */ .road{position:relative} .road__plan{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:-1rem 0 2.6rem} .road__plan[hidden]{display:none} .road__plan label{font-weight:600;color:var(--navy)} .road__plan select{font:inherit;font-size:var(--fs-sm);padding:.6rem 2.2rem .6rem .9rem;min-height:44px;border-radius:10px;border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022E64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .7rem center/1rem no-repeat;-webkit-appearance:none;appearance:none;color:var(--ink)} /* Wide screen: stops across in a row, the chosen step's detail in the row below. */ .road__list{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:start;padding-top:1.9rem} .road__item{display:contents} .road__stop{grid-row:1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:0 .3rem .4rem;border:0;background:none;font:inherit;cursor:pointer;color:var(--muted);text-align:center;min-height:44px} .road__dot{position:relative;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--muted);font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums; transition:background .25s,border-color .25s,color .25s;box-shadow:0 0 0 5px var(--mist)} .road__lab{display:flex;flex-direction:column;gap:.25rem} .road__when{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.35} .road__stop.is-past .road__dot{border-color:var(--navy);color:var(--navy)} .road__stop[aria-selected="true"]{color:var(--accent)} /* the chosen number is under the plane: its digit steps aside */ .road__stop[aria-selected="true"] .road__dot{background:var(--navy);border-color:var(--navy);color:#fff} .road__stop[aria-selected="true"] .road__num{visibility:hidden} .road__stop:hover .road__dot{border-color:var(--navy);color:var(--navy)} .road__stop[aria-selected="true"]:hover .road__dot{color:#fff} .road__line{position:absolute;z-index:0;left:calc(100% / 16);right:calc(100% / 16);top:calc(1.9rem + 1.3rem);height:2px;background:var(--line);border-radius:2px} .road__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--navy);border-radius:inherit;transition:width .55s cubic-bezier(.2,.9,.25,1),height .55s cubic-bezier(.2,.9,.25,1)} .road__plane{position:absolute;z-index:3;left:0;top:0;width:1.35rem;height:1.35rem;color:#fff;pointer-events:none;transition:transform .55s cubic-bezier(.2,.9,.25,1)} .road__plane svg{display:block;width:100%;height:100%} .road:not(.ready) .road__plane{display:none} /* The last step is the destination (12/10): its dot is the red pin, "Singapore" sits above the line over it, and its own label ("Arrival & first weeks") stays below like every other step. Reaching it lands the plane: the plane gives way to the pin. */ .road__dest,.road__pinsvg{display:none} .road__item:last-of-type .road__dest{display:block;position:absolute;left:50%;bottom:calc(100% + .1rem);transform:translateX(-50%);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);white-space:nowrap} .road__item:last-of-type .road__dot,.road__item:last-of-type .road__stop[aria-selected="true"] .road__dot,.road__item:last-of-type .road__stop:hover .road__dot{background:var(--signal);border-color:var(--signal);color:#fff;box-shadow:0 0 0 5px var(--mist),0 6px 14px rgba(205,4,2,.28)} .road__item:last-of-type .road__num:not(.vh){display:none} .road__item:last-of-type .road__pinsvg{display:grid;place-items:center} .road__item:last-of-type .road__pinsvg svg{width:1.3rem;height:1.3rem} .road__item:last-of-type .road__stop[aria-selected="true"] .road__dot{box-shadow:0 0 0 5px var(--mist),0 0 0 8px rgba(205,4,2,.22),0 6px 14px rgba(205,4,2,.28)} .road.is-landed .road__plane,.road.is-landed .road__mplane{opacity:0} .road__plane,.road__mplane{transition-property:transform,opacity} .road__card{grid-row:2;grid-column:1 / -1;max-width:44rem;width:100%;justify-self:center;margin:2.4rem auto 0;padding:2rem 2.2rem;border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(2,46,100,.04),0 16px 40px rgba(2,46,100,.08)} .js .road.ready .road__card:not(.is-on){display:none} .road__card .mile__when{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem} .road__date:empty{display:none} .road__date{padding:.2rem .65rem;border-radius:99px;background:var(--cell-us);color:var(--navy);font-size:.8rem;letter-spacing:0;text-transform:none;font-weight:600} .road__card .mile__h{font-size:1.45rem;margin:.6rem 0 .5rem} .road__card .mile__tx{font-size:var(--fs-body);max-width:none} .road__nav{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.2rem} .road__nav[hidden]{display:none} .road__btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer} .road__btn svg{width:1.1rem;height:1.1rem} .road__btn:hover{border-color:var(--navy)} .road__count{font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums;min-width:3.5rem;text-align:center} .road__mini{display:none} /* Phone (and narrow tablets): a small route strip, then one card at a time that swipes. The route's dots jump to a step; the plane rides the strip; no labels compete with the card. */ @media (max-width:900px){ .road__plan{margin:-.6rem 0 1.6rem} .road__mini:not([hidden]){display:flex;position:relative;align-items:center;justify-content:space-between;margin:0 0 1.2rem;padding:1.9rem .3rem .9rem 0} .road__mline{position:absolute;left:.5rem;right:1.25rem;top:calc(1.9rem + .95rem);height:2px;margin-top:-1px;background:var(--line);border-radius:2px} .road__mfill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--navy);border-radius:inherit;transition:width .5s cubic-bezier(.2,.9,.25,1)} .road__mdot{position:relative;z-index:1;width:1rem;height:1rem;padding:0;border-radius:50%;border:2px solid var(--line);background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent} .road__mdot::after{content:"";position:absolute;inset:-11px} /* 44px touch target, 20px drawn */ .road__mdot.is-past{border-color:var(--navy);background:var(--navy)} .road__mdot.is-on{border-color:var(--navy);background:var(--navy)} /* the last dot is Singapore: the red pin, its name above it */ .road__mdot:last-of-type{width:1.9rem;height:1.9rem;border:0;background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/1rem no-repeat;box-shadow:0 0 0 4px var(--mist)} .road__mdot:last-of-type.is-on{box-shadow:0 0 0 4px var(--mist),0 0 0 7px rgba(205,4,2,.22)} .road__mdot:last-of-type.is-past,.road__mdot:last-of-type.is-on{background-color:var(--signal)} .road__mlab{position:absolute;right:-.6rem;top:0;width:5rem;text-align:center;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)} .road__mplane{position:absolute;left:0;top:0;z-index:2;width:1.05rem;height:1.05rem;color:#fff;pointer-events:none;transition:transform .5s cubic-bezier(.2,.9,.25,1)} .road__mplane svg{display:block;width:100%;height:100%} .road__list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;align-items:flex-start; margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 1rem;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain} .road__list::-webkit-scrollbar{display:none} .road__item{display:block;flex:0 0 100%;scroll-snap-align:start} .road__stop,.road__line,.road__plane{display:none} .js .road.ready .road__card:not(.is-on){display:block} .road__card{margin:0;max-width:none;width:auto;padding:1.4rem 1.3rem 1.5rem;border-radius:18px;min-height:13.5rem} .road__card .mile__h{font-size:1.25rem;margin:.55rem 0 .45rem} .road__card .mile__tx{font-size:var(--fs-sm)} .road__nav{display:none !important} } /* Without the script the road is a plain list of every step. */ html:not(.js) .road__line,html:not(.js) .road__plane{display:none} .anchor{display:block;position:relative;top:-90px;height:0} .ycal[hidden]{display:none} .ycal__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;margin-bottom:1.6rem} .ycal__year{display:flex;align-items:center;gap:.6rem} .ycal__y{font-size:1.6rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;min-width:4.2rem;text-align:center} .ycal__yb{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer} .ycal__yb svg{width:1.1rem;height:1.1rem} .ycal__yb:disabled{opacity:.35;cursor:default} .ycal__chips{display:flex;flex-wrap:wrap;gap:.5rem} .chip{--c:var(--line);--t:#fff;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.45rem 1rem;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:background .2s,border-color .2s,color .2s} /* Each filter wears its own colour when it is on, so the chips are the legend. */ .ycal{--moe:#CDEED8;--intl:#D3E5F8;--exam:#FAD9D5;--adm:#E6DEFA} .chip--moe{--c:#2E9E5B;--t:var(--moe)} .chip--intl{--c:var(--action);--t:var(--intl)} .chip--exam{--c:#D9827B;--t:var(--exam)} .chip--hol{--c:#E0A800;--t:#FFD447} .chip--adm{--c:#8B6FD6;--t:var(--adm)} .chip[aria-pressed="true"]{background:var(--t);border-color:var(--c);color:var(--navy);font-weight:600} .chip[aria-pressed="false"]{border-style:dashed} /* The year takes the full width; the chosen month's dates sit beneath it, not in a side column. */ .ycal__body{display:block} .ycal__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 1.8rem} .ym{display:flex;flex-direction:column;justify-content:flex-start;padding:.8rem .8rem .9rem;border-radius:14px;border:1px solid transparent;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--ink);transition:background .2s,border-color .2s} .ym:hover{background:var(--mist)} .ym.is-on{border-color:var(--navy);background:#fff;box-shadow:var(--sh-1)} .ym__n{display:block;font-weight:700;font-size:1.05rem;color:var(--navy);margin:0 0 .55rem .25rem} .ym.is-quiet .ym__n{color:var(--muted)} .ym__g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 0} .ym__g i{font-style:normal;display:flex;flex-direction:column;align-items:stretch;min-width:0} .ym__g .ym__w{font-size:.68rem;font-weight:600;color:var(--muted);text-align:center;padding-bottom:.25rem} .d__n{display:grid;place-items:center;width:1.75rem;height:1.75rem;margin:0 auto;border-radius:50%;font-size:.84rem;font-variant-numeric:tabular-nums;color:var(--ink)} .ym.is-quiet .d__n{color:var(--muted)} /* A period is a light band behind its dates, rounded where it starts and ends. Overlapping periods share the band as equal stripes, in a fixed order, so neither hides the other. */ .ym__g i.d{position:relative} .d__b{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;overflow:hidden} .d__b b{flex:1} .d.s .d__b{left:2px;border-top-left-radius:999px;border-bottom-left-radius:999px} .d.e .d__b{right:2px;border-top-right-radius:999px;border-bottom-right-radius:999px} .b--moe{background:var(--moe)}.b--intl{background:var(--intl)}.b--exam{background:var(--exam)}.b--adm{background:var(--adm)} /* Predicted: the same tint, hatched, so a confirmed date and a predicted one never look alike. */ .d__b b.p{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.75) 0 2px,transparent 2px 5px)} .t-hol.is-p .d__n{background:#FFF1BD;box-shadow:inset 0 0 0 1.5px #E0A800;border:0;outline:1.5px dashed #E0A800;outline-offset:-1.5px} .ycal__p{justify-self:start;margin-top:.15rem;font-style:normal;font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .ycal__pn{display:flex;align-items:center;gap:.6rem;margin:1.4rem 0 0;font-size:var(--fs-sm);color:var(--muted)} .ycal__pn[hidden]{display:none} .ycal__sw{flex:0 0 auto;width:2.2rem;height:1rem;border-radius:99px;background:var(--moe);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.75) 0 2px,transparent 2px 5px)} .ycal__src{margin:.4rem 0 0;font-size:var(--fs-sm);color:var(--muted);display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:baseline} .ycal__src a{color:var(--action);text-decoration:underline;text-underline-offset:2px;min-height:24px;display:inline-flex;align-items:center} .d__n{position:relative} .t-hol .d__n{background:#FFD447;color:var(--navy);font-weight:700;box-shadow:inset 0 0 0 1.5px #E0A800} .is-today .d__n{box-shadow:inset 0 0 0 2px var(--signal);font-weight:700} .ycal__detail{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line-soft)} .ycal__mh{margin:0 0 1rem;font-size:1.2rem;color:var(--navy)} .ycal__grps{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.4rem 2.4rem;align-items:start} .ycal__grp{padding-left:.85rem;border-left:3px solid var(--c,var(--line))} .ycal__un .ycal__grp{margin-top:.8rem} .ycal__grp--adm{--c:#8B6FD6}.ycal__grp--moe{--c:#2E9E5B}.ycal__grp--intl{--c:var(--action)}.ycal__grp--exam{--c:#D9665D}.ycal__grp--hol{--c:#E0A800} .ycal__gh{margin:0 0 .45rem;font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .ycal__ev{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .ycal__ev li{display:grid;gap:.1rem;font-size:var(--fs-sm);line-height:1.45} .ycal__ev b{color:var(--ink);font-weight:600} .ycal__ev li>span{color:var(--muted)} .ycal__none{margin:0;font-size:var(--fs-sm);color:var(--muted)} .ycal__un{margin-top:1.4rem} .ycal__un .ycal__unh{justify-content:flex-start;gap:.6rem} .ycal__un .ycal__unh::after{margin-left:0} .ycal__unh{cursor:pointer;min-height:44px;display:flex;align-items:center;list-style:none;margin:0;font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .ycal__mnav{display:none} .cal__list{margin-top:2.4rem;border-top:1px solid var(--line-soft)} .cal__list>summary{list-style:none;display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:1rem 0;min-height:44px;font-weight:600;color:var(--navy)} .cal__list>summary::-webkit-details-marker{display:none} .cal__list>summary::after{content:"";width:.45rem;height:.45rem;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)} .cal__list[open]>summary::after{transform:rotate(-135deg)} .cal__list .cal{row-gap:2.4rem;margin-top:.6rem} @media (max-width:1100px){.ycal__grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:640px){ /* Phone: one month at a time, as a phone calendar does — month name between two arrows, a full-width month with comfortable day cells, its dates grouped directly beneath. */ .ycal__bar{flex-direction:column;align-items:stretch;gap:.9rem;margin-bottom:1rem} .ycal__year{display:none} /* every filter on screen, every label on one line: the chips wrap as whole chips, never mid-label */ .ycal__chips{display:flex;flex-wrap:wrap;gap:.45rem} .chip{flex:1 1 auto;justify-content:center;min-height:44px;padding:.45rem .75rem;font-size:.85rem;white-space:nowrap} .ycal__mnav{display:flex;align-items:center;justify-content:space-between;margin:.4rem 0 .6rem} .ycal__mlab{font-size:1.25rem;font-weight:700;color:var(--navy)} .ycal__grid{display:block} .ym{display:none;width:100%;padding:.2rem 0 .4rem;border:0;background:none;box-shadow:none;cursor:default} .ym.is-on{display:flex;border:0;box-shadow:none;background:none} .ym__n{display:none} .ym__g{gap:8px 0} .ym__g .ym__w{font-size:.75rem} .d__n{width:2.5rem;height:2.5rem;font-size:1rem} .ycal__detail{margin-top:1.2rem;padding-top:1.2rem} .ycal__detail .ycal__mh{display:none} .ycal__grps{grid-template-columns:1fr;gap:1.2rem} } } @media (prefers-reduced-motion:reduce){.road__track::after,.road__dot{transition:none}} .ycal__unh::-webkit-details-marker{display:none} .ycal__unh::after{content:"";margin-left:auto;width:.4rem;height:.4rem;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)} .ycal__un[open] .ycal__unh::after{transform:rotate(-135deg)} .ycal__un[open] .ycal__ev{margin-top:.4rem} .cal__block--wide{grid-column:1 / -1} .dtable a{color:var(--navy);text-underline-offset:.2em} /* ---------- School Calendar page and this-month card (11/10 evening) ---------- */ .hero--slim{padding-block:3.5rem 4rem} .section--slim{padding-block:2.5rem} /* Month / Year switch: the same small segmented control idea as the payment switcher, quieter. */ .vseg{display:inline-flex;padding:3px;border-radius:12px;background:var(--mist);border:1px solid var(--line-soft)} .vseg button{min-height:38px;padding:0 1.1rem;border:0;border-radius:9px;background:none;font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--muted);cursor:pointer;transition:color .2s,background .2s,box-shadow .2s} .vseg button[aria-pressed="true"]{background:#fff;color:var(--navy);font-weight:600;box-shadow:0 1px 2px rgba(2,46,100,.08),0 4px 12px rgba(2,46,100,.08)} .vseg button:active{transform:scale(.97)} /* Month view (desktop and tablet): one large month, its dates beside it; the year stepper gives way to the month stepper. Year view: the twelve months, a month opens Month view. */ .ycal.is-year .ycal__mnav,.ycal.is-year .ycal__detail{display:none} @media (min-width:641px){ .ycal.is-month .ycal__year{display:none} .ycal.is-month .ycal__mnav{display:flex;align-items:center;gap:1rem;margin:0 0 1rem} .ycal.is-month .ycal__mlab{min-width:12rem;text-align:center;font-size:1.35rem;font-weight:700;color:var(--navy)} .ycal.is-month .ycal__body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3.5rem;align-items:start} .ycal.is-month .ycal__grid{display:block} .ycal.is-month .ym{display:none} .ycal.is-month .ym.is-on{display:flex;width:100%;padding:0;border:0;background:none;box-shadow:none;cursor:default} .ycal.is-month .ym__n{display:none} .ycal.is-month .ym__g{gap:10px 0} .ycal.is-month .ym__g .ym__w{font-size:.78rem} .ycal.is-month .d__n{width:2.9rem;height:2.9rem;font-size:1.05rem} .ycal.is-month .ycal__detail{margin-top:0;padding-top:.2rem;border-top:0} .ycal.is-month .ycal__detail .ycal__mh{display:none} .ycal.is-month .ycal__grps{grid-template-columns:1fr;gap:1.4rem} } @media (max-width:900px) and (min-width:641px){.ycal.is-month .ycal__body{grid-template-columns:1fr;gap:1.6rem}} @media (max-width:640px){.vseg{display:none}} /* This month in Singapore schools: one quiet card, heading left, up to four dates, one link. */ .mcard{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;gap:1.2rem 2.4rem;align-items:center;padding:1.6rem 1.8rem;border-radius:20px;background:#fff;border:1px solid var(--line-soft);box-shadow:0 1px 2px rgba(2,46,100,.04),0 12px 32px rgba(2,46,100,.06)} .mcard__hd{display:flex;gap:.9rem;align-items:flex-start} .mcard__ic{flex:0 0 auto;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--mist);color:var(--navy)} .mcard__ic svg{width:1.3rem;height:1.3rem} .mcard__h{margin:0;font-size:1.1rem;line-height:1.3;color:var(--navy)} .mcard__m{margin:.2rem 0 0;font-size:var(--fs-sm);color:var(--muted)} .mcard__m:empty{display:none} .mcard__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem 1.6rem} .mcard__list[hidden]{display:none} .mcard__it{display:grid;align-content:start;gap:.1rem;padding-left:.75rem;border-left:3px solid var(--c,var(--line));font-size:var(--fs-sm);line-height:1.4} .mcard__it--moe{--c:#2E9E5B}.mcard__it--intl{--c:var(--action)}.mcard__it--exam{--c:#D9665D}.mcard__it--hol{--c:#E0A800}.mcard__it--adm{--c:#8B6FD6} .mcard__t{font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .mcard__it b{color:var(--ink);font-weight:600} .mcard__d{color:var(--muted)} .mcard__x{align-self:center;font-size:var(--fs-sm);color:var(--muted)} .mcard__more{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;font-weight:600;color:var(--action);text-decoration:none;white-space:nowrap} .mcard__more svg{width:1rem;height:1rem;transition:transform .2s var(--ease)} .mcard__more:hover svg{transform:translateX(2px)} /* Without the list (no script, or the calendar could not be read) the card is heading and link. */ .mcard:not(.is-ready){grid-template-columns:minmax(0,1fr) auto} @media (max-width:900px){ .mcard,.mcard:not(.is-ready){grid-template-columns:1fr;gap:1.1rem;padding:1.3rem 1.2rem} .mcard__list{grid-template-columns:1fr 1fr} } @media (max-width:480px){.mcard__list{grid-template-columns:1fr}} .section--cal{padding-top:3rem} /* Year view: the year stepper takes the month stepper's place, on its own row under the switch and the filters, so the period control is always in one spot and the filters stay on one line. */ @media (min-width:641px){.ycal.is-year .ycal__year{order:3;width:100%;margin-top:.4rem}} /* ---------- 12/10 layout pass (desktop + phone) ---------- */ /* Heroes with no card overlapping their foot do not need the room the card takes. */ main>.hero:not(:has(+ .seam)):not(.hero--slim){padding-bottom:4.5rem} /* What We Do flows straight into its this-month card. */ .stages+.section--slim{padding-top:0} @media(max-width:900px){ main>.hero:not(:has(+ .seam)):not(.hero--slim){padding-bottom:3rem} /* The Singapore pin stays on the phone hero: it sits in its own band above the headline, right-aligned, with its name — the destination before the promise. */ .hero:has(.hero__map){padding-top:5.2rem} .hero__map{top:3.1rem} .hm__lbl{display:inline} .planner{padding:1rem 1rem} } @media(max-width:560px){ .hero__cta .btn{flex:1 1 100%;justify-content:center;text-align:center} } @media(max-width:900px){.hero__map{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 80%);mask-image:linear-gradient(to bottom,#000 55%,transparent 80%)}} /* ---------- 12/10 loading feel ---------- */ /* Page to page: a short cross-fade between whole pages instead of a white flash, where the browser supports it (Chrome, Edge, Safari 18.2+); elsewhere pages simply load as before. The top bar is its own layer so it stays put while the content changes under it. */ @view-transition{navigation:auto} .nav{view-transition-name:sru-nav} ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:ease-out} @media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}} .navprog{height:3px} /* This-month card: placeholder rows while the dates load, gone the moment they arrive. */ .mcard__skel{display:none;gap:.7rem} .js .mcard:not(.is-ready) .mcard__skel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .mcard__skel span{height:3.2rem;border-radius:10px;background:linear-gradient(90deg,var(--mist) 25%,var(--line-soft) 37%,var(--mist) 63%);background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite} .js .mcard:not(.is-ready){grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto} @media (max-width:900px){.js .mcard__skel{grid-template-columns:1fr!important}.js .mcard:not(.is-ready){grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.mcard__skel span{animation:none;background:var(--line-soft)}} .mcard.is-ready .mcard__list{animation:mcin .35s cubic-bezier(.2,.9,.25,1) both} @keyframes mcin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.mcard.is-ready .mcard__list{animation:none}} .js .mcard.is-off .mcard__skel{display:none} .js .mcard.is-off{grid-template-columns:minmax(0,1fr) auto} @media (max-width:900px){.js .mcard.is-off{grid-template-columns:1fr}} /* ---------- 12/10: clickable cards, people, partners, footer ---------- */ /* A card that is a link looks like one: it lifts on hover, shows a small arrow, and gives on press (pointer-down, via [data-pressed]). The whole card is the target. */ .card-link{display:flex;color:inherit;text-decoration:none;border-radius:18px;transition:transform .18s var(--ease),box-shadow .2s var(--ease),border-color .2s} .card-link:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(2,46,100,.05),0 14px 34px rgba(2,46,100,.1)} .card-link:active{transform:scale(.985)} .card-link__more{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;font-size:var(--fs-sm);font-weight:600;color:var(--action)} .card-link__more::after{content:"";width:.45rem;height:.45rem;border-right:1.8px solid currentColor;border-top:1.8px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)} .card-link:hover .card-link__more::after{transform:translateX(2px) rotate(45deg)} @media (prefers-reduced-motion:reduce){.card-link,.card-link:hover,.card-link:active{transform:none}} /* People: intro left, the founders as two cards right — no empty half. */ .people-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.5rem 4rem;align-items:center} .people-split .sec-hd{margin-bottom:0} .people-split .people{grid-template-columns:minmax(0,1fr);max-width:none;gap:1rem} .person.card-link{gap:1.2rem;align-items:center;padding:1.1rem 1.3rem;background:#fff;border:1px solid var(--line-soft)} .person.card-link .person__ph{width:84px;height:84px;overflow:hidden} .person.card-link .person__ph.has-img>img{width:100%;height:100%;object-fit:cover} @media(max-width:900px){.people-split{grid-template-columns:minmax(0,1fr);gap:1.6rem}} /* Partners on About: logo on a white tile, the name beneath; a list so more can be added. */ .partners{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem} .partner a,.partner__tile{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:1.6rem 1.4rem;border-radius:18px;background:#fff;border:1px solid var(--line-soft);text-decoration:none;color:var(--muted);text-align:center;transition:transform .18s var(--ease),box-shadow .2s var(--ease)} .partner a:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(2,46,100,.1)} .partner__logo{display:block;width:100%;max-width:13rem} .partner__logo img{display:block;width:100%;height:auto} .partner__name{font-size:var(--fs-sm);font-weight:600;color:var(--navy)} .partners-sec{padding-block:4rem} /* Footer: three aligned columns — brand, links, contact — and the copyright under them. */ .foot__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:1.6rem 3rem;align-items:start} .foot__brand{flex-direction:column;align-items:flex-start;gap:.35rem} .foot__links{flex-direction:column;gap:.55rem;margin-inline:0} @media(max-width:900px){.foot__in{grid-template-columns:minmax(0,1fr);gap:1.4rem}.foot__links{flex-direction:row;flex-wrap:wrap;gap:.4rem 1.4rem}} /* Footer links: a compact column for a pointer; full 44px rows where the input is a finger. */ @media (pointer:fine){.foot__links a{min-height:30px}.foot__links{row-gap:.25rem}} /* Contact (12/10): the form and every other way to reach us side by side. */ .contact-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:3rem 4rem;align-items:start} .contact-grid .form{max-width:none} .contact-side{position:sticky;top:6.5rem;padding:1.8rem;border-radius:20px;background:var(--mist);border:1px solid var(--line-soft)} .contact-side__h{font-size:1.35rem;color:var(--accent);margin:0 0 .4rem} .contact-side__intro{margin:0 0 1.2rem;color:var(--muted);font-size:var(--fs-sm)} .apps{display:grid;gap:.7rem} .app-btn{display:flex;align-items:center;gap:.8rem;min-height:56px;padding:.55rem 1rem .55rem .55rem;border-radius:14px;background:#fff;border:1px solid var(--line-soft);color:var(--navy);font-weight:600;text-decoration:none;transition:transform .15s var(--ease),box-shadow .2s var(--ease)} .app-btn:hover{box-shadow:0 8px 22px rgba(2,46,100,.1)} .app-btn:active{transform:scale(.98)} .app-ico{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:11px;color:#fff;flex:0 0 auto} /* 12/10: the apps in the site's own colours, not their brand green. Navy tile on light; on navy, a white tile. */ .app-ico--wa,.app-ico--line,.app-ico--msg{background:var(--navy)} /* 23/10: an app button with no link set is not shown. */ .app-btn[href="#"]{display:none} .btn--app .app-ico{background:#fff;color:var(--navy)} .on-light .btn--app .app-ico{background:var(--navy);color:#fff} .app-ico__g{width:1.4rem;height:1.4rem} .btn--app{display:inline-flex;align-items:center;gap:.55rem} .btn--app .app-ico{width:1.7rem;height:1.7rem;border-radius:8px} .btn--app .app-ico__g{width:1.05rem;height:1.05rem} .contact-side__facts{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line);display:grid;gap:.8rem} .contact-side__fact{display:flex;gap:.65rem;align-items:flex-start;margin:0;font-size:var(--fs-sm);color:var(--ink)} .contact-side__fact svg{width:1.1rem;height:1.1rem;flex:0 0 auto;margin-top:.15em;color:var(--action)} .contact-side__fact a{color:var(--action)} .contact-side__time{color:var(--muted)} @media(max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr);gap:2rem}.contact-side{position:static;padding:1.4rem}} /* Partners: a centred row, so one partner reads as a feature, not an empty grid. */ .partners-sec .sec-hd{text-align:center;margin-inline:auto} .partners{display:flex;flex-wrap:wrap;justify-content:center} .partners .partner{flex:0 1 17rem} .partner__name{font-weight:500;color:var(--muted);font-size:.8rem} /* ---------- 12/10 links that land on the exact thing ---------- */ /* Arriving at a section: its heading lands just below the bar, never under it. */ section[id],[id].anchor{scroll-margin-top:84px} /* A card whose one link covers the whole card (What We Do, How It Works). */ .fcard,.step--link{position:relative} .stretch::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1} .fcard,.step--link{transition:transform .18s var(--ease),box-shadow .2s var(--ease)} .fcard:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(2,46,100,.1)} .step--link h3 a{color:inherit;text-decoration:none} .step--link h3 a::before{content:"";display:inline-block} .step--link:hover h3{color:var(--action)} .step--link h3 a>span.chev,.step--link h3 a::before{display:none} .step--link h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .2s var(--ease)} .step--link:hover h3 a{background-size:100% 1.5px} .step--link .step__n{transition:background .2s,color .2s} .step--link:hover .step__n{background:var(--navy);color:#fff} @media (prefers-reduced-motion:reduce){.fcard:hover{transform:none}} /* One clear next step under a service, a story or a milestone. */ .svc__next{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.3rem 0 0} .svc__next a,.mile__go,.xp__more,.sec-link{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;font-weight:600;color:var(--action);text-decoration:none} .svc__next a::after,.mile__go::after,.xp__more::after,.sec-link::after{content:"";width:.42rem;height:.42rem;border-right:1.8px solid currentColor;border-top:1.8px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)} .svc__next a:hover::after,.mile__go:hover::after,.xp__more:hover::after,.sec-link:hover::after{transform:translateX(2px) rotate(45deg)} .svc__next a:hover,.mile__go:hover,.xp__more:hover,.sec-link:hover{text-decoration:underline;text-underline-offset:.2em} .section--navy .svc__next a,.section--navy .svc__next a:hover{color:#fff} .svc__hlink{color:inherit;text-decoration:none} .svc__hlink:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em} .mile__go{margin-top:.8rem} .xp__more{margin-top:.8rem} .sec-hd--link{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;max-width:none} /* This-month items: each opens that month, that type, on the calendar. */ .mcard__it a{display:grid;gap:.1rem;color:inherit;text-decoration:none;border-radius:6px} .mcard__it a:hover b{color:var(--action);text-decoration:underline;text-underline-offset:.2em} /* A section on the same background as the one above continues it: no second top gap. */ .section.section--cont{padding-top:0} .compare__scroll[data-fits="true"]+.compare__hint{display:none} /* The logo already says the school's name; the caption stays for screen readers only. */ .partner a:has(img) .partner__name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Forms (12/10): a field for bots only. Off screen, out of the tab order, ignored by readers. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .status a{color:inherit;text-decoration:underline;text-underline-offset:.2em} /* Instagram tiles (12/10): each one a post, picked in the admin. The photo fills the 4:5 tile; empty, the word "Reel" sits centred as before. */ a.igp__t{text-decoration:none;color:var(--muted);transition:opacity .2s var(--ease)} .igp__img{display:grid;place-items:center;width:100%;height:100%} .igp__img img{width:100%;height:100%;object-fit:cover;display:block} a.igp__t:hover .igp__img.has-img{opacity:.88} /* Thank-you (12/10, Au): the button gets room from the message above it. */ .prose+.hero__cta{margin-top:2rem} /* Terms (16/10): her effective date above her opening paragraphs; numbered subsection titles in her bold. */ .doc__eff{font-size:var(--fs-sm);font-weight:600;color:var(--navy);margin:0 0 1rem} .doc__intro{margin-bottom:2.4rem} .doc__body p>strong:only-child{color:var(--navy)} .byp__terms{margin:.6rem 0 0;font-size:var(--fs-sm)}.byp__terms a{color:var(--action);font-weight:600} /* Founders, Homepage (16/10, Ice's pick A): large portraits side by side, the whole portrait a link to her bio. */ .people-row .sec-hd{max-width:44rem;margin-bottom:2.2rem} .people-row .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;max-width:none} .people-row .person.card-link{flex-direction:column;align-items:stretch;gap:1rem;padding:0;background:none;border:0;border-radius:22px} .people-row .person.card-link:hover{transform:none;box-shadow:none} .people-row .person.card-link .person__ph{width:100%;height:auto;aspect-ratio:4/5;max-height:520px;border-radius:22px;overflow:hidden;border:0} .people-row .person.card-link .person__ph.has-img>img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform:none;transition:transform .5s var(--ease)} .people-row .person.card-link:hover .person__ph.has-img>img{transform:scale(1.025)} .people-row .person h3{font-size:1.5rem} @media(max-width:700px){.people-row .people{gap:1rem}.people-row .person h3{font-size:1.1rem}.people-row .person p{font-size:.8rem}} @media (prefers-reduced-motion:reduce){.people-row .person.card-link:hover .person__ph.has-img>img{transform:none}} /* Contact (16/10, Ice's picks): the form alone and centred; "Message us directly" as its own band; the map beside the address. */ .contact-grid{grid-template-columns:minmax(0,1fr);justify-items:center} .contact-grid__form{width:100%;max-width:760px} .direct-band__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:2rem 4rem;align-items:start} .direct-band .contact-side__h{font-size:clamp(1.6rem,3vw,2rem);margin:0 0 .4rem} .direct-band__r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem} .direct-band .apps{display:contents} .direct-band .contact-side__facts{grid-column:1/-1;margin-top:.4rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2.2rem} .mapsplit{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem 3rem;align-items:center} .mapsplit .map-ph{aspect-ratio:4/3;border-radius:22px} .mapsplit .map-ph.has-embed{padding:0;border:0;overflow:hidden;background:var(--mist)} .mapsplit .map-ph iframe{display:block;width:100%;height:100%;border:0} .mapside__btns{display:grid;gap:.7rem;margin-top:1.4rem} .mapside .contact-side__fact{font-size:var(--fs-body)} @media(max-width:900px){.direct-band__in,.mapsplit{grid-template-columns:minmax(0,1fr)}.direct-band__r,.direct-band .contact-side__facts{grid-template-columns:minmax(0,1fr)}} .foot__home{color:#fff;text-decoration:none}.foot__home:hover{text-decoration:underline;text-underline-offset:.2em}.drawer__home{text-decoration:none} /* Partners: every tile the same height, the logo whole inside it. */ .partner__logo{height:120px;width:100%;background:none} .partner__logo.has-img img{width:100%;height:100%;object-fit:contain} .partner a:not([href]){cursor:default}.partner a:not([href]):hover{transform:none;box-shadow:none} .doc__body ul{list-style:disc}.doc__body ol{list-style:decimal}.doc__body li::marker{color:var(--action)} /* 23/10: the drawer panel takes focus when opened by touch; it needs no ring of its own. */ .drawer:focus{outline:none} /* 23/10 (R4-04): with the map off, the address and its line sit alone; no map, no directions to a registered address. */ .mapsplit[data-map="off"]{grid-template-columns:minmax(0,1fr)} .mapsplit[data-map="off"] .mapside__btns{display:none} /* 23/10: comparison on phones (Ice's option 2). One answer column at a time beside Start Right Up. Hiding a cell moves the next one left in its row, so every row keeps the same three columns. */ .cmp-pick{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .9rem} .cmp-pick[hidden]{display:none} .cmp-pick__l{width:100%;font-size:var(--fs-xs);font-weight:600;color:var(--muted)} .cmp-pick__b{min-height:44px;padding:.45rem .95rem;border-radius:99px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s} .cmp-pick__b[aria-pressed="true"]{background:var(--navy);color:#fff} .cmp-pick__b:active{transform:scale(.97)} .ctable[data-only="2"] :is(thead,tbody) tr>:not(:first-child):not(.us):not(:nth-child(2)), .ctable[data-only="3"] :is(thead,tbody) tr>:not(:first-child):not(.us):not(:nth-child(3)), .ctable[data-only="4"] :is(thead,tbody) tr>:not(:first-child):not(.us):not(:nth-child(4)){display:none} .ctable.ctable[data-only]{min-width:0;table-layout:fixed} .ctable.ctable[data-only] th,.ctable.ctable[data-only] td{white-space:normal;padding:.8rem .6rem;text-align:left;vertical-align:top;font-size:.86rem;overflow-wrap:anywhere} .ctable.ctable[data-only] th:first-child,.ctable.ctable[data-only] td:first-child{position:static;box-shadow:none;width:32%} .ctable[data-only] thead th small{display:none} .ctable.ctable[data-only] td.us .tick{width:1rem;height:1rem;margin-right:.3rem} /* 25/10c: Google Reviews on Case Studies — the same card language as the testimonials above. */ .grev__sum{margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--muted)} .grev{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1.2rem} .grev__i{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:1.4rem 1.5rem;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:.6rem;min-width:0} .grev__st{margin:0;color:#8F5A00;letter-spacing:.12em;font-size:1rem;line-height:1} .grev__t{margin:0;flex:1;font-size:var(--fs-sm);color:var(--ink);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .grev__by{margin:0;font-size:var(--fs-xs);color:var(--muted)} .grev__by a{color:var(--navy);font-weight:600} .grev__act{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin:1.8rem 0 0} .grev__all{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--action)} .grev__src{font-size:var(--fs-xs);color:var(--muted)} /* ---------- Cookie choice (27/10) ---------- A card pinned to the bottom of the screen, below the drawer and its scrim. Accept and Decline are the same size and weight: declining is as easy as accepting. Hidden unless the script shows it (see site.js, Cookie choice). */ .consent{position:fixed;z-index:50;left:max(var(--gutter),env(safe-area-inset-left));right:max(var(--gutter),env(safe-area-inset-right)); bottom:max(1rem,env(safe-area-inset-bottom));margin-inline:auto;max-width:44rem; display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;padding:1.1rem 1.25rem; background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(2,20,45,.18)} .consent[hidden]{display:none} .consent__t{flex:1 1 18rem;min-width:0;margin:0;font-size:var(--fs-sm);line-height:1.55} .consent__t a{color:var(--navy);font-weight:600;text-underline-offset:.2em} .consent__b{display:flex;gap:.6rem;flex:0 0 auto} .consent__b .btn{min-height:44px;min-width:7.5rem;justify-content:center} .consent__no{background:#fff;color:var(--navy);border-color:var(--navy)} .consent__no:hover{background:var(--mist)} .consent__yes{background:var(--navy);color:#fff;border-color:var(--navy)} .consent__yes:hover{background:var(--navy-lift);border-color:var(--navy-lift)} .consent .btn:focus-visible{outline:2px solid var(--action);outline-offset:2px} @media (max-width:560px){ .consent{padding:1rem} .consent__b{flex:1 1 100%} .consent__b .btn{flex:1 1 0;min-width:0} } /* "Cookie settings": a footer link that is a button, so it reads like its neighbours. */ .foot__cookie{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--on-navy-muted); min-height:44px;display:inline-flex;align-items:center} .foot__cookie:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em} .foot__cookie[hidden]{display:none} .lp-copyright a{color:var(--on-navy-muted);text-underline-offset:.2em} .lp-copyright a,.lp-copyright .foot__cookie{margin-left:.9rem} .lp-copyright a:hover{color:#fff} /* The one line under each form saying what the details are used for. */ .form-note{margin:.8rem 0 0;font-size:var(--fs-xs);color:var(--muted);line-height:1.5} .form-note a{color:var(--navy);font-weight:600;text-underline-offset:.2em} @media (pointer:fine){.foot__cookie{min-height:30px}}