/* site/assets/structure.css - layout and components. NO colour literals here: every
   colour is a token from brand.css (guard G6). Mobile-first; breakpoints 640 / 900 / 1100. */

/* ---------------------------------------------------------------- base ---- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top keeps an in-page target clear of the sticky header. Without it
   the skip-link's own target (#refill-form, only 32px below its panel top) lands
   behind the header - the site's primary accessibility bypass, broken. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.7;
  color: var(--navy-ink);
  background: var(--paper);
}
@media (min-width: 900px) { body { font-size: 17px; } }
img, svg, iframe { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); color: var(--navy); margin: 0; line-height: 1.1; font-weight: 600; }
h1 { font-size: 36px; letter-spacing: -0.01em; }
h2 { font-size: 30px; }
h3 { font-size: 20px; line-height: 1.25; }
@media (min-width: 900px) {
  h1 { font-size: 56px; letter-spacing: -0.02em; }
  h2 { font-size: 40px; letter-spacing: -0.02em; }
  h3 { font-size: 22px; }
}
p { margin: 0 0 var(--s-4); }
a { color: var(--teal-deep); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
/* focus ring is non-text UI that must reach 3:1 - teal-deep (5.61:1 on white, 5.11:1 on the
   soft panel, recomputed 2026-09-21 after the token was darkened), never the bright teal */
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.lede { font-size: 18px; max-width: 38em; }
@media (min-width: 900px) { .lede { font-size: 19px; } }
.small { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  font: 500 16px/1 var(--font-text); text-decoration: none; cursor: pointer;
  border-radius: var(--radius-ctl); border: 1px solid transparent;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease-out;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); opacity: .9; }
.btn-primary { background: var(--teal-deep); color: var(--paper); border-color: var(--teal-deep); }
.btn-primary:hover { color: var(--paper); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { color: var(--navy); }
.btn-block { width: 100%; }
.link-quiet { background: none; border: 0; padding: 0; font: inherit; color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-quiet:hover { color: var(--navy); }

/* ------------------------------------------------------------- header ---- */
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); background: var(--navy); color: var(--paper); border-radius: var(--radius-ctl); }
.skip-link:focus { top: var(--s-4); color: var(--paper); }
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: var(--s-4); }
/* flex: none - the wordmark must never be shrunk by its flex siblings; at 320px
   the header used to squash it from 125px to 91px at a fixed 44px height. */
.brand-link { display: inline-flex; align-items: center; margin-right: auto; flex: none; }
.brand-link img { height: 44px; width: auto; }
@media (min-width: 900px) { .brand-link img { height: 52px; } }
.main-nav { display: none; gap: var(--s-6); }
.main-nav a { color: var(--navy-ink); text-decoration: none; font-weight: 500; padding: var(--s-2) 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { border-bottom-color: var(--teal); color: var(--navy); }
/* Below 390px the logo, the CTA and the menu button cannot all sit on one row
   without squashing something. The CTA is the one that can go: the menu holds
   the same Refill link, and the mobile bottom bar brings it back on scroll. */
.header-cta { display: none; min-height: 44px; padding: 0 var(--s-4); font-size: 15px; }
@media (min-width: 390px) { .header-cta { display: inline-flex; } }
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; background: none; border: 1px solid var(--line); border-radius: var(--radius-ctl); cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 2px; }
.mobile-menu { position: absolute; left: 0; right: 0; top: var(--header-h); background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--s-3) var(--gutter) var(--s-5); display: grid; gap: var(--s-2); }
.mobile-menu a { color: var(--navy-ink); text-decoration: none; font-weight: 500; padding: var(--s-3) 0; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .main-nav { display: flex; }
  .nav-toggle, .mobile-menu { display: none !important; }
}

/* ------------------------------------------------------------ sections ---- */
.section { padding: var(--section-y) 0; }
.section-soft { background: var(--paper-soft); }
.section-head { max-width: 40em; margin-bottom: var(--s-7); }
.section-head h2 { margin-bottom: var(--s-4); }

