/* =========================================================
   Northline HVAC — single page stylesheet
   Theme: white page + second inner container + blue / yellow
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --blue:        #1455A0;
  --blue-700:    #0F4183;
  --blue-900:    #0B2C57;
  --yellow:      #F4C430;
  --yellow-600:  #E0AE1C;
  --ink:         #172033;
  --ink-soft:    #4E5E77;
  --mist:        #EEF5FC;
  --line:        #DCE5EF;
  --white:       #FFFFFF;

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,85,160,.06), 0 6px 16px rgba(20,85,160,.06);
  --shadow:    0 12px 28px rgba(20,85,160,.10);
  --shadow-lg: 0 26px 56px rgba(11,44,87,.16);

  --header-h: 76px;
  --gutter: clamp(20px, 4.5vw, 62px);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'DM Sans','Inter',system-ui,sans-serif;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  color:var(--ink);
}

h1{ font-size:clamp(2rem, 1.15rem + 2.5vw, 3.3rem); }
h2{ font-size:clamp(1.5rem, 1.1rem + 1.35vw, 2.15rem); }
h3{ font-size:clamp(1.02rem, .97rem + .28vw, 1.18rem); }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--blue); text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
dl,dd,dt{ margin:0; }

button,input,label{ font:inherit; }

::selection{ background:var(--yellow); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
  border-radius:6px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:12px; top:-60px;
  z-index:200; background:var(--yellow); color:var(--ink);
  font-weight:600; padding:10px 16px; border-radius:0 0 12px 12px;
  transition:top .25s ease;
}
.skip-link:focus{ top:0; }

/* ---------- 3. Containers ---------- */
.page-shell{
  width:100%;
  max-width:1300px;
  margin-inline:auto;
  padding-inline:clamp(16px, 3.6vw, 34px);
}

/* the second, inner container that holds every main section */
.inner-frame{
  width:100%;
  max-width:1160px;
  margin:clamp(22px,2.6vw,36px) auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:clamp(20px, 2.4vw, 34px);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.section{
  padding:clamp(46px, 5.4vw, 84px) var(--gutter);
  scroll-margin-top:calc(var(--header-h) + 18px);
}
.section + .section{ border-top:1px solid var(--line); }

/* ---------- 4. Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--line);
}

.header-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(10px, 2vw, 26px);
  min-height:var(--header-h);
  padding-block:10px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  flex:0 0 auto;
}
.brand-mark{
  width:42px; height:42px;
  flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--yellow);
  color:var(--ink);
  border-radius:13px;
  font-size:1.05rem;
  transition:transform .35s cubic-bezier(.22,.8,.3,1);
}
.brand:hover .brand-mark{ transform:rotate(-12deg) scale(1.05); }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{
  font-family:'DM Sans',sans-serif;
  font-size:1.2rem;
  letter-spacing:-.02em;
}
.brand-text small{
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
}

/* desktop nav */
.site-nav{ order:2; margin-left:auto; }
.site-nav ul{
  display:flex;
  align-items:center;
  gap:clamp(4px,1.2vw,16px);
}
.site-nav a{
  display:block;
  padding:9px 12px;
  border-radius:10px;
  color:var(--ink);
  font-size:.94rem;
  font-weight:500;
  transition:background .25s ease, color .25s ease;
}
.site-nav a:hover{ background:var(--mist); color:var(--blue); }

.nav-toggle{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}

.nav-burger{ display:none; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 22px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-family:'DM Sans',sans-serif;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.005em;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.22,.8,.3,1), background-color .28s ease,
             color .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.btn i{ transition:transform .28s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover i{ transform:translateX(4px); }
.btn:active{ transform:translateY(0); }

.btn-yellow{
  background:var(--yellow);
  color:var(--ink);
  box-shadow:0 8px 18px rgba(244,196,48,.32);
}
.btn-yellow:hover{ background:var(--yellow-600); }

.btn-outline{
  background:var(--white);
  color:var(--blue);
  border-color:var(--line);
}
.btn-outline:hover{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
}

.btn-blue{
  background:var(--blue);
  color:var(--white);
  box-shadow:0 8px 18px rgba(20,85,160,.22);
}
.btn-blue:hover{ background:var(--blue-700); }
.btn-blue:hover i{ transform:rotate(-14deg); }

/* header call button */
.header-phone{
  order:3;
  flex:0 0 auto;
  gap:9px;
  padding:12px 20px;
  font-size:.92rem;
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  font-family:'DM Sans',sans-serif;
  font-size:.88rem;
  font-weight:600;
  color:var(--blue);
}
.text-link i{ font-size:.72rem; transition:transform .28s ease; }
.text-link:hover{ color:var(--yellow-600); }
.text-link:hover i{ transform:translateX(5px); }

/* ---------- 6. Small shared pieces ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 .9rem;
  font-family:'DM Sans',sans-serif;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
}
.eyebrow-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--yellow);
  flex:0 0 auto;
}
.eyebrow-light{ color:var(--yellow); }

.lead{
  font-size:clamp(1rem, .96rem + .22vw, 1.1rem);
  color:var(--ink-soft);
  max-width:56ch;
}

.section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(18px,3vw,54px);
  align-items:end;
  margin-bottom:clamp(30px,3.6vw,52px);
}
.section-head h2{ margin-bottom:0; }
.section-head-note{
  color:var(--ink-soft);
  font-size:.98rem;
  margin:0;
  padding-left:clamp(0px,1.4vw,20px);
  border-left:3px solid var(--yellow);
  padding-block:4px;
}

/* ---------- 7. Hero ---------- */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,4vw,64px);
  align-items:center;
}

