/* ══════════ TOKENS — derived from the Twixen mark ══════════ */
:root{
  color-scheme: light;   /* the site is light-only by design */
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F4F7FB;
  --ink:#04101C;
  --ink-2:#2F4459;
  --muted:#68798D;
  --line:#D0DAE6;
  --line-soft:#E3EAF2;
  --accent:#014784;
  --accent-hi:#013865;
  --accent-2:#4A8FE0;
  --accent-soft:#E1ECF9;
  --gold:#A98A52;
  /* Formerly the dark navy bands. Now the faintest blue-tinted white, so
     sections still separate but the page reads as white throughout. */
  --field:#F6F9FD;
  --field-2:#EDF3FA;
  --field-ink:#05121F;
  --field-ink-2:#33465B;
  --field-muted:#68798E;
  --field-line:#DEE7F2;
  --logo:url("/assets/images/wordmark.png");
  --shadow:0 1px 2px rgba(4,16,28,.05), 0 14px 40px -20px rgba(1,71,132,.22);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:500}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
::selection{background:var(--accent-soft); color:var(--accent-hi)}

/* ══════════ TYPE ══════════ */
.display{
  font-family:"Fraunces",Georgia,"Times New Roman",serif; font-weight:300;
  font-variation-settings:"opsz" 144; letter-spacing:-.018em;
}
.d1{font-size:clamp(2.8rem,6.6vw,5.6rem); line-height:1.02}
.d2{font-size:clamp(2.1rem,4.1vw,3.6rem); line-height:1.07}
.d3{font-size:clamp(1.45rem,2.3vw,2.05rem); line-height:1.18}
.lede{font-size:clamp(1.06rem,1.45vw,1.3rem); line-height:1.56; color:var(--ink-2); max-width:56ch}
.body-w{max-width:66ch}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor; flex:0 0 auto}
.eyebrow--accent{color:var(--accent)}
.small{font-size:.875rem; color:var(--muted)}

/* ══════════ SHELL ══════════ */
.wrap{width:min(1320px,100% - clamp(20px,5vw,80px)); margin-inline:auto}
.wrap-narrow{width:min(920px,100% - clamp(20px,5vw,80px)); margin-inline:auto}

.utility{background:var(--surface-2); color:var(--muted); border-bottom:1px solid var(--line)}
.utility .wrap{display:flex; align-items:center; gap:20px; height:36px;
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase}
.utility .tag{color:var(--ink-2)}
.utility nav{margin-left:auto; display:flex; gap:20px}
.utility a{text-decoration:none; color:var(--muted)}
.utility a:hover{color:var(--accent)}
@media (max-width:760px){.utility nav a:not(:last-child){display:none}}

header.top{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.topbar{display:flex; align-items:center; gap:26px; height:88px}
.logo{
  flex:0 0 auto; width:100px; height:60px; background-image:var(--logo);
  background-size:contain; background-repeat:no-repeat; background-position:left center;
  text-indent:-9999px; overflow:hidden; display:block;
}
.logo--footer{width:150px; height:110px; background-image:url("/assets/images/logo.png")}
nav.main{margin-left:auto; display:flex; align-items:center; gap:1px}
nav.main a{
  position:relative; font-size:.855rem; font-weight:500; text-decoration:none; color:var(--ink-2);
  padding:10px 13px; white-space:nowrap;
}
nav.main a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a.on{color:var(--accent); font-weight:600}
nav.main a.on::after{transform:scaleX(1)}
nav.main a.top-cta{
  font-size:.82rem; font-weight:600; text-decoration:none; padding:11px 20px;
  background:var(--accent); color:#fff; margin-left:14px; white-space:nowrap;
  border:1px solid var(--accent); transition:background .18s,color .18s;
}
nav.main a.top-cta::after{display:none}
nav.main a.top-cta:hover{background:transparent; color:var(--accent)}
.burger{
  margin-left:auto; display:none; width:44px; height:44px; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; align-items:center; justify-content:center;
}
.burger span{display:block; width:18px; height:1.5px; background:currentColor; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:currentColor}
.burger span::before{top:-6px} .burger span::after{top:6px}
@media (max-width:1140px){
  nav.main{
    position:fixed; inset:114px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line); padding:12px 0 20px;
    max-height:calc(100dvh - 114px); overflow:auto;
  }
  /* Closed by default, opened by a class.
     It used to be the other way round: the menu was open in the markup and
     JavaScript closed it on load. That meant a flicker of open menu on every
     phone, and — with JavaScript off or slow to arrive, as in a browser inside
     another app — a menu that never closed at all, pushing the page down. CSS
     knows the screen width without being told, so it decides. */
  nav.main{display:none}
  nav.main.is-open{display:flex}
  nav.main[hidden]{display:none}
  nav.main a{padding:14px clamp(20px,5vw,80px); font-size:1rem}
  nav.main a::after{display:none}
  nav.main a.top-cta{margin:14px clamp(20px,5vw,80px) 0; text-align:center; justify-content:center}
  .burger{display:flex}
  .topbar{height:78px}
  .logo{width:88px; height:53px}
}

