/* ==================================================================
   AQUA PARK SUPPLY
   Design direction: the technical drawing sheet.
   Buyers arrive knowing their plot, not their product — so the site
   is built from dimensions, not photography.
   ================================================================== */

:root{
  --ink:      #0E2233;
  --ink-2:    #1B3446;
  --slate:    #47596B;
  --slate-2:  #6E8195;
  --paper:    #EDF1F3;
  --paper-2:  #E3EAEE;
  --card:     #FFFFFF;
  --rule:     #C7D5DD;
  --rule-2:   #DCE5EA;
  --teal:     #00A0B4;
  --teal-d:   #007C8C;
  --amber:    #FFB300;
  --amber-d:  #C98A00;

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1180px;
  --gut:  clamp(1.15rem, 4vw, 2.75rem);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }

a{ color:var(--teal-d); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:760px; }

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

/* ---------- Type ------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0 0 .55em;
  color:var(--ink);
}
h1{ font-size:clamp(2.05rem, 5.2vw, 3.5rem); font-weight:800; }
h2{ font-size:clamp(1.5rem, 3.1vw, 2.15rem); }
h3{ font-size:clamp(1.14rem, 2vw, 1.34rem); }
h4{ font-size:1.02rem; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; }

.lede{ font-size:clamp(1.06rem,1.9vw,1.24rem); color:var(--slate); line-height:1.58; }

/* Eyebrow — set in mono, like a drawing sheet reference */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal-d);
  margin:0 0 .9rem;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::after{ content:''; flex:1; height:1px; background:var(--rule); }

/* ---------- SIGNATURE: the dimension rule ------------------------ */
/* A line with tick ends and a mono label, exactly as a dimension is
   annotated on a drawing. Used for key figures throughout.          */
.dim{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--f-mono); font-size:.78rem;
  color:var(--slate); letter-spacing:.02em;
}
.dim::before,.dim::after{
  content:''; height:9px; width:1px; background:var(--slate-2); flex:none;
}
.dim .dim-line{ flex:1; height:1px; background:var(--slate-2); }
.dim .dim-val{ color:var(--ink); font-weight:500; white-space:nowrap; }

