/* =========================================================
   Boiler Inspection — Cool Industrial Theme + Motion Hooks
========================================================= */

/* ---- Theme ---- */
:root{
  --bg: #04080f;
  --bg-2: #091321;
  --surface: #0d1b2a;
  --surface-2:#0f2235;
  --text: #e6f1ff;
  --muted:#a3b6cc;
  --accent:#00e0a4;
  --accent-ink:#031b13;
  --accent-2:#57a6ff;

  --max-w: 1200px;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --ring: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 85% -20%, rgba(0,224,164,.12), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(87,166,255,.10), transparent 60%),
    var(--bg);
}

/* ---- Utils ---- */
.container{width:min(100% - 2rem, var(--max-w)); margin-inline:auto}
.section-pad{padding:clamp(3rem, 5vw, 5rem) 0}
.kicker{color:var(--accent); letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin:0 0 .5rem}
.section-title{font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1.2; margin:0 0 1rem}
.lead{font-size:clamp(1.05rem, 1.4vw, 1.15rem); color:var(--muted)}
.split{display:grid; gap:2rem; grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:1.2fr .9fr; align-items:start}}

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; gap:.75rem}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--text); font-weight:800; min-width:0}
.brand-name{display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.logo{color:var(--accent)}
.nav-toggle{display:none}
.burger{width:42px;height:42px;display:grid;place-items:center;cursor:pointer;border-radius:10px;border:1px solid rgba(255,255,255,.08); -webkit-tap-highlight-color:transparent}
.burger span,.burger span::before,.burger span::after{display:block;width:22px;height:2px;background:var(--text);content:"";position:relative;border-radius:2px;transition:.25s}
.burger span::before{position:absolute;inset:auto 0;top:-6px}
.burger span::after{position:absolute;inset:auto 0;top:6px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center}
.site-nav a{color:var(--text);text-decoration:none;padding:.5rem .75rem;border-radius:999px}
.site-nav .btn{margin-left:.25rem}



@media (max-width:900px){
  .header-inner{padding:.6rem 0}
  .site-nav{
    position:fixed; left:0; right:0; top:56px;
    background:var(--bg-2);
    transform:translateY(-120%); transition:.25s;
    border-bottom:1px solid rgba(255,255,255,.08)
  }
  .site-nav ul{flex-direction:column;padding:1rem}
  .nav-toggle:checked ~ .site-nav{transform:translateY(0)}
  .nav-toggle:checked + .burger span{background:transparent}
  .nav-toggle:checked + .burger span::before{top:0;transform:rotate(45deg)}
  .nav-toggle:checked + .burger span::after{top:0;transform:rotate(-45deg)}
}
@media (max-width:420px){
  .site-nav{top:52px}
  .burger{width:36px;height:36px}
  .brand-name{font-size:.9rem}
}

/* ---- Buttons ---- */
.btn{
  --btn-bg: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent-2)));
  --btn-ink: var(--accent-ink);
  display:inline-block; padding:.85rem 1.15rem; border-radius:999px; font-weight:800;
  color:var(--btn-ink); background:var(--btn-bg); text-decoration:none; border:0;
  box-shadow: 0 10px 35px rgba(0,224,164,.25);
  transform:translateY(0); transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.16);box-shadow:none}
.btn-outline{background:transparent;color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 65%, transparent);box-shadow:none}