.hero-copy h1{ margin-bottom:.65rem; }
.mark{
  position:relative;
  display:inline;
  background:linear-gradient(transparent 62%, rgba(244,196,48,.55) 62%);
  padding:0 .1em;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:1.5rem 0 1.9rem;
}

.hero-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:1.4rem;
}
.hero-points li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:.86rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.45;
}
.hero-points i{
  margin-top:3px;
  color:var(--blue);
  font-size:.95rem;
  flex:0 0 auto;
}

.hero-media{ position:relative; padding:0 0 26px 26px; }
.hero-offset{
  position:absolute;
  left:0; top:26px; bottom:0; right:26px;
  background:var(--yellow);
  border-radius:var(--r-lg);
}
.hero-media img{
  position:relative;
  width:100%;
  aspect-ratio:5 / 3;
  object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  transition:transform .6s cubic-bezier(.22,.8,.3,1);
}
.hero-media:hover img{ transform:scale(1.025); }
.hero-corner{
  position:absolute;
  top:-12px; right:-10px;
  width:70px; height:70px;
  border:3px solid var(--blue);
  border-radius:18px;
  opacity:.16;
}
.hero-chip{
  position:absolute;
  left:26px; bottom:0;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:calc(100% - 40px);
  padding:14px 20px 14px 16px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow);
}
.chip-icon{
  width:42px; height:42px;
  flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--mist);
  color:var(--blue);
}
.chip-text{ display:flex; flex-direction:column; font-size:.84rem; color:var(--ink-soft); line-height:1.4; }
.chip-text strong{
  font-family:'DM Sans',sans-serif;
  font-size:.95rem;
  color:var(--ink);
}

/* ---------- 8. Features ---------- */
.feature-rail{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--white);
}
.feature-cell{
  padding:clamp(24px,2.4vw,34px) clamp(20px,2vw,28px);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:background-color .3s ease, transform .3s ease;
}
.feature-cell + .feature-cell{ border-left:1px solid var(--line); }
.feature-cell:hover{ background:var(--mist); }
.feature-cell h3{ margin:0; }
.feature-cell p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

.tile{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:15px;
  font-size:1.15rem;
  margin-bottom:4px;
  transition:transform .32s cubic-bezier(.22,.8,.3,1);
}
.feature-cell:hover .tile{ transform:translateY(-4px) rotate(-6deg); }
.tile-blue{ background:var(--blue); color:var(--white); }
.tile-yellow{ background:var(--yellow); color:var(--ink); }

