/* Day and Night Airtech, Dallas. Direction: one-motif, the split disc. */
:root{
  --bg:#18191b; --surface:#222427; --surface2:#2b2e33;
  --ink:#eff0f1; --muted:#b9bcc2;
  --accent:#ff4a1f; --accent-ink:#18191b;
  --day:#ffb020; --night:#274b73; --night-deep:#12233a;
  --field:#eff0f1; --field-ink:#18191b;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-display:clamp(3rem,2rem + 6vw,7.5rem);
  --margin:clamp(16px,4vw,48px);
  --radius:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--step-body);line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:600;letter-spacing:-.04em;line-height:.95}
h2{font-size:var(--step-head)}
h3{font-size:var(--step-lead);line-height:1.05}
p{max-width:62ch}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--margin);padding-right:var(--margin)}
:focus-visible{outline:3px solid var(--day);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* Disc motif */
.disc{border-radius:50%;overflow:hidden;position:relative;flex:none}
.disc svg{display:block;width:100%;height:100%}
.disc-mini{width:34px;height:34px}

/* Top bar */
.topbar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:2px solid var(--surface2)}
.topbar-in{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:1.15rem;letter-spacing:-.03em;line-height:1}
.brand small{display:block;font-weight:400;font-size:var(--step-small);color:var(--muted);letter-spacing:0;margin-top:3px}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:var(--step-small);font-weight:600;cursor:pointer;padding:8px;margin-left:auto;letter-spacing:.04em}
.topnav{display:flex;gap:26px;margin-left:auto;align-items:center}
.topnav a{text-decoration:none;font-size:var(--step-small);font-weight:500;color:var(--muted)}
.topnav a:hover,.topnav a.active{color:var(--ink)}
.topnav a.active{box-shadow:inset 0 -3px 0 var(--accent)}
.callbtn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;padding:12px 22px;border-radius:999px;white-space:nowrap;transition:transform .15s ease,background .15s ease}
.callbtn:hover{background:var(--day);transform:translateY(-2px)}
.callbtn.mob{display:none}

/* Buttons */
 .btn-solid{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;padding:16px 30px;border-radius:999px;font-size:var(--step-body);transition:transform .15s ease,background .15s ease}
.btn-solid:hover{background:var(--day);transform:translateY(-2px)}
 .btn-ghost{display:inline-block;background:transparent;color:var(--ink);font-weight:600;text-decoration:none;padding:15px 28px;border-radius:999px;border:2px solid var(--ink);font-size:var(--step-body);transition:transform .15s ease,background .15s ease}
.btn-ghost:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}
 .btn-light{display:inline-block;background:var(--field);color:var(--field-ink);font-weight:600;text-decoration:none;padding:16px 30px;border-radius:999px;font-size:var(--step-body)}
