/* ==========================================================================
   Southern Patio Enclosures: site.css
   Every inner page of the public site, in the Build and Price look.

   Loaded AFTER spe.css on the public site only. The internal Hot Ticket CRM
   loads spe.css alone, so nothing here can reach it. spe.css still supplies
   the component names (.card, .panel, .btn, .faq-item ...); this file re-dresses
   them: cream paper with a faint drafting grid, navy "tab" labels, big Jost
   capitals, white sheets with a 1px rule and an inset red hairline, navy table
   heads, red square buttons, a navy bar with a 4px red rule.

   Reference: the approved single-page demo (v4-build). Fonts: Jost for
   display, Open Sans for reading; both are loaded by every page's <head>.

   Contents
     1  Page-to-page hand-off (view transitions)
     2  Tokens, base type
     3  Layout helpers (.wrap, .tab, .drafting)
     4  Chrome: skip link, bar, strip, full menu, footer, sticky call bar, CJ
     5  Page head (title on the sheet, photo in a frame)
     6  Sections and section heads
     7  Buttons
     8  Sheets: card, panel, callout, quote, keyline, stats, features
     9  Lists, spec list, tables, FAQ
    10  Gallery, video, badges, blog images, logos, bands
    11  Forms
    12  Figures (SVG) and odds and ends
    13  Responsive
    14  Reduced motion, print
   ========================================================================== */


/* ==========================================================================
   1  Page-to-page hand-off
   ========================================================================== */

/* Soft hand-off between pages: the page fades out, the next one fades up and settles. Browsers without view transitions just open the page. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.28s ease both spe-vt-out}
::view-transition-new(root){animation:.5s cubic-bezier(.2,.8,.2,1) both spe-vt-in}
@keyframes spe-vt-out{to{opacity:0}}
@keyframes spe-vt-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* The bar and the two fixed bars are lifted out of the page snapshot, so they
   hold perfectly still while the page around them dissolves (otherwise they
   would ghost and rise with everything else). Off while the full menu is open:
   the menu itself then dissolves into the next page. */
@supports (view-transition-name:none){
  header.bar{view-transition-name:spe-bar}
  .mobile-cta{view-transition-name:spe-cta}
  .chatbtn{view-transition-name:spe-chat}
  html.menu-open header.bar,html.menu-open .mobile-cta,html.menu-open .chatbtn{view-transition-name:none}
}

/* Browsers with no view transitions at all: a short fade and rise on entry. */
@supports not (view-transition-name:none){
  body.site main,body.site .bar{animation:spe-enter .4s cubic-bezier(.2,.8,.2,1) both}
  @keyframes spe-enter{from{opacity:0;transform:translateY(10px)}}
}


/* ==========================================================================
   2  Tokens and base type
   ========================================================================== */
:root{
  color-scheme:light;
  --paper:#f6f2e7; --paper-2:#eee8d8; --paper-3:#fbf9f3; --white:#fff;
  --navy:#272944; --navy-2:#1c1d36; --night:#14152a;
  --red:#c5232a; --red-hi:#d8383e; --red-dk:#96161c;
  --slate:#6e7aa6; --tint:#eceef6;
  --ink:#2b2c40; --body-2:#474860; --muted:#62647a; --mute-2:#8a8ca6;
  --rule:#e4decd; --rule-2:#d3cbb4;
  --line:rgba(197,35,42,.55);
  --grid:rgba(39,41,68,.075); --grid-2:rgba(39,41,68,.035);
  --display:"Jost","Futura","Century Gothic","Avenir Next",Helvetica,Arial,sans-serif;
  --body:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gut:clamp(16px,4vw,56px);
  --barH:64px;
  --sec:clamp(56px,6.6vw,100px);
  --max:1320px;

  /* spe.css tokens, remapped so any component this file does not name
     explicitly still lands in the same family. */
  --primary:var(--red); --primary-hover:var(--red-hi); --primary-dark:var(--red-dk);
  --accent:var(--slate); --accent-hover:#565f85; --accent-soft:var(--tint);
  --bg:var(--paper); --surface:#fff; --surface-2:var(--paper-2); --surface-3:#e6dfcb;
  --dark:var(--navy); --darker:var(--navy-2);
  --text:var(--ink); --text-strong:var(--navy); --text-muted:var(--muted);
  --border:var(--rule); --border-strong:var(--rule-2);
  --danger:var(--red);
  --font-sans:var(--body); --font-head:var(--display);
  --r-sm:0; --r:2px; --r-lg:0;
  --sh-1:0 1px 2px rgba(20,20,40,.05),0 30px 60px -44px rgba(39,41,68,.45);
  --sh-2:0 2px 6px rgba(20,21,42,.08),0 40px 70px -46px rgba(20,21,42,.6);
  --sh-3:0 30px 80px -30px rgba(20,21,42,.5);
}

html{background:var(--paper);scroll-padding-top:calc(var(--barH) + 16px)}
html.menu-open,html.menu-open body{overflow:hidden}
body.site{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video{max-width:100%}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.bar :focus-visible,.foot :focus-visible,.cta-band :focus-visible,.section--dark :focus-visible,
.mobile-cta :focus-visible,.tagband :focus-visible,.chatbtn:focus-visible{outline-color:#fff}
[tabindex="-1"]:focus{outline:none}
main:focus{outline:none}

/* Links: red and underlined inside running text, plain everywhere else. */
a{color:var(--red);text-decoration:none}
a:hover{color:var(--navy);text-decoration:none}
main :is(p,li,dd,td,figcaption,blockquote,.hint,.form-note,.callout) a:not(.btn){
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
}
main :is(p,li,dd,td,figcaption,blockquote,.hint,.form-note,.callout) a:not(.btn):hover{color:var(--navy);text-decoration-thickness:2px}
main li::marker{color:var(--red)}

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);font-weight:500;color:var(--navy);
  margin:0 0 .5em;text-wrap:balance;
}
h1{font-size:clamp(38px,4.3vw,66px);line-height:.97;text-transform:uppercase;letter-spacing:.004em}
h2{font-size:clamp(28px,3.3vw,46px);line-height:1;text-transform:uppercase;letter-spacing:.005em}
h3{font-size:clamp(20px,1.7vw,25px);line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
h4{font-size:clamp(15.5px,1.25vw,18px);line-height:1.25;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
h5,h6{font-size:12.5px;line-height:1.3;text-transform:uppercase;letter-spacing:.16em;font-weight:600}
p{margin:0 0 1.1em}
strong,b{color:var(--navy)}
hr{border:0;border-top:1px solid var(--rule);margin:36px 0}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--body-2)}
.muted,.text-muted{color:var(--muted)}
small{font-size:.86em}


/* ==========================================================================
   3  Layout helpers
   ========================================================================== */
.wrap{width:100%;max-width:calc(1320px + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:calc(800px + 2 * var(--gut))}
.wrap-wide{max-width:calc(1480px + 2 * var(--gut))}

.drafting,.pagehead,.drawer{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:-1px -1px;
}

/* The navy tab: the label that sits on top of every part of the quote sheet. */
.tab,.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--navy);color:#fff;
  font:600 11.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;
  padding:10px 14px;margin:0;
}