/* ══════════ BANDS ══════════ */
section.band{padding:clamp(60px,7.5vw,124px) 0}
section.band--tight{padding:clamp(40px,4.5vw,72px) 0}
section.band--dark{
  background:var(--field); color:var(--field-ink); position:relative; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
section.band--dark .eyebrow{color:var(--field-muted)}
section.band--dark .lede{color:var(--field-ink-2)}
section.band--dark h2,section.band--dark h3{color:var(--field-ink)}
section.band--surface{background:var(--surface)}
.rule{height:1px; background:var(--line); border:0; margin:0}

.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(36px,4.4vw,64px)}
@media (max-width:880px){.sec-head{grid-template-columns:1fr; align-items:start; gap:18px}}
.sec-head .eyebrow{margin-bottom:18px}

/* ══════════ DOT MOTIF (from the logo mark) ══════════ */
.dots{position:absolute; pointer-events:none; opacity:.5}
.dots circle,
.hero-dots circle,
.foot-dots circle{fill:currentColor}

/* ══════════ HERO ══════════ */
.hero{background:var(--ground); color:var(--ink); position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-inner{padding:clamp(78px,11vw,168px) 0 clamp(58px,6.5vw,96px); position:relative; z-index:3}
.hero .d1{max-width:16ch}
.hero .d1 em{font-style:italic; font-weight:400; color:var(--accent-2)}
.hero-lede{margin-top:30px; max-width:50ch; color:var(--ink-2); font-size:clamp(1.02rem,1.3vw,1.18rem)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:42px}
.hero-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(52% 66% at 84% 16%, rgba(74,143,224,.10), transparent 72%),
    radial-gradient(44% 54% at 96% 84%, rgba(1,71,132,.055), transparent 76%),
    radial-gradient(66% 86% at 2% 104%, rgba(1,71,132,.045), transparent 74%);
}
.hero-rules{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
  background-size:calc(100% / 6) 100%;
}
.hero-dots{position:absolute; right:-4%; top:6%; width:min(46vw,620px); z-index:2; color:var(--accent-2); opacity:.30}
@media (max-width:1024px){.hero-dots{opacity:.16; right:-18%}}
.hero-stats{position:relative; z-index:3; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr)}
.hero-stats div{padding:30px 0 34px; border-left:1px solid var(--line); padding-left:26px}
.hero-stats div:first-child{border-left:0; padding-left:0}
.hero-stats .n{font-family:"Fraunces",Georgia,serif; font-weight:300; font-size:clamp(1.9rem,3.1vw,2.8rem); line-height:1; display:block; font-variant-numeric:tabular-nums}
.hero-stats .l{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:12px; display:block}
@media (max-width:820px){
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats div{border-left:0; padding-left:0; border-top:1px solid var(--line)}
  .hero-stats div:nth-child(-n+2){border-top:0}
  .hero-rules{background-size:calc(100% / 3) 100%}
}

