/*
 * quartz.lk — site styles
 * @author Uvin Vindula (IAMUVIN)
 * @website https://iamuvin.com
 *
 * Concept: rock and vein. Dark host rock (charnockite) frames every page;
 * milky vein quartz carries the content. Hi-vis orange marks actions only.
 * Chamfered corners echo the facets of a quartz crystal.
 */

@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif-4.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif-4-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --rock:#0F2238;
  --rock-2:#173150;
  --rock-line:rgb(238 243 249 / .16);
  --paper:#F5F7FA;
  --vein:#E8EEF4;
  --vein-2:#D5DFEA;
  --ink:#0F2238;
  --ink-2:#46586E;
  --line:rgb(15 34 56 / .16);
  --on-rock:#EEF3F9;
  --on-rock-2:#A7B6C8;
  --signal:#F7931A;
  --signal-2:#FFA940;
  --focus:var(--ink);
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --cut:14px;
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --pad:clamp(20px,4vw,48px);
  --section:clamp(48px,10vw,144px);
  --ease:cubic-bezier(.16,1,.3,1);
  --header:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;font-stretch:100%;font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--signal)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--signal);color:var(--ink)}
.on-rock{background:var(--rock);color:var(--on-rock);--focus:var(--signal);--line:var(--rock-line)}
.skip{position:absolute;left:-9999px;top:12px}
.skip:focus{left:16px;z-index:100;min-height:44px;display:inline-flex;align-items:center;background:var(--signal);color:var(--ink);padding:12px 16px;text-decoration:none;font-weight:600}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Type ---------- */
h1,h2,h3{margin:0;font-weight:450;line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
.display{font-size:clamp(2.5rem,1.1rem + 5.4vw,6.25rem);font-stretch:116%;line-height:.98;letter-spacing:-.028em}
.page-title{font-size:clamp(2.25rem,1.3rem + 3.8vw,4.75rem);font-stretch:114%;letter-spacing:-.025em;max-width:16ch}
.page-title--long{max-width:22ch;font-size:clamp(2rem,1.2rem + 3vw,4rem)}
h2{font-size:clamp(1.875rem,1.2rem + 2.4vw,3.25rem);font-stretch:110%;letter-spacing:-.022em}
h3{font-size:1.3125rem;font-stretch:100%;font-weight:600;line-height:1.25;letter-spacing:-.005em}
p{margin:0 0 1em;max-width:62ch;text-wrap:pretty}
.lead{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.5;color:var(--ink-2);max-width:54ch}
.on-rock .lead,.on-rock p{color:var(--on-rock-2)}
.quiet{color:var(--ink-2)}
.data{font-stretch:80%;font-variant-numeric:tabular-nums lining-nums}
sub{font-size:.7em;line-height:0;vertical-align:-.25em}
.note{font-size:.875rem;line-height:1.55;color:var(--ink-2);max-width:78ch}
.label{display:block;font-size:.875rem;font-stretch:88%;color:var(--ink-2);margin-bottom:14px}
.on-rock .label{color:var(--on-rock-2)}

.mt-m{margin-top:28px}
.mt-l{margin-top:40px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rock-line);view-transition-name:site-header}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:var(--header)}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:800;font-stretch:116%;font-size:1.75rem;line-height:1;letter-spacing:-.04em;color:var(--on-rock)}
.brand span{font-weight:350;letter-spacing:-.02em;color:var(--on-rock-2)}
@media (max-width:699px){.brand{font-size:1.5rem}}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;color:var(--on-rock-2);font-size:.9375rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-rock)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--signal)}
.nav .btn,.nav .btn:hover{margin-left:12px;padding:0 22px;color:var(--ink)}
.menu-btn{display:none;margin-left:auto;min-height:44px;min-width:44px;padding:0 14px;font:inherit;font-size:.9375rem;font-weight:600;color:var(--on-rock);background:none;border:1px solid var(--rock-line);cursor:pointer}
@media (max-width:1023px){
  .menu-btn{display:inline-flex;align-items:center}
  .nav{display:none;position:absolute;top:var(--header);left:0;right:0;height:calc(100dvh - var(--header));overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px var(--pad) 28px;background:var(--rock)}
  .nav.is-open{display:flex}
  .nav a{min-height:56px;padding:0;border-bottom:1px solid var(--rock-line);font-size:1.25rem;color:var(--on-rock)}
  body:has(.nav.is-open){overflow:hidden}
  .nav a[aria-current="page"]{box-shadow:none;color:var(--signal)}
  .nav .btn,.nav .btn:hover{margin:20px 0 0;padding:0 22px;border:0}
}

