/* Brantone Veylor / Premium 2026 interaction system
   Motion design is progressive and honours reduced-motion. */
:root{--bv-champagne:#cbb48b;--bv-champagne-soft:#e0c9a0;--bv-night:#0b1725;--bv-deep:#142335}
html{scroll-behavior:smooth}
body{background:#f6f2e9}
body.premium-ready{--gold:#cbb48b}
body.premium-ready main{animation:premium-arrival .78s cubic-bezier(.22,.7,.2,1) both}
body.premium-leaving main,body.premium-leaving footer{opacity:0;transform:translateY(-18px);filter:blur(5px);transition:opacity .23s ease,transform .23s ease,filter .23s ease}
@keyframes premium-arrival{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:premium-out .24s ease both}
::view-transition-new(root){animation:premium-in .58s cubic-bezier(.22,.7,.2,1) both}
@keyframes premium-out{to{opacity:0;filter:blur(4px);transform:scale(.988)}}
@keyframes premium-in{from{opacity:0;filter:blur(5px);transform:scale(1.012)}to{opacity:1;filter:blur(0);transform:scale(1)}}
header{box-shadow:0 1px 0 rgba(18,28,43,.06);border-bottom-color:#ded8cb;transition:background .3s ease,box-shadow .3s ease}
header.scrolled{background:rgba(249,246,239,.96);box-shadow:0 14px 38px rgba(14,27,44,.10)}
.brand{transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .42s}
.brand:hover{transform:translateY(-2px) scale(1.012);filter:drop-shadow(0 7px 12px #6a3e2730)}
header nav a{padding:9px 0;transition:color .25s}
header nav a:before{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:#b19a72;transform:scaleX(0);transform-origin:left;transition:transform .36s cubic-bezier(.2,.8,.2,1)}
header nav a:hover:before,header nav a:focus-visible:before{transform:scaleX(1)}
header nav a.active{color:#8b3f47}
.lang,.menu{border-radius:3px;transition:background .25s,color .25s,transform .25s}
.lang:hover,.menu:hover{background:#ded4c15c;color:#802e3c;transform:translateY(-1px)}
.btn{position:relative;overflow:hidden;border-radius:2px;isolation:isolate;box-shadow:0 0 0 rgba(0,0,0,0);transition:color .32s,background .32s,border-color .32s,transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s}
.btn:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.22) 48%,transparent 70%);transform:translateX(-140%);transition:transform .68s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.btn:hover:before,.btn:focus-visible:before{transform:translateX(140%)}
.btn:hover{transform:translateY(-4px);box-shadow:0 15px 35px #0b17252b;border-color:#c4a97d}
.btn:active{transform:translateY(-1px) scale(.985);box-shadow:0 5px 12px #0b17251e}
.btn.primary:hover{background:#9f3740;border-color:#9f3740}
.text-link{transition:color .25s,border-color .25s,padding .25s}
.text-link:hover{color:#bb9b65;border-color:#bb9b65;padding-bottom:9px}
.card{transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s,border-color .42s,background .42s}
.card:hover,.card:focus-within{transform:translateY(-7px);border-top-color:#a8875b}
.card .num{transition:transform .3s,color .3s}
.card:hover .num{transform:translateX(7px);color:#ad8d62}
.feature{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .45s;box-shadow:0 0 0 transparent}
.feature:hover,.feature:focus-visible{transform:translateY(-7px);background:#1a344c;box-shadow:0 22px 50px #0b17252c}
.feature>span:last-child{transition:transform .35s}
.feature:hover>span:last-child{transform:translate(5px,-5px)}
.article-row{transition:padding .3s,background .3s}
.article-row:hover{padding-left:12px;background:linear-gradient(90deg,#e8e0d455,transparent)}
.hero{background:radial-gradient(ellipse at 85% 30%,#20364c,#0f1f30 65%)}
.hero>.visual:after{background:linear-gradient(90deg,#0d1c2df5 0%,#0d1c2dc9 22%,#0d1c2d55 70%),linear-gradient(0deg,#0d1c2d 0%,transparent 60%)}
.hero .eyebrow{color:#e8d7b6}
.hero h1{letter-spacing:-.055em;text-wrap:balance}
.hero h1 em{color:#e4c895}
.hero .btn.primary{background:#88303a}
.hero .text-link:hover{color:#e7c78e}
.hero .architecture-photo{filter:saturate(.6) contrast(1.07) brightness(.92)}
.inner-head{background:linear-gradient(117deg,#f7f3ec,#efe6d7 70%,#e4ddd0);box-shadow:inset 0 -1px 0 #cfc2a8}
.inner-head .eyebrow,.section-head .eyebrow{color:#906845}
.dark{background:linear-gradient(135deg,#0c192a,#172c3f 70%,#102236)}
.dark .section-head h2,.dark h2{color:#f4efe4}
.tags{gap:11px;margin:29px 0}
button.tag{appearance:none;display:inline-flex;align-items:center;min-height:45px;border:1px solid rgba(203,180,139,.45);background:#ffffff0b;color:#e3dcd0;letter-spacing:.045em;cursor:pointer;border-radius:2px;transition:background .3s,box-shadow .3s,border-color .3s,color .3s,transform .3s}
button.tag:hover,button.tag:focus-visible{transform:translateY(-3px);background:#cbb48b18;border-color:#e6c997;color:#fff6e8;box-shadow:0 9px 22px #050e1d55}
button.tag.is-active{background:#cbb48b;color:#172334;border-color:#cbb48b;box-shadow:0 10px 24px #0003;font-weight:700}
.graph.strategy-atlas{border:1px solid rgba(203,180,139,.44);background:radial-gradient(ellipse at 65% 15%,#2c44564f,transparent 65%),linear-gradient(145deg,#14283a,#0c1828 95%);position:relative;overflow:hidden;padding:33px 32px 25px;min-height:490px;box-shadow:0 25px 65px #050e1d2c;color:#f8f2e9}
.graph.strategy-atlas:before{content:'';position:absolute;inset:-65% -20% auto auto;width:300px;height:300px;border:1px solid #cbb48b13;border-radius:50%;box-shadow:0 0 0 46px #cbb48b08,0 0 0 92px #cbb48b04;pointer-events:none}
.atlas-eyebrow{display:flex;gap:9px;align-items:center;color:#d4bb91;font-size:10px;letter-spacing:.19em;font-weight:600}
.atlas-live-dot{width:6px;height:6px;border-radius:50%;background:#d6b882;box-shadow:0 0 0 4px #d6b88217}
.atlas-count{margin-left:auto;color:#8d9fb0;font-variant-numeric:tabular-nums}
.atlas-heading{font-family:'Playfair Display',Georgia,serif!important;font-size:clamp(22px,2vw,31px);line-height:1.22;color:#f6ecdd;margin:19px 0 4px}
.atlas-intro{color:#afbdc4!important;font-size:12px;line-height:1.7;margin:0 0 22px}
.atlas-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 20px}
.atlas-tab{display:flex;align-items:center;gap:7px;justify-content:center;text-align:center;min-width:0;min-height:49px;border:1px solid #d0b88938;color:#cdd5d8;background:transparent;padding:8px 5px;border-radius:2px;cursor:pointer;font-size:11px;line-height:1.2;transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s}
.atlas-tab-index{color:#b59b75;font-size:10px;font-variant-numeric:tabular-nums}
.atlas-tab:hover,.atlas-tab:focus-visible{border-color:#d7bd8c;background:#d7bd8c18;color:#fff;transform:translateY(-2px)}
.atlas-tab.is-active{background:#d1b887;color:#152335;border-color:#d1b887;box-shadow:0 6px 15px #0002;font-weight:700}
.atlas-tab.is-active .atlas-tab-index{color:#654d2e}
.atlas-stage-grid{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:19px;padding:10px 0 20px;border-bottom:1px solid #d1b88725}
.atlas-dial{position:relative;max-width:130px;aspect-ratio:1;display:grid;place-items:center}
.graph.strategy-atlas .atlas-orbit{width:100%;height:auto;filter:drop-shadow(0 1px 12px #d1b88712)}
.atlas-orbit-outline,.atlas-orbit-inner{fill:none;stroke:#cbb48b39;stroke-width:1;stroke-dasharray:2 6}
.atlas-orbit-inner{stroke:#cbb48b25}
.atlas-progress{fill:none;stroke:#ddc396;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:408 408;stroke-dashoffset:250;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .65s cubic-bezier(.2,.8,.2,1),transform .8s}
.strategy-atlas[data-current-step="0"] .atlas-progress{stroke-dashoffset:292}
.strategy-atlas[data-current-step="1"] .atlas-progress{stroke-dashoffset:205;transform:rotate(-120deg)}
.strategy-atlas[data-current-step="2"] .atlas-progress{stroke-dashoffset:115;transform:rotate(-155deg)}
.graph.strategy-atlas .atlas-crosshair{stroke:#d8c29b28;stroke-width:.7;stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.atlas-center{fill:#dbc295}
.atlas-dial-index{position:absolute;font-family:Georgia,serif;font-size:38px;line-height:1;color:#f0dfbf;font-variant-numeric:tabular-nums}
.atlas-kicker{font-size:9px;letter-spacing:.15em;color:#cfb68c;margin-bottom:8px}
.atlas-title{font:400 27px/1.18 'Playfair Display',Georgia,serif;color:#f7eedf;margin:0 0 12px}
.atlas-description{margin:0!important;color:#b9c5ca!important;font-size:11px;line-height:1.8}
.atlas-focus{padding-top:18px}
.atlas-focus-title{font-size:9px;letter-spacing:.15em;color:#ccbb9a}
.atlas-points{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.atlas-points li{display:flex;gap:13px;align-items:baseline;border-bottom:1px solid #dde7f30e;padding:5px 0;color:#e1e5e6;font-size:11px;line-height:1.5}
.atlas-points li span{font-size:9px;color:#c6aa79;font-variant-numeric:tabular-nums;flex:0 0 auto}
.atlas-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:18px}
.atlas-note{font-size:10px;color:#93a5b2;line-height:1.6}
.atlas-arrow{font-size:19px;color:#cbb48b;transition:transform .25s}
.strategy-atlas:hover .atlas-arrow{transform:translate(3px,-3px)}
.atlas-switch .atlas-stage-grid,.atlas-switch .atlas-points{animation:atlas-content-in .43s cubic-bezier(.22,.7,.2,1) both}
@keyframes atlas-content-in{from{opacity:.45;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d2b47d;outline-offset:4px}
.premium-skip:focus{left:12px!important;top:12px!important;z-index:101;background:#fff;padding:10px 15px}
@media(hover:none){.btn:active,.atlas-tab:active,button.tag:active{transform:scale(.975)}}
@media(max-width:1100px){.graph.strategy-atlas{padding:28px 24px 22px}.atlas-stage-grid{grid-template-columns:100px minmax(0,1fr);gap:15px}.atlas-title{font-size:23px}}
@media(max-width:760px){
 header{box-shadow:0 4px 28px #0d1b2813}
 .brand{max-width:205px}
 .hero{min-height:655px;padding-top:52px;padding-bottom:87px}
 .hero h1{font-size:clamp(41px,11vw,58px);line-height:1.11}
 .hero p{font-size:14px;max-width:345px;line-height:1.85}
 .hero>.visual{inset:18% -45% 0 0;opacity:.54}
 .inner-head h1{font-size:clamp(41px,10vw,54px);line-height:1.12;overflow-wrap:break-word}
 .inner-head:after{font-size:150px}
 .graph.strategy-atlas{padding:29px 24px 25px;min-height:0}
 .atlas-stage-grid{grid-template-columns:111px minmax(0,1fr)}
 .atlas-title{font-size:26px}
 .atlas-description{font-size:12px}
 .atlas-points li{font-size:12px}
 .tags{margin:25px 0 30px}
 nav.open{animation:menu-drop .35s ease both;background:rgba(247,244,237,.98);backdrop-filter:blur(16px)}
 nav.open a{border-bottom:1px solid #d6cbbd80}
}
@keyframes menu-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:380px){
 .graph.strategy-atlas{padding:23px 17px}
 .atlas-stage-grid{grid-template-columns:90px minmax(0,1fr);gap:11px}
 .atlas-title{font-size:21px}
 .atlas-tab{font-size:10px}
 .atlas-heading{font-size:23px}
 .hero h1{font-size:40px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 body.premium-ready main,body.premium-leaving main,body.premium-leaving footer,.atlas-switch .atlas-stage-grid,.atlas-switch .atlas-points,nav.open{animation:none!important;transition:none!important;filter:none!important;transform:none!important;opacity:1!important}
 .btn:before{display:none!important}
 .atlas-progress{transition:none!important}
}