/* Concept: "Every address begins as a point." Sand particles rise into homes; the XIS dot guides.
   Night-to-dawn palette, centred compositions, one orange accent: the dot itself. */
:root {
  --night: #0B0F1A;
  --night-2: #121828;
  --ivory: #F3EDE3;
  --sand: #D9C3A0;
  --mist: #8E95A8;
  --orange: #F65800;
  --line: rgba(243, 237, 227, .12);
  --ink: #161B26;          /* text on the dawn band */
  --dawn: #EFE7DA;         /* the one light band */
  --f-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1080px;
  color-scheme: dark;
}
.h2, .ch .cht, .area .nm, .steps h3, .voices blockquote p, summary, .marq span { font-variation-settings: 'opsz' 60, 'wdth' 87; font-stretch: 87%; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--night); }
body { margin: 0; background: var(--night); color: var(--ivory); font: 400 15.5px/1.75 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
:focus-visible { outline: 1.5px solid var(--orange); outline-offset: 4px; }
::selection { background: var(--orange); color: #fff; }

.band { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.sec { padding-block: clamp(72px, 9vw, 128px); }
/* rhythm: where two sections share a background, the second starts closer */
#questions { padding-top: clamp(24px, 3vw, 48px); }
.close { padding-top: clamp(56px, 6vw, 88px); }
.voices { padding-block: clamp(64px, 7.5vw, 104px); }
.devs + .analysis { padding-top: clamp(72px, 8vw, 112px); }
.label { font: 500 11.5px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mist); }
.label.slogan { font-size: 14.4px; letter-spacing: .2em; white-space: nowrap; }
@media (max-width: 380px) { .label.slogan { letter-spacing: .12em; } }
.label .d { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 10px; vertical-align: 1px; }
.h2 { font: 350 clamp(28px, 3.4vw, 44px)/1.12 var(--f-display); letter-spacing: -.015em; }
.h2 em { font-style: normal; color: var(--sand); }
.lede { font-size: clamp(15px, 1.3vw, 17px); color: #C9CCD6; max-width: 54ch; margin-inline: auto; }
.center { text-align: center; }
.stack { display: grid; gap: 18px; justify-items: center; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 999px; font: 500 13px var(--f-body); letter-spacing: .06em; text-decoration: none; cursor: pointer; border: 0; transition: transform .4s var(--ease), background .3s, color .3s, box-shadow .3s; }
.btn.solid { background: var(--ivory); color: var(--night); }
.btn.solid:hover { background: #fff; transform: translateY(-2px); }
.btn.ghost { color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(243,237,227,.35); background: transparent; }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ivory); }
.btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }

/* Header */
header.top { position: fixed; z-index: 50; left: 0; right: 0; top: 0; padding-top: calc(env(safe-area-inset-top, 0px) + 18px); pointer-events: none; }
header.top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; max-width: 1240px; }
header.top a, header.top nav, header.top button, header.top .langmenu { pointer-events: auto; }
.logo img { height: 40px; width: auto; }
header nav { display: flex; gap: clamp(22px, 2.6vw, 38px); }
header .cta, .langbtn { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1260px) { header nav { gap: 20px; } }   /* six header items fit from 1,101 px */
header nav a { position: relative; text-decoration: none; font-size: 13px; letter-spacing: .04em; color: rgba(243,237,227,.72); padding: 6px 0; transition: color .3s; }
header nav a::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--orange); opacity: 0; transform: translateY(3px); transition: opacity .3s, transform .3s var(--ease); }
header nav a:hover::after, header nav a:focus-visible::after { opacity: 1; transform: none; }
header nav a:hover { color: var(--ivory); }
header .cta { justify-self: end; padding: 10px 18px; }
header.top.solid { background: linear-gradient(to bottom, rgba(11,15,26,.92), rgba(11,15,26,.75)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-bottom: 14px; transition: background .4s; }
@media (max-width: 860px) { header nav { display: none; } header.top .wrap { grid-template-columns: 1fr auto; } }
header .cta .short { display: none; }
@media (max-width: 420px) { header .cta span.long { display: none; } header .cta .short { display: inline; } .logo img { height: 34px; } }

/* Hero */
#hero { position: relative; height: 470vh; }
#stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(ellipse at 50% 70%, #2A1F26, var(--night) 70%); }
#sand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s ease; }
html.webgl-ready #sand { opacity: 1; }
.no-gl-dot { position: absolute; left: 50%; top: 38%; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 60px 20px rgba(246,88,0,.35); transform: translate(-50%, -50%); }
html.webgl-ready .no-gl-dot { display: none; }
.veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11,15,26,.85) 0%, rgba(11,15,26,.35) 30%, rgba(11,15,26,0) 55%), linear-gradient(to bottom, rgba(11,15,26,.55), rgba(11,15,26,0) 18%); }
.chapters { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(84px, 13vh, 130px)); z-index: 3; display: grid; justify-items: center; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.chbox { position: relative; width: min(720px, 100%); height: 210px; }
.ch { position: absolute; inset: auto 0 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; text-align: center; opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); pointer-events: none; }
.ch.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.ch .cht { font: 350 clamp(30px, 4.2vw, 54px)/1.06 var(--f-display); letter-spacing: -.02em; }
.ch .cht em { font-style: normal; color: var(--sand); }
.ch p { color: #C9CCD6; max-width: 46ch; font-size: clamp(14.5px, 1.2vw, 16px); }
.ch .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.ch .count { font: 500 11.5px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.ch .count b { color: var(--orange); font-weight: 500; }
.meter { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 30px); display: flex; align-items: center; gap: 16px; font: 500 11px var(--f-mono); letter-spacing: .2em; color: var(--mist); }
.meter .track { width: 160px; height: 1px; background: rgba(243,237,227,.18); position: relative; }
.meter .track i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); transform: translateX(-50%); }
@media (max-width: 600px) { .chbox { height: 250px; } .meter .track { width: 110px; } }