/* ---------- Buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;font:inherit;font-size:.9375rem;font-weight:600;font-stretch:104%;color:var(--ink);text-decoration:none;border:0;background:none;cursor:pointer;transition:transform .2s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--signal);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);transition:clip-path .2s var(--ease)}
.btn:hover{text-decoration:none}
.btn:hover::before{background:var(--signal-2)}
.btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:no-preference){
  .btn:is(:hover,:focus-visible)::before{clip-path:polygon(0 0,calc(100% - var(--cut) - 6px) 0,100% calc(var(--cut) + 6px),100% 100%,0 100%)}
}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.9375rem;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.35em}

/* ---------- Load sequence (hero and page intros only) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s var(--ease) both}
.rise.d1{animation-delay:.1s}
.rise.d2{animation-delay:.2s}

/* ---------- Hero ---------- */
.hero .wrap{display:grid;align-content:center;min-height:min(840px,calc(100svh - var(--header)));padding-block:clamp(48px,7vw,96px)}
.hero .wrap>div{max-width:760px}
.hero h1{max-width:12.5ch}
.hero .lead{margin-top:28px;max-width:44ch;color:var(--on-rock)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:40px}
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
/* Overlay dark only behind the text column, so the footage shows on the right */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--rock) 45%,transparent),color-mix(in srgb,var(--rock) 12%,transparent) 60%,transparent)}
/* A soft pool of rock behind the text block only; the rest of the footage stays bright */
@media (min-width:900px){
  .hero .wrap>div{position:relative}
  .hero .wrap>div::before{content:"";position:absolute;inset:-20% -30% -20% -50vw;z-index:-1;background:radial-gradient(closest-side at 55% 50%,color-mix(in srgb,var(--rock) 80%,transparent) 55%,color-mix(in srgb,var(--rock) 45%,transparent) 80%,transparent)}
}
.video-toggle{position:absolute;right:clamp(16px,4vw,48px);bottom:16px;min-height:44px;padding:0 16px;font:600 .875rem/1 var(--sans);color:var(--on-rock);background:color-mix(in srgb,var(--rock) 72%,transparent);border:1px solid var(--rock-line);cursor:pointer}
/* Phones: the footage is a clear band on top, the text sits on solid rock below it */
@media (max-width:899px){
  .hero-video{position:relative;display:block;height:38svh}
  .hero::before{inset:0 0 auto;height:38svh;background:linear-gradient(180deg,transparent 55%,var(--rock))}
  .hero .wrap{min-height:0;padding-block:8px 48px}
  .video-toggle{top:calc(38svh - 60px);bottom:auto}
}

/* ---------- Sections ---------- */
.section{padding-block:var(--section)}
.section--vein{background:var(--vein)}
.section-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:20px 64px;align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.section-head p{margin:0;color:var(--ink-2)}
.on-rock .section-head p{color:var(--on-rock-2)}
.section-head .text-link{justify-self:start}
@media (max-width:899px){.section-head{grid-template-columns:1fr}}
@media (max-width:699px){.section-head{margin-bottom:28px}}

.page-intro .wrap{padding-block:clamp(40px,8vw,120px) clamp(40px,6vw,96px)}
.page-intro .lead{margin-top:28px}

