/* ============================================================
   ANHEVA — "screen-first" theme layer (loaded after styles.css)
   Direction: dark, photo-led, large thin uppercase display type,
   outlined pill buttons. Palette:
   Black #001219 (dark base) · Prussian Blue #005F73 (primary)
   Orange #EE9B00 (CTA / highlights) · Alabaster #F3EBD3 (light
   surfaces, text on dark) · White #FFFFFF
   ============================================================ */
:root{
  --night:#001219;
  --cyan:#0A9396; --aqua:#94D2BD; --wheat:#E9D8A6; --caramel:#CA6702; --rust:#BB3E03; --iron:#AE2012; --brownred:#9B2226;          /* ink black, page-dark base */
  --night-2:#005F73;
  --night-line:rgba(255,255,255,0.12);
  --teal:#005F73;
  --orange:#EE9B00;
  --grey:#505050;
  --light:#F3EBD3;
  --on-dark:#F3EBD3;
  --on-dark-soft:#9FB7B9;
  --font-display:"Geist","Inter",-apple-system,sans-serif;
  --font-body:"Geist","Inter",-apple-system,sans-serif;
  --font-mono:"Geist","Inter",-apple-system,sans-serif;
  --max:1240px;
}
body{font-family:var(--font-body);}
h1{font-weight:200; text-transform:uppercase; letter-spacing:0.01em; line-height:0.98; font-size:clamp(2.6rem,6.4vw,5.6rem);}
h2{font-weight:300; letter-spacing:-0.01em; line-height:1.12;}
h3{font-weight:500;}

/* label: red, uppercase, tracked — replaces the bracketed pill */
.eyebrow{background:none!important; border:none!important; padding:0; border-radius:0;
  color:var(--orange)!important; text-transform:uppercase; letter-spacing:0.22em; font-size:0.72rem; font-weight:600;}
.eyebrow::before,.eyebrow::after{content:none;}

