/* ===========================================================================
   Siding Contractor London Ontario - Concept 3
   Design tokens + reusable component system.
   Lime is a CONVERSION colour only: CTA fills. Never decoration or wash.
   =========================================================================== */
:root{
  --blue:#0057D9; --blue-700:#0046AE; --blue-900:#00347F;
  --slate:#2E3A46; --gray:#E5E7EB; --gray-50:#F7F8FA; --gray-200:#D6DAE0;
  --lime:#84CC16; --lime-600:#6DAA12; --teal:#14B8A6; --white:#fff;
  --ink:#1B232B; --body:#4A5763;
  --display:"Montserrat",system-ui,sans-serif;
  --text:"Inter",system-ui,sans-serif;
  --wrap:1200px; --gut:clamp(1rem,4vw,2rem); --r:10px; --r-lg:14px;
  --shadow:0 4px 12px rgba(27,35,43,.08),0 2px 4px rgba(27,35,43,.04);
  --shadow-lg:0 18px 40px rgba(27,35,43,.14),0 4px 10px rgba(27,35,43,.06);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--white); color:var(--body); font-family:var(--text);
  font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); line-height:1.15;
  margin:0; font-weight:700; letter-spacing:-.018em; }
h1{ font-size:clamp(2rem,1.3rem + 2.9vw,3.25rem); font-weight:800; line-height:1.08; }
h2{ font-size:clamp(1.55rem,1.15rem + 1.6vw,2.35rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1.05em; } p:last-child{ margin-bottom:0; }
a{ color:var(--blue); text-underline-offset:2px; } a:hover{ color:var(--blue-700); }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:4px; }
.hero :focus-visible,.stickybar :focus-visible,.foot :focus-visible,
.band-slate :focus-visible,.closer :focus-visible{ outline-color:var(--lime); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:200; background:#fff; padding:.7rem 1rem;
  border-radius:var(--r); box-shadow:var(--shadow-lg); }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }
.eyebrow{ font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:0 0 .6rem; }
.hero .eyebrow,.band-slate .eyebrow,.closer .eyebrow{ color:#BBD4FF; }
.lede{ font-size:1.1rem; line-height:1.6; }
.prose h2{ margin:2.4rem 0 .8rem; } .prose h2:first-child{ margin-top:0; }
.prose h3{ margin:1.6rem 0 .5rem; }
.prose ul{ margin:0 0 1.05em; padding-left:1.15rem; } .prose li{ margin:.35em 0; }
.center{ text-align:center; } .center .eyebrow{ margin-inline:auto; }
.measure{ max-width:44rem; } .center .measure{ margin-inline:auto; }
/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:700; font-size:.95rem; padding:.9rem 1.5rem;
  border-radius:var(--r); border:2px solid transparent; text-decoration:none;
  cursor:pointer; line-height:1.2; white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s,transform .16s; }