/* ---------- Value chain ---------- */
.chain{position:relative}
.chain .label{margin-left:40px}
.spine,.branch-list{list-style:none;margin:0;padding:0;position:relative}
.spine::before,.spine::after{content:"";position:absolute;left:6px;top:10px;bottom:0;width:2px;background:var(--line)}
.spine::after{background:var(--ink);transform-origin:top}
.stage{position:relative;padding:0 0 clamp(36px,5vw,56px) 40px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:6px 48px}
.stage::before{content:"";position:absolute;left:0;top:5px;width:14px;height:16px;background:var(--ink);clip-path:var(--hex);z-index:1}
.stage p{margin:0;color:var(--ink-2)}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,64px);position:relative;padding-top:36px}
.fork::before{content:"";position:absolute;top:0;left:6px;width:2px;height:36px;background:var(--ink)}
.fork::after{content:"";position:absolute;top:34px;left:7px;right:calc(50% - clamp(12px,2vw,32px) - 8px);border-top:2px dashed var(--ink)}
.branch{position:relative;padding-top:24px;--rail:linear-gradient(var(--ink),var(--ink));background:var(--rail) 6px 0/2px 24px no-repeat}
.branch--down{--rail:repeating-linear-gradient(var(--ink) 0 6px,transparent 6px 11px)}
.branch .label{margin:0;padding:0 0 14px 40px;background:var(--rail) 6px 0/2px 100% no-repeat}
.branch .stage{grid-template-columns:1fr;background:var(--rail) 6px 0/2px 100% no-repeat}
.branch .stage:last-child{background-size:2px 12px;padding-bottom:0}
.branch--down .stage::before{background:var(--ink)}
.branch--down .stage::after{content:"";position:absolute;left:3px;top:9px;width:8px;height:8px;background:var(--paper);clip-path:var(--hex);z-index:2}
.section--vein .branch--down .stage::after{background:var(--vein)}
@media (max-width:819px){
  .fork{grid-template-columns:1fr;padding-top:0}
  .fork::before,.fork::after{display:none}
  .branch{padding-top:0}
  .branch .label{padding-top:8px}
  .stage{grid-template-columns:1fr}
}
@supports ((animation-timeline:view()) and (animation-range:entry)){
  @media (prefers-reduced-motion:no-preference){
    .spine{view-timeline:--rail}
    .spine::after{animation:draw linear both;animation-timeline:--rail;animation-range:entry 35% cover 60%}
    /* Each node starts as an outline and fills as the rail reaches it (node positions measured at 390 and 1440) */
    .spine > .stage::after{content:"";position:absolute;left:3px;top:9px;width:8px;height:8px;background:var(--paper);clip-path:var(--hex);z-index:2;animation:fill-1 linear both;animation-timeline:--rail;animation-range:entry 35% cover 60%}
    .spine > .stage:nth-child(2)::after{animation-name:fill-2}
    .spine > .stage:nth-child(3)::after{animation-name:fill-3}
  }
}
@keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fill-1{0%{transform:none}4%,to{transform:scale(0)}}
@keyframes fill-2{0%,33%{transform:none}37%,to{transform:scale(0)}}
@keyframes fill-3{0%,63%{transform:none}67%,to{transform:scale(0)}}

/* ---------- Product forms ---------- */
.forms{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,2vw,24px)}
.form-panel{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:18px;padding:clamp(28px,4vw,52px)}
.form-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vein);clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%);transition:clip-path .2s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .form-panel:is(:hover,:has(:focus-visible))::before{clip-path:polygon(0 0,calc(100% - 38px) 0,100% 38px,100% 100%,0 100%)}
}
.section--vein .form-panel::before{background:var(--paper)}
.form-panel.on-rock{background:none}
.form-panel.on-rock::before{background:var(--rock)}
.form-panel h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-stretch:110%;font-weight:500;letter-spacing:-.015em}
.form-panel p{margin:0}
.panel-media{margin:0}
.panel-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.panel-media figcaption{margin-top:6px;font-size:.875rem;color:var(--ink-2)}
.on-rock .panel-media figcaption{color:var(--on-rock-2)}
.form-panel .text-link{margin-top:auto;align-self:start}
/* Photographs: square corners with the chamfer, plain-label captions */
.media{margin:24px 0 0}
.media img{display:block;width:100%;height:auto;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.media figcaption{margin-top:8px;font-family:var(--sans);font-size:.875rem;color:var(--ink-2)}
.media + .tags{margin-top:24px}
.media--inset{max-width:560px;margin:0 0 32px}
.prose .media{margin:0 0 32px}
.people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.people li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.people img{width:120px;height:120px;background:var(--paper);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.people h3{font-size:1.0625rem}
.people p{margin:4px 0 0;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:699px){.people{grid-template-columns:1fr}}
@supports ((animation-timeline:view()) and (animation-range:entry)){
  @media (prefers-reduced-motion:no-preference){
    .form-panel{view-timeline:--panel}
    .panel-media{animation:panel-rise var(--ease) both;animation-timeline:--panel;animation-range:entry 20% entry 90%}
  }
}
@keyframes panel-rise{from{opacity:0;transform:translateY(16px)}}
.specs{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin:0;font-size:.9375rem}
.specs dt{color:var(--ink-2);font-stretch:88%}
.on-rock .specs dt{color:var(--on-rock-2)}
.specs dd{margin:0}
.specs + .note{margin-top:24px}
@media (max-width:899px){.forms{grid-template-columns:1fr 1fr}}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:1rem;font-variant-numeric:tabular-nums lining-nums}
.table caption{text-align:left;font-size:.875rem;font-stretch:88%;color:var(--ink-2);padding-bottom:14px}
.table th,.table td{text-align:left;vertical-align:top;padding:18px 24px 18px 0;border-bottom:1px solid var(--line)}
.table thead th{font-weight:500;font-size:.875rem;font-stretch:88%;color:var(--ink-2);border-bottom-color:var(--ink)}
.table tbody th{font-weight:600;white-space:nowrap}
.table td:last-child,.table th:last-child{padding-right:0}
@media (max-width:699px){
  .table:not(.table--keep) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table:not(.table--keep) tr{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line)}
  .table:not(.table--keep) :is(th,td){padding:0;border:0}
  .table:not(.table--keep) td[data-label]::before{content:attr(data-label);display:block;font-size:.875rem;color:var(--ink-2)}
  .table tbody th{white-space:normal}
  .table--keep :is(th,td){padding:14px 16px 14px 0}
  .table--figures td:first-of-type{font-size:1.25rem;font-weight:600}
}