/* ---------------------------------------------------------------- hero ---- */
.hero { padding: var(--s-7) 0 var(--s-9); position: relative; }
.hero .wrap { display: grid; gap: var(--s-7); align-items: center; }
/* Sentence case, not small caps: Inter's Google static build ships no small-cap glyphs, so
   `font-variant-caps: all-small-caps` synthesised the tracked-out ALL-CAPS eyebrow the design
   notes reject outright. Sentence case at 13px keeps the label quiet and removes the tell. */
.hero-place { font-size: 13px; letter-spacing: normal; font-weight: 500; color: var(--teal-deep); margin-bottom: var(--s-4); }
/* `text-wrap: balance` evens the RAG, it does not change the line COUNT. Measured differentially
   on the live page, line-box widths in px, `wrap` (the initial value) vs `balance`: 1440 and 1280
   wrap 565/553/272 vs balance 565/412/412; 1024 wrap 346/419/474/139 vs balance 346/304/315/412;
   900 wrap 346/419/395/218 vs balance 346/304/315/412; 390 wrap 228/276/313/92 vs balance
   228/200/208/273. The three-line desktop heading comes from the 7fr/4fr grid below - NOT from
   this property. Keep both; they do different jobs, and balance is what keeps the last line short.
   To switch this off in a drill, use `wrap` or delete the line: `text-wrap: normal` is NOT a valid
   value, so it is dropped silently and the computed value stays `balance`. See docs/design-notes.md
   round 3 - that invalid off-switch produced a confident false "no-op" finding once already. */
.hero h1 { max-width: 12em; margin-bottom: var(--s-5); text-wrap: balance; }
.hero .lede { margin-bottom: var(--s-6); }
.hero-ctas { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.hero-hours { color: var(--muted); font-size: 15px; margin: 0; }
/* The offset teal-tint block behind the photo was removed in round 2: it added a second
   decorative element (the wave is the only one this page gets), it collided with the wave
   at 390px, and it spent that emphasis on the weakest element on the page - the hero photo
   is a placeholder pending real store photography. The boldness lives in the 56px statement. */
.hero-figure { margin: 0; }
/* Mobile crops to a 4:3 band so the placeholder photo stays a supporting note rather than a
   second full-height hero; the source asset is untouched 4:5, so a swap costs nothing. */
.hero-figure img { width: 100%; height: auto; border-radius: var(--radius-card); object-fit: cover; object-position: 50% 28%; aspect-ratio: 4 / 3; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 48px; color: var(--teal); }
@media (min-width: 640px) { .hero-ctas { display: flex; flex-wrap: wrap; } }
@media (min-width: 900px) {
  .hero { padding: var(--s-9) 0 var(--s-10); }
  .hero .wrap { grid-template-columns: 7fr 4fr; gap: var(--s-9); }
  .hero-figure img { aspect-ratio: 4 / 5; }
  .hero-wave { height: 72px; }
}

/* ------------------------------------------------------------ services ---- */
.services-grid { display: grid; gap: var(--s-5); }
/* Flex column so a card with a footer link can pin it to the bottom edge. Measured at
   1440: grid rows stretch to the tallest card (Special Packaging, 841px), which left
   Delivery with 231px of empty card below its link - 27% of the card. Pinning the
   footer spends that slack above the link instead, and the footers of a row line up. */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: var(--s-6);
  display: flex; flex-direction: column;
}
.card-icon { width: 32px; height: 32px; color: var(--navy); margin-bottom: var(--s-4); }
.card h3 { margin-bottom: var(--s-2); }
.card-lead { color: var(--navy); font-weight: 500; margin-bottom: var(--s-3); }
/* `> :last-child`, not `p:last-child`: Special Packaging ends in a <ul>, whose 16px
   margin-bottom left it 17px short of the other cards' inner bottom edge at every width. */