/* buttons: pill, uppercase, tracked */
.btn{text-transform:uppercase; letter-spacing:0.16em; font-size:0.72rem; font-weight:600; padding:15px 28px;}
.btn:hover{transform:none; box-shadow:none;}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{background:#CA6702;}
.btn-outline{border-color:currentColor; color:var(--teal);}
.btn-outline:hover{background:var(--teal); border-color:var(--teal); color:#fff;}
.section-dark .btn-outline,.sec-night .btn-outline,.cta-band .btn-outline,.hero-photo .btn-outline{color:var(--on-dark); border-color:rgba(148,210,189,0.55);}
.section-dark .btn-outline:hover,.sec-night .btn-outline:hover,.cta-band .btn-outline:hover,.hero-photo .btn-outline:hover{background:var(--on-dark); color:var(--night); border-color:var(--on-dark);}
.btn-sm{padding:11px 20px; font-size:0.66rem;}
.arrow-circle{background:rgba(255,255,255,0.18)!important;}

/* cards: flat, square-ish, no sticky-note tilt */
.grid-2 .card{--sticky-bg:#FFFFFF!important; --sticky-rot:0deg!important;}
.card{background:#fff; border:1px solid #E6DFCB; border-radius:6px; transform:none!important; box-shadow:none;}
.card::after,.card::before{display:none!important;}
.card:hover{box-shadow:0 22px 40px -26px rgba(0,0,0,0.45); transform:translateY(-3px)!important; border-color:#C9BFA3;}
.card .icon{background:var(--light); color:var(--teal); border-radius:4px;}

/* ---------- header ---------- */
header.site{background:rgba(0,0,0,0.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:none; border-bottom:1px solid var(--night-line);}
nav.container{padding-top:14px; padding-bottom:14px; max-width:1360px;}
.brand-mark-full{height:38px;}
.nav-links{gap:4px; font-size:0.68rem;}
.nav-links > a,.nav-item > a{color:var(--on-dark); text-transform:uppercase; letter-spacing:0.2em; font-weight:500; padding:8px 12px; border-radius:0; background:none!important;}
.nav-links > a:hover,.nav-item > a:hover,.nav-links > a.active,.nav-item > a.active{color:#fff; background:none; box-shadow:inset 0 -2px 0 var(--orange);}
.nav-links a.caret::after{opacity:0.5;}
.nav-toggle span{background:var(--on-dark);}
/* mega dropdown */
.nav-drop{background:var(--night); border:1px solid var(--night-line); border-radius:0; box-shadow:0 30px 60px -20px rgba(0,0,0,0.6); padding:22px; min-width:240px; top:calc(100% + 8px);}
.nav-drop.mega{display:grid; grid-template-columns:repeat(3, minmax(190px,1fr)); gap:4px 26px; min-width:680px;}
.nav-drop a{color:var(--on-dark); font-size:0.84rem; font-weight:400; text-transform:none; letter-spacing:0; padding:8px 10px; border-radius:0;}
.nav-drop a:hover,.nav-drop a.active{background:rgba(255,255,255,0.06); color:#fff; box-shadow:inset 2px 0 0 var(--orange);}
.nav-drop a small{color:var(--on-dark-soft);}
.nav-group{display:block; color:var(--orange); text-transform:uppercase; letter-spacing:0.2em; font-size:0.62rem; font-weight:600; padding:4px 10px 8px; border-bottom:1px solid var(--night-line); margin-bottom:6px;}
.nav-col{display:flex; flex-direction:column;}
@media (max-width:1100px){ .nav-links{gap:0;} .nav-links > a,.nav-item > a{padding:8px 8px; letter-spacing:0.14em;} }
@media (max-width:980px){
  .nav-links{position:fixed; inset:66px 0 auto 0; background:var(--night); flex-direction:column; align-items:stretch; padding:8px 24px 24px; max-height:calc(100vh - 66px); overflow:auto;
    border-bottom:1px solid var(--night-line); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;}
  .nav-links.open{transform:none; opacity:1; pointer-events:auto;}
  .nav-links > a,.nav-item > a{padding:14px 0!important; width:100%; border-bottom:1px solid var(--night-line); box-shadow:none!important;}
  .nav-item{width:100%; position:static;}
  .nav-drop,.nav-drop.mega{position:static; opacity:1; visibility:visible; transform:none; display:block; min-width:0; border:none; box-shadow:none; padding:6px 0 10px 12px; background:none;}
  .nav-group{border:none; padding:10px 10px 2px; margin:0;}
  .nav-toggle{display:block;}
  .nav-actions .btn{display:none;}
}

/* ---------- dark sections & heroes ---------- */
.section-dark{background:radial-gradient(120% 90% at 85% 0%, #005F73 0%, var(--night) 60%) !important; color:var(--on-dark);}
.section-dark p,.sec-night p{color:var(--on-dark-soft);}
.section-dark .lead{color:var(--on-dark);}
.particle-canvas{opacity:0.55;}
.hero{padding:120px 0 72px;}

.hero-photo{position:relative; min-height:min(92vh,880px); display:flex; align-items:flex-end; color:var(--on-dark); overflow:hidden; background:var(--night);}
.hero-photo .hp-bg{position:absolute; inset:0; background-image:var(--photo); background-size:cover; background-position:center; transform:scale(1.06); animation:hp-zoom 22s ease-out forwards;}
.hero-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.92) 100%), linear-gradient(90deg, rgba(0,0,0,0.7), rgba(0,0,0,0) 70%);}
.hero-photo .container{position:relative; z-index:2; width:100%; padding-bottom:80px;}
.hero-photo h1{color:#fff; max-width:14ch; margin-bottom:22px;}
.hero-photo .tagline{color:var(--on-dark); text-transform:uppercase; letter-spacing:0.26em; font-size:0.78rem; font-weight:500; margin:0 0 26px;}
.hero-photo .lead{color:var(--on-dark); max-width:58ch; font-size:1.08rem;}
.hero-photo.short{min-height:min(70vh,640px);}
.crumbs{font-size:0.7rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--on-dark-soft); margin-bottom:18px;}
.crumbs a{color:var(--on-dark-soft); text-decoration:none;} .crumbs a:hover{color:#fff;}
.scroll-cue{position:absolute; z-index:2; left:50%; bottom:26px; width:1px; height:46px; background:linear-gradient(var(--on-dark),transparent); animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top;}50%{transform:scaleY(1); transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0); transform-origin:bottom;}}
@keyframes hp-zoom{to{transform:scale(1);}}

.sec-night{background:var(--night); color:var(--on-dark);}
.sec-night h2,.sec-night h3,.sec-night .display{color:#fff;}
.sec-stone{background:radial-gradient(60% 50% at 10% 0%, rgba(0,95,115,0.10), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(238,155,0,0.07), transparent 70%), var(--night-2); color:var(--on-dark);}
.sec-stone h2,.sec-stone h3{color:#fff;} .sec-stone p{color:var(--on-dark-soft);}
.sec-light{background:linear-gradient(155deg,#FFFFFF,#F3EBD3 55%,#F3EBD3);}
.display{font-family:var(--font-display); font-weight:200; text-transform:uppercase; font-size:clamp(2.6rem,7vw,6rem); line-height:0.95; letter-spacing:0.01em; margin:0 0 0.3em;}
.display em{font-style:normal; color:var(--orange);}
.kicker{font-size:clamp(1.3rem,2.2vw,1.85rem); font-weight:300; line-height:1.3; color:inherit; max-width:34ch;}

/* image + text focus block */
.focus{display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;}
.focus-media{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:4px;}
.focus-media img{width:100%; height:100%; object-fit:cover;}
.focus-media .tag{position:absolute; left:18px; bottom:18px; background:rgba(0,0,0,0.8); color:#fff; font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; padding:8px 12px;}
@media (max-width:860px){.focus{grid-template-columns:1fr; gap:32px;} .focus-media{aspect-ratio:16/11;}}

/* full-bleed image band with big type */
.bigband{position:relative; min-height:76vh; display:flex; align-items:center; overflow:hidden; color:#fff;}
.bigband img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.bigband::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.88), rgba(0,0,0,0.25));}
.bigband .container{position:relative; z-index:2; width:100%;}
.bigband .display{color:#fff;}
.bigband p{color:var(--on-dark); max-width:46ch; font-size:1.1rem;}

/* solution cards (photo + panel) */
.sol-list{display:flex; flex-direction:column; gap:28px;}
.sol-card{display:grid; grid-template-columns:1.25fr 1fr; background:rgba(255,255,255,0.03); border:1px solid var(--night-line); min-height:380px; text-decoration:none; color:inherit; overflow:hidden; transition:border-color .2s, background .2s;}
.sol-card:hover{border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.05);}
.sol-card .sol-media{position:relative; overflow:hidden;}
.sol-card .sol-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.sol-card:hover .sol-media img{transform:scale(1.04);}
.sol-card .sol-body{padding:44px 44px 40px; display:flex; flex-direction:column; justify-content:center;}
.sol-card h3{color:#fff; font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:300; margin:6px 0 14px;}
.sol-card p{color:var(--on-dark-soft);}
.sol-card ul{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-wrap:wrap; gap:8px;}
.sol-card li{font-size:0.74rem; color:var(--on-dark); border:1px solid var(--night-line); padding:5px 10px; border-radius:999px;}
.sol-card .btn{align-self:flex-start;}
.sol-list .sol-card:nth-child(even){grid-template-columns:1fr 1.25fr;}
.sol-list .sol-card:nth-child(even) .sol-media{order:2;}
@media (max-width:860px){.sol-card,.sol-list .sol-card:nth-child(even){grid-template-columns:1fr;} .sol-card .sol-media{aspect-ratio:16/10; order:0!important;} .sol-card .sol-body{padding:28px 24px;}}

/* sub-solution rows on area pages */
.subsol{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:56px 0; border-top:1px solid #E6DFCB; scroll-margin-top:90px;}
.subsol:first-of-type{border-top:none;}
.subsol:nth-of-type(even) .subsol-media{order:2;}
.subsol-media{aspect-ratio:4/3; overflow:hidden; border-radius:4px; background:var(--light);}
.subsol-media img{width:100%; height:100%; object-fit:cover;}
.subsol .num{font-size:0.72rem; letter-spacing:0.22em; color:var(--orange); font-weight:600;}
.subsol h3{font-size:clamp(1.6rem,2.6vw,2.3rem); font-weight:300; margin:10px 0 14px;}
.subsol ul{padding:0; margin:18px 0 0; list-style:none; display:grid; gap:10px;}
.subsol li{padding-left:22px; position:relative; color:var(--grey);}
.subsol li::before{content:""; position:absolute; left:0; top:0.62em; width:10px; height:2px; background:var(--orange);}
.sec-night .subsol{border-color:var(--night-line);} .sec-night .subsol li{color:var(--on-dark-soft);}
@media (max-width:860px){.subsol{grid-template-columns:1fr; gap:24px; padding:40px 0;} .subsol:nth-of-type(even) .subsol-media{order:0;}}

/* in-page sub-nav chips */
.subnav{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.subnav a{font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--on-dark); text-decoration:none; border:1px solid rgba(148,210,189,0.35); padding:9px 14px; border-radius:999px;}
.subnav a:hover{background:var(--on-dark); color:var(--night);}

/* tiles grid (hub / channels) */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.tile{position:relative; aspect-ratio:4/5; overflow:hidden; color:#fff; text-decoration:none; display:flex; align-items:flex-end; border-radius:4px; background:var(--night);}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; opacity:0.85;}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.92));}
.tile:hover img{transform:scale(1.05);}
.tile .tile-body{position:relative; z-index:2; padding:26px;}
.tile .eyebrow{margin-bottom:8px;}
.tile h3{color:#fff; font-weight:300; font-size:1.5rem; margin:0 0 8px;}
.tile p{color:var(--on-dark-soft); font-size:0.92rem; margin:0;}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.tiles{grid-template-columns:1fr;} .tile{aspect-ratio:4/3;}}

/* channel list (compact cards with photo) */
.chan{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.chan .c{background:#fff; border:1px solid #E6DFCB; border-radius:4px; overflow:hidden;}
.chan .c img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.chan .c div{padding:18px 18px 20px;}
.chan .c h3{font-size:1.02rem; margin:0 0 6px;}
.chan .c p{font-size:0.9rem; margin:0;}
@media (max-width:1000px){.chan{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.chan{grid-template-columns:1fr;}}

/* feature grid (6 blocks, light) */
.feat{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #DAD2BC; border-left:1px solid #DAD2BC;}
.feat > div{padding:34px 30px; border-right:1px solid #DAD2BC; border-bottom:1px solid #DAD2BC;}
.feat .n{font-size:0.7rem; letter-spacing:0.22em; color:var(--orange); font-weight:600;}
.feat h3{font-weight:400; font-size:1.25rem; margin:12px 0 10px;}
.feat p{margin:0; font-size:0.95rem;}
.sec-night .feat,.sec-night .feat > div,.sec-stone .feat,.sec-stone .feat > div{border-color:var(--night-line);}
@media (max-width:900px){.feat{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.feat{grid-template-columns:1fr;}}

/* use-case rail */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,32%); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; scrollbar-width:thin;}
.rail > *{scroll-snap-align:start;}
.rail .story{background:rgba(255,255,255,0.04); border:1px solid var(--night-line); text-decoration:none; color:inherit;}
.rail .story img{width:100%; aspect-ratio:16/11; object-fit:cover;}
.rail .story div{padding:22px 22px 26px;}
.rail .story h3{color:#fff; font-weight:400; font-size:1.15rem; margin:8px 0;}
.rail .story p{font-size:0.92rem; margin:0;}
@media (max-width:640px){.rail{grid-auto-columns:84%;}}

/* content-panel mockup */
.panel-mock{background:#fff; border:1px solid #DAD2BC; border-radius:10px; box-shadow:0 40px 80px -40px rgba(0,0,0,0.45); overflow:hidden; font-size:12px; color:#1C1C1C;}
.pm-top{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--night); color:#fff;}
.pm-top i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.25); display:block;}
.pm-top b{margin-left:8px; font-weight:600; letter-spacing:0.12em; font-size:10px; text-transform:uppercase;}
.pm-top span{margin-left:auto; font-size:10px; color:#9FB7B9;}
.pm-body{display:grid; grid-template-columns:130px 1fr;}
.pm-side{background:#FAF6EC; border-right:1px solid #E6DFCB; padding:12px 8px; display:flex; flex-direction:column; gap:4px;}
.pm-side span{padding:7px 9px; border-radius:4px; color:#505050;}
.pm-side span.on{background:#005F73; color:#fff;}
.pm-main{padding:14px; display:grid; gap:12px;}
.pm-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.pm-screen{border:1px solid #E6DFCB; border-radius:6px; padding:8px; position:relative;}
.pm-screen .thumb{aspect-ratio:16/9; border-radius:3px; background-size:cover; background-position:center; margin-bottom:6px;}
.pm-screen .st{display:flex; align-items:center; gap:5px; color:#505050; font-size:10px;}
.pm-screen .st::before{content:""; width:6px; height:6px; border-radius:50%; background:#005F73;}
.pm-screen.off .st::before{background:#EE9B00;}
.pm-tl{border:1px solid #E6DFCB; border-radius:6px; padding:10px;}
.pm-tl .h{display:flex; justify-content:space-between; color:#505050; font-size:10px; margin-bottom:8px;}
.pm-track{position:relative; height:18px; background:#F3EBD3; border-radius:3px; margin-bottom:6px;}
.pm-track i{position:absolute; top:2px; bottom:2px; border-radius:2px; display:block;}
.pm-track .now{position:absolute; top:-4px; bottom:-4px; width:2px; background:#EE9B00; left:58%; animation:pm-now 8s linear infinite;}
@keyframes pm-now{from{left:8%;} to{left:92%;}}
@media (max-width:640px){.pm-body{grid-template-columns:1fr;} .pm-side{display:none;} .pm-row{grid-template-columns:repeat(2,1fr);}}

/* stat strip */
.statline{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--night-line);}
.statline div{padding:26px 22px 4px 0;}
.statline b{display:block; font-weight:200; font-size:clamp(2rem,3.6vw,3rem); color:#fff; line-height:1;}
.statline span{display:block; color:var(--on-dark-soft); font-size:0.85rem; margin-top:8px;}
@media (max-width:700px){.statline{grid-template-columns:1fr 1fr;}}

/* cta band */
.cta-band{background:linear-gradient(120deg, var(--teal), var(--night)) !important; border-radius:4px; position:relative; overflow:hidden;}
.cta-band h2{font-weight:200; text-transform:uppercase; font-size:clamp(1.9rem,4vw,3.2rem); letter-spacing:0.01em;}
.cta-band p{color:var(--on-dark-soft);}

/* faq on light */
.faq-q{font-weight:400; font-size:1.08rem;}

/* ---------- footer ---------- */
footer.site{background:var(--night); color:var(--on-dark); border-top:none; padding:72px 0 30px;}
footer.site .footer-grid{gap:56px;}
footer.site .footer-cols{display:grid; grid-template-columns:repeat(5,minmax(120px,auto)); gap:36px;}
.footer-col-title{color:var(--orange)!important; text-transform:uppercase; letter-spacing:0.2em; font-size:0.64rem!important; font-weight:600;}
footer.site .footer-col a{color:var(--on-dark-soft);}
footer.site .footer-col a:hover{color:#fff;}
footer.site .footer-note{color:var(--on-dark-soft); border-top:1px solid var(--night-line); padding-top:22px; margin-top:48px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.footer-about{max-width:300px; color:var(--on-dark-soft); font-size:0.9rem; margin-top:18px;}
.footer-social{display:flex; gap:10px; margin-top:18px;}
.footer-social a{width:36px; height:36px; border:1px solid var(--night-line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--on-dark);}
.footer-social a:hover{border-color:var(--on-dark);}
@media (max-width:1000px){footer.site .footer-cols{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){footer.site .footer-cols{grid-template-columns:1fr 1fr;}}

.photo-credit{font-size:0.66rem; color:var(--on-dark-soft); opacity:0.7;}
@media (prefers-reduced-motion: reduce){.hero-photo .hp-bg,.scroll-cue,.pm-track .now{animation:none;}}
.sec-stone .btn-outline,.sol-card .btn-outline,.sec-night .btn-outline{color:var(--on-dark); border-color:rgba(148,210,189,0.55);}
.sol-card:hover .btn-outline{background:var(--on-dark); color:var(--night); border-color:var(--on-dark);}
.statline b{font-size:clamp(1.5rem,2.6vw,2.4rem);}
.tiles.five{grid-template-columns:repeat(5,1fr); gap:14px;}
.tiles.five .tile{aspect-ratio:3/4;} .tiles.five .tile h3{font-size:1.2rem;} .tiles.five .tile-body{padding:20px;}
@media (max-width:1000px){.tiles.five{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.tiles.five{grid-template-columns:1fr 1fr;} .tiles.five .tile{aspect-ratio:3/4;}}
.rail .story .eyebrow{margin-bottom:0;}
@media (max-width:980px){ .nav-links a{border-bottom-color:var(--night-line)!important;} .nav-item > a.caret{width:100%;} }


/* ============================================================
   Palette roles (ink / teal / cyan / aqua / wheat / orange / spice)
   ============================================================ */
:root{ --ink-dark:#001219; --gold-text:#BB3E03; }
/* labels: rusty spice on light surfaces, golden orange on dark surfaces */
.eyebrow{color:var(--teal)!important;}
.section-dark .eyebrow,.sec-night .eyebrow,.sec-stone .eyebrow,.hero-photo .eyebrow,.tile .eyebrow,.sol-card .eyebrow,
.bigband .eyebrow,.cta-band .eyebrow,.rail .eyebrow,footer.site .eyebrow{color:var(--orange)!important;}
.feat .n,.subsol .num{color:var(--teal);} .subsol li::before{background:var(--teal);}
.sec-night .feat .n,.sec-stone .feat .n,.sec-night .subsol .num{color:var(--orange);}
/* primary button: golden orange with ink-black text everywhere */
.btn-primary,.section-dark .btn-primary,.cta-band .btn-primary,.hero-photo .btn-primary{background:var(--orange)!important; color:var(--ink-dark)!important;}
.btn-primary:hover,.section-dark .btn-primary:hover,.cta-band .btn-primary:hover,.hero-photo .btn-primary:hover{background:#CA6702!important; box-shadow:0 12px 28px -12px rgba(238,155,0,0.65)!important;}
.btn-primary .arrow-circle{background:rgba(0,0,0,0.12)!important;} .btn-primary .arrow-circle svg{stroke:var(--ink-dark);}
.btn-outline{color:var(--teal);} .btn-outline:hover{background:var(--teal); border-color:var(--teal); color:var(--light);}
/* dark cyan as the secondary accent */
.card .icon{background:#F3EBD3; color:var(--teal);}
.step-big .digit{color:#F3EBD3; -webkit-text-stroke:1.5px var(--teal);}
.sec-night .step-big .digit{color:transparent; -webkit-text-stroke:1.2px var(--orange);}
a[style*="accent-dark"]{color:var(--teal)!important;}
.sol-card li{border-color:rgba(0,95,115,0.6);} 
.sec-light{background:linear-gradient(155deg,#FFFFFF,#F3EBD3 55%,#F3EBD3);}
.pm-screen.off .st::before{background:var(--teal);} .pm-track .now{background:var(--teal);}
.nav-links > a:hover,.nav-item > a:hover,.nav-links > a.active,.nav-item > a.active{box-shadow:inset 0 -2px 0 var(--orange);}
.nav-drop a:hover,.nav-drop a.active{box-shadow:inset 2px 0 0 var(--orange);}
.section-dark{background:radial-gradient(120% 90% at 85% 0%, #005F73 0%, var(--night) 62%) !important;}
.cta-band{background:linear-gradient(120deg, var(--teal), var(--night)) !important;}
.cta-band::before{content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%; border:40px solid rgba(238,155,0,0.10);}
.cta-band::after{content:""; position:absolute; left:-60px; bottom:-90px; width:220px; height:220px; border-radius:50%; background:rgba(0,95,115,0.35); filter:blur(30px);}
.cta-band > *{position:relative; z-index:1;}

/* ============================================================
   Motion layer (paired with anim.js)
   ============================================================ */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:200; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--teal), var(--orange)); pointer-events:none;}
header.site{transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s ease;}
header.site.is-hidden{transform:translateY(-100%);}
header.site.is-compact nav.container{padding-top:9px; padding-bottom:9px;}
header.site nav.container{transition:padding .3s ease;}

.to-top{position:fixed; right:22px; bottom:22px; z-index:120; width:48px; height:48px; border:none; border-radius:50%; cursor:pointer;
  background:var(--night); color:var(--orange); padding:2px; opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity .3s, transform .3s; box-shadow:0 12px 30px -12px rgba(0,0,0,.6);}
.to-top.show{opacity:1; transform:none; pointer-events:auto;}
.to-top svg{width:100%; height:100%; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.to-top .ring-bg{stroke:rgba(148,210,189,.15); stroke-width:2.5;}
.to-top .ring{stroke:var(--orange); stroke-width:2.5; transform:rotate(-90deg); transform-origin:center;}
.to-top path{stroke:var(--light); stroke-width:2.2;}
.to-top:hover{background:var(--teal);}

/* hero intro */
.js-anim .intro{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);}
.js-anim .intro.in{opacity:1; transform:none;}

/* word mask headlines */
.split-head .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.06em; margin-bottom:-0.06em;}
.split-head .wi{display:inline-block; transform:translateY(105%); transition:transform .9s cubic-bezier(.2,.75,.15,1);}
.split-head.in .wi{transform:none;}

/* staggered reveal */
.js-anim .rv{opacity:0; transform:translateY(28px); transition:opacity .75s ease var(--d,0ms), transform .85s cubic-bezier(.2,.7,.2,1) var(--d,0ms);}
.js-anim .rv.in{opacity:1; transform:none;}

/* image curtain wipe */
.js-anim .wipe{clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);}
.js-anim .wipe img{transform:scale(1.15); transition:transform 1.6s cubic-bezier(.2,.7,.2,1);}
.js-anim .wipe.in{clip-path:inset(0 0 0 0);}
.js-anim .wipe.in img{transform:scale(1);}
.sol-card:hover .sol-media.in img{transform:scale(1.05);}

/* tilt + spotlight */
.tilt{transition:transform .25s ease, opacity .75s ease var(--d,0ms); transform-style:preserve-3d; will-change:transform;}
.tile.tilt::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(238,155,0,.22), transparent 45%);}
.tile.tilt:hover::before{opacity:1;}
.spot{position:relative; isolation:isolate;}
.spot::after{content:""!important; display:block!important; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(0,95,115,.10), transparent 60%);}
.spot:hover::after{opacity:1;}
.sec-night .spot::after,.sec-stone .spot::after,.sol-card.spot::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(238,155,0,.10), transparent 60%);}

/* button shine */
.btn-primary{position:relative; overflow:hidden;}
.btn-primary::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transition:left .6s ease;}
.btn-primary:hover::after{left:130%;}

/* highlighted word shimmer */
.display em{background:linear-gradient(100deg, var(--orange) 0%, var(--orange) 40%, #F8D48A 50%, var(--orange) 60%, var(--orange) 100%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 4.5s ease-in-out infinite;}
.display em .wi{color:transparent; background:inherit; -webkit-background-clip:text; background-clip:text; background-size:250% 100%; animation:shimmer 4.5s ease-in-out infinite;}
@keyframes shimmer{0%,100%{background-position:100% 0;}50%{background-position:0 0;}}

/* marquee ticker */
.marquee{background:var(--teal); color:var(--light); overflow:hidden; border-top:1px solid rgba(238,155,0,.25); border-bottom:1px solid rgba(238,155,0,.25);}
.marquee-track{display:flex; width:max-content; animation:marquee 38s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee span{display:inline-flex; align-items:center; gap:28px; padding:20px 14px 20px 0; white-space:nowrap;
  font-family:var(--font-display); font-weight:200; text-transform:uppercase; letter-spacing:0.08em; font-size:clamp(1.2rem,2.4vw,2rem);}
.marquee span::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 6px rgba(238,155,0,.18); margin-left:14px;}
.marquee span:nth-child(3n)::after{background:var(--teal); box-shadow:0 0 0 6px rgba(0,95,115,.35);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* Studio mockup life */
.pm-screen{transition:box-shadow .4s, border-color .4s, transform .4s;}
.pm-screen.pulse{border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,95,115,.15); transform:translateY(-2px);}
.pm-screen .st::before{animation:live 1.8s ease-in-out infinite;}
.pm-screen.off .st::before{animation:none;}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(0,95,115,.5);}50%{box-shadow:0 0 0 4px rgba(0,95,115,0);}}
.panel-mock{animation:float 7s ease-in-out infinite;}
@keyframes float{0%,100%{translate:0 0;}50%{translate:0 -8px;}}

/* eyebrow line draw */
.js-anim .section-head.rv .eyebrow::before{content:""!important; display:inline-block; width:0; height:1px; background:currentColor; margin-right:0; vertical-align:middle; transition:width .7s ease .2s, margin .7s ease .2s;}
.js-anim .section-head.rv.in .eyebrow::before{width:26px; margin-right:10px;}

/* sub-nav chip hover */
.subnav a{transition:background .25s, color .25s, transform .25s;} .subnav a:hover{transform:translateY(-2px);}

@media (prefers-reduced-motion: reduce){
  .marquee-track,.panel-mock,.display em,.display em .wi,.pm-screen .st::before{animation:none!important;}
  .scroll-progress{display:none;}
}
/* parallax headroom: images are taller than their frame so movement never exposes an edge */
.bigband{background:var(--night);}
.bigband > img{top:-14%!important; height:128%!important;}
.hero-photo .hp-bg{top:-12%; bottom:-12%;}
.marquee span{color:#F3EBD3; font-weight:300;}

/* ---- superseded tuning (kept for history; overridden below) ---- */
.subsol li::before{background:var(--orange)!important;}
.scroll-progress{background:linear-gradient(90deg, var(--orange), #FFFFFF);}
.marquee{background:var(--teal);}
.marquee span{color:#FFFFFF;}
.marquee span:nth-child(3n)::after{background:#FFFFFF; box-shadow:0 0 0 6px rgba(255,255,255,.15);}
.pm-screen .st::before{background:var(--orange);}
.pm-screen.off .st::before{background:#9FB7B9;}
.pm-screen.pulse{border-color:var(--orange); box-shadow:0 0 0 3px rgba(238,155,0,.2);}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(238,155,0,.55);}50%{box-shadow:0 0 0 4px rgba(238,155,0,0);}}
.sec-light{background:linear-gradient(155deg,#FFFFFF,#F2F2F2 55%,#F3EBD3);}
.section-dark{background:radial-gradient(120% 90% at 85% 0%, #0A9396 0%, #005F73 30%, #001219 72%) !important;}
.sec-stone{background:radial-gradient(60% 50% at 10% 0%, rgba(238,155,0,0.08), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(255,255,255,0.05), transparent 70%), #005F73;}
.cta-band::after{background:rgba(238,155,0,0.18);}
.to-top:hover{background:var(--teal);}
.card .icon{background:#F3EBD3; color:var(--teal);}
a[style*="accent-dark"]{color:var(--teal)!important;}


/* ============================================================
   Ocean & spice palette roles
   ============================================================ */
:root{ --ink-dark:#001219; --on-dark:#F3EBD3; --on-dark-soft:#9FB7B9; --light:#F3EBD3; --night-2:#002A33; }
/* labels */
.eyebrow{color:var(--rust)!important;}
.section-dark .eyebrow,.sec-night .eyebrow,.sec-stone .eyebrow,.hero-photo .eyebrow,.tile .eyebrow,.sol-card .eyebrow,
.bigband .eyebrow,.cta-band .eyebrow,.rail .eyebrow,footer.site .eyebrow{color:var(--orange)!important;}
.feat .n,.subsol .num{color:var(--rust);}
.sec-night .feat .n,.sec-stone .feat .n,.sec-night .subsol .num{color:var(--orange);}
.subsol li::before{background:var(--cyan)!important;}
.footer-col-title,.nav-group{color:var(--orange)!important;}
/* buttons */
.btn-primary,.section-dark .btn-primary,.cta-band .btn-primary,.hero-photo .btn-primary{background:var(--orange)!important; color:var(--ink-dark)!important;}
.btn-primary:hover,.section-dark .btn-primary:hover,.cta-band .btn-primary:hover,.hero-photo .btn-primary:hover{background:var(--caramel)!important; color:#fff!important; box-shadow:0 12px 28px -12px rgba(202,103,2,.7)!important;}
.btn-primary:hover .arrow-circle svg{stroke:#fff;}
.btn-outline{color:var(--teal);} .btn-outline:hover{background:var(--teal); border-color:var(--teal); color:#fff;}
.section-dark .btn-outline,.sec-night .btn-outline,.sec-stone .btn-outline,.sol-card .btn-outline,.cta-band .btn-outline,.hero-photo .btn-outline{color:var(--on-dark); border-color:rgba(148,210,189,.55);}
.section-dark .btn-outline:hover,.sec-night .btn-outline:hover,.sec-stone .btn-outline:hover,.sol-card:hover .btn-outline,.cta-band .btn-outline:hover,.hero-photo .btn-outline:hover{background:var(--aqua); border-color:var(--aqua); color:var(--ink-dark);}
/* secondary accents */
.card .icon{background:#DCEFEA; color:var(--cyan);}
.step-big .digit{color:#DCEFEA; -webkit-text-stroke:1.5px var(--cyan);}
.sec-night .step-big .digit{color:transparent; -webkit-text-stroke:1.2px var(--aqua);}
a[style*="accent-dark"]{color:var(--cyan)!important;}
.sol-card li{border-color:rgba(148,210,189,.35); color:var(--aqua);}
.subnav a{border-color:rgba(148,210,189,.45);} .subnav a:hover{background:var(--aqua); color:var(--ink-dark);}
.nav-links > a:hover,.nav-item > a:hover,.nav-links > a.active,.nav-item > a.active{box-shadow:inset 0 -2px 0 var(--orange);}
.nav-drop a:hover,.nav-drop a.active{box-shadow:inset 2px 0 0 var(--orange);}
/* surfaces */
.section-dark{background:radial-gradient(120% 90% at 85% 0%, rgba(10,147,150,.55) 0%, #005F73 22%, #001219 70%) !important;}
.sec-stone{background:radial-gradient(60% 50% at 8% 0%, rgba(148,210,189,.12), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(187,62,3,.16), transparent 70%), #002A33;}
.sec-light{background:linear-gradient(155deg,#FFFFFF,#FAF6EC 50%,#F3EBD3);}
.sol-card{background:rgba(0,18,25,.35);}
.cta-band{background:linear-gradient(120deg, var(--teal), var(--night)) !important;}
.cta-band::before{border-color:rgba(238,155,0,.14);}
.cta-band::after{background:rgba(187,62,3,.35);}
.hero-photo::after{background:linear-gradient(180deg, rgba(0,18,25,.35) 0%, rgba(0,18,25,.2) 35%, rgba(0,18,25,.92) 100%), linear-gradient(90deg, rgba(0,18,25,.72), rgba(0,18,25,0) 70%);}
.bigband::after{background:linear-gradient(90deg, rgba(0,18,25,.9), rgba(0,95,115,.25));}
/* motion colours: the progress bar runs through the whole palette */
.scroll-progress{height:4px; background:linear-gradient(90deg,#005F73,#0A9396,#94D2BD,#E9D8A6,#EE9B00,#CA6702,#BB3E03,#AE2012,#9B2226);}
.to-top{background:var(--night); color:var(--orange);} .to-top .ring{stroke:var(--orange);} .to-top:hover{background:var(--teal);}
.display em,.display em .wi{background-image:linear-gradient(100deg, #EE9B00 0%, #EE9B00 35%, #E9D8A6 50%, #CA6702 65%, #EE9B00 100%);}
.marquee{background:var(--teal); border-color:rgba(148,210,189,.25);}
.marquee span{color:#fff;}
.marquee span::after{background:var(--orange); box-shadow:0 0 0 6px rgba(238,155,0,.2);}
.marquee span:nth-child(3n)::after{background:var(--aqua); box-shadow:0 0 0 6px rgba(148,210,189,.2);}
.marquee span:nth-child(3n+2)::after{background:var(--rust); box-shadow:0 0 0 6px rgba(187,62,3,.25);}
.tile.tilt::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(238,155,0,.22), transparent 45%);}
.spot::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(10,147,150,.12), transparent 60%);}
.sec-night .spot::after,.sec-stone .spot::after,.sol-card.spot::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(148,210,189,.12), transparent 60%);}
/* Studio mockup states */
.pm-top{background:var(--night);}
.pm-side span.on{background:var(--teal);}
.pm-screen .st::before{background:var(--cyan);}
.pm-screen.off .st::before{background:var(--brownred);}
.pm-screen.pulse{border-color:var(--cyan); box-shadow:0 0 0 3px rgba(10,147,150,.18);}
.pm-track .now{background:var(--iron);}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(10,147,150,.55);}50%{box-shadow:0 0 0 4px rgba(10,147,150,0);}}