.rule-yellow{
  display:block;
  width:34px; height:3px;
  border-radius:3px;
  background:var(--yellow);
  margin-top:auto;
  transition:width .35s ease;
}
.feature-cell:hover .rule-yellow{ width:64px; }

/* ---------- 9. About ---------- */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(30px,4vw,66px);
  align-items:start;
}
.about-media img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  transition:transform .6s cubic-bezier(.22,.8,.3,1);
}
.about-media:hover img{ transform:scale(1.02); }

.info-panel{
  position:relative;
  width:min(92%,400px);
  margin:-74px 0 0 auto;
  padding:24px 26px 26px;
  background:var(--blue);
  color:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
.info-panel-title{
  font-size:1.02rem;
  color:var(--white);
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.info-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 16px;
}
.info-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.82rem;
  line-height:1.4;
  color:rgba(255,255,255,.9);
}
.info-list i{ color:var(--yellow); font-size:.72rem; margin-top:4px; flex:0 0 auto; }

.about-copy h2{ margin-bottom:.8rem; }
.about-copy p{ color:var(--ink-soft); }

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:1.4rem;
}
.tag-row li{
  padding:7px 15px;
  border-radius:var(--r-pill);
  background:var(--yellow);
  color:var(--ink);
  font-size:.82rem;
  font-weight:600;
}

/* ---------- 10. Services ---------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px;
}
.svc-card{
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:26px 24px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform .32s cubic-bezier(.22,.8,.3,1),
             box-shadow .32s ease, border-color .32s ease;
}
.svc-card-wide{
  grid-column:span 3;
  flex-direction:row;
  align-items:flex-start;
  gap:22px;
  background:var(--mist);
}
.svc-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:rgba(20,85,160,.28);
}
.svc-card h3{ margin:0; }
.svc-card p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

.svc-icon{
  width:50px; height:50px;
  flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:14px;
  background:var(--blue);
  color:var(--white);
  font-size:1.05rem;
  transition:background-color .3s ease, color .3s ease, transform .32s ease;
}
.svc-card:hover .svc-icon{
  background:var(--yellow);
  color:var(--ink);
  transform:rotate(-8deg);
}
.svc-body{ display:flex; flex-direction:column; gap:11px; height:100%; }

/* ---------- 11. System components ---------- */
.sys-stagger{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:22px;
}
.sys-block{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease;
}
.sys-block:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.sys-block-a{ grid-column:span 7; grid-template-columns:1.05fr .95fr; display:grid; }
.sys-block-b{ grid-column:span 5; margin-top:clamp(0px,5vw,66px); display:grid; grid-template-rows:auto 1fr; }
.sys-media{ overflow:hidden; background:var(--blue); }
.sys-media img{
  width:100%;
  height:100%;
  min-height:200px;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.8,.3,1);
}
.sys-block-a .sys-media{ display:grid; align-content:center; }
.sys-block-a .sys-media img{ height:auto; min-height:0; aspect-ratio:3 / 2; }
.sys-block:hover .sys-media img{ transform:scale(1.05); }
.sys-block-b .sys-media img{ height:auto; min-height:0; aspect-ratio:3 / 2; }

.sys-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:11px;
  padding:clamp(22px,2.4vw,32px);
}
.sys-tag{
  align-self:flex-start;
  padding:6px 13px;
  border-radius:var(--r-pill);
  background:var(--mist);
  border:1px solid var(--line);
  color:var(--blue);
  font-family:'DM Sans',sans-serif;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.sys-copy h3{ margin:0; }
.sys-copy p{ margin:0; font-size:.93rem; color:var(--ink-soft); }

.sys-mini{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}
.mini-card{
  padding:26px 24px;
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform .32s cubic-bezier(.22,.8,.3,1), background-color .32s ease;
}
.mini-card:hover{ transform:translateY(-5px); background:var(--white); }
.mini-card h3{ margin:0 0 8px; }
.mini-card p{ margin:0; font-size:.9rem; color:var(--ink-soft); }
.mini-icon{
  width:46px; height:46px;
  display:grid; place-items:center;
  margin-bottom:14px;
  border-radius:50%;
  background:var(--yellow);
  color:var(--ink);
  font-size:1rem;
}

/* ---------- 12. Maintenance ---------- */
.maint-panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,3vw,50px);
  padding:clamp(26px,3.4vw,54px);
  background:var(--blue);
  border-radius:var(--r-xl);
  overflow:hidden;
  align-items:center;
}
.maint-panel::after{
  content:"";
  position:absolute;
  right:-70px; top:-70px;
  width:180px; height:180px;
  border:26px solid rgba(244,196,48,.14);
  border-radius:34px;
  transform:rotate(14deg);
  pointer-events:none;
}
.maint-panel h2{ color:var(--white); }
.maint-intro{ color:rgba(255,255,255,.78); font-size:.96rem; }

