/* ============================================================
   Jon Payne Electric — jonpayneelectric.com
   Palette sampled straight off the logo:
     red  #E21413   blue #014F9E   white outline
   The logo has a white keyline, so it reads on light AND dark.
   Header/body are light (logo at full color), hero + footer navy.
   ============================================================ */

:root{
  --navy:     #05192E;   /* hero + footer                        */
  --navy-2:   #0A2340;   /* raised navy panel                    */
  --navy-3:   #16324F;   /* borders on navy                      */
  --blue:     #014F9E;   /* brand blue                           */
  --blue-2:   #0A66C2;   /* brighter blue for dark backgrounds   */
  --red:      #D1131A;   /* brand red, tuned for contrast        */
  --red-hot:  #F0262C;   /* accent red on navy                   */
  --red-dark: #A50E14;

  --paper:    #FFFFFF;
  --paper-2:  #F5F7FA;
  --line:     #E1E6ED;
  --text:     #0E1A28;
  --text-2:   #55647A;
  --text-inv: #E9EEF5;
  --text-inv2:#9DAEC4;

  --wrap: 1180px;
  --r: 10px;
  --shadow: 0 1px 2px rgba(5,25,46,.06), 0 8px 28px rgba(5,25,46,.09);
  --head-h: 82px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --disp: "Barlow Condensed", "Inter", Arial Narrow, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 12px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:12px 18px; font-weight:600;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--blue-2); outline-offset:2px; border-radius:4px; }

/* ---------------- Type ---------------- */
h1,h2,h3,h4{ margin:0; line-height:1.1; }

h1{
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(2.5rem, 5.6vw, 4.3rem);
  letter-spacing:-.005em;
  text-transform:uppercase;
}
.hero h1{ max-width:20ch; }

.h2{
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(2.1rem, 4.4vw, 3.1rem);
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.kicker{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin:0 0 10px;
}
.section-dark .kicker, .section-ink .kicker{ color:var(--red-hot); }

.section-lede{
  max-width:62ch; color:var(--text-2); margin:0 0 44px; font-size:1.06rem;
}
.section-dark .section-lede, .section-ink .section-lede{ color:var(--text-inv2); }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  padding:13px 22px; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.btn svg{ width:18px; height:18px; fill:currentColor; flex:none; }
.btn:active{ transform:translateY(1px); }

.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-dark); }

.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:#013A75; }

.btn-ghost{ background:transparent; color:var(--text-inv); border-color:rgba(255,255,255,.3); }
.btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.55); }

.btn-lg{ padding:17px 30px; font-size:1.05rem; }
.btn-block{ width:100%; }

/* ---------------- Header (light — the logo lives here) ---------------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
/* thin brand stripe so the header still reads "Jon Payne" at a glance */
.site-head::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px;
  background:linear-gradient(90deg, var(--red) 0 42%, var(--blue) 42% 100%);
}
.head-inner{
  height:var(--head-h);
  display:flex; align-items:center; gap:28px;
}
.brand{ flex:none; line-height:0; }
.brand img{ height:52px; width:auto; }