/* ══════════ BUTTONS ══════════ */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-size:.87rem; font-weight:600;
  padding:14px 26px; text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-family:inherit; transition:background .18s, color .18s, border-color .18s;
}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-outline{border-color:var(--line); color:var(--ink); background:transparent}
.btn-outline:hover{border-color:var(--accent); color:var(--accent)}
.btn-solid{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.btn-solid:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.arrow::after{content:"→"; font-family:"IBM Plex Mono",monospace; transition:transform .2s}
.btn:hover .arrow::after,.arrow:hover::after{transform:translateX(3px)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.link-a{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); text-decoration:none; display:inline-flex; gap:8px; align-items:center;
}
.link-a:hover{color:var(--accent-hi)}

/* ══════════ IMAGE PLATES ══════════ */
.plate{
  position:relative; overflow:hidden; background:var(--field-2); aspect-ratio:4/3;
  border:1px solid var(--line); isolation:isolate;
}
.plate::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.2px);
  background-size:9px 9px; mix-blend-mode:overlay;
}
.plate .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:12px 16px;
  display:flex; align-items:center; gap:12px;
  font-family:"IBM Plex Mono",monospace; font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:#DCE8F4; background:linear-gradient(to top, rgba(2,10,18,.86), rgba(2,10,18,0));
}
.plate .cap b{color:var(--accent-2); font-weight:500}
.plate--a{background:radial-gradient(62% 72% at 26% 22%, rgba(74,143,224,.62), transparent 68%), radial-gradient(54% 64% at 80% 76%, rgba(1,71,132,.85), transparent 72%), linear-gradient(150deg,#072238,#020B13)}
.plate--b{background:repeating-linear-gradient(112deg, rgba(255,255,255,.05) 0 2px, transparent 2px 15px), radial-gradient(70% 88% at 22% 8%, rgba(169,138,82,.30), transparent 66%), linear-gradient(202deg,#0A2135,#020A11)}
.plate--c{background:repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 28px), radial-gradient(78% 72% at 72% 28%, rgba(74,143,224,.34), transparent 70%), linear-gradient(22deg,#04121E,#0B2436)}
.plate--d{background:radial-gradient(40% 46% at 50% 32%, rgba(169,138,82,.44), transparent 64%), linear-gradient(180deg,#0C2436,#030D16)}
.plate--e{background:radial-gradient(52% 62% at 14% 82%, rgba(74,143,224,.46), transparent 70%), radial-gradient(58% 50% at 88% 12%, rgba(169,138,82,.22), transparent 70%), linear-gradient(120deg,#03111C,#0A2032)}
.plate--tall{aspect-ratio:3/4}
.plate--wide{aspect-ratio:16/6.5}
.plate--sq{aspect-ratio:1/1}

/* ══════════ GRIDS & CARDS ══════════ */
.grid{display:grid; gap:clamp(16px,2.1vw,26px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.split--top{align-items:start}
.split--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:1024px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.g2,.g3,.g4,.split,.split--wide{grid-template-columns:1fr}}

.card{background:var(--surface); border:1px solid var(--line); padding:clamp(22px,2.5vw,32px); display:flex; flex-direction:column; gap:13px; transition:border-color .2s, transform .2s}
.card h3{font-size:1.08rem; font-weight:600; letter-spacing:-.012em}
.card p{color:var(--ink-2); font-size:.94rem}
.card--link{text-decoration:none}
.card--link:hover{border-color:var(--accent); transform:translateY(-3px)}
.card--dark{background:var(--surface); border-color:var(--line)}
.card--dark p{color:var(--field-ink-2)}
.kicker{font-family:"IBM Plex Mono",monospace; font-size:.67rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}

.numlist{border-top:1px solid var(--line)}
.numlist > div{display:grid; grid-template-columns:66px minmax(0,1fr) minmax(0,1.5fr); gap:clamp(12px,2.6vw,36px); padding:26px 0; border-bottom:1px solid var(--line); align-items:start}
.numlist .idx{font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--accent); letter-spacing:.12em; padding-top:5px}
.numlist h3{font-size:1.1rem; font-weight:600}
.numlist p{color:var(--ink-2); font-size:.94rem}
.numlist--dark{border-color:var(--field-line)}
.numlist--dark > div{border-color:var(--field-line)}
.numlist--dark p{color:var(--field-ink-2)}
@media (max-width:760px){.numlist > div{grid-template-columns:46px minmax(0,1fr)} .numlist > div p{grid-column:2}}

.factrow{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.factrow div{padding:30px 24px 32px; border-left:1px solid var(--line)}
.factrow div:first-child{border-left:0; padding-left:0}
.factrow .n{font-family:"Fraunces",Georgia,serif; font-weight:300; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1; display:block; font-variant-numeric:tabular-nums}
.factrow .l{font-family:"IBM Plex Mono",monospace; font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:11px; display:block}
@media (max-width:820px){
  .factrow{grid-template-columns:1fr 1fr}
  .factrow div{border-left:0; padding:22px 0; border-top:1px solid var(--line)}
  .factrow div:nth-child(-n+2){border-top:0}
  .factrow div:nth-child(2n){padding-left:24px; border-left:1px solid var(--line)}
}

.pill{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; padding:6px 12px; border:1px solid var(--line); color:var(--muted)}
.pill--accent{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.pill--dark{border-color:var(--line); color:var(--muted)}
.pill-row{display:flex; flex-wrap:wrap; gap:8px}

/* ══════════ PRODUCT RANGE ══════════ */
.prod-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px)}
@media (max-width:1100px){.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prod{background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; transition:border-color .2s, transform .2s}
.prod:hover{border-color:var(--accent); transform:translateY(-3px)}
.prod-b{padding:18px 18px 20px; display:grid; gap:7px; align-content:start; flex:1}
.prod h3{font-size:.98rem; font-weight:600; letter-spacing:-.012em; line-height:1.3}
.prod p{color:var(--ink-2); font-size:.845rem; line-height:1.5}
.prod-f{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:10px}
.prod .price{font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.06em; color:var(--accent); font-weight:500}
.prod .plate{aspect-ratio:1/1; border:0; border-bottom:1px solid var(--line)}
.prod .cap{font-size:.58rem; padding:9px 12px}

/* ══════════ JOBS ══════════ */
.job{border-bottom:1px solid var(--line)}
.job:first-of-type{border-top:1px solid var(--line)}
.job summary{list-style:none; cursor:pointer; padding:28px 0; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; gap:22px; align-items:center}
.job summary::-webkit-details-marker{display:none}
.job summary:hover .job-title{color:var(--accent)}
.job-title{font-size:1.18rem; font-weight:600; letter-spacing:-.014em; transition:color .18s}
.job-meta{font-family:"IBM Plex Mono",monospace; font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.job-open{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); white-space:nowrap}
.job[open] .job-open::after{content:" −"} .job:not([open]) .job-open::after{content:" +"}
.job-body{padding:4px 0 34px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(24px,4vw,60px)}
.job-body h4{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:11px}
.job-body ul{margin:0 0 24px; padding-left:19px; color:var(--ink-2); font-size:.94rem}
.job-body li{margin-bottom:8px}
.job-aside{background:var(--surface-2); border:1px solid var(--line-soft); padding:24px; align-self:start}
@media (max-width:900px){
  .job summary{grid-template-columns:minmax(0,1fr) auto}
  .job-meta{grid-column:1/-1; margin-top:-10px}
  .job-body{grid-template-columns:1fr}
}

/* ══════════ FORMS ══════════ */
.form{display:grid; gap:19px}
.field{display:grid; gap:8px}
.field label{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:.96rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); padding:13px 14px; width:100%; border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:126px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:19px}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.81rem; color:var(--muted)}
.form-ok{border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent-hi); padding:24px}
.form--dark .field input,.form--dark .field select,.form--dark .field textarea{background:var(--surface); border-color:var(--line); color:var(--ink)}
.form--dark .field label{color:var(--muted)}

/* ══════════ NEWS ══════════ */
.post{display:grid; grid-template-columns:170px minmax(0,1fr); gap:clamp(16px,3vw,44px); padding:30px 0; border-bottom:1px solid var(--line); text-decoration:none}
.post:first-of-type{border-top:1px solid var(--line)}
.post:hover h3{color:var(--accent)}
.post h3{font-size:1.2rem; font-weight:600; letter-spacing:-.014em; margin-bottom:9px; transition:color .18s}
.post p{color:var(--ink-2); font-size:.94rem; max-width:62ch}
.post time{font-family:"IBM Plex Mono",monospace; font-size:.69rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding-top:6px; display:block}
@media (max-width:700px){.post{grid-template-columns:1fr; gap:9px}}

/* ══════════ QUOTE ══════════ */
.quote{border-left:2px solid var(--accent); padding-left:clamp(20px,3vw,40px)}
.quote p{font-family:"Fraunces",Georgia,serif; font-weight:300; font-size:clamp(1.3rem,2.2vw,1.85rem); line-height:1.34; letter-spacing:-.012em}
.quote footer{margin-top:22px; font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* ══════════ FOOTER ══════════ */
footer.site{background:var(--surface-2); color:var(--ink); padding:clamp(58px,6.5vw,92px) 0 0; position:relative; overflow:hidden; border-top:1px solid var(--line)}
footer.site a{color:var(--ink-2); text-decoration:none; font-size:.9rem}
footer.site a:hover{color:var(--accent)}
.foot-grid{display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:clamp(26px,4vw,52px); padding-bottom:58px; position:relative; z-index:2; background:transparent}
.foot-grid h4{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--field-muted); margin-bottom:18px}
.foot-links{display:grid; gap:11px}
.foot-bottom{border-top:1px solid var(--field-line); padding:24px 0 32px; display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; position:relative; z-index:2}
.foot-bottom .small{color:var(--field-muted); font-size:.8rem}
.foot-bottom nav{display:flex; flex-wrap:wrap; gap:20px; margin-left:auto}
.foot-bottom nav a{font-size:.8rem}
.foot-dots{position:absolute; right:-8%; bottom:-38%; width:min(30vw,380px); color:var(--accent-2); opacity:.10; z-index:0}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr} .foot-bottom nav{margin-left:0}}

/* ══════════ REVEAL ══════════ */
.anim .rv{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1)}
.anim .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .anim .rv{opacity:1; transform:none}
}

/* ══════════ SKIP LINK ══════════ */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:12px 20px; font-size:.9rem; font-weight:600;
}
.skip:focus{left:0}

/* ══════════ PROSE ══════════ */
.prose{max-width:66ch; color:var(--ink-2); font-size:1.03rem}
.prose > * + *{margin-top:1.2em}
.prose h2{font-family:"Fraunces",Georgia,serif; font-weight:300; font-size:1.7rem; color:var(--ink); margin-top:2em}
.prose h3{font-size:1.15rem; font-weight:600; color:var(--ink); margin-top:1.8em}
.prose a{color:var(--accent)}
.prose ul,.prose ol{padding-left:20px}
.prose li + li{margin-top:.5em}
.prose blockquote{border-left:2px solid var(--accent); padding-left:22px; font-style:italic}
.prose strong{color:var(--ink); font-weight:600}
.prose code{
  font-family:"IBM Plex Mono",monospace; font-size:.88em;
  background:var(--surface-2); border:1px solid var(--line);
  padding:1px 6px; border-radius:2px; color:var(--ink);
}
/* The retention table on the privacy page. Scrolls inside itself on a phone
   rather than pushing the page sideways. */
.prose table{
  width:100%; border-collapse:collapse; font-size:.95rem;
  display:block; overflow-x:auto;
}
.prose thead th{
  text-align:left; font-family:"IBM Plex Mono",monospace; font-weight:500;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); padding:0 18px 10px 0; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.prose tbody td{padding:13px 18px 13px 0; border-bottom:1px solid var(--line-soft); vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody td:last-child{color:var(--ink)}
/* On a phone the two columns cannot both fit, and a half-visible second column
   is worse than no table. Below 620px each row becomes a small stacked block
   with its column name above the value, so nothing is cut off and nothing has
   to be scrolled sideways to be read. */
@media (max-width:620px){
  .prose table{display:block; overflow-x:visible}
  .prose thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .prose tbody,.prose tbody tr,.prose tbody td{display:block; width:100%}
  .prose tbody tr{padding:16px 0; border-bottom:1px solid var(--line-soft)}
  .prose tbody tr:last-child{border-bottom:0}
  .prose tbody td{padding:0; border-bottom:0}
  .prose tbody td[data-label]::before{
    content:attr(data-label); display:block;
    font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.15em;
    text-transform:uppercase; color:var(--muted); margin-bottom:4px;
  }
  .prose tbody td + td{margin-top:10px}
}

/* ══════════ CERTIFICATION MARQUEE ══════════ */
.marquee{
  overflow:hidden; position:relative;
  border-top:1px solid var(--field-line); border-bottom:1px solid var(--field-line);
  padding:36px 0;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; width:max-content; gap:0;
  animation:marquee calc(var(--count,4) * 7s) linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.cert{
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(30px,3.6vw,56px); flex:0 0 auto;
  border-right:1px solid var(--field-line);
}
.cert-logo{
  height:68px; width:auto; max-width:200px; object-fit:contain; display:block;
  background:#fff; padding:10px 16px; border-radius:8px; border:1px solid var(--line);
}
.cert-mark{
  width:66px; height:66px; flex:0 0 auto; position:relative; border-radius:50%;
  background:var(--accent); display:grid; place-items:center;
}
.cert-mark::before{
  content:""; width:22px; height:12px; border:0 solid #fff;
  border-left-width:3px; border-bottom-width:3px;
  transform:rotate(-45deg) translate(1px,-2px);   /* a tick, so it reads as "verified" */
}
.road .cert-mark{width:78px; height:78px; justify-self:start}
.road .cert-mark::before{width:26px; height:14px; border-left-width:3.5px; border-bottom-width:3.5px}
.cert-text{display:grid; gap:3px; white-space:nowrap}
.cert-text strong{
  font-family:"IBM Plex Mono",monospace; font-size:.88rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--field-ink);
}
.cert-text em{font-style:normal; font-size:.88rem; color:var(--field-ink-2)}

@media (max-width:640px){
  .cert-text em{display:none}
  .cert{gap:14px; padding:0 24px}
  .cert-logo{height:52px; max-width:140px; padding:8px 12px}
  .cert-mark{width:52px; height:52px}
  .cert-mark::before{width:17px; height:9px; border-left-width:2.5px; border-bottom-width:2.5px}
  .road-logo{height:66px}
  .road .cert-mark{width:64px; height:64px}
}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none; mask-image:none; overflow-x:auto}
  .marquee-track{animation:none; width:auto}
}

/* ══════════ CERTIFICATION ROADMAP ══════════ */
.roadmap{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.1vw,26px)}
@media (max-width:1024px){.roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.roadmap{grid-template-columns:1fr}}
.road{
  background:var(--surface); border:1px solid var(--line); padding:clamp(22px,2.4vw,30px);
  display:grid; gap:18px; align-content:start;
}
.road-logo{
  height:86px; width:auto; max-width:100%; object-fit:contain; object-position:left center;
  background:#fff; padding:12px 18px; border-radius:8px; border:1px solid var(--line); justify-self:start;
}
.road-b{display:grid; gap:8px; justify-items:start}
.road h3{font-size:1.12rem; font-weight:600; color:var(--field-ink); letter-spacing:-.012em}
.road-full{
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--field-muted);
}
.road p{color:var(--field-ink-2); font-size:.9rem; margin-top:4px}
.pill--pending{
  border-color:var(--gold); color:var(--gold);
  display:inline-flex; align-items:center; gap:7px;
}
.pill--pending::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ══════════ FORM STATES ══════════ */
.form-err{
  border:1px solid #B03A2E; background:#FBEAE8; color:#7B2018;
  padding:16px 20px; border-radius:2px; display:grid; gap:6px;
}
.form-err ul{margin:0; padding-left:18px; font-size:.9rem}
.form--dark .form-err{background:#FBEAE8; border-color:#B03A2E; color:#7B2018}

/* ══════════ LONG-WORD SAFETY ══════════
   A pasted URL or an unbroken string typed into the admin must never be able
   to push a page sideways on a phone. Grid and flex children also need
   min-width:0, or they refuse to shrink below their content. */
body{overflow-wrap:break-word}
.job-body,.job-body > *,.split > *,.sec-head > *,.numlist > div,.card,.prod{min-width:0}
.job-body p,.job-body li,.job-aside,.prose p,.prose li,.card p,.lede,.post p,.hero-lede{overflow-wrap:anywhere}

/* ══════════ HEADLINE REVEAL ══════════
   Words rise into place on load. The markup stays one heading — the words are
   spans added by script — so screen readers and search engines still see a
   single sentence. If JavaScript never runs, the heading is simply visible. */
.anim .word-in{
  display:inline-block;
  opacity:0;
  transform:translateY(0.5em);
  /* A word span must never break inside itself, and must never be squeezed
     by the global break-word rule. */
  overflow-wrap:normal;
  word-break:keep-all;
}
/* Balancing works on text runs, not on a row of inline-blocks — it opens
   strange gaps once a heading is split. */
.anim .is-split{text-wrap:normal}
/* Added by script when the heading is due to play — on load for a page
   headline, on scroll-into-view for a section heading. */
.anim .word-in.go{
  animation:word-rise .62s cubic-bezier(.22,.85,.3,1) forwards;
  animation-delay:var(--d, 0s);
}
/* If the script never runs, nothing is hidden. */
.anim h1.d1:not(.is-split) .word-in,
.anim h2.d2:not(.is-split) .word-in,
.anim h2.d3:not(.is-split) .word-in{opacity:1; transform:none}
@keyframes word-rise{ to{ opacity:1; transform:none } }

/* The italic accent word carries the same motion as its parent word. */
.anim .word-in em{display:inline-block}

/* Stat figures hold their width while counting so nothing jumps. */
.hero-stats .n,.factrow .n{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .anim .word-in,.anim .word-in.go{opacity:1; transform:none; animation:none}
}

/* ─────────────────────────────────────────────────────────────────────────
   Open roles and applications (careers page)

   The block itself is drawn by assets/careers.js from what the office system
   publishes. These rules exist so that block looks like the rest of the site —
   the original arrived with its own indigo palette and rounded panels, which
   would have read as something bolted on. Everything below uses the same
   tokens as the cards and forms elsewhere.
   ───────────────────────────────────────────────────────────────────────── */
#tx-careers{max-width:none; color:var(--ink); font:inherit}
#tx-careers *{box-sizing:border-box; min-width:0}
#tx-careers .tx-loading,
#tx-careers .tx-none{color:var(--ink-2); font-size:1.02rem; padding:20px 0}
#tx-careers .tx-none a{color:var(--accent)}

#tx-careers .tx-job{
  background:var(--surface); border:1px solid var(--line);
  border-radius:4px; padding:clamp(22px,3vw,32px); margin:0 0 16px;
}
#tx-careers .tx-job h3{
  font-family:"Fraunces",Georgia,serif; font-weight:400; letter-spacing:-.015em;
  font-size:clamp(1.24rem,2vw,1.5rem); line-height:1.2; margin:0 0 6px; color:var(--ink);
}
#tx-careers .tx-meta{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
#tx-careers .tx-desc{
  white-space:pre-wrap; color:var(--ink-2); font-size:.95rem; line-height:1.65; margin:10px 0 0;
}
#tx-careers .tx-facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
#tx-careers .tx-fact{
  border:1px solid var(--line); border-radius:100px; padding:4px 13px;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.08em;
  color:var(--ink-2); background:var(--surface-2);
}
#tx-careers .tx-sect{margin-top:26px}
#tx-careers .tx-sect h4{
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 10px;
}
#tx-careers .tx-pay{width:100%; border-collapse:collapse; font-size:.92rem; margin-top:6px}
#tx-careers .tx-pay td{padding:10px 0; border-bottom:1px solid var(--line-soft); color:var(--ink-2)}
#tx-careers .tx-pay td+td{text-align:right; white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums}
#tx-careers .tx-docs a{display:block; font-size:.92rem; margin-top:8px; color:var(--accent)}
/* The job poster.
   A poster carries the shift times, the pay and the closing date as printed
   text, so it has to be big enough to read — and clicking it opens it as large
   as the screen allows. It is deliberately not stretched to the full column:
   most posters are portrait, and a full-width portrait image pushes everything
   else off the screen. */