.maint-note{
  display:grid;
  gap:11px;
  margin-top:1.5rem;
  padding:18px 20px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
}
.maint-note li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.86rem;
  line-height:1.45;
  color:rgba(255,255,255,.86);
}
.maint-note i{ color:var(--yellow); font-size:.82rem; margin-top:4px; flex:0 0 auto; }

.maint-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(22px,2.4vw,38px);
  align-content:start;
}
.maint-list li{
  display:flex;
  gap:14px;
  padding:19px 0;
  border-top:1px solid rgba(255,255,255,.16);
  transition:transform .3s ease;
}
.maint-list li:hover{ transform:translateX(4px); }
.maint-list h3{
  color:var(--white);
  font-size:1rem;
  margin:0 0 5px;
}
.maint-list p{
  margin:0;
  font-size:.88rem;
  color:rgba(255,255,255,.74);
  line-height:1.55;
}
.maint-icon{
  width:44px; height:44px;
  flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:13px;
  background:var(--yellow);
  color:var(--ink);
  font-size:.98rem;
}

/* ---------- 13. Issues ---------- */
.issues-grid{
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(28px,3.6vw,56px);
  align-items:start;
}
.issues-aside > p{ color:var(--ink-soft); }
.issues-figure{ margin:1.5rem 0 0; }
.issues-figure img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .55s cubic-bezier(.22,.8,.3,1);
}
.issues-figure:hover img{ transform:scale(1.03); }

.issue-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.issue-card{
  position:relative;
  padding:22px 22px 20px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:transform .32s cubic-bezier(.22,.8,.3,1),
             box-shadow .32s ease, border-color .32s ease;
}
.issue-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:3px; width:0;
  background:var(--yellow);
  transition:width .38s cubic-bezier(.22,.8,.3,1);
}
.issue-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:rgba(20,85,160,.25);
}
.issue-card:hover::before{ width:100%; }
.issue-card h3{ margin:0 0 7px; }
.issue-card p{ margin:0; font-size:.89rem; color:var(--ink-soft); }
.issue-check{
  margin-top:12px !important;
  padding-top:11px;
  border-top:1px dashed var(--line);
  font-size:.85rem !important;
  color:var(--ink) !important;
}
.issue-check span{
  display:inline-block;
  margin-right:7px;
  padding:2px 9px;
  border-radius:var(--r-pill);
  background:var(--yellow);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---------- 14. Seasonal tips ---------- */
.tips-grid{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(28px,3.6vw,56px);
  align-items:start;
}
.tips-aside{ position:sticky; top:calc(var(--header-h) + 24px); }
.tips-aside h2{ margin-bottom:.7rem; }
.tips-aside > p:last-child{ color:var(--ink-soft); }

.tips-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,2.6vw,40px);
}
.tips-list li{
  display:flex;
  gap:14px;
  padding:19px 0;
  border-top:1px solid var(--line);
  transition:transform .3s ease;
}
.tips-list li:hover{ transform:translateX(4px); }
.tips-list h3{ margin:0 0 5px; }
.tips-list p{ margin:0; font-size:.89rem; color:var(--ink-soft); line-height:1.55; }
.tip-mark{
  width:42px; height:42px;
  flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:50%;
  border:2px solid var(--yellow);
  color:var(--blue);
  font-size:.95rem;
}