/* Areas */
.areas .list { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.area { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; }
.area > * { min-width: 0; }
.area .ix { font: 500 11px var(--f-mono); letter-spacing: .2em; color: var(--mist); }
.area .nm { font: 400 clamp(24px, 3vw, 38px)/1.1 var(--f-display); text-align: center; transition: color .4s, letter-spacing .6s var(--ease); }
.area .tags { justify-self: end; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tag { font: 500 10.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(217,195,160,.4); color: var(--sand); white-space: nowrap; }
.tag.o { border-color: rgba(246,88,0,.6); color: #FF9A62; }
.area::before { content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); transform: translateX(-50%) scale(0); transition: transform .5s var(--ease); }
.area:hover .nm { color: #fff; letter-spacing: .02em; }
.area:hover::before { transform: translateX(-50%) scale(1); }
.areas .foot { margin-top: 26px; font-size: 13.5px; color: var(--mist); text-align: center; }
@media (max-width: 700px) { .area { grid-template-columns: 1fr; justify-items: center; gap: 8px; } .area .ix { display: none; } .area .tags { justify-self: center; justify-content: center; } }

/* Zone finder */
.areas .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(30px, 4vw, 44px); }
.chip { font: 500 13px var(--f-body); color: #C9CCD6; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: all .25s; }
.chip:hover { border-color: rgba(243,237,227,.4); color: var(--ivory); }
.chipsep { width: 1px; height: 22px; align-self: center; background: var(--line); margin: 0 6px; }
.chip[aria-pressed="true"] { background: var(--ivory); color: var(--night); border-color: var(--ivory); }
.zcount { text-align: center; margin-top: 16px; font: 500 11px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.areas .list { margin-top: 22px; }
.area .ix { font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.area, .zall li { transition: opacity .4s var(--ease); }
.area.off, .zall li.off { opacity: .16; }
.more { margin-top: 30px; }
.zall { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.zg { min-width: 0; display: grid; align-content: start; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.zs { font-size: 13px; color: var(--mist); margin-bottom: 8px; }
.zall ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zall li { display: grid; gap: 1px; }
.zn { font: 400 20px/1.25 var(--f-display); font-variation-settings: 'opsz' 60, 'wdth' 87; }
.zn small { font: 400 12px var(--f-body); color: var(--mist); }
.zt { font-size: 12.5px; color: #A9AEBC; }
.zall li.on .zn { color: var(--sand); }
.zk { justify-self: start; margin: 3px 0 1px; font: 500 9.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.zk.o { color: #FF9A62; }
@media (max-width: 900px) { .zall { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .zall { grid-template-columns: 1fr; } }

/* Dawn band: the method */
.dawn { background: var(--dawn); color: var(--ink); }
.dawn .label { color: #64626A; }
.dawn .h2 em { color: #A0784A; }
.dawn .lede { color: #4A4E5A; }
.method { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.method .rail { position: absolute; left: 12.5%; right: 12.5%; top: 6px; height: 1px; background: rgba(22,27,38,.15); }
.method .rail b { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--ink); }
.method .rail i { position: absolute; z-index: 3; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px rgba(246,88,0,.7); transform: translateX(-50%); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.steps li { text-align: center; display: grid; gap: 10px; justify-items: center; align-content: start; padding-top: 34px; position: relative; min-width: 0; }
.steps li::before { content: ""; position: absolute; top: 3px; left: 50%; margin-left: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--dawn); box-shadow: inset 0 0 0 1px rgba(22,27,38,.4); }
.steps .n { font: 500 11px var(--f-mono); letter-spacing: .2em; color: #6F6457; }
.steps h3 { font: 450 21px/1.2 var(--f-display); }
.steps p { font-size: 14px; color: #4A4E5A; max-width: 24ch; }
.after { margin-top: 56px; display: flex; gap: 12px 28px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: #4A4E5A; }
.after span::before { content: "—"; margin-right: 10px; color: #A0784A; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } .steps li:last-child { grid-column: 1 / -1; } .method .rail { display: none; } }
/* tablet (761–960px): five steps do not fit one row ("Recommendation" ran off the screen at 768px), so use the mobile two-column layout */
@media (min-width: 761px) and (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } .steps li:last-child { grid-column: 1 / -1; } .method .rail { display: none; } }
/* larger hit areas for small text links (24 px minimum), no visual change */
.chlink, .skip, .tlink, .grate a { padding-block: 6px; margin-block: -6px; }

/* Voices */
.voices .q { position: relative; height: 230px; margin-top: 40px; }
.voices blockquote { position: absolute; inset: 0; margin: 0; display: grid; align-content: center; justify-items: center; gap: 22px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.voices blockquote.on { opacity: 1; transform: none; }
.voices blockquote p { font: 300 clamp(21px, 2.4vw, 30px)/1.4 var(--f-display); max-width: 32ch; }
.voices cite { font: 500 11.5px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--sand); font-style: normal; }
.qdots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.qdots button { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.qdots button::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(243,237,227,.25); transition: background .3s, transform .3s; }
.qdots button[aria-current="true"]::after { background: var(--orange); transform: scale(1.3); box-shadow: 0 0 10px var(--orange); }
@media (max-width: 600px) { .voices .q { height: 330px; } }
.voices .q { height: 284px; }
.grate { text-align: center; margin-top: 14px; font: 500 11.5px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.grate a { color: var(--mist); text-decoration: none; transition: color .3s; }
.grate a:hover { color: var(--ivory); }
.grate .stars { color: var(--orange); letter-spacing: .1em; margin-right: 8px; }

/* Owners */
.owners { background: var(--night-2); }
.ogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: center; }
.ogrid > * { min-width: 0; }
.ogrid .intro { text-align: center; display: grid; gap: 18px; justify-items: center; }
.ogrid ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; justify-items: start; text-align: left; font-size: 14.5px; color: #C9CCD6; }
.ogrid li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); margin-right: 12px; vertical-align: 2px; }
form.of { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.02); }
.seg { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); color: #C9CCD6; cursor: pointer; transition: all .25s; }
.seg input:checked + span { background: var(--ivory); color: var(--night); border-color: var(--ivory); }
.seg input:focus-visible + span { outline: 1.5px solid var(--orange); outline-offset: 2px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld.full { grid-column: 1 / -1; }
.fld label { font: 500 10.5px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.fld input, .fld select { width: 100%; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(243,237,227,.22); color: var(--ivory); font: 400 15px var(--f-body); padding: 8px 2px; border-radius: 0; }
.fld select option { color: #111; }
.fld input:focus, .fld select:focus { outline: none; border-bottom-color: var(--orange); }
.consent { grid-column: 1 / -1; display: flex; gap: 10px; font-size: 12.5px; color: var(--mist); align-items: flex-start; }
.consent input { accent-color: var(--orange); margin-top: 4px; }
.fmsg { grid-column: 1 / -1; font-size: 13px; }
.fmsg.err { color: #FF9A62; }
.fok { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; font-size: 13.5px; color: var(--sand); }
form.of .submit { grid-column: 1 / -1; justify-self: center; margin-top: 6px; }
@media (max-width: 860px) { .ogrid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { form.of { grid-template-columns: 1fr; } }

/* Questions */
.faq { max-width: 760px; margin: clamp(36px, 5vw, 56px) auto 0; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
p.h2, .ch .cht { text-wrap: balance; margin: 0; }
summary h3 { font: inherit; font-variation-settings: inherit; margin: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
summary { list-style: none; cursor: pointer; padding: 20px 4px; display: flex; justify-content: space-between; align-items: center; gap: 18px; font: 400 clamp(17px, 1.6vw, 20px)/1.35 var(--f-display); }
summary::-webkit-details-marker { display: none; }
summary i { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(243,237,227,.5); transition: background .3s, box-shadow .3s; }
details[open] summary i { background: var(--orange); box-shadow: 0 0 12px var(--orange); }
details p { padding: 0 4px 22px; color: #C9CCD6; font-size: 14.5px; max-width: 62ch; }

/* Questions: pinned intro + tabbed answers */
.qgrid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 40px 80px; align-items: start; }
.qside { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 110px); display: grid; gap: 18px; }
.qlede { color: #C9CCD6; max-width: 34ch; }
.qcta { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; justify-items: start; }
.qcta p { font-size: 14px; color: var(--mist); }
.ftabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ftab { font: 500 13px var(--f-body); color: #C9CCD6; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; cursor: pointer; transition: all .25s; }
.ftab:hover { color: var(--ivory); border-color: rgba(243,237,227,.4); }
.ftab[aria-selected="true"] { background: var(--ivory); color: var(--night); border-color: var(--ivory); }
.fpanel { border-top: 1px solid var(--line); margin-top: 14px; }
.fpanel details p a.jump { display: inline-block; margin-top: 8px; color: var(--sand); text-underline-offset: 3px; }
.fpanel details p a.jump::after { content: " →"; }
@media (max-width: 900px) { .qgrid { grid-template-columns: 1fr; row-gap: 18px; } .qside { display: contents; } .qside > * { text-align: center; justify-self: center; } .qcta { order: 3; margin-top: 10px; } .qmain { order: 2; margin-top: 14px; } .qside { position: static; text-align: center; justify-items: center; } .qlede { margin-inline: auto; } .qcta { justify-items: center; } .ftabs { justify-content: center; } }

/* Header right: language, phone, advisor */
.hright { justify-self: end; display: flex; align-items: center; gap: 0; }
.lang { padding-right: 18px; margin-right: 18px; border-right: 1px solid rgba(243,237,227,.16); }
header .hright .cta { justify-self: auto; }
.lang { position: relative; }
.langbtn { background: transparent; border: 0; color: rgba(243,237,227,.55); font: 500 11px var(--f-mono); letter-spacing: .16em; cursor: pointer; padding: 6px 2px; }
.langbtn::after { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-left: 8px; vertical-align: 3px; }
.langbtn:hover, .langbtn[aria-expanded="true"] { color: var(--ivory); }
.langmenu { position: absolute; right: 10px; top: calc(100% + 10px); list-style: none; margin: 0; padding: 8px; min-width: 150px; background: rgba(17,22,40,.96); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; gap: 2px; z-index: 60; }
.langmenu[hidden] { display: none; }
.langmenu a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: #C9CCD6; font-size: 14px; }
.langmenu a:hover, .langmenu a[aria-current="true"] { background: rgba(243,237,227,.06); color: var(--ivory); }

@media (max-width: 420px) { .lang { padding-right: 12px; margin-right: 12px; } }
/* Hero search */
.hsearch { display: flex; align-items: center; width: min(460px, 100%); margin-top: 8px; padding: 5px 5px 5px 16px; border: 1px solid rgba(243,237,227,.28); border-radius: 999px; background: rgba(11,15,26,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .3s; }
.hsearch:focus-within { border-color: var(--orange); }
.hsearch select { width: auto; field-sizing: content; appearance: none; -webkit-appearance: none; padding-right: 14px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23D9C3A0'/%3E%3C/svg%3E") no-repeat right 2px center; border: 0; color: var(--sand); font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 8px 6px 8px 0; cursor: pointer; }
.hsearch select option { color: #111; text-transform: none; }
.hsearch input { flex: 1; min-width: 0; background: transparent; border: 0; border-left: 1px solid rgba(243,237,227,.18); color: var(--ivory); font: 400 14.5px var(--f-body); padding: 8px 12px; }
.hsearch input::placeholder { color: #8E95A8; }
.hsearch input:focus, .hsearch select:focus { outline: none; }
.hsearch button { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ivory); color: var(--night); font-size: 16px; cursor: pointer; transition: transform .35s var(--ease), background .3s; }
.hsearch button:hover { background: #fff; transform: translateX(2px); }
.chlink, .tlink { font: 500 12px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); text-decoration: none; transition: color .3s; }
.chlink { margin-top: 4px; }
.chlink:hover, .tlink:hover { color: #fff; }
/* About + insights */
.aboutx { padding-bottom: clamp(40px, 5vw, 64px); }
.aboutx .tlink { margin-top: 6px; }
.ihead { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.ihead > div { display: grid; gap: 14px; }
.ihead .ilinks { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.insights .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.insights .post { display: grid; gap: 12px; align-content: start; padding: 26px 24px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; transition: border-color .35s, transform .5s var(--ease); min-width: 0; }
.insights .post:hover { border-color: rgba(246,88,0,.55); transform: translateY(-3px); }
.insights .post .ptag { font: 500 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.insights .post h3 { margin: 0; font: 400 21px/1.25 var(--f-display); font-variation-settings: 'opsz' 60, 'wdth' 87; color: var(--ivory); }
.insights .post p { margin: 0; font-size: 14px; color: #A9AEBC; }
@media (max-width: 860px) { .insights .posts { grid-template-columns: 1fr; } }
.consent a { color: var(--sand); }

/* Mobile menu */
.menubtn { display: none; width: 40px; height: 40px; border: 1px solid rgba(243,237,227,.22); border-radius: 50%; background: transparent; cursor: pointer; margin-left: 10px; position: relative; }
.menubtn i { position: absolute; left: 12px; right: 12px; height: 1px; background: var(--ivory); transition: transform .35s var(--ease), top .35s var(--ease); }
.menubtn i:first-child { top: 16px; } .menubtn i:last-child { top: 22px; }
.menubtn[aria-expanded="true"] i:first-child { top: 19px; transform: rotate(45deg); } .menubtn[aria-expanded="true"] i:last-child { top: 19px; transform: rotate(-45deg); }
.mmenu { position: fixed; inset: 0; z-index: 45; background: rgba(11,15,26,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; align-content: center; justify-items: center; gap: 36px; padding: 96px 24px 40px; }
.mmenu[hidden] { display: none; }
.mmenu nav { display: grid; gap: 18px; text-align: center; }
.mmenu nav a { font: 350 26px/1.15 var(--f-display); font-variation-settings: 'opsz' 60, 'wdth' 87; color: var(--ivory); text-decoration: none; }
.mmenu nav a:first-child { color: var(--sand); }
.mfoot { display: grid; gap: 14px; justify-items: center; }
.mtel { font: 500 13px var(--f-mono); letter-spacing: .08em; color: var(--mist); text-decoration: none; }
@media (max-width: 860px) { .menubtn { display: inline-block; } }
.meter .skip { white-space: nowrap; margin-left: 8px; padding-left: 16px; border-left: 1px solid rgba(243,237,227,.18); color: var(--mist); text-decoration: none; letter-spacing: .16em; text-transform: uppercase; transition: color .3s; }
.meter .skip:hover { color: var(--ivory); }
/* Proof: analysis in action */
.proof .pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(36px, 5vw, 56px); max-width: 980px; margin-inline: auto; }
.pcard { border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 22px; align-content: start; background: rgba(255,255,255,.02); min-width: 0; }
.pcard header { display: grid; gap: 6px; }
.pcard .pk { font: 500 11px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--orange); }
.pcard h3 { margin: 0; font: 350 26px/1.15 var(--f-display); font-variation-settings: 'opsz' 60, 'wdth' 87; color: var(--ivory); }
.pcard .pl { font: 500 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.pcard dl { margin: 0; display: grid; }
.pcard dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.pcard dt { font-size: 13.5px; color: #A9AEBC; }
.pcard dd { margin: 0; text-align: right; font: 400 19px var(--f-display); font-variation-settings: 'opsz' 60, 'wdth' 87; color: var(--ivory); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard dd small { display: block; font: 400 11.5px var(--f-body); color: var(--mist); white-space: normal; }
.pcard .key dt { color: var(--sand); }
.pcard .key dd { font-size: 26px; color: var(--sand); }
.pcard .verdict { margin: 0; font-size: 14px; color: #C9CCD6; padding-top: 18px; border-top: 1px solid var(--line); }
.pcard .verdict b { display: block; font: 500 10.5px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.pbench { text-align: center; margin: 28px auto 26px; font-size: 14.5px; color: #C9CCD6; }
.pbench .d { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 10px; vertical-align: 2px; }
.pnote { max-width: 760px; margin: 30px auto 0; text-align: center; font-size: 12px; line-height: 1.65; color: var(--mist); }
@media (max-width: 760px) { .proof .pgrid { grid-template-columns: 1fr; } }
/* Analysis request */
.analysis { background: var(--night-2); }
.fld .opt { text-transform: none; letter-spacing: 0; color: #8E95A8; font: 400 11px var(--f-body); }
.ftrust { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font: 500 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
/* About facts */
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 0; margin: 10px 0 4px; }
.facts div { display: grid; gap: 4px; padding: 0 clamp(16px, 2.6vw, 34px); text-align: center; }
.facts div + div { border-left: 1px solid var(--line); }
.facts dt { font: 500 10.5px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.facts dd { margin: 0; font-size: 15px; color: var(--ivory); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 0; } .facts div + div { border-left: 0; } .facts div:nth-child(even) { border-left: 1px solid var(--line); } }

/* Method: the Data step carries the XIS edge */
.steps li.core { isolation: isolate; padding-inline: 12px; }
.steps li.core::after { content: ""; position: absolute; z-index: -1; top: 24px; bottom: -18px; left: -6px; right: -6px; border-radius: 16px; background: #FBF7F0; box-shadow: 0 0 0 1px rgba(246,88,0,.28), 0 18px 40px rgba(160,120,74,.14); }
.steps li.core::before { top: 0; margin-left: -6.5px; width: 13px; height: 13px; background: var(--orange); box-shadow: 0 0 0 4px rgba(246,88,0,.16), 0 0 14px rgba(246,88,0,.5); }
.steps li.core .n { color: var(--orange); }
.steps .edge { font: 500 10px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin-top: -4px; }
.steps li.core h3 { font-size: 24px; }
.steps li.core p { color: #2E323C; }
/* Methodology disclosure */
.pmeth { max-width: 760px; margin: 14px auto 0; text-align: center; font-size: 12.5px; color: var(--mist); }
.pmeth summary { display: inline-block; cursor: pointer; list-style: none; font: 500 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); padding: 6px 2px; }
.pmeth summary::-webkit-details-marker { display: none; }
.pmeth summary::after { content: " +"; }
.pmeth[open] summary::after { content: " −"; }
.pmeth ul { list-style: none; margin: 14px 0 0; padding: 18px 22px; display: grid; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 14px; line-height: 1.65; }
.pmeth b { color: #C9CCD6; font-weight: 500; }

/* Projects dropdown */
.ndrop { position: relative; }
.ndbtn { background: transparent; border: 0; padding: 6px 0; cursor: pointer; font: 400 13px var(--f-body); letter-spacing: .04em; color: rgba(243,237,227,.72); transition: color .3s; display: inline-flex; align-items: center; gap: 8px; }
.ndbtn { line-height: inherit; } /* ndbtn line-height: same text line as the header links */
.ndbtn::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.ndbtn:hover, .ndbtn[aria-expanded="true"] { color: var(--ivory); }
.ndbtn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.ndmenu { position: absolute; left: -28px; top: calc(100% + 18px); display: grid; gap: 4px; padding: 18px 28px 20px; min-width: 330px; background: linear-gradient(to bottom, rgba(11,15,26,.94), rgba(11,15,26,.88)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(243,237,227,.10); border-radius: 0 0 14px 14px; z-index: 60; opacity: 1; transition: opacity .3s; }
.ndmenu[hidden] { display: none; }
header .ndmenu a { position: relative; display: grid; gap: 3px; padding: 10px 0 10px 16px; text-decoration: none; }
header .ndmenu a::after { left: 0; top: 18px; bottom: auto; margin: 0; }
header .ndmenu a:hover::after, header .ndmenu a:focus-visible::after { transform: none; }
header .ndmenu b { font: 400 13.5px var(--f-body); letter-spacing: .04em; color: rgba(243,237,227,.78); transition: color .3s; white-space: nowrap; }
header .ndmenu small { font-size: 12px; color: var(--mist); letter-spacing: .01em; white-space: nowrap; }
header .ndmenu a:hover b { color: var(--ivory); }

/* Developers */
.devs { padding-block: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marq { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); margin-top: 22px; }
.marq .row { display: flex; align-items: center; gap: 64px; padding-block: 8px; width: max-content; animation: marq 46s linear infinite; }
.marq span { font: 400 20px var(--f-display); letter-spacing: .16em; color: #B9BDC8; white-space: nowrap; }
.marq span.sep { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex: none; }
.marq .dl { width: auto; max-width: none; flex: none; opacity: .78; transition: opacity .3s; }
.marq .dl:hover { opacity: 1; }
@keyframes marq { to { transform: translateX(-50%); } }

/* Close */
.close { position: relative; overflow: hidden; }
.bigdot { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); margin: 0 auto 36px; box-shadow: 0 0 40px rgba(246,88,0,.6); }
.bigdot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(246,88,0,.7); animation: pulse 2.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
.close .h2 { font-size: clamp(32px, 4.4vw, 58px); }
.contact { margin-top: 40px; display: flex; gap: 14px 48px; flex-wrap: wrap; justify-content: center; }
.contact div { display: grid; gap: 2px; text-align: center; }
.contact small { font: 500 10.5px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.contact b { font-weight: 400; font-size: 16px; user-select: all; font-variant-numeric: tabular-nums; }
footer.foot { padding-block: clamp(64px, 8vw, 96px) calc(env(safe-area-inset-bottom, 0px) + 28px); border-top: 1px solid var(--line); color: var(--mist); font-size: 14px; }
.fgrid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr 1.35fr; gap: 40px 36px; align-items: start; }
.fgrid .fh { margin: 0; line-height: 16px; color: var(--mist); }
.fgrid > * { min-width: 0; }
.flogo { display: block; height: 44px; width: auto; margin-top: -14px; }
.ftag { margin-top: 14px; color: #C9CCD6; }
.fcontact { margin: 26px 0 0; display: grid; gap: 14px; }
.fcontact a { color: inherit; text-decoration: none; transition: color .3s; }
.fcontact a:hover { color: var(--sand); }
.fcontact a:hover { color: var(--sand); }
.fcontact div { display: grid; gap: 1px; }
.fcontact dt { font: 500 10.5px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.fcontact dd { margin: 0; color: var(--ivory); user-select: all; font-variant-numeric: tabular-nums; }
.fsoc { display: flex; gap: 8px; margin-top: 22px; }
.fsoc a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: #C9CCD6; transition: border-color .3s, color .3s; }
.fsoc svg { width: 16px; height: 16px; }
.fsoc a:hover { border-color: var(--orange); color: var(--ivory); }
.fcol ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.fcol a { position: relative; text-decoration: none; color: #AEB3C0; transition: color .3s, padding .4s var(--ease); }
.fcol a::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--orange); opacity: 0; transform: scale(.4); transition: all .35s var(--ease); }
.fcol a:hover { color: var(--ivory); }
.fcol a:hover::before { opacity: 1; transform: none; }
.fzone { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.fzone a { color: var(--sand); }
.fzone a::before { display: none; }
.fzone .d, .ftop .d { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); margin-right: 9px; vertical-align: 1px; }
.fnews p { margin-top: 18px; color: #C9CCD6; }
.fnews p.fh { margin-top: 0; }
.fzone a { white-space: nowrap; }
.nf { margin-top: 18px; display: flex; align-items: center; border-bottom: 1px solid rgba(243,237,227,.25); transition: border-color .3s; }
.nf:focus-within { border-bottom-color: var(--orange); }
.nf input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ivory); font: 400 15px var(--f-body); padding: 10px 2px; }
.nf input:focus { outline: none; }
.nf button { background: transparent; border: 0; color: var(--ivory); font-size: 18px; cursor: pointer; padding: 6px 4px 6px 12px; transition: transform .35s var(--ease), color .3s; }
.nf button:hover { color: var(--orange); transform: translateX(3px); }
.nmsg { font-size: 13px; color: var(--sand); }
.nmsg a { color: var(--sand); }
.fbar { margin-top: clamp(48px, 6vw, 72px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: flex-start; font-size: 12.5px; }
.fcopy { display: grid; gap: 4px; }
.flegal { display: flex; gap: 22px; flex-wrap: wrap; }
.fright { margin-left: auto; display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; justify-content: flex-end; }
.fbar a { text-decoration: none; color: #AEB3C0; transition: color .3s; }
.fbar a:hover { color: var(--ivory); }
@media (max-width: 1080px) { .fgrid { grid-template-columns: 1fr 1fr 1fr; } .fbrand, .fnews { grid-column: 1 / -1; } .fnews { max-width: 460px; } }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr 1fr; text-align: left; } .fbar { flex-direction: column; align-items: flex-start; } .fright { margin-left: 0; width: 100%; justify-content: space-between; } }

.rv { transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.rv.pre { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  .rv, .ch, .voices blockquote { transition: none; }
  .rv.pre { opacity: 1; transform: none; }
  .marq .row, .bigdot::after { animation: none; }
  .marq .row { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 18px; }
}

/* Clickable entries in the full zones list: whole row is the link; subtle orange arrow on hover/focus */
.zall li { position: relative; }
.zn .zl { color: inherit; text-decoration: none; transition: color .3s; }
.zn .zl::before { content: ""; position: absolute; inset: 0; }
.zn .zl::after { content: "\2192"; display: inline-block; margin-left: 8px; color: var(--orange); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .25s var(--ease); }
.zall li:hover .zl, .zn .zl:focus-visible { color: #fff; }
.zall li:hover .zl::after, .zn .zl:focus-visible::after { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .zn .zl::after { transition: opacity .2s ease; transform: none; } }
.qdots button { flex: 0 0 auto; }
@media (max-width: 420px) { .qdots { gap: 2px; } .qdots button { width: 24px; height: 26px; } }   /* 12 review dots stay 24 px wide on small phones */
/* enquiry form (#af): four tabs, contact number with country code, preferred contact method, message */
form.of [hidden] { display: none !important; }
.seg.etabs span { white-space: nowrap; }
.seg.etabs input:checked + span { border-color: var(--orange); box-shadow: 0 0 14px rgba(246,88,0,.16); }
.fld textarea { width: 100%; min-width: 0; min-height: 76px; resize: vertical; background: transparent; border: 0; border-bottom: 1px solid rgba(243,237,227,.22); color: var(--ivory); font: 400 15px/1.5 var(--font-body); padding: 8px 2px; border-radius: 0; }
.fld textarea:focus { outline: none; border-bottom-color: var(--orange); }
.fld textarea::placeholder, .fld input::placeholder { color: #6E7487; }
.fld.bad input, .fld.bad select, .fld.bad textarea { border-bottom-color: var(--orange-soft); }
.iti { display: block; width: 100%; --iti-border-color: var(--line); --iti-country-selector-bg: var(--night-2); --iti-icon-color: var(--mist); --iti-hover-color: rgba(243,237,227,.07); --iti-spacer-horizontal: 8px; }
.iti--detached-country-selector { --iti-border-color: var(--line); --iti-country-selector-bg: var(--night-2); --iti-icon-color: var(--mist); --iti-hover-color: rgba(243,237,227,.07); }
.iti__selected-country { color: var(--ivory); }
.iti__selected-country-primary { padding-left: 2px; }
.iti__selected-dial-code { color: var(--text-2); font-variant-numeric: tabular-nums; }
.iti__selected-country:focus-visible { outline: 1.5px solid var(--orange); outline-offset: 2px; }
.iti__country-selector { color: var(--ivory); font: 400 14px var(--font-body); border-radius: 12px; overflow: hidden; }
.iti__country-list { scrollbar-color: rgba(243,237,227,.2) transparent; }
.iti__search-input { background: transparent; color: var(--ivory); font: 400 14px var(--font-body); }
.iti__search-input::placeholder { color: var(--mist); }
.iti__dial-code { color: var(--mist); }
.iti__country.iti__highlight { background-color: rgba(243,237,227,.07); }
.iti__country[aria-selected="true"] .iti__country-name { color: var(--ivory); }
@media (max-width: 480px) {
  .seg.etabs { display: grid; grid-template-columns: 1fr 1fr; }
  .seg.etabs span { display: block; text-align: center; }
}
.fld .iti__search-input { padding: 10px 34px; border-bottom: 1px solid var(--line); }
.iti li::before, .iti__country::before { content: none !important; display: none !important; }
.iti__country-list { justify-items: stretch; text-align: left; }
.iti--inline-country-selector .iti__country-container { position: static; padding: 0; }
.iti--inline-country-selector .iti__selected-country { position: absolute; left: 0; top: 0; bottom: 0; height: auto; }
.iti--inline-country-selector:not(.iti--detached-country-selector) .iti__country-selector { left: auto !important; right: 0 !important; width: max(100%, 300px) !important; max-width: calc(100vw - 32px); }
.iti__country { white-space: nowrap; min-width: 0; box-sizing: border-box; width: 100%; }
.iti__country-list { overflow-x: hidden; }
.iti__country-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Header: menu button below 1,101 px, so the five menu items, language and "Request an analysis" never wrap */
@media (max-width: 1100px) { header nav { display: none; } header.top .wrap { grid-template-columns: 1fr auto; } .menubtn { display: inline-block; } }
/* Footer: investment zones link wraps below 341 px, so the footer never overflows */
@media (max-width: 340px) { .fzone a { white-space: normal; } }


/* interactive states (approved 23 October 2026): transparent controls show the XIS orange outline on hover and focus */
.btn.ghost:hover, .btn.ghost:focus-visible { box-shadow: inset 0 0 0 1px var(--orange), 0 0 14px rgba(246,88,0,.16); }
.chip:not([aria-pressed="true"]):hover, .chip:focus-visible, .ftab:not([aria-selected="true"]):hover, .ftab:focus-visible,
.seg label:hover input:not(:checked) + span, .seg input:focus-visible + span { border-color: var(--orange); color: var(--ivory); }
.pill:hover, .pill:focus-within, .pxchip:hover, .pxchip:focus-visible, .ictry a:hover, .ictry a:focus-visible,
.lxpage a:not([aria-current]):hover, .lxpage a:focus-visible, .lxfeat a:hover { box-shadow: inset 0 0 0 1px var(--orange); color: var(--ivory); }
.hmk label:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1px var(--orange); color: var(--ivory); }
.nconsent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--mist); cursor: pointer; }
.nconsent input { margin-top: 2px; accent-color: var(--orange); flex: none; }
.nconsent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* International projects (approved 21 October 2026) */
.hmk { display: inline-flex; gap: 4px; margin-top: 10px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(243,237,227,.18); background: rgba(11,15,26,.45); }
.hmk label { position: relative; cursor: pointer; }
.hsearch input { border-left: 0; padding-left: 2px; }
.hmk input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hmk span { display: block; padding: 7px 16px; border-radius: 999px; font: 500 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); transition: background .3s, color .3s; }
.hmk input:checked + span { background: var(--ivory); color: var(--night); }
.hmk input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 2px; }
.hmk label:hover input:not(:checked) + span { color: var(--ivory); }
.intl { padding-top: clamp(24px, 3vw, 48px); }
.ictry { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(26px, 3vw, 36px); }
.ictry a { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: #C9CCD6; font-size: 13.5px; text-decoration: none; transition: box-shadow .3s, color .3s; }
.ictry a:hover, .ictry a:focus-visible { color: var(--ivory); box-shadow: inset 0 0 0 1px var(--sand); outline: none; }
.igrid { margin-top: clamp(28px, 3.4vw, 40px); display: grid; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); gap: clamp(20px, 2.4vw, 28px); }   /* three cards fit one row from 1024 px */
.icard { display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: var(--night-2); box-shadow: inset 0 0 0 1px rgba(243,237,227,.07); }
.ifr { position: relative; display: grid; place-content: center; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, rgba(243,237,227,.035) 0 1px, transparent 1px 13px), radial-gradient(120% 90% at 30% 10%, rgba(217,195,160,.09), rgba(217,195,160,0) 60%), linear-gradient(160deg, #161b26, #0e1220); }
.ifr span { font: 500 10px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(243,237,227,.14); }
.ibd { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; }
.imeta { font: 500 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.icard h3 { margin: 0; font: 350 23px/1.15 var(--f-display); letter-spacing: -.01em; color: var(--ivory); }
.ity { font-size: 14px; color: #A9AFBF; }
.ipr { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ivory); font-variant-numeric: tabular-nums; }
.ipr small { font: 500 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-right: 8px; }
.iacts { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.iacts .btn { padding: 11px 18px; font-size: 12.5px; }
.btn.bro { background: var(--orange); color: #fff; font-weight: 600; box-shadow: none; }
.btn.bro:hover { background: var(--orange); transform: translateY(-2px); }
.ihold { font: 500 10px/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.icard.idraft { box-shadow: inset 0 0 0 1px rgba(243,237,227,.07), 0 0 0 1px rgba(243,237,227,.18); opacity: .78; }
.icard.idraft .ifr { outline: 1px dashed rgba(243,237,227,.22); outline-offset: -10px; }
.iall { margin-top: clamp(24px, 3vw, 32px); text-align: center; }
.iall a { color: var(--sand); font-size: 14px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(217,195,160,.4); }

/* homepage refinements (23 October 2026) */
.clink { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--f-body); color: var(--sand); text-decoration: none; border-radius: 999px; padding: 8px 16px; box-shadow: inset 0 0 0 1px rgba(217,195,160,.4); transition: box-shadow .25s, color .25s; }
.clink:hover, .clink:focus-visible { color: var(--ivory); box-shadow: inset 0 0 0 1px var(--orange); outline: none; }
.meter .hpause { background: transparent; border: 0; border-left: 1px solid rgba(243,237,227,.18); font: inherit; letter-spacing: .16em; cursor: pointer; }
.meter .hpause:hover, .meter .hpause:focus-visible { color: var(--ivory); }
.still .marq .row, .still .bigdot::after { animation-play-state: paused; }
.marq:hover .row, .marq:focus-within .row { animation-play-state: paused; }
.qsrc { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mist); }
@media (max-width: 520px) { .meter > span[aria-hidden="true"], .meter .track { display: none; } .meter .skip:first-of-type { margin-left: 0; padding-left: 0; border-left: 0; } }