.btn:hover{ transform:translateY(-1px); }
.btn-cta{ background:var(--lime); color:#1E2B07; }
.btn-cta:hover{ background:var(--lime-600); color:#1E2B07; }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-700); color:#fff; }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
.btn-outline{ background:#fff; color:var(--blue); border-color:var(--gray-200); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue-700); }
.btn-lg{ padding:1.05rem 1.75rem; font-size:1.02rem; }
.btn-block{ width:100%; } .btn svg{ flex:none; }
/* Header */
.topbar{ background:#fff; border-bottom:1px solid var(--gray); }
.topbar-in{ display:flex; align-items:center; gap:1.25rem; min-height:76px; }
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; flex:none; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-1{ font-family:var(--display); font-weight:800; font-size:1.02rem;
  letter-spacing:-.01em; color:var(--blue); text-transform:uppercase; }
.brand-2{ font-family:var(--display); font-weight:600; font-size:.63rem;
  letter-spacing:.17em; color:var(--slate); text-transform:uppercase; margin-top:.2rem; }
.tagline{ color:var(--slate); font-size:.9rem; }
.topbar-cta{ margin-left:auto; display:flex; align-items:center; gap:1.1rem; }
.callblock{ display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.callblock .lbl{ display:block; font-size:.7rem; color:var(--slate);
  letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.callblock .num{ display:block; font-family:var(--display); font-weight:700;
  font-size:1.08rem; color:var(--blue); }
.callblock:hover .num{ color:var(--blue-700); }
.navbar{ background:var(--blue-900); }
.nav>ul{ display:flex; margin:0; padding:0; }
.nav li{ list-style:none; position:relative; }
.nav a{ color:#DCE8FF; text-decoration:none; font-family:var(--display);
  font-weight:600; font-size:.9rem; padding:1rem .95rem; display:block; }
.nav a:hover,.nav a:focus-visible{ color:#fff; background:rgba(255,255,255,.08); }
.nav .current>a{ color:#fff; box-shadow:inset 0 -3px 0 var(--lime); }
.nav .has-sub>button{ all:unset; color:#DCE8FF; font-family:var(--display);
  font-weight:600; font-size:.9rem; padding:1rem .95rem; display:flex;
  align-items:center; gap:.4rem; cursor:pointer; box-sizing:border-box; }
.nav .has-sub>button:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav .has-sub>button::after{ content:""; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); }
.sub{ position:absolute; top:100%; left:0; min-width:272px; background:#fff;
  border-radius:0 0 var(--r) var(--r); box-shadow:var(--shadow-lg); padding:.4rem;
  margin:0; display:none; z-index:60; }
.sub a{ color:var(--slate); padding:.6rem .8rem; border-radius:6px; font-weight:500; }
.sub a:hover{ background:var(--gray-50); color:var(--blue); }
.has-sub:hover>.sub,.has-sub>button[aria-expanded="true"]+.sub{ display:block; }
.navtoggle{ display:none; }
/* Sticky conversion bar */
.stickybar{ position:fixed; left:0; right:0; top:0; z-index:90;
  background:var(--blue-900); color:#fff; box-shadow:0 6px 22px rgba(0,0,0,.22);
  transform:translateY(-100%); transition:transform .28s ease; will-change:transform; }
.stickybar[data-show="true"]{ transform:translateY(0); }
.stickybar-in{ display:flex; align-items:center; gap:.85rem; padding:.6rem 0; }
.sticky-call{ background:var(--lime); color:#1E2B07; border-radius:var(--r);
  padding:.7rem 1.35rem; text-decoration:none; display:flex; align-items:center;
  gap:.6rem; font-family:var(--display); font-weight:800; font-size:1.1rem;
  flex:none; line-height:1.15; transition:background .16s; }
.sticky-call:hover{ background:var(--lime-600); color:#1E2B07; }
.sticky-call .sc-lbl{ display:block; font-size:.61rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; opacity:.78; }
.sticky-form{ display:flex; align-items:center; gap:.55rem; flex:1 1 auto; }
.sticky-form select,.sticky-form input{ font-family:var(--text); font-size:.9rem;
  padding:.62rem .7rem; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1); color:#fff; border-radius:8px; min-width:0; flex:1 1 0; }
.sticky-form select option{ color:var(--ink); }
.sticky-form input::placeholder{ color:rgba(255,255,255,.65); }
.sticky-form .btn{ flex:none; padding:.66rem 1.2rem; }
.sticky-close{ all:unset; cursor:pointer; color:rgba(255,255,255,.65);
  font-size:1.4rem; line-height:1; padding:.35rem .5rem; flex:none; border-radius:6px; }
.sticky-close:hover{ color:#fff; }
.mobilebar{ display:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; }
  .btn:hover{ transform:none; }
}
/* Hero */
.hero{ background:linear-gradient(180deg,var(--blue-900) 0%,#00408F 55%,#0049A6 100%);
  color:#fff; position:relative; }
.hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:4px;
  background:linear-gradient(90deg,var(--lime),var(--teal)); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,5vw,4.25rem); }
.hero h1{ color:#fff; margin:0 0 1rem; }
.hero-sub{ color:#CFE0FB; font-size:1.08rem; max-width:34rem; margin:0 0 1.6rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.9rem; }
.hero-points{ display:flex; flex-wrap:wrap; gap:1.2rem 2.1rem; padding:1.35rem 0 0;
  margin:0; list-style:none; border-top:1px solid rgba(255,255,255,.18); }
.hero-points li{ display:flex; align-items:center; gap:.6rem; font-size:.88rem;
  color:#CFE0FB; max-width:15rem; line-height:1.35; }
.hero-points svg{ flex:none; color:var(--lime); }
/* Quote panel */
.quotecard{ background:#fff; border-radius:var(--r-lg); padding:1.5rem;
  box-shadow:var(--shadow-lg); color:var(--body); }
.quotecard h2{ font-size:1.4rem; margin:0 0 .35rem; }
.quotecard .qc-sub{ font-size:.92rem; color:var(--slate); margin:0 0 1.1rem; }
.field{ margin-bottom:.85rem; }
.field label{ display:block; font-family:var(--display); font-weight:600;
  font-size:.8rem; color:var(--slate); margin-bottom:.3rem; }
.field .req{ color:#C2410C; }
.field input,.field select,.field textarea{ width:100%; font-family:var(--text);
  font-size:.95rem; padding:.72rem .8rem; border:1px solid var(--gray-200);
  border-radius:8px; background:var(--gray-50); color:var(--ink); }
.field input:focus,.field select:focus,.field textarea:focus{ background:#fff;
  border-color:var(--blue); }
.field textarea{ min-height:5.2rem; resize:vertical; }
.form-note{ display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-size:.76rem; color:var(--slate); margin:.7rem 0 0; }
.hp{ position:absolute; left:-9999px; }
/* Sections */
.band{ padding:clamp(2.75rem,6vw,4.5rem) 0; }
.band-alt{ background:var(--gray-50); }
.band-slate{ background:var(--slate); color:#C9D2DB; }
.band-slate h2,.band-slate h3{ color:#fff; }
.sec-head{ max-width:46rem; margin:0 0 2.1rem; }
.center.sec-head{ margin-inline:auto; }
.cards{ display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr)); }
.card{ background:#fff; border:1px solid var(--gray); border-radius:var(--r-lg);
  padding:1.35rem; display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .16s,box-shadow .16s,transform .16s; }
.card:hover{ border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-2px); }
.card h3{ font-size:1.05rem; }
.card p{ font-size:.92rem; margin:0; }
.card .more{ margin-top:auto; padding-top:.7rem; font-family:var(--display);
  font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue); text-decoration:none; display:inline-flex; gap:.35rem; align-items:center; }
.benefits{ display:grid; gap:1.6rem 1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.benefit{ display:flex; flex-direction:column; gap:.45rem; }
.benefit .ico{ width:38px; height:38px; color:var(--blue); }
.band-slate .benefit .ico{ color:var(--teal); }
.benefit h3{ font-size:1rem; } .benefit p{ font-size:.9rem; margin:0; }
.steps{ display:grid; gap:1.5rem; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.steps .n{ display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff;
  font-family:var(--display); font-weight:800; font-size:.92rem; margin-bottom:.6rem; }
.steps li:last-child .n{ background:var(--lime); color:#1E2B07; }
.steps h3{ font-size:1rem; margin-bottom:.3rem; } .steps p{ font-size:.9rem; margin:0; }
.faq{ border-top:1px solid var(--gray); }
.faq details{ border-bottom:1px solid var(--gray); }
.faq summary{ cursor:pointer; padding:1.05rem .5rem 1.05rem 0;
  font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.3rem; color:var(--blue); line-height:1;
  flex:none; font-weight:400; }
.faq details[open] summary::after{ content:"\2212"; }
.faq .ans{ padding:0 2rem 1.15rem 0; font-size:.95rem; }
.linkgrid{ display:grid; gap:.5rem 1.25rem; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.linkgrid a{ display:flex; align-items:center; gap:.5rem; padding:.55rem 0;
  text-decoration:none; color:var(--slate); font-size:.94rem;
  border-bottom:1px solid var(--gray); }
.linkgrid a:hover{ color:var(--blue); }
.linkgrid a::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--lime); flex:none; }
.band-slate .linkgrid a{ color:#C9D2DB; border-bottom-color:rgba(255,255,255,.14); }
.band-slate .linkgrid a:hover{ color:#fff; }
.split{ display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:center; }
.closer{ background:var(--blue-900); color:#fff; border-radius:var(--r-lg);
  padding:clamp(1.75rem,4vw,2.75rem); display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); align-items:center; }
.closer h2{ color:#fff; margin-bottom:.5rem; } .closer p{ color:#CFE0FB; margin:0; }
.closer-actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:flex-end; }
.crumb{ font-size:.84rem; color:var(--slate); padding:1rem 0 0; margin:0; }
.crumb a{ color:var(--slate); text-decoration:none; }
.crumb a:hover{ color:var(--blue); text-decoration:underline; }
.hero .crumb,.hero .crumb a{ color:#AFC8EE; }
.specs{ display:flex; flex-wrap:wrap; gap:.4rem 1.75rem; margin:1.4rem 0 0;
  padding:1rem 0 0; border-top:1px solid rgba(255,255,255,.18); list-style:none; }
.specs li{ font-size:.78rem; color:#AFC8EE; }
.specs b{ display:block; color:#fff; font-family:var(--display); font-weight:700;
  font-size:.9rem; letter-spacing:-.01em; }
/* Footer */
.foot{ background:var(--slate); color:#B6C0CA; padding:3rem 0 0; font-size:.92rem; }
.foot-grid{ display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.foot h3{ color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  margin:0 0 .85rem; font-weight:700; }
.foot ul{ list-style:none; margin:0; padding:0; } .foot li{ margin:.4rem 0; }
.foot a{ color:#B6C0CA; text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot address{ font-style:normal; line-height:1.75; }
.foot-powered{ display:block; font-size:.7rem; letter-spacing:.11em;
  text-transform:uppercase; color:#8A97A4; }
.foot-legal{ margin-top:2.5rem; border-top:1px solid rgba(255,255,255,.12);
  padding:1.1rem 0 1.4rem; font-size:.82rem; display:flex; flex-wrap:wrap;
  gap:.5rem 1.25rem; align-items:center; }
.foot-legal p{ margin:0; }
.foot-legal nav{ margin-left:auto; display:flex; gap:1.1rem; flex-wrap:wrap; }
/* Responsive */
@media (max-width:1040px){ .tagline{ display:none; } .sticky-form .f-name{ display:none; } }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; }
  .closer-actions{ justify-content:flex-start; } }
@media (max-width:860px){
  .topbar-in{ min-height:64px; }
  .topbar-cta .btn{ display:none; }
  .navtoggle{ display:inline-flex; align-items:center; gap:.5rem; background:var(--blue);
    color:#fff; border:0; border-radius:8px; padding:.6rem .85rem;
    font-family:var(--display); font-weight:700; font-size:.85rem; cursor:pointer; }
  .navbar{ display:none; } .navbar[data-open="true"]{ display:block; }
  .nav>ul{ flex-direction:column; padding:.5rem 0; }
  .nav a,.nav .has-sub>button{ padding:.8rem .25rem; width:100%; }
  .sub{ position:static; display:block; box-shadow:none; background:transparent;
    padding:0 0 .5rem 1rem; }
  .sub a{ color:#BBD4FF; } .sub a:hover{ background:transparent; color:#fff; }
  .nav .has-sub>button::after{ margin-left:auto; }
  .stickybar{ display:none; }
  .mobilebar{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
    position:fixed; left:0; right:0; bottom:0; z-index:90; background:#fff;
    padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    border-top:1px solid var(--gray); box-shadow:0 -4px 18px rgba(27,35,43,.12);
    transform:translateY(110%); transition:transform .26s ease; }
  .mobilebar[data-show="true"]{ transform:translateY(0); }
  body.has-mobilebar{ padding-bottom:4.6rem; }
}
@media (max-width:560px){
  .hero-points li{ max-width:none; width:100%; }
  .closer-actions .btn,.hero-actions .btn{ width:100%; }
}
/* Mobile quote drawer */
.drawer[hidden]{ display:none; }
.drawer{ position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end;
  justify-content:center; }
.drawer-scrim{ position:absolute; inset:0; background:rgba(27,35,43,.55); border:0;
  cursor:pointer; }
.drawer-panel{ position:relative; background:#fff; width:min(100%,520px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:1.4rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));
  max-height:90vh; overflow:auto; box-shadow:var(--shadow-lg);
  animation:drawer-up .24s ease; }
@keyframes drawer-up{ from{ transform:translateY(18px); opacity:.6; } to{ transform:none; opacity:1; } }
.drawer-close{ all:unset; cursor:pointer; position:absolute; top:.85rem; right:1rem;
  font-size:1.6rem; line-height:1; color:var(--slate); padding:.2rem .45rem; border-radius:6px; }
.drawer h2{ font-size:1.3rem; margin:0 0 .3rem; padding-right:2rem; }
@media print{
  .stickybar,.mobilebar,.navbar,.topbar-cta,.drawer{ display:none!important; }
  .hero{ background:none; color:#000; } .hero h1,.hero-sub{ color:#000; }
}

/* --- Image slots ----------------------------------------------------------
   .ph always reserves its box. .ph-empty is the no-photo state: a restrained
   siding-course pattern in brand colours, never a grey "missing image" block. */
.ph{ display:block; border-radius:var(--r-lg); overflow:hidden; background:var(--gray); }
.ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-empty{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 10px, rgba(0,0,0,.05) 10px 11px),
    linear-gradient(150deg, var(--blue-900) 0%, #0A4FA8 55%, #14618C 100%);
}
.band-alt .ph-empty,.card .ph-empty{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.5) 0 9px, rgba(46,58,70,.08) 9px 10px),
    linear-gradient(150deg, #CFD8E4 0%, #E8ECF1 60%, #DCE3EA 100%);
}
.card .ph{ border-radius:var(--r-lg) var(--r-lg) 0 0; margin:-1.35rem -1.35rem .9rem; }
.hero-photo{ border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.hero-photo.ph-empty{ min-height:clamp(240px,34vw,420px); }
/* Badge row under the hero */
.badgerow{ display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem; margin:0; padding:1.4rem 0 0;
  list-style:none; border-top:1px solid rgba(255,255,255,.18); }
.badgerow li{ display:flex; flex-direction:column; align-items:flex-start; gap:.4rem;
  font-family:var(--display); font-weight:600; font-size:.8rem; color:#CFE0FB;
  letter-spacing:.01em; max-width:9rem; line-height:1.25; }
.badgerow svg{ color:var(--lime); }
/* Service-area band with photo */
.areaband{ position:relative; color:#fff; overflow:hidden; border-radius:var(--r-lg); }
.areaband .ph{ position:absolute; inset:0; border-radius:0; }
.areaband .ph img{ height:100%; }
.areaband::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,52,127,.94) 0%, rgba(0,52,127,.78) 55%, rgba(0,52,127,.55) 100%); }
.areaband-in{ position:relative; z-index:2; display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  align-items:center; padding:clamp(2rem,4vw,3.25rem); }
.areaband h2{ color:#fff; }
.areaband p{ color:#CFE0FB; }
.ctacard{ background:#fff; border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--shadow-lg); }
.ctacard h3{ font-size:1.2rem; margin-bottom:.4rem; }
.ctacard p{ font-size:.92rem; margin-bottom:1.1rem; }
.ctacard .btn{ width:100%; margin-bottom:.6rem; }
.ctacard .foot-line{ text-align:center; font-family:var(--display); font-weight:700;
  font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--slate);
  margin:.9rem 0 0; }
@media (max-width:900px){ .hero-photo{ order:-1; } }