/* ========================================================================== 
   AEROTHERM HVAC
   Engineered calm: midnight systems, ion-aqua signals, thermal ember accents,
   softened geometry, natural photography, and airflow-inspired motion.
   Loaded after the structural foundation and technical system layers.
   ========================================================================== */

:root{
  --obs-black:var(--ink,#0B1820);
  --obs-black-2:var(--ink-2,#071116);
  --obs-black-3:#112630;
  --obs-panel:color-mix(in srgb,var(--ink-2,#071116) 92%,var(--paper,#F5F3ED));
  --obs-bone:var(--paper,#F5F3ED);
  --obs-bone-2:var(--paper-2,#DCE8E8);
  --obs-white:#fffef9;
  --obs-muted:var(--mut,#617178);
  --obs-muted-dark:var(--mut-d,#B8C8CB);
  --obs-accent:var(--accent-d,#64D6D3);
  --obs-accent-strong:var(--copper-3,#35B9B6);
  --obs-accent-ink:var(--ink,#0B1820);
  --obs-orange:var(--gold,#F26A45);
  --obs-line:rgba(11,24,32,.14);
  --obs-line-dark:rgba(220,232,232,.2);
  --obs-line-acid:rgba(100,214,211,.32);
  --obs-grid:64px;
  --obs-radius:18px;
  --obs-shadow:0 32px 85px -48px rgba(7,17,22,.48);
  --r:var(--obs-radius);
  --wrap:1360px;
}

body.design-corners-soft{--obs-radius:22px}
body.design-corners-square{--obs-radius:3px}
body.design-corners-architectural{--obs-radius:8px}

html{background:var(--obs-black-2);scroll-behavior:smooth}
body{
  background:var(--obs-black-2);
  color:var(--obs-black);
  font-family:var(--sans),Manrope,Arial,sans-serif;
  letter-spacing:-.01em;
}
main{background:var(--obs-bone)}

h1,h2,h3,h4,.h-xl,.h-lg,.h-md,
.hero h1,.page-hero h1,.cta-band h2,.foot-statement{
  font-family:var(--display),"Space Grotesk",sans-serif;
  font-weight:700;
  line-height:.98;
  letter-spacing:-.055em;
  text-transform:none;
}
.h-xl{font-size:clamp(3.3rem,7vw,7.6rem)}
.h-lg{font-size:clamp(2.65rem,5vw,5.7rem)}
.h-md{font-size:clamp(1.75rem,2.8vw,2.8rem)}
.lede{line-height:1.68}

::selection{background:var(--obs-accent);color:var(--obs-accent-ink)}
:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible{
  outline:3px solid var(--obs-accent)!important;
  outline-offset:4px!important;
}

.eyebrow,.hero-eyebrow{
  gap:.65rem;
  color:#176F70;
  letter-spacing:.16em;
}
.eyebrow::before,.hero-eyebrow::before{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--obs-accent);
  clip-path:none;
  box-shadow:0 0 0 5px rgba(100,214,211,.14);
}
.sec--dark .eyebrow,.page-hero .eyebrow,.hero .eyebrow,.site-foot .eyebrow{
  color:var(--obs-accent);
}

.sec--tint{
  background-color:var(--obs-bone-2);
  background-image:
    radial-gradient(circle at 8% 18%,rgba(100,214,211,.18),transparent 24rem),
    linear-gradient(rgba(11,24,32,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,24,32,.035) 1px,transparent 1px);
  background-size:auto,var(--obs-grid) var(--obs-grid),var(--obs-grid) var(--obs-grid);
}
.sec--dark{
  background-color:var(--obs-black);
  background-image:
    radial-gradient(circle at 92% 12%,rgba(100,214,211,.13),transparent 28rem),
    linear-gradient(rgba(100,214,211,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,214,211,.035) 1px,transparent 1px);
  background-size:auto,var(--obs-grid) var(--obs-grid),var(--obs-grid) var(--obs-grid);
}
.sec--dark::after{height:1px;background:linear-gradient(90deg,transparent,var(--obs-accent))}
.has-surface-texture .sec--dark,
.has-surface-texture .page-hero,
.has-surface-texture .site-foot{
  background-image:
    radial-gradient(circle at 90% 10%,rgba(100,214,211,.13),transparent 30rem),
    linear-gradient(rgba(100,214,211,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,214,211,.035) 1px,transparent 1px);
  background-size:auto,var(--obs-grid) var(--obs-grid),var(--obs-grid) var(--obs-grid);
}

/* Buttons and input surfaces */
.btn{
  min-height:50px;
  border-radius:999px;
  padding:.9rem 1.45rem;
  letter-spacing:.12em;
  box-shadow:0 14px 35px -25px rgba(7,17,22,.72);
}
.btn::before{display:none}
.btn:hover{transform:translateY(-3px)}
.btn--copper,.btn--gold{
  background:var(--obs-accent);
  border-color:var(--obs-accent);
  color:var(--obs-accent-ink);
}
.btn--copper:hover,.btn--gold:hover{
  background:#8AE4E2;
  border-color:#8AE4E2;
  box-shadow:0 18px 38px -22px rgba(53,185,182,.8);
}
.btn--ink{background:var(--obs-black);border-color:var(--obs-black)}
.btn--ink:hover{background:var(--obs-orange);border-color:var(--obs-orange);color:#fff}
.tlink{color:#176F70}
.tlink::before{height:2px;border-radius:999px;background:var(--obs-accent)}

.field input,.field select,.field textarea,
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea,.search-form .search-field{
  border-radius:12px;
  background:#fffefb;
}
.field input:focus,.field select:focus,.field textarea:focus,
.comment-form input:focus,.comment-form textarea:focus,.search-form .search-field:focus{
  border-color:var(--obs-accent-strong);
  box-shadow:0 0 0 4px rgba(100,214,211,.18);
}
.panel{
  border-top:1px solid var(--obs-line);
  border-radius:var(--obs-radius);
  box-shadow:var(--obs-shadow);
}

/* Utility rail and navigation */
.topbar{
  background:var(--obs-black-2);
  color:var(--obs-muted-dark);
  border-bottom:1px solid rgba(100,214,211,.16);
}
.topbar a,.topbar-soc a{color:var(--obs-accent)}
.topbar-bullets span{border-color:rgba(220,232,232,.14)}
.topbar-bullets span::before{border-radius:999px;background:var(--obs-accent)}

.site-head{
  background:rgba(7,17,22,.94);
  border-color:rgba(220,232,232,.14);
  backdrop-filter:blur(24px) saturate(1.2);
}
.site-head::after{
  width:clamp(120px,24vw,380px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--obs-accent));
}
.brand-lockup{
  display:inline-flex!important;
  align-items:center;
  gap:.72rem;
  width:auto!important;
  max-width:245px!important;
  height:auto!important;
  max-height:none!important;
  filter:none!important;
  color:inherit;
}
.brand-glyph{
  position:relative;
  display:grid;
  flex:0 0 42px;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid rgba(100,214,211,.5);
  border-radius:50%;
  background:rgba(100,214,211,.08);
  color:var(--obs-accent);
  font-family:var(--mono),monospace;
  font-size:.58rem;
  letter-spacing:.08em;
}
.brand-glyph::before,.brand-glyph::after,.brand-glyph i{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(100,214,211,.48);
  border-radius:50%;
  clip-path:inset(0 50% 0 0);
  transform:rotate(25deg);
}
.brand-glyph::after{transform:rotate(145deg)}
.brand-glyph i{transform:rotate(265deg)}
.brand-glyph b{position:relative;z-index:2;font-weight:700}
.brand-word{
  color:var(--obs-white);
  font-family:var(--display),"Space Grotesk",sans-serif;
  font-size:clamp(.82rem,.74rem + .28vw,1rem);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.05;
}
.nav .menu-item > a,.nav > li > a{letter-spacing:.09em}
.nav .menu-item > a::before{
  bottom:18px;
  height:2px;
  border-radius:999px;
}
.nav .sub-menu{
  border-radius:14px;
  border-color:rgba(100,214,211,.28);
  background:rgba(7,17,22,.98);
  overflow:hidden;
}
.nav .sub-menu a:hover{background:rgba(100,214,211,.14);color:var(--obs-accent)}
.burger{border-radius:50%}

/* Hero: calm control plane + cinematic field image */
.hero{
  min-height:min(88vh,900px);
  background-color:var(--obs-black-2);
  background-image:
    radial-gradient(circle at 42% 52%,rgba(100,214,211,.1),transparent 30rem),
    linear-gradient(rgba(100,214,211,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,214,211,.035) 1px,transparent 1px);
  background-size:auto,var(--obs-grid) var(--obs-grid),var(--obs-grid) var(--obs-grid);
}
.hero::before{
  z-index:3;
  top:auto;
  left:auto;
  right:36%;
  bottom:-28vw;
  width:min(74vw,980px);
  height:auto;
  aspect-ratio:1;
  border:1px solid rgba(100,214,211,.22);
  border-radius:50%;
  background:transparent;
  transform:none;
  box-shadow:
    0 0 0 9vw rgba(100,214,211,.018),
    0 0 0 18vw rgba(100,214,211,.012);
}
.hero::after{
  content:"AIR / HEAT / BALANCE";
  color:var(--obs-accent);
}
.hero-media{
  inset:0 0 0 45%;
  clip-path:ellipse(78% 92% at 80% 50%);
}
.hero-media::after{
  border:0;
  background:linear-gradient(90deg,var(--obs-black-2) 0,rgba(7,17,22,.78) 17%,rgba(7,17,22,.08) 62%,rgba(7,17,22,.26) 100%);
}
.hero-media img,
.design-tone-natural .hero-media img{
  filter:saturate(.9) contrast(1.04) brightness(.82);
  object-position:center;
}
.hero-veil{background:linear-gradient(90deg,var(--obs-black-2) 0,rgba(7,17,22,.85) 34%,rgba(7,17,22,.03) 70%)}
.hero-inner{padding-block:clamp(5.5rem,12vh,9rem)}
.hero-copy{width:min(59%,790px)}
.hero h1{
  max-width:9ch;
  font-size:clamp(4rem,8.2vw,8.6rem);
  line-height:.84;
  letter-spacing:-.075em;
}
.hero h1 em{
  display:inline;
  padding:0;
  background:transparent;
  color:var(--obs-accent);
}
.hero-sub{color:#D7E1E2;font-size:clamp(1rem,.95rem + .32vw,1.22rem)}
.hero-proof{
  overflow:hidden;
  border-radius:999px;
  border-color:rgba(220,232,232,.2);
  background:rgba(7,17,22,.38);
  backdrop-filter:blur(12px);
}
.hero-proof span::before{border-radius:50%;box-shadow:0 0 0 4px rgba(100,214,211,.12)}

/* Inner page headers */
.page-hero{
  overflow:hidden;
  background-color:var(--obs-black-2);
  background-image:
    radial-gradient(circle at 82% 26%,rgba(100,214,211,.18),transparent 25rem),
    linear-gradient(rgba(100,214,211,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,214,211,.035) 1px,transparent 1px);
  background-size:auto,var(--obs-grid) var(--obs-grid),var(--obs-grid) var(--obs-grid);
}
.page-hero::after{
  content:"";
  position:absolute;
  right:-12vw;
  bottom:-38vw;
  width:min(76vw,900px);
  aspect-ratio:1;
  border:1px solid rgba(100,214,211,.2);
  border-radius:50%;
  box-shadow:0 0 0 8vw rgba(100,214,211,.022),0 0 0 16vw rgba(100,214,211,.014);
  pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{max-width:14ch;line-height:.92}

/* Conversion register */
.obs-estimate__marquee{
  background:var(--obs-accent);
  color:var(--obs-accent-ink);
}
.obs-estimate__marquee span{opacity:.75}
.obs-stats,.stats-bar{
  overflow:hidden;
  border-radius:var(--obs-radius);
  border:1px solid var(--obs-line);
  background:rgba(255,254,249,.64);
  box-shadow:var(--obs-shadow);
  backdrop-filter:blur(12px);
}
.obs-stat + .obs-stat{border-color:var(--obs-line)}
.obs-estimate__form,.est-card{
  overflow:hidden;
  border-radius:var(--obs-radius);
  box-shadow:0 36px 90px -48px rgba(7,17,22,.6);
}
.obs-form-ticket{background:var(--obs-black-2);color:var(--obs-accent)}

/* Cards, projects, proof, and editorial modules */
.svc-card,.svc-row,.project-tile,.post-card,.review-card,
.process-step,.value-card,.tier,.case-card,.team-card,.badge-card{
  border-radius:var(--obs-radius);
  overflow:hidden;
}
.svc-card,.project-tile,.post-card,.review-card,.process-step,.value-card,.tier,.case-card{
  transition:transform .35s var(--obs-ease),box-shadow .35s var(--obs-ease),border-color .35s var(--obs-ease);
}
.svc-card:hover,.project-tile:hover,.post-card:hover,.process-step:hover,.value-card:hover,.tier:hover,.case-card:hover{
  transform:translateY(-7px);
  border-color:rgba(53,185,182,.45);
  box-shadow:0 32px 72px -38px rgba(7,17,22,.48);
}
.svc-idx,.svc-row-n,.tl-year{color:#176F70}
.ph,.frame,.post-thumb{border-radius:var(--obs-radius);overflow:hidden}
.ph-img,.project-tile img,.post-card img{
  transition:transform .7s var(--obs-ease),filter .45s var(--obs-ease);
}
.svc-card:hover .ph-img,.project-tile:hover img,.post-card:hover img{transform:scale(1.035)}
.design-tone-natural .ph-img,
.design-tone-natural .project-tile img,
.design-tone-natural .post-card img,
.design-tone-natural .why-img img{
  filter:none;
}
.process-step::before,.tier::before{background:linear-gradient(90deg,var(--obs-accent),transparent)}
.why-badge,.badge,.project-stat-n{background:var(--obs-accent);color:var(--obs-accent-ink)}
.ticks li::before{border-radius:50%;background:rgba(100,214,211,.22);color:#176F70}
.review-card{background:#fffefb}
.stars{color:var(--obs-orange)}

/* CTA */
.cta-band{
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 28%,rgba(100,214,211,.26),transparent 26rem),
    linear-gradient(135deg,var(--obs-black-2),#102D38 70%,#143A42);
  color:var(--obs-white);
}
.cta-band::before{
  content:"";
  position:absolute;
  right:-15vw;
  bottom:-42vw;
  width:min(82vw,980px);
  aspect-ratio:1;
  border:1px solid rgba(100,214,211,.22);
  border-radius:50%;
  box-shadow:0 0 0 8vw rgba(100,214,211,.025),0 0 0 16vw rgba(100,214,211,.016);
}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{color:var(--obs-white)}

/* Footer */
.site-foot{
  background-color:var(--obs-black-2);
  background-image:
    radial-gradient(circle at 8% 18%,rgba(100,214,211,.12),transparent 26rem),
    linear-gradient(rgba(100,214,211,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,214,211,.03) 1px,transparent 1px);
  background-size:auto,var(--obs-grid) var(--obs-grid),var(--obs-grid) var(--obs-grid);
}
.obs-foot__signal{background:var(--obs-accent);color:var(--obs-accent-ink)}
.obs-foot__direct{border-radius:999px}
.foot-statement{line-height:.95}
.fc-ic{border-radius:50%;background:rgba(100,214,211,.08)}

/* Mobile */
.m-menu{
  background-color:var(--obs-black-2);
  background-image:
    radial-gradient(circle at 80% 18%,rgba(100,214,211,.16),transparent 24rem),
    linear-gradient(rgba(100,214,211,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,214,211,.04) 1px,transparent 1px);
  color:var(--obs-white);
}
.m-menu::before{border-color:rgba(100,214,211,.06)}
.m-head{border-color:rgba(220,232,232,.16)}
.m-close,.m-phone,.m-nav > a,.m-nav > .m-group > a{color:var(--obs-white)}
.m-nav > a,.m-nav > .m-group > a{border-color:rgba(220,232,232,.16);text-transform:none}
.m-nav a:hover,.m-subwrap a.m-subwrap-all{color:var(--obs-accent)}
.m-subwrap a,.m-nav .sub-menu a{border-left-color:var(--obs-accent);color:var(--obs-muted-dark)}
.m-foot{border-color:rgba(220,232,232,.16)}
.m-phone span{color:var(--obs-muted-dark)}
.m-menu .btn{background:var(--obs-accent);border-color:var(--obs-accent);color:var(--obs-accent-ink)}

@media (max-width:980px){
  .hero{min-height:auto}
  .hero-media{inset:0;clip-path:none;opacity:.58}
  .hero-media::after{background:linear-gradient(90deg,rgba(7,17,22,.97),rgba(7,17,22,.6))}
  .hero-copy{width:min(100%,720px)}
  .hero h1{max-width:8.5ch;font-size:clamp(3.8rem,13vw,7.4rem)}
  .hero::before{right:-18%;bottom:-42vw;width:100vw}
  .brand-word{max-width:145px}
}

@media (max-width:640px){
  :root{--obs-radius:16px}
  .topbar-bullets span:nth-child(n+3){display:none}
  .hero-inner{padding-block:5.4rem 4.8rem}
  .hero h1{font-size:clamp(3.15rem,15vw,5.4rem)}
  .hero-sub{max-width:36ch}
  .hero-proof{grid-template-columns:1fr;border-radius:16px;width:100%}
  .hero-proof span + span{border-left:0;border-top:1px solid var(--obs-line-dark)}
  .brand-glyph{width:38px;height:38px;flex-basis:38px}
  .page-hero::after,.cta-band::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .svc-card,.project-tile,.post-card,.review-card,.process-step,.value-card,.tier,.case-card,
  .ph-img,.project-tile img,.post-card img{transition:none!important}
}

@supports not (color:color-mix(in srgb,black,white)){
  :root{--obs-panel:#112630}
}