/* KONST Group website v2 · design system
   Brand: KONST Brand Identity Guidelines 2026.07 v1.0 (colour 75/20/5, TASA Orbiter + vivo Sans TC, solid icons, cutting-line device)
   Family look shared with Horizon AI (isometric diagrams, tinted wash heroes), accent = 曙光橙 */




:root{
  --orange:#FE5000; --orange-d:#DB480B; --peach:#FFAE62; --peach-l:#FFD6B0; --dusk:#963821; --sky:#00AED6;
  --tint:#FFF6EF; --tint-2:#FFEDE0;
  --paper:#FFFFFF; --warm:#F6F5F2; --warm-2:#EFEDE8; --line:#E6E3DD; --line-2:#D9D8D6;
  --ink:#141210; --body:#4A463F; --muted:#888B8D; --dark:#171412; --dark-2:#221E1B;
  --gutter:90px; --sec:120px; --max:1440px; --r:15px;
  --latin:"TASA Orbiter","Helvetica Neue",Arial,sans-serif;
  --cjk:"vivo Sans TC","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --font:"TASA Orbiter","vivo Sans TC","PingFang TC","Noto Sans TC",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:1101px){:root{--gutter:39px;--sec:96px}}
@media (max-width:759px){:root{--gutter:21px;--sec:72px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--body);font:400 15px/1.75 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:500;letter-spacing:0;text-wrap:balance;word-break:keep-all;line-break:strict}
p{margin:0;text-wrap:pretty;line-break:strict}
.nb{white-space:nowrap}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:9px;z-index:100;background:var(--ink);color:#fff;padding:9px 15px;border-radius:9px}
.skip:focus{left:12px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- type scale ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 12px/1.4 var(--font);letter-spacing:0;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--orange);flex:none}
.eyebrow.on-dark{color:rgba(255,255,255,.7)} .eyebrow.on-dark::before{background:var(--peach)}
.h1{font-size:clamp(39px,4.6vw,63px);line-height:1.18}
.h2{font-size:clamp(27px,3vw,42px);line-height:1.28}
.h3{font-size:clamp(18px,1.5vw,21px);line-height:1.45}
.lead{font-size:clamp(15px,1.2vw,18px);line-height:1.8;color:var(--body);max-width:36em}
.small{font-size:15px;line-height:1.7}
.fine{font-size:12px;line-height:1.7;color:var(--muted)}
.num{font-family:var(--latin);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 24px;border-radius:999px;font:500 15px/1 var(--font);border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-d)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--orange);color:var(--orange)}
.btn-glass{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(15px) saturate(1.3)}
.btn-glass:hover{background:rgba(255,255,255,.3)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{color:var(--orange)}
.btn-sm{height:39px;padding:0 18px;font-size:15px}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .2s}
.link:hover{color:var(--orange)}
.link svg{width:15px;height:15px}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header: v1 (8765) copy lives in v1-header.css ---------- */

/* ---------- breadcrumb ---------- */
.crumb{display:flex;flex-wrap:wrap;gap:9px;font-size:12px;color:var(--muted);margin-bottom:27px}
.crumb a:hover{color:var(--orange)}
.crumb span[aria-hidden]{opacity:.5}