/* ---------- Figures ---------- */
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.figure{padding:28px 32px 0 0}
.figures + .note{margin-top:32px}
.figure + .figure{padding-left:32px;border-left:1px solid var(--line)}
.figure b{display:block;font-size:clamp(3rem,1.8rem + 4.4vw,6rem);font-stretch:66%;font-weight:300;line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.figure span{display:block;margin-top:14px;color:var(--ink-2);max-width:28ch}
.on-rock .figure span{color:var(--on-rock-2)}
@media (max-width:819px){
  .figures{grid-template-columns:1fr}
  .figure,.figure + .figure{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}
}

/* ---------- Lists ---------- */
.post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.post-list a{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:8px 48px;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none}
.post-list :is(h2,h3){font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);font-weight:500;font-stretch:104%;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.25em}
.post-list a:hover :is(h2,h3){text-decoration-color:var(--signal)}
.post-list p{margin:0;color:var(--ink-2)}
@media (max-width:819px){.post-list a{grid-template-columns:1fr}}

.uses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.uses li{padding:20px 0;border-top:1px solid var(--line)}
.uses h3{font-size:1.125rem;margin-bottom:4px}
.uses p{margin:0;color:var(--ink-2);font-size:1rem}
@media (max-width:699px){.uses{grid-template-columns:1fr}}

.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 12px;font-size:.875rem;background:var(--vein-2)}
.plain-list{margin:0;padding-left:1.2em;color:var(--ink-2)}
.plain-list li+li{margin-top:8px}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,6vw,96px)}
.split h2 + p{margin-top:24px}
@media (max-width:899px){.split{grid-template-columns:1fr}}

.statement{position:relative;isolation:isolate;padding:clamp(28px,4vw,56px)}
.statement::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rock);clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%)}
.statement h2{color:var(--on-rock);margin-bottom:20px}
.statement p{color:var(--on-rock-2);font-size:1.125rem}
.statement p:last-child{margin-bottom:0}

/* ---------- Process ---------- */
.steps{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:12px clamp(24px,4vw,64px);padding:clamp(32px,4vw,56px) 0;border-top:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step-num{font-size:clamp(3.5rem,2rem + 5vw,7.5rem);font-stretch:62%;font-weight:250;line-height:.78;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
.step :is(h2,h3){font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);font-stretch:108%;font-weight:450;line-height:1.05}
.step p{margin:0;color:var(--ink-2)}
.step .media{margin-top:8px}
@media (min-width:820px){.step .media{grid-column:2 / -1}}
@media (max-width:819px){.step{grid-template-columns:1fr}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .step-num{animation:ink linear both;animation-timeline:view();animation-range:entry 30% cover 42%}
  }
}
/* Un-inked numerals pass 3:1 as large text on paper: 60% ink-2 into vein-2 */
@keyframes ink{from{opacity:.55}to{opacity:1}}

