/* The Great American Flagpole Company
   ───────────────────────────────────
   Palette taken from the owner's own deck and renders: deep navy, a single
   red rule, and the warm bronze/amber that the products are actually lit in.
   Product-led rather than article-led — big imagery, short text, obvious
   navigation. */
:root{
  --ink:#0a1523; --navy:#102542; --navy-deep:#060e18; --navy-mid:#16304f;
  --bronze:#8a6326; --bronze-bright:#d9a54c; --gold:#c9a227; --gold-soft:#e6c76a;
  --red:#9e2a2b; --red-bright:#c0392b;
  --paper:#fff; --bone:#f7f5f1; --body:#33363d; --muted:#646b78; --line:#e4e0d8;
  --s1:.375rem; --s2:.75rem; --s3:1.25rem; --s4:2rem; --s5:3.5rem; --s6:5.5rem; --s7:8rem;
  --wrap:78rem; --measure:36rem;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--body);background:var(--paper);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--bronze)}
h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.1;margin:0 0 var(--s3);
  letter-spacing:-.015em;font-weight:600}
h1{font-size:clamp(2.3rem,6vw,4.1rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:1.2rem}
p{margin:0 0 var(--s3)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s3)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s2);z-index:99;background:#fff;
  min-height:44px;display:inline-flex;align-items:center;
  padding:var(--s2) var(--s3);border-radius:4px}
/* Focus has to be visible on BOTH the light and the dark sections. A single
   bronze ring disappears against the navy bands, so the dark contexts get a
   light ring instead. */
:focus-visible{outline:3px solid var(--bronze);outline-offset:3px;border-radius:2px}
.site-head :focus-visible,.hero :focus-visible,.band-navy :focus-visible,
.cta :focus-visible,.site-foot :focus-visible{outline-color:var(--gold-soft)}
/* WCAG 2.5.5: interactive targets at least 44x44. The footer used to carve
   itself an exception at 36px one line below this rule, which quietly undid it
   for the eight links most likely to be tapped on a phone. */
.nav a,.head-call,.btn,.model-more,.foot-col a,.brand{min-height:44px;display:inline-flex;
  align-items:center}
.nav a{padding-inline:2px}
.brand{flex-direction:column;justify-content:center;align-items:flex-start}

/* ── header ─────────────────────────────────────────── */
.site-head{background:var(--navy-deep);color:#fff;position:sticky;top:0;z-index:50;
  border-bottom:2px solid var(--red)}
.head-inner{display:flex;align-items:center;gap:var(--s4);min-height:76px;padding-block:var(--s2)}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.05;flex:0 0 auto}
.brand-mark{font-family:var(--display);font-size:1.25rem;color:#fff;letter-spacing:.01em}
.brand-sub{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-top:4px}
.nav{margin-left:auto}
.nav ul{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0}
.nav a{color:#dbe2ea;text-decoration:none;font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;padding-block:var(--s2)}
.nav a:hover,.nav a[aria-current]{color:var(--gold-soft);box-shadow:inset 0 -2px 0 var(--gold)}
.head-call{flex:0 0 auto;border:1px solid var(--gold);color:var(--gold-soft);text-decoration:none;
  padding:.5rem 1.05rem;border-radius:2px;font-size:.82rem;letter-spacing:.06em;font-weight:600;white-space:nowrap}
.head-call:hover{background:var(--gold);color:var(--navy-deep)}

/* ── hero ───────────────────────────────────────────── */
.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;
  min-height:clamp(30rem,72vh,44rem);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture,.hero-bg img{width:100%;height:100%}
.hero-bg img{object-fit:cover;object-position:60% 45%;opacity:.7}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,14,24,.94) 0%,rgba(6,14,24,.74) 42%,rgba(6,14,24,.18) 100%)}
.hero .wrap{position:relative;z-index:1;padding-block:var(--s6);width:100%}
.hero-inner{max-width:38rem}
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft);
  margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s2)}
.eyebrow::after{content:"";height:1px;width:3.5rem;background:var(--red-bright)}
.hero h1{color:#fff;margin-bottom:var(--s3)}
.hero .lede{font-size:1.16rem;color:#d3dbe4;max-width:32rem}
.hero-actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}

/* ── buttons ────────────────────────────────────────── */
.btn{display:inline-block;padding:.9rem 1.7rem;border-radius:2px;text-decoration:none;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border:1px solid transparent;transition:.16s;cursor:pointer}
.btn-primary{background:var(--gold);color:var(--navy-deep)}
.btn-primary:hover{background:var(--gold-soft);color:var(--navy-deep)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft);background:rgba(255,255,255,.05)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-mid);color:#fff}