.card > :last-child { margin-bottom: 0; }
.card ul { margin: 0 0 var(--s-4); padding-left: 1.2em; }
.card ul li { margin-bottom: var(--s-1); }
.card-foot { margin-top: auto; padding-top: var(--s-5); }
/* padding-block, not min-height or inline-flex: this link is the only text in .card-foot, so
   WCAG 2.5.8's in-sentence exception does not cover it and its 20px line box is 4px under the
   24px floor. Vertical padding on an INLINE box grows the border box (and with it the hit area
   and the focus ring) without touching the line box, so the card's footer sits exactly where it
   did - measured 20px -> 26px tall with no change to card height. inline-flex was rejected: it
   would make the element a block-level target, which is judged against the 44px thumb floor. */
.card-link { font-weight: 500; padding-block: 3px; }
.pills { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pills li {
  font-size: 13px; line-height: 1.4; padding: 5px 12px;
  border: 1px solid var(--teal-deep); background: var(--teal-tint); color: var(--navy-ink); border-radius: var(--radius-pill);
}
.services-note { margin-top: var(--s-7); max-width: 40em; }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
/* Five cards in two columns leave the fifth alone with an empty half-row beside it.
   Measured at 768: Generic Plan was 348px wide and 808px tall - the tallest card in the
   set, squeezed into half a row - with ~350x800px of blank page to its right. Spanning
   it across both columns fills the hole and gives the 18 pills room to breathe. Scoped
   to 640-899 only; from 900 the 6-column 3+2 rule below owns the layout. */
@media (min-width: 640px) and (max-width: 1099.98px) {
  .services-grid .card:last-child { grid-column: 1 / -1; }
}
/* The 3+2 grid starts at 1100, not 900. Measured: at a 900px viewport the three top
   cards are 252px wide - 188px of text - which set the body paragraphs at ~20 characters
   per line over 16-21 lines. That is far under a readable measure and the rag was shredded.
   1100 is one of the spec's own breakpoints (section 8), not a new one; from there the
   top row holds ~27 characters, which is the honest ceiling for three cards inside the
   1120px wrap. Below 1100 the two-column layout above takes over and reads at ~32-57. */
@media (min-width: 1100px) {
  .services-grid { grid-template-columns: repeat(6, 1fr); }
  .services-grid .card { grid-column: span 2; }
  .services-grid .card:nth-child(n+4) { grid-column: span 3; }
}

/* -------------------------------------------------------------- refill ---- */
.refill-wrap { display: grid; gap: var(--s-7); align-items: start; }
.refill-side { display: none; margin: 0; }
.refill-side img { width: 100%; height: auto; border-radius: var(--radius-card); aspect-ratio: 3 / 4; object-fit: cover; }
.refill-panel { max-width: 640px; margin: 0 auto; width: 100%; }
.refill-panel h2 { margin-bottom: var(--s-3); }
.refill-form { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.fs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-5); }
.fs > legend { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: var(--s-2); }
.choice { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.choice > legend { font-weight: 500; line-height: 1.4; padding: 0; margin-bottom: var(--s-2); }
.field { display: grid; gap: var(--s-1); }
.field label, .choice > legend { line-height: 1.4; }
.field label { font-weight: 500; }
.field-row { display: grid; gap: var(--s-5); }
.field-inline { display: flex; gap: var(--s-3); align-items: center; }
.field-inline input { flex: 1; }
.help { font-size: 14px; color: var(--muted); margin: 0; }
.optional { font-weight: 400; color: var(--muted); font-size: 14px; }
input[type="text"], input[type="tel"], input[type="date"], input[type="number"], textarea {
  width: 100%; min-height: 48px; padding: 10px var(--s-4);
  font: inherit; color: var(--navy-ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-ctl);
}
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 0; border-color: var(--teal-deep); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
.field-error { font-size: 14px; color: var(--error); margin: 0; }
.form-summary { font-weight: 500; color: var(--error); margin: 0; }
.form-note { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }
.radio { display: flex; gap: var(--s-3); align-items: center; min-height: 44px; cursor: pointer; }
.radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--teal-deep); }
.btn-add, .btn-remove {
  background: none; border: 1px dashed var(--teal-deep); color: var(--teal-deep);
  font: 500 15px/1 var(--font-text); min-height: 44px; padding: 0 var(--s-4); border-radius: var(--radius-ctl); cursor: pointer; justify-self: start;
}
.btn-remove { border-style: solid; border-color: var(--line); color: var(--muted); }
.btn-add:hover, .btn-remove:hover { color: var(--navy); border-color: var(--navy); }
/* The repeatable groups own the gap BETWEEN their rows; .fs sets the gap between
   groups. Without these the added Rx slots and OTC rows collapse onto each other
   (the parent .fs gap only spaces the list as a whole). */
