/* ==========================================================================
   AIRTORIA — Design tokens
   ========================================================================== */
:root{
  --c-navy-950: #071B2E;
  --c-navy-900: #0B2C4C;
  --c-navy-800: #123F6C;
  --c-blue-600: #007AC3;
  --c-blue-500: #2C97DB;
  --c-ice-300:  #C7EAFE;
  --c-ice-100:  #E9F6FE;
  --white:      #FFFFFF;
  --c-mist:     #F4F9FC;
  --c-ink:      #0A2540;
  --c-ink-soft: #4A6580;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--c-mist);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
body.modal-open{ overflow:hidden; }
h1,h2,h3{ font-family: var(--font-display); margin:0; color: var(--c-navy-900); letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline: 2px solid var(--c-blue-500); outline-offset: 3px; border-radius: 4px; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-blue-600);
  margin: 0 0 .9rem;
}
.section-head.light .eyebrow{ color: var(--c-ice-300); }
.section-head.light h2{ color: var(--white); }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px 0;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav.is-scrolled{
  padding: 10px 0;
  background: rgba(244,249,252,.78);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(11,42,74,.08);
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{
  border-radius: 50%;
  animation: spin-blade 7s linear infinite;
}
@keyframes spin-blade{ to{ transform: rotate(360deg); } }
.brand-word{
  font-family: var(--font-display); font-weight:700;
  font-size: 1.05rem; letter-spacing: .06em; color: var(--white);
  transition: color .35s var(--ease);
}
.nav.is-scrolled .brand-word{ color: var(--c-navy-900); }

.nav-links{ display:flex; align-items:center; gap: 2.1rem; }
.nav-links a:not(.nav-cta){
  position:relative; font-size:.92rem; font-weight:500; color: var(--white);
  padding: 4px 0;
  transition: color .35s var(--ease);
}
.nav.is-scrolled .nav-links a:not(.nav-cta){ color: var(--c-ink); }
.nav-links a:not(.nav-cta) span{ position:relative; display:inline-block; }
.nav-links a:not(.nav-cta) span::after{
  content:''; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background: var(--c-blue-500); transition: right .3s var(--ease);
}
.nav-links a:not(.nav-cta):hover span::after{ right:0; }

.nav-cta{
  background: var(--c-navy-900); color: var(--white);
  padding: .6rem 1.15rem; border-radius: 40px; font-weight:600; font-size:.88rem;
  transition: transform .3s var(--ease), background .3s var(--ease);
  display:inline-block;
}
.nav-cta:hover{ background: var(--c-blue-600); transform: translateY(-2px); }

.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:none; min-width:44px; min-height:44px; padding:0;
}
.nav-toggle span{ width:22px; height:2px; background: var(--white); transition: transform .3s var(--ease), opacity .3s var(--ease), background .35s var(--ease); }
.nav.is-scrolled .nav-toggle span{ background: var(--c-navy-900); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding: .95rem 1.9rem;
  border-radius: 50px;
  font-weight:600; font-size:.95rem;
  overflow:hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn-primary{ background: var(--c-navy-900); color: var(--white); }
.btn-primary::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, var(--c-blue-600), var(--c-blue-500), var(--c-ice-300));
  opacity:0; transition: opacity .4s var(--ease);
}
.btn-primary:hover::before{ opacity:1; }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(28,111,176,.55); }
.btn-ghost{ background: transparent; color: var(--c-navy-900); border: 1.5px solid rgba(10,37,64,.22); }
.btn-ghost:hover{ border-color: var(--c-blue-500); background: rgba(44,140,219,.07); transform: translateY(-3px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 140px 28px 100px;
  background: radial-gradient(ellipse 120% 90% at 15% 0%, var(--c-navy-800), var(--c-navy-950) 65%);
  overflow: hidden;
}
.hero-streamlines{ position:absolute; inset:0; opacity:.55; pointer-events:none; }
.hero-streamlines svg{ position:absolute; }

/* ── HERO SCENE — mall facade draws in, HVAC equipment installs itself. 8s loop. ── */
.hero-scene{
  position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
}
.hero-scene-svg{
  width:100%; height:100%; display:block;
  animation: scene-drift 16s ease-in-out infinite;
}
.hero-scene-svg g path,
.hero-scene-svg g circle,
.hero-scene-svg g ellipse{
  fill:none; stroke: var(--c-ice-300); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect: non-scaling-stroke;
}
.hero-scene-svg .thin{ stroke-width:1.2; opacity:.72; }
.hero-scene-svg .vent-glow,
.hero-scene-svg .rooftop-glow,
.hero-scene-svg .split-glow{ stroke:none; }

/* Facade — self-drawing lines */
.sc-arch .draw{
  stroke-dasharray: 1500; stroke-dashoffset: 1500;
  animation-duration: 8s; animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-iteration-count: infinite;
}
.sc-arch .draw-1{ animation-name: archDraw1; }
.sc-arch .draw-2{ animation-name: archDraw2; }
.sc-arch .draw-3{ animation-name: archDraw3; }
.sc-arch .draw-4{ animation-name: archDraw4; }
@keyframes archDraw1{
  0%{ stroke-dashoffset:1500; opacity:0; } 3%{ opacity:.85; } 12%{ stroke-dashoffset:0; }
  88%{ stroke-dashoffset:0; opacity:.85; } 100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes archDraw2{
  0%,3%{ stroke-dashoffset:1500; opacity:0; } 6%{ opacity:.85; } 16%{ stroke-dashoffset:0; }
  88%{ stroke-dashoffset:0; opacity:.85; } 100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes archDraw3{
  0%,7%{ stroke-dashoffset:1500; opacity:0; } 10%{ opacity:.85; } 19%{ stroke-dashoffset:0; }
  88%{ stroke-dashoffset:0; opacity:.85; } 100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes archDraw4{
  0%,11%{ stroke-dashoffset:1500; opacity:0; } 14%{ opacity:.6; } 22%{ stroke-dashoffset:0; }
  88%{ stroke-dashoffset:0; opacity:.6; } 100%{ stroke-dashoffset:0; opacity:0; }
}

/* HVAC equipment — fly in, overshoot, settle */
.sc-piece{
  opacity:0; animation-duration:8s;
  animation-timing-function: cubic-bezier(.16,.9,.28,1);
  animation-iteration-count: infinite; will-change: transform, opacity;
}
.pc-duct-main   { animation-name: flyDuctMain;   transform-origin: 0% 50%; }
.pc-rooftop     { animation-name: flyRooftop;    transform-origin: 50% 100%; }
.pc-duct-branch { animation-name: flyDuctBranch; transform-origin: 0% 50%; }
.pc-diffuser    { animation-name: flyDiffuser;   transform-origin: 50% 0%; }
.pc-fan         { animation-name: flyFan;        transform-origin: 50% 50%; }
.pc-pipe        { animation-name: flyPipe;       transform-origin: 50% 0%; }
.pc-splitunit   { animation-name: flySplitUnit;  transform-origin: 50% 100%; }
.pc-ladder      { animation-name: flyLadder;     transform-origin: 50% 100%; }

/* Main trunk duct — sweeps in from the left (1.4s → 3.0s) */
@keyframes flyDuctMain{
  0%,17%{ opacity:0; transform: translate3d(-420px,20px,0) scale(.92); }
  33%{ opacity:1; transform: translate3d(12px,-4px,0) scale(1.01); }
  38%{ transform: translate3d(0,0,0) scale(1); }
  87%{ opacity:1; transform: translate3d(0,0,0) scale(1); }
  100%{ opacity:0; transform: translate3d(0,-26px,0) scale(1.03); }
}
/* Rooftop unit — lowered from above onto the roof (1.7s → 4.4s) */
@keyframes flyRooftop{
  0%,21%{ opacity:0; transform: translate3d(0,-260px,0) scale(.9); }
  37%{ opacity:1; transform: translate3d(0,10px,0) scale(1.015); }
  44%{ transform: translate3d(0,-3px,0) scale(1); }
  50%{ transform: translate3d(0,0,0) scale(1); }
  87%{ opacity:1; transform: translate3d(0,0,0) scale(1); }
  100%{ opacity:0; transform: translate3d(0,-26px,0) scale(1.03); }
}
/* Branch duct — sweeps in from the right (1.8s → 3.4s) */
@keyframes flyDuctBranch{
  0%,22%{ opacity:0; transform: translate3d(340px,20px,0) scale(.9); }
  38%{ opacity:1; transform: translate3d(-10px,-5px,0) scale(1.01); }
  43%{ transform: translate3d(0,0,0) scale(1); }
  87%{ opacity:1; transform: translate3d(0,0,0) scale(1); }
  100%{ opacity:0; transform: translate3d(0,-26px,0) scale(1.03); }
}
/* Ceiling diffuser — drops in with a double bounce (2.1s → 4.0s) */
@keyframes flyDiffuser{
  0%,26%{ opacity:0; transform: translate3d(0,-180px,0) scale(.86); }
  41%{ opacity:1; transform: translate3d(0,12px,0) scale(1.02); }
  46%{ transform: translate3d(0,-4px,0) scale(1); }
  50%{ transform: translate3d(0,0,0) scale(1); }
  87%{ opacity:1; transform: translate3d(0,0,0) scale(1); }
  100%{ opacity:0; transform: translate3d(0,-26px,0) scale(1.03); }
}
/* Exhaust fan — arcs in from the left, keeps spinning once settled (2.6s → 4.2s) */
@keyframes flyFan{
  0%,32%{ opacity:0; transform: translate3d(-260px,-90px,0) scale(.88); }
  47%{ opacity:1; transform: translate3d(8px,6px,0) scale(1.01); }
  52%{ transform: translate3d(0,0,0) scale(1); }
  87%{ opacity:1; transform: translate3d(0,0,0) scale(1); }
  100%{ opacity:0; transform: translate3d(0,-26px,0) scale(1.03); }
}
.fan-spin{ transform-origin: 985px 156px; animation: fan-rotate 3.2s linear infinite; }
@keyframes fan-rotate{ to{ transform: rotate(360deg); } }

/* Refrigerant line set — unfurls down the facade (2.8s → 4.4s) */
@keyframes flyPipe{
  0%,35%{ opacity:0; transform: translate3d(0,-120px,0) scale(.92); }
  49%{ opacity:1; transform: translate3d(-6px,8px,0) scale(1.01); }
  55%{ transform: translate3d(0,0,0) scale(1); }
  87%{ opacity:1; transform: translate3d(0,0,0) scale(1); }
  100%{ opacity:0; transform: translate3d(0,-26px,0) scale(1.03); }
}
/* Ground split unit — rises into place (1.1s → 2.5s) */
@keyframes flySplitUnit{
  0%,13%{ opacity:0; transform: translate3d(0,140px,0) scale(.86); }
  28%{ opacity:1; transform: translate3d(0,-8px,0) scale(1.015); }
  32%{ transform: translate3d(0,0,0) scale(1); }
  87%{ opacity:1; transform: translate3d(0,0,0) scale(1); }
  100%{ opacity:0; transform: translate3d(0,-26px,0) scale(1.03); }
}
/* Ladder — last piece placed (3.4s → 4.9s) */
@keyframes flyLadder{
  0%,42%{ opacity:0; transform: translate3d(160px,-120px,0) rotate(10deg) scale(.88); }
  56%{ opacity:1; transform: translate3d(-6px,6px,0) rotate(-1.5deg) scale(1.01); }
  61%{ transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  87%{ opacity:1; transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  100%{ opacity:0; transform: translate3d(0,-26px,0) scale(1.03); }
}

/* Cool-air glow — blooms once the system is fully installed */
.vent-glow, .rooftop-glow, .split-glow{ opacity:0; animation: scene-bloom 8s ease-in-out infinite; }
.airflow{ opacity:0; animation: scene-bloom 8s ease-in-out infinite; }
@keyframes scene-bloom{
  0%,47%{ opacity:0; } 63%{ opacity:1; } 85%{ opacity:1; } 100%{ opacity:0; }
}

@keyframes scene-drift{
  0%,100%{ transform: scale(1.02) translate3d(0,0,0); }
  50%{ transform: scale(1.045) translate3d(-10px,-6px,0); }
}

.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(100deg,
    rgba(7,27,46,.92) 0%,
    rgba(7,27,46,.68) 42%,
    rgba(7,27,46,.28) 70%,
    rgba(7,27,46,.08) 100%);
}

@media (max-width: 900px){
  .hero-scene{ opacity:.55; }
  .hero-scene-svg{ animation:none; }
  .pc-ladder, .pc-pipe{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-scene-svg, .sc-arch .draw, .sc-piece, .fan-spin,
  .vent-glow, .rooftop-glow, .split-glow, .airflow{ animation:none !important; }
  .sc-arch .draw{ stroke-dashoffset:0; opacity:.85; }
  .sc-piece{ opacity:1; transform:none; }
  .vent-glow, .rooftop-glow, .split-glow{ opacity:.7; }
}

.hero-inner{ max-width: 720px; position:relative; z-index:2; }
.hero .eyebrow{ color: var(--c-ice-300); }
.hero-title{
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.03;
  color: var(--white);
  font-weight: 600;
}
.hero-title-accent{
  background: linear-gradient(100deg, var(--c-ice-300), var(--c-blue-500) 70%);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.hero-sub{
  color: rgba(227,246,255,.78);
  font-size: 1.1rem;
  max-width: 480px;
  margin: 1.6rem 0 2.4rem;
}
.hero-actions{ display:flex; gap: 1rem; flex-wrap:wrap; }
.hero .btn-ghost{ color: var(--white); border-color: rgba(255,255,255,.3); }
.hero .btn-ghost:hover{ background: rgba(159,227,255,.1); border-color: var(--c-ice-300); }

.scroll-cue{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  width: 1px; height: 46px; overflow:hidden;
}
.scroll-cue-line{
  display:block; width:1px; height:100%;
  background: linear-gradient(var(--c-ice-300), transparent);
  animation: scroll-drift 1.8s ease-in-out infinite;
}
@keyframes scroll-drift{
  0%{ transform: translateY(-100%); }
  100%{ transform: translateY(100%); }
}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{ background: var(--white); padding: 70px 28px; }
.stats-inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: repeat(4,1fr); gap: 2rem;
  text-align:center;
}
.stat{ position:relative; }
.stat-value{
  font-family: var(--font-mono); font-weight:500;
  font-size: clamp(2rem, 4vw, 2.8rem); color: var(--c-navy-900);
}
.stat-suffix{ font-family: var(--font-mono); font-size:1.2rem; color: var(--c-blue-600); margin-left:2px; }
.stat-label{ display:block; margin-top:.5rem; font-size:.86rem; color: var(--c-ink-soft); }

/* ==========================================================================
   Section head (shared)
   ========================================================================== */
.section-head{ max-width: 640px; margin: 0 auto 3.2rem; padding: 0 28px; text-align:center; }
.section-head h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height:1.15; }

/* ==========================================================================
   Services
   ========================================================================== */
.services{ padding: 110px 28px; max-width: var(--container); margin: 0 auto; }
.service-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.service-card{
  background: var(--white);
  border: 1px solid rgba(11,42,74,.08);
  border-radius: 18px;
  padding: 2.1rem 1.7rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 44px -22px rgba(11,42,74,.28);
  border-color: rgba(44,140,219,.35);
}
.service-icon{
  width: 52px; height:52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--c-ice-100), var(--white));
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1.3rem;
}
.service-icon svg{ width: 28px; height:28px; }
.s-line{ fill:none; stroke: var(--c-blue-600); stroke-width: 2.6; stroke-linecap:round; stroke-linejoin:round; }
.service-card:hover .s-line{ stroke: var(--c-blue-500); }
.service-card h3{ font-size: 1.15rem; margin-bottom:.55rem; }
.service-card p{ color: var(--c-ink-soft); font-size: .93rem; }

.service-card-expandable{ display:flex; flex-direction:column; }
.service-toggle{
  display:flex; align-items:center; gap:.4rem;
  margin-top: 1rem; padding:0; background:none; border:none;
  font-family: var(--font-body); font-size:.85rem; font-weight:600;
  color: var(--c-blue-600); transition: color .25s ease;
}
.service-toggle:hover{ color: var(--c-blue-500); }
.service-toggle-icon{ transition: transform .3s var(--ease); }
.service-toggle[aria-expanded="true"] .service-toggle-icon{ transform: rotate(180deg); }
.service-sublist{
  max-height:0; overflow:hidden;
  transition: max-height .4s var(--ease), margin-top .4s var(--ease);
}
.service-sublist li{
  position:relative; padding: .3rem 0 .3rem 1rem;
  font-size:.86rem; color: var(--c-ink-soft);
}
.service-sublist li::before{
  content:''; position:absolute; left:0; top:.75rem;
  width:5px; height:5px; border-radius:50%; background: var(--c-blue-500);
}
.service-sublist.is-open{ max-height: 320px; margin-top:.6rem; }

/* ==========================================================================
   Process
   ========================================================================== */
.process{
  background: linear-gradient(180deg, var(--c-navy-900), var(--c-navy-950));
  padding: 110px 28px 120px;
  position: relative;
}
.process-path{
  max-width: var(--container); margin: 0 auto; position:relative;
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1.6rem;
}
.process-line{ position:absolute; top: 34px; left:0; right:0; width:100%; height:40px; }
.process-line path{ fill:none; stroke: rgba(159,227,255,.25); stroke-width:1.5; stroke-dasharray: 6 8; }
.process-step{ position:relative; padding-top: 1rem; }
.process-num{
  display:inline-block; font-family: var(--font-mono); font-size:.85rem; color: var(--c-navy-950);
  background: var(--c-ice-300); width: 30px; height:30px; border-radius:50%;
  line-height:30px; text-align:center; margin-bottom: 1rem;
}
.process-step h3{ color: var(--white); font-size:1.15rem; margin-bottom:.5rem; }
.process-step p{ color: rgba(227,246,255,.68); font-size:.92rem; }

/* ==========================================================================
   Portfolio / Work
   ========================================================================== */
.work{ padding: 110px 28px; max-width: var(--container); margin:0 auto; }
.work-filter{ display:flex; justify-content:center; gap:.6rem; margin-bottom: 2.6rem; flex-wrap:wrap; }
.filter-btn{
  background: var(--white); border: 1px solid rgba(11,42,74,.14);
  padding: .7rem 1.15rem; border-radius: 30px; font-size:.85rem; font-weight:500; color: var(--c-ink-soft);
  transition: all .3s var(--ease);
}
.filter-btn:hover{ border-color: var(--c-blue-500); color: var(--c-navy-900); }
.filter-btn.is-active{ background: var(--c-navy-900); color: var(--white); border-color: var(--c-navy-900); }

.work-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.work-card{
  border-radius: 18px; overflow:hidden; background: var(--white);
  border: 1px solid rgba(11,42,74,.08);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.work-card.is-hidden{ display:none; }
.work-trigger{
  display:block; width:100%; text-align:left; background:none; border:none; padding:0;
  font-family:inherit; color:inherit; cursor:pointer;
}
.work-media{
  position:relative; height: 190px;
  display:flex; align-items:flex-end; padding: 1rem;
  overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color: var(--c-navy-900);
}
.work-media::after{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.16) 0 2px, transparent 2px 26px);
  transform: translateX(-30%);
  transition: transform .7s var(--ease);
}
.work-card:hover .work-media::after{ transform: translateX(10%); }
.grad-1{ background: linear-gradient(135deg, #007AC3, #0B2C4C); }
.grad-2{ background: linear-gradient(135deg, #2C97DB, #123F6C); }
.grad-3{ background: linear-gradient(135deg, #071B2E, #007AC3); }
.grad-4{ background: linear-gradient(135deg, #123F6C, #C7EAFE); }
.grad-5{ background: linear-gradient(135deg, #0B2C4C, #2C97DB); }
.grad-6{ background: linear-gradient(135deg, #007AC3, #071B2E); }
.grad-7{ background: linear-gradient(150deg, #2C97DB, #06192C); }
.grad-8{ background: linear-gradient(150deg, #C7EAFE, #007AC3); }
.grad-9{ background: linear-gradient(150deg, #123F6C, #2C97DB); }
.grad-10{ background: linear-gradient(150deg, #071B2E, #2C97DB); }
.work-tag{
  position:relative; z-index:1;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--white); background: rgba(6,25,44,.35); padding: .3rem .7rem; border-radius: 20px;
  backdrop-filter: blur(6px);
}
.work-count{
  position:absolute; top: 1rem; right: 1rem; z-index:1;
  display:flex; align-items:center; gap:.3rem;
  font-family: var(--font-mono); font-size:.72rem; color: var(--white);
  background: rgba(6,25,44,.4); padding: .3rem .6rem; border-radius: 20px; backdrop-filter: blur(6px);
}
.work-hover{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background: rgba(6,25,44,.45); opacity:0;
  transition: opacity .3s var(--ease);
}
.work-hover span{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--white); border: 1px solid rgba(255,255,255,.5); padding: .55rem 1.1rem; border-radius: 30px;
  transform: translateY(6px); transition: transform .3s var(--ease);
}
.work-card:hover .work-hover, .work-trigger:focus-visible .work-hover{ opacity:1; }
.work-card:hover .work-hover span, .work-trigger:focus-visible .work-hover span{ transform: translateY(0); }
.work-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 44px -24px rgba(11,42,74,.3); }
.work-card.is-placeholder{ cursor:default; }
.work-card.is-placeholder:hover{ transform:none; box-shadow:none; }
.work-card.is-placeholder .work-media{ display:flex; align-items:center; justify-content:center; opacity:.75; }
.work-tag-soon{ font-size:.8rem; padding:.5rem 1rem; }
.work-body{ display:block; padding: 1.3rem 1.4rem 1.6rem; }
.work-h{ display:block; font-size: 1.05rem; font-weight:600; margin-bottom:.35rem; color: var(--c-navy-900); }
.work-p{ display:block; font-size:.88rem; color: var(--c-ink-soft); }

/* ==========================================================================
   Project gallery modal
   ========================================================================== */
.gallery-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.gallery-modal[hidden]{ display:none; }
.gallery-backdrop{
  position:absolute; inset:0;
  background: rgba(6,15,26,.82); backdrop-filter: blur(6px);
  opacity:0; transition: opacity .3s var(--ease);
}
.gallery-modal.is-open .gallery-backdrop{ opacity:1; }
.gallery-dialog{
  position:relative; z-index:1;
  width:100%; max-width: 900px; max-height: 90vh;
  background: var(--c-navy-950);
  border: 1px solid rgba(199,234,254,.14);
  border-radius: 20px;
  overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; transform: scale(.96) translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
}
.gallery-modal.is-open .gallery-dialog{ opacity:1; transform: scale(1) translateY(0); }

.gallery-close{
  position:absolute; top: 14px; right: 14px; z-index:3;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(6,15,26,.55); border: 1px solid rgba(199,234,254,.25); color: var(--white);
  backdrop-filter: blur(6px); transition: background .25s ease, transform .25s ease;
}
.gallery-close:hover{ background: rgba(6,15,26,.8); transform: scale(1.06); }

.gallery-main{ position:relative; display:flex; align-items:stretch; }
.gallery-frame{
  flex:1; height: min(52vh, 460px);
  position:relative; overflow:hidden;
}
.gallery-frame > *{
  position:absolute; inset:0; width:100%; height:100%;
}
.gallery-frame > *.gallery-anim-fade{ animation: gallery-fade .4s var(--ease); }
.gallery-frame > *.gallery-anim-next{ animation: gallery-slide-next .45s var(--ease); }
.gallery-frame > *.gallery-anim-prev{ animation: gallery-slide-prev .45s var(--ease); }
.gallery-frame img{
  width:100%; height:100%; object-fit:cover; display:block; background: var(--c-navy-900);
}
@keyframes gallery-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gallery-slide-next{
  from{ opacity:0; transform: translateX(3%) scale(1.015); }
  to{ opacity:1; transform: translateX(0) scale(1); }
}
@keyframes gallery-slide-prev{
  from{ opacity:0; transform: translateX(-3%) scale(1.015); }
  to{ opacity:1; transform: translateX(0) scale(1); }
}

.gallery-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(6,15,26,.5); border: 1px solid rgba(199,234,254,.25); color: var(--white);
  backdrop-filter: blur(6px); transition: background .25s ease, transform .25s ease;
}
.gallery-arrow:hover{ background: rgba(6,15,26,.8); }
.gallery-prev{ left: 14px; }
.gallery-next{ right: 14px; }
.gallery-prev:hover{ transform: translateY(-50%) translateX(-2px); }
.gallery-next:hover{ transform: translateY(-50%) translateX(2px); }

.gallery-info{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 1rem;
  padding: 1.2rem 1.4rem .9rem;
}
.gallery-tag{
  display:inline-block; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--c-navy-950); background: var(--c-ice-300); padding: .25rem .6rem; border-radius: 20px; margin-bottom:.5rem;
}
.gallery-heading h3{ font-size:1.2rem; color: var(--white); margin: 0 0 .3rem; }
.gallery-heading p{ font-size:.88rem; color: rgba(227,246,255,.65); max-width: 46ch; }
.gallery-counter{
  flex-shrink:0; font-family: var(--font-mono); font-size:.78rem; color: var(--c-ice-300);
  padding-top: .3rem;
}

.gallery-thumbs{
  display:flex; gap:.6rem; padding: 0 1.4rem 1.4rem; overflow-x:auto;
  scrollbar-width: thin;
}
.gallery-thumb{
  flex-shrink:0; width:64px; height:48px; border-radius:8px; overflow:hidden;
  border: 2px solid transparent; padding:0; cursor:pointer;
  opacity:.55; transition: opacity .25s ease, border-color .25s ease;
}
.gallery-thumb.is-active{ opacity:1; border-color: var(--c-ice-300); }
.gallery-thumb:hover{ opacity:.85; }
.gallery-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }

@media (max-width: 640px){
  .gallery-modal{ padding: 0; }
  .gallery-dialog{ max-width:100%; max-height:100%; height:100%; border-radius:0; }
  .gallery-frame{ height: 40vh; }
  .gallery-info{ flex-direction:column; gap:.3rem; padding: 1rem 1.1rem .6rem; }
  .gallery-thumbs{ padding: 0 1.1rem 1.1rem; }
  .gallery-arrow{ width:40px; height:40px; }
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{ background: var(--white); padding: 110px 28px; }
.review-carousel{ max-width: 720px; margin:0 auto; text-align:center; }
.review-track{ position:relative; min-height: 150px; }
.review-card{
  position:absolute; inset:0;
  margin:0; opacity:0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.review-card.is-active{ opacity:1; transform: translateY(0); pointer-events:auto; }
.review-card p{ font-family: var(--font-display); font-size: 1.4rem; line-height:1.4; color: var(--c-navy-900); }
.review-card cite{ display:block; margin-top: 1.2rem; font-style:normal; font-size:.85rem; color: var(--c-blue-600); font-family: var(--font-mono); }
.review-dots{ display:flex; justify-content:center; align-items:center; gap:.1rem; margin-top: 1.5rem; }
.review-dots button{
  position:relative; width:32px; height:32px; border-radius:50%; border:none; background:transparent; padding:0;
}
.review-dots button::before{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%; background: rgba(11,42,74,.18);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.review-dots button.is-active::before{ background: var(--c-blue-500); transform:translate(-50%,-50%) scale(1.3); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, var(--c-navy-950), var(--c-navy-800));
  padding: 110px 28px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 2.1rem;
}
.cta-streamlines{ opacity:.4; }
.cta-band h2{ position:relative; color: var(--white); font-size: clamp(1.9rem,4vw,2.7rem); max-width:600px; }
.cta-band .btn{ position:relative; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ padding: 110px 28px 130px; max-width: var(--container); margin:0 auto; }
.contact-inner{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; }
.contact h2{ font-size: clamp(1.9rem,3.6vw,2.5rem); margin: .3rem 0 1.1rem; }
.contact-copy{ color: var(--c-ink-soft); max-width: 400px; }
.contact-list{ margin-top: 2.2rem; display:flex; flex-direction:column; gap: 1rem; }
.contact-list li{ display:flex; flex-direction:column; gap:.15rem; }
.contact-label{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--c-blue-600); }
.contact-list a, .contact-static{ font-size: 1.02rem; font-weight:500; }
.contact-list a{ transition: color .25s ease; }
.contact-list a:hover{ color: var(--c-blue-600); }
.contact-static{ color: var(--c-ink); }

.contact-form{ background: var(--white); border-radius: 22px; padding: 2.4rem; border: 1px solid rgba(11,42,74,.08); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field{ position:relative; margin-bottom: 1.1rem; }
.field input, .field select, .field textarea{
  width:100%; padding: 1.15rem .9rem .55rem; border-radius: 10px;
  border: 1.5px solid rgba(11,42,74,.16); background: var(--c-mist);
  font-family: var(--font-body); font-size: 1rem; color: var(--c-ink);
  transition: border-color .25s ease, background .25s ease;
}
.field textarea{ resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--c-blue-500); background: var(--white);
}
.field label{
  position:absolute; left: .9rem; top: 1.05rem;
  font-size: .95rem; color: var(--c-ink-soft); pointer-events:none;
  transition: all .2s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  top: .38rem; font-size: .68rem; color: var(--c-blue-600);
}
.field select{ appearance:none; color: var(--c-ink-soft); }
.field select:valid{ color: var(--c-ink); }
.label-select{ top: .38rem !important; font-size: .68rem !important; }
.contact-form .btn{ width:100%; margin-top:.4rem; }
.form-success{
  max-height:0; overflow:hidden; opacity:0; text-align:center;
  color: var(--c-blue-600); font-size:.9rem; margin-top:0;
  transition: all .45s var(--ease);
}
.form-success.is-visible{ max-height: 60px; opacity:1; margin-top: 1rem; }
.form-error{
  max-height:0; overflow:hidden; opacity:0; text-align:center;
  color: #C0392B; font-size:.9rem; margin-top:0;
  transition: all .45s var(--ease);
}
.form-error.is-visible{ max-height: 60px; opacity:1; margin-top: 1rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background: var(--c-navy-950); padding: 50px 28px; }
.footer-inner{
  max-width: var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 1.5rem;
}
.footer-brand .brand-word{ color: var(--white); }
.footer-links{ display:flex; gap: 1.6rem; flex-wrap:wrap; }
.footer-links a{ color: rgba(227,246,255,.65); font-size:.88rem; transition: color .25s ease; }
.footer-links a:hover{ color: var(--c-ice-300); }
.footer-fine{ color: rgba(227,246,255,.4); font-size:.8rem; width:100%; text-align:center; margin-top: .5rem; }

/* ==========================================================================
   Temperature follower — scroll-driven gauge, fixed to the viewport.
   Reads -20°F at the top of the page, climbs as you scroll, and hits
   100°F exactly when the contact section arrives.
   ========================================================================== */
.temp-follower{
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), bottom .35s var(--ease);
}
.temp-follower.is-visible{ opacity:1; transform:translateY(0); }

.temp-follower-panel{
  width: 148px;
  background: var(--c-navy-900);
  border: 1px solid rgba(199,234,254,.16);
  border-radius: 16px;
  padding: 14px 14px 15px;
  text-align:center;
  box-shadow: 0 20px 40px -18px rgba(6,25,44,.65);
}
.temp-gauge-svg{ width:100%; height:auto; display:block; }
.temp-gauge-track{ fill:none; stroke: rgba(199,234,254,.14); stroke-width:9; stroke-linecap:round; }
.temp-gauge-fill{
  fill:none; stroke: var(--c-ice-300); stroke-width:9; stroke-linecap:round;
  transition: stroke .4s ease;
}
.temp-follower.is-hot .temp-gauge-fill{ stroke: var(--c-blue-500); }
.temp-gauge-ticks line{ stroke: rgba(199,234,254,.28); stroke-width:1.5; }
.temp-gauge-needle{ stroke: var(--white); stroke-width:2.5; stroke-linecap:round; }
.temp-gauge-hub{ fill: var(--c-ice-300); }

.temp-readout{ margin-top:-8px; line-height:1; }
.temp-value{ font-family: var(--font-mono); font-size:1.55rem; font-weight:600; color: var(--white); }
.temp-unit{ font-family: var(--font-mono); font-size:.85rem; color: var(--c-ice-300); margin-left:1px; }
.temp-caption{
  font-family: var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--c-ice-300); margin:.35rem 0 0; transition: color .3s ease;
}
.temp-follower.is-hot .temp-caption{ color: var(--white); }
.temp-follower.is-hot .temp-follower-panel{
  border-color: rgba(199,234,254,.4);
  animation: temp-pulse 1.6s ease-in-out infinite;
}
@keyframes temp-pulse{
  0%, 100%{ box-shadow: 0 20px 40px -18px rgba(6,25,44,.65), 0 0 0 0 rgba(199,234,254,.35); }
  50%{ box-shadow: 0 20px 40px -18px rgba(6,25,44,.65), 0 0 0 8px rgba(199,234,254,0); }
}

@media (max-width: 640px){
  .temp-follower{ right: 14px; bottom: 14px; }
  .temp-follower-panel{ width: 118px; padding: 10px 10px 11px; }
  .temp-value{ font-size: 1.2rem; }
  .temp-caption{ font-size: .58rem; }
}
@media (max-width: 380px){
  .temp-follower{ right: 10px; bottom: 10px; }
  .temp-follower-panel{ width: 96px; padding: 8px 8px 9px; border-radius: 12px; }
  .temp-value{ font-size: 1rem; }
  .temp-unit{ font-size: .7rem; }
  .temp-caption{ font-size: .5rem; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px){
  .service-grid{ grid-template-columns: repeat(2,1fr); }
  .process-path{ grid-template-columns: repeat(2,1fr); row-gap: 2.4rem; }
  .process-line{ display:none; }
  .work-grid{ grid-template-columns: repeat(2,1fr); }
  .stats-inner{ grid-template-columns: repeat(2,1fr); row-gap: 2rem; }
  .contact-inner{ grid-template-columns: 1fr; gap: 2.4rem; }
}

@media (max-width: 680px){
  .nav-links{
    position:fixed; inset: 68px 0 auto 0; margin:0 16px;
    background: var(--white); border-radius: 18px;
    flex-direction:column; align-items:stretch; gap:0;
    padding: .6rem;
    box-shadow: 0 24px 44px -20px rgba(11,42,74,.3);
    transform-origin: top center;
    transform: scaleY(0); opacity:0; pointer-events:none;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav-links.is-open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
  .nav-links.is-open a:not(.nav-cta){ color: var(--c-ink) !important; padding: .9rem .7rem; border-radius: 10px; }
  .nav-links a:not(.nav-cta):hover{ background: var(--c-mist); }
  .nav-cta{ margin: .4rem .3rem .3rem; text-align:center; }
  .nav-toggle{ display:flex; }
  .service-grid, .work-grid{ grid-template-columns: 1fr; }
  .process-path{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .stats-inner{ grid-template-columns: repeat(2,1fr); }
}
/* ==========================================================================
   About / Introduction & Background
   ========================================================================== */
.about{ padding: 100px 28px; background: var(--white); }
.about-inner{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem;
  align-items:start;
}
.about-copy h2{ font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin: .5rem 0 1.3rem; }
.about-copy p{ color: var(--c-ink-soft); line-height:1.75; margin: 0 0 1rem; max-width: 54ch; }
.about-diff{
  background: var(--c-mist); border-radius: 20px; padding: 2rem 2.2rem;
  border: 1px solid rgba(10,37,64,.06);
}
.about-diff h3{ font-family: var(--font-display); color: var(--c-navy-900); font-size:1.15rem; margin:0 0 1.2rem; }
.about-diff-list{ display:flex; flex-direction:column; gap: 1rem; }
.about-diff-list li{ display:flex; gap:.7rem; align-items:flex-start; color: var(--c-ink-soft); font-size:.95rem; line-height:1.55; }
.about-diff-list svg{ flex-shrink:0; margin-top:.15rem; color: var(--c-blue-600); }

@media (max-width: 900px){
  .about-inner{ grid-template-columns:1fr; gap:2.4rem; }
}
@media (max-width: 640px){
  .about{ padding: 70px 24px; }
  .about-diff{ padding: 1.6rem 1.4rem; }
}

/* ==========================================================================
   Footer — social icon + legal links row
   ========================================================================== */
.footer-social{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background: rgba(199,234,254,.08); color: rgba(227,246,255,.75);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.footer-social:hover{ background: var(--c-blue-600); color: var(--white); transform: translateY(-2px); }
.footer-legal{
  display:flex; gap:1.2rem; flex-wrap:wrap; width:100%; justify-content:center;
  margin-top:.2rem;
}
.footer-legal a{ color: rgba(227,246,255,.45); font-size:.76rem; transition: color .25s ease; }
.footer-legal a:hover{ color: var(--c-ice-300); }

/* ==========================================================================
   Legal pages (Privacy Policy / Terms of Service / Cookie Policy)
   ========================================================================== */
.legal-main{ padding-top: 130px; padding-bottom: 20px; background: var(--c-mist); }
.legal-hero{ max-width: var(--container); margin:0 auto; padding: 0 28px 2.2rem; }
.legal-hero h1{ font-size: clamp(2rem, 4vw, 2.7rem); margin-top:.4rem; }
.legal-updated{ color: var(--c-ink-soft); font-size:.85rem; margin-top:.7rem; }
.legal-content{ max-width: 760px; margin:0 auto; padding: 0 28px 5rem; }
.legal-note{
  background: var(--white); border:1px solid rgba(10,37,64,.08); border-radius: 14px;
  padding:1rem 1.2rem; margin: 0 0 2rem; font-size:.85rem; line-height:1.6; color: var(--c-ink-soft);
}
.legal-content h2{
  font-family: var(--font-display); color: var(--c-navy-900); font-size:1.3rem;
  margin: 2.2rem 0 .8rem;
}
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p{ margin: 0 0 1rem; color: var(--c-ink-soft); line-height:1.75; }
.legal-content ul{ margin: 0 0 1.2rem 1.2rem; padding:0; color: var(--c-ink-soft); line-height:1.75; }
.legal-content li{ margin-bottom:.45rem; }
.legal-content a{ color: var(--c-blue-600); text-decoration: underline; text-underline-offset:2px; }
.legal-content strong{ color: var(--c-ink); }

@media (max-width: 640px){
  .legal-main{ padding-top: 100px; }
}

/* ==========================================================================
   404 page
   ========================================================================== */
.notfound-main{
  min-height: 100svh; display:flex; align-items:center; justify-content:center;
  padding: 140px 28px 100px;
  background: radial-gradient(ellipse 120% 90% at 15% 0%, var(--c-navy-800), var(--c-navy-950) 65%);
}
.notfound-inner{ max-width: 560px; text-align:center; }
.notfound-main .eyebrow{ color: var(--c-ice-300); }
.notfound-inner h1{
  font-size: clamp(2rem, 4.4vw, 2.8rem); color: var(--white);
  font-weight:600; line-height:1.15; margin: .5rem 0 1.2rem;
}
.notfound-sub{ color: rgba(227,246,255,.78); font-size:1.05rem; margin: 0 0 2.2rem; }
.notfound-ghost{ color: var(--white); border-color: rgba(255,255,255,.3); }
.notfound-ghost:hover{ background: rgba(159,227,255,.1); border-color: var(--c-ice-300); }

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:300;
  max-width: 560px; margin:0 auto;
  background: rgba(7,27,46,.94); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(199,234,254,.16); border-radius: 16px;
  padding: 1.1rem 1.3rem; box-shadow: 0 30px 70px -25px rgba(0,0,0,.55);
  display:flex; flex-wrap:wrap; align-items:center; gap: .9rem 1.2rem;
  opacity:0; transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}
.cookie-banner.is-visible{ opacity:1; transform: translateY(0); pointer-events:auto; }
.cookie-banner p{ flex:1 1 260px; margin:0; color: rgba(227,246,255,.82); font-size:.85rem; line-height:1.55; }
.cookie-banner a{ color: var(--c-ice-300); text-decoration: underline; text-underline-offset:2px; }
.cookie-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie-btn{
  font-family: var(--font-body); font-size:.82rem; font-weight:600;
  padding:.55rem 1.15rem; border-radius: 999px; border:1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.cookie-btn-accept{ background: var(--c-blue-600); color: var(--white); }
.cookie-btn-accept:hover{ background: var(--c-blue-500); transform: translateY(-1px); }
.cookie-btn-decline{ background: transparent; color: rgba(227,246,255,.7); border-color: rgba(199,234,254,.25); }
.cookie-btn-decline:hover{ color: var(--white); border-color: rgba(199,234,254,.5); }

@media (max-width: 640px){
  .cookie-banner{ left:10px; right:10px; bottom:10px; padding:1rem; }
  body.cookie-banner-open .temp-follower{ bottom: 128px; }
}
@media (max-width: 380px){
  body.cookie-banner-open .temp-follower{ bottom: 150px; }
}