/* ---- Hero ---- */
.hero{
  position:relative;
  background: linear-gradient(90deg, var(--bg) 0 55%, #0000),
              url('https://images.unsplash.com/photo-1581091215367-59ab6d7b1e13?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:-30%;
  pointer-events:none; will-change: transform;
  background:
    radial-gradient(900px 450px at 80% 20%, rgba(0,224,164,.12), transparent 60%),
    radial-gradient(700px 350px at 0% 100%, rgba(87,166,255,.12), transparent 60%);
  animation: heroFloat 18s ease-in-out infinite alternate;
  transform: translate3d(0,0,0) scale(1.02);
}
@keyframes heroFloat{
  0%   { transform: translate3d(-1%, 0%, 0) scale(1.02); }
  50%  { transform: translate3d(1.5%, 0.8%, 0) scale(1.02); }
  100% { transform: translate3d(-1%, 0%, 0) scale(1.02); }
}

.hero-inner{display:grid;grid-template-columns:1fr;gap:2rem;padding:clamp(2.5rem,5vw,4rem) 0}
.hero-copy{max-width: 720px}
.hero-copy h1{font-size: clamp(2rem,4.2vw,3.2rem); line-height:1.1; margin:.25rem 0 1rem}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.25rem 0}
.trust-list{display:flex;gap:1rem;padding:0;margin:1.25rem 0 0;list-style:none;color:var(--muted);flex-wrap:wrap}
.trust-list li{position:relative;padding-left:1.15rem}
.trust-list li::before{content:"✓";position:absolute;left:0;color:var(--accent)}

.hero-media{display:none}
@media (min-width:1000px){
  .hero-inner{grid-template-columns:1.05fr .95fr;align-items:center}
  .hero-media{display:block}
}
/* show your PNG nicely */
.hero-photo{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  background:none; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem;
}
.hero-photo img{
  max-width:100%; height:auto; object-fit:contain; display:block;
}
/* slide-in from right */
.hero-media.reveal{transform:translateX(60px); opacity:0}
.hero-media.revealed{transform:none; opacity:1; transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s ease}

/* ---- Intro ---- */
.intro{background:var(--bg);border-top:1px solid rgba(255,255,255,.06)}
.intro .intro-copy{color:var(--muted)}

/* ---- Services ---- */
.services{background:var(--bg-2)}
.service-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:750px){.service-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.service-grid{grid-template-columns:repeat(3,1fr)}}
.card{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid rgba(255,255,255,.08);
  padding:1.25rem; border-radius:var(--radius); box-shadow:var(--shadow);
  transform: translateY(10px); opacity:0;
}
.card h3{margin:.25rem 0 .5rem; font-size:1.15rem}
.card p{color:var(--muted)}
.card:hover{box-shadow:0 14px 40px rgba(0,0,0,.45)}

/* ---- Work ---- */
.work{background:var(--bg)}
.work-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.work-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:900px){.work-grid{grid-template-columns:repeat(3,1fr)}}
.work-card{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.work-card img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:block;
}
.work-card figcaption{padding:.9rem; color:var(--muted); flex-grow:1}

/* ---- Testimonial ---- */
.testimonial{background:#0b1e2c}
.quote{margin:0;padding:clamp(1.25rem,3vw,2rem);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);text-align:center}
.quote p{font-size:clamp(1.05rem,1.6vw,1.25rem)}
.quote footer{margin-top:.75rem;color:var(--muted)}

/* ---- Contact ---- */
.contact{background:var(--bg-2)}
.contact-form{background:var(--surface);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.contact-form .grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:900px){.contact-form .grid{grid-template-columns:repeat(2,1fr)}}
.contact-form label,.contact-form fieldset{display:block}
.contact-form label.full,.contact-form fieldset.full{grid-column:1/-1}
.contact-form span,.contact-form legend{display:block;font-weight:700;margin-bottom:.35rem}
input[type="text"],input[type="email"],select,textarea{
  width:100%;padding:.85rem .95rem;border-radius:12px;color:var(--text);
  background:#0a1926;border:1px solid rgba(255,255,255,.12); outline:none;
}
input:focus,select:focus,textarea:focus{box-shadow:var(--ring)}
textarea{resize:vertical;min-height:140px}
.check{display:inline-flex;gap:.5rem;align-items:center;margin-right:1rem;color:var(--muted)}
.tiny{color:var(--muted);font-size:.875rem}

/* ---- Footer ---- */
.site-footer{background:var(--bg);border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{display:grid;gap:2rem;grid-template-columns:1fr;padding:2rem 0}
@media (min-width:1000px){.footer-inner{grid-template-columns:1.1fr .6fr .9fr}}
.logo-badge{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:800;margin-bottom:.5rem}
.footer-title{font-weight:800;margin:0 0 .5rem}
.footer-links ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}
.social{list-style:none;display:flex;gap:.5rem;padding:0;margin:.75rem 0 0}
.social a{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.15);border-radius:50%;color:var(--muted);text-decoration:none}
.social a:hover{color:var(--text)}