#tx-careers .tx-poster{
  display:block; max-width:100%; max-height:520px; width:auto;
  border-radius:3px; margin:18px 0 0; border:1px solid var(--line);
  background:var(--surface-2); cursor:zoom-in;
  transition:border-color .18s, box-shadow .18s;
}
#tx-careers .tx-poster:hover{border-color:var(--accent); box-shadow:0 8px 28px -18px rgba(1,71,132,.55)}
#tx-careers .tx-poster:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ── The poster, full size ──────────────────────────────────────────────
   Deliberately plain: a dark ground so the poster itself is the only lit
   thing, and the picture scaled to fit the screen rather than cropped, so
   nothing printed near an edge is lost. */
.tx-lightbox{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:clamp(16px,4vw,44px);
  background:rgba(3,12,21,.93); backdrop-filter:blur(3px);
  animation:tx-lb-in .16s ease-out;
}
@keyframes tx-lb-in{from{opacity:0}to{opacity:1}}
.tx-lightbox img{
  max-width:100%; max-height:calc(100vh - 118px);
  width:auto; height:auto; object-fit:contain;
  border-radius:3px; background:#fff; box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.tx-lightbox .tx-lb-close,
.tx-lightbox .tx-lb-open{
  font-family:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:.86rem; font-weight:600; letter-spacing:.01em;
  padding:11px 22px; border-radius:2px; cursor:pointer; text-decoration:none;
  border:1px solid rgba(255,255,255,.32); background:transparent; color:#fff;
  transition:background .18s, border-color .18s;
}
.tx-lightbox .tx-lb-close{position:absolute; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px)}
.tx-lightbox .tx-lb-close:hover,
.tx-lightbox .tx-lb-open:hover{background:rgba(255,255,255,.14); border-color:#fff}
.tx-lightbox .tx-lb-open{font-weight:500; border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.86)}
@media (max-width:620px){
  .tx-lightbox img{max-height:calc(100vh - 172px)}
  .tx-lightbox .tx-lb-close{position:static}
}
@media (prefers-reduced-motion:reduce){
  .tx-lightbox{animation:none}
}