/* ---------- Size planner ---------- */
.planner{position:relative;isolation:isolate;padding:clamp(28px,4vw,56px)}
.planner h2 + p{margin-top:14px}
.planner::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vein);clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%)}
.readout{display:block;margin-top:8px;font-size:clamp(2rem,1.4rem + 2.4vw,3.5rem);font-stretch:70%;font-weight:350;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.scale{position:relative;height:96px;margin-top:32px;--lo:25;--hi:75}
.scale-track{position:absolute;left:22px;right:22px;top:47px;height:2px;background:rgb(15 34 56 / .3)}
.scale-band{position:absolute;top:40px;height:16px;left:calc(22px + (100% - 44px) * var(--lo) / 100);right:calc(22px + (100% - 44px) * (100 - var(--hi)) / 100);background:var(--signal)}
.scale input{position:absolute;left:0;top:0;width:100%;height:96px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.scale input::-webkit-slider-runnable-track{height:96px;background:none;border:0}
.scale input::-moz-range-track{height:96px;background:none;border:0}
.scale input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:44px;height:64px;margin-top:16px;border:0;background:linear-gradient(to right,transparent 20px,var(--ink) 20px 24px,transparent 24px);cursor:ew-resize}
.scale input::-moz-range-thumb{pointer-events:auto;width:44px;height:64px;border:0;border-radius:0;background:linear-gradient(to right,transparent 20px,var(--ink) 20px 24px,transparent 24px);cursor:ew-resize}
.scale input:focus-visible{outline:none}
.scale input:focus-visible::-webkit-slider-thumb{background:linear-gradient(to right,transparent 18px,var(--ink) 18px 26px,transparent 26px)}
.scale input:focus-visible::-moz-range-thumb{background:linear-gradient(to right,transparent 18px,var(--ink) 18px 26px,transparent 26px)}
.ticks{position:relative;height:24px;margin:0 22px;font-size:.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ticks .t0{left:0;transform:none}.ticks .t1{left:25%}.ticks .t2{left:50%}.ticks .t3{left:75%}.ticks .t4{left:auto;right:0;transform:none}

/* ---------- FAQ ---------- */
.faq{border-bottom:1px solid var(--line);max-width:920px}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:24px 0;cursor:pointer;list-style:none;font-weight:600;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 0 28px;color:var(--ink-2);max-width:66ch}
.faq .answer p:last-child{margin-bottom:0}
/* ---------- Forms ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.field{display:grid;gap:8px;align-content:start}
.field--full{grid-column:1/-1}
.field label{font-size:.9375rem;font-weight:600}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid rgb(15 34 56 / .4);border-radius:0}
.field textarea{min-height:140px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.req{color:var(--ink-2);font-weight:400}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{grid-column:1/-1;display:none;padding:16px 20px;background:var(--rock);color:var(--on-rock)}
.form-status:target{display:block}
@media (max-width:699px){.form{grid-template-columns:1fr}.form .btn{width:100%}}
.specs a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Articles ---------- */
.article-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr) minmax(0,1fr);gap:32px clamp(32px,5vw,80px)}
.article-aside{font-size:.9375rem;color:var(--ink-2)}
.article-aside a{display:inline-flex;min-height:44px;align-items:center}
.prose{font-family:var(--serif);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.72;font-optical-sizing:auto}
.prose p{max-width:66ch}
.prose h2{font-family:var(--sans);font-size:clamp(1.5rem,1.3rem + .8vw,1.875rem);font-stretch:108%;margin:2.2em 0 .7em;line-height:1.15}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.25em;max-width:64ch;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.prose .table{font-family:var(--sans);font-size:.9375rem;margin:1.6em 0 2em}
.callout{position:relative;isolation:isolate;font-family:var(--sans);font-size:1rem;line-height:1.6;padding:26px 30px;margin:0 0 2.6em}
.callout::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vein);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.callout strong{display:block;margin-bottom:6px}
.callout p{margin:0;max-width:none}
.revision{font-family:var(--sans);font-size:.875rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:20px;margin-top:3em}
@media (max-width:899px){.article-grid{grid-template-columns:1fr}.article-aside{order:2}}