/* ---------- heroes ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(118deg,#FFE3CB 0%,#FFF1E6 30%,#FFFFFF 62%)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:57px;align-items:center;padding-block:87px 96px;position:relative;z-index:1}
.hero-grid .copy{display:grid;gap:27px;align-content:center}
.hero-grid .ill{position:relative}
.hero-grid .ill svg{width:100%;height:auto}
.hero .proof{display:flex;flex-wrap:wrap;gap:9px 27px;margin-top:9px;font-size:15px;color:var(--body)}
.hero .proof b{font:500 21px/1 var(--latin);color:var(--ink);margin-right:6px}
.hero-lines{position:absolute;right:-60px;top:-39px;width:519px;opacity:.08;pointer-events:none;z-index:0}
@media (max-width:981px){.hero-grid{grid-template-columns:1fr;padding-block:57px 63px;gap:33px}}

.hero-page{padding-block:72px 63px;background:linear-gradient(118deg,#FFEBDB 0%,#FFF7F1 34%,#FFFFFF 64%);border-bottom:1px solid var(--line)}
.hero-page .row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:57px;align-items:end}
.hero-page .row>div{display:grid;gap:21px}
@media (max-width:981px){.hero-page .row{grid-template-columns:1fr;gap:24px}}

.hero-photo{position:relative;min-height:min(78vh,759px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--dark)}
.hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,20,18,.15) 0%,rgba(23,20,18,.1) 40%,rgba(80,30,12,.78) 100%),linear-gradient(90deg,rgba(150,56,33,.35),transparent 60%);z-index:1}
.hero-photo .wrap{position:relative;z-index:2;padding-block:120px 72px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.hero-photo h1,.hero-photo h2{color:#fff}
.hero-photo .lead{color:rgba(255,255,255,.86)}
.hero-photo .cap{position:absolute;right:var(--gutter);top:99px;z-index:2;font-size:12px;color:rgba(255,255,255,.7)}
@media (max-width:981px){.hero-photo .wrap{grid-template-columns:1fr}}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec)}
.sec.tint{background:var(--tint)}
.sec.warm{background:var(--warm)}
.sec.dark{background:var(--dark);color:rgba(255,255,255,.72)}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.tight{padding-block:calc(var(--sec)*.6)}
.sec+.sec:not(.tint):not(.warm):not(.dark){border-top:1px solid var(--line)}
.sh{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:end;margin-bottom:57px}
.sh .t{display:grid;gap:18px}
.sh .d{display:grid;gap:18px;justify-items:start}
.sh.stack{grid-template-columns:1fr;max-width:819px}
.sh.center{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:819px;margin-inline:auto}
@media (max-width:981px){.sh{grid-template-columns:1fr;gap:21px;margin-bottom:39px}}

/* ---------- cards ---------- */
.grid{display:grid;gap:21px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1101px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:861px){.g3{grid-template-columns:1fr}}
@media (max-width:639px){.g2,.g4{grid-template-columns:1fr}}
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px 27px;display:flex;flex-direction:column;gap:15px;transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.sec.tint .card,.sec.warm .card{border-color:transparent}
a.card:hover,.card.hov:hover{transform:translateY(-3px);box-shadow:0 18px 39px rgba(150,56,33,.10);border-color:rgba(254,80,0,.35)}
.card .ic{width:45px;height:45px;color:var(--orange)}
.card .k{font:500 12px/1 var(--latin);letter-spacing:0;color:var(--muted);text-transform:uppercase}
.card h3{font-size:21px;line-height:1.45}
.card p{font-size:15px;line-height:1.75}
.card .more{margin-top:auto;padding-top:9px}
.card .tags{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;height:27px;padding:0 12px;border-radius:999px;background:var(--warm);font-size:12px;color:var(--body)}
.sec.warm .chip,.sec.tint .chip{background:#fff}
.chip.o{background:var(--tint-2);color:var(--orange-d)}
.card.fill{background:var(--warm);border-color:transparent}

/* pain cards */
.pain .card{gap:15px}
.pain .q{font-size:clamp(18px,1.6vw,24px);line-height:1.5;color:var(--ink);font-weight:500}
.pain .q::before{content:"“";color:var(--orange);font:500 36px/0 var(--latin);vertical-align:-9px;margin-right:3px}
.pain .ans{padding-top:15px;border-top:1px solid var(--line);display:grid;gap:9px}
.pain .ans b{font-weight:500;color:var(--orange-d);font-size:12px;letter-spacing:0}

/* brand trio */
.brands{display:grid;gap:21px}
.brand-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:39px 48px}
.brand-row .ill{max-width:459px;justify-self:center;width:100%}
.brand-row .body{display:grid;gap:15px;align-content:center}
.brand-row .n{font:500 12px/1 var(--latin);color:var(--muted)}
.brand-row .name{font:500 30px/1.2 var(--latin);color:var(--ink)}
.brand-row .role{font-size:18px;color:var(--ink);font-weight:500}
.brand-row ul{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
@media (max-width:900px){.brand-row{grid-template-columns:1fr;padding:27px 24px;gap:24px}}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff}
.trio>a{display:grid;gap:15px;padding:33px 30px 33px;border-right:1px solid var(--line);transition:background .25s}
.trio>a:last-child{border-right:0}
.trio>a:hover{background:var(--tint)}
.trio .ill{height:189px;display:flex;align-items:center;justify-content:center}
.trio .ill svg{max-height:189px;width:auto}
.trio .name{font:500 24px/1.2 var(--latin);color:var(--ink)}
.trio .role{font-size:12px;letter-spacing:0;color:var(--orange-d);font-weight:500}
@media (max-width:900px){.trio{grid-template-columns:1fr}.trio>a{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.stats.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats>div{padding:27px 24px 9px 0;display:grid;gap:9px;align-content:start}
.stats>div+div{padding-left:24px;border-left:1px solid var(--line)}
.stats .v{font:500 clamp(33px,3.4vw,51px)/1 var(--latin);color:var(--orange);letter-spacing:0}
.stats .v small{font-size:.42em;color:var(--ink);margin-left:3px;font-weight:500}
.stats .l{font-size:15px;color:var(--ink);font-weight:500}
.stats .s{font-size:12px;color:var(--muted);line-height:1.6}
.sec.dark .stats{border-color:rgba(255,255,255,.14)} .sec.dark .stats>div+div{border-color:rgba(255,255,255,.14)} .sec.dark .stats .l{color:#fff} .sec.dark .stats .v{color:var(--peach)}
@media (max-width:900px){.stats,.stats.c3{grid-template-columns:repeat(2,minmax(0,1fr))}.stats>div:nth-child(odd){padding-left:0;border-left:0}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0;counter-reset:st;position:relative}
.steps>div{position:relative;padding:0 24px 0 0;display:grid;gap:12px;align-content:start}
.steps>div::before{counter-increment:st;content:counter(st,decimal-leading-zero);font:500 12px/1 var(--latin);color:var(--orange);display:flex;align-items:center;gap:12px;padding-bottom:21px;border-bottom:1.5px solid var(--line);margin-bottom:9px}
.steps>div::after{content:"";position:absolute;left:0;top:33px;width:9px;height:9px;border-radius:50%;background:var(--orange);transform:translateY(-3px)}
.steps h3{font-size:18px}
.steps p{font-size:15px}
.steps .tag{justify-self:start}
@media (max-width:981px){.steps{grid-template-columns:1fr 1fr;gap:36px 0}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

/* ---------- split (sticky media + list) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:63px;align-items:start}
.split .stick{position:sticky;top:111px}
.split .ill{background:#fff;border:1px solid var(--line);border-radius:24px;padding:27px}
.sec.tint .split .ill,.sec.warm .split .ill{border-color:transparent}
.rows{display:grid}
.rows>div{display:grid;grid-template-columns:45px 1fr;gap:18px;padding:24px 0;border-top:1px solid var(--line)}
.rows>div:last-child{border-bottom:1px solid var(--line)}
.rows .ic{width:36px;height:36px;color:var(--orange)}
.rows h3{font-size:18px;margin-bottom:6px}
.rows p{font-size:15px}
@media (max-width:981px){.split{grid-template-columns:1fr;gap:33px}.split .stick{position:static}}

/* ---------- tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:27px}
.tabs button{height:39px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:15px;color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabpanel[hidden]{display:none}

/* ---------- table ---------- */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tbl table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.65;min-width:639px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:15px 21px;border-bottom:1px solid var(--line)}
.tbl thead th{font-weight:500;font-size:12px;color:var(--muted);background:var(--warm)}
.tbl tbody th{font-weight:500;color:var(--ink);background:#FCFBFA;width:22%}
.tbl tr:last-child>*{border-bottom:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:grid;grid-template-columns:1fr 27px;gap:21px;align-items:center;padding:24px 0;cursor:pointer;font-size:18px;color:var(--ink);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:27px;height:27px;border-radius:50%;border:1px solid var(--line);position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq .a{padding:0 48px 27px 0;font-size:15px;display:grid;gap:9px}

/* ---------- specs dl ---------- */
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.spec>div{display:grid;grid-template-columns:40% 1fr;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}
.spec dt{color:var(--muted)} .spec dd{margin:0;color:var(--ink);font-weight:500}
@media (max-width:759px){.spec{grid-template-columns:1fr}}

/* ---------- compute table ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px 21px;align-items:center;justify-content:space-between;margin-bottom:21px}
.filters .chips{display:flex;flex-wrap:wrap;gap:9px}
.filters button{height:39px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:15px;color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.filters select{height:39px;border-radius:999px;border:1px solid var(--line);padding:0 36px 0 15px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141210' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 15px center;appearance:none;font:inherit;font-size:15px;color:var(--ink)}
.ctable{border-top:1.5px solid var(--ink)}
.crow{display:grid;grid-template-columns:1.1fr 1.3fr 1fr 1.1fr 1.1fr .8fr 1.25fr 120px;gap:15px;align-items:center;padding:21px 3px;border-bottom:1px solid var(--line);font-size:15px;transition:background .2s}
.crow.head{font-size:12px;color:var(--muted);padding-block:15px;letter-spacing:0}
.crow:not(.head):hover{background:var(--tint)}
.crow .gpu{font:500 15px/1.3 var(--latin);color:var(--orange)}
.crow .loc b{display:block;color:var(--ink);font-weight:500;font-size:15px}
.crow .loc span{font-size:12px;color:var(--muted)}
.crow .price{text-align:right}
.crow .price b{font:500 21px/1 var(--latin);color:var(--ink)}
.crow .price small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.crow .go{justify-self:end}
.crow .cool{display:inline-flex;height:27px;padding:0 9px;border-radius:999px;background:var(--tint-2);color:var(--orange-d);font-size:12px;align-items:center}
@media (max-width:1101px){
  .crow.head{display:none}
  .crow{grid-template-columns:1fr 1fr;gap:6px 15px;padding:21px 0}
  .crow .price{text-align:left}
  .crow .go{justify-self:start}
  .crow>.hide-m{display:none}
}

/* ---------- media ---------- */
.photo{border-radius:var(--r);overflow:hidden;position:relative;background:var(--warm)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.warm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,174,98,.10),rgba(150,56,33,.22));mix-blend-mode:multiply;pointer-events:none}
.ratio-169{aspect-ratio:16/9}.ratio-32{aspect-ratio:3/2}.ratio-219{aspect-ratio:21/9}.ratio-45{aspect-ratio:4/5}
.cap{font-size:12px;color:var(--muted);margin-top:9px}

/* project cards */
.proj{display:grid;grid-template-columns:1fr 1fr;gap:21px}
.proj a{display:grid;gap:18px}
.proj .photo{aspect-ratio:4/3}
.proj .photo img{transition:transform .8s var(--ease)}
.proj a:hover .photo img{transform:scale(1.03)}
.proj .meta{display:flex;justify-content:space-between;gap:15px;align-items:baseline}
.proj h3{font-size:21px}
.proj .for{font-size:12px;color:var(--orange-d);font-weight:500}
@media (max-width:759px){.proj{grid-template-columns:1fr}}

/* news / article cards */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px 21px}
.post{display:grid;gap:15px;align-content:start}
.post .photo{aspect-ratio:16/10}
.post .photo img{transition:transform .8s var(--ease)}
.post:hover .photo img{transform:scale(1.03)}
.post .m{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--muted)}
.post .m b{color:var(--orange-d);font-weight:500}
.post h3{font-size:18px;line-height:1.55}
.post:hover h3{color:var(--orange)}
.post p{font-size:15px;color:var(--body)}
@media (max-width:981px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:639px){.posts{grid-template-columns:1fr}}
.press{display:flex;flex-wrap:wrap;gap:9px 36px;align-items:center;padding:27px 0;border-block:1px solid var(--line);font:500 15px/1 var(--latin);color:var(--muted)}
.press span:first-child{font:500 12px var(--font);letter-spacing:0;text-transform:uppercase}

/* ---------- article ---------- */
.article-head{padding-block:63px 39px;background:linear-gradient(118deg,#FFF1E6 0%,#FFFFFF 50%)}
.article-head .in{max-width:900px;display:grid;gap:21px}
.article-cover{max-width:1260px;margin:0 auto;padding-inline:var(--gutter)}
.article-cover .photo{aspect-ratio:16/8}
.article{display:grid;grid-template-columns:240px minmax(0,681px);gap:72px;justify-content:center;padding-block:63px 24px}
.toc{position:sticky;top:111px;align-self:start;display:grid;gap:3px;font-size:12px}
.toc b{font-size:12px;letter-spacing:0;color:var(--muted);text-transform:uppercase;font-weight:500;margin-bottom:9px}
.toc a{padding:6px 0 6px 15px;border-left:1.5px solid var(--line);color:var(--body);line-height:1.5}
.toc a:hover,.toc a.on{border-color:var(--orange);color:var(--ink)}
.prose{font-size:18px;line-height:1.9;color:#3D3A35}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:27px;line-height:1.4;margin-top:2.2em;scroll-margin-top:99px}
.prose h3{font-size:21px;margin-top:1.8em;scroll-margin-top:99px}
.prose a{color:var(--orange-d);border-bottom:1px solid rgba(254,80,0,.35)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose strong,.prose b{color:var(--ink);font-weight:500}
.prose blockquote{margin:1.6em 0;padding:3px 0 3px 21px;border-left:3px solid var(--orange);color:var(--ink);font-size:18px}
.prose table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.65}
.prose .tbl{margin-block:1.6em}
.prose .tbl table{min-width:561px}
.prose img{border-radius:12px}
.prose code{font-size:.9em;background:var(--warm);padding:2px 6px;border-radius:3px}
.byline{display:flex;flex-wrap:wrap;gap:9px 21px;font-size:12px;color:var(--muted)}
.byline b{color:var(--ink);font-weight:500}
.art-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:39px;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:999px){.article{grid-template-columns:1fr;gap:24px}.toc{position:static;display:none}}
.source-card{display:grid;grid-template-columns:1fr auto;gap:21px;align-items:center;background:var(--warm);border-radius:var(--r);padding:27px 27px;margin-top:33px}
.source-card .k{font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--muted)}
.source-card h3{font-size:18px;margin-top:6px}
@media (max-width:639px){.source-card{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(120deg,#963821 0%,#DB480B 34%,#FE5000 62%,#FF8F41 100%);color:#fff}
.cta .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end;padding-block:111px}
.cta h2{color:#fff;font-size:clamp(30px,3.4vw,51px);line-height:1.25}
.cta p{color:rgba(255,255,255,.88);font-size:18px;max-width:32em}
.cta .d{display:grid;gap:27px;justify-items:start}
.cta .lines{position:absolute;right:-4%;top:50%;transform:translateY(-50%);height:128%;width:auto;opacity:.16;z-index:0}
@media (max-width:900px){.cta .wrap{grid-template-columns:1fr;padding-block:81px}.cta .lines{height:90%;right:-30%}}

/* ---------- footer ---------- */
.site-footer{background:#fff;border-top:1px solid var(--line);padding-block:72px 33px;font-size:15px}
.ft{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:39px}
.ft .brand{display:grid;gap:18px;align-content:start}
.ft .brand img{height:27px;width:auto}
.ft .brand p{color:var(--body);max-width:22em}
.ft h4{font:500 12px/1 var(--font);letter-spacing:0;text-transform:uppercase;color:var(--muted);margin-bottom:15px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft a:hover{color:var(--orange)}
.ft-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;margin-top:57px;padding-top:21px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.ft-b nav{display:flex;flex-wrap:wrap;gap:21px}
.ft-addr{display:grid;gap:3px;color:var(--body)}
@media (max-width:999px){.ft{grid-template-columns:1fr 1fr}.ft .brand{grid-column:1/-1}}

/* ---------- new-copy marker (review mode: ?mark) ---------- */
html.mark .nc{background:linear-gradient(transparent 62%,rgba(0,174,214,.22) 0);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mark-note{display:none}
html.mark .mark-note{display:block;position:fixed;left:15px;bottom:15px;z-index:60;background:var(--ink);color:#fff;font-size:12px;padding:9px 15px;border-radius:9px;max-width:279px}

/* ---------- motion ---------- */
.rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .rv:not(.in){opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html.js .rv:not(.in){opacity:1;transform:none}}

/* utilities */
.mt-s{margin-top:15px}.mt{margin-top:33px}.mt-l{margin-top:57px}
.center{text-align:center}
.max-820{max-width:819px}
.note-bar{font-size:12px;color:var(--muted);margin-top:21px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* ================= v2.1 · 2026-09-25 · clean minimal pass (Racketon + LEEVI references) =================
   line icons v0.2, line-art isometric diagrams, tiles instead of gradient washes, inset CTA block */
.s,.a,.w{fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter}.s{stroke:currentColor}.w{stroke:currentColor;fill:var(--ic-bg,#fff)}.a{stroke:#FE5000}.af{fill:#FE5000}
.ic{color:var(--ink)}
:root{--tint:#FFF7F1;--tint-2:#FFEADB;--warm:#F5F4F1}
h1,h2{font-weight:500}
.h1{font-size:clamp(36px,4.2vw,57px);line-height:1.2}
.h2{font-size:clamp(27px,2.7vw,39px);line-height:1.32}

/* hero → two rounded tiles */
.hero{background:#fff}
.hero::after,.hero-lines{display:none}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:15px;padding-block:24px 9px;align-items:stretch}
.hero-grid .copy{background:var(--tint-2);border-radius:24px;padding:57px 48px 51px;align-content:end;min-height:519px;position:relative}
.hero-grid .copy::before{content:"";position:absolute;left:48px;top:48px;width:45px;height:51px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 240'%3E%3Cg fill='none' stroke='%231A1714' stroke-width='5'%3E%3Cpath d='M69.16,101.36L42,0H0l27.16,101.37c3.27,12.21,3.27,25.06,0,37.27L0,240h42l27.16-101.36c3.27-12.21,3.27-25.06,0-37.27h0Z'/%3E%3Cpath d='M141.16,101.36L114,0h-42l27.16,101.37c3.27,12.21,3.27,25.06,0,37.27l-27.16,101.37h42l27.16-101.36c3.27-12.21,3.27-25.06,0-37.27v-.02Z'/%3E%3Cpath d='M207,0h-63l27.16,101.36c3.27,12.21,3.27,25.07,0,37.28l-27.16,101.36h63V0Z'/%3E%3C/g%3E%3C/svg%3E")}
.hero-grid .copy .crumb{position:absolute;right:48px;top:51px;margin:0}
.hero-grid .ill{background:var(--warm);border-radius:24px;display:flex;align-items:center;justify-content:center;padding:39px}
.hero-grid .ill svg{max-height:459px}
@media (max-width:981px){.hero-grid{grid-template-columns:1fr}.hero-grid .copy{min-height:0;padding:96px 27px 36px}.hero-grid .copy::before{left:27px;top:33px}.hero-grid .copy .crumb{position:static}}
.hero-page{background:#fff}

/* cards: quiet fill, no borders */
.card{background:var(--warm);border-color:transparent;padding:33px 27px}
.sec.warm .card,.sec.tint .card{background:#fff}
a.card:hover,.card.hov:hover{box-shadow:none;border-color:transparent;background:var(--tint-2);transform:none}
.card .ic{width:39px;height:39px;--ic-bg:var(--warm)}
a.card:hover .ic{--ic-bg:var(--tint-2)}
.card h3{font-size:18px}
.pain .q::before{display:none}
.pain .ans{border-color:rgba(26,23,20,.12)}
.rows .ic{width:33px;height:33px}

/* sections: calmer backgrounds */
.sec.tint{background:#FBF9F6}
.sec+.sec:not(.tint):not(.warm):not(.dark){border-top:0}
.sh{margin-bottom:48px}

/* brand rows & layers list (Foundry reference) */
.brand-row{background:var(--warm);border:0}
.sec.tint .brand-row{background:#fff}
.layers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:57px;align-items:center}
.layers .ill svg{width:100%;height:auto}
.layer-list{border-top:1px solid var(--ink)}
.layer-list>a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:24px 33px;border-radius:18px;position:relative;transition:background .2s}
.layer-list>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transition:opacity .2s}   /* straight rule under each row (a border would follow the 18px radius) */
.layer-list>a:hover .nm{color:var(--orange)}
.layer-list .no{font:500 12px/1 var(--latin);letter-spacing:0;color:var(--muted)}
.layer-list .nm{font:400 clamp(27px,2.8vw,39px)/1.1 var(--latin);color:var(--ink);margin-top:9px;display:block;transition:color .2s}
.layer-list .rl{font-size:15px;color:var(--ink);margin-top:9px;display:block}
.layer-list ul{list-style:none;margin:0;padding:0;display:grid}
.layer-list li{font-size:15px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--body)}
.layer-list li:last-child{border-bottom:0}
@media (max-width:981px){.layers{grid-template-columns:1fr}.layer-list>a{grid-template-columns:1fr}}
@media (max-width:600px){.layer-list>a{padding:24px 21px}}

/* CTA → inset tinted block (LEEVI) */
.cta{background:#fff;color:var(--ink);padding-block:0 96px}
.cta .lines{display:none}
.cta .wrap{padding-block:0}
.cta .box{position:relative;background:var(--tint-2);border-radius:24px;padding:120px 57px 57px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:39px;align-items:end}
.cta .box::before{content:"";position:absolute;left:57px;top:48px;width:48px;height:57px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 207 240'%3E%3Cg fill='none' stroke='%231A1714' stroke-width='5'%3E%3Cpath d='M69.16,101.36L42,0H0l27.16,101.37c3.27,12.21,3.27,25.06,0,37.27L0,240h42l27.16-101.36c3.27-12.21,3.27-25.06,0-37.27h0Z'/%3E%3Cpath d='M141.16,101.36L114,0h-42l27.16,101.37c3.27,12.21,3.27,25.06,0,37.27l-27.16,101.37h42l27.16-101.36c3.27-12.21,3.27-25.06,0-37.27v-.02Z'/%3E%3Cpath d='M207,0h-63l27.16,101.36c3.27,12.21,3.27,25.07,0,37.28l-27.16,101.36h63V0Z'/%3E%3C/g%3E%3C/svg%3E")}
.cta h2{color:var(--ink);font-size:clamp(27px,3.2vw,45px)}
.cta p{color:var(--body)}
.cta .d{justify-items:start}
.cta .btn-white{background:var(--orange);color:#fff} .cta .btn-white:hover{background:var(--orange-d);color:#fff}
.cta .btn-glass{background:transparent;border-color:var(--ink);color:var(--ink);backdrop-filter:none} .cta .btn-glass:hover{border-color:var(--orange);color:var(--orange)}
@media (max-width:900px){.cta .box{grid-template-columns:1fr;padding:105px 27px 36px}.cta .box::before{left:27px;top:36px}}
.site-footer{border-top:0;padding-top:24px}

/* home carousel hero (Racketon) + finder */
.hc{padding-top:15px}
.hc-stage{position:relative;border-radius:24px;overflow:hidden;height:min(76vh,720px);min-height:519px;background:var(--dark)}
.hc-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility .8s}
.hc-slide.on{opacity:1;visibility:visible}
.hc-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s var(--ease)}
.hc-slide.on img{transform:scale(1)}
.hc-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,.10) 30%,rgba(60,24,10,.72) 100%)}
.hc-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 57px 117px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:39px;align-items:end;color:#fff}
.hc-copy h1,.hc-copy h2{color:#fff;font-size:clamp(33px,4vw,57px);line-height:1.2}
.hc-copy .eyebrow{color:rgba(255,255,255,.8)} .hc-copy .eyebrow::before{background:var(--peach)}
.hc-copy .t{display:grid;gap:18px}
.hc-copy .d{display:grid;gap:21px;justify-items:start}
.hc-copy .d p{color:rgba(255,255,255,.86);font-size:15px;line-height:1.8}
.hc-copy .src{font-size:12px;color:rgba(255,255,255,.7)}
.hc-ctrl{position:absolute;right:57px;top:39px;z-index:3;display:flex;gap:15px;align-items:center;color:#fff;font:500 12px var(--latin)}
.hc-ctrl button{width:39px;height:39px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);backdrop-filter:blur(9px);color:#fff;cursor:pointer;display:grid;place-items:center}
.hc-ctrl button:hover{background:rgba(255,255,255,.28)}
.hc-dots{display:flex;gap:6px} .hc-dots i{width:21px;height:2px;background:rgba(255,255,255,.4)} .hc-dots i.on{background:#fff}
.finder{position:relative;z-index:4;margin:-45px auto 0;max-width:1041px;background:#fff;border-radius:999px;box-shadow:0 21px 60px rgba(20,18,16,.10);display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:0;align-items:center;padding:9px 9px 9px 12px}
.finder label{display:grid;gap:2px;padding:6px 24px;border-right:1px solid var(--line);font-size:12px;color:var(--muted)}
.finder label:nth-of-type(3){border-right:0}
.finder select{border:0;background:transparent;font:500 15px var(--font);color:var(--ink);padding:0;appearance:none;cursor:pointer}
.finder .btn{height:51px}
@media (max-width:981px){.hc-copy{grid-template-columns:1fr;padding:0 24px 96px;gap:15px}.hc-ctrl{right:24px;top:24px}.finder{border-radius:21px;grid-template-columns:1fr;margin:-33px 15px 0;padding:12px}.finder label{border-right:0;border-bottom:1px solid var(--line);padding:9px 12px}.finder .btn{justify-content:center}}

/* v2.2 · Apple design pass: size-specific tracking, press feedback, translucent chrome, a11y media */
.h1,.hc-copy h1,.hc-copy h2,.cta h2,.layer-list .nm,.brand-row .name,.stats .v{letter-spacing:0}
.h2{letter-spacing:0}
.eyebrow,.fine,.crow.head{letter-spacing:0}
.btn{transition:background .2s,color .2s,border-color .2s,transform .12s ease-out}
.btn:active,.tabs button:active,.filters button:active,.hc-ctrl button:active{transform:scale(.97)}
a.card:active,.post:active,.layer-list>a:active{transform:scale(.99)}
.hc-slide{transition:opacity .9s cubic-bezier(.2,.7,.2,1),visibility .9s}
@media (prefers-reduced-transparency:reduce){.btn-glass,.hc-ctrl button{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}.hc-ctrl button{color:var(--ink)}}
@media (prefers-contrast:more){.card,.brand-row{border:1px solid var(--ink)}.fine,.eyebrow{color:var(--body)}}
@media (prefers-reduced-motion:reduce){.hc-slide img{transform:none!important}}

.finder{grid-template-columns:1fr 1fr auto;max-width:819px}
.finder label:nth-of-type(2){border-right:0}

/* v2.3 · clean backgrounds (no logo underlay) + Liquid Glass */
.hero-grid .copy::before,.cta .box::before{content:none}
.hero-grid .copy{padding-top:48px}
.cta .box{padding-top:72px}
.glass{background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 18px 48px rgba(20,18,16,.08)}
.hero-grid .copy{background:linear-gradient(135deg,rgba(255,234,219,.9),rgba(255,246,239,.72));position:relative;overflow:hidden}
.hero-grid .copy::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(254,80,0,.18),transparent 70%);pointer-events:none}
.hero-grid .ill{background:linear-gradient(180deg,#F7F6F3,#EFEDE8);position:relative}
.finder{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
.hc-copy .d{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-radius:21px;padding:27px}
.card{background:linear-gradient(180deg,#F7F6F3,#F2F0EC)}
@media (prefers-reduced-transparency:reduce){.glass,.finder,.hc-copy .d{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}.hc-copy .d{background:rgba(23,20,18,.82)}}








/* v2.4 · CTA box spans the container */
.cta .wrap{display:block}
.photo-band{padding-top:24px}
.photo-band .photo{aspect-ratio:21/8;border-radius:24px}
@media (max-width:759px){.photo-band .photo{aspect-ratio:4/3}}

/* v2.5 · skill pass: accessibility (WCAG AA), mobile-native, Emil polish, motion audit */
:root{--muted:#65686A;--orange-t:#B94016;--ease-io:cubic-bezier(.4,0,.2,1)}
html{-webkit-tap-highlight-color:transparent}
a,button,summary,select,label,[role=tab]{touch-action:manipulation}
.btn,.tabs button,.filters button,.hc-ctrl button,summary{-webkit-user-select:none;user-select:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sec.dark :focus-visible,.hc-stage :focus-visible{outline-color:#fff}
.crow .gpu,.chip.o,.crow .cool,.post .m b,.proj .for,.trio .role,.pain .ans b,.prose a{color:var(--orange-t)}
.stats .v{font-variant-numeric:tabular-nums}
.btn-glass{-webkit-backdrop-filter:blur(15px) saturate(1.3)}
.hc-ctrl button{-webkit-backdrop-filter:blur(9px)}
.pain .ans{margin-top:auto}
.card{background:var(--warm);transition:background-color .2s ease,transform .15s ease-out}
.sec.warm .card,.sec.tint .card{background:#fff}
.sec.warm a.card:hover,.sec.tint a.card:hover{background:var(--tint-2)}
a.card,.post,.layer-list>a{transition:background-color .2s ease,transform .15s ease-out}
.tabs button,.filters button{transition:transform .12s ease-out,border-color .15s ease,color .15s ease,background-color .15s ease}
.tabs button[aria-selected="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
@media (hover:hover) and (pointer:fine){.tabs button:hover,.filters button:hover{border-color:var(--orange)}}
@media (hover:none){a.card:hover,.card.hov:hover{background:var(--warm)}.sec.warm a.card:hover,.sec.tint a.card:hover{background:#fff}.post:hover h3{color:var(--ink)}.proj a:hover .photo img,.post:hover .photo img{transform:none}}
.wrap{padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.mark-note{bottom:calc(15px + env(safe-area-inset-bottom,0px))}
.hc-stage{height:min(76vh,720px);height:min(76svh,720px);touch-action:pan-y}
.hero-photo{min-height:min(78svh,759px)}
@media (pointer:coarse){
 .field input:not([type=checkbox]),.field select,.field textarea,.filters select,.finder select{font-size:18px}
 .btn-sm,.tabs button,.filters button,.filters select,.hc-ctrl button,.reg-chips button{height:45px;min-width:45px}
 .crumb a,.ft ul a,.ft-b a,.crow .link{display:inline-flex;align-items:center;min-height:45px}
}
.ft .ft-h{font:500 12px/1 var(--font);text-transform:uppercase;color:var(--muted);margin:0 0 15px}
.hero-grid .ill.map-wrap{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:stretch}
/* reveal: short, capped stagger; hands control back to component transitions when done */
.rv{transition:none}
html.js .rv:not(.done){transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .rv:not(.in){opacity:0;transform:translateY(12px)}
/* carousel: incoming slide fades over a held outgoing slide; copy follows */
.hc-slide{z-index:0;transition:opacity 0s linear .9s,visibility 0s linear .9s}
.hc-slide.on{z-index:1;transition:opacity .9s var(--ease-io),visibility 0s}
.hc-stage.ready .hc-slide:not(.on) .hc-copy{opacity:0;transform:translateY(9px);transition:opacity .25s ease,transform 0s linear .25s}
.hc-stage.ready .hc-slide.on .hc-copy{transition:opacity .5s var(--ease) .36s,transform .6s var(--ease) .36s}
.hc-dots i{position:relative;overflow:hidden}
.hc-dots i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hc-dots i.on{background:rgba(255,255,255,.4)}
.hc-stage.run .hc-dots i.on::after{animation:hcProgress 7s linear forwards}
.hc-stage:not(.run) .hc-dots i.on::after{transform:scaleX(1)}
@keyframes hcProgress{to{transform:scaleX(1)}}
/* illustrations: dashed flow lines drift slowly, orange accent lines draw once */
.hero-grid .ill polyline[stroke-dasharray],.layers .ill polyline[stroke-dasharray]{animation:railFlow 15s linear infinite;animation-play-state:paused}
.ill.in-view polyline[stroke-dasharray]{animation-play-state:running}
@keyframes railFlow{to{stroke-dashoffset:-84}}
html.js .ill .acc{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.77,0,.175,1) .15s}
html.js .ill.seen .acc{stroke-dashoffset:0}
[role=tabpanel]:not([hidden]):not(header.v1h *){animation:panelIn .18s ease-out}
@keyframes panelIn{from{opacity:0}}
@supports selector(::details-content){.faq details{interpolate-size:allow-keywords}.faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .3s var(--ease),opacity .2s ease,content-visibility .3s allow-discrete}.faq details[open]::details-content{block-size:auto;opacity:1}}
.wmap .halo{animation-iteration-count:2!important}
.wmap a:focus-visible .pin{stroke:var(--ink);stroke-width:3}
@media (prefers-reduced-motion:reduce){

 html.js .rv:not(.in){transform:none}
 html.js .rv:not(.done){transition:opacity .3s ease!important;transition-delay:0s!important}
 .hc-slide img{transform:none!important}
 .ill polyline,.wmap .halo,.hc-dots i::after{animation:none!important}
 html.js .ill .acc{stroke-dashoffset:0}
 a.card:active,.post:active,.layer-list>a:active,.btn:active{transform:none}
}

*,*::before,*::after{letter-spacing:0!important}

/* v2.6 · icons: single colour (matches Figma Icon System v0.2 mono) */
.ic .a{stroke:currentColor}
.ic .af{fill:currentColor}

/* ===== v3 · restore v1 (8765) home hero, finder, globe atlas, list, flagship and CTA ===== */
/* page offset for the fixed v1 header (81px); photo-hero pages sit under the transparent header */
body{padding-top:81px}
body.photo-hero{padding-top:0}

/* home hero: full-bleed v1 carousel */
.hc.full{padding-top:0}
.hc.full>.wrap{max-width:none;padding-inline:0}
.hc.full .hc-stage{border-radius:0;height:843px;min-height:0}
.hc.full .hc-slide::after{background:linear-gradient(180deg,rgba(20,14,10,.28) 0%,rgba(20,14,10,.05) 30%,rgba(20,14,10,.18) 62%,rgba(40,18,8,.62) 100%)}
.hc.full .hc-copy{padding:0 var(--gutter) 132px;grid-template-columns:minmax(0,1fr) minmax(0,480px);max-width:none;justify-content:space-between}
.hc.full .hc-copy h1,.hc.full .hc-copy h2{font-size:clamp(36px,3.6vw,51px);line-height:1.15}
.hc.full .hc-copy .d{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.hc.full .hc-copy .meta{font-size:15px;color:rgba(255,255,255,.85)} .hc.full .hc-copy .meta b{font:500 24px/1 var(--latin);color:#fff;margin-right:6px}
.hc.full .hc-ctrl{top:auto;bottom:66px;right:auto;left:50%;transform:translateX(-50%);gap:21px}
.hc.full .hc-ctrl button{background:none;border:0;width:30px;height:30px;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:18px}
.hc.full .hc-ctrl>span,.hc.full .hc-dots{display:none}
.hc.full .hc-cap{position:absolute;right:var(--gutter);top:105px;z-index:3;font-size:12px;color:rgba(255,255,255,.75)}
.hc.full .finder{margin:-42px auto 72px;max-width:1101px;height:75px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72));border:1px solid rgba(255,255,255,.85);box-shadow:0 21px 60px rgba(20,18,16,.12);padding:9px 9px 9px 27px;grid-template-columns:1fr 1fr auto}
.hc.full .finder label{grid-template-columns:auto 1fr;align-items:center;gap:12px;font-size:12px;border-right:1px solid var(--line);padding:6px 18px 6px 0}
.hc.full .finder label+label{padding-left:18px}
.hc.full .finder select{font-weight:400;font-size:15px;width:100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141210' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center}
.hc.full .finder .btn{background:var(--ink);height:45px;margin-left:12px}
.hc.full .finder .btn:hover{background:#000}
@media (max-width:981px){.hc.full .hc-stage{height:720px}.hc.full .hc-copy{grid-template-columns:1fr;padding:0 21px 120px}.hc.full .finder{height:auto;border-radius:21px;grid-template-columns:1fr;margin:-30px 15px 48px;padding:12px}.hc.full .finder label,.hc.full .finder label+label{border-right:0;padding:9px 6px;border-bottom:1px solid var(--line)}.hc.full .finder .btn{margin:9px 0 0;justify-content:center}}

/* v1 section heading: h2 with muted second line, lead right-aligned to the top */
.sh.v1 .t h2 .subtle{color:var(--muted);font-weight:400}
.sh.v1 .d{align-self:start;justify-items:end;text-align:right;padding-top:9px}
@media (max-width:981px){.sh.v1 .d{justify-items:start;text-align:left}}

/* globe atlas (original experience.js) */
.globe-stage{position:relative;height:561px;padding:24px 27px;background:#F3F2EF;border-radius:15px;overflow:hidden}
.globe-stage>.eyebrow{position:relative;z-index:2}
.globe-surface{position:absolute;top:87px;left:50%;width:861px;height:861px;transform:translateX(-50%);cursor:grab}
.globe-surface canvas{width:861px;height:861px;display:block}
#globe-markers{position:absolute;inset:0}
.globe-pin{position:absolute;width:33px;height:33px;border-radius:50%;background:#292F33;border:1px solid #fff;color:#fff;font:400 12px/1 var(--latin);display:grid;place-items:center;cursor:pointer;transform:translate(-50%,-50%);transition:opacity .2s,background .2s;padding:0}
.globe-pin small{position:absolute;top:39px;left:50%;transform:translateX(-50%);background:#fff;color:var(--muted);font-size:12px;padding:3px 9px;border-radius:3px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.globe-pin:hover small,.globe-pin:focus-visible small{opacity:1}
.globe-pin:hover,.globe-pin.selected,.globe-pin.active{background:var(--orange)}
.globe-pin.dim{opacity:.35}
.globe-footer{position:absolute;left:27px;right:27px;bottom:24px;display:flex;justify-content:space-between;align-items:end;font-size:12px;color:var(--muted);z-index:2}
.globe-footer button{background:none;border:0;border-bottom:1px solid currentColor;font-size:12px;color:var(--ink);cursor:pointer;padding:0 0 3px}
.globe-note{position:absolute;left:27px;bottom:51px;font-size:12px;color:var(--muted);z-index:2;margin:0}
@media (max-width:759px){.globe-stage{height:360px}.globe-surface{width:561px;height:561px;top:72px}.globe-surface canvas{width:561px;height:561px}.globe-note{display:none}}

/* v1 list: chips, 8 columns, compare */
.v1list .lhead{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:48px 0 21px}
.v1list .lhead h3{font-size:21px;display:flex;align-items:center;gap:12px}
.v1list .lhead h3::before{content:"";width:6px;height:6px;background:var(--orange)}
.v1list .lhead .meta{font-size:12px;color:var(--muted);text-align:right;display:grid;gap:6px}
.v1list .chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.v1list .chips button{height:48px;padding:0 21px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:15px;color:var(--ink);cursor:pointer}
.v1list .chips button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.v1list .crow{grid-template-columns:120px 153px 105px 126px 141px 87px 204px 210px;gap:0 15px;padding:24px 0}
.v1list .crow .loc b{font-size:15px}
.v1list .crow .price small{margin-top:6px}
.v1list .crow .price .sales{display:inline;color:var(--orange-t);border-bottom:1px solid currentColor;margin-left:6px;font-size:12px}
.v1list .crow .acts{display:flex;justify-content:flex-end;align-items:center;gap:18px;font-size:12px}
.v1list .crow .acts label{display:inline-flex;gap:6px;align-items:center;color:var(--body);cursor:pointer}
.v1list .crow .acts input{accent-color:var(--orange);width:15px;height:15px}
.v1list .fineprint{font-size:12px;color:var(--muted);margin-top:21px}
.v1list .more{margin-top:24px}
.cmp-tray{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);z-index:40;background:rgba(20,18,16,.92);color:#fff;border-radius:999px;padding:9px 9px 9px 24px;display:flex;align-items:center;gap:15px;font-size:15px;transition:transform .3s var(--ease);backdrop-filter:blur(12px)}
.cmp-tray.on{transform:translate(-50%,0)}
.cmp-tray:not(.on){visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}   /* taller wrapped tray on phones peeked above the fold */
.cmp-tray button{height:39px;border-radius:999px;border:0;padding:0 18px;cursor:pointer;font-size:15px}
.cmp-tray .go{background:var(--orange);color:#fff}
.cmp-tray .clr{background:transparent;color:rgba(255,255,255,.75)}
dialog.cmp{border:0;border-radius:21px;padding:0;max-width:960px;width:calc(100% - 30px);box-shadow:0 30px 90px rgba(0,0,0,.25)}
dialog.cmp::backdrop{background:rgba(20,18,16,.4)}
dialog.cmp .in{padding:36px}
dialog.cmp h3{font-size:24px;margin-bottom:18px}
dialog.cmp .x{position:absolute;right:18px;top:18px;width:39px;height:39px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer}
@media (max-width:1101px){.v1list .crow{grid-template-columns:1fr 1fr}.v1list .crow .acts{justify-content:flex-start}}

/* v1 flagship cards */
.v1proj{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.v1proj a{display:grid;gap:15px}
.v1proj .pimg{position:relative;height:390px;border-radius:15px;overflow:hidden;background:var(--orange)}
.v1proj .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.v1proj a:hover .pimg img{transform:scale(1.03)}
.v1proj .plabel{position:absolute;left:21px;top:21px;background:#fff;color:#342B26;font:500 12px/1 var(--latin);padding:9px 12px;border-radius:3px}
.v1proj .parrow{position:absolute;right:21px;bottom:21px;width:51px;height:51px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:#fff;display:grid;place-items:center;font-size:18px}
.v1proj .pcap{position:absolute;left:21px;bottom:18px;background:#fff;color:var(--muted);font-size:12px;padding:3px 9px;border-radius:3px}
.v1proj .ptitle{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.v1proj .ptitle h3{font-size:21px}
.v1proj .ptitle span{color:var(--orange-t);font-size:15px;font-weight:500}
.v1proj p{font-size:15px}
@media (max-width:759px){.v1proj{grid-template-columns:1fr}.v1proj .pimg{height:270px}}

/* v1 CTA: full-bleed orange band, centred */
.cta{background:var(--orange);color:#fff;padding:0}
.cta .wrap{display:block;padding-block:0}
.cta .box{background:none;border-radius:0;padding:147px 0 150px;display:grid;justify-items:center;text-align:center;grid-template-columns:1fr;gap:0}
.cta .box::before{content:none}
.cta h2{color:#fff;font-size:clamp(36px,4.2vw,60px);line-height:1.1;max-width:18em}
.cta .d{justify-items:center;gap:0}
.cta p{color:#FFE1C8;font-size:15px;margin:21px 0 36px;max-width:40em}
.cta .actions{justify-content:center}
.cta .btn-white,.cta .btn-glass{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.65);color:#fff;backdrop-filter:blur(15px) saturate(1.3);-webkit-backdrop-filter:blur(15px) saturate(1.3)}
.cta .btn-white:hover,.cta .btn-glass:hover{background:rgba(255,255,255,.32);color:#fff}
.cta .lines{display:block;position:absolute;right:-60px;top:50%;height:130%;transform:translateY(-50%);opacity:.12}
.cta{position:relative;overflow:hidden}
.site-footer{padding-top:72px;border-top:0}

/* three layers: build up bottom-to-top, focus one layer on hover / click */
.layers .ly{transition:opacity .45s var(--ease),transform .8s var(--ease)}
html.js .layers .ill:not(.seen) .ly{opacity:0}
html.js .layers .ill:not(.seen) .ly1{transform:translateY(36px)}
html.js .layers .ill:not(.seen) .ly2{transform:translateY(60px)}
html.js .layers .ill:not(.seen) .ly3{transform:translateY(84px)}
.layers .ill.seen .ly2{transition-delay:.35s}.layers .ill.seen .ly3{transition-delay:.7s}  /* Konstra -> Glows -> Horizon */
.layers .ill.done .ly{transition-delay:0s!important;transition-duration:.3s}
.layers[data-on] .ly{opacity:.22}
.layers[data-on="1"] .ly1,.layers[data-on="2"] .ly2,.layers[data-on="3"] .ly3{opacity:1;transform:translateY(-6px)}
.layers .ly{cursor:pointer}
.layer-list>a.on .nm{color:var(--orange)}
.layer-list>a.on{background:rgba(254,80,0,.06)}
.layer-list>a.on::after,.layer-list>a:has(+a.on)::after{opacity:0}   /* the tinted row reads as one rounded panel: no rule lines touching it */
@media (prefers-reduced-motion:reduce){html.js .layers .ill:not(.seen) .ly{opacity:1;transform:none}}
/* v3.1 · icons are single colour everywhere */
.card .ic,.rows .ic,.need .ic,.svc-lines .ic,.pain .ic{color:var(--ink)}

.cta .lines{display:none!important}

/* ===== v3.2 · strict 12-column grid (1260 content = 1440 − 2×90, 12 cols, 24 gutter), 24px vertical rhythm ===== */
:root{--cols:12;--col-gap:24px}
@media (max-width:1101px){:root{--col-gap:24px}}
@media (max-width:759px){:root{--col-gap:12px}}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.c-1-6{grid-column:1/7}.c-7-12{grid-column:7/13}.c-8-12{grid-column:8/13}.c-1-12{grid-column:1/13}.c-1-5{grid-column:1/6}.c-1-7{grid-column:1/8}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
@media (max-width:981px){.g12>[class*="c-"],.g12>[class*="span-"]{grid-column:1/-1}}
/* section heading: title cols 1–6, lead cols 8–12 top-aligned with the h2 */
.sh{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:18px;align-items:start;margin-bottom:48px}
.sh .t{grid-column:1/7}
.sh .d{grid-column:8/13;padding-top:27px}
.sh.v1 .d{padding-top:27px}
.sh.stack .t,.sh.center .t{grid-column:1/-1}
@media (max-width:981px){.sh .t,.sh .d{grid-column:1/-1;padding-top:0}}
/* card grids snap to the 12-col gutters */
.grid{gap:var(--col-gap)}
.posts{column-gap:var(--col-gap);row-gap:36px}
.proj,.v1proj{gap:var(--col-gap)}
/* two-column layouts: cols 1–6 | 8–12 */
.split,.layers,.stp,.hero-grid,.hero-page .row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.split>.stick,.layers>.ill,.stp>.stp-l,.hero-page .row>div:first-child{grid-column:1/7}
.split>div:last-child,.layers>.layer-list,.stp>.stp-r,.hero-page .row>div:last-child{grid-column:8/13}
.hero-grid>.copy{grid-column:1/7}.hero-grid>.ill{grid-column:7/13}
@media (max-width:981px){.split>*,.layers>*,.stp>*,.hero-grid>*,.hero-page .row>*{grid-column:1/-1!important}}
/* list rows and tables keep hairline rules on the grid edges */
.ctable,.layer-list,.svc-lines,.faq{margin-inline:0}
/* designer check: add ?grid to any URL to see the 12 columns */
html.show-grid body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(90deg,rgba(254,80,0,.07) 0 calc((min(100vw,1440px) - 2*var(--gutter) - 11*var(--col-gap))/12),transparent 0 calc((min(100vw,1440px) - 2*var(--gutter) - 11*var(--col-gap))/12 + var(--col-gap)));
  background-origin:content-box;padding-inline:calc((100vw - min(100vw,1440px))/2 + var(--gutter));background-clip:content-box}
.brand-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding:48px 0}
.brand-row>.ill{grid-column:1/7;padding-inline:24px}
.brand-row>.body{grid-column:8/12}
.stats{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--col-gap)}
.stats.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats>div,.stats>div+div{padding:27px 0 9px;border-left:0}
.stats>div{border-top:1px solid var(--line)}
.stats{border-top:0}
@media (max-width:981px){.brand-row{padding:30px 24px}.brand-row>.ill,.brand-row>.body{grid-column:1/-1;padding-inline:0}}

/* ===== v3.3 · v1 footer, unified section headings, roomier sections ===== */
/* footer (v1) */
.site-footer.v1{background:#fff;border-top:1px solid var(--line);padding:72px 0 30px;font-size:15px}
.footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.footer-brand{grid-column:1/4;display:grid;gap:15px;align-content:start}
.footer-brand img{height:24px;width:auto}
.footer-tag{color:var(--body)}
.footer-cols{grid-column:5/7;display:grid;gap:9px;align-content:start}
.footer-addr{grid-column:span 3;display:grid;gap:9px;align-content:start;color:var(--body);line-height:1.8}
.footer-cols .ft-h,.footer-addr .ft-h{font:500 12px/1.4 var(--font);color:var(--muted);text-transform:none;margin:0 0 6px}
.footer-cols a{color:var(--ink)} .footer-cols a:hover,.footer-mail:hover{color:var(--orange)}
.footer-mail{color:var(--ink);border-bottom:1px solid var(--line);justify-self:start}
.footer-mid{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:21px;border-top:1px solid var(--line)}
.footer-iso{width:39px;height:39px;opacity:.8}
.footer-social{display:flex;gap:18px;align-items:center}
.footer-social a{display:inline-flex;width:21px;height:21px;align-items:center;justify-content:center}
.footer-social span{display:block;background:var(--ink);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.footer-social a:hover span{background:var(--orange)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:21px;padding-top:21px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.footer-legal{display:flex;gap:21px}
.footer-legal a:hover{color:var(--orange)}
@media (max-width:981px){.footer-brand,.footer-cols,.footer-addr{grid-column:1/-1;margin-bottom:24px}}
/* sections: roomier rhythm + hairline divider between same-colour sections */
:root{--sec:150px}
@media (max-width:1101px){:root{--sec:105px}}
@media (max-width:759px){:root{--sec:72px}}
.sec+.sec:not(.tint):not(.warm):not(.dark){border-top:0;position:relative}
.sec+.sec:not(.tint):not(.warm):not(.dark)::before{content:"";position:absolute;top:0;left:max(var(--gutter),calc((100vw - 1440px)/2 + var(--gutter)));right:max(var(--gutter),calc((100vw - 1440px)/2 + var(--gutter)));height:1px;background:var(--line)}
/* one heading system everywhere: eyebrow 12 · h2 36 · lead 15 — same size, same position */
main .sh{margin-bottom:60px}
main .sh .t{gap:18px}
main .sh h2,main .sh .h2{font-size:clamp(27px,2.5vw,36px)!important;line-height:1.35!important;font-weight:500!important;margin:0!important}
main .sh .lead,main .sh .d p{font-size:15px!important;line-height:1.8!important;color:var(--body)!important;max-width:none}
main .sh .d{padding-top:30px}
main .sh .eyebrow{font-size:12px!important}
.lead{font-size:15px;line-height:1.8}
.card p,.rows p,.steps p,.stp-card p,.post p{font-size:15px;line-height:1.75}
.card h3{font-size:18px}
/* cards are always open: nothing inside a card is collapsed */
.card details>summary{list-style:none;pointer-events:none}
.card details>summary::-webkit-details-marker{display:none}
/* ../compute/index.html atlas hero (v1) */
.atlas-hero{position:relative;background:#F3F2EF;height:600px;overflow:hidden}
.atlas-hero .ah-copy{position:relative;z-index:2;padding-top:66px;display:grid;gap:18px;max-width:480px}
.atlas-hero .globe-surface{top:120px;left:56%}
.atlas-hero .ah-foot{position:absolute;left:0;right:0;bottom:30px;z-index:2;display:flex;justify-content:space-between;align-items:end;font-size:12px;color:var(--muted)}
.atlas-hero .ah-foot .globe-note{position:static}
.atlas-hero .ah-foot>div{display:flex;gap:24px;align-items:center}
.atlas-hero .ah-foot button{background:none;border:0;border-bottom:1px solid currentColor;font-size:12px;color:var(--ink);cursor:pointer;padding:0 0 3px}
.finder.three{position:relative;z-index:4;margin:-42px auto 0;max-width:1101px;height:75px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.8));border:1px solid rgba(255,255,255,.9);box-shadow:0 21px 60px rgba(20,18,16,.1);padding:9px 9px 9px 27px;display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center}
.finder.three label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;font-size:12px;color:var(--muted);border-right:1px solid var(--line);padding:6px 18px}
.finder.three label:first-child{padding-left:0}
.finder.three label:nth-of-type(3){border-right:0}
.finder.three select{border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141210' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center;appearance:none;font:400 15px var(--font);color:var(--ink);width:100%;cursor:pointer}
.finder.three .btn{background:var(--ink);height:45px;margin-left:12px}
@media (max-width:981px){.atlas-hero{height:519px}.atlas-hero .globe-surface{left:50%}.finder.three{height:auto;border-radius:21px;grid-template-columns:1fr;margin:-30px 15px 0;padding:12px}.finder.three label,.finder.three label:first-child{border-right:0;border-bottom:1px solid var(--line);padding:9px 6px}.finder.three .btn{margin:9px 0 0;justify-content:center}}

/* v3.4: one section-head layout site-wide (stacked: eyebrow, title, description below) so long titles never collide */
main .sh:not(.v1){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:var(--col-gap);row-gap:18px;align-items:start;max-width:none}
main .sh:not(.v1) .t{grid-column:1/10!important}
main .sh:not(.v1) .d{grid-column:1/8!important;padding-top:0!important;justify-items:start;text-align:left}
main .sh:not(.v1) h2{white-space:normal!important;text-wrap:balance}
main .sh.center:not(.v1) .t,main .sh.center:not(.v1) .d{grid-column:3/11!important;justify-items:center;text-align:center}
@media (max-width:981px){main .sh:not(.v1) .t,main .sh:not(.v1) .d{grid-column:1/-1!important}}
/* FAQ: title left, questions right */
main .wrap:has(> .faq){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
main .wrap:has(> .faq)>*{grid-column:1/-1}
main .wrap:has(> .faq)>.sh{grid-column:1/5;margin-bottom:0;position:sticky;top:120px}
main .wrap:has(> .faq)>.sh .t,main .wrap:has(> .faq)>.sh .d{grid-column:1/-1!important}
main .wrap:has(> .faq)>.faq{grid-column:6/13}
main .wrap:has(> .faq)>.sh h2{font-size:27px!important}
.faq summary{font-size:15px;padding:27px 0}
.faq summary i{border:0;border-radius:0}
.faq summary i::before,.faq summary i::after{background:var(--orange);width:12px;height:2px}
@media (max-width:981px){main .wrap:has(> .faq)>.sh,main .wrap:has(> .faq)>.faq{grid-column:1/-1;position:static}main .wrap:has(> .faq)>.sh{margin-bottom:39px}}
main .wrap:has(> .faq)>.sh{align-self:start}