/* ---- Reveal Motion ---- */
.reveal{transform:translateY(14px); opacity:0}
.revealed{transform:none !important; opacity:1 !important; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s linear}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero::after{animation:none}
  .revealed, .card, .work-card, .sector-card{transition:none}
}

/* Floating “Back to Bold Solutions” pill */
.back-fab{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border-radius: 999px;
  background: rgba(0,0,0,.85);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  transition: padding .2s ease, transform .15s ease, background .2s ease;
}
.back-fab svg{width:28px;height:28px;flex:0 0 auto;color:#fff}
.back-fab .label{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .25s ease, opacity .2s ease; font-weight:650; letter-spacing:.01em;
}
.back-fab:hover, .back-fab:focus-visible{padding:.6rem 1rem; transform:translateY(-1px); background:rgba(0,0,0,.9)}
.back-fab:hover .label, .back-fab:focus-visible .label{max-width:220px; opacity:1}
@media (max-width:640px){ .back-fab .label{display:none} }

/* Footer credit */
.footer-credit { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
.footer-credit img {
  height: 40px; width: auto; margin-bottom: .5rem;
  transition: transform .3s ease, filter .3s ease;
}
.footer-credit img:hover {
  transform: translateY(-5px) scale(1.1) rotate(8deg);
  filter: drop-shadow(0 0 10px rgba(0,200,255,.6));
}
.footer-credit p { color: rgba(255,255,255,.6); font-size:.9rem; margin:0 }

/* Footer bottom (address/legal) */
.footer-bottom{ margin-top:1.25rem; border-top:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); }
.footer-bottom-inner{ padding:.9rem 0 1rem }
.footer-legal{ margin:0; font-size:.9rem; color:rgba(255,255,255,.65); line-height:1.5 }
.footer-legal a{ color:#8dd8ff; text-decoration:none; border-bottom:1px dashed rgba(141,216,255,.35) }
.footer-legal a:hover{ border-bottom-color:transparent }
@media (max-width:720px){ .footer-legal{font-size:.875rem} .footer-legal br{display:none} }

/* ========== Mobile header: safe-area + seamless panel ========== */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 900px){
  /* One continuous bar that fills the notch */
  .site-header{
    --mh: 56px;
    z-index: 10000;
    background:#0a141f;           /* solid, no translucency */
    border:none;
    box-shadow:none;
    padding-top: var(--safe-top); /* push content below the notch */
  }

  /* Paint the very top (inside the notch) the same colour */
  .site-header::before{
    content:"";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--safe-top);
    background:#0a141f;
    z-index: 10000;
  }

  .header-inner{
    min-height: var(--mh);
    padding: 0 .75rem;
    display:flex; align-items:center; gap:.5rem;
  }

  .brand{ min-width:0; align-items:center; }
  .brand-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1; font-size:.95rem; }

  .burger{
    width:42px; height:42px;
    margin-left:auto;
    display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color:transparent;
    z-index:10001; /* above panel */
  }

  /* Mobile menu overlays from the very top, but padded down by header height + notch */
  .site-nav{
    position: fixed;
    left: 0; right: 0; top: 0;
    background:#0a141f;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(-110%);
    transition: transform .25s ease;
    z-index: 10000;
    padding-top: calc(var(--safe-top) + var(--mh)); /* sits exactly under header visually */
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .site-nav ul{ padding: 1rem 0 1.25rem; margin:0; gap:.5rem; }
  .site-nav a{ display:block; padding:.75rem 1rem; text-align:center; }

  .nav-toggle:checked ~ .site-nav{ transform: translateY(0); }
}

@media (max-width: 420px){
  .site-header{ --mh: 52px; }
  .burger{ width:36px; height:36px; }
  .brand-name{ font-size:.9rem; }
}

/* === Force hide burger icon on desktop / tablet === */
@media (min-width: 901px) {
  .burger {
    display: none !important;
  }
}

.logo {
  height: 42px;        /* adjust this number until it fits nicely */
  width: auto;         /* keeps proportions */
  vertical-align: middle;
  margin-right: 0.5rem; /* adds a small gap before the text */
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}