/* The job title in the list is a link, because every position has its own
   address now and people share these. It should not look like body text. */
#tx-careers h3 .tx-job-link{
  color:inherit; text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .22s ease, color .18s;
}
#tx-careers h3 .tx-job-link:hover{color:var(--accent); background-size:100% 1px}
#tx-careers h3 .tx-job-link:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* Buttons reuse the site's own shapes rather than inventing new ones. A link
   that acts as a button is styled the same as one, so the two never look
   different on the same row. */
#tx-careers .tx-btn,
#tx-careers button{
  font:inherit; font-weight:600; font-size:.93rem; cursor:pointer;
  border-radius:2px; padding:13px 26px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); transition:background .18s, border-color .18s, color .18s;
}
#tx-careers .tx-btn{display:inline-block; text-decoration:none; text-align:center}
#tx-careers .tx-btn:hover,
#tx-careers button:hover{border-color:var(--accent); color:var(--accent)}
#tx-careers .tx-btn.tx-primary,
#tx-careers button.tx-primary{background:var(--accent); border-color:var(--accent); color:#fff}
#tx-careers .tx-btn.tx-primary:hover,
#tx-careers button.tx-primary:hover{background:var(--accent-2); border-color:var(--accent-2); color:#fff}
#tx-careers button[disabled]{opacity:.55; cursor:not-allowed}
#tx-careers button[disabled]:hover{border-color:var(--line); color:var(--ink)}

