/* Thomas Fence Co. competitor landing pages.
   Brand: Oswald (display, all caps), Barlow (body), Roboto Mono (meta).
   Square corners only (border-radius 0 everywhere). 60% white/near-white,
   30% ink, 10% orange (buttons, checks, accent rules). Self-hosted fonts. */

/* ---- fonts ------------------------------------------------------------- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/oswald-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/oswald-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/barlow-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/roboto-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- tokens ------------------------------------------------------------ */
:root{
  --orange:#F07000;--orange-hover:#FF8423;--orange-press:#C85800;--orange-tint:#FCE6D0;
  --gray:#808080;--charcoal:#1A1A1A;--ink:#2A2A2A;--slate:#4A4A4A;--concrete:#6B6B6B;
  --stone:#B5B5B5;--fog:#DCDCDC;--white:#FFFFFF;--near:#FAFAFA;
  --sans:'Barlow',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --disp:'Oswald',Impact,'Arial Narrow Bold',system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1200px;
}

*{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange-press)}
h1,h2,h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;
  color:var(--charcoal);line-height:1.08;margin:0 0 .4em;letter-spacing:.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.meta{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--concrete)}

/* ---- buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:0 26px;font-family:var(--disp);font-weight:500;
  text-transform:uppercase;letter-spacing:.03em;font-size:16px;line-height:1;
  white-space:nowrap;
  text-decoration:none;cursor:pointer;border:2px solid var(--orange);
  background:var(--orange);color:var(--white);transition:background .12s,border-color .12s}
.btn:hover{background:var(--orange-hover);border-color:var(--orange-hover);color:var(--white)}
.btn:active{background:var(--orange-press);border-color:var(--orange-press)}
.btn-ghost{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn-ghost:hover{background:var(--charcoal);color:var(--white)}
.btn-lg{min-height:54px;font-size:19px;padding:0 34px}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{
  outline:3px solid var(--orange-press);outline-offset:2px}

/* ---- header (sticky, 64 to 72px tall) ---------------------------------- */
.hdr{border-bottom:1px solid var(--fog);background:var(--white);
  position:sticky;top:0;z-index:50}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:8px;padding-bottom:8px}
.hdr .brand img{width:170px;height:51px}
.hdr-right{display:flex;align-items:center;gap:18px}
.hdr-call{font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;
  font-size:18px;color:var(--charcoal);text-decoration:none;white-space:nowrap}
.hdr-call:hover{color:var(--orange-press)}
/* CTA carries two labels: full on desktop, short on mobile. */
.cta-short{display:none}
/* sticky header must not cover in-page anchor targets */
#estimate,#compare,#faq,.faq details{scroll-margin-top:84px}

/* ---- hero -------------------------------------------------------------- */
.hero{background:var(--near);border-bottom:1px solid var(--fog)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:32px 48px;
  grid-template-areas:"copy media";
  padding-top:48px;padding-bottom:48px;align-items:start}
.hero-copy{grid-area:copy}
.hero-media{grid-area:media;align-self:start;display:flex;flex-direction:column;
  align-items:center;text-align:center}
.hero h1{font-size:44px;margin-top:.15em}
.hero .sub{font-size:19px;color:var(--slate);max-width:38em}
.hero .cta-row{margin:26px 0 0}
/* portrait hero video: fixed 720x1280 aspect box so the poster paints with
   zero layout shift; square corners; poster/video cropped with object-fit. */
.hero-vid-box{width:100%;max-width:520px;aspect-ratio:1/1;max-height:520px;
  border:1px solid var(--fog);background:var(--charcoal);overflow:hidden;margin:0 auto}
.hero-vid{width:100%;height:100%;object-fit:cover;display:block;
  background:var(--charcoal)}
.hero-vid-cap{font-family:var(--sans);font-size:14px;color:var(--concrete);
  margin:12px 0 0;max-width:38em}
.trust{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;
  font-size:12.5px;color:var(--ink);border-top:2px solid var(--orange);
  padding-top:10px;margin:0 0 10px;display:block}