/* ==========================================================================
   4  Chrome
   ========================================================================== */

/* skip link */
.skip{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--red);color:#fff;padding:12px 16px;
  font:600 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:10px;top:10px;color:#fff}
.skip:focus-visible{outline-color:#fff;outline-offset:2px}

/* ---- the bar: navy, with the 4px red rule of the quote masthead ---- */
.bar{
  position:sticky;top:0;z-index:50;
  background:var(--navy);border-bottom:4px solid var(--red);
  transition:box-shadow .3s;
}
.bar--scrolled{box-shadow:0 16px 30px -22px rgba(20,21,42,.75)}
.bar__in{display:flex;align-items:center;gap:26px;height:var(--barH)}
.bar__logo{display:block;flex:0 0 auto}
.bar__logo img{display:block;height:28px;width:auto;max-width:none}
.bar__nav{display:flex;gap:26px;margin-left:auto}
.bar__nav a{
  position:relative;padding:8px 0;white-space:nowrap;color:#fff;text-decoration:none;
  font:500 12px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;
}
.bar__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease);
}
.bar__nav a:hover,.bar__nav a:focus-visible{color:#fff}
.bar__nav a:hover::after,.bar__nav a:focus-visible::after,.bar__nav a[aria-current="page"]::after{transform:scaleX(1)}
.bar__ph{font:500 16px/1 var(--display);letter-spacing:.06em;color:#fff;text-decoration:none;white-space:nowrap}
.bar__ph:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.3em}
.bar .btn{min-height:42px;padding:0 18px;white-space:nowrap}
.bar__menu{
  flex:0 0 42px;width:42px;height:42px;padding:0;
  display:grid;place-content:center;gap:5px;
  background:transparent;border:1px solid rgba(255,255,255,.45);border-radius:0;cursor:pointer;
}
.bar__menu span{display:block;width:18px;height:1.5px;background:#fff;transition:transform .3s}
.bar__menu:hover{border-color:#fff}

/* ---- the strip under the bar ---- */
.strip{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.strip__in{
  display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:36px;
  font:500 11.5px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
}
.strip a{text-decoration:none;color:inherit}
.strip a:hover{color:var(--red)}
.strip__svc{font-weight:600;color:var(--red)!important;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.strip__svc:hover{color:var(--navy)!important}
.strip__m{display:none}
.strip b{font-weight:600;color:var(--red)}

/* ---- the full menu ---- */
.drawer{
  position:fixed;inset:0;z-index:70;overflow:auto;overscroll-behavior:contain;
  visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s linear .55s;
}
.drawer.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.drawer .bar{position:sticky}
.drawer__bar .bar__cta{margin-left:auto}
.bar__menu.is-x span:first-child{transform:translateY(3.25px) rotate(45deg)}
.bar__menu.is-x span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.drawer__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr);
  gap:clamp(24px,3vw,48px);padding-block:clamp(36px,6vh,64px) 64px;
}
.drawer__col{transition:opacity .6s,transform .6s var(--ease)}
.drawer:not(.open) .drawer__col{opacity:0;transform:translateY(18px)}
.drawer.open .drawer__col:nth-child(2){transition-delay:.06s}
.drawer.open .drawer__col:nth-child(3){transition-delay:.12s}
.drawer.open .drawer__col:nth-child(4){transition-delay:.18s}
.drawer__col .tab{margin-bottom:10px}
.drawer__col ul{list-style:none;margin:0 0 30px;padding:0}
.drawer__col li{margin:0}
.drawer__col li a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--rule-2);
  font:400 18px/1.25 var(--display);letter-spacing:.01em;color:var(--navy);text-decoration:none;
  transition:color .2s,padding .25s;
}
.drawer__col li a::after{content:"\2192";content:"\2192" / "";color:var(--red);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s}
.drawer__col li a:hover,.drawer__col li a:focus-visible{color:var(--red);padding-left:4px}
.drawer__col li a:hover::after,.drawer__col li a:focus-visible::after{opacity:1;transform:none}
.drawer__col li.big a{
  font:500 clamp(22px,2.1vw,30px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;padding:12px 0;
}
.talk{position:relative;background:#fff;border:1px solid var(--rule);padding:28px 26px 26px;box-shadow:var(--sh-1)}
.talk::before{content:"";position:absolute;inset:7px;border:1px solid var(--line);pointer-events:none}
.talk__ph{
  display:block;margin:0 0 6px;text-decoration:none;
  font:400 clamp(28px,2.6vw,38px)/1.1 var(--display);letter-spacing:.04em;color:var(--navy);
}
.talk__ph:hover{color:var(--red)}
.talk p{margin:0 0 4px;color:var(--muted);font-size:14px}
.talk .btn{margin:18px 0 22px;width:100%;padding:0 12px;letter-spacing:.12em}
.txline{
  display:flex;align-items:center;gap:12px;
  font:600 11px/1.45 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--navy);
}
.txline svg{flex:0 0 40px;width:40px;height:40px}

/* ---- footer: the brochure's back panel ---- */
.foot{
  background:var(--navy);color:#c3c5da;border-top:4px solid var(--red);
  padding:56px 0 calc(40px + env(safe-area-inset-bottom,0px));font-size:14px;line-height:1.6;
}
.foot a{color:#c3c5da;text-decoration:none}
.foot a:hover{color:#fff}
.foot__cta{
  position:relative;background:#fff;color:var(--navy);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  max-width:520px;margin:0 auto 48px;padding:22px 20px;text-align:center;
  font:600 11px/1.4 var(--display);letter-spacing:.2em;text-transform:uppercase;
}
.foot__cta::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.foot .foot__cta a{font:500 30px/1.1 var(--display);letter-spacing:.05em;color:var(--navy)}
.foot .foot__cta a:hover{color:var(--red)}
.foot__cta small{font:400 13px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px;padding-bottom:44px}
.foot__cols h4{
  margin:0 0 16px;color:#fff;
  font:600 11.5px/1.2 var(--display);letter-spacing:.22em;text-transform:uppercase;
}
.foot__cols h4::after{content:"";display:block;width:28px;height:3px;background:var(--red);margin-top:11px}
.foot__cols ul{list-style:none;margin:0;padding:0}
.foot__cols li{margin:0 0 9px}
.foot__cols li::marker{content:""}
.foot__cols li a:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.25em}
.foot__row{
  display:flex;flex-wrap:wrap;gap:26px 48px;align-items:center;justify-content:space-between;
  padding-top:34px;border-top:1px solid rgba(255,255,255,.12);
}
.foot__brand{flex:1 1 420px;max-width:660px}
.foot__brand img{display:block;height:30px;width:auto;max-width:none;margin-bottom:14px}
.foot__brand p{margin:0;font-size:13.5px;color:#b5b7cf;max-width:62ch}
.foot__tx{
  display:flex;align-items:center;gap:14px;
  font:600 11.5px/1.5 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--paper);
}
.foot__tx svg{flex:0 0 46px;width:46px;height:46px}
/* the mark's left half is drawn navy for the white menu card; on the navy footer it turns paper */
.foot__tx svg path:last-of-type{fill:var(--paper)}
.foot__menu{
  background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:0;color:#fff;cursor:pointer;
  font:600 11.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;padding:15px 18px;
  transition:border-color .2s,background .2s,color .2s;
}
.foot__menu:hover{border-color:#fff;background:#fff;color:var(--navy)}
.foot__fine{font-size:12px;line-height:1.65;color:#a9abc4;margin:30px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;margin-top:20px;font-size:12px;line-height:1.6;color:#a9abc4}

/* ---- the sticky call bar (phones and tablets) ---- */
@media (max-width:980px){
  .mobile-cta{
    z-index:45;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--navy);border-top:4px solid var(--red);
    box-shadow:0 -14px 30px -20px rgba(20,21,42,.7);
  }
  .mobile-cta .btn{flex:1 1 0;min-height:44px;padding:0 10px;white-space:nowrap}
  body.site{padding-bottom:0}
  .foot{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}
html.menu-open .mobile-cta,html.menu-open .chatbtn,html.menu-open .chatpanel{visibility:hidden}

/* ---- CJ: the assistant. Navy pill, red dot; a paper panel with the red hairline ---- */
.chatbtn{
  position:fixed;right:20px;bottom:20px;z-index:55;
  display:inline-flex;align-items:center;gap:11px;min-height:46px;padding:0 20px 0 17px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--navy);color:#fff;
  font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 14px 30px -12px rgba(20,21,42,.65),inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background .2s,transform .2s;
}
.chatbtn:hover{background:var(--navy-2);transform:translateY(-1px)}
.chatbtn__i{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--red);
  font-size:0;line-height:0;opacity:1;overflow:hidden;
  box-shadow:0 0 0 0 rgba(216,56,62,.55);animation:spe-dot 2.4s ease-out infinite;
}
@keyframes spe-dot{0%{box-shadow:0 0 0 0 rgba(216,56,62,.55)}70%,100%{box-shadow:0 0 0 9px rgba(216,56,62,0)}}
.chatpanel{
  position:fixed;right:20px;bottom:78px;z-index:56;
  width:min(410px,calc(100vw - 40px));max-height:min(620px,calc(100svh - 110px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:0;border-radius:0;
  box-shadow:0 -6px 20px rgba(20,21,42,.10),0 34px 80px -20px rgba(20,21,42,.5);
}
.chatpanel[hidden]{display:none}
.chatpanel::before{content:"";position:absolute;inset:63px 7px 7px;border:1px solid var(--line);pointer-events:none;z-index:2}
.chatpanel__h{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 10px 0 20px;
  background:var(--navy);border-bottom:4px solid var(--red);color:#fff;
}
.chatpanel__h b{font:600 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.chatpanel__x{
  width:40px;height:40px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;
  font-size:26px;line-height:1;cursor:pointer;opacity:.85;
}
.chatpanel__x:hover{opacity:1;background:rgba(255,255,255,.1)}
.chatpanel__log{flex:1 1 auto;overflow-y:auto;padding:22px 20px 12px;display:flex;flex-direction:column;gap:10px}
.chatmsg{margin:0;padding:11px 14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;border-radius:0}
.chatmsg--bot{background:#fff;border:1px solid var(--rule);border-left:3px solid var(--navy);color:var(--ink)}
.chatmsg--you{background:var(--navy);color:#fff;align-self:flex-end;max-width:90%}
.chatmsg--err{background:#fdeeee;border:1px solid #f0c9cb;border-left:3px solid var(--red);color:#7d1a1f}
.chatmsg a{color:var(--red);text-decoration:underline;text-underline-offset:.2em}
.chatpanel__f{flex:0 0 auto;display:flex;gap:0;padding:8px 20px 12px;border:0}
.chatpanel__in{
  flex:1;min-width:0;height:46px;padding:0 13px;border:1.5px solid var(--navy);border-right:0;border-radius:0;
  background:#fff;color:var(--ink);font:400 15px/1.3 var(--body);
}
.chatpanel__in:focus{outline:none;box-shadow:0 0 0 3px rgba(197,35,42,.28)}
.chatpanel__f .btn{min-height:46px;border-radius:0;padding:0 18px}
.chatpanel__n{flex:0 0 auto;margin:0;padding:0 20px 16px;font-size:12px;line-height:1.5;color:var(--muted)}


/* ==========================================================================
   5  Page head: title on the drawing sheet, photo in a frame
   ========================================================================== */
.pagehead{
  position:relative;color:var(--ink);
  padding:clamp(34px,4.4vw,64px) 0 clamp(40px,4.6vw,72px);
  border-bottom:1px solid var(--rule);overflow:clip;
}
.pagehead::after{display:none}
.ph__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.pagehead--photo{padding-block:clamp(22px,2.6vw,40px) clamp(34px,4vw,60px)}
.pagehead--photo .ph__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.ph__copy{position:relative;z-index:2;min-width:0;max-width:940px}
.pagehead--photo .ph__copy{max-width:none}

.crumbs{
  display:inline-flex;flex-wrap:wrap;align-items:center;max-width:100%;
  background:var(--navy);color:#fff;margin:0 0 20px;padding:10px 14px;
  font:600 11.5px/1.35 var(--display);letter-spacing:.2em;text-transform:uppercase;
}
.crumbs::before{content:"";flex:0 0 auto;width:8px;height:8px;background:var(--red);margin-right:12px}
.crumbs a{color:#fff;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.3em;text-decoration-thickness:2px}
.crumbs span{margin:0 10px;color:#a9abc4;opacity:1}

.pagehead h1{margin:0;max-width:16ch;color:var(--navy);font-size:clamp(36px,4.1vw,64px)}
.pagehead:not(.pagehead--photo) h1{max-width:20ch}
.ph__copy>.crumbs+h1{animation:spe-rise 1s var(--ease) both}
.ph__dim{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:26px;margin:22px 0 18px;max-width:620px;
}
.ph__dim::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--red);
  animation:spe-draw-x 1s .25s var(--ease) both;
}
.ph__dim i{
  position:absolute;top:50%;left:0;width:15px;height:1.5px;background:var(--red);
  transform:translate(-50%,-50%) rotate(-45deg);animation:spe-fade .4s .9s both;
}
.ph__dim i.r{left:100%}
.ph__dim i.e{width:1px;height:26px;transform:translate(-50%,-50%);background:var(--red);opacity:.6}
.ph__dim i.er{left:100%}
.ph__dim span{
  position:relative;background:var(--paper);padding:0 12px;white-space:nowrap;
  font:600 10.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--red);
  animation:spe-fade .6s .8s both;
}
.ph__copy>p{
  margin:0;max-width:58ch;
  font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.62;color:var(--ink);
  animation:spe-fade .8s .35s both;
}
@keyframes spe-draw-x{from{transform:scaleX(0)}}
@keyframes spe-draw-y{from{transform:scaleY(0)}}
@keyframes spe-fade{from{opacity:0}}
@keyframes spe-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes spe-settle{from{transform:scale(1.08)}}

/* the framed photo, standing on a ground line, with dimension marks */
.ph__media{position:relative;min-width:0;padding:44px 54px 58px 0}
.ph__media::before{
  content:"";position:absolute;inset:0 0 0 -28px;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect;
}
.ph__media::after{
  content:"";position:absolute;left:-28px;right:0;bottom:44px;height:14px;pointer-events:none;
  border-top:1.5px solid var(--navy);
  background:repeating-linear-gradient(-45deg,rgba(39,41,68,.28) 0 1px,transparent 1px 7px);
  animation:spe-fade .8s .3s both;
}
.ph__dx{position:absolute;left:0;right:54px;top:14px;height:16px;display:flex;justify-content:center;align-items:center}
.ph__dx::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--red);
  animation:spe-draw-x 1s .35s var(--ease) both;
}
.ph__dx i,.ph__dy i{position:absolute;width:13px;height:1.5px;background:var(--red)}
.ph__dx i{top:50%;left:0;transform:translate(-50%,-50%) rotate(-45deg)}
.ph__dx i.r{left:100%}
.ph__dx span,.ph__dy span{
  position:relative;background:var(--paper);padding:0 10px;white-space:nowrap;
  font:600 10px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--red);
  animation:spe-fade .5s .9s both;
}
.ph__dy{position:absolute;right:16px;top:44px;bottom:58px;width:16px;display:flex;align-items:center;justify-content:center}
.ph__dy::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--red);
  animation:spe-draw-y 1s .5s var(--ease) both;
}
.ph__dy i{left:50%;top:0;transform:translate(-50%,-50%) rotate(-45deg)}
.ph__dy i.b{top:100%}
.ph__dy span{transform:rotate(-90deg);padding:0 8px}

.ph__frame{
  position:relative;margin:0;background:#fff;padding:10px;
  height:clamp(320px,32vw,470px);
  box-shadow:0 2px 6px rgba(20,21,42,.08),0 40px 80px -48px rgba(20,21,42,.7);
}
.ph__frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none;z-index:3}
.ph__frame .hero__slides{position:absolute;inset:10px;z-index:0;overflow:hidden;background:var(--navy-2)}
.ph__frame .hero__slides::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:90px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,29,54,0),rgba(28,29,54,.6));
}
.ph__frame .hero__slide{transition:opacity 1.4s ease}
.ph__frame .hero__slide.is-active{animation:spe-settle 2.4s var(--ease) both}
.ph__frame .hero__controls{position:absolute;inset:10px;z-index:4;pointer-events:none}
.ph__frame .hero__controls>*{pointer-events:auto}
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;padding:0 0 3px;
  display:grid;place-items:center;border:0;border-radius:0;
  background:var(--navy);color:#fff;font:400 28px/1 var(--display);cursor:pointer;
  transition:background .2s;
}
.hero__arrow:hover{background:var(--red)}
.hero__arrow--prev{left:0}
.hero__arrow--next{right:0}
.hero__dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:8px;pointer-events:none}
.hero__dot{
  pointer-events:auto;width:28px;height:24px;padding:10px 0;border:0;border-radius:0;cursor:pointer;
  background:rgba(255,255,255,.55);background-clip:content-box;transform:none;transition:background-color .2s;
}
.hero__dot:hover{background-color:#fff}
.hero__dot.is-active{background-color:var(--red);transform:none}


/* ==========================================================================
   6  Sections and section heads
   ========================================================================== */
.section{padding-block:var(--sec);background:var(--paper)}
.section+.section:not(.section--wash){border-top:1px solid var(--rule)}
.section--tight{padding-block:clamp(36px,4.6vw,64px)}
.section--wash{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.section--wash2{background:var(--paper-3);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.section--dark{background:var(--navy);color:#dcdbe6;border-top:4px solid var(--red)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .eyebrow{background:#fff;color:var(--navy)}
.section--dark p{color:#dcdbe6}

/* A drawing-sheet ground behind the pages that are one big form. */
.section:has(form[data-lead-form]){
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:-1px -1px;
  padding-top:clamp(28px,3.4vw,52px);
}

.section-head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(32px,5vw,72px);
  align-items:end;max-width:none;margin:0 0 clamp(30px,4vw,52px);text-align:left;
}
.section-head>*{grid-column:1;min-width:0}
.section-head>.eyebrow{justify-self:start;margin-bottom:18px}
.section-head>h2{margin:0;font-size:clamp(30px,3.6vw,50px);line-height:1}
.section-head>h2::after{display:none}
.section-head>h2::before{
  content:"";display:block;width:34px;height:5px;margin-bottom:18px;
  background:linear-gradient(var(--red) 0 2px,transparent 2px 3px,var(--navy) 3px 5px);
}
.section-head>.eyebrow+h2::before{display:none}
.section-head>p{
  grid-column:2;grid-row:1 / span 2;align-self:end;
  margin:0 0 .3em;max-width:54ch;font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.62;color:var(--body-2);
}
.section-head:not(:has(>p)){display:block}
.section-head--left,.wrap-narrow .section-head{display:block;margin-left:0;margin-bottom:clamp(22px,2.8vw,34px)}
.section-head--left>p,.wrap-narrow .section-head>p{margin:16px 0 0;max-width:62ch}
.section--dark .section-head>p{color:#dcdbe6}

/* headings that sit in a column rather than a section head */
.split h2,.section .wrap>div>h2{font-size:clamp(28px,3.3vw,46px);margin-top:18px}
.eyebrow+h2{margin-top:18px}
.split>div>.eyebrow+h2{margin-top:18px}


/* ==========================================================================
   7  Buttons: red squares, Jost capitals
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border:0;border-radius:2px;
  background:var(--red);color:#fff;
  font:600 12.5px/1.25 var(--display);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;text-align:center;white-space:normal;cursor:pointer;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
.btn:hover{background:var(--red-hi);color:#fff;text-decoration:none;transform:none;box-shadow:0 10px 24px -12px rgba(197,35,42,.7)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.btn svg{flex:0 0 auto}
.btn--primary{background:var(--red)}
.btn--ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn--ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.btn--ghost-light:hover{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px #fff}
.btn--dark{background:var(--navy);color:#fff}
.btn--dark:hover{background:var(--navy-2);color:#fff;box-shadow:0 10px 24px -12px rgba(20,21,42,.8)}
.btn--accent{background:var(--slate);color:#fff}
.btn--accent:hover{background:#565f85;color:#fff}
.btn--quiet{background:var(--paper-2);color:var(--navy);box-shadow:inset 0 0 0 1px var(--rule-2)}
.btn--quiet:hover{background:var(--surface-3);color:var(--navy)}
.btn--sm{min-height:38px;padding:0 16px;font-size:11px;letter-spacing:.14em}
.btn--lg{min-height:56px;padding:0 32px;font-size:13.5px}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
/* On a navy band the "dark" button would vanish: it becomes the red one. */
.cta-band .btn--dark,.section--dark .btn--dark{background:var(--red)}
.cta-band .btn--dark:hover,.section--dark .btn--dark:hover{background:var(--red-hi)}


/* ==========================================================================
   8  Sheets: card, panel, callout, quote, keyline, stats, features
   ========================================================================== */
.card,.panel,.quote-block,.keyline{position:relative}
.card{
  background:#fff;border:1px solid var(--rule);border-radius:0;overflow:visible;
  box-shadow:var(--sh-1);transition:box-shadow .25s,transform .25s var(--ease),border-color .25s;
}
.card::before,.panel::before,.quote-block::before,.keyline::before{
  content:"";position:absolute;inset:7px;border:1px solid var(--line);pointer-events:none;z-index:2;
}
.card--pad{padding:34px 34px 30px}
.card--hover:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:var(--rule-2)}
.card__media{aspect-ratio:4/3;background-color:var(--navy-2);position:relative;overflow:hidden;border-radius:0}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:34px 34px 30px}
/* a photo card: the picture sits in a white mat, the hairline over its edge */
.card:has(.card__media){padding:10px}
.card:has(.card__media)::before{inset:5px;z-index:3}
.card:has(.card__media) .card__body{padding:24px 16px 16px}
.card__title{margin:0 0 .5em;font:500 clamp(19px,1.55vw,23px)/1.12 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--navy)}
.card__title a{color:var(--navy);text-decoration:none}
.card__title a:hover{color:var(--red);text-decoration:none}
.card--hover .card__title a::after{content:"";position:absolute;inset:0;z-index:4}
.card__meta{
  display:inline-block;background:var(--navy);color:#fff;padding:7px 10px;
  font:600 10px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;
}
.card__body p{font-size:14.5px;line-height:1.6;color:var(--body-2);margin:0}

.panel{background:#fff;border:1px solid var(--rule);border-radius:0;box-shadow:var(--sh-1)}
.panel__head{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:-1px -1px 0;padding:14px 26px;background:var(--navy);border:0;color:#fff;
}
.panel__head h3,.panel__head h4{margin:0;color:#fff;font:600 12px/1.2 var(--display);letter-spacing:.2em}
.panel__body{padding:34px 34px 30px}
.panel__foot{padding:16px 30px;border-top:1px solid var(--rule);background:var(--paper-3)}
.panel__body>h4:first-child{margin-bottom:.9em}
.panel__body>*:last-child{margin-bottom:0}
.panel__body img[style*="border-radius"],.panel__body img{border-radius:0!important}

.callout{
  position:relative;margin:26px 0;padding:18px 22px;border-radius:0;
  background:var(--paper-3);border:1px solid var(--rule);border-left:4px solid var(--red);
  font-size:14.5px;line-height:1.6;
}
.callout--info{border-left-color:var(--navy)}
.callout--accent{border-left-color:var(--slate)}
.callout--ok{border-left-color:var(--navy)}
.callout--warn{border-left-color:var(--red)}
.callout p:last-child{margin-bottom:0}

.quote-block{
  background:#fff;border:1px solid var(--rule);border-radius:0;padding:40px 34px 30px;box-shadow:var(--sh-1);
}
.quote-block::after{
  content:"\201C";content:"\201C" / "";position:absolute;top:14px;right:24px;z-index:3;
  font:500 72px/1 var(--display);color:var(--red);opacity:.2;
}
.quote-block blockquote{margin:0 0 20px;font-size:15.5px;line-height:1.65;font-style:normal;color:#34354a}
.quote-block cite{
  display:block;padding-top:14px;border-top:1px solid var(--rule);font-style:normal;
  font:600 11px/1.4 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
}

.keyline{background:#fff;border:1px solid var(--rule);padding:30px 34px;box-shadow:var(--sh-1)}

/* the numbers band: the quote sheet's totals, each under its navy rule */
.stat-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px 28px;
  max-width:calc(1320px + 2 * var(--gut));margin-inline:auto;padding:clamp(44px,5.4vw,76px) var(--gut);
  background:transparent;
}
.wrap>.stat-band{padding:0;margin-top:34px}
.stat-band>div{background:transparent;padding:14px 10px 0 0;text-align:left;border-top:3px solid var(--navy)}
.stat-band b{
  display:block;font:500 clamp(34px,3.6vw,52px)/1 var(--display);color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
.stat-band span{
  display:block;margin-top:8px;font:600 10.5px/1.45 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* features: a square icon tile, the title, the sentence */
.feature{
  position:relative;text-align:left;background:#fff;border:1px solid var(--rule);
  padding:30px 28px 26px;box-shadow:var(--sh-1);
}
.feature::before{content:"";position:absolute;inset:7px;border:1px solid var(--line);pointer-events:none}
.feature__icon{
  width:54px;height:54px;border-radius:0;margin-bottom:18px;
  display:grid;place-items:center;font-size:24px;line-height:1;
  background:var(--paper-3);color:var(--red);border:1.5px solid var(--navy);
  filter:grayscale(1);transition:border-color .2s,background .2s;
}
.feature:hover .feature__icon{border-color:var(--red)}
.feature h3{margin:0 0 .45em;font-size:clamp(18px,1.5vw,21px)}
.feature p{margin:0;font-size:14.5px;line-height:1.6;color:var(--body-2)}


/* ==========================================================================
   9  Lists, spec list, tables, FAQ
   ========================================================================== */
.checklist{list-style:none;padding:0;margin:0 0 1.2em}
.checklist li{position:relative;margin:0 0 12px;padding-left:32px;line-height:1.55}
.checklist li::before{
  content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/18px no-repeat;
  color:transparent;font-size:0;
}

.numbered{counter-reset:n;list-style:none;padding:0;margin:0 0 1.2em}
.numbered li{counter-increment:n;position:relative;padding-left:58px;margin-bottom:26px}
.numbered li::before{
  content:counter(n);position:absolute;left:0;top:-2px;width:36px;height:36px;
  display:grid;place-items:center;border-radius:0;background:var(--navy);color:#fff;
  font:600 15px/1 var(--display);
  box-shadow:inset 0 -3px 0 var(--red);
}
.numbered li h4{margin-bottom:.3em}
.numbered li p{margin:0;font-size:14.5px;color:var(--body-2)}

.spec-list{list-style:none;padding:0;margin:0}
.spec-list li{display:flex;gap:18px;align-items:flex-start;margin:0;padding:14px 0;border-bottom:1px solid var(--rule)}
.spec-list li:last-child{border-bottom:0}
.spec-list .k{
  flex:0 0 190px;padding-top:3px;
  font:600 11px/1.5 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.spec-list .v{flex:1;min-width:0;font-size:15px;line-height:1.55;color:var(--ink)}

.table-wrap{
  overflow-x:auto;border:1px solid var(--rule);border-radius:0;background:#fff;box-shadow:var(--sh-1);
  -webkit-overflow-scrolling:touch;
}
table.data{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.5;background:#fff}
table.data th{
  padding:15px 18px;text-align:left;white-space:nowrap;
  background:var(--navy);color:#fff;border-bottom:0;
  font:600 11px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;
}
table.data td{padding:15px 18px;border-bottom:1px solid var(--rule);vertical-align:top}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--paper-3)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data .t-strong{font:600 15px/1.4 var(--display);letter-spacing:.02em;color:var(--navy)}
table.data .t-sub{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--muted)}

.faq-item{position:relative;margin:0 0 10px;background:#fff;border:1px solid var(--rule);box-shadow:var(--sh-1);transition:border-color .2s}
.faq-item[open]{border-color:var(--rule-2)}
.faq-item[open]::before{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none}
.faq-item summary{
  position:relative;list-style:none;cursor:pointer;
  padding:21px 72px 21px 26px;
  font:500 clamp(17px,1.45vw,20px)/1.3 var(--display);letter-spacing:.01em;color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--red)}
.faq-item summary:focus-visible{outline-offset:-3px}
.faq-item summary::after{
  content:"";position:absolute;right:22px;top:50%;width:30px;height:30px;margin-top:-15px;
  transform:none;font-size:0;line-height:0;
  border:1.5px solid var(--navy);background-color:#fff;
  background-image:linear-gradient(var(--red),var(--red)),linear-gradient(var(--red),var(--red));
  background-size:12px 2px,2px 12px;background-position:center;background-repeat:no-repeat;
  transition:background-color .2s,border-color .2s;
}
.faq-item[open] summary::after{
  background-color:var(--navy);
  background-image:linear-gradient(#fff,#fff);background-size:12px 2px;
}
.faq-item .faq-body{position:relative;padding:0 72px 26px 26px;font-size:15.5px;line-height:1.7;color:var(--ink)}
.faq-item .faq-body p:last-child{margin-bottom:0}


/* ==========================================================================
   10  Gallery, video, badges, blog images, logos, bands
   ========================================================================== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px}
.shot{
  position:relative;aspect-ratio:4/3;display:flex;align-items:flex-end;margin:0;
  border:10px solid #fff;border-radius:0;outline:1px solid var(--rule);
  background-color:var(--navy-2);background-clip:padding-box;overflow:visible;
  box-shadow:var(--sh-1);
}
.shot::before{content:"";position:absolute;inset:-5px;border:1px solid var(--line);pointer-events:none;z-index:3}
.shot figcaption{
  position:relative;z-index:2;width:100%;padding:70px 18px 16px;color:#fff;font-size:13.5px;line-height:1.45;
  background:linear-gradient(180deg,rgba(28,29,54,0) 0%,rgba(28,29,54,.55) 45%,rgba(28,29,54,.9) 100%);
}
.shot figcaption b{
  display:block;margin-bottom:5px;color:#fff;
  font:600 10.5px/1.4 var(--display);letter-spacing:.18em;text-transform:uppercase;
}

.video{position:relative;margin:0;padding:10px;background:#fff;border:1px solid var(--rule);box-shadow:var(--sh-1)}
.video::before{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none;z-index:3}
.video__btn{border-radius:0;background:var(--navy-2)}
.video__btn:focus-visible{outline:2px solid var(--red);outline-offset:-4px}
.video__thumb{transition:transform 1.4s var(--ease),opacity .2s}
.video__btn:hover .video__thumb{transform:scale(1.04);opacity:.9}
.video__play{width:74px;height:52px;border-radius:2px;background:var(--red);transition:background .2s}
.video__play::after{border-width:10px 0 10px 17px}
.video__btn:hover .video__play{background:var(--red-hi)}
.video iframe{border-radius:0}
.video__h{margin:22px 0 8px;font:500 clamp(18px,1.5vw,21px)/1.15 var(--display);text-transform:uppercase;letter-spacing:.02em}
.video__cap{margin-top:10px;font-size:14px;color:var(--muted)}

.badge,.tag{
  display:inline-flex;align-items:center;gap:.4em;padding:7px 10px;border-radius:0;white-space:nowrap;
  background:var(--tint);color:var(--navy);border:0;
  font:600 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
}
.badge--primary{background:var(--red);color:#fff}
.badge--accent{background:var(--navy);color:#fff}
.badge--ok{background:var(--navy);color:#fff}
.badge--warn{background:#f7ead0;color:#6d4b06}
.badge--danger{background:#f7dcdd;color:#7d1a1f}
.badge--info{background:var(--tint);color:var(--navy)}
.badge--muted{background:var(--paper-2);color:var(--muted)}

.postimg{position:relative;margin:0 0 1.6em;padding:8px;background:#fff;border:1px solid var(--rule);box-shadow:var(--sh-1)}
.postimg::before{content:"";position:absolute;inset:4px;border:1px solid var(--line);pointer-events:none}
.postimg img{display:block;width:100%;height:auto;border-radius:0}
.postimg--hero{margin-bottom:2em}
.postgallery{gap:22px;margin-top:2.2em}
.postgallery .postimg{margin:0}
img[style*="border-radius"],video[style*="border-radius"]{border-radius:0!important}
video[style*="box-shadow"]{box-shadow:var(--sh-1)!important}

/* blog posts and other long reads */
.wrap-narrow>p,.wrap-narrow>ul,.wrap-narrow>ol{font-size:17px;line-height:1.75;color:#34354a}

.logo-strip{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;align-items:center}
.logo-strip .logo-chip{
  padding:14px 20px;border:1px solid var(--rule);border-radius:0;background:#fff;color:var(--navy);
  font:600 11.5px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .2s,color .2s;
}
.logo-strip .logo-chip:hover{border-color:var(--navy);color:var(--navy)}

.tagband{position:relative;background:var(--navy);color:#fff;padding:18px 0;text-align:center;border-bottom:4px solid var(--red)}
.tagband span{font-weight:300;font-size:clamp(.92rem,1.7vw,1.18rem);letter-spacing:.34em;text-transform:uppercase;text-indent:.34em}

/* the closing band: the "Proud Texas" band of the reference, ring and star at its left */
.cta-band{
  position:relative;overflow:hidden;background:var(--navy);color:#fff;border-top:4px solid var(--red);
  padding:clamp(64px,8vw,112px) 0;text-align:left;
}
.cta-band .wrap{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:center;
}
.cta-band .wrap::before{
  content:"";grid-column:1;grid-row:1 / span 4;align-self:center;
  width:clamp(96px,11vw,150px);aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='25' fill='none' stroke='%23f6f2e7' stroke-width='1.6'/%3E%3Cpath d='M28 9l5 13 13.8.7-10.8 8.8 3.7 13.4L28 37.4l-11.7 7.5 3.7-13.4-10.8-8.8L23 22z' fill='%23c5232a'/%3E%3Cpath d='M28 9v28.4l-11.7 7.5 3.7-13.4-10.8-8.8L23 22z' fill='%23f6f2e7' fill-opacity='.92'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cta-band .wrap>*{grid-column:2}
.cta-band h2{margin:0;color:#fff;max-width:20ch;font-size:clamp(30px,4vw,56px);line-height:.98}
.cta-band p{margin:18px 0 0;max-width:58ch;color:#dcdbe6;font-size:clamp(15px,1.2vw,17px)}
.cta-band .row{justify-content:flex-start;gap:14px;margin-top:28px}
.cta-band a:not(.btn){color:#fff;text-decoration:underline}


/* ==========================================================================
   Layout utilities the pages use
   ========================================================================== */
.grid{display:grid;gap:24px}
.grid-1{grid-template-columns:minmax(0,1fr)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-sidebar{grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,56px);align-items:start}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4.5vw,72px);align-items:center}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center{text-align:center}
.center .row,.row.center{justify-content:center}
.mt-4{margin-top:36px}.mt-5{margin-top:56px}
.mb-3{margin-bottom:26px}.mb-4{margin-bottom:36px}


/* ==========================================================================
   11  Forms
   ========================================================================== */
form[data-lead-form]{position:relative;background:#fff;border:1px solid var(--rule);padding:clamp(24px,3.2vw,40px);box-shadow:var(--sh-1)}
form[data-lead-form]::before{content:"";position:absolute;inset:7px;border:1px solid var(--line);pointer-events:none}
form[data-lead-form]>h3{margin:0 0 .8em;font-size:clamp(20px,1.8vw,26px)}
form[data-lead-form]>h3.mt-4{margin-top:1.8em;padding-top:1.4em;border-top:1px solid var(--rule)}

.field{margin:0 0 20px}
.field>label,.label{
  display:block;margin:0 0 8px;
  font:600 12px/1.35 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
}
.field .hint{display:block;margin-top:6px;font:400 12.5px/1.5 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.req{color:var(--red)}
.hint-inline{font:400 12.5px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.form-optional{margin-left:8px;font:500 12px/1 var(--body);letter-spacing:.02em;text-transform:none;color:var(--muted)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.field-row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
/* the quote form's ZIP and street address share a row: the address is asked to take two thirds, which a grid ignores unless told */
.field-row-3>.field[style*="flex"]{grid-column:span 2}

.site :is(.input,.select,.textarea,.inp,input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="date"],input[type="search"],input[type="password"],input:not([type]),select,textarea){
  width:100%;min-height:48px;padding:11px 14px;
  border:1.5px solid rgba(39,41,68,.62);border-radius:0;
  background-color:#fff;color:var(--ink);
  font:400 16px/1.4 var(--body);
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
.site :is(.input,.select,.textarea,.inp,input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="date"],input[type="search"],input[type="password"],input:not([type]),select,textarea):hover{border-color:var(--navy)}
.site :is(.input,.select,.textarea,.inp,input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="number"],input[type="date"],input[type="search"],input[type="password"],input:not([type]),select,textarea):focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(197,35,42,.28);
}
.site ::placeholder{color:#6e7086;opacity:1}
.site select,.site select.input{
  padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23272944' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.site textarea{min-height:140px;resize:vertical;line-height:1.6}
.site input[type="file"].input{padding:8px 10px;line-height:1.4;min-height:0}
.site input[type="file"].input::file-selector-button{
  margin-right:14px;padding:10px 16px;border:1.5px solid var(--navy);border-radius:0;
  background:#fff;color:var(--navy);cursor:pointer;
  font:600 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.site input[type="file"].input::file-selector-button:hover{background:var(--navy);color:#fff}

.field.has-error :is(.input,.select,.textarea,input,select,textarea){border-color:var(--red);box-shadow:0 0 0 3px rgba(197,35,42,.14)}
.field .err{color:var(--red);font-size:12.5px}
.form-note{font-size:13px;line-height:1.55;color:var(--muted)}

.check{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px;font-size:14.5px;line-height:1.5}
.check input{
  -webkit-appearance:none;appearance:none;flex:0 0 22px;width:22px;height:22px;margin:1px 0 0;padding:0;
  border:1.5px solid var(--navy);border-radius:0;background:#fff;cursor:pointer;
  display:grid;place-content:center;transition:background .15s;
}
.check input:checked{
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.check input:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.check label{margin:0;font:400 14.5px/1.5 var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}

/* "What are you trying to fix?": tick-any chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-check{position:relative}
.chip-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip-check span{
  display:inline-block;padding:10px 15px;border-radius:999px;cursor:pointer;user-select:none;
  border:1px solid rgba(39,41,68,.34);background:rgba(255,255,255,.7);color:var(--navy);
  font:400 14px/1.25 var(--body);transition:border-color .2s,background .2s,color .2s,transform .2s;
}
.chip-check span:hover{border-color:var(--navy);background:#fff;color:var(--navy);transform:translateY(-1px)}
.chip-check input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-check input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}

.more-toggle{
  display:flex;align-items:center;gap:12px;width:100%;margin:22px 0 6px;padding:14px 16px;
  background:transparent;border:1.5px dashed rgba(39,41,68,.5);border-radius:0;
  font:600 12px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--navy);cursor:pointer;
  transition:background .2s,border-color .2s;
}
.more-toggle:hover{background:var(--paper-3);border-style:solid;border-color:var(--navy)}
.more-toggle__plus{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:24px;height:24px;border-radius:0;
  background:var(--red);color:#fff;font:600 16px/1 var(--display);
}
.more-toggle .form-optional{margin-left:auto;font-size:11.5px}
.file-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 4px;font-size:14px}
.file-status [data-file-count]{color:var(--muted)}


/* ==========================================================================
   12  Figures (SVG) and odds and ends
   ========================================================================== */
/* The figures were drawn for Jost; keep them in it. */
.engfig__labels text,.rollanim__t,.engfig__note,.winviz__glass{font-family:var(--display)}
.engfig,.rollanim{margin:0}
.engfig svg,.rollanim svg{background:#fff;border:1px solid var(--rule);padding:8px;box-shadow:var(--sh-1)}
/* The anatomy drawing's callouts run past the edges of the drawing itself (about 30 units on the left
   and 47 on the right), so left alone they are cut off mid-word. The frame makes room for them. */
.engfig svg[viewBox="0 0 460 330"]{overflow:visible;padding:8px 10% 8px 6.5%}
.panel__body svg{overflow:visible}
/* The three-way rigging comparison is three small drawings in one framed grid. It sizes to the width of
   its own column, not the screen: three across when the column is wide enough to keep the labels near
   their drawn size, stacked in one column otherwise (phones, or the narrow side column on a desktop page),
   so no label ever shrinks to an unreadable size. */
.engfig--compare{container-type:inline-size}
.engfig--compare .engfig__grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:640px;box-sizing:border-box;background:#fff;border:1px solid var(--rule);padding:8px;box-shadow:var(--sh-1)}
.engfig--compare .engfig__panel{max-width:290px;width:100%;margin:0 auto}
.engfig--compare .engfig__grid svg{background:none;border:0;padding:0;box-shadow:none;min-width:0;max-width:none;width:100%}
.engfig--compare .engfig__detail{text-align:center;padding:2px 8px 6px}
.engfig--compare .engfig__detail p{margin:0;font:400 14px/1.55 var(--display);color:var(--text)}
.engfig--compare .engfig__detail .engfig__h{font-weight:600;font-size:15px;color:var(--navy);margin-bottom:4px}
@container (min-width:500px){
  .engfig--compare .engfig__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
  .engfig--compare .engfig__panel{max-width:none}
  .engfig--compare .engfig__detail{grid-column:1/-1}
  .engfig--compare .engfig__detail p{font-size:12.5px}
  .engfig--compare .engfig__detail .engfig__h{font-size:13.5px}
}
.engfig figcaption,.rollanim figcaption{font-size:14.5px;line-height:1.6;color:var(--body-2)}
/* The roll-panel diagram writes its running step on the same line as the two "Cleat" labels, and the
   two run into each other. The cleat labels move up beside their cleats and leave the line to the step. */
.rollanim__t{font:600 10px var(--display);letter-spacing:.02em;fill:var(--muted)}
.rollanim__step{font-size:10px;fill:var(--navy)}
.rollanim text[x="88"],.rollanim text[x="232"]{transform:translate(24px,-14px);font-size:9px}
/* The wide diagrams are drawn at 460 and 640 px; squeezed to a phone their labels are unreadable,
   so on phones they keep a readable size and scroll sideways, the caption staying put. */
@media (max-width:620px){
  .engfig{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .engfig:not(.engfig--compare) svg{min-width:460px}
  .engfig svg[viewBox="0 0 460 330"]{min-width:520px;padding:8px 50px 8px 34px}
  .engfig figcaption{position:sticky;left:0;width:100%}
}
.winviz{gap:24px}
.winviz__frame{border-radius:0;background:var(--navy);box-shadow:var(--sh-1)}
.winviz__glass{border-radius:0}
.winviz figcaption{color:var(--muted)}
.winviz figcaption b{color:var(--navy);font-family:var(--display);letter-spacing:.04em}
.sub__icon{border-radius:0}


/* ==========================================================================
   13  Responsive
   ========================================================================== */
@media (max-width:1280px){
  .bar__nav{gap:18px}
  .bar__nav a{letter-spacing:.12em}
}
@media (max-width:1180px){
  .bar__ph{display:none}
  .drawer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1040px){
  .bar__nav{display:none}
  .bar .btn{margin-left:auto}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--barH:58px}
  .bar__logo img{height:22px}
  .bar__in{gap:10px}
  .bar .btn{min-height:38px;padding:0 13px;font-size:11px;letter-spacing:.12em}
  .bar__menu{flex-basis:40px;width:40px;height:40px}
  .strip__d{display:none}
  .strip__m{display:inline}
  .strip__in{min-height:38px;font-size:11.5px;letter-spacing:.12em}
  .strip__r{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px}

  .grid-sidebar,.split,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .grid-sidebar{gap:32px}
  .section-head{display:block}
  .section-head>p{margin:16px 0 0;max-width:62ch}
  .drawer__grid{grid-template-columns:minmax(0,1fr);gap:6px}
  .drawer__col ul{margin-bottom:22px}

  /* page head: the photo goes first, full width, frame chrome off */
  .pagehead--photo{padding-top:0}
  .pagehead--photo .ph__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .ph__media{order:-1;padding:0;margin-inline:calc(-1 * var(--gut))}
  .ph__media::before,.ph__media::after,.ph__dx,.ph__dy{display:none}
  .ph__frame{padding:0;box-shadow:none;height:clamp(250px,68vw,400px)}
  .ph__frame::before{display:none}
  .ph__frame .hero__slides,.ph__frame .hero__controls{inset:0}
  .pagehead h1{font-size:clamp(34px,9.6vw,46px);max-width:none}
  .ph__dim{margin:18px 0 16px;height:auto;min-height:26px}
  .ph__dim span{font-size:9.5px;letter-spacing:.1em;padding:0 8px;white-space:normal;text-align:center;line-height:1.5;max-width:84%}

  .foot__row{flex-direction:column;align-items:flex-start}
  .foot__brand{flex:0 1 auto}
  .cta-band .wrap{grid-template-columns:minmax(0,1fr)}
  .cta-band .wrap::before{grid-column:1;grid-row:auto;width:88px;margin-bottom:24px}
  .cta-band .wrap>*{grid-column:1}
}
@media (max-width:620px){
  .grid-2,.field-row,.field-row-3{grid-template-columns:minmax(0,1fr)}
  .field-row-3>.field[style*="flex"]{grid-column:auto}
  .gallery-grid{gap:20px}
  .panel__body,.card__body,.card--pad{padding:26px 20px 22px}
  .quote-block{padding:34px 22px 24px}
  .keyline{padding:24px 20px}
  .feature{padding:26px 22px 22px}
  .spec-list li{flex-direction:column;gap:3px}
  .spec-list .k{flex:none}
  .faq-item summary{padding:18px 62px 18px 20px}
  .faq-item summary::after{right:16px}
  .faq-item .faq-body{padding:0 20px 22px}
  form[data-lead-form]{padding:26px 18px}
  .site textarea{min-height:168px}
  .foot__cols{gap:30px 22px}
  .foot .foot__cta a{font-size:26px}
  .chatpanel{right:12px;left:12px;width:auto}
  .chatbtn{right:12px}
}
@media (max-width:980px){
  .chatbtn{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .chatpanel{bottom:calc(140px + env(safe-area-inset-bottom,0px));max-height:calc(100svh - 190px)}
}
@media (max-width:374px){
  .bar .btn{padding:0 10px;letter-spacing:.08em}
  .bar__logo img{height:19px}
}
@media (max-width:340px){
  .mobile-cta{gap:8px;padding-left:10px;padding-right:10px}
  .mobile-cta .btn{padding:0 6px;font-size:10px;letter-spacing:.05em}
}


/* ==========================================================================
   14  Reduced motion, print
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media print{
  .bar,.strip,.drawer,.mobile-cta,.chatbtn,.chatpanel,.foot__menu,.hero__controls{display:none!important}
  body.site{background:#fff}
  .pagehead,.section,.section--wash{background:#fff}
}

/* approved-vendor strip */
.vendor-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:8px}
.vendor-chip{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border:1px solid var(--rule);background:#fff}
.vendor-chip b{font:600 12px/1.25 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.vendor-chip small{font-size:12.5px;color:#6b6c80}
.vendor-sub{font-size:15px;margin:28px 0 12px;color:var(--navy)}
@media (max-width:480px){.vendor-strip{grid-template-columns:1fr 1fr}.vendor-chip{padding:10px 12px}}