/* Shared material system for Home, Brands and Creators.
   Static .glass-surface panels never lift on hover.
   Links, buttons, disclosure summaries and inputs own their interaction states.
   components.html is an independent historical design study. */
:root{
  --glass-fill:linear-gradient(135deg,rgba(255,255,255,.8),rgba(234,245,255,.48));
  --glass-edge:rgba(255,255,255,.86);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(67,112,176,.12),0 14px 34px -22px rgba(22,67,127,.38);
  --glass-filter:blur(20px) saturate(1.3);
  --glass-radius:22px;
  --glass-speed:220ms;
  --muted:#526986;
  --glass-deep-fill:linear-gradient(135deg,rgba(39,100,193,.86),rgba(9,48,112,.9));
  --glass-deep-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,22,61,.2),0 18px 38px -26px rgba(5,32,80,.55);
}
body{
  background:radial-gradient(ellipse at 3% 15%,rgba(123,181,250,.28),transparent 45%),radial-gradient(ellipse at 96% 60%,rgba(113,179,239,.24),transparent 44%),linear-gradient(130deg,#edf5ff,#e4effb 55%,#f7faff);
  background-attachment:fixed;
}
section,.path-section,.brand-journey,.origin,.case,.commercial,.faq-section{background:radial-gradient(ellipse at 8% 15%,rgba(155,198,249,.22),transparent 55%),radial-gradient(ellipse at 95% 85%,rgba(153,199,243,.2),transparent 55%),#edf4fc}
section{position:relative}
.glass-surface,.hero-proof>div,.next-steps>div,.channels>a,.channels>div{
  border:1px solid var(--glass-edge);
  border-radius:var(--glass-radius);
  background:var(--glass-fill);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-filter);
  backdrop-filter:var(--glass-filter);
  color:var(--text);
}
.glass-surface.glass-deep,.hero-proof>div,.next-steps>div,.channels>a,.channels>div{
  background:var(--glass-deep-fill);
  border-color:rgba(214,234,255,.36);
  box-shadow:var(--glass-deep-shadow);
  color:#fff;
}
.glass-deep p,.glass-deep span,.glass-deep .kicker,.hero-proof span,.channels span{color:#dfebfc}
.glass-deep .eco3-hub-sub{color:#dfebfc}
.glass-deep .num,.immersion-step b,.itinerary .immersion-step:last-child b{color:#c6defd}
.glass-surface p{line-height:1.65}
.kicker,.origin-step b,.brand-step .num,.case-story b{color:#526d92}
.glass-deep .kicker{color:#d4e6ff}
.disclaimer,.contact-note{color:#536b89;line-height:1.6}
.hero,.page-hero,.contact,.immersion,.footer{
  background:radial-gradient(ellipse at 85% 10%,rgba(75,140,233,.36),transparent 60%),linear-gradient(130deg,#0a2d64,#124b95);
  color:#fff;
}
.hero-overlay{background:linear-gradient(100deg,rgba(5,29,68,.95),rgba(8,44,96,.82) 56%,rgba(12,54,105,.5))}
.immersion-bg:after{background:linear-gradient(110deg,rgba(5,29,68,.94),rgba(10,48,100,.78))}
.navbar,.trust{
  background:rgba(236,246,255,.82);
  border-bottom:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);
}
.navbar{z-index:100}
.trust{background:rgba(247,251,255,.48)}
.hero-proof>div{flex:1;max-width:280px;min-width:150px}
.hero-proof strong{color:#fff}
.hero-path .hp-label{color:#486487}
.hero-path strong{color:var(--navy)}
.hero-path .hp-tags{color:#425d81}
.hero-path .hp-go{color:#0a49b0}
.brand-campaign-models{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.brand-campaign-model{padding:26px}
.brand-campaign-model h4{font-size:20px;line-height:1.3}
.brand-campaign-model p{font-size:14px}
.immersion-step{padding:24px}
.next-steps>div{padding:18px 20px}
.op{padding:20px;border:1px solid rgba(255,255,255,.8);border-radius:16px;background:rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.ops{gap:12px}
.op .num{color:#426c9d}
.value-card .icon,.path-card .icon,.chip,.eco3-hub li,.immersion-extra span{
  background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.chip.on{background:rgba(12,84,204,.1);border-color:rgba(12,84,204,.22);color:#154a96}
.case-gallery img,.log-gallery img,.hero-shots img{border:1px solid rgba(255,255,255,.65);border-radius:var(--glass-radius);box-shadow:var(--glass-shadow)}
.brand-overlay-label{background:rgba(9,48,112,.85);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(12px)}
/* Review placeholders are amber-tinted glass; text and dashes identify their status. */
.review-banner{padding:12px 20px;text-align:center;background:linear-gradient(120deg,rgba(255,240,196,.82),rgba(255,251,237,.65));border-bottom:1px solid rgba(172,118,26,.25);color:#63430b;font-size:12px;font-weight:700;line-height:1.6;backdrop-filter:blur(16px)}
.glass-surface.glass-pending{margin:20px 0;padding:24px;border:1px dashed #ac792a;background:linear-gradient(135deg,rgba(255,248,224,.88),rgba(255,241,200,.7));color:#543d19;min-width:0}
.placeholder-label{display:block;font-size:11px;letter-spacing:.08em;font-weight:800;color:#755113;margin-bottom:12px}
.glass-pending h3{font-size:20px;line-height:1.4;margin:0 0 10px;color:#543d19}
.glass-pending p,.glass-pending .kicker{font-size:14px;line-height:1.8;margin:0;color:#654b22;overflow-wrap:anywhere}
.glass-pending .kicker{font-size:11px}
.commission-card .big{font-size:clamp(28px,4vw,46px);line-height:1.08}
/* Action controls: one material, two emphasis levels, one movement rule. */
.btn,.nav-cta,.jump a,.lightbox-toolbar button,.close,.menu-btn{
  border:1px solid rgba(255,255,255,.8);border-radius:999px;
  background:var(--glass-fill);box-shadow:var(--glass-shadow);color:#123d7b;
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  transition:transform var(--glass-speed) ease,box-shadow var(--glass-speed) ease,background var(--glass-speed) ease,border-color var(--glass-speed) ease;
}
.btn.solid,.btn.primary,.nav-cta{background:linear-gradient(135deg,rgba(59,123,228,.94),rgba(12,71,173,.96));color:#fff;border-color:rgba(215,235,255,.6);box-shadow:var(--glass-deep-shadow)}
.btn.secondary,.btn.outline{background:var(--glass-fill);color:#123d7b}
.btn,.nav-cta{min-height:46px}
.jump a{color:#f0f6ff;background:rgba(214,235,255,.12);border-color:rgba(223,239,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.menu-btn{padding:8px 12px;min-height:44px;min-width:44px}
.lightbox-toolbar button{min-width:36px;min-height:36px}
.hero-path,.brand-wall-card,.channels a{transition:transform var(--glass-speed) ease,box-shadow var(--glass-speed) ease,border-color var(--glass-speed) ease}
/* Hover only for actionable elements on devices with a real pointer. */
@media(hover:hover) and (pointer:fine){
  :is(.btn,.nav-cta,.jump a,.lightbox-toolbar button,.close,.menu-btn):not(:disabled):hover{transform:translateY(-2px);border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 14px 28px -16px rgba(5,40,102,.55)}
  :is(a.hero-path,.brand-wall-card[role="button"],.channels a):hover{transform:translateY(-3px);border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 22px 40px -22px rgba(5,40,102,.5)}
  .faq summary:hover{background:rgba(255,255,255,.42)}
  .role-switch button:hover{color:#093a7e;background:rgba(255,255,255,.18)}
  .nav-links a:hover{color:#0a49b0}
  .footer-links a:hover{text-decoration:underline;text-underline-offset:5px}
}
:is(.btn,.nav-cta,.jump a,.lightbox-toolbar button,.close,.menu-btn,a.hero-path,.brand-wall-card[role="button"],.channels a):not(:disabled):active{transform:translateY(0) scale(.985)}
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #458aff;outline-offset:4px}
:is(.hero,.page-hero,.contact,.immersion,.footer) :is(a,button):focus-visible{outline-color:#93c9ff}
button:disabled{opacity:.5;cursor:not-allowed}
/* Fields brighten in place; panels around them stay still. */
.contact-panel{background:linear-gradient(135deg,rgba(248,252,255,.94),rgba(221,237,255,.88))}
.contact-panel label{color:#455f80}
.contact-panel input,.contact-panel select,.contact-panel textarea{
  background:rgba(255,255,255,.52);border:1px solid rgba(83,125,180,.28);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 2px 5px rgba(38,80,138,.025);
  color:#173c70;transition:background var(--glass-speed),border-color var(--glass-speed);
}
.contact-panel :is(input,select,textarea):focus{background:rgba(255,255,255,.84);border-color:#458aff}
.contact-panel input::placeholder,.contact-panel textarea::placeholder{color:#61758f;opacity:1}
.preview{background:rgba(255,255,255,.32);border:1px solid rgba(90,131,185,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);border-radius:14px}
.calc-result span,.calc-control label{color:#526986}
.calc-control input{cursor:pointer;min-height:32px}
/* Switch moves only its selected indicator. */
.role-switch{--switch-pad:4px;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,340px);padding:var(--switch-pad);gap:0;isolation:isolate;border:1px solid rgba(255,255,255,.85);border-radius:999px;background:rgba(198,220,250,.48);box-shadow:var(--glass-shadow)}
.role-switch::before{content:"";position:absolute;z-index:-1;top:var(--switch-pad);bottom:var(--switch-pad);left:var(--switch-pad);width:calc(50% - var(--switch-pad));border:1px solid #fff;border-radius:999px;background:var(--glass-fill);box-shadow:var(--glass-shadow);transition:transform 320ms cubic-bezier(.2,.85,.25,1)}
.role-switch:has(button[data-role="brand"][aria-selected="true"])::before{transform:translateX(100%)}
.role-switch button{position:relative;min-width:0;min-height:44px;padding:10px 12px;background:transparent;border:0;border-radius:999px;font-size:13px;color:#526986;transition:color var(--glass-speed),background var(--glass-speed)}
.role-switch button[aria-selected="true"]{background:transparent;color:#103d7b}
.role-switch button:focus-visible{outline-offset:-3px}
/* FAQ highlights the disclosure row, never the whole panel. */
.faq{display:grid;gap:12px;align-content:start}
.faq details{overflow:hidden}
.faq summary{padding:20px 52px 20px 22px;border-radius:21px;transition:background var(--glass-speed)}
.faq summary::after{right:22px;top:15px}
.faq details[open] summary{background:rgba(255,255,255,.32);border-radius:21px 21px 0 0}
.faq details p{padding:6px 22px 22px;margin:0}
.faq summary:focus-visible{outline-offset:-4px}
.lightbox{background:rgba(6,26,60,.7);backdrop-filter:blur(14px)}
.lightbox-stage{background:rgba(255,255,255,.45)}
.toast{background:var(--glass-deep-fill);border:1px solid rgba(255,255,255,.45);box-shadow:var(--glass-deep-shadow);backdrop-filter:blur(20px);max-width:calc(100vw - 32px);text-align:center}
@media(max-width:900px){
  .nav-links{background:rgba(236,246,255,.97);backdrop-filter:blur(20px);box-shadow:var(--glass-shadow)}
  .brand-campaign-models{grid-template-columns:1fr}
  .hero-overlay{background:linear-gradient(160deg,rgba(5,29,68,.94),rgba(8,44,96,.8))}
}
@media(max-width:600px){
  .glass-surface.glass-pending{padding:20px}
  .review-banner{font-size:11px}
  .hero-proof>div{max-width:none;min-width:0;flex:1 1 100%}
  .calc-head{align-items:flex-start;flex-direction:column}
  .calc-result{text-align:left}
  .channels>a,.channels>div{flex-wrap:wrap}
  .lightbox-toolbar{height:auto;min-height:76px;flex-wrap:wrap;gap:8px;padding:12px 56px 12px 14px}
  .lightbox-stage{max-height:calc(92vh - 90px);padding:10px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-surface,.contact-panel,.navbar,.nav-links{background:#edf5ff}
  .glass-surface.glass-deep,.hero-proof>div,.next-steps>div,.channels>a,.channels>div{background:#164f98}
  .glass-surface.glass-pending{background:#fff2d4}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  :is(.btn,.nav-cta,.jump a,.lightbox-toolbar button,.close,.menu-btn,a.hero-path,.brand-wall-card[role="button"],.channels a):is(:hover,:active){transform:none!important}
}

/* Editorial page layouts: photographs and supplied screenshots retain their full frame. */
section{padding-block:clamp(72px,7vw,108px)}
.section-head{align-items:center;gap:24px 64px}
.section-title{max-width:17ch;line-height:1.07}
.section-sub{line-height:1.68}
.hero{min-height:0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,2vw,36px);align-items:center;padding:clamp(48px,6vw,88px) 0;background:radial-gradient(circle at 78% 35%,#2b65ad 0,#124381 43%,#082d64 100%)}
.hero-content{width:auto;max-width:690px;margin:0 0 0 max(4vw,calc((100vw - 1400px)/2));padding:0}
.hero h1{font-size:clamp(46px,5.15vw,74px);max-width:11ch;line-height:.98;margin:14px 0 22px}
.hero p{font-size:18px;line-height:1.63;max-width:55ch}
.hero-media{position:relative;inset:auto;margin:0 max(4vw,calc((100vw - 1400px)/2)) 0 0;padding:12px;border:1px solid rgba(255,255,255,.45);border-radius:28px;background:rgba(255,255,255,.13);box-shadow:0 30px 60px -32px rgba(0,19,53,.65);backdrop-filter:blur(18px)}
.hero-media img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:18px}
.hero-media figcaption{padding:10px 6px 2px;font-size:11px;line-height:1.5;color:#dceafe}
.hero-overlay{display:none}
.hero-paths{max-width:none;gap:12px;margin-top:25px}
.hero-path{min-height:188px;padding:22px}
.hero-path strong{font-size:18px}
.hero-proof{margin-top:18px;gap:10px}
.hero-proof>div{min-width:0;max-width:none;flex:1 1 30%;padding:12px 14px}
.hero-proof strong{font-size:16px}
.hero-proof span{display:block;line-height:1.35;margin-top:4px}
.trust{padding:23px 0}
.trust-inner{justify-content:space-between}
.trust-logos{gap:20px 34px}
.eco3{margin-top:42px}
@media(min-width:901px){
  .eco3{grid-template-columns:minmax(0,1fr) 28px minmax(0,1.15fr) 28px minmax(0,1fr);align-items:stretch;gap:16px}
  .eco3-inputs{grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}
  .eco3 .node{display:flex;flex-direction:column;justify-content:center}
  .eco3-hub{height:100%}
  .eco3-arrow{align-items:center;justify-items:center}
  .eco3-arrow.in{grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}
}
.origin-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}
.origin-step{display:grid;grid-template-columns:minmax(0,43%) minmax(0,1fr);align-items:center;min-height:224px}
.origin-step img{width:100%;height:218px;aspect-ratio:auto;object-fit:contain;padding:12px;background:linear-gradient(140deg,rgba(202,226,255,.5),rgba(240,248,255,.5));border-radius:18px}
.origin-step div{padding:20px 22px}
.origin-note{margin-top:18px}
.case-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:clamp(24px,4vw,60px)}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:12px;align-items:start}
.case-gallery img{width:100%;height:auto;max-height:390px;object-fit:contain;padding:8px;background:linear-gradient(145deg,rgba(225,239,255,.7),rgba(249,252,255,.6));border-radius:18px}
.case-gallery img:first-child{grid-row:auto;grid-column:1/-1;max-height:none}
.page-hero{padding:clamp(62px,7vw,100px) 0;background:radial-gradient(circle at 85% 28%,#2864ae 0,#124481 45%,#082e65 100%)}
.page-hero-grid{width:min(1400px,92vw);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,3vw,44px)}
.page-hero h1{max-width:16ch;font-size:clamp(42px,4.4vw,64px)}
.page-hero p{line-height:1.68}
.hero-shots,.hero-shots.wide{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:none;min-width:0}
.hero-shots img,.hero-shots.wide img,.hero-shots.wide img:first-child,.hero-shots.wide img:nth-child(2){width:auto;max-width:calc(33.333% - 8px);height:auto;max-height:510px;aspect-ratio:auto;object-fit:contain;transform:none;padding:7px;border:1px solid rgba(255,255,255,.5);background:rgba(237,246,255,.11);border-radius:22px}
.hero-shots.wide img:first-child{max-width:62%}
.hero-shots.wide img:nth-child(2){max-width:34%}
.brand-journey .value-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.brand-value-card{min-height:185px}
.brand-process{gap:16px}
.brand-step{min-height:205px}
.market-access{align-items:stretch}
.market-hero{min-height:0}
.network-grid{margin-top:24px}
.immersion-cta{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center}
.immersion-cta .img{position:static;min-height:0;padding:18px 0 18px 18px}
.immersion-cta .img img{position:static;width:100%;height:auto;object-fit:contain;border-radius:16px}
.immersion-cta>div:last-child{padding:30px 34px}
.log-gallery{align-items:center}
.log-gallery img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;padding:6px;background:rgba(226,240,255,.6)}
.brand-wall-card{padding:12px}
.brand-wall-card img{border-radius:14px}
.brand-overlay-label{position:static;display:inline-block;margin:10px 4px 2px}
.immersion-bg{display:none}
.immersion{background:radial-gradient(circle at 80% 12%,#2d6cb5,#124582 48%,#082e64)}
.immersion-steps{margin-top:32px}
.contact-grid{gap:clamp(28px,5vw,70px)}
@media(max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:24px}
  .hero-content{margin-left:4vw}
  .hero-media{margin-right:4vw}
  .hero-paths{grid-template-columns:1fr}
  .hero-path{min-height:0}
  .hero-proof>div{flex:1 1 46%}
}
@media(max-width:900px){
  .hero,.page-hero-grid,.case-grid{grid-template-columns:1fr}
  .page-hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero{gap:32px}
  .hero-content{max-width:none;margin:0 4vw}
  .hero h1{max-width:14ch}
  .hero-media{margin:0 4vw}
  .hero-paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-proof>div{flex:1 1 30%}
  .hero-shots,.hero-shots.wide{max-width:min(760px,100%)}
  .case-gallery{max-width:720px}
  .brand-journey .value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .immersion-cta{grid-template-columns:1fr}
  .immersion-cta .img{padding:18px 18px 0}
  .immersion-cta .img img{max-height:360px}
}
@media(max-width:650px){
  .hero{padding:50px 0 40px}
  .hero h1{font-size:clamp(40px,11vw,58px)}
  .hero p{font-size:16px}
  .hero-paths,.origin-steps,.brand-journey .value-grid{grid-template-columns:1fr}
  .hero-proof{display:grid;grid-template-columns:1fr 1fr}
  .hero-proof>div{min-width:0}
  .hero-proof>div:last-child{grid-column:1/-1}
  .origin-step{grid-template-columns:minmax(0,38%) minmax(0,1fr);min-height:0}
  .origin-step img{height:190px}
  .origin-step div{padding:18px}
  .hero-shots img,.hero-shots.wide img,.hero-shots.wide img:first-child,.hero-shots.wide img:nth-child(2){max-height:270px}
  .hero-shots.wide img:first-child{max-width:62%}
  .hero-shots.wide img:nth-child(2){max-width:34%}
  .case-gallery img{max-height:300px}
  .brand-value-card{min-height:0}
  .page-hero h1{font-size:clamp(38px,10vw,48px);max-width:16ch}
  .page-hero p{font-size:16px}
  .jump{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;margin-right:-4vw;padding-right:4vw;padding-bottom:5px}
  .jump::-webkit-scrollbar{display:none}
  .jump a{flex:0 0 auto}
}
@media(max-width:420px){
  .origin-step{grid-template-columns:1fr}
  .origin-step img{height:240px}
  .hero-shots{gap:7px}
  .hero-shots img{padding:4px;border-radius:14px}
}