:root{
  --ground:#FFFFFF; --raised:#FFFFFF; --band:#E5E8E9; --band-ink:#12202E; --band-ink-2:#55697A;
  --btn:#C8102E; --accent-sm:#B00D28; --msu:#18453B;
  --ink:#12202E; --ink-2:#51677A; --rule:#C7D1D7; --accent:#C8102E; --plate:transparent; --plate-pad:0; --plate-shadow:none;
  --shadow:0 1px 2px rgba(15,30,45,.08), 0 8px 24px rgba(15,30,45,.07);
  --maxw:1120px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Montserrat,"Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
/* .bebas is a utility alias for the display face, kept on purpose */
h1,h2,h3,.bebas{font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-weight:400;
  letter-spacing:.012em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
section{padding-block:clamp(56px,8vw,104px)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.band .eyebrow{color:var(--band-ink-2)}
.band{background:var(--band);color:var(--band-ink)}
.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.6;color:var(--ink-2);max-width:60ch}
.band .lede{color:var(--band-ink-2)}

/* ---- section divider ---- */
.rule{display:flex;align-items:center;gap:20px;color:var(--ink-2)}
.rl{flex:1;height:1px;background:var(--rule)}
.chev{display:block;flex:none}

/* ---- header / hero ---- */
header.top{padding-block:clamp(34px,6vw,64px) 0}
.hero-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(26px,3.4vw,40px)}
.plate{background:var(--plate);border-radius:8px;padding:var(--plate-pad);box-shadow:var(--plate-shadow);
  display:inline-flex;align-items:center}
.plate img{display:block;width:min(560px,84vw);height:auto}
.topmeta{font-size:12px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.9;margin:0}
.hero{padding-block:clamp(44px,6vw,84px) clamp(48px,7vw,88px);text-align:center}
.hero h1{font-size:clamp(50px,9.6vw,124px);line-height:.86;color:var(--ink)}
.hero h1 .beacon{color:var(--accent);display:block}
.hero .lede{margin:26px auto 0;font-size:clamp(18px,2.1vw,22px);color:var(--ink-2)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;align-items:center;justify-content:center}
.herotags{margin:clamp(44px,6vw,76px) auto 0;max-width:700px}
.herotags img{width:100%;height:auto;display:block}
/* The headline price, stated in the hero instead of 1,400 words down the page.
   One price, one sentence, same place on every product page. It used to set the
   figure in 38px red display type, which read as a promotion rather than a fact
   and was the loudest thing in the hero after the headline. A price a reader
   trusts is stated, not announced: body scale, normal ink, bold on the number
   only. It is in the hero, so it still cannot be missed. */
.pricelead{margin:26px auto 0;font-size:clamp(16.5px,1.7vw,19px);color:var(--ink-2);
  max-width:56ch}
.pricelead strong{color:var(--ink);font-weight:700}

.btn{display:inline-block;background:var(--btn);color:#fff;text-decoration:none;
  font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 30px;border-radius:3px;border:0;cursor:pointer;font-family:inherit;
  transition:transform .15s ease, filter .15s ease}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule)}
.band .btn.ghost{color:var(--band-ink);border-color:var(--rule)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:44px 40px;margin-top:44px}
.step h3{font-size:30px;margin-bottom:8px}
.step .n{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--accent-sm);margin-bottom:14px;display:block}
.step p{color:var(--band-ink-2);font-size:15.5px}
.nfcnote{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:clamp(38px,5vw,56px);
  color:var(--band-ink-2);font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.nfcnote svg{color:var(--accent);flex:none}

/* ---- disclosure chips ---- */
.samplebar{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:18px}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid var(--rule);color:var(--ink-2);padding:5px 12px;border-radius:100px}

/* ---- facts ----
   Flowing prose with bold lead-ins. No boxes, no rules, no grid: a card grid here
   stranded an empty cell whenever the count did not divide by the column count. */
.facts{margin-top:24px;max-width:74ch}
.facts p{font-size:17.5px;line-height:2}
.facts p, .band .facts p{color:var(--band-ink-2)}
.facts p strong{color:var(--band-ink);font-weight:700}