/* ---------- CTA ---------- */
.cta .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:end;padding-block:var(--section)}
.cta h2{max-width:14ch}
.cta p{margin:0}
.cta .actions{margin-top:28px}
@media (max-width:899px){.cta .wrap{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{padding-block:clamp(56px,7vw,88px) 28px;font-size:.9375rem;border-top:1px solid var(--rock-line)}
.footer-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:40px}
.footer-grid p{max-width:36ch}
.footer-grid h2{font-size:.9375rem;font-stretch:100%;font-weight:600;letter-spacing:0;color:var(--on-rock);margin-bottom:10px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;color:var(--on-rock-2)}
.footer-grid a:hover{color:var(--on-rock)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--rock-line);font-size:.875rem;color:var(--on-rock-2)}
.footer-base a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-rock-2)}
@media (max-width:899px){.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.footer-grid > div:first-child,.footer-grid > div:last-child{grid-column:1/-1}}
.footer-grid a[href^="https://wa.me"]{white-space:nowrap}

/* ---------- Page transitions ---------- */
@view-transition{navigation:auto}
@media (max-width:899px){@view-transition{navigation:none}}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:hex-reveal .5s var(--ease) both;mix-blend-mode:normal}
/* End hexagon: inradius 73.6vmax covers any viewport (half-diagonal is at most 70.7vmax) */
@keyframes hex-reveal{from{clip-path:polygon(50% calc(50% - 24px),calc(50% + 20.8px) calc(50% - 12px),calc(50% + 20.8px) calc(50% + 12px),50% calc(50% + 24px),calc(50% - 20.8px) calc(50% + 12px),calc(50% - 20.8px) calc(50% - 12px))}to{clip-path:polygon(50% calc(50% - 85vmax),calc(50% + 73.6vmax) calc(50% - 42.5vmax),calc(50% + 73.6vmax) calc(50% + 42.5vmax),50% calc(50% + 85vmax),calc(50% - 73.6vmax) calc(50% + 42.5vmax),calc(50% - 73.6vmax) calc(50% - 42.5vmax))}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Home: trust line, key facts, tiles, reasons ---------- */
.trust{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.9375rem;font-weight:600;color:var(--on-rock)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:8px;height:9px;background:var(--on-rock-2);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.facts{padding-block:clamp(32px,5vw,56px);border-bottom:1px solid var(--line)}
.facts dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px;margin:0}
.facts dt{font-size:clamp(1.375rem,1.1rem + 1vw,2rem);font-stretch:88%;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.facts dd{margin:8px 0 0;font-size:.9375rem;color:var(--ink-2)}
.facts .note{margin-top:24px}
.split--media{align-items:center}
.split--media .media{margin:0}
.app-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.app-tiles figure{margin:0}
.app-tiles img{display:block;width:100%;height:auto;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.app-tiles figcaption{margin-top:10px;font-weight:600}
.also{margin:24px 0 0;color:var(--ink-2);max-width:70ch}
.uses--pair{margin-top:32px}
.uses--pair>div{padding:20px 0;border-top:1px solid var(--line)}
.reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);margin:0}
.reasons>div{padding:20px 0;border-top:1px solid var(--line)}
.reasons dt{font-size:1.125rem;font-weight:600}
.reasons dd{margin:4px 0 0;color:var(--ink-2)}
.on-rock .reasons dd{color:var(--on-rock-2)}
.figures--stack{grid-template-columns:1fr}
.figures--stack .figure{padding:28px 0}
.figures--stack .figure+.figure{padding-left:0;border-left:0;border-top:1px solid var(--line)}
.post-list--thumbs a{grid-template-columns:clamp(96px,16vw,200px) minmax(0,1fr);gap:8px clamp(16px,3vw,40px);align-items:start}
.post-list--thumbs img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.post-list--thumbs p{margin-top:8px}
@media (max-width:899px){
  .facts dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ---------- Page intro with an image; image pairs ---------- */
.page-intro--media .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,5vw,80px);align-items:center}
.intro-media{margin:0}
.intro-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.intro-media figcaption{margin-top:8px;font-size:.875rem;color:var(--on-rock-2)}
.media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.media-pair .media{margin:0}
@media (max-width:899px){
  .page-intro--media .wrap{grid-template-columns:1fr}
  .intro-media img{aspect-ratio:16/9}
}
@media (max-width:699px){.media-pair{grid-template-columns:1fr}}

