:root{
  --ink:#03111f;
  --ink2:#061b2d;
  --ink3:#0a2944;
  --panel:#08243a;
  --panel2:#0b3150;
  --line:rgba(89,177,236,.24);
  --orange:#ff6a00;
  --orange2:#ffa33b;
  --blue:#26a8ff;
  --white:#f7fbff;
  --muted:#abc0cf;
  --max:1540px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit}
.site-shell{width:min(var(--max),94vw);margin:0 auto}

/* ONE SHARED HEADER FOR EVERY PAGE, INCLUDING HOME */
.site-header{
  position:sticky;top:0;z-index:1000;height:92px;
  background:#03111f;border-bottom:1px solid rgba(255,255,255,.075);
}
.header-inner{height:92px;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;text-decoration:none;min-width:355px;height:74px}
.brand img{display:block;width:330px;height:auto}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.main-nav a{
  position:relative;text-decoration:none;color:#f7fbff;
  font-size:.93rem;font-weight:850;white-space:nowrap
}
.main-nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:3px;border-radius:10px;
  background:linear-gradient(90deg,var(--orange),var(--orange2));transform:scaleX(0);
  transition:transform .18s ease
}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}
.nav-cta,.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:54px;padding:0 27px;border-radius:14px;text-decoration:none;
  color:#121212!important;font-weight:950;
  background:linear-gradient(180deg,#ffb64d 0%,#ff7300 68%,#f45c00 100%);
  border:1px solid #ffc875;
  box-shadow:0 5px 0 #9d3500,0 14px 26px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.65)
}
.menu-toggle{display:none;margin-left:auto;width:46px;height:46px;background:none;border:0;padding:7px}
.menu-toggle span{display:block;height:3px;margin:6px 0;border-radius:8px;background:#fff}

/* Shared hero system */
.hero{
  position:relative;overflow:hidden;
  min-height:560px;border-bottom:1px solid rgba(255,255,255,.065);
  background:
    radial-gradient(circle at 75% 10%,rgba(30,142,220,.18),transparent 30%),
    linear-gradient(118deg,#03111f 0%,#061c2f 54%,#0a2c48 100%)
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(125deg,transparent 0 72%,rgba(255,255,255,.025) 72.1% 78%,transparent 78.1%),
    linear-gradient(125deg,transparent 0 89%,rgba(255,106,0,.18) 89.1% 89.55%,transparent 89.65%)
}
.hero-inner{
  position:relative;z-index:1;min-height:560px;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(540px,1.08fr);
  gap:45px;align-items:center
}
.hero-copy{padding:62px 0}
.kicker{
  display:flex;align-items:center;gap:14px;margin-bottom:21px;
  color:#ffad5a;font-size:.76rem;font-weight:950;letter-spacing:.23em;text-transform:uppercase
}
.kicker::before{
  content:"";width:54px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--orange),var(--orange2));
  box-shadow:0 0 14px rgba(255,106,0,.26)
}
.hero h1{
  margin:0 0 20px;font-size:clamp(3.5rem,5.35vw,5.75rem);
  line-height:.94;letter-spacing:-.055em;font-weight:950;text-transform:uppercase
}
.hero h1 .orange{display:block;color:var(--orange)}
.hero-copy>p{
  max-width:690px;margin:0 0 28px;color:#d7e3ea;
  font-size:1.1rem;line-height:1.62
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 27px;
  border-radius:14px;text-decoration:none;font-weight:900;
  border:1px solid #279de6;background:linear-gradient(180deg,#0e446f,#06233b);
  box-shadow:0 12px 23px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08)
}
.hero-art{
  position:relative;min-height:410px;border-radius:24px;overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(145deg,#0a2d49,#041522);
  box-shadow:0 28px 62px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07)
}

