/* ===========================================================================
   kazipin, third edition.

   Rebuilt against a job board reference layout: light, warm, orange on white,
   dark navy footer. The grammar of that design is strict and I am keeping it:

     - one accent, #FF4C16, and nothing else competes with it
     - headings are heavy, short and navy; body copy is small, grey and quiet
     - every block is a white card with a 1px warm border and an 8px radius
     - primary buttons are orange pills that carry a white circular arrow
     - one card in a grid is filled orange, so the grid has a focal point
     - tinted peach sections alternate with white ones
     - the newsletter block sits over the top edge of the footer

   Still mobile first, because F14 makes that mandatory from the first
   release. 320 to 2560, 44 pixel targets, nothing essential hidden.
   =========================================================================== */

:root{
  --o:#FF4C16;
  --o-d:#E83E0A;
  --o-l:#FF7C4C;
  --o-soft:#FFEFE9;
  --o-soft-2:#FFE3D8;
  --tint:#FFF4F0;

  --ink:#0B1C30;
  --ink-2:#2C3E52;
  --body:#7C8A99;
  --faint:#9AA7B4;

  --line:#F1E9E6;
  --line-2:#E9EEF2;
  --navy:#0A2036;
  --navy-2:#10294190;

  --ok:#12B76A;
  --ok-soft:#E7F8F0;
  --bad:#D92D20;
  --bad-soft:#FEF0EF;

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.78,.3,1);
  --out:cubic-bezier(.16,1,.3,1);
  --shell:1200px;
  --gut:clamp(16px,4vw,40px);
  --r:10px; --r-s:8px;
  --nav-h:72px;
  --sh:0 18px 44px -26px rgba(11,28,48,.26);
  --sh-s:0 10px 26px -18px rgba(11,28,48,.2);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font:400 15px/1.72 var(--sans); letter-spacing:-.003em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,video,canvas,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
[hidden]{display:none !important}
::selection{background:var(--o); color:#fff}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

/* ---------- type ---------- */
h1,h2,h3{margin:0; font-family:var(--disp); font-weight:800; color:var(--ink); letter-spacing:-.028em; line-height:1.18}
h1{font-size:clamp(32px,4.3vw,47px)}
h2{font-size:clamp(26px,3.3vw,39px)}
h3{font-size:clamp(17px,1.5vw,21px); line-height:1.3; letter-spacing:-.024em}
h4{margin:0; font-family:var(--disp); font-weight:700; font-size:15.5px; letter-spacing:-.02em; line-height:1.35; color:var(--ink)}
p{margin:0}
.lead{font-size:13.5px; line-height:1.85; color:var(--body)}
.small{font-size:13px; line-height:1.7; color:var(--body)}
.tiny{font:500 11px/1.6 var(--sans); color:var(--faint)}
.mono{font:600 10.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase}
.eyebrow{font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--o); margin:0 0 14px}