.form-card{background:var(--white);border:1px solid var(--fog);padding:22px}
.form-card h2{font-size:22px;margin-bottom:12px}
.form-proof{font-size:14px;color:var(--slate);margin:0 0 16px;line-height:1.45}
.form-wrap{min-height:640px}
.form-wrap iframe{width:100%;min-height:640px;border:0}

/* ---- tldr band --------------------------------------------------------- */
.tldr{background:var(--charcoal);color:var(--white)}
.tldr .wrap{padding-top:34px;padding-bottom:34px}
.tldr h2{color:var(--white);font-size:18px;letter-spacing:.08em;margin-bottom:14px}
.tldr ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.tldr li{position:relative;padding-left:26px;color:#EDEDED;font-size:17px;max-width:58em}
.tldr li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:2px;
  background:var(--orange)}

/* ---- what you searched for (intent answers) ---------------------------- */
.qa-blocks{display:grid;grid-template-columns:1fr 1fr;gap:26px 36px}
.qa-block h3{font-size:18px;margin-bottom:8px;color:var(--charcoal);
  border-left:3px solid var(--orange);padding-left:12px}
.qa-block p{margin:0;color:var(--slate);font-size:15.5px;max-width:44em}

/* ---- why homeowners pick thomas fence (lead-in strip, no cards) --------- */
.pick-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;
  border-top:2px solid var(--orange);padding-top:26px}
.pick{padding-left:16px;border-left:3px solid var(--orange)}
.pick-lead{display:block;font-family:var(--disp);text-transform:uppercase;
  font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--charcoal);
  line-height:1.15}
.pick-line{display:block;font-size:15px;color:var(--slate);margin-top:4px}

/* ---- section frame ----------------------------------------------------- */
section{padding:0}
.band{padding-top:56px;padding-bottom:56px}
.band-alt{background:var(--near)}
.eyebrow{margin-bottom:8px}
h2.sec{font-size:30px;margin-bottom:22px}

/* ---- comparison table -------------------------------------------------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--fog)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;background:var(--white)}
table.cmp caption{font-family:var(--disp);text-transform:uppercase;font-weight:700;
  color:var(--charcoal);font-size:22px;text-align:left;padding:18px 16px;
  border-bottom:2px solid var(--orange)}
table.cmp th,table.cmp td{border:1px solid var(--fog);padding:13px 16px;
  text-align:left;vertical-align:top;font-size:15.5px}
table.cmp thead th{font-family:var(--disp);text-transform:uppercase;font-weight:500;
  letter-spacing:.03em;font-size:15px;background:var(--white);color:var(--slate)}
/* Thomas Fence column highlighted across the whole table with the brand tint;
   the header cell is a touch stronger with a 2px orange top border. The
   competitor column stays white. */
table.cmp thead th.tf{background:var(--orange-tint);color:var(--charcoal);
  border-top:2px solid var(--orange)}
table.cmp th[scope="row"]{font-weight:600;font-family:var(--sans);text-transform:none;
  color:var(--ink);background:var(--white);width:26%}
.cmp td.tf-cell{color:var(--ink);background:var(--orange-tint)}
.cmp td.tf-cell .ck{color:var(--orange);flex:0 0 auto;margin-top:2px}
.cmp .tf-inner{display:flex;gap:8px;align-items:flex-start}
.cmp td.ns{color:var(--concrete);font-style:italic}
/* group header rows: kept distinct from the tinted column with plain white and
   a Stone top rule, Oswald caps label. */
.cmp tr.grp th{font-family:var(--disp);text-transform:uppercase;font-weight:700;
  letter-spacing:.04em;font-size:14px;color:var(--charcoal);
  background:var(--white);border-top:2px solid var(--stone);
  padding:11px 16px;position:static}
.src-note{color:var(--concrete);font-size:13px;margin-top:12px;max-width:60em}
.tbl-cta{text-align:right;margin:18px 0 0}