/* ---------- Header ----------------------------------------------- */
.topbar{
  background:var(--ink); color:#B9CBD8;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.03em;
}
.topbar .wrap{ display:flex; gap:1.3rem; align-items:center; min-height:36px; flex-wrap:wrap; }
.topbar a{ color:#DCE8F0; }
.topbar .sep{ color:#3C566B; }
.topbar .push{ margin-left:auto; }

.head{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.head .wrap{ display:flex; align-items:center; gap:1.4rem; min-height:70px; }

.logo{ display:flex; flex-direction:column; line-height:1; text-decoration:none; flex:none; }
.logo:hover{ text-decoration:none; }
.logo .lg-1{
  font-family:var(--f-display); font-weight:800; font-size:1.22rem;
  letter-spacing:-.02em; color:var(--ink);
}
.logo .lg-1 span{ color:var(--teal); }
.logo .lg-2{
  font-family:var(--f-mono); font-size:.575rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--slate-2); margin-top:.32rem;
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:.15rem; }
.nav > li{ list-style:none; position:relative; }
.nav ul{ margin:0; padding:0; list-style:none; }
.nav > li > a{
  display:block; padding:.6rem .68rem; font-size:.855rem; font-weight:500;
  color:var(--ink-2); border-radius:2px;
}
.nav > li > a:hover{ background:var(--paper-2); text-decoration:none; }
.nav > li.has > a::after{ content:'⌄'; font-size:.68rem; margin-left:.3rem; color:var(--slate-2); }

.drop{
  position:absolute; top:100%; left:0; min-width:260px;
  background:#fff; border:1px solid var(--rule);
  box-shadow:0 14px 34px rgba(14,34,51,.13);
  padding:.4rem; opacity:0; visibility:hidden; transform:translateY(-5px);
  transition:opacity .15s, transform .15s, visibility .15s;
}
.nav li.has:hover .drop, .nav li.has:focus-within .drop{
  opacity:1; visibility:visible; transform:translateY(0);
}
.drop a{
  display:block; padding:.52rem .72rem; font-size:.85rem; color:var(--ink-2);
  border-left:2px solid transparent;
}
.drop a:hover{ background:var(--paper); border-left-color:var(--teal); text-decoration:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-body); font-weight:600; font-size:.88rem;
  padding:.72rem 1.25rem; border:1px solid transparent; border-radius:2px;
  cursor:pointer; text-align:center; transition:background .16s, color .16s, border-color .16s;
}
.btn:hover{ text-decoration:none; }
.btn-amber{ background:var(--amber); color:#241800; border-color:var(--amber); }
.btn-amber:hover{ background:var(--amber-d); border-color:var(--amber-d); color:#fff; }
.btn-ink{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-ink:hover{ background:var(--ink-2); color:#fff; }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn-line:hover{ border-color:var(--ink); background:#fff; }
.btn-wa{ background:#25D366; color:#062A12; border-color:#25D366; }
.btn-wa:hover{ background:#1EBE5A; color:#062A12; }
.btn-lg{ padding:.92rem 1.65rem; font-size:.95rem; }

.burger{
  margin-left:auto; display:none; background:none; border:1px solid var(--rule);
  border-radius:2px; padding:.5rem .62rem; cursor:pointer;
}
.burger span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; }

/* ---------- Hero: the plot selector ------------------------------ */
.hero{
  background:
    linear-gradient(rgba(14,34,51,.965), rgba(14,34,51,.985)),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px);
  background-color:var(--ink);
  color:#fff;
  padding:clamp(3rem,7vw,5.2rem) 0 clamp(2.6rem,5vw,3.6rem);
  border-bottom:1px solid #24405A;
}
.hero h1{ color:#fff; max-width:15ch; }
.hero .eyebrow{ color:var(--amber); }
.hero .eyebrow::after{ background:#2E4A61; }
.hero .lede{ color:#B9CBD8; max-width:56ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; }

.plotpick{ margin-top:clamp(2.6rem,5vw,3.6rem); }
.plotpick .pp-label{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:#7E97AC; margin-bottom:1.1rem;
}
.plots{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.plot{
  background:rgba(255,255,255,.035); border:1px solid #2E4A61;
  padding:1.15rem 1.15rem 1.3rem; display:block; color:#fff;
  transition:background .18s, border-color .18s;
}
.plot:hover{ background:rgba(0,160,180,.11); border-color:var(--teal); text-decoration:none; }
.plot .pl-size{
  font-family:var(--f-mono); font-size:1.02rem; color:var(--amber);
  letter-spacing:.01em; margin-bottom:.15rem;
}
.plot .pl-name{ font-family:var(--f-display); font-weight:700; font-size:1.02rem; margin-bottom:.4rem; }
.plot .pl-desc{ font-size:.83rem; color:#96AEC1; line-height:1.5; }
.plot svg{ margin:.85rem 0 .7rem; width:100%; height:auto; }

/* ---------- Sections --------------------------------------------- */
.sec{ padding:clamp(3rem,6vw,4.6rem) 0; }
.sec-tight{ padding:clamp(2.2rem,4vw,3.1rem) 0; }
.sec-paper2{ background:var(--paper-2); }
.sec-white{ background:#fff; }
.sec-ink{ background:var(--ink); color:#C3D3DE; }
.sec-ink h2,.sec-ink h3{ color:#fff; }
.sec-ink .eyebrow{ color:var(--amber); }
.sec-ink .eyebrow::after{ background:#2E4A61; }

.sec-head{ max-width:660px; margin-bottom:2.1rem; }
.sec-head p{ color:var(--slate); }

/* ---------- Grids and cards -------------------------------------- */
.grid{ display:grid; gap:1.05rem; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--card); border:1px solid var(--rule);
  padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column;
  transition:border-color .18s, transform .18s;
}
a.card{ color:inherit; }
a.card:hover{ border-color:var(--teal); text-decoration:none; transform:translateY(-2px); }
.card h3{ margin-bottom:.4rem; }
.card p{ color:var(--slate); font-size:.9rem; }
.card .card-foot{
  margin-top:auto; padding-top:.95rem;
  font-family:var(--f-mono); font-size:.73rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--teal-d);
}
.card-ref{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.09em;
  color:var(--slate-2); margin-bottom:.55rem;
}

/* Schematic block that sits at the top of product and category cards */
.schem{
  background:var(--paper); border:1px solid var(--rule-2);
  margin:-1.4rem -1.4rem 1.15rem; padding:1rem;
}
.schem svg{ width:100%; height:auto; }

/* ---------- Spec table ------------------------------------------- */
.spec{ width:100%; border-collapse:collapse; font-size:.895rem; }
.spec caption{
  text-align:left; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--slate-2);
  padding-bottom:.7rem;
}
.spec th,.spec td{ padding:.62rem .8rem; border-bottom:1px solid var(--rule-2); text-align:left; }
.spec th{ font-weight:500; color:var(--slate); width:46%; }
.spec td{ font-family:var(--f-mono); font-size:.845rem; color:var(--ink); }
.spec tr:hover{ background:var(--paper); }
.spec .tbc{ color:var(--slate-2); font-style:normal; }

/* ---------- Prose ------------------------------------------------ */
.prose h2{ margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid var(--rule); }
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ margin-top:1.7rem; }
.prose ul,.prose ol{ margin:0 0 1.1em; padding-left:1.15rem; }
.prose li{ margin-bottom:.42em; }
.prose table{ width:100%; border-collapse:collapse; font-size:.9rem; margin:1.2rem 0; }
.prose th,.prose td{ padding:.6rem .75rem; border:1px solid var(--rule-2); text-align:left; vertical-align:top; }
.prose th{ background:var(--paper-2); font-weight:600; font-size:.85rem; }
.prose td{ color:var(--slate); }

.callout{
  background:#fff; border:1px solid var(--rule); border-left:3px solid var(--teal);
  padding:1.15rem 1.3rem; margin:1.6rem 0; font-size:.93rem;
}
.callout p:last-child{ margin-bottom:0; }
.callout strong{ color:var(--ink); }

/* ---------- List rows -------------------------------------------- */
.rows{ border-top:1px solid var(--rule); }
.row{
  display:flex; gap:1.2rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1px solid var(--rule); color:inherit;
}
a.row:hover{ text-decoration:none; background:rgba(255,255,255,.5); }
.row .r-num{
  font-family:var(--f-mono); font-size:.75rem; color:var(--slate-2);
  flex:none; width:2.4rem; padding-top:.15rem;
}
.row .r-body{ flex:1; }
.row .r-body h3{ font-size:1.04rem; margin-bottom:.2rem; }
.row .r-body p{ font-size:.885rem; color:var(--slate); margin:0; }
.row .r-go{ font-family:var(--f-mono); font-size:.75rem; color:var(--teal-d); flex:none; }

/* ---------- Breadcrumb ------------------------------------------- */
.crumb{
  font-family:var(--f-mono); font-size:.72rem; color:var(--slate-2);
  padding:1rem 0 0; letter-spacing:.03em;
}
.crumb a{ color:var(--slate); }
.crumb span{ margin:0 .45rem; color:var(--rule); }

/* ---------- Page head -------------------------------------------- */
.phead{ padding:2.1rem 0 2.4rem; border-bottom:1px solid var(--rule); background:#fff; }
.phead .lede{ max-width:62ch; }

/* ---------- Forms ------------------------------------------------ */
.form{ background:#fff; border:1px solid var(--rule); padding:clamp(1.3rem,3vw,2.1rem); }
.fgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.15rem; }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1/-1; }
.field label{
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate); margin-bottom:.4rem;
}
.field label .req{ color:var(--teal-d); }
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:.94rem; color:var(--ink);
  padding:.68rem .8rem; border:1px solid var(--rule); border-radius:2px;
  background:var(--paper); width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff; border-color:var(--teal); outline:2px solid rgba(0,160,180,.18); outline-offset:0;
}
.field textarea{ min-height:118px; resize:vertical; }
.field .hint{ font-size:.78rem; color:var(--slate-2); margin-top:.35rem; }
.hp{ position:absolute; left:-9999px; }

.note{
  font-size:.82rem; color:var(--slate); background:var(--paper);
  border:1px solid var(--rule-2); padding:.8rem .95rem; margin-top:1rem;
}
.alert{ padding:.95rem 1.15rem; border:1px solid; margin-bottom:1.3rem; font-size:.92rem; }
.alert-ok{ background:#EAF7EC; border-color:#9FD3A9; color:#1C5228; }
.alert-err{ background:#FDECEC; border-color:#E9AEAE; color:#8A2020; }

/* ---------- Contact strip ---------------------------------------- */
.cstrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.cbox{ background:#fff; border:1px solid var(--rule); padding:1.25rem; }
.cbox .cb-l{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate-2); margin-bottom:.45rem;
}
.cbox .cb-v{ font-size:1rem; font-weight:500; color:var(--ink); }
.cbox .cb-v a{ color:var(--ink); }

/* ---------- CTA band --------------------------------------------- */
.band{
  background:var(--ink); color:#fff;
  padding:clamp(2.4rem,5vw,3.4rem) 0;
  background-image:repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.045) 39px 40px);
}
.band h2{ color:#fff; max-width:20ch; }
.band p{ color:#A9C0D0; max-width:52ch; }
.band .band-in{ display:flex; gap:2rem; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.band .band-cta{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* ---------- Footer ----------------------------------------------- */
.foot{ background:var(--ink); color:#8FA8BA; padding:3.1rem 0 0; font-size:.875rem; }
.foot a{ color:#C2D5E2; }
.foot h4{
  color:#fff; font-family:var(--f-mono); font-size:.71rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:.95rem;
}
.fgrid5{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:2rem; }
.foot ul{ margin:0; padding:0; list-style:none; }
.foot li{ margin-bottom:.5rem; }
.foot .f-brand .lg-1{
  font-family:var(--f-display); font-weight:800; font-size:1.2rem; color:#fff;
  display:block; margin-bottom:.3rem;
}
.foot .f-brand .lg-1 span{ color:var(--teal); }
.foot .f-legal{ font-family:var(--f-mono); font-size:.72rem; color:#5F7B90; line-height:1.7; }
.fbar{
  margin-top:2.6rem; border-top:1px solid #23415A; padding:1.2rem 0 1.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.72rem; color:#5F7B90;
}
.fbar a{ color:#7E97AC; }

/* ---------- Floating WhatsApp ------------------------------------ */
.wafab{
  position:fixed; right:16px; bottom:16px; z-index:120;
  width:54px; height:54px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.24);
}
.wafab:hover{ background:#1EBE5A; }
.wafab svg{ width:28px; height:28px; fill:#fff; }

/* ---------- Responsive ------------------------------------------- */
@media (max-width: 1000px){
  .fgrid5{ grid-template-columns:repeat(3,1fr); }
  .g-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .burger{ display:block; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--rule); flex-direction:column;
    align-items:stretch; padding:.5rem var(--gut) 1.1rem; gap:0;
    max-height:76vh; overflow-y:auto;
  }
  .nav.open{ display:flex; }
  .nav > li > a{ padding:.72rem 0; border-bottom:1px solid var(--rule-2); border-radius:0; }
  .nav > li.has > a::after{ display:none; }
  .drop{
    position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; padding:.2rem 0 .6rem .9rem;
    border-left:1px solid var(--rule-2); margin-bottom:.4rem;
  }
  .drop a{ padding:.4rem .6rem; font-size:.82rem; }
  .g-3,.g-2,.cstrip{ grid-template-columns:1fr; }
  .plots{ grid-template-columns:1fr; }
  .fgrid{ grid-template-columns:1fr; }
  .band .band-in{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 620px){
  .fgrid5{ grid-template-columns:1fr 1fr; }
  .g-4{ grid-template-columns:1fr; }
  .topbar .push{ margin-left:0; }
  .row{ flex-wrap:wrap; }
  .row .r-go{ display:none; }
}

/* ---------- Print ------------------------------------------------ */
@media print{
  .head,.topbar,.wafab,.band,.foot,.hero-cta{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
}

/* ==================================================================
   IMAGES
   ================================================================== */
.pic{ display:block; width:100%; overflow:hidden; background:var(--paper-2); }
.pic img{ width:100%; height:100%; object-fit:cover; display:block; }

.figure{ margin:0 0 1.4rem; }
.figure figcaption{
  font-family:var(--f-mono); font-size:.73rem; color:var(--slate-2);
  padding-top:.55rem; line-height:1.5; letter-spacing:.01em;
}

/* Image sitting flush at the top of a card */
.card > .pic:first-child,
.card-img{ margin:-1.4rem -1.4rem 1.15rem; width:calc(100% + 2.8rem); }

/* Hero image band */
.heroimg{ position:relative; }
.heroimg .pic{ max-height:520px; }
.heroimg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(14,34,51,.55), rgba(14,34,51,0) 55%);
  pointer-events:none;
}

/* Two-up and three-up image rows */
.imgrow{ display:grid; gap:1rem; margin:1.6rem 0; }
.imgrow.two{ grid-template-columns:repeat(2,1fr); }
.imgrow.three{ grid-template-columns:repeat(3,1fr); }
.imgrow .pic{ border:1px solid var(--rule-2); }

/* Media block: image beside text */
.media{ display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; align-items:center; }
.media.rev > .media-txt{ order:2; }

/* Product page gallery */
.pgal{ display:grid; grid-template-columns:1fr; gap:.7rem; }
.pgal .pic{ border:1px solid var(--rule); }

@media (max-width: 860px){
  .imgrow.two,.imgrow.three{ grid-template-columns:1fr; }
  .media{ grid-template-columns:1fr; gap:1.4rem; }
  .media.rev > .media-txt{ order:0; }
  .heroimg .pic{ max-height:300px; }
}

/* ==================================================================
   MOBILE REFINEMENTS
   ================================================================== */
@media (max-width: 860px){
  body{ font-size:16px; }
  h1{ font-size:clamp(1.85rem, 7vw, 2.4rem); }
  h2{ font-size:clamp(1.35rem, 5.4vw, 1.7rem); }
  .lede{ font-size:1.02rem; }

  /* Stop the sticky header eating the viewport on small screens */
  .head .wrap{ min-height:60px; }
  .logo .lg-1{ font-size:1.06rem; }
  .logo .lg-2{ font-size:.52rem; letter-spacing:.13em; }

  /* Tap targets */
  .btn{ min-height:46px; padding:.8rem 1.15rem; }
  .nav > li > a{ min-height:46px; display:flex; align-items:center; }
  .drop a{ min-height:40px; display:flex; align-items:center; }

  /* Quote button goes full width in the mobile drawer */
  .nav > li:last-child{ margin-top:.8rem; }
  .nav > li:last-child > a{ justify-content:center; width:100%; }

  /* Keep the WhatsApp bubble clear of content */
  .wafab{ width:50px; height:50px; right:12px; bottom:12px; }
  .wafab svg{ width:25px; height:25px; }

  /* Tables scroll rather than overflow */
  .prose table, .spec{ display:block; overflow-x:auto; white-space:nowrap; }
  .prose td, .prose th{ white-space:normal; min-width:130px; }
  .spec th{ width:auto; min-width:140px; }

  .phead{ padding:1.5rem 0 1.7rem; }
  .sec{ padding:2.4rem 0; }
  .card{ padding:1.15rem; }
  .card > .pic:first-child,.card-img{ margin:-1.15rem -1.15rem .95rem; width:calc(100% + 2.3rem); }
  .form{ padding:1.15rem; }
  .topbar .wrap{ gap:.6rem; font-size:.66rem; }
  .topbar .push{ display:none; }
  .crumb{ font-size:.67rem; }
  .band .band-cta{ width:100%; }
  .band .band-cta .btn{ flex:1; }
}

@media (max-width: 420px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .fgrid5{ grid-template-columns:1fr; gap:1.5rem; }
  .row .r-num{ width:1.9rem; }
}