.nav{ display:flex; gap:28px; margin-left:auto; }
.nav a{
  color:var(--text); text-decoration:none; font-weight:600; font-size:.95rem;
  padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.nav a:hover::after{ transform:scaleX(1); }

.head-call{ flex:none; }
.head-call svg{ width:16px; height:16px; }

.burger{
  display:none; margin-left:auto;
  width:46px; height:46px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:8px;
  cursor:pointer;
}
.burger span{
  display:block; width:20px; height:2px; margin:4px auto; background:var(--text);
  transition:transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column;
  background:var(--paper); border-top:1px solid var(--line);
}
.mobile-nav a{
  color:var(--text); text-decoration:none; font-weight:600;
  padding:16px 24px; border-bottom:1px solid var(--line);
}
.mobile-nav .m-call{ color:#fff; background:var(--red); border:0; }
.mobile-nav.open{ display:flex; }

/* Current page in the nav */
.nav a.is-active{ color:var(--blue); }
.nav a.is-active::after{ transform:scaleX(1); background:var(--blue); }
.mobile-nav a.is-active{ color:var(--blue); }

/* ---------------- Interior page header ----------------
   Shorter, quieter version of the home hero used on About /
   Residential / Commercial / Contact. */
.page-head{
  position:relative; background:var(--navy); color:var(--text-inv); overflow:hidden;
}
.page-head::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(780px 420px at 88% 6%, rgba(209,19,26,.26), transparent 62%),
    radial-gradient(820px 520px at 8% 100%, rgba(1,79,158,.5), transparent 64%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 74px);
}

/* Faded photo behind the navy band, same idea as the home hero but much
   quieter — it's texture, not a picture. Set --head-img per page. */
.page-head-photo{
  --scrim: .95;              /* lower it per page for already-dark photos */
  --scrim-glow: .85;
  background-image:
    linear-gradient(100deg,
      rgba(5,25,46, var(--scrim)) 0%,
      rgba(5,25,46, calc(var(--scrim) - .06)) 42%,
      rgba(5,25,46, calc(var(--scrim) - .22)) 100%),
    var(--head-img);
  background-size:cover;
  background-position:center 58%;
}
.page-head-photo::before{ opacity:var(--scrim-glow); }
.page-head-inner{
  position:relative; padding:clamp(52px,7vw,86px) 24px clamp(48px,6vw,74px);
}
.page-head h1{
  font-size:clamp(2.4rem, 5.2vw, 3.9rem); margin-bottom:16px;
}
.page-head p{
  max-width:60ch; color:var(--text-inv2); font-size:1.1rem; margin:0;
}
.crumbs{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  font-size:.84rem; color:var(--text-inv2); margin:0 0 18px;
}
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:#fff; }
.crumbs span{ opacity:.5; }

/* ---------------- Home: the two service gateways ---------------- */
.gateways{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1080px){ .gateways{ grid-template-columns:repeat(2,1fr); } }

.gateway{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--paper); text-decoration:none; color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gateway:hover{ border-color:#C4CFDD; box-shadow:var(--shadow); transform:translateY(-3px); }
.gateway img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.gateway-body{ padding:24px 22px 26px; display:flex; flex-direction:column; flex:1; }
.gateway h3{
  font-family:var(--disp); font-size:1.45rem; text-transform:uppercase;
  margin-bottom:10px; line-height:1.05;
}
.gateway p{ color:var(--text-2); margin:0 0 20px; font-size:.95rem; }
.gateway .more{ font-size:.9rem; }
.gateway .more{
  margin-top:auto; font-weight:600; color:var(--blue);
  display:inline-flex; align-items:center; gap:8px;
}
.gateway .more svg{ width:16px; height:16px; fill:currentColor; transition:transform .18s ease; }
.gateway:hover .more svg{ transform:translateX(4px); }

/* ---------------- Why-us strip ---------------- */
.pillars{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px 32px;
}
.pillar h3{ font-size:1.08rem; margin-bottom:8px; }
.pillar p{ margin:0; color:var(--text-2); font-size:.96rem; }
.pillar .ico{
  display:grid; place-items:center; width:44px; height:44px; border-radius:9px;
  background:rgba(1,79,158,.09); margin-bottom:16px;
}
.pillar .ico svg{ width:23px; height:23px; fill:var(--blue); }

/* ---------------- Closing CTA band ---------------- */
.cta-band{ background:var(--blue); color:#fff; }
.cta-band .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  padding-top:44px; padding-bottom:44px;
}
.cta-band h2{
  font-family:var(--disp); font-size:clamp(1.7rem,3.2vw,2.3rem); text-transform:uppercase;
  margin:0 0 6px;
}
.cta-band p{ margin:0; color:rgba(255,255,255,.86); }
.cta-band .btn{ background:#fff; color:var(--blue); flex:none; }
.cta-band .btn:hover{ background:#EAF1F9; }

@media (max-width:860px){
  .gateways{ grid-template-columns:1fr; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
}

/* ---------------- Hero ---------------- */
.hero{ position:relative; background:var(--navy); color:var(--text-inv); overflow:hidden; }

/* Photo hero: a home lit at dusk. The image sits under two gradients —
   one left-to-right so the headline always has a dark bed to sit on, one
   bottom-up to seat the section into the page. If the photo ever fails to
   load, the navy background underneath still reads fine. */
.hero-bg{
  position:absolute; inset:0;
  background-color:var(--navy);
  background-image:url("img/hero.jpg");
  background-size:cover;
  background-position:center 58%;
}
/* Lighter scrim than a daylight photo would need — the hero shot is already a
   night scene, and the lighting work in it is the whole point of using it. */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(3,12,24,.90) 0%, rgba(3,12,24,.76) 34%, rgba(3,12,24,.34) 62%, rgba(3,12,24,.14) 100%),
    linear-gradient(180deg, rgba(5,25,46,.45) 0%, transparent 32%, rgba(5,25,46,.8) 100%);
}
.hero-inner{ position:relative; padding:clamp(72px,11vw,124px) 24px clamp(64px,8vw,96px); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-inv2); margin:0 0 22px;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 15px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--red-hot);
  box-shadow:0 0 0 4px rgba(240,38,44,.2);
}

.hero h1{ margin-bottom:22px; }

/* Brighter than the usual muted body colour: the hero lede sits over a photo,
   and the warm lit areas of it were pushing contrast just under AA. */
.lede{ max-width:56ch; font-size:1.16rem; color:#DDE6F1; margin:0 0 36px; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }

.chips{
  display:flex; flex-wrap:wrap; gap:10px 12px; list-style:none; padding:0; margin:0;
}
.chips li{
  font-size:.86rem; font-weight:600; color:var(--text-inv);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  padding:8px 15px; border-radius:999px;
}

/* ---------------- Sections ---------------- */
.section{ padding:clamp(64px,8vw,104px) 0; }
.section-tint{ background:var(--paper-2); }
.section-dark{ background:var(--navy-2); color:var(--text-inv); }
.section-ink{ background:var(--navy); color:var(--text-inv); }
.section-dark .h2, .section-ink .h2{ color:#fff; }

.grid{ display:grid; gap:22px; }

.services{ grid-template-columns:1fr; }
@media (min-width:640px){ .services{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .services{ grid-template-columns:repeat(3,1fr); } }

/* ---------------- Service cards ---------------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px 30px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover{ border-color:#C4CFDD; box-shadow:var(--shadow); transform:translateY(-3px); }

.card .ico{
  display:grid; place-items:center; width:50px; height:50px; border-radius:9px;
  background:rgba(1,79,158,.09); margin-bottom:18px;
}
.card .ico svg{ width:26px; height:26px; fill:var(--blue); }
.card:hover .ico{ background:rgba(209,19,26,.09); }
.card:hover .ico svg{ fill:var(--red); }

.card h3{ font-size:1.16rem; font-weight:700; margin-bottom:9px; }
.card p{ margin:0; color:var(--text-2); font-size:.98rem; }

/* A card that's also a link through to its own page */
.card-link{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
}
.card-link .card-more{
  margin-top:auto; padding-top:16px;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.95rem; color:var(--blue);
}
.card-link .card-more svg{ width:16px; height:16px; fill:currentColor; transition:transform .18s ease; }
.card-link:hover .card-more svg{ transform:translateX(4px); }
.card-link:hover{ border-color:var(--blue); }

/* Cards sitting on a navy section (Commercial) */
.card-dark{
  background:var(--navy-2); border-color:var(--navy-3); color:var(--text-inv);
}
.card-dark:hover{ border-color:#2A4A6E; box-shadow:0 10px 30px rgba(0,0,0,.28); }
.card-dark h3{ color:#fff; }
.card-dark p{ color:var(--text-inv2); }
.card-dark .ico{ background:rgba(255,255,255,.08); }
.card-dark .ico svg{ fill:#4D9BEA; }
.card-dark:hover .ico{ background:rgba(240,38,44,.16); }
.card-dark:hover .ico svg{ fill:var(--red-hot); }

.card-cta{
  background:var(--red); border-color:var(--red); color:#fff;
  display:flex; flex-direction:column; align-items:flex-start;
}
.card-cta:hover{ border-color:var(--red); box-shadow:0 10px 30px rgba(209,19,26,.28); }
.card-cta h3{ color:#fff; }
.card-cta p{ color:rgba(255,255,255,.9); margin-bottom:20px; }
.card-cta .btn{ margin-top:auto; background:#fff; color:var(--red); }
.card-cta .btn:hover{ background:#F2F4F7; }

/* The CTA is the odd one out in any grid — run it full width as a banner
   under the cards rather than leaving a hole in the last row. Must come
   AFTER the .card-cta base rule above or the column layout wins. */
@media (min-width:640px){
  .card-cta{
    grid-column:1 / -1;
    flex-direction:row; align-items:center; gap:14px 30px;
    padding:24px 30px;
  }
  .card-cta h3{ flex:none; font-size:1.22rem; }
  .card-cta p{ margin-bottom:0; }
  .card-cta .btn{ margin-top:0; margin-left:auto; flex:none; }
}

/* ---------------- Full service lists ----------------
   Sits under the feature cards in each section. Scannable for customers,
   and it's the keyword surface search engines actually read. */
.svc-panel{
  margin-top:24px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:32px 34px 30px;
}
.svc-panel h3{
  font-family:var(--disp); font-size:1.5rem; text-transform:uppercase;
  letter-spacing:.005em; margin-bottom:22px;
}
.svc-panel h3::after{
  content:""; display:block; width:44px; height:3px;
  background:var(--red); border-radius:2px; margin-top:12px;
}

.svc-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:11px 34px;
  grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
}
.svc-list li{
  position:relative; padding-left:26px;
  font-size:.97rem; color:var(--text-2);
}
/* small red bolt marker */
.svc-list li::before{
  content:""; position:absolute; left:2px; top:.52em;
  width:9px; height:9px; background:var(--red);
  clip-path:polygon(58% 0, 18% 55%, 46% 55%, 36% 100%, 82% 42%, 52% 42%);
}

.svc-panel-dark{
  background:var(--navy-2); border-color:var(--navy-3);
}
.svc-panel-dark h3{ color:#fff; }
.svc-panel-dark .svc-list li{ color:var(--text-inv); }
.svc-panel-dark .svc-list li::before{ background:var(--red-hot); }

/* CTA banner used outside the card grid */
.cta-standalone{ margin-top:22px; }

/* ---------------- Spotlight band ----------------
   For a specialty that deserves more weight than one card in a grid —
   currently the dock / waterfront work. */
.spotlight{
  margin-top:24px; position:relative; overflow:hidden;
  background:var(--navy); border-radius:var(--r); color:var(--text-inv);
  padding:40px 44px 42px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:22px 48px; align-items:start;
}
.spotlight::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 380px at 92% 10%, rgba(1,79,158,.55), transparent 64%),
    radial-gradient(420px 300px at 4% 100%, rgba(209,19,26,.22), transparent 62%);
}
.spotlight > *{ position:relative; }
.spotlight .kicker{ color:var(--red-hot); }
.spotlight h3{
  font-family:var(--disp); font-size:clamp(1.7rem,3vw,2.3rem);
  text-transform:uppercase; color:#fff; margin-bottom:16px;
}
.spotlight p{ color:var(--text-inv2); margin:0 0 16px; }
.spotlight p:last-of-type{ margin-bottom:0; }
.spotlight .svc-list{ grid-template-columns:1fr; gap:10px; }
.spotlight .svc-list li{ color:var(--text-inv); }
.spotlight .svc-list li::before{ background:var(--red-hot); }
.spotlight-list h4{
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-bottom:16px;
}

@media (max-width:860px){
  .spotlight{ grid-template-columns:1fr; padding:30px 24px 32px; }
}

@media (max-width:560px){
  .svc-panel{ padding:26px 22px 24px; }
  .svc-list{ grid-template-columns:1fr; gap:10px; }
}

/* ---------------- About ---------------- */
.about-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;
}
.about-copy p{ color:var(--text-2); margin:0 0 18px; }

/* The .about-grid block is used on BOTH light (About) and dark (Docks) sections.
   The colours above are for the light case — these flip it for the dark one.
   Without this the tick list is near-black on navy, i.e. invisible. */
.section-ink .about-copy p,
.section-dark .about-copy p{ color:var(--text-inv2); }
.section-ink .ticks li,
.section-dark .ticks li{ color:var(--text-inv); }

.ticks{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px; }
.ticks li{ position:relative; padding-left:32px; font-weight:500; color:var(--text); }
.ticks li::before{
  content:""; position:absolute; left:0; top:7px;
  width:18px; height:18px; border-radius:50%; background:var(--red);
}
.ticks li::after{
  content:""; position:absolute; left:5.5px; top:12px;
  width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.about-photo{ margin:0; border-radius:var(--r); overflow:hidden; }
/* object-position biased upward so the mobile 16:10 crop keeps faces in frame */
.about-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 28%; }

/* ---------------- Gallery ---------------- */
.gallery{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
@media (min-width:980px){ .gallery-3{ grid-template-columns:repeat(3,1fr); } }
/* 8 tiles — two clean rows of four rather than 3+3+2 */
@media (min-width:920px){ .gallery-4{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:640px) and (max-width:919px){ .gallery-4{ grid-template-columns:repeat(2,1fr); } }

/* A gallery tile that links through to another page. No arrow — the hover
   border is the only affordance; anything on top of the photo read as clutter. */
.tile-link{ position:absolute; inset:0; z-index:2; }
.tile-linked{ transition:border-color .18s ease; }
.tile-linked:hover{ border-color:var(--blue); }
.gallery figure{
  margin:0; border-radius:var(--r); overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--paper-2);
}
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 18px 14px; color:#fff; font-weight:600; font-size:.95rem;
  background:linear-gradient(transparent, rgba(5,25,46,.88));
}

/* Photo placeholders — a <figure> whose <img> fails to load gets .is-empty
   and renders as an intentional slot instead of a broken-image icon.
   Drop the real .jpg into /img with the matching filename and it vanishes. */
.ph.is-empty img{ display:none; }
.ph.is-empty{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 1px, transparent 1px 22px),
    linear-gradient(150deg, #123055, #071E36);
  border-color:var(--navy-3);
}
.ph.is-empty::before{
  content:attr(data-ph);
  display:grid; place-items:center; text-align:center;
  aspect-ratio:4/3; padding:24px;
  color:#7E93AE; font-size:.86rem; font-weight:600; letter-spacing:.03em;
}
.about-photo.is-empty::before{ aspect-ratio:4/5; }
.ph.is-empty figcaption{ background:none; }

/* ---------------- Testimonials ----------------
   Built to look right with ONE quote (centred, generous) and to still
   work when more arrive — add the 3-column rule noted in index.html. */
.quotes{ display:grid; gap:22px; }

.quote{
  margin:0; position:relative;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:38px 40px 32px; max-width:820px;
  box-shadow:var(--shadow);
}
.quote .qmark{
  width:44px; height:44px; fill:var(--red); opacity:.16;
  position:absolute; top:22px; right:26px;
}
.quote blockquote{
  margin:0 0 22px; font-size:1.22rem; line-height:1.6; color:var(--text);
  font-weight:500; padding-right:60px;   /* clears the quote mark */
}
.quote figcaption{ display:flex; flex-direction:column; gap:2px; }
.quote figcaption strong{ font-size:1rem; font-weight:700; }
.quote figcaption span{ font-size:.9rem; color:var(--text-2); }
.quote figcaption::before{
  content:""; display:block; width:38px; height:3px;
  background:var(--red); border-radius:2px; margin-bottom:14px;
}

/* ---------------- Contact ---------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }

.contact-cards{ display:grid; gap:14px; }
.pcard{
  display:flex; align-items:flex-start; gap:16px; text-decoration:none;
  background:var(--navy-2); border:1px solid var(--navy-3); border-radius:var(--r);
  padding:20px 22px;
  transition:border-color .18s ease, background .18s ease;
}
a.pcard:hover{ border-color:var(--red); background:#0D2C4F; }

.pcard-ico{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:9px; background:rgba(240,38,44,.14);
}
.pcard-ico svg{ width:22px; height:22px; fill:var(--red-hot); }
/* Outline-style icons (envelope) — filled paths turn to mush at this size */
.pcard-ico svg.ico-stroke{
  fill:none; stroke:var(--red-hot); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

.pcard-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pcard-txt strong{ font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-inv2); }
.pcard-txt span{ font-size:1.1rem; font-weight:600; color:#fff; overflow-wrap:anywhere; }
.pcard-static .pcard-txt span{ font-size:.98rem; font-weight:500; line-height:1.5; color:var(--text-inv); }
.pcard-static .pcard-ico{ background:rgba(10,102,194,.18); }
.pcard-static .pcard-ico svg{ fill:#4D9BEA; }

/* ---------------- Form ---------------- */
.quote-form{
  background:var(--navy-2); border:1px solid var(--navy-3); border-radius:var(--r);
  padding:32px 30px 30px;
}
.quote-form h3{ font-family:var(--disp); font-size:1.7rem; text-transform:uppercase; color:#fff; margin-bottom:22px; }

.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-size:.86rem; font-weight:600; color:var(--text-inv2); }
.field .opt{ font-weight:400; opacity:.75; }

.field input, .field select, .field textarea{
  font:inherit; font-size:1rem; color:#fff;
  background:#071F38; border:1px solid var(--navy-3); border-radius:8px;
  padding:12px 14px; width:100%;
  transition:border-color .15s ease;
}
.field textarea{ resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#61789A; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue-2); }
.field input[aria-invalid="true"]{ border-color:var(--red-hot); }

.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239DAEC4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  padding-right:38px;
}

.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.form-note{ margin:14px 0 0; font-size:.85rem; color:var(--text-inv2); text-align:center; }

/* ---------------- Footer ---------------- */
.site-foot{ background:var(--navy); color:var(--text-inv2); border-top:3px solid var(--red); }
.foot-inner{
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:44px;
  padding-top:60px; padding-bottom:44px;
}
.foot-brand img{ height:66px; width:auto; margin-bottom:18px; }
.foot-brand p{ margin:0; font-size:.95rem; max-width:34ch; }

/* Social icons — footer. Add the <a> back in on every page once the
   Instagram URL is confirmed (see README). */
.foot-social{ display:flex; gap:12px; margin-top:20px; }
.foot-social a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  transition:background .18s ease, border-color .18s ease;
}
.foot-social a{ color:#fff; }
.foot-social a:hover{ background:var(--red); border-color:var(--red); }
/* Mark is drawn from primitives, so it needs stroke rather than fill */
.foot-social svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; }
.foot-social svg .dot{ fill:currentColor; stroke:none; }

.foot-col h4{
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-bottom:16px;
}
.foot-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.foot-col a{ text-decoration:none; font-size:.95rem; }
.foot-col a:hover{ color:#fff; }

.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:22px; padding-bottom:22px;
  font-size:.86rem;
}
.foot-bottom p{ margin:0; }
.foot-bottom a{ text-decoration:none; }
.foot-bottom a:hover{ color:#fff; }

/* ---------------- Sticky mobile call bar ---------------- */
.call-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  align-items:center; justify-content:center; gap:10px;
  background:var(--red); color:#fff; text-decoration:none;
  font-weight:700; font-size:1.02rem;
  padding:15px 16px calc(15px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 22px rgba(5,25,46,.3);
}
.call-bar svg{ width:19px; height:19px; fill:currentColor; }

/* ---------------- Responsive ---------------- */
@media (max-width:1000px){
  .about-grid{ grid-template-columns:1fr; gap:38px; }
  .about-photo img{ aspect-ratio:16/10; }
  .about-photo.is-empty::before{ aspect-ratio:16/10; }
  .contact-grid{ grid-template-columns:1fr; gap:34px; }
  .foot-inner{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  /* Narrow screens: text spans the full width, so the left-to-right scrim
     no longer covers it. Darken the photo evenly instead. */
  .hero-bg::after{
    background:linear-gradient(180deg, rgba(3,15,28,.88) 0%, rgba(3,15,28,.8) 50%, rgba(5,25,46,.95) 100%);
  }
  .nav, .head-call{ display:none; }
  .burger{ display:block; }
  .call-bar{ display:flex; }
  body{ padding-bottom:64px; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  :root{ --head-h:72px; }
  .wrap{ padding-inline:18px; }
  .brand img{ height:42px; }
  .hero-cta .btn{ width:100%; }
  .row{ grid-template-columns:1fr; }
  .quote-form{ padding:26px 20px 24px; }
  .quote{ padding:28px 22px 24px; }
  .quote blockquote{ font-size:1.08rem; padding-right:0; }
  .quote .qmark{ width:32px; height:32px; top:16px; right:16px; }
  .foot-inner{ grid-template-columns:1fr; gap:32px; }
}

@media print{
  .site-head, .call-bar, .quote-form, .hero-bg{ display:none !important; }
  body{ color:#000; background:#fff; }
}