.btn-light:hover{background:var(--day)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(40px,5vw,64px) 0 clamp(40px,5vw,64px)}
.hero-disc{position:absolute;top:-12%;right:-22%;width:min(88vw,760px);aspect-ratio:1;pointer-events:none}
.hero-in{position:relative}
.hero h1{font-size:var(--step-display);max-width:12ch}
.hero h1 .sun{color:var(--day)}
.hero h1 .moon{color:#7fb2e5}
.hero-sub{font-size:var(--step-lead);line-height:1.35;margin-top:28px;max-width:34ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-proof{margin-top:22px;color:var(--muted);font-size:var(--step-small);max-width:52ch}
.hero-photo{margin-top:40px;width:min(420px,86vw);aspect-ratio:1;border-radius:50%;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Split day/night band */
.daynight-band{display:flex;flex-wrap:wrap}
.daynight-band>div{flex:1 1 320px;padding:clamp(36px,5vw,64px) calc(var(--margin) + max(0px,(100vw - 1280px)/2))}
.day-half{background:var(--day);color:#18191b}
.night-half{background:var(--night-deep);color:var(--ink)}
.daynight-band h2{font-size:var(--step-head);margin-bottom:12px}
.daynight-band p{max-width:44ch}
.daynight-band .btn-solid{margin-top:22px}
.night-half .btn-solid{background:var(--day);color:#18191b}
.night-half .btn-solid:hover{background:var(--ink)}

/* Sections */
.sec{padding:clamp(72px,9vw,140px) 0}
.sec.light{background:var(--field);color:var(--field-ink)}
.sec.light .muted{color:#4c4f55}
.sec h2{margin-bottom:18px;max-width:16ch}
.lede{font-size:var(--step-lead);line-height:1.4;max-width:56ch}
.muted{color:var(--muted)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:40px}
.sec-head h2{margin-bottom:0}
.sec-head p{max-width:40ch}

/* 3D stage */
.stage{position:relative;background:var(--night-deep);overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage-fallback{display:none}
.stage-copy{position:relative;padding:clamp(80px,12vw,160px) calc(var(--margin) + max(0px,(100vw - 1280px)/2));max-width:640px}
.stage-copy h2{font-size:var(--step-head);margin-bottom:16px}
.stage-copy p{font-size:var(--step-lead);line-height:1.4}

/* Shape-marked points */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px;margin-top:56px}
.point h3{font-size:var(--step-body);line-height:1.25;margin-bottom:6px;padding-left:22px;position:relative}
.point h3::before{content:"";position:absolute;left:0;top:.35em;width:.7em;height:.7em;border-radius:50%;background:var(--accent)}
.point:nth-child(3n+2) h3::before{background:var(--day)}
.point:nth-child(3n) h3::before{background:var(--night)}
.point p{font-size:var(--step-small);color:var(--muted)}
.sec.light .point p{color:#4c4f55}
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
.split .disc{width:100%;aspect-ratio:1}
.split .disc img{width:100%;height:100%;object-fit:cover}

/* Showcase index */
.showcase{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,64px);align-items:start}
.show-disc{width:100%;aspect-ratio:1;position:relative}
.show-disc .disc{position:absolute;inset:0}
.show-disc img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
.show-fact{margin-top:20px;font-size:var(--step-lead);line-height:1.35;max-width:44ch}
.show-list{list-style:none}
.show-list button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--muted);font-family:inherit;font-size:var(--step-lead);font-weight:600;letter-spacing:-.03em;line-height:1.15;padding:14px 0;cursor:pointer;transition:color .2s ease}
.show-list button:hover{color:var(--ink)}
.show-list button[aria-selected="true"]{color:var(--ink);box-shadow:inset 4px 0 0 var(--accent);padding-left:16px}
.show-list button .tag{display:block;font-size:var(--step-small);font-weight:400;color:var(--muted);letter-spacing:0;margin-top:4px}
.sec.light .show-list button{color:#5a5e66}
.sec.light .show-list button:hover{color:#18191b}
.sec.light .show-list button[aria-selected="true"]{color:#18191b}
.sec.light .show-list button .tag{color:#5a5e66}

/* Growing tiles */
.tiles{display:flex;align-items:end;gap:10px}
.tile{flex:1;overflow:hidden;position:relative}
.tile:nth-child(1){aspect-ratio:3/4}
.tile:nth-child(2){aspect-ratio:3/4.6}
.tile:nth-child(3){aspect-ratio:3/5.4}
.tile img{width:100%;height:100%;object-fit:cover}
.tile-cap{margin-top:14px}
.tile-cap h3{font-size:var(--step-body);margin-bottom:6px}
.tile-cap p{font-size:var(--step-small);color:var(--muted)}
.tile-num{position:absolute;top:14px;left:14px;background:var(--accent);color:var(--accent-ink);font-weight:600;border-radius:999px;padding:6px 14px;font-size:var(--step-small)}

/* Proof board */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.proof-tile{background:var(--surface);padding:28px 24px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.proof-tile.accent{background:var(--accent);color:var(--accent-ink)}
.proof-tile.day{background:var(--day);color:#18191b}
.proof-tile h2{font-size:var(--step-head);line-height:1;margin:0}
.proof-tile .big{font-size:var(--step-head);font-weight:600;letter-spacing:-.04em;line-height:1}
.proof-tile .big-sm{font-size:var(--step-lead);font-weight:600;letter-spacing:-.04em;line-height:1.1}
.proof-tile p{font-size:var(--step-small);margin-top:10px}
.proof-tile .mark{font-size:2rem;line-height:1}

/* Pricing two fields */
.plans{display:grid;grid-template-columns:5fr 7fr;min-height:70vh}
.plan{padding:clamp(36px,5vw,64px) var(--margin);display:flex;flex-direction:column}
.plan-one{background:var(--surface)}
.plan-two{background:var(--accent);color:var(--accent-ink)}
.plan h3{font-size:var(--step-head);line-height:1}
.plan .for{font-size:var(--step-body);margin-top:16px;max-width:26ch}
.plan .includes{margin-top:24px;max-width:46ch}
.plan .price{margin-top:auto;padding-top:48px;font-size:var(--step-head);font-weight:600;letter-spacing:-.04em;line-height:1}
.plan .price small{font-size:var(--step-body);font-weight:400;letter-spacing:0}
.plan .btn-solid,.plan .btn-light{margin-top:24px;align-self:flex-start}
.plan-two .btn-solid{background:var(--bg);color:var(--ink)}
.plan-two .btn-solid:hover{background:var(--day);color:#18191b}

/* FAQ cards */
.faq-list{max-width:860px;margin:0 auto}
.faq-card{background:var(--surface);margin-bottom:10px}
.faq-card:nth-child(2n){background:var(--surface2)}
.faq-card>button{width:100%;text-align:left;background:none;border:0;color:var(--ink);font-family:inherit;cursor:pointer;padding:26px 28px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq-card>button h3{font-size:var(--step-lead)}
.faq-card>button .tab{flex:none;font-size:var(--step-small);color:var(--day);font-weight:600}
.faq-card .answer{display:none;padding:0 28px 28px;font-size:var(--step-body);max-width:56ch}
.faq-card.open .answer{display:block}
.faq-card.open>button .tab{color:var(--accent)}

/* CTA object returns */
.cta-sec{background:var(--night-deep);overflow:hidden}
.cta-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,64px);align-items:center}
.cta-grid .disc{width:100%;aspect-ratio:1}
.cta-grid .disc img{width:100%;height:100%;object-fit:cover}
.cta-grid h2{font-size:var(--step-head);margin-bottom:16px}
.cta-grid .fact{font-size:var(--step-lead);font-weight:600;margin:20px 0 26px}

/* Work gallery */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.work-shot .disc{width:100%;aspect-ratio:1}
.work-shot img{width:100%;height:100%;object-fit:cover}
.work-shot figcaption{margin-top:14px}
.work-shot figcaption strong{display:block;font-size:var(--step-body)}
.work-shot figcaption span{color:var(--muted);font-size:var(--step-small)}
.sec.light .work-shot figcaption span{color:#4c4f55}
.sec.light .btn-ghost{color:#18191b;border-color:#18191b}
.sec.light .btn-ghost:hover{background:#18191b;color:#eff0f1}

/* Service rows */
.svc-row{display:grid;grid-template-columns:2fr 5fr;gap:clamp(24px,4vw,64px);padding:44px 0;border-top:2px solid var(--surface2);align-items:start}
.svc-row:first-of-type{border-top:0}
.svc-row .disc{width:100%;max-width:280px;aspect-ratio:1}
.svc-row .disc img{width:100%;height:100%;object-fit:cover}
.svc-row h3{font-size:var(--step-head);margin-bottom:12px}
.svc-row p{margin-bottom:14px}
.svc-row .req{color:var(--day);font-weight:600;text-decoration:none}
.svc-row .req:hover{color:var(--accent)}

/* Area list */
.area-list{columns:3;column-gap:32px;list-style:none;font-size:var(--step-body);line-height:2}
.area-list li::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--accent);margin-right:10px}

/* Forms */
.form-card{background:var(--field);color:var(--field-ink);padding:clamp(28px,4vw,48px);max-width:860px;margin:0 auto}
.form-card h2{margin-bottom:10px}
.form-card p{margin-bottom:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-weight:600;font-size:var(--step-small);margin-bottom:6px}
input,select,textarea{width:100%;background:#fff;border:2px solid #d5d7da;border-radius:0;padding:14px 16px;font:inherit;font-size:var(--step-body);color:#18191b}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
textarea{min-height:120px;resize:vertical}
.form-note{font-size:var(--step-small);color:#4c4f55;margin-top:16px}
.form-ok{display:none;background:var(--day);color:#18191b;padding:20px 24px;font-weight:600;margin-top:18px}
.form-ok.show{display:block}

/* Picker */
.picker{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.picker button{background:var(--surface);color:var(--ink);border:2px solid var(--surface2);border-radius:999px;padding:12px 20px;font:inherit;font-weight:600;cursor:pointer}
.picker button:hover{border-color:var(--day)}
.picker button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* Footer */
.foot{background:var(--bg);border-top:2px solid var(--surface2);padding:clamp(48px,6vw,80px) 0 40px}
.foot-name{font-size:var(--step-display);font-weight:600;letter-spacing:-.04em;line-height:1;margin-bottom:28px}
.foot-name .sun{color:var(--day)}
.foot-name .moon{color:#7fb2e5}
.foot-grid{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.foot a{color:var(--ink)}
.foot .muted{font-size:var(--step-small)}
.demoline{margin-top:28px;font-size:var(--step-small);color:var(--muted)}
.demoline a{color:var(--day)}

/* Reveal + motion */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .hero-photo img{animation:none!important}
}
.hero-photo img{animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1) translateY(0)}to{transform:scale(1.06) translateY(-8px)}}

/* Phone */
@media (max-width:820px){
  .burger{display:block}
  .brand small{display:none}
  .topnav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);flex-direction:column;align-items:flex-start;padding:20px var(--margin) 28px;gap:18px;border-bottom:2px solid var(--surface2)}
  .topnav.open{display:flex}
  .topnav .callbtn.mob{display:inline-block}
  .topbar .callbtn{display:none}
  .topnav{margin-left:0}
  .hero-disc{top:auto;bottom:-30%;right:-38%;width:110vw;opacity:.9}
  .hero-photo{width:86vw;margin-top:40px}
  .split,.showcase,.cta-grid{grid-template-columns:1fr}
  .split .disc{max-width:420px}
  .show-list{display:block}
  .show-list li{flex:none}
  .show-list button{font-size:var(--step-lead);padding:8px 0}
  .show-list button[aria-selected="true"]{box-shadow:none;padding-left:0;color:var(--day)}
  .points{grid-template-columns:1fr;gap:28px;margin-top:40px}
  .tiles{flex-direction:column;align-items:stretch}
  .tile:nth-child(1),.tile:nth-child(2),.tile:nth-child(3){aspect-ratio:16/10}
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-tile{min-height:150px;padding:20px}
  .plans{grid-template-columns:1fr;min-height:0}
  .plan .price{padding-top:32px}
  .svc-row{grid-template-columns:1fr}
  .svc-row .disc{max-width:320px}
  .work-grid{grid-template-columns:1fr}
  .area-list{columns:2}
  .form-grid{grid-template-columns:1fr}
  .daynight-band>div{flex-basis:100%}
}