/* ---------- Phones: tighter home sections ---------- */
@media (max-width:699px){
  .stage{padding-bottom:24px}
  .stage p{font-size:.9375rem}
  .form-panel{padding:24px;gap:14px}
  .panel-media img{aspect-ratio:16/9}
  .reasons>div{padding:14px 0}
  .reasons dd{font-size:.9375rem}
  .table--keep :is(th,td){padding:10px 12px 10px 0}
  .post-list a{padding:20px 0}
  .post-list--thumbs p{font-size:.9375rem}
}

/* ---------- Shorter phones: the hero button stays on the first screen ---------- */
@media (max-width:899px){
  .hero .lead{margin-top:18px}
  .trust{margin-top:16px}
  .hero .actions{margin-top:24px}
}
@media (max-width:899px) and (max-height:820px){
  .hero-video,.hero::before{height:28svh}
  .video-toggle{top:calc(28svh - 60px)}
}

/* ---------- Phones: swipe rows, compact reasons, shorter header ---------- */
@media (max-width:699px){
  :root{--header:60px}
  .forms,.app-tiles,.people{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 4px;scrollbar-width:none}
  .forms::-webkit-scrollbar,.app-tiles::-webkit-scrollbar,.people::-webkit-scrollbar{display:none}
  .forms>.form-panel{flex:0 0 86%;scroll-snap-align:start}
  .app-tiles>li{flex:0 0 64%;scroll-snap-align:start}
  .people>li{flex:0 0 82%;scroll-snap-align:start;grid-template-columns:96px minmax(0,1fr);padding:12px;background:var(--paper)}
  .section--vein .people>li{background:var(--paper)}
  .people img{width:96px;height:96px}
  .app-tiles:focus-visible,.people:focus-visible{outline:2px solid var(--focus,var(--ink));outline-offset:4px}
  .reasons{grid-template-columns:1fr 1fr;gap:0 16px}
  .figures--stack{grid-template-columns:1fr 1fr;gap:0 16px}
  .figures--stack .figure{padding:20px 0}
  .figures--stack .figure+.figure{border-top:0}
  .figures--stack .figure b{font-size:2.75rem}
  .reasons dt{font-size:1rem}
  .reasons dd{font-size:.875rem}
}

/* ---------- Crystal toned into the rock, beside the "Why choose" heading ---------- */
.section-head--art{align-items:center}
.why-art{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:70% 50%;mix-blend-mode:luminosity;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.step .media + .media{margin-top:16px}

/* Tablet: image beside text instead of a full-width stack */
@media (min-width:700px) and (max-width:899px){.split--media{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- Home leadership: large portraits ---------- */
.people--large{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px clamp(24px,4vw,64px)}
.people--large li{display:block}
.people--large img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.people--large div{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.people--large h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.people--large p{margin-top:8px;font-size:1rem;max-width:26ch}
@media (max-width:899px){.people--large{gap:40px 20px}}
@media (max-width:699px){
  .people--large>li,.section--vein .people--large>li{flex:0 0 64%;display:block;padding:0;background:none}
  .people--large img{width:100%;height:auto}
}

/* ---------- Privacy notice and form privacy line ---------- */
.legal{max-width:72ch}
.legal h2{margin-top:48px;font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);font-stretch:104%}
.legal .note + h2{margin-top:24px}
.legal h2 + p,.legal h2 + ul{margin-top:14px}
.legal p,.legal li{color:var(--ink-2)}
.legal ul{padding-left:1.2em}
.legal li+li{margin-top:10px}
.legal strong{color:var(--ink);font-weight:600}
.form-privacy{margin:14px 0 0;font-size:.875rem;color:var(--ink-2)}

/* ---------- Articles: a quotable short answer first ---------- */
.prose .in-short{margin:0 0 32px;padding:4px 0 4px 18px;border-left:3px solid var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.prose .in-short strong{font-weight:700}

/* ---------- Chinese pages: system CJK fonts after Archivo, no negative tracking ---------- */
:lang(zh){--sans:"Archivo","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif}
:lang(zh) :is(h1,h2,h3,.display,.page-title){letter-spacing:0}
:lang(zh) .display{font-size:clamp(2.25rem,1rem + 5vw,5.25rem);line-height:1.15}