/* ---- crew photo band --------------------------------------------------- */
.photo-band{background:var(--white)}
.photo-band .wrap{padding-top:34px;padding-bottom:10px}
.photo-band picture,.photo-band img{display:block;width:100%}
.photo-band img{border:1px solid var(--fog);object-fit:cover;
  aspect-ratio:24/9;max-height:360px}
.photo-band .cap{font-family:var(--sans);font-size:14px;color:var(--concrete);
  margin:12px 0 0}

/* ---- detail comparison list (rail | Thomas Fence | competitor) --------- */
.cmp-list{border-top:2px solid var(--orange)}
.cmp-row{display:grid;grid-template-columns:.85fr 1.4fr 1.4fr;gap:28px;
  padding:22px 0;border-bottom:1px solid var(--fog);align-items:start}
.cmp-head{padding-top:12px;padding-bottom:12px}
.cmp-head .cmp-tf,.cmp-head .cmp-them{font-family:var(--disp);
  text-transform:uppercase;font-weight:500;letter-spacing:.03em;font-size:15px}
.cmp-head .cmp-tf{color:var(--charcoal)}
.cmp-head .cmp-them{color:var(--slate)}
.cmp-rail{font-family:var(--disp);text-transform:uppercase;font-weight:700;
  font-size:17px;color:var(--charcoal);line-height:1.15;letter-spacing:.01em}
.cmp-tf{border-left:3px solid var(--orange);padding-left:16px}
.cmp-them{border-left:3px solid var(--stone);padding-left:16px}
.cmp-tf p,.cmp-them p{margin:0;font-size:15.5px;color:var(--slate)}
.cmp-tf p{color:var(--ink)}
.clab{display:none;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;color:var(--concrete);margin-bottom:6px}

/* ---- best-for ---------------------------------------------------------- */
.bestfor{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bf-card{border:1px solid var(--fog);padding:22px;background:var(--white)}
.bf-card.tf{border-top:4px solid var(--orange)}
.bf-card h3{font-size:19px;margin-bottom:12px}
.bf-card ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.bf-card li{position:relative;padding-left:22px;font-size:15.5px;color:var(--slate)}
.bf-card li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:2px;
  background:var(--orange)}

/* ---- proof ------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.stat{border:1px solid var(--fog);padding:20px;background:var(--white);text-align:left}
.stat .big{font-family:var(--disp);font-weight:700;font-size:40px;color:var(--charcoal);
  line-height:1}
.stat .lbl{font-size:14px;color:var(--slate);margin-top:8px;display:block}
.proof-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;
  align-items:stretch}
.proof-photo{display:block;height:100%}
.proof-photo img{width:100%;height:100%;object-fit:cover;border:1px solid var(--fog);
  min-height:280px}
.quotes{display:grid;grid-template-columns:1fr;gap:16px}
.qcard{border:1px solid var(--fog);padding:22px;background:var(--white)}
.qcard blockquote{margin:0 0 14px;font-size:15.5px;color:var(--ink)}
.qcard .who{display:block}
.qcard .who .name{display:block;font-family:var(--disp);text-transform:uppercase;
  letter-spacing:.03em;font-size:15px;color:var(--charcoal)}
.qcard .role{display:block;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.08em;font-size:11px;color:var(--concrete);margin-top:3px}

/* ---- faq (spans content width, tighter rows, reduced section padding) --- */
.faq-band{padding-top:48px;padding-bottom:48px}
.faq{display:grid;gap:0;max-width:900px;border-top:1px solid var(--fog)}
.faq details{border-bottom:1px solid var(--fog)}
.faq summary{cursor:pointer;list-style:none;padding:14px 40px 14px 2px;position:relative;
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;font-size:18px;
  color:var(--charcoal)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:12px;color:var(--orange);
  font-family:var(--disp);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 2px 16px;color:var(--slate);font-size:16px;max-width:65ch}