/* The decision row at the foot of a job. Applying is the thing being asked
   for, so it is the only filled button on the screen; sharing sits beside it
   because a job in Sri Lanka reaches people through WhatsApp, not search. */
#tx-careers .tx-apply-row{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:34px; padding-top:28px; border-top:1px solid var(--line-soft);
}
#tx-careers .tx-apply{font-size:1rem; padding:15px 32px}
@media (max-width:520px){
  #tx-careers .tx-apply-row{flex-direction:column; align-items:stretch}
  #tx-careers .tx-apply-row .tx-btn{width:100%}
}

/* ── A position on its own ───────────────────────────────────────────────
   While one vacancy is open, the rest of the careers page steps out of the
   way, so the position reads as its own page. Nothing is moved or re-drawn —
   it is the same markup with the surroundings hidden — which is why the list
   comes straight back with the scroll position and everything else intact. */
body.tx-job-open [data-careers-chrome]{display:none !important}
body.tx-job-open #openings{padding-top:clamp(28px,4vw,52px)}
/* Standing alone, the position's title is the heading of the page, so it is
   given the size of one. */
body.tx-job-open #tx-careers .tx-jobhead h3{
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.15; margin-bottom:8px;
}

/* The head of a position: title, poster, and the detail folded away under it.
   The poster stays visible the whole way down the form, so it is given room. */
