/* Layout: "the career staircase". Light mint paper with deep teal ink, everything climbs in steps like the AiG mark (teal arch, gold staircase arrow). Bold grotesque headlines, stepped photo stack, stepped pay chart, stepped path. */
@font-face{font-family:"Bricolage Grotesque";font-weight:500;font-display:swap;src:url(fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:700;font-display:swap;src:url(fonts/instrument-sans-latin-700-normal.woff2) format("woff2")}

:root{
  --paper:#F3F8F6;     /* mint-white page */
  --card:#FFFFFF;
  --ink:#062E30;       /* deep teal ink, text and dark bands */
  --ink-2:#0B4144;
  --muted:#4F6B6C;
  --line:#D5E6E2;
  --teal:#0FA39A;      /* logo arch */
  --teal-2:#0A6F73;
  --mint:#DDF4EF;
  --sun:#FFC94D;       /* logo staircase, light end */
  --orange:#E8742A;    /* logo staircase, dark end */
  --on-dark:#EAF7F4;
  --on-dark-muted:#A7C9C4;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --sans:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --gut-l:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.6 var(--sans)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;text-wrap:balance;font-family:var(--display);letter-spacing:-.025em}
h2{font-size:clamp(32px,4.8vw,56px);line-height:1;font-weight:800}
h3{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.mark{background:linear-gradient(transparent 58%,var(--sun) 58%,var(--sun) 92%,transparent 92%);padding:0 .06em}
.wrap{max-width:1220px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.tagline{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-2)}
.tagline::before{content:"";width:18px;height:10px;background:linear-gradient(var(--orange),var(--orange)) 0 100%/6px 4px no-repeat,linear-gradient(var(--orange),var(--orange)) 6px 50%/6px 7px no-repeat,linear-gradient(var(--orange),var(--orange)) 12px 0/6px 10px no-repeat}
.lead{font-size:18.5px;line-height:1.6;color:var(--muted);max-width:58ch}
.band{padding-block:clamp(64px,9vw,120px)}
.head{display:grid;gap:16px;max-width:760px;margin-bottom:48px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:14px;border:2px solid transparent;font:700 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn svg{width:19px;height:19px;flex:none}
.btn.go{background:var(--orange);color:#fff;box-shadow:0 5px 0 #A9501A}
.btn.go:hover{transform:translateY(-2px);box-shadow:0 7px 0 #A9501A}
.btn.go:active{transform:translateY(3px);box-shadow:0 2px 0 #A9501A}
.btn.line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.btn.wa{background:#168A4C;color:#fff}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(243,248,246,.9);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:46px;height:46px}
.brand b{display:block;font:800 19px/1 var(--display);letter-spacing:-.02em}
.brand b{font-size:21px}
.brand b em{font-style:normal;color:var(--orange)}
.links{display:flex;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.links a{display:block;padding:10px 12px;font:600 15px/1 var(--sans);text-decoration:none;border-radius:10px}
.links a:hover{background:var(--mint)}
.top .btn{min-height:44px;padding:0 18px;font-size:15px;box-shadow:0 4px 0 #A9501A}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;font:700 13px/1 var(--sans)}
.drawer{display:none;background:var(--paper);padding:6px var(--gut-r) 24px var(--gut-l);border-bottom:1px solid var(--line)}
.drawer.open{display:grid;gap:2px}
.drawer a{padding:13px 0;font:700 22px/1.15 var(--display);text-decoration:none;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:16px;font-family:var(--sans)}
@media (max-width:1000px){.links,.top .btn{display:none}.menu-btn{display:block}}

/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hero::after{content:"";position:absolute;width:640px;height:640px;right:-160px;top:-220px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(15,163,154,.22),transparent 65%);animation:float 14s ease-in-out infinite alternate}
@keyframes float{to{transform:translate(-60px,50px)}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:40px;align-items:center;padding-block:clamp(40px,6vw,84px) clamp(56px,7vw,96px)}
.reg-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line);font:600 13.5px/1.2 var(--sans)}
.reg-pill i{font-style:normal;background:var(--ink);color:var(--sun);padding:5px 9px;border-radius:999px;font-weight:700}
.hero h1{font-size:clamp(44px,7vw,92px);line-height:.94;font-weight:800;margin:22px 0 22px}
.hero h1 .t{color:var(--teal-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.ticks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;padding:0;list-style:none;font:600 14.5px/1.3 var(--sans)}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks li::before{content:"";width:18px;height:18px;border-radius:5px;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat;flex:none}

.stairs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;padding-top:7%}
.stairs figure{margin:0;position:relative;overflow:hidden;border-radius:22px 22px 6px 6px;max-width:100%;box-shadow:0 24px 40px -26px rgba(6,46,48,.55)}
.stairs figure img{width:100%;height:100%;object-fit:cover}
.stairs figure:nth-child(1){aspect-ratio:3/3.6}
.stairs figure:nth-child(2){aspect-ratio:3/4.5}
.stairs figure:nth-child(3){aspect-ratio:3/5.4}
.stairs figcaption{position:absolute;left:8px;right:8px;bottom:8px;padding:9px 10px;border-radius:12px;background:var(--card);font:700 13px/1.15 var(--sans);display:grid;gap:3px}
.stairs figcaption small{font:700 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.stairs .arrow{position:absolute;left:0;top:1.6%;width:100%;height:auto;pointer-events:none;overflow:visible;filter:drop-shadow(0 3px 0 rgba(169,80,26,.35))}
.stairs .arrow path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.6s .3s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.stairs .base{position:absolute;left:-12px;right:-12px;bottom:-14px;height:14px;border-radius:0 0 12px 12px;background:var(--ink)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.stairs{max-width:560px}}
@media (max-width:520px){.stairs{gap:7px;padding-top:9%}.stairs figcaption{left:5px;right:5px;bottom:5px;padding:6px;font-size:11px}.stairs figcaption small{font-size:9px}}

/* numbers strip */
.numbers{background:var(--ink);color:var(--on-dark)}
.numbers .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:30px}
.num{display:grid;gap:4px;padding:6px 22px;border-left:1px solid rgba(255,255,255,.14)}
.num:first-child{border-left:0;padding-left:0}
.num b{font:800 clamp(30px,3.6vw,44px)/1 var(--display);color:var(--sun);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.num span{font-size:14px;color:var(--on-dark-muted);line-height:1.35}
@media (max-width:760px){.numbers .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}.num:nth-child(3){border-left:0;padding-left:0}}

/* how it works + pay */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:26px}
.week div{border-radius:12px;padding:14px 6px;text-align:center;font:700 14px/1.2 var(--sans)}
.week small{display:block;font-weight:500;font-size:11.5px;margin-top:4px;opacity:.85}
.week .c{background:var(--teal-2);color:#fff}
.week .s{background:var(--sun);color:var(--ink)}
.key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:13.5px;color:var(--muted)}
.key i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.pay{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:clamp(22px,3vw,34px);display:grid;gap:22px}
.pay h3{font-size:26px;font-weight:800}
.chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;height:240px;border-bottom:3px solid var(--ink);padding:0 4px}
.col{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;gap:8px}
.col b{text-align:center;font:800 18px/1 var(--display);font-variant-numeric:tabular-nums}
.col i{display:block;border-radius:10px 10px 0 0;background:linear-gradient(180deg,var(--sun),var(--orange))}
.yrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 4px;margin-top:-12px;font:700 13px/1 var(--sans);color:var(--muted);text-align:center}
.src{font-size:13px;color:var(--muted)}

/* fields */
.mint{background:var(--mint)}
.fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.f{position:relative;background:var(--card);border-radius:22px 22px 22px 4px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s}
.f:hover{transform:translateY(-4px)}
.f .ph{aspect-ratio:4/3;max-width:100%;overflow:hidden}
.f .ph img{width:100%;height:100%;object-fit:cover}
.f .in{padding:18px 18px 20px;display:grid;gap:8px}
.f .yrs-pill{width:fit-content;font:700 12px/1 var(--sans);padding:6px 9px;border-radius:999px;background:var(--mint);color:var(--teal-2)}
.f p{font-size:14.5px;color:var(--muted)}
.f.icon{background:var(--teal-2);color:#fff}
.f.icon p{color:#CDEBE6}
.f.icon .yrs-pill{background:rgba(255,255,255,.14);color:var(--sun)}
.f.icon .ic{margin:20px 18px 0;width:52px;height:52px;border-radius:14px;background:var(--sun);color:var(--ink);display:grid;place-items:center}
.f.icon .ic svg{width:26px;height:26px}
@media (max-width:1000px){.fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.fields{grid-template-columns:1fr}}

/* path: literal staircase */
.dark{background:var(--ink);color:var(--on-dark)}
.dark .lead{color:var(--on-dark-muted)}
.dark .tagline{color:var(--sun)}
.path{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;list-style:none;margin:0;padding:0}
.st{display:grid;gap:8px;align-content:start;padding:18px 16px 20px;border-radius:16px 16px 0 0;background:var(--ink-2);border-top:4px solid var(--teal)}
.st:nth-child(1){min-height:200px}.st:nth-child(2){min-height:240px}.st:nth-child(3){min-height:280px}.st:nth-child(4){min-height:320px}.st:nth-child(5){min-height:360px}.st:nth-child(6){min-height:400px;border-top-color:var(--sun);background:linear-gradient(180deg,#0E5154,var(--ink-2))}
.st .n{font:800 34px/1 var(--display);color:var(--sun)}
.st small{font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.st p{font-size:14px;color:var(--on-dark-muted)}
.ground{height:10px;background:var(--teal);border-radius:0 0 8px 8px}
@media (max-width:980px){.path{grid-template-columns:repeat(3,minmax(0,1fr))}.st:nth-child(n){min-height:0}}
@media (max-width:560px){.path{grid-template-columns:1fr;gap:8px}.st{border-radius:14px;border-top:0;border-left:4px solid var(--teal)}.st:nth-child(1){margin-right:50px}.st:nth-child(2){margin-right:40px}.st:nth-child(3){margin-right:30px}.st:nth-child(4){margin-right:20px}.st:nth-child(5){margin-right:10px}.st:nth-child(6){border-left-color:var(--sun)}.ground{display:none}}
.path-photo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center;margin-top:48px;background:var(--ink-2);border-radius:24px;overflow:hidden}
.path-photo img{width:100%;height:100%;min-height:260px;object-fit:cover}
.path-photo div{padding:28px;display:grid;gap:12px}
.path-photo h3{font-size:26px;font-weight:800}
@media (max-width:760px){.path-photo{grid-template-columns:1fr}.path-photo div{padding:0 22px 26px}}

/* visas */
.visas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.v{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3vw,32px);display:grid;gap:16px;align-content:start}
.v .code{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.v .code b{font:800 46px/1 var(--display);color:var(--teal-2);letter-spacing:-.03em}
.v .code span{font:700 12px/1 var(--sans);padding:7px 10px;border-radius:999px;background:var(--mint);color:var(--teal-2)}
.v h3{font-size:24px;font-weight:800}
.v ol{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:r}
.v li{counter-increment:r;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:15.5px}
.v li::before{content:counter(r);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--sun);font:800 13px/1 var(--display)}
.v .foot{font-size:14px;color:var(--muted);padding-top:14px;border-top:2px dotted var(--line)}
@media (max-width:820px){.visas{grid-template-columns:1fr}}

/* check + services */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:880px){.two{grid-template-columns:1fr}}
.check{background:var(--teal-2);color:#fff;border-radius:24px;padding:clamp(22px,3vw,32px);display:grid;gap:18px;align-content:start;position:relative;overflow:hidden}
.check::after{content:"";position:absolute;right:-30px;bottom:-30px;width:180px;height:180px;background:url(img/aig-mark.svg) center/contain no-repeat;opacity:.13}
.check h3{font-size:28px;font-weight:800}
.check fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.check legend{font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--sun);margin-bottom:10px}
.tg{display:flex;align-items:center;gap:12px;font-size:15.5px;cursor:pointer}
.tg input{width:20px;height:20px;accent-color:var(--sun);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{cursor:pointer;position:relative}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:10px 15px;border-radius:12px;border:2px solid rgba(255,255,255,.35);font:700 14px/1 var(--sans)}
.chips input:checked + span{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.chips input:focus-visible + span{outline:3px solid #fff;outline-offset:2px}
.result{position:relative;z-index:1;background:var(--ink);border-radius:16px;padding:16px 18px;display:grid;gap:4px}
.result b{font:800 21px/1.15 var(--display);color:var(--sun)}
.result span{font-size:14.5px;color:var(--on-dark-muted)}
.svc{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3vw,32px);display:grid;gap:16px;align-content:start}
.svc h3{font-size:28px;font-weight:800}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.svc li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;font-size:15.5px}
.svc li .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--mint);color:var(--teal-2)}
.svc li .ic svg{width:20px;height:20px}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
@media (max-width:880px){.faq{grid-template-columns:1fr}}
.qa{display:grid;gap:0;border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:20px 0;font:700 18px/1.3 var(--display);letter-spacing:-.01em;display:flex;justify-content:space-between;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:28px;height:28px;border-radius:8px;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6F73' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s}
.qa details[open] summary::after{transform:rotate(45deg);background-color:var(--sun)}
.qa p{padding:0 0 20px;color:var(--muted);max-width:66ch}

/* company */
.company{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border-radius:28px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.company .logo-side{background:var(--ink);color:var(--on-dark);padding:clamp(26px,4vw,44px);display:grid;gap:18px;align-content:center;justify-items:start}
.company .logo-side img{width:clamp(110px,14vw,160px);height:auto}
.company .logo-side p{font:800 clamp(26px,3vw,34px)/1.05 var(--display);letter-spacing:-.02em}
.company .logo-side p em{font-style:normal;color:var(--sun)}
.company .logo-side small{color:var(--on-dark-muted);font-size:14px}
.company .facts{padding:clamp(24px,3.5vw,40px);display:grid;gap:18px;align-content:start}
.hrb{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hrb b{font:800 30px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hrb span{font:700 13px/1 var(--sans);padding:7px 10px;border-radius:999px;background:var(--sun)}
.facts dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 22px;margin:0;font-size:15.5px}
.facts dt{color:var(--muted);font-size:13.5px;font-weight:600;padding-top:2px}
.facts dd{margin:0;font-weight:600}
@media (max-width:820px){.company{grid-template-columns:1fr}}
@media (max-width:420px){.facts dl{grid-template-columns:1fr;gap:2px}.facts dd{margin-bottom:10px}}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}
@media (max-width:880px){.contact{grid-template-columns:1fr}}
.side{display:grid;gap:12px}
.side .photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3.4;max-width:100%}
.side .photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.side .photo p{position:absolute;left:14px;right:14px;bottom:14px;background:var(--sun);border-radius:14px;padding:12px 14px;font:800 19px/1.15 var(--display);letter-spacing:-.01em}
.row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-decoration:none}
.row .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--mint);color:var(--teal-2);flex:none}
.row .ic svg{width:22px;height:22px}
.row.wa .ic{background:#168A4C;color:#fff}
.row > span:nth-child(2){min-width:0}
.row small{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.row b{display:block;overflow-wrap:anywhere}
.copy{margin-left:auto;flex:none;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:8px 12px;font:700 12.5px/1 var(--sans);cursor:pointer;color:var(--ink)}
form.enq{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.enq h3{grid-column:1/-1;font-size:26px;font-weight:800}
.enq label{display:grid;gap:6px;font:600 13.5px/1.2 var(--sans)}
.enq .full{grid-column:1/-1}
.enq input,.enq select,.enq textarea{width:100%;font:500 15.5px/1.4 var(--sans);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:12px 14px}
.enq textarea{min-height:110px;resize:vertical}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:none;border-color:var(--teal)}
.enq .note{font-size:12.5px;color:var(--muted)}
.out{grid-column:1/-1;border-radius:14px;padding:14px 16px;background:var(--mint);border:1px solid #A9DCD3;display:grid;gap:10px;font-size:15px}
.out.err{background:#FDEDE4;border-color:#F3C3A6;color:#8A3A0E}
.out .btn{width:fit-content}
@media (max-width:560px){form.enq{grid-template-columns:1fr}}

/* footer */
footer{background:var(--ink);color:var(--on-dark-muted);padding-block:64px 26px;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:28px;background:linear-gradient(90deg,var(--teal) 0 16.66%,transparent 16.66%) 0 0/100% 4px no-repeat}
.fcols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px}
footer .brand b{color:#fff}
footer .brand b em{color:var(--sun)}
footer h4{margin:0 0 12px;font:800 15px/1 var(--display);color:#fff;letter-spacing:-.01em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer p,footer li{font-size:14.5px;line-height:1.6}
footer a{text-decoration:none}
footer a:hover{color:var(--sun)}
.slogan{font:800 30px/1.05 var(--display);color:#fff;margin:18px 0 10px;letter-spacing:-.02em}
.slogan span{color:var(--sun)}
.legal-note{margin-top:30px;font-size:12.5px;line-height:1.6;max-width:110ch}
.bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px}
@media (max-width:900px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}.fcols > div:first-child{grid-column:1/-1}}
@media (max-width:480px){.fcols{grid-template-columns:1fr}}
.fab{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:58px;height:58px;border-radius:18px;background:#168A4C;display:grid;place-items:center;box-shadow:0 5px 0 #0E5F34}
.fab svg{width:28px;height:28px}

/* motion */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes climb{from{opacity:0;transform:translateY(60px) scale(.96)}}
@keyframes pop{from{opacity:0;transform:scale(.9)}}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--teal),var(--sun),var(--orange));transform:scaleX(0);transform-origin:left}
/* hero entrance */
.hero .intro > *{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero .intro > :nth-child(1){animation-delay:.05s}.hero .intro > :nth-child(2){animation-delay:.15s}.hero .intro > :nth-child(3){animation-delay:.3s}.hero .intro > :nth-child(4){animation-delay:.42s}.hero .intro > :nth-child(5){animation-delay:.52s}
.hero .mark{background-size:0 100%;background-repeat:no-repeat;background-image:linear-gradient(transparent 58%,var(--sun) 58%,var(--sun) 92%,transparent 92%);background-color:transparent;animation:marker .9s .7s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes marker{to{background-size:100% 100%}}
.stairs figure{animation:climb .9s cubic-bezier(.2,.8,.2,1) both;translate:0 var(--py,0)}
.stairs figure:nth-child(1){animation-delay:.25s}.stairs figure:nth-child(2){animation-delay:.45s}.stairs figure:nth-child(3){animation-delay:.65s}
.stairs .arrow path{animation-delay:1.1s!important}
.stairs figcaption{animation:pop .5s both}
.stairs figure:nth-child(1) figcaption{animation-delay:.9s}.stairs figure:nth-child(2) figcaption{animation-delay:1.05s}.stairs figure:nth-child(3) figcaption{animation-delay:1.2s}
/* stepped section edges, echoing the logo staircase */
.stepped{position:relative}
.stepped::before{content:"";position:absolute;left:0;right:0;top:-27px;height:28px;background:inherit;clip-path:polygon(0 100%,0 75%,18% 75%,18% 50%,36% 50%,36% 25%,54% 25%,54% 0,100% 0,100% 100%);pointer-events:none}
.hero{padding-bottom:28px}
/* scroll reveals: visible at rest, animated only when scrolled into view */
.js .up,.js .stagger > *,.js .numbers .num{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s,box-shadow .25s,background .3s}
.js .stagger.in > *{transition-delay:calc(var(--i,0) * 80ms)}
.js .up.wait,.js .stagger.wait > *{transform:translateY(34px);opacity:.15}
.js .path.wait > *{transform:translateY(80px);opacity:.15}
.js .numbers.wait .num{transform:translateY(16px);opacity:.2}
.js .numbers.in .num:nth-child(2){transition-delay:.1s}.js .numbers.in .num:nth-child(3){transition-delay:.2s}.js .numbers.in .num:nth-child(4){transition-delay:.3s}
.chart .col i{transform-origin:bottom;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.chart .col:nth-child(2) i{transition-delay:.12s}.chart .col:nth-child(3) i{transition-delay:.24s}.chart .col:nth-child(4) i{transition-delay:.36s}
.chart .col b{transition:opacity .5s .6s}
.js .chart.wait .col i{transform:scaleY(0)}
.js .chart.wait .col b{opacity:0}
/* hover flow */
.f .ph img,.side .photo img,.path-photo img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.f:hover .ph img,.side .photo:hover img,.path-photo:hover img{transform:scale(1.06)}
.f:hover{box-shadow:0 22px 40px -22px rgba(6,46,48,.4)}
.v,.svc,.pay{transition:transform .25s,box-shadow .25s}
.v:hover,.pay:hover{transform:translateY(-3px);box-shadow:0 22px 40px -26px rgba(6,46,48,.35)}
.st{transition:transform .3s,background .3s}
.st:hover{transform:translateY(-6px);background:#0E5154}
.links a{position:relative}
.links a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.links a:hover::after{transform:scaleX(1)}
.btn.go svg{transition:transform .2s}.btn.go:hover svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.stairs .arrow path{stroke-dashoffset:0}.hero .mark{background-size:100% 100%}.js .up.wait,.js .stagger.wait > *,.js .numbers.wait .num{transform:none;opacity:1}.js .chart.wait .col i{transform:none}.js .chart.wait .col b{opacity:1}::view-transition-old(root),::view-transition-new(root){animation:none}}

/* legal pages */
.legal{max-width:840px;margin:0 auto;padding-block:48px 80px}
.legal .card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,44px)}
.legal h1{font-size:clamp(38px,5.5vw,58px);line-height:1;font-weight:800;margin-bottom:26px}
.legal h2{font:700 19px/1.3 var(--display);letter-spacing:-.01em;margin:28px 0 8px;color:var(--teal-2)}
.legal p{margin-bottom:10px}
.legal .muted{color:var(--muted);font-size:14px}
[hidden]{display:none!important}

/* language switch */
.lang{display:flex;gap:2px;padding:3px;border-radius:12px;border:1px solid var(--line);background:var(--card);flex:none}
.lang a{display:block;padding:7px 9px;border-radius:9px;font:700 13px/1 var(--sans);text-decoration:none;color:var(--muted)}
.lang a[aria-current]{background:var(--ink);color:var(--paper)}
@media (max-width:1000px){.top .lang{margin-left:auto}.menu-btn{margin-left:0}}
/* about list */
.about-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.about-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.about-list .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--mint);color:var(--teal-2)}
.about-list .ic svg{width:22px;height:22px}
.about-list b{display:block;font:700 17px/1.25 var(--display);letter-spacing:-.01em;margin-bottom:2px}
.about-list span{color:var(--muted);font-size:15px}
.legal dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;margin:0 0 10px}
.legal dt{color:var(--muted);font-weight:600}
.legal dd{margin:0}
@media (max-width:480px){.legal dl{grid-template-columns:1fr;gap:0}.legal dd{margin-bottom:8px}}
.bottom a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.top .wrap{gap:8px;min-height:64px}.brand{gap:7px}.brand img{width:34px;height:34px}.brand b{font-size:16px}.lang a{padding:7px 7px;font-size:12px}.menu-btn{width:auto;padding:0 10px;height:40px;font-size:12.5px}}
@media (max-width:360px){.brand b{font-size:14px}}

.f .pills{display:flex;flex-wrap:wrap;gap:6px}
.f .pay-pill{background:var(--sun);color:var(--ink)}
.f.icon .pay-pill{background:var(--sun);color:var(--ink)}
.fields-note{margin-top:18px;font-size:13px;color:var(--muted)}
/* phone: hero photos first, so they are visible on the first screen */
@media (max-width:900px){
  .hero .wrap{display:flex;flex-direction:column;gap:22px;padding-top:18px}
  .hero .stairs{order:-1;width:100%;max-width:560px;padding-top:9%}
  .hero h1{margin:16px 0 16px}
}
@media (max-width:520px){.hero .stairs figcaption{font-size:10.5px;line-height:1.15}}

/* ===== v3: moving gradients, richer motion, mobile text trims ===== */
@keyframes flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,60px) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,-50px) scale(.9)}100%{transform:translate(0,0) scale(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes shine{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(220%) skewX(-20deg)}}

/* hero: living gradient mesh + floating orbs */
.hero{background:linear-gradient(120deg,#F3F8F6 0%,#DFF5EF 25%,#FFF3D6 50%,#E3F6F1 75%,#F3F8F6 100%);background-size:300% 300%;animation:flow 16s ease infinite}
.hero::after{display:none}
.orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.orb.o1{width:420px;height:420px;left:-120px;top:-80px;background:radial-gradient(circle,#2FD3B5,transparent 70%);animation:drift1 18s ease-in-out infinite}
.orb.o2{width:380px;height:380px;right:-100px;top:10%;background:radial-gradient(circle,#FFC94D,transparent 70%);animation:drift2 15s ease-in-out infinite}
.orb.o3{width:320px;height:320px;right:25%;bottom:-140px;background:radial-gradient(circle,#E8742A,transparent 70%);opacity:.35;animation:drift1 20s ease-in-out infinite reverse}
.hero h1 .t{background:linear-gradient(90deg,var(--teal-2),var(--teal),#E8742A,var(--teal-2));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 7s linear infinite}

/* floating chips on the hero photos */
.chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:14px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 30px -14px rgba(6,46,48,.45);font:700 13px/1 var(--sans);color:var(--ink);white-space:nowrap;animation:pop .6s both,bob 5s ease-in-out infinite}
.chip i{width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,var(--teal),var(--sun))}
.chip.c1{left:0;top:0;animation-delay:1.3s,1.9s}
.chip.c2{left:36%;top:-2%;animation-delay:1.5s,0s}
.chip.c3{right:-2%;bottom:24%;animation-delay:1.7s,1s}
@media (max-width:520px){.chip{padding:6px 9px;font-size:10.5px;border-radius:10px}.chip.c2{display:none}.chip.c3{bottom:30%}}

/* key figures: moving dark gradient */
.numbers{background:linear-gradient(110deg,#062E30 0%,#0B4144 30%,#0A6F73 50%,#0B4144 70%,#062E30 100%);background-size:300% 100%;animation:flow 14s ease infinite}
.stepped::before{animation:inherit}

/* ribbon of fields */
.ribbon{position:relative;z-index:2;overflow:hidden;background:linear-gradient(90deg,#FFC94D,#E8742A,#FFC94D,#E8742A);background-size:300% 100%;animation:flow 8s linear infinite;transform:rotate(-1.2deg);margin:18px -12px 0;box-shadow:0 14px 30px -18px rgba(232,116,42,.7)}
.ribbon .track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.ribbon span{display:inline-flex;align-items:center;gap:22px;padding:14px 22px 14px 0;font:800 clamp(17px,2vw,22px)/1 var(--display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.ribbon span::after{content:"";width:22px;height:13px;background:linear-gradient(var(--ink),var(--ink)) 0 100%/7px 4px no-repeat,linear-gradient(var(--ink),var(--ink)) 7px 50%/7px 8px no-repeat,linear-gradient(var(--ink),var(--ink)) 14px 0/8px 13px no-repeat}
.ribbon-wrap{overflow:hidden;padding-block:6px 10px}

/* mint and dark bands breathe */
.mint{background:linear-gradient(125deg,#DDF4EF 0%,#EAF8F4 30%,#FFF4DC 55%,#DDF4EF 80%,#E6F7F2 100%);background-size:300% 300%;animation:flow 20s ease infinite}
.dark{background:linear-gradient(130deg,#062E30 0%,#0A4E52 28%,#062E30 52%,#2E3A26 76%,#062E30 100%);background-size:300% 300%;animation:flow 22s ease infinite}

/* buttons shimmer */
.btn.go{background:linear-gradient(90deg,#E8742A,#F59E3D,#E8742A);background-size:200% 100%;animation:flow 5s linear infinite;position:relative;overflow:hidden}
.btn.go::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 3.6s ease-in-out infinite}

/* cards: gradient outline on hover, living icon tiles */
.f{position:relative}
.f::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(120deg,var(--teal),var(--sun),var(--orange));background-size:200% 200%;animation:flow 4s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.f:hover::after{opacity:1}
.f.icon{background:linear-gradient(140deg,#0A6F73,#0B8A82,#0A6F73,#085E62);background-size:250% 250%;animation:flow 12s ease infinite}
.f.icon .ic{box-shadow:0 8px 18px -8px rgba(255,201,77,.8)}
.check{background:linear-gradient(140deg,#0A6F73,#0FA39A,#0A6F73,#074F52);background-size:250% 250%;animation:flow 14s ease infinite}
.st{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));backdrop-filter:blur(4px)}
.st:nth-child(6){background:linear-gradient(180deg,rgba(255,201,77,.18),rgba(255,255,255,.03))}
.pay{position:relative;overflow:hidden}
.pay::before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(255,201,77,.35),transparent 70%);animation:drift2 14s ease-in-out infinite;pointer-events:none}
.company .logo-side{background:linear-gradient(140deg,#062E30,#0A4E52,#062E30);background-size:250% 250%;animation:flow 16s ease infinite}
.company .logo-side img{animation:bob 6s ease-in-out infinite}
footer{background:linear-gradient(120deg,#062E30,#0A3E41,#062E30);background-size:250% 250%;animation:flow 20s ease infinite}

/* image reveals */
.js .path-photo.wait img{clip-path:inset(0 100% 0 0)}
.path-photo img{transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) .15s,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .stagger.wait .ph img{transform:scale(1.18)}
.f .ph img{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}

/* section headings slide */
.js .head.up.wait h2,.js .split .up.wait h2{transform:translateX(-24px)}
.head h2{transition:transform .9s cubic-bezier(.2,.8,.2,1) .1s}

/* mobile: less text */
.sh{display:none}
@media (max-width:600px){
  .lg{display:none}.sh{display:inline}
  .m-hide{display:none!important}
  .ticks li:nth-child(n+3){display:none}
  .band{padding-block:56px}
  .head{margin-bottom:28px}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .f .in{padding:12px 12px 14px;gap:6px}
  .f h3{font-size:15.5px}
  .f .yrs-pill{font-size:10.5px;padding:5px 7px}
  .f.icon .ic{margin:14px 12px 0;width:40px;height:40px}
  .path{gap:6px}.st{padding:14px 16px;gap:4px}.st .n{font-size:26px}
  .v{gap:12px}.v li{font-size:14.5px}
  .svc li{font-size:14.5px}
  .about-list{gap:10px}
  .path-photo div{padding:0 18px 20px}
}
@media (prefers-reduced-motion:reduce){.hero,.numbers,.ribbon,.ribbon .track,.mint,.dark,.btn.go,.btn.go::after,.f.icon,.check,.chip,.orb,.company .logo-side,.company .logo-side img,footer,.hero h1 .t,.pay::before{animation:none!important}.js .path-photo.wait img{clip-path:none}.js .stagger.wait .ph img{transform:none}}
@media (max-width:600px){.fields-note{display:none}.ribbon{margin-inline:0}}
/* phone hero order: badge, headline, photos, then details */
@media (max-width:900px){
  .hero .intro{display:contents}
  .hero .reg-pill{order:1;align-self:flex-start}
  .hero h1{order:2;margin:0}
  .hero .stairs{order:3}
  .hero .lead{order:4}
  .hero .hero-cta{order:5;margin-top:0}
  .hero .ticks{order:6;margin-top:0}
  .hero .wrap{gap:18px}
}
@media (max-width:520px){.hero h1{font-size:clamp(36px,10.5vw,46px)}.hero .stairs{padding-top:12%}}
/* fixed header: always visible on every browser, including iPhone */
html{overflow-anchor:none}
:root{--hh:74px}
.top{position:fixed;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);z-index:60}
body{padding-top:calc(var(--hh) + env(safe-area-inset-top,0px))}
.drawer{position:fixed;left:0;right:0;top:calc(var(--hh) + env(safe-area-inset-top,0px));z-index:59;max-height:calc(100vh - var(--hh));overflow:auto;box-shadow:0 20px 40px -20px rgba(6,46,48,.35)}
@media (max-width:520px){:root{--hh:64px}}