/* ── sections ───────────────────────────────────────── */
.band{padding-block:var(--s6)}
.band-bone{background:var(--bone)}
.band-navy{background:var(--navy-deep);color:#dbe2ea}
.band-navy h2{color:#fff}
.section-head{max-width:var(--measure);margin-bottom:var(--s5)}
.section-head p{color:var(--muted)}
.band-navy .section-head p{color:#aab6c4}
.rule{width:3rem;height:2px;background:var(--red);border:0;margin:0 0 var(--s3)}

/* ── product grid, the core of the site ─────────────── */
.models{display:grid;gap:var(--s4);grid-template-columns:repeat(3,minmax(0,1fr))}
.model{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:.18s}
.model:hover{border-color:var(--bronze);box-shadow:0 14px 40px rgba(10,21,35,.13);transform:translateY(-3px)}
.model .shot{display:block;aspect-ratio:3/4;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 15%,#1b3557 0%,var(--navy-deep) 70%)}
.model .shot img{width:100%;height:100%;object-fit:contain;padding:var(--s1)}
.model-body{padding:var(--s3) var(--s3) var(--s4);flex:1;display:flex;flex-direction:column}
.model-body h3{margin-bottom:var(--s1);font-size:1.28rem}
.model-body p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.5}
.model-more{display:inline-block;margin-top:auto;padding-top:var(--s2);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--bronze)}

/* single product */
.product{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
  padding-block:var(--s5)}
.product .shot{display:block;border-radius:3px;position:sticky;top:104px;
  background:radial-gradient(120% 80% at 50% 12%,#1b3557 0%,var(--navy-deep) 72%)}
.product .shot img{width:100%;max-height:calc(100vh - 12rem);object-fit:contain;padding:var(--s4)}
.product-info h1{margin-bottom:var(--s2)}
.collection-tag{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);
  margin-bottom:var(--s3)}

/* ── feature list ───────────────────────────────────── */
.features{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.feature{border-top:2px solid var(--gold);padding-top:var(--s3)}
.feature h3{font-family:var(--sans);font-size:.95rem;font-weight:700;color:inherit;margin-bottom:var(--s1)}
.feature p{margin:0;font-size:.9rem;color:var(--muted)}
.band-navy .feature p{color:#9fadbd}
.band-navy .feature h3{color:#fff}

/* ── chips / spec lists ─────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:0}
.chips li{border:1px solid var(--line);border-radius:2px;padding:.4rem 1rem;font-size:.86rem;color:var(--body)}
.band-navy .chips li{border-color:rgba(255,255,255,.2);color:#dbe2ea}
.speclist{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:0}
.speclist dt{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.speclist dd{margin:0}

/* ── statute ────────────────────────────────────────── */
.statute{margin:0;border-left:3px solid var(--red);padding:var(--s2) 0 var(--s2) var(--s3);max-width:34rem}
.statute p{margin:0;font-family:var(--display);font-size:1.15rem;line-height:1.45}
.statute-label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);margin-bottom:var(--s2)}

/* ── rendering notice, required on every product image ── */
.rendering-note{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin-top:var(--s2)}
.band-navy .rendering-note{color:#8b98a8}

/* ── article bits kept for the flag-code page ───────── */
.article{padding-block:var(--s5)}
.prose{max-width:var(--measure)}
.prose h2{margin-top:var(--s5)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:0 0 var(--s3);
  font-size:.78rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:var(--s2);color:var(--line)}
.crumbs a{color:var(--muted)}
.answer{background:var(--bone);border-left:3px solid var(--gold);padding:var(--s3) var(--s4);
  margin:0 0 var(--s4);max-width:var(--measure)}
.answer-q{font-weight:700;color:var(--ink);margin-bottom:var(--s1);font-size:.95rem}
.answer-a{margin:0;font-size:1.04rem}
.faq{margin:var(--s5) 0;max-width:var(--measure)}
.faq dt{font-weight:700;color:var(--ink);margin-top:var(--s3)}
.faq dd{margin:var(--s1) 0 0}
.note{border:1px solid var(--line);border-radius:3px;padding:var(--s3);margin:var(--s4) 0;
  max-width:var(--measure);background:var(--bone)}
.note p{margin:0;font-size:.88rem;color:var(--muted)}
.sources{margin-top:var(--s5);max-width:var(--measure)}
.sources ul{list-style:none;padding:0;margin:0}
.sources li{border-top:1px solid var(--line);font-size:.9rem}
/* Citation links were 17px tall. They are the one thing on this page a
   sceptical reader will actually try to tap. */
.sources li a{display:flex;align-items:center;min-height:44px;padding:var(--s2) 0}
.fig{margin:var(--s5) 0}
.fig-svg{width:100%;height:auto;border:1px solid var(--line);border-radius:3px;background:var(--bone)}
.fig figcaption{margin-top:var(--s2);font-size:.86rem;color:var(--muted);max-width:var(--measure)}
.pending{color:var(--muted);font-style:italic}

/* ── cta ────────────────────────────────────────────── */
.cta{background:var(--navy-deep);color:#dbe2ea;padding-block:var(--s6);
  border-top:2px solid var(--red)}
.cta h2{color:#fff}
.cta p{max-width:var(--measure);color:#aab6c4}
.cta-actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}

/* ── contact ────────────────────────────────────────── */
.contact-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:var(--s4)}
.contact-form{display:flex;flex-direction:column;gap:var(--s1);max-width:27rem}
.contact-form label{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:var(--s2);font-weight:600}
.contact-form input,.contact-form textarea{font:inherit;font-size:.95rem;padding:.7rem .85rem;
  border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--body)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--bronze)}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{
  outline:3px solid var(--bronze);outline-offset:2px}
.contact-form .btn{margin-top:var(--s3);align-self:flex-start}
address{font-style:normal;line-height:1.8}

/* ── footer ─────────────────────────────────────────── */
.site-foot{background:var(--navy-deep);color:#9fadbd;padding-block:var(--s5) var(--s4);font-size:.9rem;
  border-top:1px solid rgba(255,255,255,.08)}
.foot-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.foot-col h2{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:var(--s2)}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin-bottom:var(--s1)}
.site-foot a{color:#c3cdd8;text-decoration:none}
.site-foot a:hover{color:var(--gold-soft)}
.foot-tag{color:var(--gold-soft);margin-top:var(--s2);font-family:var(--display);font-size:1rem}
.foot-legal{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--s4);padding-top:var(--s3);
  font-size:.76rem;line-height:1.6;color:#7d8b9b}
.foot-legal p{margin-bottom:var(--s2);max-width:60rem}
.copyright{margin-bottom:0}

/* ── responsive ─────────────────────────────────────── */
@media (max-width:1000px){
  .product{grid-template-columns:1fr;gap:var(--s4)}
  .product .shot{position:static}
  .product .shot img{max-height:60vh}
}
@media (max-width:900px){
  :root{--s5:2.75rem;--s6:3.75rem}
  .head-inner{flex-wrap:wrap;gap:var(--s2) var(--s3);min-height:0;padding-block:var(--s2)}
  .brand{order:1}
  .head-call{order:2;margin-left:auto}
  /* This nav used to scroll sideways. At 390px that put "Who we serve" and
     "Contact" past the right edge with no scrollbar and no affordance, so on a
     phone the two pages a buyer actually wants were effectively unreachable.
     Wrapping costs about one extra row and hides nothing. */
  /* A sticky header is right on desktop and wrong here: wrapped to two nav
     rows it stands 330px tall, which is 39% of a 390x844 phone screen taken
     permanently out of the content area. It scrolls away on mobile instead. */
  .site-head{position:static}
  .nav{order:3;width:100%;margin-left:0}
  .nav ul{gap:2px var(--s3);flex-wrap:wrap;row-gap:0}
  .nav a{font-size:.72rem;white-space:nowrap}
  .hero{min-height:0}
  .hero .wrap{padding-block:var(--s5)}
  .hero .lede{font-size:1.04rem}
  .hero-actions .btn{flex:1 1 100%;text-align:center;justify-content:center}
  .section-head{margin-bottom:var(--s4)}
  .models{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .contact-grid{gap:var(--s5)}
}
@media (max-width:560px){
  body{font-size:16px}
  .models{grid-template-columns:1fr}
  .model .shot{aspect-ratio:2/3}
  .speclist{grid-template-columns:1fr;gap:var(--s1)}
  .speclist dd{margin-bottom:var(--s2)}
  .chips li{font-size:.82rem}
  .foot-grid{gap:var(--s4)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.model:hover{transform:none}}
@media print{.site-head,.cta,.hero-bg{display:none}body{font-size:12pt;color:#000}}

/* Spec sheets are documents, not products — they keep a light well. */
.shot.sheet{background:var(--bone)!important}
.shot.sheet img{padding:var(--s3)}

/* ── contact: phone and email as real targets ────────── */
.contact-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s2)}
.contact-actions .btn{flex:1 1 auto;justify-content:center;text-align:center}
.contact-email{color:var(--muted);font-size:.92rem;word-break:break-word}
/* Honeypot. Hidden from sight and from assistive tech, but still submitted,
   so it must not use display:none — some bots skip those. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Wells with no render yet. An empty navy box reads as a failed image; this
   reads as a company that has not photographed that model. */
.shot.shot-empty{display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:3/4;background:var(--navy-deep);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 12px,transparent 12px 24px)}
.shot.shot-empty span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:#8f9bab;line-height:2}
.product .shot.shot-empty{aspect-ratio:4/5;border-radius:3px;position:static}
@media (max-width:560px){.shot.shot-empty{aspect-ratio:2/3}}

/* "Finishes" and "Materials" sat flush against the chip list above them, so the
   groups read as one run instead of three. */
.chips + h3, .chips + h2{margin-top:var(--s4)}