/* ---- estimate section (charcoal band -> white form card) --------------- */
.estimate-band{background:var(--charcoal);color:var(--white);text-align:center}
.estimate-band .wrap{padding-top:48px;padding-bottom:48px}
.estimate-band h2{color:var(--white);font-size:34px;margin-bottom:10px}
.estimate-band p{color:#DDD;font-size:18px;max-width:44em;margin:0 auto 18px}
.estimate-band .phone{display:inline-block;font-family:var(--disp);
  text-transform:uppercase;letter-spacing:.03em;font-size:20px;color:var(--white);
  text-decoration:none}
.estimate-band .phone:hover{color:var(--orange-hover)}
.estimate-form{background:var(--white)}
.estimate-form .wrap{padding-top:40px;padding-bottom:56px}
.estimate-form .form-card{max-width:760px;margin:0 auto}

/* ---- footer (compact, no links) ---------------------------------------- */
.ftr{background:var(--white);border-top:1px solid var(--fog);font-size:14px;
  color:var(--slate)}
.ftr .wrap{padding-top:24px;padding-bottom:24px;line-height:1.35}
.ftr-cols{display:flex;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.ftr-left{display:grid;gap:5px}
.ftr-right{display:grid;gap:5px;text-align:right;align-content:start;align-self:start}
.ftr .name{font-family:var(--disp);text-transform:uppercase;font-weight:700;
  font-size:17px;color:var(--charcoal)}
.ftr .fine{color:var(--concrete);font-size:12.5px;margin-top:14px}

/* ---- mobile sticky bar (one bar, CALL only) ---------------------------- */
.sticky{display:none}
@media(max-width:767px){
  .sticky{display:grid;grid-template-columns:1fr;gap:0;position:fixed;left:0;
    right:0;bottom:0;z-index:40;border-top:2px solid var(--orange);background:var(--white)}
  .sticky .btn{min-height:56px;font-size:16px;padding:0 12px;letter-spacing:.02em;
    white-space:nowrap;border:0}
  body{padding-bottom:58px}
  /* sticky header keeps the estimate CTA on mobile (compact); the phone number
     text is dropped here because the bottom bar carries CALL. */
  .hdr .brand img{width:150px;height:45px}
  .hdr-call{display:none}
  .hdr-cta{min-height:40px;font-size:13px;padding:0 14px}
  .cta-full{display:none}
  .cta-short{display:inline}
  /* footer stacks to one column; phones left-align under the address block */
  .ftr-cols{flex-direction:column}
  .ftr-right{text-align:left}
}

/* ---- responsive -------------------------------------------------------- */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;grid-template-areas:"copy" "media";
    gap:30px}
  .hero h1{font-size:36px}
  .hero .btn-lg{width:100%}
  /* hero video fills the column width on mobile, cropped with object-fit */
  .hero-vid-box{max-width:100%;aspect-ratio:1/1;max-height:460px}
  .bestfor{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .proof-body{grid-template-columns:1fr;gap:16px}
  .proof-photo img{min-height:220px;max-height:320px}
  table.cmp th[scope="row"]{position:sticky;left:0;background:var(--white);z-index:1}
  /* comparison list stacks: rail heading, then labeled Thomas Fence + rival */
  .cmp-row{grid-template-columns:1fr;gap:14px;padding:20px 0}
  .cmp-head{display:none}
  .clab{display:block}
  .cmp-rail{font-size:18px}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr}
  .hdr-call span.num{display:none}
  h2.sec{font-size:25px}
  .closing h2{font-size:27px}
  .meta{letter-spacing:.06em;font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ======================================================================= */
/* CAROLINA pages: additive selectors only (no existing selector changed).  */
/* Brand tokens only, square corners inherited, orange kept to accents.     */
/* ======================================================================= */

/* ---- intro + why-us strip (two-column lead/line list, no cards) --------- */
.intro{font-size:19px;color:var(--slate);max-width:60em;margin:0 0 26px}
.whyus-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;
  border-top:2px solid var(--orange);padding-top:26px}
.whyus{padding-left:16px;border-left:3px solid var(--orange)}
.whyus-lead{display:block;font-family:var(--disp);text-transform:uppercase;
  font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--charcoal);
  line-height:1.15}