.rx-list, .otc-list { display: grid; gap: var(--s-5); }
.otc-row { display: grid; gap: var(--s-3); align-items: end; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; }
.refill-done { text-align: center; padding: var(--s-8) var(--s-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); margin-top: var(--s-6); }
.refill-done-icon { width: 48px; height: 48px; margin: 0 auto var(--s-4); color: var(--success); }
.refill-done h3 { font-size: 28px; margin-bottom: var(--s-3); }
/* the card is centre-aligned, so the body line needs its own measure or it runs
   the full 640px panel width and reads as a banner rather than a sentence */
.refill-done p { max-width: 34em; margin: 0 auto var(--s-5); }
@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .otc-row { grid-template-columns: 1fr 96px auto; }
  .otc-row .btn-remove { margin-bottom: 2px; }
}
@media (min-width: 1100px) {
  .refill-wrap { grid-template-columns: 4fr 7fr; gap: var(--s-9); }
  .refill-side { display: block; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .refill-panel { margin: 0; }
}

/* --------------------------------------------------------------- about ---- */
.about-grid { display: grid; gap: var(--s-7); }
.quotes { display: grid; gap: var(--s-5); margin: var(--s-7) 0; }
.quote { margin: 0; padding-left: var(--s-5); border-left: 2px solid var(--teal); }
.quote h3 { font-size: 18px; margin-bottom: var(--s-2); }
.quote p { font-family: var(--font-display); font-size: 22px; line-height: 1.4; color: var(--navy); margin: 0; }
/* margin-top: h3 and .checklist both shipped with margin 0, so "Why choose us" sat
   directly on the first bullet (measured gap 0px at 1440 and 390). */
.checklist { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; }
.checklist svg { flex: none; width: 22px; height: 22px; color: var(--teal-deep); margin-top: 3px; }
/* .about-figure is UNUSED on the page today: spec 2.5's `about` image slot was deliberately
   left empty (no acceptable photograph exists yet) and referencing a missing file would
   render a broken image. The rule stays so a real photo is a one-element drop-in later. */
.about-figure { margin: var(--s-7) 0 0; }
.about-figure img { width: 100%; height: auto; border-radius: var(--radius-card); aspect-ratio: 16 / 9; object-fit: cover; }
/* The two-column checklist is MULTICOLUMN, not a 2-track grid. A grid aligns rows across
   both columns, so a two-line bullet on one side opened a 50px hole beside the one-line
   bullet facing it - three uneven gaps that read as paragraph breaks in a flat list.
   Multicol keeps one uniform 12px rhythm and flows the nine items 5/4 down each column,
   which also matches DOM order instead of zig-zagging across it. */
@media (min-width: 640px) {
  .quotes { grid-template-columns: 1fr 1fr; }
  .checklist { display: block; columns: 2; column-gap: var(--s-7); }
  .checklist li { break-inside: avoid; margin-bottom: var(--s-3); }
}

/* ------------------------------------------------------------- contact ---- */
.contact-grid { display: grid; gap: var(--s-7); }
/* margin-top: h2 ships with margin 0 and this list did too, so "Visit us" sat directly
   on the "Address" label (measured gap 0px). Matches the checklist's heading offset. */
.contact-list { margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.contact-list dt { font-size: 13px; color: var(--muted); font-weight: 500; }
.contact-list dd { margin: 0; }
/* Same 24px-floor fix as .card-link, same reason: each dd holds nothing but its link, so the
   phone and email links are standalone, not in a sentence. Vertical padding keeps the dl's
   4px row gap and the dt/dd rhythm identical (the padding overflows the line box rather than
   growing it), so the Visit us column measures the same height before and after. Applied to
   every dd link, not just phone and email, so the address link keeps the same hit geometry. */
.contact-list dd a { padding-block: 3px; }
.hours { border-collapse: collapse; margin-top: var(--s-2); }
/* Tighter label gutter, and nowrap on the VALUE cell only: at 900px the contact grid's 5fr
   left column is ~335px, which broke "9:00 AM - 6:00 PM" after "6:00" and "Saturday -
   Sunday" after the dash. Opening hours are the one thing here a person reads at a glance
   and a time split across two lines misreads. Nowrap on the day label TOO was tried and
   reverted: it pushed the table's min-content to 317px, wider than the 272px content box at
   320px, and the page scrolled sideways (scrollWidth 341). With only the value pinned, the
   label keeps one line down to 320px because the table gives it whatever the value leaves. */
.hours th, .hours td { text-align: left; padding: var(--s-2) var(--s-4) var(--s-2) 0; font-weight: 400; border-bottom: 1px solid var(--line); }
.hours td { white-space: nowrap; }
/* height: auto - without it the iframe's height="480" attribute is a definite height, so
   `aspect-ratio` is ignored entirely: the map measured 342x480 at 390px (a PORTRAIT map
   half a phone screen tall) and 569x480 at 1440. The attributes stay as the pre-load
   intrinsic ratio; the CSS now decides the box. */
.map { border: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
/* Two bands, not one. At 900-1099 the 5fr left column is only 315px while the body font
   steps up to 17px, so the hours table no longer fits and "Saturday - Sunday" broke after
   the dash; an even split gives it 378px and the map 378x284, which is still the larger
   element on the row. 5fr/7fr returns at 1100 - the spec's desktop proportion, and one of
   the project's existing breakpoints (Task 4 moved the services grid to 1100 for the same
   kind of squeeze) rather than a new one. */
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .contact-grid { grid-template-columns: 5fr 7fr; } }

/* -------------------------------------------------------------- footer ---- */
/* navy-ink, not muted - a design CHOICE now, not a contrast requirement. This originally read
   that --muted fell under AA on the soft panel (4.36:1). That stopped being true on 2026-09-21
   when --muted was darkened (brand.css holds the value): recomputed, it is 5.31:1 on white
   and 4.84:1 on the soft panel, so it clears AA here. navy-ink (12.02:1 on paper-soft) is kept because the footer
   reads as the page's closing statement and wants full-strength text, not secondary text. */
.site-footer { background: var(--paper-soft); border-top: 1px solid var(--line); padding: var(--s-7) 0 var(--s-6); font-size: 14px; color: var(--navy-ink); }
.site-footer .wrap { display: grid; gap: var(--s-4); }
.site-footer img { height: 36px; width: auto; }
.site-footer a { color: var(--navy-ink); }
.footer-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; }
.footer-row a { display: inline-flex; align-items: center; min-height: 44px; }
.privacy { margin-top: var(--s-4); max-width: 44em; }
.privacy summary { cursor: pointer; color: var(--navy-ink); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.privacy p { margin: var(--s-2) 0 0; }

/* ---------------------------------------------------------- bottom bar ---- */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 56px;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper); border-top: 1px solid var(--line);
  /* visibility, not transform alone: a bar slid off-screen is still focusable, so a
     keyboard user on any sub-900px viewport would tab into two links they cannot see
     or scroll to. visibility: hidden takes it out of the tab order and the a11y tree;
     the 180ms delay lets the slide-out finish before it disappears. */
  transform: translateY(100%); visibility: hidden;
  transition: transform 180ms ease-out, visibility 0s linear 180ms;
}
.bottom-bar.is-visible { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.bottom-bar a { display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 500; color: var(--navy); }
.bottom-bar a + a { background: var(--teal-deep); color: var(--paper); }
@media (min-width: 900px) { .bottom-bar { display: none; } }

/* ------------------------------------------------------ reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover { transform: none; }
}