#tx-careers .tx-jobhead{background:var(--surface-2); border-color:var(--line)}
#tx-careers .tx-apply-head{margin-top:2px}

/* "More details about this position" — closed to begin with, because the
   poster above has usually said it already. */
#tx-careers .tx-more{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
#tx-careers .tx-more-btn{
  font-size:.88rem; padding:10px 18px; display:inline-flex; align-items:center; gap:9px;
}
#tx-careers .tx-more-btn::after{
  content:""; width:7px; height:7px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .2s;
}
#tx-careers .tx-more-btn[aria-expanded="true"]::after{transform:rotate(-135deg); margin-top:2px}
#tx-careers .tx-more-body{margin-top:6px}
#tx-careers .tx-more-body[hidden]{display:none}
#tx-careers .tx-more-body .tx-sect:first-child{margin-top:18px}

#tx-careers label.tx-q{
  display:block; margin:22px 0 0;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
#tx-careers .tx-req{color:var(--accent)}
#tx-careers .tx-hint{font-size:.84rem; color:var(--muted); margin-top:6px}
#tx-careers input,
#tx-careers select,
#tx-careers textarea{
  font:inherit; font-size:.97rem; width:100%; margin-top:8px; padding:13px 15px;
  border:1px solid var(--line); border-radius:2px;
  background:var(--ground); color:var(--ink);
}
#tx-careers input:focus,
#tx-careers select:focus,
#tx-careers textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
#tx-careers textarea{min-height:120px; resize:vertical}
#tx-careers .tx-ticks{margin-top:10px}
#tx-careers .tx-ticks label{
  display:flex; gap:11px; align-items:center; margin-top:9px;
  font-size:.95rem; color:var(--ink-2); text-transform:none; letter-spacing:0;
  font-family:inherit;
}
#tx-careers .tx-ticks input{width:auto; margin:0; accent-color:var(--accent)}
/* A note, not a fault. Used when a choice is allowed but has a consequence
   worth knowing — a Word document or a photograph of a CV is accepted, it just
   takes longer. Red would say "you did something wrong"; this does not. */
#tx-careers .tx-note{
  color:var(--ink-2); background:var(--surface-2);
  border-left:3px solid var(--accent-2);
  font-size:.92rem; margin-top:12px; padding:13px 17px; border-radius:0 2px 2px 0;
}
#tx-careers .tx-err{
  color:#8F2A1D; background:#FAE8E5; border-left:3px solid #8F2A1D;
  font-size:.92rem; margin-top:20px; padding:13px 17px; border-radius:0 2px 2px 0;
}
#tx-careers .tx-ok{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 3px 3px 0; padding:clamp(24px,3vw,34px); background:var(--surface-2);
}
#tx-careers .tx-ok h3{
  font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:1.4rem; color:var(--ink);
}
#tx-careers .tx-ok p{color:var(--ink-2); margin-top:8px}
/* The box no person ever sees. Anything that fills it in is not a person. */
#tx-careers .tx-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
#tx-careers .tx-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:26px}