.whyus-line{display:block;font-size:15px;color:var(--slate);margin-top:4px}

/* ---- intent answer sections (keywords as H2s) -------------------------- */
.intent+.intent{margin-top:26px;border-top:1px solid var(--fog);padding-top:26px}
.intent p{color:var(--slate);max-width:60em}
.intent-bullets{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.intent-bullets li{position:relative;padding-left:22px;font-size:15.5px;
  color:var(--slate)}
.intent-bullets li::before{content:"";position:absolute;left:0;top:.5em;
  width:10px;height:2px;background:var(--orange)}

/* ---- price answer panel (brand tint) ----------------------------------- */
.price-panel{background:var(--orange-tint);border-top:3px solid var(--orange);
  padding:28px 26px}
.price-panel h2{font-size:26px;margin-bottom:12px}
.price-panel p{margin:0;color:var(--ink);max-width:62em}

/* ---- local towns line (wrapped list of town names) --------------------- */
.towns-line{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:6px}
.town{display:inline-block;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.06em;font-size:12.5px;color:var(--ink);
  border:1px solid var(--fog);padding:6px 10px;background:var(--white)}
.mid-cta{margin:24px 0 0}

/* ---- materials grid (4 columns desktop, hairlines, no cards) ------------ */
.materials{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--fog);border-left:1px solid var(--fog)}
.mat{border-right:1px solid var(--fog);border-bottom:1px solid var(--fog);
  padding:20px 18px;background:var(--white)}
.mat-label{display:block;font-family:var(--disp);text-transform:uppercase;
  font-weight:700;font-size:17px;letter-spacing:.02em;color:var(--charcoal);
  margin-bottom:8px}
.mat-body{margin:0;font-size:15px;color:var(--slate)}

/* ---- what drives the price (bullets) ----------------------------------- */
.drivers{margin:0;padding:0;list-style:none;display:grid;gap:12px;
  border-top:2px solid var(--orange);padding-top:24px;max-width:62em}
.drivers li{position:relative;padding-left:24px;font-size:16px;color:var(--slate)}
.drivers li::before{content:"";position:absolute;left:0;top:.55em;width:12px;
  height:2px;background:var(--orange)}

/* ---- repair template: two-column panels -------------------------------- */
.repair-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.repair-panel{border:1px solid var(--fog);border-top:4px solid var(--orange);
  padding:24px;background:var(--white)}
.repair-panel h3{font-size:20px;margin-bottom:10px}
.repair-panel p{margin:0;color:var(--slate)}

/* ---- estimate band: on-dark logo lockup -------------------------------- */
.estimate-logo{width:220px;height:auto;display:block;margin:0 auto 18px}

/* ---- footer legal line (the only footer anchors) ----------------------- */
.ftr-legal{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 20px}
.ftr-legal a{color:var(--concrete);font-size:12.5px;text-decoration:underline}
.ftr-legal a:hover{color:var(--orange-press)}

@media(max-width:900px){
  .whyus-list{grid-template-columns:1fr;gap:16px}
  .materials{grid-template-columns:1fr;border-left:0;border-top:0}
  .mat{border-left:1px solid var(--fog);border-top:1px solid var(--fog)}
  .repair-cols{grid-template-columns:1fr}
  .price-panel h2{font-size:23px}
}

/* Chat widget pages: leave the bottom-right corner free for the GHL launcher on mobile */
@media (max-width:767px){body.has-chat .sticky{right:84px;width:auto;left:0}}

/* ---- photo gallery (three columns desktop, one on mobile) -------------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery picture,.gallery img{display:block;width:100%}
.gallery img{border:1px solid var(--fog);object-fit:cover;aspect-ratio:4/3}
.gallery-band .cap{font-family:var(--sans);font-size:14px;color:var(--concrete);margin:12px 0 0}
@media(max-width:700px){.gallery{grid-template-columns:1fr}}