/* ---------- 15. Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,3.4vw,52px);
  align-items:start;
}
.contact-wrap{
  background:var(--mist);
  border-radius:var(--r-xl);
  padding:clamp(24px,3vw,46px);
}
.contact-grid > *{ min-width:0; }
.contact-copy > p{ color:var(--ink-soft); }
.contact-copy .hero-actions{ margin-bottom:1.4rem; }
.contact-figure{ margin:0; }
.contact-figure img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:transform .55s cubic-bezier(.22,.8,.3,1);
}
.contact-figure:hover img{ transform:scale(1.03); }

.contact-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);
  box-shadow:var(--shadow-sm);
}
.contact-card h3{ margin-bottom:6px; }
.contact-list{ margin-top:6px; }
.contact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 0;
  border-top:1px solid var(--line);
}
.contact-row dt{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:'DM Sans',sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.contact-row dd{
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
  text-align:right;
  min-width:0;
  overflow-wrap:anywhere;
}
.contact-icon{
  width:38px; height:38px;
  flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--yellow);
  color:var(--ink);
  font-size:.9rem;
  letter-spacing:0;
  text-transform:none;
}
.contact-note{
  margin-top:18px;
  padding-top:16px;
  border-top:1px dashed var(--line);
  font-size:.82rem;
  color:var(--ink-soft);
}

/* ---------- 16. Footer ---------- */
.site-footer{
  margin-top:clamp(30px,4vw,56px);
  border-top:1px solid var(--line);
  padding-top:clamp(40px,4.6vw,64px);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr) minmax(0,.85fr);
  gap:clamp(24px,3vw,52px);
}
.footer-brand p{
  margin-top:1.1rem;
  max-width:52ch;
  font-size:.92rem;
  color:var(--ink-soft);
}
.footer-col h2{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:14px;
}
.footer-col ul{ display:grid; gap:9px; }
.footer-col a{
  font-size:.91rem;
  color:var(--ink-soft);
  transition:color .25s ease, padding-left .25s ease;
}
.footer-col a:hover{ color:var(--blue); padding-left:5px; }

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  margin-top:clamp(26px,3vw,44px);
  padding:20px 0 28px;
  border-top:1px solid var(--line);
  font-size:.85rem;
  color:var(--ink-soft);
}
.footer-base p{ margin:0; }

/* ---------- 17. Animation ---------- */
@keyframes riseIn{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}

.reveal{
  opacity:0;
  animation:riseIn .72s cubic-bezier(.22,.8,.3,1) forwards;
}
.d1{ animation-delay:.08s; }
.d2{ animation-delay:.16s; }
.d3{ animation-delay:.24s; }
.d4{ animation-delay:.32s; }
.d5{ animation-delay:.40s; }
.d6{ animation-delay:.48s; }

.stagger > *{
  opacity:0;
  animation:riseIn .6s cubic-bezier(.22,.8,.3,1) forwards;
}
.stagger > *:nth-child(1){ animation-delay:.05s; }
.stagger > *:nth-child(2){ animation-delay:.11s; }
.stagger > *:nth-child(3){ animation-delay:.17s; }
.stagger > *:nth-child(4){ animation-delay:.23s; }
.stagger > *:nth-child(5){ animation-delay:.29s; }
.stagger > *:nth-child(6){ animation-delay:.35s; }
.stagger > *:nth-child(7){ animation-delay:.41s; }
.stagger > *:nth-child(8){ animation-delay:.47s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal, .stagger > *{ opacity:1; transform:none; }
}

/* =========================================================
   18. Responsive
   ========================================================= */

/* --- tighten the desktop bar before it runs out of room --- */
@media (max-width:1180px){
  .site-nav ul{ gap:1px; }
  .site-nav a{ padding:9px 9px; font-size:.9rem; }
  .header-phone{ padding:11px 16px; font-size:.86rem; gap:8px; }
}