/* a section head, centred like every centred head on the reference */
.sec{padding-block:clamp(46px,5.4vw,80px); position:relative}
.sec.tint{background:var(--tint)}
.sec-head{max-width:640px; margin:0 auto clamp(26px,3.2vw,44px); text-align:center}
.sec-head.left{margin-inline:0; text-align:left}
.sec-head .lead{margin-top:12px}
.sec-head.left .lead{margin-top:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; padding:11px 20px; border-radius:999px; position:relative;
  font:700 13.5px/1 var(--sans); letter-spacing:-.01em; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s, box-shadow .25s, transform .3s var(--ease);
}
/* the white circular arrow that sits inside every primary button on the reference */
.btn .ic{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:#fff; color:var(--o); margin:-7px -11px -7px 2px; transition:transform .3s var(--ease);
}
.btn .ic svg{width:12px; height:12px}
.btn:hover .ic{transform:translateX(3px)}
.btn-o{background:var(--o); color:#fff; box-shadow:0 14px 28px -16px rgba(255,76,22,.85)}
.btn-o:hover{background:var(--o-d)}
.btn-line{border:1.4px solid var(--o); color:var(--o); background:#fff}
.btn-line:hover{background:var(--o); color:#fff}
.btn-line .ic{background:var(--o); color:#fff}
.btn-line:hover .ic{background:#fff; color:var(--o)}
.btn-ghost{background:#fff; border:1.4px solid var(--line-2); color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--o); color:var(--o)}
.btn-sm{min-height:36px; padding:9px 16px; font-size:12.5px; border-radius:6px; gap:7px}
.btn-sm .ic{width:21px; height:21px; margin:-5px -9px -5px 1px}
.btn-sm .ic svg{width:10px; height:10px}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}

/* ===========================================================================
   header
   =========================================================================== */
/* how far down the page you are, which is the cheapest possible way to make a long page feel
   like it is moving under you */
.progress{position:fixed; left:0; top:0; height:3px; z-index:95; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--o),#FF8A4D); pointer-events:none}

.nav{position:sticky; top:0; z-index:70; background:rgba(255,255,255,.93); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .3s}
.nav.stuck{box-shadow:0 10px 30px -22px rgba(11,28,48,.5)}
.nav .shell{display:flex; align-items:center; gap:14px; min-height:var(--nav-h); flex-wrap:wrap; padding-block:9px}
.brand{display:flex; align-items:center; gap:9px; margin-right:auto}
.brand .mk{width:26px; height:26px; flex:none; color:var(--o)}
.brand b{font:800 20px/1 var(--disp); letter-spacing:-.045em; color:var(--ink)}
.brand b i{font-style:normal; color:var(--o)}

.menu{display:flex; align-items:center; gap:clamp(12px,1.6vw,24px); font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.menu a{position:relative; padding-block:6px; transition:color .2s}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--o); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.menu a:hover{color:var(--o)}
.menu a:hover::after{transform:scaleX(1)}
@media (max-width:1180px){ .menu{display:none} }

/* F13.2 the persistent area control, in the slot the reference gives to My Account */
.areabar{display:inline-flex; align-items:center; gap:8px; min-height:38px; font-size:12.5px; color:var(--ink-2); max-width:100%}
.areabar .pin{width:15px; height:15px; color:var(--o); flex:none}
/* a flex child will not shrink below its content unless it is told to, which is how a long
   area name pushed the Change button off the right edge of a 390 pixel phone */
/* capped, because "Kenya, shown by default" is long enough to push the whole row onto a
   second line on a 1280 pixel laptop */
.areabar .who{min-width:0; max-width:250px; flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.areabar b{font-weight:700; color:var(--ink)}
.areabar .tag{font:700 9px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; padding:4px 7px; border-radius:4px; background:var(--o-soft); color:var(--o); flex:none}
.areabar .tag.exact{background:var(--ok-soft); color:var(--ok)}
.areabar .tag.none{background:var(--bad-soft); color:var(--bad)}
.areabar .chg{min-height:30px; padding:7px 13px; border-radius:999px; background:#F4F6F8; font-weight:700; font-size:12px; color:var(--ink); flex:none; transition:background .2s,color .2s}
.areabar .chg:hover{background:var(--o); color:#fff}

@media (max-width:620px){
  .nav .shell{gap:10px}
  .areabar{width:100%; gap:7px}
  .areabar .lbl{display:none}              /* the name is the point, the label is not */
  .areabar .tag{font-size:8.5px; padding:4px 6px}
  .areabar .chg{margin-left:auto}
  .nav .btn{width:100%}
}

/* ===========================================================================
   hero
   =========================================================================== */
.hero{position:relative; overflow:hidden; isolation:isolate}
.hero .shell{position:relative; z-index:3; padding-block:clamp(26px,3.4vw,42px) clamp(40px,5vw,72px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(20px,3vw,54px); align-items:center}

/* the peach blob behind the person, the single largest shape on the reference page */
.blob{
  position:absolute; z-index:0; left:-12%; top:-11%; width:60%; height:118%;
  background:var(--o-soft);
  border-radius:52% 44% 40% 56% / 46% 52% 48% 54%;
}
@media (max-width:900px){ .blob{left:-26%; width:120%; height:58%; top:-6%} }

.figure{position:relative; min-height:clamp(330px,42vw,470px); display:flex; align-items:flex-end; justify-content:center}
/* an arch, which is the nearest honest thing to the reference cut-out without a cut-out */
.figure .shot{
  width:min(100%,336px); aspect-ratio:4/5; border-radius:200px 200px 22px 22px; overflow:hidden;
  position:relative; z-index:2; box-shadow:0 36px 70px -40px rgba(11,28,48,.42);
}
.figure .shot img{width:100%; height:100%; object-fit:cover; object-position:50% 22%}

/* the floating cards. Every one of them states something the build actually does. */
.fcard{
  position:absolute; z-index:4; background:#fff; border-radius:10px; padding:11px 13px;
  box-shadow:0 16px 34px -18px rgba(11,28,48,.3); border:1px solid var(--line);
  font-size:11.5px; line-height:1.45; font-weight:600; color:var(--ink);
  animation:float 6s var(--ease) infinite;
}
.fcard small{display:block; font-weight:500; font-size:10px; color:var(--faint); margin-top:2px; letter-spacing:.02em}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.f-top{left:-8%; top:1%; max-width:188px; animation-delay:-.4s}
.f-area{right:-7%; top:33%; max-width:184px; animation-delay:-2.1s}
.f-count{left:-10%; bottom:21%; max-width:172px; animation-delay:-3.4s}
.f-film{right:-4%; bottom:3%; width:148px; padding:0; overflow:hidden; animation-delay:-1.3s}
.f-film video{width:100%; height:92px; object-fit:cover; display:block}
.f-film span{display:block; padding:7px 10px; font-size:10px; font-weight:600; color:var(--ink)}
.f-film span i{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--o); margin-right:5px; vertical-align:middle; animation:beat 2.2s infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}

.stack{display:flex; align-items:center; margin-bottom:7px}
.stack img{width:27px; height:27px; border-radius:50%; object-fit:cover; border:2px solid #fff; margin-right:-9px}
.stack .more{width:27px; height:27px; border-radius:50%; background:var(--o); color:#fff; display:grid; place-items:center; font:700 11px/1 var(--sans); border:2px solid #fff; position:relative}
.fcard .ico{width:26px; height:26px; border-radius:7px; background:var(--o-soft); color:var(--o); display:grid; place-items:center; margin-bottom:7px}
.fcard .ico svg{width:14px; height:14px}
.fcard .heart{position:absolute; right:-14px; bottom:-14px; width:30px; height:30px; border-radius:50%; background:#fff; box-shadow:var(--sh-s); display:grid; place-items:center; color:var(--o)}
.fcard .heart svg{width:14px; height:14px}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .figure{order:-1; min-height:360px}
  .f-top{left:0} .f-area{right:0} .f-count{left:0} .f-film{right:0}
}
@media (max-width:520px){
  .figure .shot{width:min(100%,250px)}
  .f-film{display:none}
  .f-top,.f-area,.f-count{max-width:152px; font-size:10.5px; padding:9px 10px}
}

.hero h1{max-width:15ch}
.hero .lead{max-width:48ch; margin-top:16px}

/* the search bar */
.searchbar{
  display:flex; align-items:center; gap:0; margin-top:26px; max-width:620px;
  background:#fff; border:1px solid var(--line); border-radius:9px; padding:7px 7px 7px 6px;
  box-shadow:0 22px 46px -26px rgba(11,28,48,.3);
}
.sseg{display:flex; align-items:center; gap:9px; flex:1 1 0; min-width:0; padding:0 12px; position:relative}
.sseg + .sseg{border-left:1px solid var(--line)}
.sseg > svg{width:15px; height:15px; color:var(--o); flex:none}
.sseg select{
  appearance:none; -webkit-appearance:none; width:100%; min-width:0; min-height:40px; border:0; background:none;
  font-size:12.5px; font-weight:500; color:var(--ink); padding-right:16px; cursor:pointer; text-overflow:ellipsis;
}
.sseg select:focus{outline:none; color:var(--o)}
.sseg .cv{position:absolute; right:10px; width:11px; height:11px; color:var(--faint); pointer-events:none}
.searchbar .btn{flex:none; border-radius:6px; min-height:42px; padding:12px 20px}
@media (max-width:620px){
  .searchbar{flex-wrap:wrap; padding:9px; gap:4px}
  .sseg{flex:1 1 100%; padding:0 8px}
  .sseg + .sseg{border-left:0; border-top:1px solid var(--line); padding-top:4px; margin-top:4px}
  .searchbar .btn{width:100%; margin-top:6px}
}

/* ===========================================================================
   the moving rule band
   Six short statements of what the build refuses to do, sliding past forever. It is the one
   piece of the page that is always in motion whether you scroll or not.
   =========================================================================== */
.marquee{background:var(--o); overflow:hidden; padding-block:15px; position:relative; display:flex}
.mtrack{display:flex; flex:none; gap:0; animation:slide 34s linear infinite; will-change:transform}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mtrack span{display:inline-flex; align-items:center; gap:clamp(20px,3vw,44px); padding-right:clamp(20px,3vw,44px);
  font:800 clamp(14px,1.5vw,19px)/1 var(--disp); letter-spacing:-.025em; color:#fff; white-space:nowrap}
.mtrack span i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.55); flex:none; display:block}
@media (prefers-reduced-motion:reduce){ .mtrack{animation:none} }

/* ===========================================================================
   four steps
   =========================================================================== */
.steps4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,34px)}
@media (max-width:860px){ .steps4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .steps4{grid-template-columns:1fr} }
/* centred, and the icon is large enough to be a drawing rather than a glyph */
.st4{text-align:center}
.st4 .tile{width:96px; height:96px; border-radius:26px; background:var(--o-soft); color:var(--o);
  display:grid; place-items:center; margin:0 auto 20px; position:relative;
  transition:transform .5s var(--ease), background .3s, box-shadow .35s}
.st4 .tile::after{content:""; position:absolute; inset:0; border-radius:inherit; border:1.5px solid var(--o-soft-2); transform:scale(1); opacity:0; transition:transform .55s var(--ease), opacity .45s}
.st4 .tile svg{width:52px; height:52px; position:relative; z-index:2}
.st4:hover .tile{transform:translateY(-6px); background:var(--o-soft-2); box-shadow:0 22px 40px -22px rgba(255,76,22,.55)}
.st4:hover .tile::after{transform:scale(1.14); opacity:1}
.st4 h4{margin-bottom:8px; font-size:17px}
.st4 p{font-size:12.6px; line-height:1.75; color:var(--body); max-width:30ch; margin-inline:auto}
.st4 .f{display:inline-block; font:700 9.5px/1 var(--mono); letter-spacing:.1em; color:var(--o); background:var(--o-soft); padding:5px 8px; border-radius:5px; margin-bottom:10px}

/* the faint circle cluster the reference parks at the top right of this block */
.dots-deco{position:absolute; right:3%; top:14%; width:124px; height:116px; pointer-events:none; opacity:.55}
.dots-deco span{position:absolute; width:46px; height:46px; border-radius:50%; background:var(--o-soft-2)}
.dots-deco span:nth-child(1){left:28px; top:0}
.dots-deco span:nth-child(2){left:0; top:34px}
.dots-deco span:nth-child(3){left:56px; top:34px}
.dots-deco span:nth-child(4){left:28px; top:68px}
@media (max-width:900px){ .dots-deco{display:none} }

/* ===========================================================================
   category cards
   =========================================================================== */
.cgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.5vw,20px)}
@media (max-width:900px){ .cgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .cgrid{grid-template-columns:1fr} }
.ccard{
  text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:30px 20px 26px; transition:border-color .25s, transform .45s var(--ease), box-shadow .3s;
  display:block; width:100%; min-height:44px; transform-style:preserve-3d;
}
.ccard:hover{border-color:var(--o-soft-2); box-shadow:var(--sh)}
.ccard .cc{width:76px; height:76px; border-radius:24px; background:var(--o-soft); color:var(--o);
  display:grid; place-items:center; margin:0 auto 20px; transition:background .25s, color .25s, transform .5s var(--ease)}
.ccard .cc svg{width:40px; height:40px}
.ccard:hover .cc{transform:translateY(-4px) rotate(-4deg)}
.ccard b{display:block; font:700 15.5px/1.35 var(--disp); letter-spacing:-.022em; color:var(--ink)}
.ccard span{display:block; font-size:11px; font-weight:500; color:var(--faint); margin-top:8px; letter-spacing:.01em}
/* exactly one filled card, which is how the reference grid gets a focal point */
.ccard.on{background:var(--o); border-color:var(--o); box-shadow:0 22px 40px -22px rgba(255,76,22,.7)}
.ccard.on .cc{background:rgba(255,255,255,.22); color:#fff}
.ccard.on b{color:#fff}
.ccard.on span{color:rgba(255,255,255,.82)}
.ccard.on:hover{transform:translateY(-4px)}

/* ===========================================================================
   the console
   =========================================================================== */
.console{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--sh)}
.console-bar{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:16px 20px; border-bottom:1px solid var(--line); background:#FFFBF9}
.console-bar b{font:700 14px/1 var(--disp); letter-spacing:-.02em}
.console-bar .f{font:700 9.5px/1 var(--mono); letter-spacing:.1em; padding:5px 7px; border-radius:4px; background:var(--o-soft); color:var(--o)}
.console-body{padding:clamp(18px,2.6vw,30px)}

.steps{display:flex; gap:7px; margin-bottom:24px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:8px; min-height:38px; padding:9px 16px; border-radius:999px;
  background:#F5F7F9; font-size:12.5px; font-weight:700; color:var(--faint)}
.step i{width:19px; height:19px; border-radius:50%; background:#E4E9EE; color:#fff; display:grid; place-items:center; font:700 10px/1 var(--sans); font-style:normal; flex:none}
.step.on{background:var(--o); color:#fff}
.step.on i{background:rgba(255,255,255,.26)}
.step.done{background:var(--ok-soft); color:var(--ok)}
.step.done i{background:var(--ok); color:#fff}

.field{margin-bottom:18px}
.field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:8px; color:var(--ink)}
.field .hint{font-size:11.5px; color:var(--faint); margin-top:7px; line-height:1.6}
.input,select,textarea{
  width:100%; min-height:44px; padding:11px 13px; border-radius:7px;
  border:1.4px solid var(--line-2); background:#fff; color:var(--ink); font-size:14px;
  transition:border-color .18s, box-shadow .18s;
}
.input::placeholder,textarea::placeholder{color:var(--faint)}
.input:focus,select:focus,textarea:focus{outline:none; border-color:var(--o); box-shadow:0 0 0 3px rgba(255,76,22,.12)}
textarea{min-height:92px; resize:vertical; line-height:1.6}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:620px){ .row2{grid-template-columns:1fr} }

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{min-height:44px; padding:11px 17px; border-radius:999px; border:1.4px solid var(--line-2);
  background:#fff; font-size:13px; font-weight:600; color:var(--ink-2); transition:all .2s}
.chip:hover{border-color:var(--o); color:var(--o)}
.chip[aria-pressed="true"]{background:var(--o); border-color:var(--o); color:#fff}
.actlist{max-height:268px; overflow:auto; border:1.4px solid var(--line-2); border-radius:8px; margin-top:9px; background:#fff}
.actlist button{display:flex; justify-content:space-between; gap:12px; align-items:center; width:100%;
  min-height:46px; padding:12px 15px; text-align:left; font-size:13.5px; color:var(--ink-2); border-bottom:1px solid var(--line-2)}
.actlist button:last-child{border-bottom:0}
.actlist button:hover{background:#FFF7F4}
.actlist button[aria-pressed="true"]{background:var(--o-soft); color:var(--o); font-weight:700}
.actlist .mk{font:700 9.5px/1 var(--mono); letter-spacing:.08em; color:var(--faint)}
.actlist .other{color:var(--o); font-weight:700}

/* ---------- the result ---------- */
.published{display:flex; gap:12px; align-items:flex-start; padding:15px 17px; border-radius:9px;
  background:var(--ok-soft); border:1px solid #BFEBD6; margin-bottom:24px}
.published svg{width:19px; height:19px; flex:none; margin-top:2px; color:var(--ok)}
.published b{display:block; font-size:14px; color:#067647; font-weight:700}
.published span{display:block; font-size:12.5px; color:#3F7A61; margin-top:3px}

.resulthead{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.resulthead h3{font-size:19px}
.state{font:700 9.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; padding:6px 9px; border-radius:4px}
.state.ready{background:var(--ok-soft); color:var(--ok)}
.state.empty{background:var(--o-soft); color:var(--o)}
.state.unavailable{background:var(--bad-soft); color:var(--bad)}
.state.loading{background:#F2F5F7; color:var(--faint)}

/* ---------- provider cards, in the reference job card shape ---------- */
/* auto-fill, not auto-fit: with one match auto-fit collapses the empty tracks and a single
   card stretches the whole console, which looks like a bug rather than a result */
.pcards{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 20px 20px;
  position:relative; overflow:hidden; display:flex; flex-direction:column; text-align:center;
  transition:border-color .25s, transform .4s var(--ease), box-shadow .3s;
}
.pcard::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,76,22,.06),transparent 62%)}
.pcard:hover{border-color:var(--o-soft-2); transform:translateY(-4px); box-shadow:var(--sh)}
.pcard:hover::after{opacity:1}
.pcard .ava{width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; margin:0 auto 16px;
  box-shadow:0 0 0 4px #fff, 0 0 0 5.5px var(--o-soft)}
.pcard .nm{display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap}
.pcard .nm b{font:700 16px/1.3 var(--disp); letter-spacing:-.024em; color:var(--ink)}
.pcard .firm{font-size:11.5px; color:var(--faint); margin-top:5px; font-weight:500}
.pcard .hl{font-size:12.3px; color:var(--body); margin-top:12px; line-height:1.7}
.pcard .meta{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:14px}
.pcard .cov{font-size:11px; color:var(--faint); margin-top:10px; line-height:1.6}
.pcard .acts{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); position:relative; z-index:2}
.pcard .acts .invnote{flex:1 1 100%; margin:0; text-align:center}

.count{display:inline-flex; align-items:baseline; gap:5px; padding:6px 11px; border-radius:5px;
  background:var(--o-soft); color:var(--o); font-size:11px; font-weight:700}
.count b{font:800 14px/1 var(--disp)}
.vbadge{display:inline-flex; align-items:center; gap:4px; padding:6px 9px; border-radius:5px;
  font:700 10.5px/1 var(--sans); background:var(--ok-soft); color:var(--ok)}
.vbadge svg{width:11px; height:11px}
.vbadge.off{background:#F3F5F7; color:var(--faint)}
.rate{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--ink-2); font-weight:600}
.rate svg{width:12px; height:12px; color:#FDB022}

.notice{padding:22px; border-radius:var(--r); border:1.4px dashed #E2D7D2; background:#FFFAF8}
.notice b{display:block; font:700 15px/1.4 var(--disp); letter-spacing:-.02em; margin-bottom:7px}
.notice p{font-size:12.8px; color:var(--body); line-height:1.7}
.notice .acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:15px}
/* the publish refusal writes its reason as plain text, so the colour has to be on the box and
   not only on a heading it does not have */
.notice.bad{background:var(--bad-soft); border-color:#F6C9C4; border-style:solid; color:var(--bad); font-size:13.5px; font-weight:600; padding:16px 18px}
.notice.bad b{color:var(--bad)}

/* ---------- show the working ---------- */
.working{margin-top:24px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#FFFBF9}
.working > summary{list-style:none; cursor:pointer; min-height:48px; display:flex; align-items:center; gap:10px;
  padding:14px 18px; font-weight:700; font-size:13.5px; color:var(--ink)}
.working > summary::-webkit-details-marker{display:none}
.working > summary:hover{color:var(--o)}
.working > summary .arw{margin-left:auto; width:15px; height:15px; color:var(--faint); transition:transform .25s}
.working[open] > summary .arw{transform:rotate(180deg)}
.working .inner{padding:4px 18px 10px; border-top:1px solid var(--line); background:#fff}
.gaterow{padding:15px 0; border-bottom:1px solid var(--line)}
.gaterow:last-child{border-bottom:0}
.gaterow .who{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.gaterow .who b{font-size:13.5px; font-weight:700}
.gaterow .who .verdict{font:700 9px/1 var(--mono); letter-spacing:.09em; padding:5px 8px; border-radius:4px; margin-left:auto}
.verdict.in{background:var(--ok-soft); color:var(--ok)}
.verdict.rel{background:var(--o-soft); color:var(--o)}
.verdict.out{background:var(--bad-soft); color:var(--bad)}
.gates{display:grid; gap:7px}
.gate{display:grid; grid-template-columns:16px 1fr; gap:10px; align-items:start; font-size:12.2px; line-height:1.6; color:var(--ink-2)}
.gate i{width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:9px; font-weight:700; margin-top:3px}
.gate.y i{background:var(--ok-soft); color:var(--ok)}
.gate.n i{background:var(--bad-soft); color:var(--bad)}
.gate.m i{background:#F2F5F7; color:var(--faint)}
.gate.m{color:var(--faint)}
.gate em{font-style:normal; color:var(--body)}

/* ===========================================================================
   scenarios, drawn as the reference job cards
   =========================================================================== */
.tabsrow{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:26px}
.tabs{display:flex; gap:9px; flex-wrap:wrap}
.tab{min-height:38px; padding:9px 18px; border-radius:999px; background:#fff; border:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--ink-2); transition:all .22s}
.tab:hover{border-color:var(--o); color:var(--o)}
.tab[aria-selected="true"]{border-color:var(--o); color:var(--o); background:var(--o-soft)}
.arrows{display:flex; gap:9px}
.arrows button{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:#fff; color:var(--ink-2); transition:all .22s}
.arrows button svg{width:14px; height:14px}
.arrows button:hover{border-color:var(--o); color:var(--o)}
.arrows button.on{background:var(--o); border-color:var(--o); color:#fff}
.arrows button:disabled{opacity:.4; cursor:not-allowed}

.scenarios{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){ .scenarios{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .scenarios{grid-template-columns:1fr} }
.scn{
  text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 20px 20px;
  display:flex; flex-direction:column; align-items:center; min-height:44px;
  transition:border-color .25s, transform .4s var(--ease), box-shadow .3s;
}
.scn:hover{border-color:var(--o-soft-2); transform:translateY(-6px); box-shadow:var(--sh)}
/* the coloured disc, enlarged: at 40 pixels it read as an emoji rather than an illustration */
.scn .disc{width:64px; height:64px; border-radius:20px; display:grid; place-items:center; color:#fff;
  margin:0 auto 18px; flex:none; transition:transform .5s var(--ease)}
.scn .disc svg{width:32px; height:32px}
.scn:hover .disc{transform:translateY(-4px) rotate(-5deg)}
.scn .disc.c0{background:#F04438} .scn .disc.c1{background:#12B76A} .scn .disc.c2{background:#22CCEE}
.scn .disc.c3{background:#7A5AF8} .scn .disc.c4{background:#FDB022} .scn .disc.c5{background:#FF4C16}
.scn .disc.c6{background:#2E90FA} .scn .disc.c7{background:#EE46BC}
.scn b{display:block; font:700 15.5px/1.35 var(--disp); letter-spacing:-.024em; color:var(--ink)}
.scn .ac{display:block; font:700 9.5px/1 var(--mono); letter-spacing:.1em; color:var(--faint); margin-top:6px}
.scn > span.d{display:block; font-size:12.3px; color:var(--body); line-height:1.7; margin-top:11px; flex:1}
/* not .foot: that is the page footer's class, and a scenario card happily inherited its navy
   background until this was renamed */
.scn .scnfoot{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); width:100%}
.scn .run{border:1.4px solid var(--o); color:var(--o); border-radius:999px; padding:10px 20px; font:700 12px/1 var(--sans); transition:all .2s}
.scn:hover .run{background:var(--o); color:#fff; box-shadow:0 12px 22px -12px rgba(255,76,22,.8)}
.scn .chipmeta{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--faint); font-weight:500}
.scn .chipmeta svg{width:15px; height:15px}

/* ===========================================================================
   connect, with the globe where the reference puts its illustration
   =========================================================================== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,70px); align-items:center}
@media (max-width:880px){ .split{grid-template-columns:1fr} }
.split .copy p + p{margin-top:14px}
.split .btns{display:flex; gap:11px; flex-wrap:wrap; margin-top:26px}

.globe-wrap{position:relative; aspect-ratio:1; max-width:min(470px,86vw); margin-inline:auto; width:100%}
/* a soft seat under the sphere, so a pale globe on a white page is not floating in nothing */
.globe-wrap::before{content:""; position:absolute; inset:4%; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 46%,#FFF0E9 0%,#FFE4D8 56%,rgba(255,228,216,0) 72%)}
#globe{position:absolute; inset:0; width:100%; height:100%}
.globe-cap{
  position:absolute; left:50%; bottom:2px; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-s);
  font:700 11px/1 var(--sans); letter-spacing:.01em; white-space:nowrap; color:var(--ink);
}
.globe-cap i{width:7px; height:7px; border-radius:50%; background:var(--o); box-shadow:0 0 0 4px rgba(255,76,22,.14); animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,76,22,.14)}50%{box-shadow:0 0 0 10px rgba(255,76,22,0)}}

/* the live readout, kept because it is the proof that F13 is server side */
.detect{display:grid; gap:9px; margin-top:26px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:17px 19px}
.detect .row{display:grid; grid-template-columns:96px 1fr; gap:12px; font-size:11.5px; line-height:1.6}
.detect .row span{color:var(--faint); font-weight:500}
.detect .row b{color:var(--ink-2); font-weight:600}
.detect .ok{color:var(--ok)} .detect .warn{color:var(--o)}
@media (max-width:520px){ .detect .row{grid-template-columns:1fr; gap:2px} }

/* ---------- the feature strip, in the slot the reference gives brand logos ---------- */
.strip{display:flex; align-items:center; justify-content:space-between; gap:clamp(14px,3vw,40px); flex-wrap:wrap; padding-block:clamp(34px,4vw,54px)}
.strip a{display:flex; align-items:center; gap:14px; transition:opacity .25s, transform .3s var(--ease)}
.strip a:hover{transform:translateY(-3px)}
.strip .d{width:54px; height:54px; border-radius:17px; display:grid; place-items:center; background:var(--o-soft); color:var(--o); flex:none; transition:background .25s, transform .45s var(--ease)}
.strip .d svg{width:28px; height:28px}
.strip a:hover .d{background:var(--o-soft-2); transform:rotate(-6deg)}
.strip b{font:800 20px/1 var(--disp); letter-spacing:-.04em; color:var(--ink)}
.strip small{display:block; font:500 10.5px/1.3 var(--sans); color:var(--faint); margin-top:4px; letter-spacing:.01em}
@media (max-width:760px){ .strip{justify-content:flex-start; gap:18px} .strip b{font-size:16px} .strip .d{width:46px; height:46px} .strip .d svg{width:24px; height:24px} }

/* ===========================================================================
   the people in this demonstration, in the reference testimonial shape
   =========================================================================== */
/* A real carousel. The first build was a static grid with four decorative dots under it, and
   the question "why don't those cards move" was the right one to ask. */
.tslider{overflow:hidden; padding:6px 2px 10px}
.ttrack{display:flex; gap:var(--tgap,22px); transition:transform .85s var(--out); will-change:transform}
.tcard{
  flex:0 0 calc((100% - var(--tgap,22px) * 2) / 3);
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 22px 26px;
  position:relative; text-align:center;
  transition:transform .4s var(--ease), box-shadow .3s, border-color .25s;
}
@media (max-width:980px){ .tcard{flex-basis:calc((100% - var(--tgap,22px)) / 2)} }
@media (max-width:680px){ .tcard{flex-basis:100%} }
.tcard:hover{transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--o-soft-2)}
.tcard .q{position:absolute; right:18px; top:12px; font:800 54px/1 Georgia,serif; color:#F1F4F7; pointer-events:none}
.tcard img{width:76px; height:76px; border-radius:50%; object-fit:cover; margin:0 auto 18px;
  box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--o-soft)}
.tcard b{display:block; font:700 16px/1.3 var(--disp); letter-spacing:-.022em; color:var(--ink)}
.tcard .role{font-size:11.5px; color:var(--faint); margin-top:6px; font-weight:500}
.tcard p{font-size:12.4px; color:var(--body); line-height:1.78; margin-top:15px}
.tcard .tag{display:inline-block; margin-top:16px; font:700 9.5px/1 var(--mono); letter-spacing:.1em; padding:6px 9px; border-radius:5px; background:var(--o-soft); color:var(--o)}
/* The dot is 9 pixels; the thing you press is 44. Drawing the dot in a pseudo element is what
   lets both be true at once, which F14 needs and a 9 pixel button does not give you. */
.pager{display:flex; justify-content:center; gap:4px; margin-top:24px}
.pager button{width:30px; height:44px; background:none; padding:0; position:relative; display:block}
.pager button::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:var(--o-soft-2); transition:all .35s var(--ease);
}
.pager button[aria-current="true"]::before{background:var(--o); width:26px; border-radius:999px}
.pager button:hover::before{background:var(--o-l)}

/* ===========================================================================
   the orange band
   =========================================================================== */
.band{background:var(--o); color:#fff; position:relative; overflow:hidden; isolation:isolate}
/* the faint concentric sweeps the reference draws across its orange block */
.band::before{
  content:""; position:absolute; inset:-40% -10%; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(closest-side,transparent 78%,rgba(255,255,255,.14) 79%,transparent 81%),
    radial-gradient(closest-side,transparent 60%,rgba(255,255,255,.12) 61%,transparent 63%),
    radial-gradient(closest-side,transparent 42%,rgba(255,255,255,.1) 43%,transparent 45%);
  background-repeat:no-repeat; background-position:14% 50%,14% 50%,14% 50%; background-size:140% 190%,140% 190%,140% 190%;
}
.band .shell{position:relative; z-index:2; padding-block:clamp(44px,5.6vw,76px)}
.band-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,54px); align-items:center}
@media (max-width:880px){ .band-grid{grid-template-columns:1fr} }
.band .eyebrow{color:rgba(255,255,255,.88)}
.band h2{color:#fff; max-width:14ch}
.band p{color:rgba(255,255,255,.9); font-size:13px; line-height:1.85; margin-top:16px; max-width:52ch}
.badges{display:flex; gap:11px; flex-wrap:wrap; margin-top:26px}
.badge{display:flex; align-items:center; gap:10px; background:#0B1220; color:#fff; border-radius:8px; padding:9px 16px; min-height:46px; transition:transform .3s var(--ease)}
.badge:hover{transform:translateY(-3px)}
.badge svg{width:20px; height:20px; flex:none}
.badge small{display:block; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.badge b{display:block; font:700 13px/1.2 var(--sans); margin-top:1px}

/* big numbers, because an orange block with two paragraphs in it was the thinnest part of the
   page and it had nothing to look at */
.bstats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,26px); margin-top:30px}
.bstat{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26); border-radius:14px; padding:18px 16px; text-align:center; backdrop-filter:blur(3px)}
.bstat b{display:block; font:800 clamp(26px,3vw,36px)/1 var(--disp); letter-spacing:-.04em; color:#fff}
.bstat span{display:block; font-size:10.5px; line-height:1.5; color:rgba(255,255,255,.88); margin-top:8px; font-weight:500}
@media (max-width:480px){ .bstats{grid-template-columns:1fr; gap:10px} .bstat{display:flex; align-items:baseline; justify-content:center; gap:10px; text-align:left} .bstat span{margin-top:0} }

/* the phone, which holds a real capture of this page at 390 pixels */
.phonewrap{position:relative; display:flex; justify-content:center}
.phone{width:min(238px,62vw); border-radius:32px; background:#0B1220; padding:9px; box-shadow:0 44px 70px -34px rgba(0,0,0,.6); position:relative; animation:hover 7s var(--ease) infinite}
@keyframes hover{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.2deg)}}
.phone::before{content:""; position:absolute; left:50%; top:16px; transform:translateX(-50%); width:54px; height:5px; border-radius:99px; background:rgba(255,255,255,.3); z-index:3}
.phone img{width:100%; border-radius:24px; display:block}
.ptag{position:absolute; z-index:4; background:#fff; border-radius:13px; padding:11px 14px; box-shadow:0 18px 34px -18px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:10px; font:700 11.5px/1.35 var(--sans); color:var(--ink); animation:float 6s var(--ease) infinite}
.ptag i{width:30px; height:30px; border-radius:9px; background:var(--o-soft); color:var(--o); display:grid; place-items:center; flex:none}
.ptag i svg{width:17px; height:17px}
.ptag small{display:block; font-weight:500; font-size:10px; color:var(--faint); margin-top:2px}
.pt-a{left:-6%; top:16%; animation-delay:-1.4s}
.pt-b{right:-6%; bottom:14%; animation-delay:-3.2s}
@media (max-width:520px){ .ptag{position:static; margin:12px auto 0; animation:none} .phonewrap{flex-direction:column} }

/* ===========================================================================
   explore cards
   =========================================================================== */
.exgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,34px)}
@media (max-width:900px){ .exgrid{grid-template-columns:1fr} }
.ex{display:block}
.ex .pic{border-radius:8px; overflow:hidden; aspect-ratio:16/9}
.ex .pic img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.ex:hover .pic img{transform:scale(1.06)}
/* the reference offsets the white panel from its photo instead of stacking them square */
.ex .body{background:#fff; border:1px solid var(--line); border-radius:6px; padding:24px 22px 20px; width:92%; margin-top:-34px; position:relative; z-index:2; box-shadow:var(--sh-s); text-align:center; transition:box-shadow .3s, transform .4s var(--ease)}
.ex:hover .body{box-shadow:var(--sh); transform:translateY(-4px)}
.ex .body h4{max-width:18ch; margin-inline:auto; font-size:16px}
.ex .body p{font-size:12.3px; color:var(--body); line-height:1.78; margin-top:13px}
.ex .more{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font:700 12.5px/1 var(--sans); color:var(--o)}
.ex .more svg{width:16px; height:16px; transition:transform .3s var(--ease)}
.ex:hover .more svg{transform:translateX(5px)}

/* ===========================================================================
   coverage
   =========================================================================== */
.cover{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.cover .cr{display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center; padding:15px 20px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.cover .cr:last-child{border-bottom:0}
.cover .cr:hover{background:#FFFAF8}
.cover .cr code{font:700 10px/1 var(--mono); color:var(--o); background:var(--o-soft); padding:6px 7px; border-radius:4px; justify-self:start}
.cover .cr .st{font:700 9.5px/1 var(--mono); letter-spacing:.08em; padding:6px 9px; border-radius:4px; white-space:nowrap}
.st.built{background:var(--ok-soft); color:var(--ok)}
.st.part{background:var(--o-soft); color:var(--o)}
.st.next{background:#F2F5F7; color:var(--faint)}
@media (max-width:620px){ .cover .cr{grid-template-columns:80px 1fr; row-gap:8px} .cover .cr .st{grid-column:2} }

/* ===========================================================================
   newsletter, sitting over the top edge of the footer
   =========================================================================== */
.newswrap{position:relative; z-index:3; margin-bottom:-78px}
.news{
  max-width:620px; margin-inline:auto; background:var(--o); border-radius:26px; text-align:center;
  padding:clamp(34px,4vw,48px) clamp(20px,4vw,40px) clamp(40px,5vw,56px);
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 30px 60px -30px rgba(255,76,22,.6);
}
.news::before{
  content:""; position:absolute; inset:-50% -20%; z-index:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(closest-side,transparent 76%,rgba(255,255,255,.16) 77%,transparent 79%),
    radial-gradient(closest-side,transparent 56%,rgba(255,255,255,.14) 57%,transparent 59%);
  background-repeat:no-repeat; background-position:22% 50%,22% 50%; background-size:150% 210%,150% 210%;
}
.news h2{color:#fff; position:relative; z-index:2; font-size:clamp(23px,2.8vw,31px)}
.news p{color:rgba(255,255,255,.88); font-size:12.5px; margin-top:10px; position:relative; z-index:2}
.nform{position:relative; z-index:2; display:flex; align-items:center; gap:6px; max-width:330px; margin:22px auto 0;
  background:rgba(255,255,255,.14); border:1.4px solid rgba(255,255,255,.55); border-radius:999px; padding:5px 5px 5px 18px}
.nform input{flex:1; min-width:0; min-height:38px; border:0; background:none; color:#fff; font-size:12.5px}
.nform input::placeholder{color:rgba(255,255,255,.8)}
.nform input:focus{outline:none}
.nform button{width:36px; height:36px; border-radius:50%; background:#fff; color:var(--o); display:grid; place-items:center; flex:none; transition:transform .3s var(--ease)}
.nform button svg{width:15px; height:15px}
.nform button:hover{transform:scale(1.08)}
.nnote{position:relative; z-index:2; margin-top:12px; font-size:11px; color:rgba(255,255,255,.9); min-height:16px}

/* ===========================================================================
   footer
   =========================================================================== */
.foot{background:var(--navy); color:#fff; padding-top:clamp(108px,11vw,140px)}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr; gap:clamp(20px,3vw,40px); padding-bottom:clamp(34px,4vw,52px)}
@media (max-width:1000px){ .fgrid{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:620px){ .fgrid{grid-template-columns:1fr 1fr} }
@media (max-width:420px){ .fgrid{grid-template-columns:1fr} }
.fbrand .brand b{color:#fff}
.fbrand .brand .mk{color:var(--o)}
.fbrand p{font-size:12px; line-height:1.8; color:#8DA0B2; margin-top:16px; max-width:30ch}
.fbrand .fl{font:700 12.5px/1 var(--sans); color:#fff; margin-top:26px; display:block}
.socials{display:flex; gap:9px; margin-top:14px}
.socials a{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; color:#C6D3DF; transition:all .22s}
.socials a svg{width:15px; height:15px}
.socials a:hover{background:var(--o); border-color:var(--o); color:#fff}
.fcol h5{margin:0 0 18px; font:700 14px/1 var(--disp); letter-spacing:-.02em; color:#fff}
.fcol ul{margin:0; padding:0; list-style:none; display:grid; gap:11px}
.fcol a{font-size:12px; color:#8DA0B2; transition:color .2s}
.fcol a:hover{color:var(--o)}
.fcol .ln{display:flex; gap:9px; align-items:flex-start; font-size:12px; color:#8DA0B2; line-height:1.7}
.fcol .ln svg{width:13px; height:13px; flex:none; margin-top:4px; color:var(--o)}
.fbar{border-top:1px solid rgba(255,255,255,.1); padding-block:20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:11.5px; color:#8DA0B2}
.fbar i{font-style:normal; color:var(--o); font-weight:700}
.fbar nav{display:flex; gap:clamp(14px,2vw,28px); flex-wrap:wrap}

.totop{position:fixed; right:18px; bottom:18px; z-index:80; width:34px; height:34px; border-radius:6px;
  background:var(--o); color:#fff; display:grid; place-items:center; box-shadow:0 12px 24px -12px rgba(255,76,22,.9);
  opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s, transform .3s var(--ease)}
.totop svg{width:15px; height:15px}
.totop.on{opacity:1; pointer-events:auto; transform:none}

/* ===========================================================================
   F14, the 44 pixel rule

   The brief does not say "44 pixels where it is convenient". On a phone every one of these is
   something a thumb has to hit, and a 34 pixel scroll to top button or a 38 pixel carousel
   arrow fails that on the smallest screens the document names.
   =========================================================================== */
@media (max-width:900px){
  .areabar .chg{min-height:44px; padding:12px 16px}
  .arrows button{width:44px; height:44px}
  .nform{padding:4px 4px 4px 16px}
  .nform input{min-height:44px}
  .nform button{width:44px; height:44px}
  .totop{width:44px; height:44px; right:14px; bottom:14px}
  .scn .run{min-height:44px; display:inline-flex; align-items:center; padding:0 18px}
  .tab{min-height:44px; padding:0 18px; display:inline-flex; align-items:center}
  .searchbar .btn{min-height:46px}
  .sseg select{min-height:44px}
  .ex .more{min-height:44px; align-items:center}
  .menu a{padding-block:12px}
}

/* ===========================================================================
   motion base
   =========================================================================== */
.word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.word > span{display:inline-block; will-change:transform,opacity,filter}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}