/* Home visual */
.mascot-art img{width:100%;height:100%;min-height:410px;object-fit:cover;object-position:center 44%;display:block}
.mascot-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,17,31,.12),transparent 32%,transparent 76%,rgba(255,106,0,.05))
}
.hero-stats{display:flex;gap:34px;margin-top:30px}
.hero-stat{display:flex;gap:11px;align-items:center}
.stat-icon{
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  font-size:1.25rem;background:radial-gradient(circle at 35% 28%,#80d7ff,#1c9eea 35%,#08395c 78%);
  border:1px solid #65cbff;box-shadow:0 5px 0 #03223a,0 11px 20px rgba(0,0,0,.25)
}
.hero-stat strong{display:block;font-size:.93rem}.hero-stat span{display:block;color:#b7c9d5;font-size:.78rem;margin-top:2px}

/* Services visual: real HTML laptop/device composition */
.device-scene{height:100%;min-height:410px;display:grid;place-items:center;padding:35px}
.laptop{
  position:relative;width:86%;max-width:640px;padding:16px 16px 26px;border-radius:18px;
  background:linear-gradient(145deg,#1d2c3a,#050a0e);
  box-shadow:0 24px 55px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.16)
}
.laptop-screen{height:285px;overflow:hidden;border-radius:10px;background:#fff;border:4px solid #111}
.laptop-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.laptop::after{
  content:"";position:absolute;left:7%;right:7%;bottom:-14px;height:16px;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#2f3d49,#0b1014);box-shadow:0 7px 14px rgba(0,0,0,.35)
}
.phone{
  position:absolute;right:7%;bottom:29px;width:92px;height:175px;border-radius:17px;
  background:linear-gradient(145deg,#18252f,#030608);border:3px solid #2c3e49;
  box-shadow:0 15px 28px rgba(0,0,0,.4);padding:9px
}
.phone::before{content:"";display:block;height:100%;border-radius:10px;background:linear-gradient(145deg,#0b2943,#061524)}
.phone-logo{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;color:#ff7a00;font-weight:950}

/* Process visual */
.process-board{height:100%;min-height:410px;padding:26px;display:grid;gap:11px;align-content:center}
.pstep{
  display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;
  padding:13px 16px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,#0d3656,#061c2e);
  box-shadow:0 10px 22px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06)
}
.pnum{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font-weight:950;
  background:radial-gradient(circle at 35% 28%,#ffd774,#ff7a00 40%,#8c2900 80%);
  border:2px solid #ffb14f;box-shadow:0 5px 0 #631f00,0 10px 18px rgba(0,0,0,.25)
}
.pstep strong{display:block}.pstep span{display:block;color:#aec2cf;font-size:.82rem;margin-top:2px}

/* Portfolio visual */
.portfolio-art{min-height:410px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini-project{overflow:hidden;border-radius:16px;border:1px solid var(--line);background:#061a2b}
.mini-project img{width:100%;height:285px;object-fit:cover;object-position:top center;display:block}
.mini-project div{padding:14px 15px}
.mini-project strong{display:block}.mini-project span{color:#ff902d;font-size:.8rem;font-weight:850}

/* Pricing visual */
.pricing-art{
  min-height:410px;padding:24px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:15px;align-items:center;overflow:visible
}
.price-mini{
  position:relative;padding:24px 19px 21px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(155deg,#0e395a,#061d30);
  box-shadow:0 18px 38px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07)
}
.price-mini.featured{transform:translateY(-13px);border-color:#ff9e44;box-shadow:0 24px 48px rgba(0,0,0,.35),0 0 24px rgba(255,106,0,.1)}
.price-mini .popular{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:6px 11px;border-radius:99px;background:linear-gradient(180deg,#ffd46f,#ff7a00);
  color:#111;font-size:.67rem;font-weight:950;box-shadow:0 4px 0 #8f2c00
}
.price-mini h3{margin:0 0 8px;font-size:1rem}.price-mini b{display:block;font-size:1.9rem;margin:8px 0 14px}
.price-mini ul{list-style:none;padding:0;margin:0}.price-mini li{color:#cbd9e2;font-size:.77rem;margin:8px 0}
.price-mini li::before{content:"✓";color:#ff8b25;font-weight:950;margin-right:7px}

/* About visual */
.about-art{min-height:410px;padding:30px;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.brand-panel{
  min-height:315px;padding:34px;border-radius:18px;
  background:radial-gradient(circle at 65% 18%,rgba(255,106,0,.13),transparent 28%),linear-gradient(145deg,#0d3554,#051a2b);
  border:1px solid var(--line);box-shadow:0 18px 36px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)
}
.brand-mark{font-size:4rem;line-height:1;color:#ff7900;margin-bottom:16px}
.brand-panel h3{margin:0;font-size:2.25rem}.brand-panel h3 span{color:#ff7a00}
.brand-panel p{color:#b9cbd6;line-height:1.55}
.value-stack{display:grid;gap:12px}
.value{padding:18px;border-radius:15px;border:1px solid var(--line);background:linear-gradient(180deg,#0b3150,#061d30)}
.value strong{display:block;margin-bottom:4px}.value span{color:#aec2cf;font-size:.83rem}

/* Contact visual */
.contact-art{min-height:410px;padding:25px;display:grid;grid-template-columns:.88fr 1.12fr;gap:18px}
.contact-photo{border-radius:17px;overflow:hidden;border:1px solid var(--line)}
.contact-photo img{width:100%;height:100%;object-fit:cover;object-position:center 37%;display:block}
.contact-preview{padding:22px;border-radius:17px;border:1px solid var(--line);background:linear-gradient(160deg,#0c3453,#061b2d)}
.contact-preview h3{margin:0 0 15px;font-size:1.35rem}
.fake-field{height:42px;margin:10px 0;border-radius:9px;background:#031625;border:1px solid #1d5f91}
.fake-field.large{height:86px}
.fake-button{height:46px;margin-top:12px;border-radius:10px;display:grid;place-items:center;color:#111;font-weight:950;background:linear-gradient(180deg,#ffb64d,#ff7200);box-shadow:0 4px 0 #983300}

/* Feature / content sections */
.section{padding:70px 0;background:linear-gradient(180deg,#061522,#071b2c)}
.section.alt{background:linear-gradient(180deg,#04131f,#08243a)}
.section-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:30px}
.section-head h2{margin:0;font-size:clamp(2.2rem,3.4vw,3.5rem);line-height:1;letter-spacing:-.04em}
.section-head h2 span{color:var(--orange)}
.section-head p{max-width:650px;margin:0;color:var(--muted);line-height:1.62}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{
  position:relative;padding:24px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(145deg,#0d3554,#061b2d);
  box-shadow:0 16px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.065);
  overflow:hidden
}
.card::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.icon3d{
  width:68px;height:68px;display:grid;place-items:center;border-radius:50%;margin-bottom:16px;font-size:1.7rem;
  background:radial-gradient(circle at 35% 28%,#7bd9ff,#1b9ee9 35%,#073a5f 78%);
  border:2px solid #60caff;box-shadow:0 6px 0 #03243d,0 12px 22px rgba(0,0,0,.28),inset 0 2px 2px rgba(255,255,255,.4)
}
.card:nth-child(odd) .icon3d{
  background:radial-gradient(circle at 35% 28%,#ffd777,#ff7a00 36%,#8f2b00 78%);
  border-color:#ffb34f;box-shadow:0 6px 0 #621f00,0 12px 22px rgba(0,0,0,.28),inset 0 2px 2px rgba(255,255,255,.42)
}
.card h3{margin:0 0 8px}.card p{margin:0;color:var(--muted);line-height:1.5}
.card a{display:inline-block;margin-top:14px;text-decoration:none;color:#ff8b27;font-weight:900}

/* Larger content blocks */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{padding:28px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(155deg,#0c3351,#061b2d);box-shadow:0 20px 42px rgba(0,0,0,.25)}
.panel h3{margin-top:0}.panel p{color:var(--muted);line-height:1.58}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.project{overflow:hidden;border-radius:20px;border:1px solid var(--line);background:#061b2d;box-shadow:0 20px 40px rgba(0,0,0,.27)}
.project img{width:100%;height:330px;object-fit:cover;object-position:top center;display:block}
.project-body{padding:21px}.project-body h3{margin:0 0 6px}.project-body p{margin:0;color:var(--muted)}
.project-body a{display:inline-block;margin-top:14px;color:#ff8a24;text-decoration:none;font-weight:900}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price-card{position:relative;padding:30px 26px 26px;border-radius:21px;border:1px solid var(--line);background:linear-gradient(155deg,#0d3758,#061b2e);box-shadow:0 22px 44px rgba(0,0,0,.29)}
.price-card.featured{transform:translateY(-8px);border-color:#ff9c40}
.price-card h3{margin:0}.price{font-size:2.55rem;font-weight:950;margin:10px 0 16px}.price-card p{color:var(--muted);line-height:1.5}
.price-card ul{list-style:none;padding:0;margin:18px 0 24px}.price-card li{margin:10px 0}.price-card li::before{content:"✓";color:#ff8b24;font-weight:950;margin-right:9px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:24px}
.contact-list{display:grid;gap:14px}
.contact-item{padding:18px;border-radius:15px;border:1px solid var(--line);background:linear-gradient(180deg,#0b3150,#061b2d)}
.contact-item strong{display:block}.contact-item span{color:var(--muted)}
form{padding:26px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(155deg,#0d3554,#061b2d)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
input,textarea{width:100%;border-radius:9px;border:1px solid #1e6091;background:#031625;color:#fff;padding:14px;font:inherit}
textarea{grid-column:1/-1;min-height:130px;resize:vertical}
button.btn-primary{width:100%;border:1px solid #ffc875;cursor:pointer;margin-top:13px}

/* Footer / CTA */
.bottom-cta{padding:52px 0;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,106,0,.12),transparent 36%),linear-gradient(180deg,#071826,#03111f);border-top:1px solid rgba(255,255,255,.06)}
.bottom-cta h2{margin:0 0 11px;font-size:clamp(2rem,3.6vw,3.6rem)}.bottom-cta h2 span{color:var(--orange)}.bottom-cta p{margin:0 0 21px;color:var(--muted)}
.footer{padding:26px 0;background:#020b13;border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.footer-brand img{width:220px;height:auto}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer a{text-decoration:none;color:#c5d4dd;font-size:.85rem}

/* Responsive */
@media(max-width:1160px){
  .brand{min-width:260px}.brand img{width:250px}.main-nav{gap:18px}
  .hero-inner{grid-template-columns:1fr}.hero-copy{padding:52px 0 22px}.hero-art{margin-bottom:50px}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:850px){
  .site-header,.header-inner{height:78px}.brand{min-width:0}.brand img{width:215px}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;left:3vw;right:3vw;top:78px;padding:18px;flex-direction:column;align-items:stretch;background:#061b2d;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 45px rgba(0,0,0,.4)}
  .main-nav.open{display:flex}.main-nav a{text-align:center;padding:10px}.nav-cta{margin-top:4px}
  .hero{min-height:auto}.hero-inner{min-height:auto}.hero h1{font-size:3.05rem}.hero-art{min-height:340px}
  .pricing-art,.portfolio-art,.contact-art,.about-art{grid-template-columns:1fr}
  .pricing-art{align-items:stretch}.price-mini.featured{transform:none}
  .cards,.pricing-grid,.project-grid,.two-col,.contact-grid{grid-template-columns:1fr}
  .section-head{display:block}.section-head p{margin-top:13px}
  .form-grid{grid-template-columns:1fr}textarea{grid-column:1}
}
@media(max-width:520px){
  .site-shell{width:94vw}.hero h1{font-size:2.55rem}.hero-copy>p{font-size:1rem}
  .hero-stats{gap:16px;flex-wrap:wrap}.hero-stat{width:46%}
  .cards{grid-template-columns:1fr}.section{padding:52px 0}.hero-art{min-height:310px}
  .footer-inner{display:block;text-align:center}.footer-links{justify-content:center;margin:17px 0}
}


/* =========================================================
   V28 — image framing / clipping corrections
   ========================================================= */

/* Shared header logo: no stretched/cropped background strip */
.brand img{
  width:320px!important;
  height:60px!important;
  object-fit:contain!important;
  object-position:left center!important;
  border-radius:0!important;
}

/* Home hero image: clean hero-only crop, fully visible */
.mascot-art{
  min-height:410px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#061a2b!important;
}
.mascot-art img{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Contact image: never cut the ears/head or show lower feature cards */
.contact-photo{
  background:#061a2b!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.contact-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Portfolio/project screenshots should be shown whole, not cropped */
.mini-project{
  display:flex!important;
  flex-direction:column!important;
}
.mini-project img{
  width:100%!important;
  height:285px!important;
  object-fit:contain!important;
  object-position:center top!important;
  background:#ffffff!important;
}
.project img{
  width:100%!important;
  height:330px!important;
  object-fit:contain!important;
  object-position:center top!important;
  background:#ffffff!important;
}

/* Services laptop screen should preserve the full project screenshot */
.laptop-screen{
  background:#ffffff!important;
}
.laptop-screen img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center top!important;
  background:#ffffff!important;
}

/* Prevent any hero visual from accidentally hiding its contents */
.hero-art{
  overflow:hidden!important;
}

/* About / Process / Pricing are HTML compositions: no image cropping involved */
@media(max-width:1160px){
  .brand img{width:245px!important;height:54px!important}
}
@media(max-width:850px){
  .brand img{width:205px!important;height:48px!important}
}


/* =========================================================
   V29 — CLEAN HERO / NO BAKED PAGE ARTIFACTS
   ========================================================= */

/* Desktop hero headings: one clean white line + one clean orange line. */
.hero h1{
  font-size:clamp(3.1rem,4.55vw,5.05rem)!important;
}
.hero h1 .white,
.hero h1 .orange{
  display:block!important;
  white-space:nowrap!important;
}

/* Home: clean photo crop only; no baked nav, text, or feature cards. */
body[data-page="home"] .hero-art{
  min-height:0!important;
  aspect-ratio:2.055 / 1!important;
  background:#061a2b!important;
}
body[data-page="home"] .mascot-art img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  max-height:none!important;
}

/* Contact: eliminate the old raster crop entirely.
   The hero is now a true HTML/CSS contact console. */
body[data-page="start"] .contact-art{
  grid-template-columns:.78fr 1.22fr!important;
  min-height:410px!important;
}
body[data-page="start"] .contact-photo{
  display:grid!important;
  align-content:center!important;
  gap:16px!important;
  padding:24px!important;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,106,0,.13),transparent 34%),
    linear-gradient(155deg,#0d3554,#061b2d)!important;
}
body[data-page="start"] .contact-photo img{
  display:none!important;
}
.contact-hero-item{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:15px;
  border:1px solid rgba(89,177,236,.24);
  background:linear-gradient(180deg,#0b3150,#061b2d);
  box-shadow:0 12px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)
}
.contact-hero-icon{
  width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  font-size:1.25rem;font-weight:950;
  background:radial-gradient(circle at 35% 28%,#ffd777,#ff7a00 36%,#8f2b00 78%);
  border:2px solid #ffb34f;
  box-shadow:0 5px 0 #621f00,0 10px 18px rgba(0,0,0,.27)
}
.contact-hero-item strong{display:block;margin-bottom:3px}
.contact-hero-item span{display:block;color:#aec2cf;font-size:.84rem}

/* Keep header logo consistent and clean. */
.brand img{
  object-fit:contain!important;
  object-position:left center!important;
}

/* Mobile can wrap headings normally. */
@media(max-width:850px){
  .hero h1 .white,
  .hero h1 .orange{
    white-space:normal!important;
  }
  body[data-page="home"] .hero-art{aspect-ratio:auto!important;min-height:330px!important}
  body[data-page="start"] .contact-art{grid-template-columns:1fr!important}
}


/* =========================================================
   V30 — HOME MASCOT / EARS FIX
   ========================================================= */
body[data-page="home"] .hero-inner{
  grid-template-columns:minmax(0,.88fr) minmax(620px,1.12fr)!important;
}
body[data-page="home"] .hero-art{
  min-height:0!important;
  height:auto!important;
  aspect-ratio:1.75 / 1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#061a2b!important;
}
body[data-page="home"] .mascot-art img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
}
@media(max-width:1160px){
  body[data-page="home"] .hero-inner{grid-template-columns:1fr!important}
  body[data-page="home"] .hero-art{aspect-ratio:1.75 / 1!important}
}
@media(max-width:850px){
  body[data-page="home"] .hero-art{aspect-ratio:auto!important;min-height:360px!important}
}

/* =========================================================
   V31 — FINAL IMAGE FRAMING + NAV CONSISTENCY
   ========================================================= */
/* Home artwork must show the complete mascot, including both ears. */
body[data-page="home"] .hero-art{
  aspect-ratio:1.62 / 1!important;
  min-height:440px!important;
  padding:0!important;
  background:#061a2b!important;
}
body[data-page="home"] .mascot-art img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center center!important;
}
/* Keep every desktop header on the exact same geometry. */
.site-header .header-inner{min-height:108px!important}
.main-nav{align-items:center!important}
.main-nav>a:not(.nav-cta){white-space:nowrap!important}
@media(max-width:1160px){
  body[data-page="home"] .hero-art{min-height:390px!important;aspect-ratio:1.62 / 1!important}
}
@media(max-width:850px){
  body[data-page="home"] .hero-art{min-height:0!important;aspect-ratio:1.5 / 1!important}
}


/* =========================================================
   V32 — INTERIOR HERO, CONTACT FORM & DEVICE FIXES
   ========================================================= */
/* Prevent hero copy from intruding underneath the artwork. */
.hero-copy,.hero-art{min-width:0!important;}
body:not([data-page="home"]) .hero-inner{
  grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr)!important;
  gap:48px!important;
}
body:not([data-page="home"]) .hero h1{
  font-size:clamp(3rem,4vw,4.55rem)!important;
  line-height:.96!important;
  max-width:100%!important;
}
body:not([data-page="home"]) .hero h1 .white,
body:not([data-page="home"]) .hero h1 .orange{
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
body:not([data-page="home"]) .hero-copy>p{max-width:660px!important;}

/* Portfolio needs a little more copy room so its headline never hides behind projects. */
body[data-page="portfolio"] .hero-inner{
  grid-template-columns:minmax(0,.95fr) minmax(620px,1.05fr)!important;
}
body[data-page="portfolio"] .hero h1{font-size:clamp(3rem,3.7vw,4.2rem)!important;}
body[data-page="portfolio"] .portfolio-art{min-height:390px!important;}

/* Contact: the top project box is a REAL form now. */
body[data-page="start"] .hero-inner{
  grid-template-columns:minmax(0,.92fr) minmax(650px,1.08fr)!important;
}
body[data-page="start"] .hero h1{font-size:clamp(3rem,3.75vw,4.35rem)!important;}
body[data-page="start"] .contact-art{
  grid-template-columns:.76fr 1.24fr!important;
  min-height:405px!important;
  align-items:stretch!important;
}
.hero-contact-form{
  padding:22px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border-radius:17px!important;
  border:1px solid var(--line)!important;
  background:linear-gradient(160deg,#0c3453,#061b2d)!important;
  box-shadow:none!important;
}
.hero-contact-form h3{margin:0 0 15px!important;font-size:1.35rem!important;}
.hero-contact-form input,
.hero-contact-form textarea{
  width:100%!important;
  margin:0 0 10px!important;
  padding:12px 13px!important;
  border-radius:9px!important;
  border:1px solid #1f6598!important;
  background:#031625!important;
  color:#fff!important;
  font:inherit!important;
}
.hero-contact-form input{height:45px!important;}
.hero-contact-form textarea{height:94px!important;min-height:94px!important;resize:vertical!important;}
.hero-contact-form input:focus,
.hero-contact-form textarea:focus{outline:none!important;border-color:#ff8a24!important;box-shadow:0 0 0 3px rgba(255,106,0,.12)!important;}
.hero-contact-form .btn-primary{width:100%!important;margin-top:1px!important;cursor:pointer!important;border:1px solid #ffc875!important;}

/* Services: correct laptop proportions and remove the odd fake phone. */
body[data-page="services"] .device-scene{
  min-height:410px!important;
  padding:36px 44px 42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body[data-page="services"] .laptop{
  width:min(96%,760px)!important;
  max-width:760px!important;
  padding:14px 14px 28px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#222f3a,#060a0e)!important;
  box-shadow:0 26px 55px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
body[data-page="services"] .laptop-screen{
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  border-radius:9px!important;
  background:#fff!important;
  border:4px solid #111!important;
}
body[data-page="services"] .laptop-screen img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center top!important;
  background:#fff!important;
}
body[data-page="services"] .laptop::after{
  left:8%!important;right:8%!important;bottom:-12px!important;height:14px!important;
}
body[data-page="services"] .phone{display:none!important;}
.device-note{
  position:absolute;left:50%;bottom:17px;transform:translateX(-50%);
  padding:7px 13px;border-radius:999px;border:1px solid rgba(90,181,240,.24);
  background:rgba(3,22,37,.88);color:#b8cad6;font-size:.74rem;font-weight:800;
  letter-spacing:.04em;white-space:nowrap;
}

@media(max-width:1250px){
  body:not([data-page="home"]) .hero-inner,
  body[data-page="portfolio"] .hero-inner,
  body[data-page="start"] .hero-inner{grid-template-columns:1fr!important;}
  body:not([data-page="home"]) .hero-copy{padding-bottom:22px!important;}
  body:not([data-page="home"]) .hero-art{margin-bottom:48px!important;}
  body:not([data-page="home"]) .hero h1{max-width:900px!important;}
}
@media(max-width:850px){
  body[data-page="services"] .device-scene{padding:24px 20px 34px!important;}
  .device-note{bottom:8px;font-size:.68rem;}
  body[data-page="start"] .contact-art{grid-template-columns:1fr!important;}
}


/* V33 — restore Pricing navigation + refine orange buttons */
.nav-cta,.btn-primary{
  background:linear-gradient(180deg,#ffb44a 0%,#ff8a20 48%,#ff6a00 100%)!important;
  border:1px solid #ffc16a!important;
  box-shadow:0 4px 10px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.55)!important;
  transform:none!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.nav-cta:hover,.btn-primary:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.62)!important;
  filter:brightness(1.025);
}
.nav-cta:active,.btn-primary:active{
  transform:translateY(1px)!important;
  box-shadow:0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.45)!important;
}


/* =========================================================
   V35 — FOOTER NAV + CLEAN ORANGE DEPTH
   Removes the orange "duplicate" shadow while retaining
   restrained neutral depth and the existing premium finish.
   ========================================================= */

/* Orange CTA buttons */
.btn-orange,
.nav-cta,
.pricing-button-primary,
button.btn-orange,
a.btn-orange,
a.nav-cta,
.hero-actions .btn-orange,
.cta-buttons .btn-orange,
.contact-submit,
button[type="submit"] {
    box-shadow:
        0 5px 12px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255,255,255,.38) !important;
}

/* Orange circular graphics / icon medallions */
.feature-icon.orange,
.icon-orange,
.orange-icon,
.pricing-icon.orange,
.contact-icon.orange,
.value-icon.orange,
.service-icon.orange,
.process-icon.orange,
[class*="icon"][class*="orange"] {
    box-shadow:
        0 5px 12px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* Hover keeps a small neutral lift — never an orange lower duplicate */
.btn-orange:hover,
.nav-cta:hover,
.pricing-button-primary:hover,
button.btn-orange:hover,
a.btn-orange:hover,
a.nav-cta:hover,
.contact-submit:hover,
button[type="submit"]:hover {
    box-shadow:
        0 7px 16px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.42) !important;
    transform: translateY(-1px);
}

/* Footer navigation now has room for the complete top-nav set */
.simple-footer .render-shell {
    gap: 24px;
}

.simple-footer .footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

@media (max-width: 900px) {
    .simple-footer .footer-links {
        gap: 12px 18px;
    }
}


/* =========================================================
   V36 — DISTINCT MASCOT PLACEMENTS
   Image framing is intentionally non-cropping. Existing hero
   text and functional contact form remain in their own columns.
   ========================================================= */
.mascot-art-frame{
  padding:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#06192a!important;
}
.mascot-art-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
body[data-page="about"] .about-art{
  min-height:410px!important;
  aspect-ratio:1.35 / 1!important;
}
body[data-page="about"] .mascot-about-image{
  object-fit:cover!important;
  object-position:center 42%!important;
}

.mascot-feature-section{
  padding:56px 0;
  background:#061522;
  border-top:1px solid rgba(61,163,222,.14);
  border-bottom:1px solid rgba(61,163,222,.14);
}
.mascot-feature-grid{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:42px;
  align-items:center;
}
.mascot-feature-copy{min-width:0}
.mascot-feature-copy h2{margin:14px 0 14px;font-size:clamp(2rem,3.2vw,3.45rem);line-height:1.02;color:#f7fbff}
.mascot-feature-copy h2 span{color:#ff6a00}
.mascot-feature-copy p{margin:0;max-width:600px;color:#c9d9e6;font-size:1.05rem;line-height:1.7}
.mascot-feature-image-frame{
  min-width:0;
  border:1px solid rgba(61,163,222,.35);
  border-radius:22px;
  overflow:hidden;
  background:#071b2d;
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}
.mascot-feature-image-frame img{
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  object-position:center;
}

body[data-page="start"] .contact-art{
  grid-template-columns:minmax(280px,.92fr) minmax(360px,1.08fr)!important;
  align-items:stretch!important;
}
body[data-page="start"] .mascot-contact-frame{
  min-width:0;
  padding:0!important;
  overflow:hidden!important;
  border-radius:18px;
  background:#071a2a;
  border:1px solid rgba(61,163,222,.28);
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body[data-page="start"] .mascot-contact-frame img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:390px!important;
  object-fit:contain!important;
  object-position:center!important;
}
body[data-page="start"] .hero-contact-form{
  min-width:0!important;
  position:relative!important;
  z-index:2!important;
}

@media(max-width:1000px){
  .mascot-feature-grid{grid-template-columns:1fr;gap:26px}
  .mascot-feature-image-frame img{max-height:none}
  body[data-page="about"] .about-art{aspect-ratio:auto!important;min-height:440px!important}
  body[data-page="start"] .contact-art{grid-template-columns:1fr!important}
  body[data-page="start"] .mascot-contact-frame img{height:auto!important;max-height:none!important}
}
@media(max-width:680px){
  .mascot-feature-section{padding:42px 0}
  body[data-page="about"] .about-art{min-height:360px!important}
}


/* =========================================================
   V37 — MASCOT IMAGE FRAMING FIX
   No crop. No overlap. Exact aspect-ratio containers.
   ========================================================= */

/* Keep all new mascot sections inside the viewport */
body{
  overflow-x:hidden!important;
}

/* ---------- ABOUT ---------- */
/* The About image is portrait (685x1024), so do NOT force it
   into a landscape crop. Give it a dedicated dark display area. */
body[data-page="about"] .about-art.mascot-art-frame{
  min-height:520px!important;
  height:520px!important;
  aspect-ratio:auto!important;
  padding:18px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at 50% 35%, rgba(23,113,174,.18), transparent 50%),
    #06192a!important;
}

body[data-page="about"] .mascot-about-image{
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:16px;
}

/* ---------- PROCESS ---------- */
.process-mascot-section .site-shell{
  width:min(var(--max),94vw)!important;
  margin-inline:auto!important;
}

.process-mascot-section .mascot-feature-grid{
  grid-template-columns:minmax(360px,.78fr) minmax(520px,1.22fr)!important;
  gap:46px!important;
  align-items:center!important;
}

.process-mascot-section .mascot-feature-copy{
  min-width:0!important;
  padding-left:0!important;
}

.process-mascot-section .mascot-feature-image-frame{
  width:100%!important;
  aspect-ratio:844 / 508!important;
  min-width:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#071b2d!important;
}

.process-mascot-section .mascot-feature-image-frame img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* ---------- CONTACT ---------- */
body[data-page="start"] .contact-art{
  grid-template-columns:minmax(330px,.9fr) minmax(390px,1.1fr)!important;
  gap:18px!important;
  align-items:stretch!important;
  overflow:hidden!important;
}

body[data-page="start"] .mascot-contact-frame{
  width:100%!important;
  min-width:0!important;
  aspect-ratio:844 / 508!important;
  align-self:center!important;
  padding:0!important;
  overflow:hidden!important;
}

body[data-page="start"] .mascot-contact-frame img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

body[data-page="start"] .hero-contact-form{
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .process-mascot-section .mascot-feature-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .process-mascot-section .mascot-feature-image-frame{
    width:min(100%,900px)!important;
    margin-inline:auto!important;
  }

  body[data-page="start"] .contact-art{
    grid-template-columns:1fr!important;
  }
  body[data-page="start"] .mascot-contact-frame{
    width:min(100%,760px)!important;
    margin-inline:auto!important;
  }
}

@media(max-width:850px){
  body[data-page="about"] .about-art.mascot-art-frame{
    height:470px!important;
    min-height:470px!important;
  }
}

@media(max-width:620px){
  body[data-page="about"] .about-art.mascot-art-frame{
    height:390px!important;
    min-height:390px!important;
    padding:12px!important;
  }
}


/* =========================================================
   V38 — PROCESS IMAGE WHITE-EDGE FIX
   ========================================================= */
.process-mascot-section .mascot-feature-image-frame{
  padding:0!important;
  border-color:rgba(89,177,236,.24)!important;
  background:#071b2d!important;
}

.process-mascot-section .mascot-feature-image-frame img{
  display:block!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  background:#071b2d!important;
}


/* =========================================================
   V39 — CONTACT IMAGE WHITE-EDGE FIX
   ========================================================= */
body[data-page="start"] .mascot-contact-frame{
  padding:0!important;
  border-color:rgba(89,177,236,.24)!important;
  background:#071b2d!important;
  overflow:hidden!important;
}

body[data-page="start"] .mascot-contact-frame img{
  display:block!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  background:#071b2d!important;
}


/* =========================================================
   V40 — CONTACT PAGE DEDUPLICATION
   One primary form only. Secondary area is contact info only.
   ========================================================= */
.contact-quick-strip{
  padding:34px 0 42px;
  background:linear-gradient(180deg,#071826,#03111f);
  border-top:1px solid rgba(255,255,255,.055);
}
.contact-quick-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.contact-quick-card{
  min-height:92px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:18px 20px;
  border:1px solid rgba(89,177,236,.24);
  border-radius:16px;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,#0b3150,#061b2d);
  box-shadow:0 12px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05);
}
.contact-quick-card strong{display:block;margin-bottom:4px;font-size:1rem}
.contact-quick-card small{display:block;color:#aec2cf;font-size:.84rem;line-height:1.35}
.contact-quick-icon{
  flex:0 0 48px;
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#ffd777,#ff7a00 36%,#8f2b00 78%);
  border:1px solid #ffb34f;
  box-shadow:0 5px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.3);
}
@media(max-width:850px){
  .contact-quick-grid{grid-template-columns:1fr}
}


/* =========================================================
   V41 — CONTACT CTA CLEANUP
   Contact page already is the Get Started / Quote destination.
   ========================================================= */
body[data-page="start"] .hero-actions{
  justify-content:flex-start!important;
}

body[data-page="start"] .hero-actions .btn-secondary{
  margin-left:0!important;
}

/* Keep Contact active in the main navigation; no duplicate header CTA needed. */
body[data-page="start"] .main-nav{
  padding-right:0!important;
}

/* =========================================================
   V42 — PRICING HERO DEDUPLICATION + ALWAYS-VISIBLE MOBILE NAV
   ========================================================= */

/* Pricing hero: one value summary instead of repeating package cards. */
body[data-page="pricing"] .pricing-summary-art{
  min-height:410px;
  padding:26px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
body[data-page="pricing"] .pricing-summary-panel{
  width:100%;
  padding:30px;
  border-radius:20px;
  border:1px solid rgba(89,177,236,.24);
  background:
    radial-gradient(circle at 88% 10%,rgba(255,106,0,.14),transparent 28%),
    linear-gradient(155deg,#0d3656,#061b2d);
  box-shadow:0 20px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
}
body[data-page="pricing"] .pricing-summary-kicker{
  color:#ffad5a;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:12px;
}
body[data-page="pricing"] .pricing-summary-panel h3{
  margin:0 0 24px;
  max-width:650px;
  font-size:clamp(1.65rem,2.25vw,2.35rem);
  line-height:1.06;
  letter-spacing:-.035em;
}
body[data-page="pricing"] .pricing-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
body[data-page="pricing"] .pricing-summary-grid>div{
  position:relative;
  min-height:116px;
  padding:18px 18px 17px 58px;
  border-radius:15px;
  border:1px solid rgba(89,177,236,.19);
  background:linear-gradient(180deg,rgba(12,49,80,.9),rgba(6,27,45,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body[data-page="pricing"] .pricing-summary-grid span{
  position:absolute;
  left:16px;
  top:18px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#171717;
  font-size:.68rem;
  font-weight:950;
  background:linear-gradient(180deg,#ffd36b,#ff7900);
  border:1px solid #ffba55;
  box-shadow:0 4px 0 #842900;
}
body[data-page="pricing"] .pricing-summary-grid strong{
  display:block;
  margin-bottom:5px;
  font-size:.98rem;
}
body[data-page="pricing"] .pricing-summary-grid small{
  display:block;
  color:#aec2cf;
  font-size:.8rem;
  line-height:1.42;
}
body[data-page="pricing"] .pricing-summary-note{
  margin:22px 0 0;
  color:#d3e0e8;
  font-size:.88rem;
  font-weight:800;
}

/* Mobile/tablet navigation stays visible — no hamburger required. */
@media(max-width:850px){
  .site-header{
    height:132px!important;
    min-height:132px!important;
  }
  .header-inner{
    position:relative!important;
    height:132px!important;
    min-height:132px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:72px 60px!important;
    gap:0!important;
    align-items:center!important;
  }
  .brand{
    grid-row:1!important;
    min-width:0!important;
    height:68px!important;
    align-self:center!important;
  }
  .brand img{
    width:215px!important;
    height:54px!important;
  }
  .menu-toggle{
    display:none!important;
  }
  .main-nav,
  .main-nav.open{
    grid-row:2!important;
    display:flex!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:4px 0 10px!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .main-nav::-webkit-scrollbar{display:none!important}
  .main-nav a{
    flex:0 0 auto!important;
    min-height:38px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 12px!important;
    text-align:center!important;
    font-size:.82rem!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(255,255,255,.055)!important;
  }
  .main-nav a:not(.nav-cta)::after{
    left:10px!important;
    right:10px!important;
    bottom:-1px!important;
    height:2px!important;
  }
  .main-nav a.active{
    background:rgba(255,106,0,.08)!important;
    border-color:rgba(255,132,38,.2)!important;
  }
  .main-nav .nav-cta{
    min-height:38px!important;
    margin:0!important;
    padding:0 15px!important;
    border-radius:10px!important;
    font-size:.82rem!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px rgba(0,0,0,.2)!important;
  }

  body[data-page="pricing"] .pricing-summary-art{
    min-height:0!important;
    padding:20px!important;
    margin-bottom:42px!important;
  }
}

@media(max-width:620px){
  .site-header{
    height:126px!important;
    min-height:126px!important;
  }
  .header-inner{
    height:126px!important;
    min-height:126px!important;
    grid-template-rows:68px 58px!important;
  }
  .brand img{
    width:195px!important;
    height:50px!important;
  }
  .main-nav a{
    min-height:36px!important;
    padding:0 10px!important;
    font-size:.77rem!important;
  }
  .main-nav .nav-cta{
    min-height:36px!important;
    padding:0 13px!important;
    font-size:.77rem!important;
  }
  body[data-page="pricing"] .pricing-summary-panel{
    padding:22px 18px!important;
  }
  body[data-page="pricing"] .pricing-summary-grid{
    grid-template-columns:1fr!important;
  }
  body[data-page="pricing"] .pricing-summary-grid>div{
    min-height:102px!important;
  }
}


/* =========================================================
   V43 — PORTFOLIO CLEANUP + AFFORDABLE AIR COMING SOON
   ========================================================= */

/* Portfolio hero no longer repeats project screenshot cards. */
body[data-page="portfolio"] .hero-inner{
  grid-template-columns:minmax(0,920px)!important;
  justify-content:start!important;
}
body[data-page="portfolio"] .hero-copy{
  max-width:920px!important;
}

/* Non-clickable project status styled like the existing project links. */
.project-coming-soon{
  display:inline-block;
  margin-top:14px;
  color:#ff8a24;
  font-weight:900;
  cursor:default;
}