/* --- mobile navigation --- */
@media (max-width:1000px){
  .nav-burger{
    order:4;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:46px; height:46px;
    margin-left:0;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:13px;
    cursor:pointer;
    transition:background-color .25s ease, border-color .25s ease;
  }
  .nav-burger:hover{ background:var(--mist); }
  .burger-bar{
    display:block;
    width:20px; height:2px;
    border-radius:2px;
    background:var(--ink);
    transition:transform .3s cubic-bezier(.22,.8,.3,1), opacity .22s ease;
  }
  .nav-toggle:checked ~ .nav-burger{ background:var(--yellow); border-color:var(--yellow); }
  .nav-toggle:checked ~ .nav-burger .burger-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger .burger-bar:nth-child(2){ opacity:0; transform:scaleX(.3); }
  .nav-toggle:checked ~ .nav-burger .burger-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .site-nav{
    order:5;
    position:absolute;
    left:0; right:0; top:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0 20px;
    background:var(--white);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 34px rgba(11,44,87,.10);
    transition:max-height .4s cubic-bezier(.22,.8,.3,1), opacity .28s ease, padding .3s ease;
  }
  .site-nav ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .site-nav a{
    padding:12px 12px;
    font-size:1rem;
    border-radius:12px;
  }
  .nav-toggle:checked ~ .site-nav{
    max-height:520px;
    opacity:1;
    padding:16px 20px 24px;
  }

  .header-phone{
    order:3;
    margin-left:auto;
    padding:12px 18px;
    font-size:.88rem;
  }
}

/* --- small phones: the call button collapses to its icon --- */
@media (max-width:600px){
  .header-phone{
    width:46px;
    height:46px;
    padding:0;
    gap:0;
    border-radius:13px;
    font-size:1rem;
  }
  .header-phone .phone-label{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }
}

/* --- narrow phones: contact rows stack instead of squeezing --- */
@media (max-width:430px){
  .contact-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .contact-row dd{ text-align:left; }
}

/* --- tablet / small desktop --- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-media{ max-width:640px; }
  .hero-points{ max-width:640px; }

  .section-head{ grid-template-columns:1fr; align-items:start; }
  .section-head-note{ max-width:70ch; }

  .feature-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-cell:nth-child(odd){ border-left:0; }
  .feature-cell:nth-child(n+3){ border-top:1px solid var(--line); }

  .about-grid{ grid-template-columns:1fr; }
  .about-media{ max-width:520px; }
  .info-panel{ width:min(96%,440px); margin-top:-60px; }

  .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc-card{ grid-column:span 1; }
  .svc-card-wide{ grid-column:span 2; }

  .sys-stagger{ grid-template-columns:1fr; }
  .sys-block-b{ margin-top:0; }
  .sys-block-a{ grid-template-columns:1fr 1fr; }
  .sys-mini{ grid-template-columns:1fr; }

  .maint-panel{ grid-template-columns:1fr; }
  .maint-side{ max-width:560px; }

  .issues-grid{ grid-template-columns:1fr; }
  .issues-aside{ max-width:620px; }

  .tips-grid{ grid-template-columns:1fr; }
  .tips-aside{ max-width:560px; position:static; }

  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:720px){
  .hero-points{ grid-template-columns:1fr; gap:12px; }
  .maint-list{ grid-template-columns:1fr; }
  .tips-list{ grid-template-columns:1fr; }
  .info-list{ grid-template-columns:1fr; }
  .brand-text small{ display:none; }
}

/* --- mobile --- */
@media (max-width:560px){
  .section{ padding-top:clamp(38px,8vw,54px); }

  .feature-rail{ grid-template-columns:1fr; }
  .feature-cell + .feature-cell{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .feature-cell:nth-child(n+3){ border-top:1px solid var(--line); }

  .svc-grid{ grid-template-columns:1fr; }
  .svc-card, .svc-card-wide{ grid-column:span 1; flex-direction:column; }

  .sys-block-a{ grid-template-columns:1fr; }

  .issue-grid{ grid-template-columns:1fr; }

  .contact-row{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .contact-row dd{ text-align:left; }

  .hero-actions .btn{ width:100%; }
  .btn{ padding:13px 18px; font-size:.92rem; }

  .hero-media{ padding:0 0 22px 18px; }
  .hero-offset{ top:20px; right:18px; }
  .hero-chip{ left:18px; padding:12px 14px 12px 12px; }
  .hero-corner{ display:none; }

  .footer-grid{ grid-template-columns:1fr; }
  .footer-base{ flex-direction:column; align-items:flex-start; }
}