/* ---- split ---- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start}
.split h2{font-size:clamp(34px,5vw,58px);line-height:.94}
.pledge{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin-top:28px;
  font-size:17px;line-height:1.6;color:var(--ink)}
.backtag{display:flex;justify-content:center}
.backtag img{width:100%;max-width:250px;height:auto;display:block;filter:drop-shadow(0 18px 26px rgba(15,30,45,.28))}

/* ---- about ---- */
.creds{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:30px}
.creds img{height:70px;width:auto;display:block}
.badge{border-radius:6px}
.badge.vet{background:#0F1E2D;padding:0}
.gogreen{color:var(--msu);font-weight:700}
.credtext{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);line-height:2}

.contactcard{text-align:center;margin-top:clamp(30px,5vw,44px)}
.btn.big{font-size:16px;padding:19px 40px;letter-spacing:.06em;text-transform:none}

/* ---- footer ---- */
footer{background:#0F1E2D;color:#9DB0BD;padding-block:44px;font-size:13px}
.footrow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.footrow a{color:#EDF1F3;text-decoration:none;font-weight:600}
.footrow a:hover{text-decoration:underline}
.promise{font-family:"Bebas Neue","Arial Narrow",sans-serif;font-size:22px;color:var(--ink);
  letter-spacing:.04em;line-height:1.25}

/* The site's second loud moment. Everything after the hero sits between 24 and
   34px, so nothing on the page ever changes volume again; this breaks that
   plateau using a sentence the page already had. The red is the accent finally
   doing something at size instead of appearing as a 3px rule. */
.bigquote{margin:clamp(26px,3.4vw,40px) 0;padding:0;border:0;
  font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-weight:400;
  font-size:clamp(38px,6vw,76px);line-height:.92;letter-spacing:.012em;
  color:var(--ink);max-width:16ch;text-wrap:balance}
.bigquote em{font-style:normal;color:var(--accent);display:block}

.founder .lede{max-width:58ch}
.byline{margin-top:24px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.founderpic{display:flex;flex-direction:column;align-items:center;gap:8px;position:sticky;top:24px}
.founderpic img{width:100%;max-width:330px;height:auto;display:block;
  filter:drop-shadow(0 24px 24px rgba(15,30,45,.24))}
.founderpic .promise{color:var(--ink);text-align:center;margin-top:6px}
.shot img{display:block;width:100%;height:auto}
.shotcap{font-size:12px;color:var(--ink-2);margin-top:12px;line-height:1.6}
@media (max-width:760px){ .split{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* anatomy */
.anat{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  gap:clamp(16px,3vw,44px);margin-top:clamp(34px,5vw,56px)}
.anat-tags{display:flex;gap:clamp(18px,3vw,44px);justify-content:center}
.anat-tags figure{margin:0;text-align:center}
.anat-tags img{display:block;width:clamp(120px,15vw,178px);height:auto}
.anat-tags figcaption{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.anat-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  justify-content:space-around;gap:20px}
.anat-col li{position:relative}
.anat-col h3{font-family:Montserrat,sans-serif;font-size:15.5px;font-weight:700;line-height:1.3;
  margin:0;color:var(--ink)}
.anat-col p{margin-top:5px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.anat-l{text-align:right;padding-right:36px}
.anat-r{padding-left:36px}
.anat-col li::before{content:"";position:absolute;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--accent)}
.anat-col li::after{content:"";position:absolute;top:11px;width:18px;height:1px;background:var(--rule)}
.anat-l li::before{right:-11px}
.anat-l li::after{right:-32px}
.anat-r li::before{left:-11px}
.anat-r li::after{left:-32px}

/* phone screens */
.screen{fill:#0B2340}
.scrn-in{fill:#F4F5F3}
.scrn-in2{fill:#E4E7E4}
.send{fill:#C8102E}
.sendarrow{fill:#FFFFFF}


/* three-step flow */

@media (max-width:860px){
  .anat{grid-template-columns:1fr;gap:32px}
  .anat-l,.anat-r{text-align:left;padding:0 0 0 30px;justify-content:flex-start;gap:26px}
  .anat-l li::before,.anat-r li::before{left:-26px;right:auto}
  .anat-l li::after,.anat-r li::after{display:none}
  .anat-tags{order:-1}
}

/* ---- side-accent photo (a small highlight beside a line of text, not a gallery) ---- */
.accent{display:flex;align-items:center;gap:clamp(22px,4vw,44px);padding-block:clamp(18px,3vw,30px)}
.accent.reverse{flex-direction:row-reverse}
.accentimg{flex:none;width:clamp(104px,16vw,152px);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.accentimg img{display:block;width:100%;height:auto}
.accentline{font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-weight:400;
  font-size:clamp(22px,3.2vw,32px);line-height:1.02;color:var(--ink);flex:1;text-wrap:balance}
@media (max-width:560px){
  .accent, .accent.reverse{flex-direction:column;text-align:center}
  .accentimg{width:120px}
}

/* ---- story feature (big photo + text, alternating, blends straight into the white page) ---- */
.story{display:flex;align-items:center;gap:clamp(32px,5vw,76px);padding-block:clamp(34px,5.5vw,58px)}
.story.reverse{flex-direction:row-reverse}
.storyimg{flex:0 0 auto;width:clamp(220px,30vw,340px)}
.storyimg img{display:block;width:100%;height:auto}
.storytext{flex:1;min-width:0}
.storytext .eyebrow{display:block;margin-bottom:10px}
.storytext h3{font-size:clamp(24px,3vw,34px);line-height:1.04;color:var(--ink);margin-bottom:14px}
.storytext p{font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:48ch}
@media (max-width:700px){
  .story, .story.reverse{flex-direction:column;text-align:center}
  .storyimg{width:min(300px,72vw)}
  .storytext p{margin-inline:auto}
}

/* ---- story capstone (single wide image, centered, full brand statement) ---- */
.story-wide{text-align:center;padding-block:clamp(34px,5.5vw,58px)}
.story-wide .storyimg{width:min(620px,88vw);margin:0 auto 30px}
.story-wide .storytext p{margin-inline:auto}

/* The mosaic rules lived here. It merged into .range, further down. */

/* ---- QA pass fixes ---- */
h2.eyebrow{font-family:Montserrat,"Segoe UI",Helvetica,Arial,sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:inherit;display:block}
/* 3.47:1 on white. The old #8FA1AD measured 2.67:1, under the 3:1 minimum for a
   control boundary; this is the same hue darkened to clear it with headroom. */
.btn.ghost{border-color:#7C8C97}
@media (max-width:480px){
  .btn.big{font-size:13.5px;padding:17px 22px}
}

/* ---- cross-page nav crumb ---- */
/* This row is the only navigation on the site: it is how anyone moves between
   the two product lines. It was set at 11.5px, which is caption size, not
   navigation size, and the links were 2px tall to tap. */
.crumb{display:flex;justify-content:center;align-items:center;gap:clamp(14px,2vw,26px);
  margin-top:22px;flex-wrap:wrap}
/* Ceiling trimmed 21px -> 19px when the Veterans link made this a four-item
   bar. Four items need about 1135px of a 1072px row, so at 21px it wrapped to
   a second line on every page. Still navigation size, not the 11.5px caption
   size this was rescued from. */
.crumb a{font-size:clamp(17px,1.7vw,19px);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  border-bottom:2.5px solid var(--rule);padding:10px 4px 7px}
.crumb a:hover{color:var(--ink);border-color:var(--ink-2)}
.crumb a[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
/* The Veterans link wears that collection's own OD green, so the new branch is
   findable at a glance among the three original lines instead of reading as a
   fourth identical item. This is the only place the veterans palette is allowed
   to appear outside veterans.html. */
.crumb a[href="veterans.html"]{color:#414A33}
.crumb a[href="veterans.html"]:hover{color:#20271D;border-color:#414A33}
.crumb .sep{color:var(--rule);font-size:clamp(15px,1.5vw,18px)}
.plate{cursor:pointer}
/* Mobile: at the clamp floor this bar still wrapped to one link per line,
   four stacked full-width rows, pushing every page's actual headline off
   the first screen. veterans.html solved the same four-item bar this way
   already (hide the separators, drop to caption size); match it here so
   the fix is consistent and the links wrap two-per-row instead of one. */
@media (max-width:760px){
  header.top{padding-block:22px 0}
  .hero-head{gap:14px}
  .plate img{width:min(250px,62vw)}
  .crumb{gap:4px 8px}
  .crumb .sep{display:none}
  .crumb a{font-size:13px;padding:7px 4px 5px}
}

/* The per-card status pill ("Designs ready", "In development") was removed on
   purpose. Availability is disclosed once, in the .notice band at the top of
   every page. Do not reintroduce it here. */

/* ---- use-cases (personal/safety line) - flowing list, no lines, whitespace only ---- */
@media (max-width:620px){
}

/* ---- coming soon page ---- */
.devhero{text-align:center}
.devnote{max-width:60ch;margin-inline:auto}

.fbrow{display:flex;gap:16px;justify-content:center;margin-top:14px}
.fbrow .fbitem{display:flex;flex-direction:column;align-items:center;gap:6px}
/* Tags come in both orientations. Sizing by width alone rendered the landscape
   ones at 58x24, a sliver next to the portrait ones. Cap the longest side instead:
   portraits land at 58x140 exactly as before, landscapes at 140x58. */
.fbrow .fbitem img{max-width:140px;max-height:140px;width:auto;height:auto;display:block;
  filter:drop-shadow(0 6px 10px rgba(15,30,45,.2))}
.fbrow .fbitem span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* ---- tag example thumbnails (used on school/personal pages) ---- */

/* ---- pricing (flowing, no boxes, no lines) ---- */
.pricing{display:flex;flex-direction:column;margin-top:28px}
.priceitem{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,48px);
  padding-block:clamp(10px,2vw,16px)}
.pricetext h3{font-size:clamp(24px,2.8vw,30px);color:var(--ink);margin-bottom:8px}
.pricetext p{font-size:15.5px;color:var(--ink-2);max-width:42ch}
.pricefigs{display:flex;gap:clamp(24px,3vw,40px);flex:none}
.pf{display:flex;flex-direction:column;align-items:center;min-width:74px}
.pf .pfn{font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-size:clamp(34px,4vw,44px);
  line-height:1;color:var(--ink)}
.pf .pfl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
@media (max-width:620px){
  .priceitem{flex-direction:column;align-items:flex-start;gap:16px}
  .pricefigs{align-self:stretch;justify-content:space-between}
}

/* ---- mid-page quote callout ---- */
.quoteband{margin-top:clamp(40px,6vw,64px);padding:clamp(30px,4.5vw,44px) clamp(22px,4vw,48px);
  border-radius:14px;background:var(--band);text-align:center}
.quoteband p{font-size:clamp(18px,2.2vw,22px);color:var(--band-ink);font-weight:600;margin-bottom:18px}

/* ---- The tap message, quoted verbatim -------------------------------------
   Source of truth: 03 PRODUCTS\NFC Bag Tags\05 HOW TO\PROGRAMMING THE TAP TEXT.md
   These strings are what gets written to the chip. If they change, change them
   there FIRST, then copy down to here. A paraphrase on the site and a literal
   string on the tag will drift, and the site is the promise. */
.taptext{margin-top:14px;padding:12px 16px;border-left:3px solid var(--accent);
  background:rgba(200,16,46,.045);border-radius:0 8px 8px 0;max-width:52ch}
.taptext .tapcap{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.taptext q{font-style:normal;font-size:14.5px;line-height:1.55;color:var(--ink);
  quotes:"\201C" "\201D"}

/* ---- the 988 area ----
   Deliberately outside the site's palette. Everything else on this page is navy
   ink on paper with red as the alert accent; this block is the tag's own yellow,
   full bleed, with near-black type. Steven asked for its own area rather than its
   own page, and the point of it is that you cannot scroll past it by accident.

   It is also the one block that does NOT inherit the tag-list rhythm. No .tagblock
   two-column split, no red .taptext bar: the red bar means "here is the standard
   wording" everywhere else on the page, and this tag does not carry the standard
   wording. Reusing it here would have said the opposite of what this block says.

   #F2C200 is sampled off tag-988-front.webp, not picked - 907,011 opaque pixels
   of the body carry exactly that value. It was #EFC218 until 2026-09-22, sampled
   off a render of the tag that had an 11.43 mm corner against the body's real
   6.35 and was replaced; re-sampled off the flat art that now ships. The ground
   is the tag's near black, NOT the yellow: a yellow band was tried first and the
   yellow tags sank into it, leaving two drop shadows doing all the work.
   Inverted, the tag is the brightest thing in the block, which is the point of
   the block. --*/
.c988{background:#14110A;color:#E4DFD0;padding-block:clamp(48px,7vw,86px);
  margin-block:clamp(38px,6vw,64px)}
.c988 .eyebrow{color:#F2C200}
.c988 h2{font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-weight:400;
  font-size:clamp(38px,6.4vw,76px);line-height:.92;margin-top:12px;color:#F2C200}
.c988 p{color:#E4DFD0}
.c988 .lede{color:#CFC9B8;max-width:60ch}
.c988-tags{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,3vw,34px);margin-top:clamp(28px,4vw,42px)}
.c988-tags figure{margin:0}
.c988-tags img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55))}
.c988-tags figcaption{margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#9A8F72}
/* The limit of the thing, in the same ink as the claim above it. On the rest of
   the site .notclaim is quiet grey because it sits under a sales paragraph. Here
   it is the most important sentence in the block, so it is not made quieter. */
.c988 .notclaim{margin-top:26px;font-size:16px;line-height:1.62;color:#E4DFD0;max-width:56ch}
.c988 .notclaim b{color:#F2C200}
/* No boxes and no explanatory line under each one. Steven's call, and the right
   one: "Call 988" does not need a caption telling you it calls 988. What is left
   is the label and the number, which is all anybody reaching for this needs. */
.c988-ways{list-style:none;margin:clamp(30px,4vw,44px) 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:clamp(30px,6vw,72px)}
.c988-ways a{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:#F2C200;
  transition:opacity .2s ease}
.c988-ways a:hover .big{text-decoration:underline;text-underline-offset:5px}
.c988-ways .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9A8F72}
.c988-ways .big{font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-weight:400;
  font-size:clamp(30px,3.4vw,40px);line-height:1}
@media (prefers-reduced-motion:reduce){ .c988-ways a{transition:none} }

/* ---- the plain-speaking disclaimer ----
   Used once, under the 988 tag. Deliberately NOT styled like .taptext: that box is
   the promise, this is the limit of it, and giving them the same red bar made the
   two read as one quotation. Quiet type, no bar, no tint, but full ink weight on
   the lead-in so it cannot be skimmed past. The veterans page carries the same
   paragraph in its own dark palette. */
.notclaim{margin-top:20px;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:54ch}
.notclaim b{color:var(--ink)}
.notclaim a{color:var(--ink);text-underline-offset:3px}

/* ---- quote form ----
   Sits in a .band, so it inherits the band ink colours. Two columns on desktop,
   one on a phone. The message box and the button always span the full width. */
.quoteform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 22px;max-width:680px;margin:28px auto 0;text-align:left}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field-wide{grid-column:1/-1}
.quoteform label{font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--band-ink-2)}
.quoteform label .opt{font-weight:500;letter-spacing:.06em;text-transform:none;opacity:.75}
/* Field hints. The things that tell someone what to write, and the one warning
   that would otherwise arrive as a surprise after they had already enquired,
   used to live in a paragraph above the form. They belong in the field. */
.quoteform .hint{display:block;font-size:13px;line-height:1.5;color:var(--band-ink-2);
  margin:2px 0 6px;max-width:46ch}
/* A hint that runs to three lines pushes its own input below the one beside it.
   Bottom-align the inputs so the row stays level whatever the hints do. */
.quoteform .field{display:flex;flex-direction:column}
.quoteform .field input,.quoteform .field textarea{margin-top:auto}

.quoteform input,.quoteform textarea{font-family:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid #7C8C97;border-radius:4px;padding:12px 14px;width:100%}
.quoteform textarea{resize:vertical;min-height:110px;line-height:1.55}
.quoteform input:focus-visible,.quoteform textarea:focus-visible{outline:3px solid var(--accent);
  outline-offset:1px;border-color:var(--accent)}
.formactions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:4px}
.quoteform button[type=submit]{border:0;cursor:pointer;font-family:inherit}
.quoteform button[disabled]{opacity:.65;cursor:progress}
.formfoot{font-size:13px;line-height:1.6;color:var(--band-ink-2);text-align:center;max-width:52ch}
.formnote{max-width:560px;margin:0 auto 4px;padding:14px 18px;border-radius:4px;
  font-size:15px;line-height:1.55;text-align:left;border:1.5px solid}
.formnote.good{background:#EAF3EC;border-color:#2E6B43;color:#1C4429}
.formnote.bad{background:#FBEDEF;border-color:var(--accent-sm);color:#8A0A20}
/* the honeypot: out of sight for people, still reachable for a bot */
.nothanks{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
@media (max-width:620px){
  .quoteform{grid-template-columns:1fr;gap:16px}
}

/* ---- hero shot ----
   A portrait photo in the hero, unlike .herotags which is a wide landscape one.
   Capped by height so a tall image cannot push the page below it off screen. */
.heroshot{margin:clamp(40px,5.5vw,68px) auto 0;max-width:min(420px,78vw)}
.heroshot img{width:100%;height:auto;display:block;max-height:64vh;object-fit:contain;margin-inline:auto}
.heroshot .shotcap{text-align:center;margin-top:14px}

/* ---- NFC how-to imagery ----
   Photographs rather than the old vector phone diagram. Both sit inside .band,
   so the screens image is cut out to transparency and needs no plate behind it. */
.nfcphoto,.nfcscreens{margin:clamp(34px,4.5vw,52px) auto 0;max-width:760px}
.nfcphoto img,.nfcscreens img{display:block;width:100%;height:auto;border-radius:6px}
.nfcscreens img{border-radius:0}
.nfcphoto figcaption,.nfcscreens figcaption{margin-top:14px;font-size:14.5px;line-height:1.6;
  color:var(--band-ink-2);text-align:center;max-width:60ch;margin-inline:auto}
.nfcphoto figcaption strong,.nfcscreens figcaption strong{color:var(--band-ink)}
/* the numbered steps lost their icons, so the number carries the eye instead */
.step .n{font-size:13px}
.nfcnote span strong{color:var(--band-ink)}
.nfcnote{max-width:66ch;margin-inline:auto;text-align:left}

/* ---- tag blocks ----
   One block per tag: the scene, its front/back renders and its words together,
   then the next tag. Replaces a run of stories followed by a separate grid that
   repeated all seven a second time. */
.tagblock{display:flex;align-items:center;gap:clamp(32px,5vw,72px);
  padding-block:clamp(30px,4.5vw,52px)}
.tagblock.reverse{flex-direction:row-reverse}
.tagmedia{flex:0 0 auto;width:clamp(230px,31vw,360px);display:flex;flex-direction:column;
  align-items:center;gap:22px}
.tagmedia .tagphoto{display:block;width:100%;height:auto}
.tagmedia .fbrow{margin-top:0}
.tagtext{flex:1;min-width:0}
.tagtext .eyebrow{display:block;margin-bottom:10px}
.tagtext h3{font-size:clamp(24px,3vw,34px);line-height:1.04;color:var(--ink);margin-bottom:14px}
.tagtext p{font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:48ch}
.tagtext .taptext{max-width:52ch}
.tagtext .shotcap{margin-top:12px}
/* A tag with no scene photo leans on its renders, so give them more room. They
   STACK to get it. Side by side, two landscape backs at 250px wide plus the gap
   came to 516px inside a 360px column: the row overflowed both ways and the
   first tag hung 63px off the left edge of the page. Stacked, each one gets the
   full column, which is both correct and larger than the side-by-side ever was.
   max-width is a percentage so it can never exceed the column again, whatever
   the column is doing. */
.tagmedia:not(:has(.tagphoto)) .fbrow{flex-direction:column;gap:18px}
.tagmedia:not(:has(.tagphoto)) .fbitem{width:100%}
.tagmedia:not(:has(.tagphoto)) .fbitem img{max-width:100%;max-height:250px}
@media (max-width:860px){
  .tagblock, .tagblock.reverse{flex-direction:column;text-align:center;gap:22px}
  .tagmedia{width:min(320px,78vw)}
  .tagtext p, .tagtext .taptext{margin-inline:auto}
  .tagtext .taptext{text-align:left}
}
.tagtext p + p{margin-top:14px}

/* ---- status notice ----
   One honest statement at the top of the landing page, so the rest of the site
   does not have to hedge in every other paragraph. */
/* Reads as a strip laid over the page rather than a band painted into it: the
   drop shadow gives it a near edge and the inset highlight lifts the top. The
   hairline border went because the shadow does that job better. */
.notice{background:var(--band);color:var(--band-ink);
  padding-block:16px;position:relative;z-index:2;
  box-shadow:0 5px 13px rgba(15,30,45,.13), 0 1px 0 rgba(255,255,255,.7) inset}
.notice p{font-size:14.5px;line-height:1.6;color:var(--band-ink-2);text-align:center;max-width:78ch}
.notice strong{color:var(--band-ink)}
.notice a{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--accent)}
.notice a:hover{filter:brightness(1.15)}

/* ---- the phone screen in "What the tap opens" ----
   Shows the standard message verbatim, then the owner's own note underneath,
   which is how the tag actually reads. */
.ph-to{font-family:Montserrat,sans-serif;font-size:17px;font-weight:700;fill:var(--ink)}
.ph-msg{font-family:Montserrat,sans-serif;font-size:16px;font-weight:500;fill:var(--ink)}
.bubble{fill:#D9E2EA}

/* ---- the collection, merged ----
   There used to be two sections here: a grid of flat tag renders, then a mosaic
   of photographs of tags on bags. Seven activities appeared in both, and read
   back to back they said the same thing twice. Steven's own user test called the
   page "clean, simple, easy to use, but boring", and a page that lists the same
   twelve things twice in two neat grids is exactly how that happens.

   One tile now carries both jobs: the photograph of the tag in use, with the
   actual printed artwork hanging off the corner of it. The tag is deliberately
   outside the photo's edge and off-angle, because a rectangle inside a rectangle
   is the boring version. It straightens and lifts on hover, which is the only
   motion on the page and is why it is worth having. */
/* The inset is what makes the overhang safe. Without it the first column's tag
   hangs past the page padding and gets cut off the side of the screen, which
   measured -9 px on a phone and -8 px at two columns. Chasing it with a smaller
   `left` only moves the problem between breakpoints; giving the columns their own
   gutter fixes it at every width. Keep it at least as wide as the tag's overhang
   plus what the rotation adds. */
.range{columns:3;column-gap:clamp(18px,2.4vw,30px);margin-top:clamp(34px,4.5vw,50px);
  padding-inline:22px}
.range figure{break-inside:avoid;margin:0 0 clamp(26px,3.4vw,42px);position:relative}
.range .shot{display:block;width:100%;height:auto;border-radius:12px}
/* The overhang has to account for the rotation, not just the offset. At -8deg a
   88x179 tag paints a 112 px wide box, so its real edge sits ~12 px further left
   than `left` says. At -3.5% that measured -9 px, i.e. off the side of the phone.
   -1% keeps the painted edge inside the column gutter at every width. */
.range .tag{position:absolute;left:-1%;bottom:14%;width:27%;height:auto;
  transform:rotate(-8deg);transform-origin:50% 90%;
  filter:drop-shadow(0 14px 22px rgba(15,30,45,.42));
  transition:transform .28s ease}
.range figure:hover .tag{transform:rotate(-1deg) translateY(-6px) scale(1.05)}
.range figcaption{margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}
/* The tag hangs into the column gutter, so the gutter has to stay wider than the
   overhang or it lands on its neighbour. Two columns below 900, one below 620. */
@media (max-width:900px){ .range{columns:2} }
@media (max-width:620px){ .range{columns:1;max-width:420px;margin-inline:auto} }
@media (prefers-reduced-motion:reduce){ .range .tag{transition:none} }

/* ---- giving back: the flow ----
   Two outcomes and no third one, drawn rather than described. The connector is
   an SVG on desktop because that is the only way to keep the curves and the
   text in one coordinate system and have them stay aligned at every width.
   Under 860px the curves are dropped for the stacked version, which says the
   same thing with gold rules. Both carry the same words: change one, change
   the other.

   Gold is used here and nowhere else on the site. It is deliberate. The accent
   red means alert everywhere else (medical, allergy, 911), which is the wrong
   note for a donation going back to a school. */
.giveflow{margin-top:clamp(26px,3.4vw,40px)}
.giveflow .art{display:block;width:100%;height:auto}
.giveflow .stack{display:none}
.fl-h{font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-size:25px;fill:var(--band-ink)}
.fl-p{font-family:Montserrat,sans-serif;font-size:13.5px;font-weight:500;fill:var(--band-ink-2)}
.fl-k{font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.15em;
  fill:var(--accent-sm)}
@media (max-width:860px){
  .giveflow .art{display:none}
  .giveflow .stack{display:block}
  .giveflow .stack .lead{font-family:"Bebas Neue","Arial Narrow",Impact,sans-serif;font-size:26px;
    line-height:1.02;color:var(--band-ink)}
  .giveflow .stack .arm{border-left:3px solid #E8B33A;padding-left:18px;margin-top:26px}
  .giveflow .stack .arm h3{font-size:25px;line-height:1.02;margin-top:5px}
  .giveflow .stack .arm p{font-size:14.5px;line-height:1.52;color:var(--band-ink-2);margin-top:7px}
}