/* orderflow-prefix: tw */
/* Tyne & Wear Turf: bright grass, deep pitch, a dab of sun.
   Archivo only (width axis): headings 800 weight, stretched 112-118%; body 400/500.
   White base, mint surfaces, rounded 16-24px cards. Mobile first. */

:root {
  --grass: #16b364;
  --grass-hover: #12a159;
  --pitch: #0a3d2a;
  --btn-ink: #08331f;
  --sun: #ffd23f;
  --white: #ffffff;
  --mint: #f2f7f3;
  --mint-2: #e4f2e8;
  --line: #dbe6de;
  --muted: #33594a;
  --leaf: #0e7a45;
  --on-dark: #d6e8dd;
  --err: #a8321a;
  --err-bg: #fff2ee;
  --focus: #1f5fd1;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1240px;
  --gut: 16px;
  --text: 46rem;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --shadow: 0 14px 34px rgba(10, 61, 42, 0.18);
}
@media (min-width: 48rem) { :root { --gut: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; scroll-padding-bottom: 104px; }
@media (min-width: 60rem) { html { scroll-padding-bottom: 16px; } }
body {
  margin: 0; background: var(--white); color: var(--pitch);
  font: 400 1.0625rem/1.55 var(--font);
  padding-bottom: 5.25rem;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(22, 179, 100, 0.18);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pitch); text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { color: var(--leaf); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { left: -5000px; }

h1, h2, h3 { font-family: var(--font); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 0.6rem; color: inherit; }
h1 { font-stretch: 116%; font-size: clamp(2.35rem, 8.6vw, 4.5rem); line-height: 1; letter-spacing: -0.025em; }
h2 { font-stretch: 114%; font-size: clamp(1.75rem, 5.4vw, 2.75rem); }
h3 { font-stretch: 112%; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0 0 0.9rem; }
.small { font-size: 1rem; color: var(--muted); }
.opt { font-weight: 400; color: var(--muted); }
strong { font-weight: 700; }

.skip { position: absolute; left: -999px; top: 0; background: var(--pitch); color: #fff; padding: 0.6rem 1rem; z-index: 80; }
.skip:focus { left: 0.5rem; top: 0.5rem; color: #fff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.measure { max-width: var(--text); }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 1rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 4px; border-radius: 2px; background: var(--sun); flex: none; }
.sec--dark .eyebrow, .nudge .eyebrow { color: var(--sun); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-md); border: 0; cursor: pointer;
  font: 700 1.0625rem/1.1 var(--font); text-decoration: none; text-align: center;
}
.btn svg { flex: none; }
.btn--go { background: var(--grass); color: var(--btn-ink); }
.btn--go:hover { background: var(--grass-hover); color: var(--btn-ink); }
.btn--line { background: var(--white); color: var(--pitch); border: 2px solid var(--pitch); font-weight: 600; }
.btn--line:hover { background: var(--mint); color: var(--pitch); }
.btn--dark { background: var(--pitch); color: #fff; }
.btn--dark:hover { background: #0f5139; color: #fff; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 46px; padding: 0 18px; font-size: 0.95rem; border-radius: var(--r-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.arrowlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--pitch); }

/* ---------- header ---------- */
.top { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 40; }
.top__in { display: flex; align-items: center; gap: 10px; min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
.top__brand { display: flex; align-items: center; min-height: 44px; margin-right: auto; text-decoration: none; }
.top__logo { display: block; height: 38px; width: auto; }
.top__nav { display: none; }
.top__tools { display: flex; align-items: center; gap: 8px; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 14px; color: var(--pitch); text-decoration: none; font-weight: 600; font-size: 1rem; background: var(--white);
}
.iconbtn:hover { border-color: var(--pitch); color: var(--pitch); }
.iconbtn__txt { display: none; }
.top__shop { display: none; }
.menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: 14px; background: var(--pitch); color: #fff; font-weight: 700;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--grass); color: var(--btn-ink); }
.menu__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(10, 61, 42, 0.14); }
.menu__panel ul { list-style: none; margin: 0 auto; padding: 8px var(--gut) 18px; max-width: var(--wrap); }
.menu__panel a { display: flex; align-items: center; min-height: 52px; font-size: 1.15rem; font-weight: 700; font-stretch: 110%; color: var(--pitch); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu__panel a[aria-current="page"] { color: var(--leaf); }
.menu__cta { margin-top: 14px; }
@media (min-width: 30rem) { .top__logo { height: 42px; } .iconbtn__txt { display: inline; } }
@media (min-width: 72rem) {
  .top__in { gap: 16px 28px; min-height: 80px; }
  .top__brand { margin-right: 0; }
  .top__logo { height: 44px; }
  .top__nav { display: block; margin-right: auto; margin-left: 8px; }
  .top__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
  .top__nav a { display: inline-block; padding: 10px 0; color: var(--pitch); text-decoration: none; font-weight: 500; font-size: 1rem; border-bottom: 2px solid transparent; }
  .top__nav a:hover { border-bottom-color: var(--grass); }
  .top__nav a[aria-current="page"] { border-bottom-color: var(--sun); }
  .top__shop { display: inline-flex; min-height: 44px; padding: 0 20px; font-size: 1rem; border-radius: 14px; }
  .menu { display: none; }
}

/* ---------- hero ---------- */
.hero { padding: 28px 0 40px; }
.hero--page { padding-top: 20px; }
.hero--page h1 { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.04; }
.hero__grid { display: grid; gap: 32px; align-items: center; }
.hero__text { min-width: 0; }
.hero__intro { font-size: 1.125rem; max-width: 34rem; }
.hero__intro + .hero__intro { margin-top: -0.2rem; }
.hero .crumbs { margin-bottom: 12px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 1rem; font-weight: 500; }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }
.ticks svg { color: var(--leaf); flex: none; }
.hero__media { position: relative; min-width: 0; }
.hero__media img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--r-xl); }
.hero--page .hero__media img { height: 240px; }
.tag-dark {
  position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--pitch); color: #fff; border-radius: 999px; font-size: 0.875rem; font-weight: 600;
}
.tag-dark svg { color: var(--sun); }
.floatcard {
  position: absolute; left: 14px; bottom: 14px; right: 14px; max-width: 320px; display: flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 12px; background: #fff; border-radius: 18px; box-shadow: var(--shadow);
}
.floatcard__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--grass); color: var(--btn-ink); }
.floatcard b { display: block; font-weight: 800; font-stretch: 112%; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.01em; }
.floatcard span span { display: block; font-size: 0.875rem; line-height: 1.4; color: var(--muted); }

.h1-lines span { display: block; }
.h1-lines .ul { display: inline-block; position: relative; padding-bottom: 10px; }
.h1-lines .ul::after { content: ""; position: absolute; left: 2px; right: 6px; bottom: 0; height: 8px; border-radius: 4px; background: var(--sun); }

@media (min-width: 60rem) {
  .hero { padding: 64px 0 72px; }
  .hero__grid { grid-template-columns: 1.15fr 1fr; gap: 56px; }
  .hero__media img { height: 500px; }
  .hero--page { padding: 48px 0 56px; }
  .hero--page .hero__grid { grid-template-columns: 1.2fr 1fr; }
  .hero--page .hero__media img { height: 380px; }
  .hero--page h1 { font-size: clamp(2.6rem, 4.4vw, 3.75rem); }
  .hero__intro { font-size: 1.1875rem; }
}
.hero--plain { padding-bottom: 28px; }
.hero--plain .hero__grid { grid-template-columns: 1fr; }

/* hero rows: phones read H1, intro, then the buying row (home: photos first) or the quote form */
.hero--card .hero__grid, .hero--buy .hero__grid, .hero--home .hero__grid { gap: 24px; align-items: start; }
.hero--card .hero__intro:last-child { margin-bottom: 0; }
.hero__card, .hero__more { min-width: 0; }
.hero__more .hero__btns { margin-top: 0; }
@media (max-width: 47.99rem) {
  /* phones: the quote form starts on the first screen of the turf laying pages */
  .hero--card { padding-top: 16px; }
  .hero--card h1 { font-size: clamp(1.85rem, 7.6vw, 2.2rem); margin-bottom: 8px; }
  .hero--card .hero__intro { font-size: 1.0625rem; }
  .hero--card .hero__grid { gap: 16px; }
}
@media (min-width: 60rem) {
  /* home and area pages: text and buying row on the left, photos on the right */
  .hero--home .hero__grid, .hero--buy .hero__grid { grid-template-rows: auto 1fr; grid-template-areas: "text media" "more media"; row-gap: 28px; }
  .hero--home .hero__text, .hero--buy .hero__text { grid-area: text; }
  .hero--home .hero__more, .hero--buy .hero__more { grid-area: more; }
  .hero--home .hero__media, .hero--buy .hero__media { grid-area: media; align-self: start; }
  /* turf laying pages: the form beside the H1 */
  .hero--card .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "text card" "media card"; column-gap: 56px; row-gap: 28px;
  }
  .hero--card .hero__text { grid-area: text; }
  .hero--card .hero__card { grid-area: card; }
  .hero--card .hero__media { grid-area: media; align-self: start; }
  .hero--card .hero__media img { height: 300px; }
}

/* the quote card itself */
.qcard { background: var(--pitch); color: #fff; border-radius: var(--r-xl); padding: 20px 16px 10px; box-shadow: var(--shadow); scroll-margin-top: 12px; }
.qcard .eyebrow { color: var(--sun); margin-bottom: 6px; }
.qcard__h { color: #fff; font-size: clamp(1.5rem, 6.4vw, 2rem); margin-bottom: 8px; }
.qcard__intro { color: var(--on-dark); font-size: 1rem; margin: 0 0 4px; }
.qcard .alert { margin: 12px 0 4px; }
.qcard__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; margin-top: 14px; align-items: end; }
@media (min-width: 40rem) { .qcard__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.qcard__grid .f--wide { grid-column: 1 / -1; }
.qcard .f { margin-bottom: 12px; }
.qcard .f > label { color: #fff; }
.qcard .opt { color: var(--on-dark); }
.qcard input[type="text"], .qcard input[type="tel"], .qcard input[type="email"], .qcard input[type="date"], .qcard textarea { border-color: #fff; }
.qcard .check, .qcard legend { color: #fff; }
.qcard :focus-visible { outline-color: var(--sun); }
.qcard .f > label.check--consent { color: var(--on-dark); font-size: 0.9375rem; }
.qcard .check--consent a { color: #fff; }
.qcard .btn--go { min-height: 56px; font-size: 1.125rem; margin: 4px 0 6px; }
.qcard .f[hidden] { display: none; }
.qcard__foot { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 6px 0 0; }
.qcard__foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; font-weight: 600; font-size: 0.95rem; }
.qcard__foot a:hover { color: var(--sun); }
.qcard__foot svg { color: var(--sun); }
@media (min-width: 40rem) { .qcard { padding: 26px 26px 14px; } }

/* hero pack picks: 10, 20, 30 m² straight into the basket */
.picks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 34rem; }
.pick {
  display: flex; flex-direction: column; gap: 3px; min-height: 44px; height: 100%; padding: 12px 12px 10px; background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--r-md); color: var(--pitch); text-decoration: none;
}
.pick:hover { border-color: var(--pitch); color: var(--pitch); }
.pick--lead { border: 2px solid var(--pitch); padding: 11.5px 11.5px 9.5px; background: var(--mint); }
.pick__m2 { font-weight: 800; font-stretch: 112%; font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em; }
.pick__m2 small { font-size: 0.55em; letter-spacing: 0; }
.pick__name { display: none; font-size: 0.875rem; font-weight: 600; line-height: 1.25; }
.pick__price { font-weight: 600; font-size: 1rem; color: var(--leaf); }
@media (min-width: 30rem) { .pick__name { display: block; } .picks { gap: 10px; } }
.hero--buy .hero__more .hero__btns { margin-top: 0; }

/* breadcrumbs */
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 6px 0 2px; color: var(--line); }
.crumbs a { color: var(--muted); display: inline-block; padding: 11px 0; margin: -11px 0; }
.crumbs [aria-current] { color: var(--pitch); font-weight: 600; }

/* ---------- sections ---------- */
.sec { padding: 40px 0; }
.sec--mint { background: var(--mint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec--dark { background: var(--pitch); color: #fff; }
.sec--dark a:not(.btn) { color: #fff; }
.sec--mint + .sec--mint { border-top: 0; padding-top: 0; }
.sec + .sec:not(.sec--mint):not(.sec--dark) { padding-top: 8px; }
.sec--mint + .sec:not(.sec--mint):not(.sec--dark), .sec--dark + .sec:not(.sec--mint):not(.sec--dark) { padding-top: 40px; }
.sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: 24px; }
.sec__head h2 { margin: 0; }
.sec__head p { margin: 10px 0 0; max-width: 36rem; font-size: 1.0625rem; }
.sec__head .sub { color: var(--muted); }
@media (min-width: 48rem) {
  .sec { padding: 64px 0; }
  .sec + .sec:not(.sec--mint):not(.sec--dark) { padding-top: 16px; }
  .sec--mint + .sec:not(.sec--mint):not(.sec--dark), .sec--dark + .sec:not(.sec--mint):not(.sec--dark) { padding-top: 64px; }
  .sec__head { margin-bottom: 32px; }
}
main > .sec:last-child { padding-bottom: 72px; }

/* prose */
.txt { max-width: var(--text); }
.txt h3 { margin-top: 1.5rem; }
.txt p { color: var(--pitch); }

/* lane band (dark, image + points) */
.band { display: grid; gap: 0; align-items: center; }
.band__media { margin-bottom: 32px; }
.band__txt > :last-child { margin-bottom: 0; }
.band__act { margin: 0; }
.band__media img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--r-xl); }
.band h2 { color: #fff; }
.band p { color: var(--on-dark); font-size: 1.0625rem; }
.band h3 { color: #fff; font-size: 1.125rem; font-stretch: 105%; letter-spacing: 0; margin: 0 0 2px; }
.points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.points li { display: flex; gap: 16px; align-items: flex-start; }
.points__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); color: var(--sun); }
.points b { display: block; font-weight: 700; font-size: 1.0625rem; color: #fff; }
.points span span { display: block; color: var(--on-dark); font-size: 1rem; }
.points p { margin: 0; color: var(--on-dark); font-size: 1rem; }
.tblwrap--gap { margin-top: 28px; }
.pic { margin: 0; }
.pic img { border-radius: var(--r-xl); }
.pic figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 6px; }
.band .btn { margin-top: 30px; }
@media (min-width: 60rem) {
  .band { grid-template-columns: 1fr 1fr; gap: 64px; }
  .band__media img { height: 440px; }
}

/* cards */
.cardgrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; }
.sec--mint .card { border-color: var(--line); }
.card h3 { margin: 0 0 6px; font-size: 1.2rem; }
.card h3 a { color: var(--pitch); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.card p { margin: 0; color: var(--muted); font-size: 1rem; }
.card--link { transition: border-color 0.15s, box-shadow 0.15s; }
.card--link:hover { border-color: var(--pitch); box-shadow: 0 8px 22px rgba(10, 61, 42, 0.1); }
.card--link h3 a:focus-visible { outline: none; }
.card--link:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.card__go { margin-top: auto; padding-top: 14px; color: var(--leaf); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.chip { align-self: flex-start; display: inline-block; background: var(--mint); color: var(--pitch); font-weight: 700; font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; border: 1px solid var(--line); }
.card--note { background: var(--mint); }

/* pack cards (home, packs, price table) */
.packgrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.pack { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 22px; }
.pack--lead { border: 2px solid var(--pitch); padding: 21px; }
.pack__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--r-md); background: var(--mint); color: var(--pitch); margin-bottom: 18px; }
.pack h3 { margin: 0; font-size: 1.4rem; }
.pack h3 a { color: var(--pitch); text-decoration: none; }
.pack h3 a:hover { text-decoration: underline; }
.pack__covers { margin: 6px 0 0; font-weight: 600; }
.pack__covers span { font-weight: 400; color: var(--muted); }
.pack__text { margin: 12px 0 0; font-size: 1rem; color: var(--muted); }
.pack__foot { margin-top: auto; padding-top: 22px; }
.pack__price { margin: 0; font-weight: 800; font-stretch: 112%; font-size: 2.35rem; line-height: 1; letter-spacing: -0.02em; }
.pack__price--sm { font-size: 1.85rem; }
.pack__rate { margin: 6px 0 16px; font-size: 0.875rem; color: var(--muted); }
.pack label { display: block; font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; }
.pack input[type="number"] { height: 50px; margin-bottom: 12px; font-weight: 600; }
.bandnote { margin: 24px 0 0; font-size: 1rem; color: var(--muted); }
.bandnote strong { color: var(--pitch); font-weight: 600; }

/* tables */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; margin: 4px 0 12px; }
.tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tbl tr { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 16px; margin-bottom: 10px; }
.tbl td { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; text-align: right; }
.tbl td::before { content: attr(data-label); font-weight: 700; text-align: left; }
.tbl td[data-label=""]::before { content: none; }
.tbl td[data-label=""] { text-align: left; }
@media (min-width: 48rem) {
  .tbl { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
  .tbl thead { position: static; width: auto; height: auto; clip: auto; }
  .tbl tr { display: table-row; border: 0; padding: 0; margin: 0; }
  .tbl th, .tbl td { display: table-cell; text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .tbl tbody tr:last-child td { border-bottom: 0; }
  .tbl th { background: var(--mint); font-weight: 700; font-stretch: 108%; }
  .tbl td::before { content: none; }
}
.tblwrap { max-width: 56rem; }

/* steps */
.stepgrid { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stepgrid li { counter-increment: s; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; background: var(--white); }
.stepgrid li::before {
  content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 14px;
  background: var(--grass); color: var(--btn-ink); font-weight: 800; font-stretch: 112%; font-size: 1.15rem;
}
.stepgrid h3 { font-size: 1.15rem; margin-bottom: 6px; }
.stepgrid p { margin: 0; color: var(--muted); font-size: 1rem; }

/* checklist */
.ticklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px 32px; max-width: 60rem; }
.ticklist li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.ticklist li::before, .tickgrid__tick {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  background: var(--grass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2308331f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
@media (min-width: 48rem) { .ticklist { grid-template-columns: 1fr 1fr; } }
.tickgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.tickgrid li { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; background: var(--white); }
@media (min-width: 60rem) { .tickgrid { grid-template-columns: repeat(3, 1fr); } }
.tickgrid__tick { display: block; width: 36px; height: 36px; margin: 0 0 14px; }
.tickgrid b { display: block; font-weight: 800; font-stretch: 110%; font-size: 1.125rem; line-height: 1.25; }
.tickgrid span:not(.tickgrid__tick) { display: block; margin-top: 6px; font-size: 1rem; color: var(--muted); }

/* callout */
.nudge { background: var(--pitch); color: #fff; border-radius: var(--r-xl); padding: 28px 24px; display: grid; gap: 18px; align-items: center; }
.nudge h2 { color: #fff; margin-bottom: 8px; font-size: clamp(1.6rem, 4.6vw, 2.25rem); }
.nudge p { color: var(--on-dark); margin: 0 0 0.6rem; }
.nudge a:not(.btn) { color: #fff; }
.nudge__act { margin: 0; }
@media (min-width: 48rem) { .nudge { grid-template-columns: 1fr auto; padding: 40px 44px; gap: 32px; } }

/* faq */
.faq { display: grid; gap: 20px 64px; }
.faq__head h2 { margin-bottom: 12px; }
.faq__head p { color: var(--muted); max-width: 21rem; }
.faq__group + .faq__group { margin-top: 28px; }
.faq__group h3 { font-size: 1.25rem; margin-bottom: 12px; }
.qa { display: grid; gap: 12px; }
.qa details { border: 1px solid var(--line); border-radius: 18px; padding: 0 20px; background: var(--white); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3d2a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qa details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3d2a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.qa__a { padding-bottom: 8px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
/* desktop: heading row across the top, questions in two columns */
@media (min-width: 60rem) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .faq__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; margin-bottom: 18px; }
  .faq__head h2 { margin: 0; }
  .faq__head p { max-width: none; margin: 0; }
  .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
  .qa summary { min-height: 52px; padding: 10px 0; font-size: 1rem; }
  .faq__group + .faq__group { margin-top: 22px; }
}

/* forms */
label { font-weight: 600; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input:not([type]), textarea, select {
  width: 100%; font: 400 1.0625rem/1.3 var(--font); color: var(--pitch); background: var(--white);
  border: 1.5px solid #9db3a6; border-radius: var(--r-sm); padding: 0 14px; min-height: 50px;
}
textarea { padding: 12px 14px; min-height: 120px; resize: vertical; }
input:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--pitch); }
input::placeholder, textarea::placeholder { color: #5d7a6c; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--err); background: var(--err-bg); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--pitch); width: 20px; height: 20px; margin: 0; flex: none; }
.f { margin-bottom: 16px; min-width: 0; }
.f > label, .f > .lbl { display: block; font-size: 0.95rem; margin-bottom: 6px; }
.f .hint { font-size: 0.9375rem; color: var(--muted); margin: 6px 0 0; }
.req { color: var(--err); }
.err { color: var(--err); font-weight: 700; font-size: 0.92rem; margin: 6px 0 0; }
.alert { background: var(--err-bg); border: 2px solid var(--err); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 20px; color: var(--pitch); }
.alert ul { margin: 6px 0 0; padding-left: 1.2rem; }
.alert[hidden] { display: none; }
.okmsg { background: var(--mint-2); border: 1px solid var(--grass); border-radius: var(--r-md); padding: 14px 16px; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-weight: 500; cursor: pointer; }
.check input { margin-top: 1px; }
.f > label.check { display: flex; font-size: 1rem; margin-bottom: 0; }
/* one consent box: normal reading text, box lined up with the first line */
.f--consent { margin-top: 2px; }
.f > label.check--consent { font-weight: 400; font-size: 1rem; line-height: 1.5; padding: 4px 0; color: var(--pitch); }
.check--consent input { margin-top: 2px; }
.check--consent a { font-weight: 600; }
/* order page: the terms box just above the pay button */
.f--terms { margin: 4px 0 12px; padding: 6px 14px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--mint); }
.f > label.check--terms { font-weight: 400; font-size: 1rem; line-height: 1.5; padding: 10px 0; color: var(--pitch); }
.check--terms input { margin-top: 2px; width: 24px; height: 24px; }
.check--terms a { font-weight: 600; color: var(--leaf); }
.f--terms .err { margin: 0 0 10px; }
.f--terms:has(input[aria-invalid="true"]) { border-color: var(--err); background: var(--err-bg); }
/* laying form: what sending the form does (and doesn't) do */
.qcard__note { color: var(--on-dark); font-size: 0.9375rem; line-height: 1.5; margin: 0 0 10px; }
.qcard__note a { color: #fff; font-weight: 600; }
/* copyable text, e.g. the optional cancellation form */
.copybox { border: 2px dashed var(--line); border-radius: var(--r-md); background: var(--mint); padding: 14px 16px; margin-top: 12px; }
.copybox p { margin: 0 0 8px; }
.copybox p:last-child { margin-bottom: 0; }
.inline-label { display: inline !important; font-weight: 500 !important; }
.inline-input { width: 6.5rem !important; display: inline-block; margin-left: 6px; }

/* calculator */
.sizer { background: var(--mint); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px 18px; display: grid; gap: 0; }
.sizer__media { margin-top: 28px; }
.sizer h2 { margin-bottom: 10px; }
.sizer__intro { max-width: 30rem; }
.sizer__box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.sizer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 14px; align-items: end; }
.sizer__res { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--pitch); color: #fff; border-radius: var(--r-md); padding: 18px 20px; }
.sizer__res p { margin: 0; }
.sizer__need { color: var(--on-dark); font-size: 0.95rem; }
.sizer__pick { font-weight: 800; font-stretch: 112%; font-size: 1.5rem; line-height: 1.15; color: #fff; }
.sizer__pick em { font-style: normal; color: var(--sun); }
.sizer__pick small { font-size: 0.95rem; font-weight: 600; color: var(--on-dark); font-stretch: 100%; margin-left: 6px; }
.sizer__alt { margin: 12px 0 0; font-size: 0.9rem; color: var(--muted); }
.sizer__media img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--r-lg); }
@media (min-width: 60rem) {
  .sizer { grid-template-columns: 1.1fr 1fr; padding: 44px; gap: 48px; }
  .sizer--solo { grid-template-columns: 1fr; }
  .sizer__media img { height: 100%; min-height: 440px; }
}

/* postcode strip */
.pcstrip { display: grid; gap: 28px; align-items: center; }
.pcstrip h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); margin-bottom: 14px; }
.arealinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.arealinks a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; color: var(--pitch); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.arealinks a:hover { border-color: var(--pitch); }
.arealinks svg { color: var(--leaf); }
.pcform label { display: block; font-weight: 700; margin-bottom: 8px; }
.pcrow { display: flex; flex-wrap: wrap; gap: 10px; }
.pcrow input { flex: 1 1 180px; min-width: 0; min-height: 52px; border-radius: 14px; }
.pcrow .btn { min-height: 52px; border-radius: 14px; }
.pc-result { margin: 12px 0 0; font-weight: 700; min-height: 1.4em; }
.pc-result[data-state="yes"] { color: var(--leaf); }
.pc-result[data-state="no"] { color: var(--err); }
@media (min-width: 60rem) { .pcstrip { grid-template-columns: 1.3fr 1fr; gap: 48px; } .pcstrip--solo { grid-template-columns: minmax(0, 36rem); } }

/* enquiry form */
.formcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 18px; }
.sec--mint .formcard { box-shadow: 0 10px 30px rgba(10, 61, 42, 0.06); }
.fgrid { display: grid; gap: 0 18px; }
.fgrid .f--wide { grid-column: 1 / -1; }
.fgrid[hidden] { display: none; }
fieldset.f { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.f legend { font-size: 0.95rem; font-weight: 600; padding: 0; margin-bottom: 4px; }
.formcard .btn--go { margin-top: 8px; }
.form-status { margin: 12px 0 0; font-weight: 600; }
@media (min-width: 40rem) { .fgrid { grid-template-columns: 1fr 1fr; } .formcard { padding: 32px; } }

/* reviews placeholder */
.soon { background: var(--mint); border: 1px dashed #b6cbbd; border-radius: var(--r-xl); padding: 28px 24px; max-width: 46rem; }
.soon p { margin: 0; color: var(--muted); }

/* ---------- basket ---------- */
.basket { max-width: 52rem; }
.leg { border: 1px solid var(--line); border-radius: var(--r-lg); margin: 0 0 16px; padding: 18px 16px 8px; min-width: 0; background: var(--white); }
.leg legend { float: left; width: 100%; font-weight: 800; font-stretch: 112%; font-size: 1.3rem; letter-spacing: -0.01em; margin: 0 0 14px; padding: 0; display: flex; align-items: center; gap: 12px; }
.leg legend + * { clear: both; }
.leg__n { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--grass); color: var(--btn-ink); font-size: 1rem; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.packcard { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.packcard input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.packcard:has(input:checked) { border: 2px solid var(--pitch); padding: 13.5px; background: var(--mint); }
.packcard:has(input:checked)::after { content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--grass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2308331f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.packcard:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.packcard__num { font-weight: 800; font-stretch: 112%; font-size: 2.1rem; line-height: 1; letter-spacing: -0.02em; }
.packcard__num small { font-size: 0.5em; margin-left: 2px; }
.packcard__name { font-weight: 700; font-size: 0.95rem; }
.packcard__price { font-size: 0.95rem; color: var(--muted); }
.packcard--own .packcard__num { color: var(--muted); }
.own { background: var(--mint); border-radius: var(--r-md); padding: 14px 16px 6px; margin: 4px 0 10px; }
.own label { display: block; margin-bottom: 6px; }
.own__row { display: flex; gap: 10px; align-items: center; }
.own__row input[type="range"] { flex: 1; accent-color: var(--leaf); height: 44px; }
.own__row input[type="number"] { width: 6.5rem; flex: none; }
.leg .pcrow { margin-bottom: 4px; }
.ways { display: grid; gap: 10px; margin-bottom: 10px; }
.way { display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; font-weight: 500; }
.way:has(input:checked) { border-color: var(--pitch); background: var(--mint); font-weight: 700; }
.way:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.dnote { margin: 4px 0 6px; padding: 12px 14px; background: var(--mint); border-left: 4px solid var(--grass); border-radius: 10px; font-size: 0.95rem; line-height: 1.5; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.chip-day { position: relative; flex: none; scroll-snap-align: start; }
.chip-day input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.chip-day span { display: block; min-width: 4.5rem; text-align: center; padding: 8px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); line-height: 1.2; font-size: 0.85rem; }
.chip-day span b { display: block; font-weight: 800; font-stretch: 112%; font-size: 1.45rem; }
.chip-day input:checked + span { background: var(--pitch); border-color: var(--pitch); color: #fff; }
.chip-day input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.total { background: var(--pitch); color: #fff; border-radius: var(--r-lg); padding: 18px 20px; margin: 8px 0 16px; }
.total__line { font-weight: 800; font-stretch: 112%; font-size: 1.45rem; margin: 0; }
.total__parts { list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.95rem; color: var(--on-dark); }
.total__parts li { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.basket .btn--block { min-height: 58px; font-size: 1.15rem; }
@media (min-width: 40rem) { .packs { grid-template-columns: repeat(4, 1fr); } .ways { grid-template-columns: 1fr 1fr; } .leg { padding: 24px 24px 12px; } }

.ref-chip { display: inline-block; background: var(--mint); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 700; }

/* ---------- sticky add bar (phones) ---------- */
.addbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: var(--pitch); color: #fff;
  border-top: 3px solid var(--grass);
}
.addbar[hidden] { display: none; }
.addbar__text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.92rem; line-height: 1.25; color: var(--on-dark); }
.addbar__text, .addbar__text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addbar__text b { font-weight: 800; font-stretch: 112%; font-size: 1.15rem; display: block; color: #fff; }
.addbar .btn { flex: none; min-height: 48px; }
.addbar__call {
  display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-md);
  border: 1.5px solid rgba(255, 255, 255, 0.28); color: #fff; text-decoration: none;
}
.addbar__call:hover { color: var(--sun); border-color: var(--sun); }
.addbar__call svg { color: var(--sun); }
@media (max-width: 22.4rem) { .addbar { gap: 8px; } .addbar__text { font-size: 0.85rem; } .addbar .btn { padding: 0 16px; } }
/* slide away while the keyboard is up or when the thing it points at is already on screen */
.addbar { transition: transform 0.2s ease, visibility 0s linear 0s; }
.addbar.is-tucked { transform: translateY(calc(100% + 4px)); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
@media (min-width: 60rem) { .addbar { display: none; } body { padding-bottom: 0; } }

/* ---------- footer ---------- */
.foot { background: var(--pitch); color: #fff; }
.foot__in { padding-top: 48px; padding-bottom: 32px; }
.foot__top { display: grid; gap: 32px 48px; }
.foot__logo { display: block; width: 210px; height: auto; }
.foot__blurb { margin: 18px 0 0; max-width: 22rem; font-size: 1rem; line-height: 1.6; color: var(--on-dark); }
.foot__call { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 44px; color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.foot__call:hover { color: var(--sun); }
.foot h2 { margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a, .foot li button { display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0; color: #fff; text-decoration: none; font: 400 1rem/1.3 var(--font); background: none; border: 0; cursor: pointer; text-align: left; }
.foot li a:hover, .foot li button:hover { color: var(--sun); text-decoration: underline; }
.foot__lay { align-self: start; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-lg); padding: 20px; }
.foot__lay h2 { color: var(--sun); }
.foot__lay p { margin: 0 0 14px; font-size: 1rem; color: var(--on-dark); }
.foot__base { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; font-size: 0.875rem; color: var(--on-dark); }
.foot__base p { margin: 0; }
.foot__base strong { color: #fff; font-weight: 600; }
/* phones: Shop and Help side by side so the footer isn't one long list */
.foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.foot__top > div:first-child, .foot__lay { grid-column: 1 / -1; }
@media (min-width: 48rem) { .foot__top > div:first-child, .foot__lay { grid-column: auto; } }
@media (min-width: 64rem) { .foot__in { padding-top: 56px; } .foot__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

/* landing pages: logo and phone only, slim footer */
.is-landing .iconbtn__txt { display: inline; }
.foot__mini { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
.foot__mini .foot__call { margin-top: 0; }
.foot__mini ul { display: flex; flex-wrap: wrap; gap: 0 22px; }

/* ---------- consent ---------- */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; background: var(--white); color: var(--pitch);
  border-radius: var(--r-xl); box-shadow: 0 18px 50px rgba(10, 61, 42, 0.28); border: 1px solid var(--line);
  padding: 20px 20px calc(16px + env(safe-area-inset-bottom)); max-width: 30rem;
}
.consent[hidden] { display: none; }
.consent__title { font-weight: 800; font-stretch: 112%; font-size: 1.25rem; margin-bottom: 6px; }
.consent__buttons { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
@media (min-width: 40rem) { .consent { left: 24px; bottom: 24px; right: auto; } }

/* legal pages */
.tpl-legal .txt { max-width: 44rem; }

/* pack cards (all widths): icon beside the name so the cards stay short */
.pack { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 14px; align-content: stretch; padding: 18px; }
.pack--lead { padding: 17px; }
.pack__icon { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; }
.pack__icon svg { width: 36px; height: 36px; }
.pack h3 { align-self: end; font-size: 1.3rem; }
.pack__covers { align-self: start; margin-top: 2px; }
.pack__text, .pack__foot { grid-column: 1 / -1; }
.pack__foot { padding-top: 16px; grid-row: 4; align-self: end; }
.pack__price { font-size: 2.1rem; }
/* tick cards (all widths): tick beside the text */
.tickgrid { gap: 12px; }
.tickgrid li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 18px; }
.tickgrid__tick { grid-row: 1 / span 2; width: 32px; height: 32px; margin: 0; }
.tickgrid span:not(.tickgrid__tick) { margin-top: 4px; }

/* ---------- phone tweaks ---------- */
@media (max-width: 47.99rem) {
  .stepgrid li { padding: 18px; }
  .stepgrid li::before { width: 36px; height: 36px; margin-bottom: 10px; }
  .band__media img { height: 220px; }
  .sizer__media img { height: 200px; }
}
@media (max-width: 29.99rem) {
  /* thumb-friendly: main buttons run the full width */
  main .btn { width: 100%; }
  .hero__btns { gap: 10px; }
  /* the second hero action reads as a link so the packs stay the one big button */
  .hero__more .hero__btns { gap: 2px; }
  .hero__more .btn--line { width: auto; min-height: 44px; padding: 0 2px; border: 0; background: none; text-decoration: underline; text-underline-offset: 0.16em; font-weight: 600; }
  .hero__more .ticks { margin-top: 14px; gap: 6px 20px; font-size: 0.95rem; }
  .pcrow .btn { flex: 1 1 100%; }
  .sizer__res { padding: 16px; }
  .nudge { padding: 24px 20px; }
  .inline-input { display: block; width: 100% !important; margin: 8px 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .card--link, .arealinks a { transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
}
@media print { .top, .addbar, .foot, .consent { display: none; } body { padding: 0; } .sec--dark, .nudge { background: none; color: #000; } }

/* pack names are links too: give them a finger-sized target without moving the layout */
.pack h3 a { display: inline-block; padding: 9px 0; margin: -9px 0; }

/* ---------- photo strips: the product beside the finished lawn ---------- */
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.strip__pic { margin: 0; min-width: 0; }
.strip__pic img { width: 100%; height: 132px; object-fit: cover; border-radius: var(--r-md); }
.strip__pic figcaption { font-size: 0.875rem; color: var(--muted); margin-top: 4px; }
.strip--outcome { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.strip--outcome .strip__pic img { height: 180px; }
@media (min-width: 48rem) { .strip { gap: 14px; } .strip__pic img { height: 220px; border-radius: var(--r-lg); } .strip--outcome .strip__pic img { height: 260px; } }
.sec--outcome { padding-top: 8px; }

/* ---------- hero size box: any size straight into the order page ---------- */
.sizebox { background: var(--white); border: 2px solid var(--pitch); border-radius: var(--r-lg); padding: 16px; max-width: 34rem; }
.sizebox > label { display: block; font-weight: 800; font-stretch: 110%; font-size: 1.2rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.sizebox__row { display: flex; flex-wrap: wrap; gap: 10px; }
.sizebox__in { position: relative; flex: 1 1 9rem; min-width: 0; }
.sizebox__in input { min-height: 54px; padding-right: 48px; font-size: 1.25rem; font-weight: 700; }
.sizebox__in span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--muted); pointer-events: none; }
.sizebox__row .btn { flex: 1 1 10rem; min-height: 54px; }
.sizebox__note { margin: 10px 0 0; font-size: 0.95rem; color: var(--muted); }
.sizebox__note a { display: inline-block; padding: 10px 0; margin: -10px 0; font-weight: 600; color: var(--pitch); }
.picks__h { margin: 18px 0 8px; font-weight: 700; font-size: 1rem; }
.hero__more .picks { margin-bottom: 0; }
.pick__m2 { font-size: 1.45rem; }

/* ---------- order page ---------- */
.prod { display: grid; gap: 14px; margin-bottom: 18px; background: var(--mint); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 12px; }
.prod__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prod__pics img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--r-md); }
.prod__txt { padding: 0 6px 4px; }
.prod__name { margin: 0; font-weight: 800; font-stretch: 112%; font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1.15; }
.prod__price { margin: 4px 0 8px; }
.prod__price b { font-weight: 800; font-size: 1.15rem; }
.prod__price span { color: var(--muted); }
.prod__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.975rem; }
.prod__pts li { display: flex; gap: 8px; align-items: flex-start; }
.prod__pts svg { color: var(--leaf); flex: none; margin-top: 3px; }
@media (min-width: 48rem) { .prod { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 16px; } .prod__pics img { height: 170px; } }

.pcok { border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 16px; background: var(--mint-2); border: 2px solid var(--grass); }
.pcok[data-state="ask"] { background: #fff8db; border-color: var(--sun); }
.pcok[hidden] { display: none; }
.size > label { display: block; font-weight: 600; margin-bottom: 6px; }
.size__row { position: relative; max-width: 16rem; }
.size__row input { min-height: 56px; font-size: 1.35rem; font-weight: 700; padding-right: 52px; }
.size__unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--muted); pointer-events: none; }
.size__rate { margin: 10px 0 4px; font-size: 1rem; }
.size__rate b { font-weight: 700; }
.calc { margin: 8px 0 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mint); }
.calc summary { display: flex; align-items: center; min-height: 48px; padding: 4px 14px; cursor: pointer; font-weight: 600; color: var(--pitch); }
.calc summary::-webkit-details-marker { color: var(--leaf); }
.calc[open] summary { border-bottom: 1px solid var(--line); }
.calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 12px 14px 0; }
.calc .small { padding: 0 14px 12px; margin: 0; }
.leg__sub { margin: 18px 0 8px; font-weight: 700; }
.packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 40rem) { .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 29.99rem) { .packcard { padding: 12px 10px; } .packcard:has(input:checked) { padding: 11.5px 9.5px; } .packcard__num { font-size: 1.7rem; } .packcard__name { font-size: 0.85rem; } }

/* ---------- thank you ---------- */
.thanks { display: grid; gap: 18px; max-width: 52rem; }
.thanks .card h2 { font-size: 1.4rem; }
.ticklist--one { grid-template-columns: 1fr !important; }
.card[hidden], .nudge[hidden], .sec[hidden] { display: none; }
.hero__media .strip__pic img { height: 132px; }
@media (min-width: 48rem) { .hero__media .strip__pic img { height: 240px; } }
.tpl-order .hero--plain { padding-bottom: 8px; }
.tpl-order .sec--order { padding-top: 12px; }

.btn[hidden] { display: none; }
@media (max-width: 47.99rem) {
  .hero__media .strip__pic img { height: 112px; }
  .picks__h { margin-top: 14px; }
}
.ref-chip[hidden] { display: none; }

/* one plain line near the bottom of a sales page (the turf laying link) */
.sec--line { padding: 8px 0 40px; }
.line { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 1.0625rem; }
.line .arrowlink { color: var(--pitch); }
main > .sec--line:last-child { padding-bottom: 48px; }

/* thank-you: the turf laying offer, lighter than the order confirmation */
.nudge--soft { background: var(--mint); color: var(--pitch); border: 1px solid var(--line); }
.nudge--soft h2 { color: var(--pitch); font-size: clamp(1.4rem, 4vw, 1.75rem); }
.nudge--soft p { color: var(--pitch); }
.foot__lay .arrowlink { display: inline-block; padding: 10px 0; color: #fff; }
.foot__lay .arrowlink svg { vertical-align: -3px; margin-left: 4px; }
.foot__lay .arrowlink:hover { color: var(--sun); }

/* ---------- − / + buttons either side of a number box ---------- */
.stepper { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.stepper > input, .stepper > .size__row, .stepper > .sizebox__in { flex: 1 1 auto; min-width: 0; }
.stepper > input { text-align: center; font-weight: 700; }
.stepper__btn {
  flex: none; display: grid; place-items: center; width: 50px; min-height: 50px; padding: 0; border-radius: var(--r-sm);
  border: 1.5px solid var(--pitch); background: var(--white); color: var(--pitch); cursor: pointer;
  font: 700 1.75rem/1 var(--font); touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.stepper__btn:hover { background: var(--mint); }
.stepper__btn:active { background: var(--mint-2); }
.stepper--big { max-width: 24rem; }
.stepper--big .size__row { max-width: none; }
.stepper--big .size__row input { text-align: center; padding-left: 40px; }
.stepper--big .stepper__btn { width: 56px; min-height: 56px; font-size: 2rem; border-width: 2px; }
.stepper--hero { flex: 1 1 15rem; }
.stepper--hero .stepper__btn { width: 54px; min-height: 54px; }
.stepper--hero .sizebox__in input { text-align: center; padding-left: 40px; }
.pack .stepper { margin-bottom: 12px; }
.pack .stepper input { margin-bottom: 0; }

/* order page: the instruction above the size step */
.leg__do { margin: 0 0 14px; padding: 10px 14px; background: var(--mint-2); border-left: 4px solid var(--grass); border-radius: 10px; font-weight: 700; line-height: 1.4; }
.leg[hidden] { display: none; }

/* postcode banner: change it in place */
.pcok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pcok__txt { flex: 1 1 14rem; margin: 0; }
.pcok__change { flex: none; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--pitch); border-radius: 12px; background: var(--white); color: var(--pitch); font: 700 1rem/1 var(--font); cursor: pointer; }
.pcok__change:hover { background: var(--mint); }
.pcok__change[hidden], .pcok__edit[hidden] { display: none; }
.pcok__edit { flex: 1 1 100%; margin-top: 8px; }
.pcok__edit label { display: block; font-weight: 600; margin-bottom: 6px; }
.pcok__edit .pc-result { margin-top: 8px; min-height: 0; }

/* the delivery address, inside "Your details" */
.addr { border: 0; border-top: 1px solid var(--line); padding: 14px 0 0; margin: 4px 0 12px; min-width: 0; }
.addr[hidden] { display: none; }
.addr legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-weight: 800; font-stretch: 110%; font-size: 1.15rem; }
.addr legend + * { clear: both; }
.total__parts .total__addr { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.total__addr span:last-child { text-align: right; color: #fff; }
.thanks__addr { margin: 0 0 12px; padding: 10px 14px; background: var(--mint); border-radius: 10px; }

/* the step to do next: a soft, slow glow that stops as soon as they start on it */
@keyframes tw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 179, 100, 0); }
  50% { box-shadow: 0 0 0 6px rgba(22, 179, 100, 0.22); }
}
.is-pulse { border-color: var(--grass) !important; animation: tw-pulse 2s ease-in-out infinite; }
.btn.is-pulse { border-color: transparent !important; }
@media (prefers-reduced-motion: reduce) {
  .is-pulse { animation: none; box-shadow: 0 0 0 4px rgba(22, 179, 100, 0.22); }
}
.tpl-order .addbar .btn { padding: 0 16px; font-size: 1rem; }
.tpl-order .addbar__text b { overflow: visible; }

/* ---------- calls to action: the main action plus a call link ---------- */
.ctarow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 22px; }
.ctarow__call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--pitch); text-decoration: none; white-space: nowrap; }
.ctarow__call svg { color: var(--leaf); flex: none; }
.ctarow__call:hover { color: var(--leaf); text-decoration: underline; }
.sec--dark .ctarow__call, .nudge .ctarow__call { color: #fff; }
.sec--dark .ctarow__call svg, .nudge .ctarow__call svg { color: var(--sun); }
.sec--dark .ctarow__call:hover, .nudge .ctarow__call:hover { color: var(--sun); }
.nudge--soft .ctarow__call { color: var(--pitch); }
.nudge--soft .ctarow__call svg { color: var(--leaf); }
.nudge__act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.faq .ctarow { margin-top: 18px; }
.prices__packs { margin-bottom: 28px; }
.prices__tbl { max-width: none; }
.prices__cta .ctarow { margin-top: 12px; }
.prices__cta > .small:first-child { margin-top: 4px; }
/* closing band on inner pages */
.sec.sec--cta { padding-bottom: 28px; }
.ctaband {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  background: var(--mint-2); border: 1px solid var(--line); border-left: 6px solid var(--grass); border-radius: var(--r-xl); padding: 18px 20px;
}
.ctaband__t { margin: 0; font-size: 1.0625rem; color: var(--muted); }
.ctaband__t b { display: block; color: var(--pitch); font-weight: 800; font-stretch: 112%; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.2; }
.ctaband .ctarow { margin-top: 0; }
@media (min-width: 48rem) { .ctaband { padding: 22px 28px; } }

/* ---------- desktop: compact ---------- */
@media (min-width: 48rem) {
  .sec { padding: 48px 0; }
  .sec--mint + .sec:not(.sec--mint):not(.sec--dark), .sec--dark + .sec:not(.sec--mint):not(.sec--dark) { padding-top: 48px; }
  .sec__head { margin-bottom: 22px; }
  /* balanced card rows, no lone card on its own row */
  .cardgrid--n2, .cardgrid--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cardgrid--n3, .cardgrid--n5, .cardgrid--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cardgrid--n5 > :last-child { grid-column: span 2; }
}
@media (min-width: 60rem) {
  .hero { padding: 30px 0 40px; }
  .hero__grid { gap: 48px; }
  .hero--home h1 { font-size: clamp(2.6rem, 3.8vw, 3.5rem); }
  .hero--home .hero__grid, .hero--buy .hero__grid { row-gap: 20px; }
  .hero--home .eyebrow { margin-bottom: 0.75rem; }
  .hero__intro { font-size: 1.125rem; }
  .hero .ticks { margin-top: 18px; }
  .hero--home .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hero--home .hero__media { align-self: stretch; }
  .hero--home .strip--hero { height: 100%; }
  .hero--home .strip--hero .strip__pic img { height: 100%; min-height: 300px; }
  .hero--home .hero__intro { max-width: 40rem; }
  .hero .ticks { gap: 8px 20px; font-size: 0.95rem; }
  .hero--page { padding: 30px 0 36px; }
  .hero--page h1 { font-size: clamp(2.3rem, 3.3vw, 2.9rem); }
  .hero--page .hero__media img { height: 300px; }
  .hero--plain { padding-bottom: 16px; }
  .hero--card .hero__media img { height: 260px; }
  /* delivery band: photo fills the full height beside the text */
  .band { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); grid-template-areas: "media txt" "media act" "pts pts"; grid-template-rows: auto 1fr auto; gap: 0 48px; align-items: stretch; }
  .band__txt { grid-area: txt; }
  .band__act { grid-area: act; }
  .band .points { grid-area: pts; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .band h2 { margin-bottom: 0.5rem; }
  .band .eyebrow { margin-bottom: 0.6rem; }
  .band__media { grid-area: media; position: relative; min-height: 240px; margin: 0; }
  .band__media img { position: absolute; inset: 0; height: 100%; }
  .band p { font-size: 1rem; }
  .band .btn { margin-top: 20px; }
  /* calculator: photo matches the form height */
  .sizer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto 1fr; grid-template-areas: "txt box" "media box"; padding: 28px 32px; gap: 0 36px; }
  .sizer--solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "box"; }
  .sizer__txt { grid-area: txt; }
  .sizer__box { grid-area: box; padding: 18px; align-self: start; }
  .sizer__media { grid-area: media; position: relative; min-height: 170px; margin-top: 4px; }
  .sizer__media img { position: absolute; inset: 0; height: 100%; min-height: 0; }
  .sizer__grid label { font-size: 0.9rem; }
  .nudge { padding: 28px 36px; }
  .stepgrid li { padding: 18px 20px; }
  .stepgrid li::before { width: 36px; height: 36px; margin-bottom: 10px; font-size: 1.05rem; }
}
@media (min-width: 64rem) {
  .sec { padding: 40px 0; }
  .sec + .sec:not(.sec--mint):not(.sec--dark) { padding-top: 8px; }
  .sec--mint + .sec:not(.sec--mint):not(.sec--dark), .sec--dark + .sec:not(.sec--mint):not(.sec--dark) { padding-top: 40px; }
  main > .sec:last-child { padding-bottom: 48px; }
  main > .sec--line:last-child { padding-bottom: 36px; }
  .sec--line { padding-bottom: 28px; }
  h2 { font-size: clamp(1.75rem, 2.3vw, 2.15rem); }
  .nudge h2 { font-size: clamp(1.5rem, 2vw, 1.9rem); }
  .sec__head { margin-bottom: 18px; }
  .sec__head p { margin-top: 6px; }
  .card { padding: 18px 20px; }
  .card__go { padding-top: 10px; }
  .cardgrid--n4, .cardgrid--n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cardgrid--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cardgrid--n5 > :last-child { grid-column: auto; }
  .tickgrid li { padding: 16px 18px; }
  .tickgrid span:not(.tickgrid__tick) { font-size: 0.95rem; }
  /* "from fresh rolls to a finished lawn": heading beside a shorter photo band */
  .outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 40px; align-items: center; }
  .outcome .sec__head { flex-direction: column; align-items: flex-start; margin: 0; gap: 8px; }
  .outcome .strip--outcome .strip__pic img { height: 230px; }
  /* prices: the table beside its text */
  .prices:not(.prices--nobands) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 56px; grid-template-areas: "head tbl" "copy tbl" "cta tbl"; grid-template-rows: auto auto 1fr; }
  .prices--packs:not(.prices--nobands) { grid-template-areas: "head head" "packs packs" "copy tbl" "cta tbl"; grid-template-rows: auto auto auto 1fr; }
  .prices__head { grid-area: head; }
  .prices__packs { grid-area: packs; }
  .prices__copy { grid-area: copy; }
  .prices__tbl { grid-area: tbl; align-self: start; }
  .prices__cta { grid-area: cta; }
  .prices .tbl th, .prices .tbl td { padding: 12px 18px; }
  .pack__price { font-size: 2rem; }
  .foot__in { padding-top: 40px; padding-bottom: 24px; }
  .foot__base { margin-top: 24px; }
  /* footer: shorter link rows with a mouse, Help in two columns */
  .foot__top { grid-template-columns: 1.3fr 0.9fr 1.6fr 1.2fr; }
  .foot li a, .foot li button { min-height: 34px; }
  .foot nav[aria-label="Help"] ul { columns: 2; column-gap: 24px; }
  .card p { font-size: 0.95rem; }
  .qa summary { min-height: 48px; padding: 8px 0; }
  .qa { gap: 8px 16px; }
  .outcome .strip--outcome .strip__pic img { height: 190px; }
  .sec__head p { max-width: 52rem; }
  .card { padding: 16px 18px; }
  .band p { margin-bottom: 0.7rem; }
  .pack__text { margin-top: 8px; }
  .pack__rate { margin: 4px 0 12px; }
  .bandnote { margin-top: 16px; }
  .sec { padding: 32px 0; }
  .sec--mint + .sec:not(.sec--mint):not(.sec--dark), .sec--dark + .sec:not(.sec--mint):not(.sec--dark) { padding-top: 32px; }
  main > .sec:last-child { padding-bottom: 40px; }
  main > .sec--line:last-child { padding-bottom: 28px; }
  .pack__covers { font-size: 0.95rem; }
  .pack .stepper { margin-bottom: 8px; }
  .pack label { margin-bottom: 4px; }
  .foot__top { gap: 24px 40px; }
  /* order page: the product panel rides alongside the form instead of sitting on top of it */
  .basket:has(> .prod) { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: 40px; align-items: start; }
  .basket:has(> .prod) > * { grid-column: 1; }
  .basket:has(> .prod) > .prod { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 16px; grid-template-columns: minmax(0, 1fr); margin: 0; }
  .basket:has(> .prod) .prod__pics img { height: 140px; }
  .sec--line { padding: 0 0 24px; }
  .line { padding-top: 14px; }
  /* home hero: words and photos side by side, then the buying row across the full width */
  .hero--home .hero__grid { grid-template-areas: "text media" "more more"; grid-template-rows: auto auto; row-gap: 24px; }
  .hero--home .hero__text { align-self: center; }
  .hero--home .strip--hero .strip__pic img { min-height: 260px; }
  .hero--home .hero__more {
    display: grid; grid-template-columns: minmax(0, 31rem) minmax(0, 1fr); grid-template-areas: "size pickh" "size picks" "ticks ticks";
    grid-template-rows: auto 1fr auto; column-gap: 32px; align-items: end;
    padding-top: 24px; border-top: 1px solid var(--line);
  }
  .hero--home .sizebox { grid-area: size; align-self: stretch; }
  .hero--home .picks__h { grid-area: pickh; margin: 0 0 8px; }
  .hero--home .picks { grid-area: picks; max-width: none; }
  .hero--home .ticks { grid-area: ticks; gap: 8px 28px; margin: 16px 0 0; }
}

/* ---------- order page, step 1: compact ---------- */
/* size already chosen: one line and a Change button */
.sizesum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; padding: 10px 12px 10px 14px; background: var(--mint-2); border: 1.5px solid var(--grass); border-radius: var(--r-md); }
.sizesum[hidden], .sizeopen[hidden] { display: none; }
.sizesum__txt { flex: 1 1 10rem; margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.sizesum__txt b { font-weight: 800; font-stretch: 108%; }
.sizesum__change { flex: none; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--pitch); border-radius: 12px; background: var(--white); color: var(--pitch); font: 700 1rem/1 var(--font); cursor: pointer; }
.sizesum__change:hover { background: var(--mint); }
.is-sized [data-part="pack"] { padding-bottom: 6px; }
.is-sized [data-part="pack"] legend { margin-bottom: 10px; font-size: 1.15rem; }
.is-sized [data-part="pack"] .leg__n { width: 30px; height: 30px; font-size: 0.95rem; }

/* nothing chosen yet: the m² box first, length × width on one row, packs as small chips */
.leg__do { margin-bottom: 12px; padding: 8px 12px; font-weight: 600; font-size: 0.975rem; }
.stepper--big { max-width: 20rem; }
.stepper--big .stepper__btn { width: 50px; min-height: 52px; font-size: 1.75rem; }
.size__row input { min-height: 52px; font-size: 1.3rem; }
.size__rate { margin: 8px 0 2px; font-size: 0.975rem; }
.calc { margin: 8px 0 4px; }
.calc summary { min-height: 44px; padding: 2px 12px; font-size: 0.975rem; }
.calc summary .opt { margin-left: 6px; font-size: 0.9rem; }
.calc__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 6px; align-items: end; padding: 10px 12px 0; max-width: 26rem; }
.calc__grid .f { margin-bottom: 8px; }
.calc__grid label { font-size: 0.875rem; margin-bottom: 4px; }
.calc__x { align-self: end; padding-bottom: 18px; font-weight: 700; color: var(--muted); }
.calc .small { padding: 0 12px 10px; font-size: 0.9rem; }
.stepper--sm { gap: 4px; }
.stepper--sm .stepper__btn { width: 34px; min-height: 44px; font-size: 1.35rem; border-width: 1.5px; border-radius: 10px; }
.stepper--sm > input { min-height: 44px; padding: 0 4px; font-size: 1rem; }
.leg__sub { margin: 12px 0 6px; font-size: 0.95rem; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; max-width: 30rem; }
.packcard { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; min-height: 44px; padding: 7px 8px; border-radius: 12px; text-align: center; }
.packcard:has(input:checked) { padding: 6.5px 7.5px; }
.packcard:has(input:checked)::after { top: -7px; right: -7px; width: 18px; height: 18px; }
.packcard__num { font-size: 1.15rem; }
.packcard__num small { font-size: 0.75em; }
.packcard__name { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.packcard__price { font-size: 0.875rem; }
@media (max-width: 29.99rem) {
  .packcard { padding: 6px; } .packcard:has(input:checked) { padding: 5.5px; }
  .packcard__num { font-size: 1.1rem; } .packcard__name { font-size: inherit; }
}
@media (min-width: 40rem) {
  .packs { display: flex; flex-wrap: wrap; max-width: none; }
  .packcard { flex: 0 1 auto; padding: 7px 14px; } .packcard:has(input:checked) { padding: 6.5px 13.5px; }
  .packcard__name { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; font-size: 0.875rem; font-weight: 600; }
}

/* the date hint: a second, quieter line */
.date-hint__more { display: block; margin-top: 2px; font-size: 0.9rem; }

/* ---------- turf laying quote form: compact ---------- */
.qcard { padding: 16px 14px 6px; }
.qcard__h { font-size: clamp(1.35rem, 5.6vw, 1.75rem); margin-bottom: 4px; }
.qcard__intro { font-size: 0.95rem; line-height: 1.45; }
.qcard__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; margin-top: 10px; }
@media (max-width: 19.99rem) { .qcard__grid { grid-template-columns: minmax(0, 1fr); } }
.qcard .f { margin-bottom: 8px; }
.qcard .f > label { font-size: 0.875rem; line-height: 1.25; margin-bottom: 4px; }
.qcard .f > label .opt { font-size: 0.8125rem; }
.qcard input[type="text"], .qcard input[type="tel"], .qcard input[type="email"], .qcard input[type="date"] { min-height: 44px; padding: 0 10px; font-size: 1rem; border-radius: 10px; }
.qcard textarea { min-height: 64px; padding: 8px 10px; font-size: 1rem; border-radius: 10px; }
.qcard .f > label.check { min-height: 36px; padding: 4px 0; font-size: 0.95rem; }
.qcard .f > label.check--consent { font-size: 0.8125rem; line-height: 1.4; padding: 2px 0; }
.qcard .check--consent input { margin-top: 0; }
.qcard__note { font-size: 0.8125rem; line-height: 1.4; margin: 0 0 8px; }
.qcard .btn--go { min-height: 52px; font-size: 1.0625rem; margin: 2px 0 4px; }
.qcard__foot { margin-top: 0; }
@media (min-width: 40rem) {
  .qcard { padding: 20px 22px 10px; }
  .qcard__grid { gap: 0 14px; }
}
@media (min-width: 60rem) {
  .qcard__h { font-size: 1.75rem; }
}

/* ---------- calculator block: length and width side by side on phones too ---------- */
.sizer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.sizer__grid .f { margin-bottom: 10px; }
.sizer__grid label { font-size: 0.875rem; line-height: 1.25; margin-bottom: 4px; }
.sizer__grid .stepper { gap: 4px; }
.sizer__grid .stepper__btn { width: 36px; min-height: 44px; font-size: 1.4rem; border-radius: 10px; }
.sizer__grid .stepper > input { min-height: 44px; padding: 0 4px; font-size: 1rem; }
@media (max-width: 19.99rem) { .sizer__grid { grid-template-columns: minmax(0, 1fr); } }
.sizesum, .sizeopen { clear: both; }
/* no empty gap under the postcode box until there's a result to show */
.leg .pc-result { margin-top: 8px; min-height: 0; }
.leg .pc-result:empty { margin: 0; }
.qcard .f:has(> label.check:not(.check--consent)) { margin-bottom: 2px; }
/* the − / + buttons do the stepping: no tiny browser spinners inside the boxes */
.stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.stepper input[type="number"]::-webkit-inner-spin-button, .stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- sales pages with the buying row in the hero (area pages, /turf-for/ guides) ---------- */
.hero__call { margin: 12px 0 0; font-size: 0.975rem; color: var(--muted); }
.hero__call a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0; padding: 0 2px; font-weight: 700; color: var(--pitch); }
.hero__call svg { color: var(--leaf); }
@media (max-width: 47.99rem) {
  /* phones: H1, a short line, the size box and the packs all on the first screen */
  .hero--buy { padding-top: 14px; padding-bottom: 28px; }
  .hero--buy .crumbs { margin-bottom: 6px; }
  .hero--buy h1 { font-size: clamp(1.8rem, 7.4vw, 2.15rem); margin-bottom: 8px; }
  .hero--buy .hero__intro { font-size: 1.0625rem; line-height: 1.45; margin-bottom: 0; }
  .hero--buy .hero__grid { gap: 16px; }
  .hero--buy .sizebox { padding: 14px; }
  .hero--buy .sizebox > label { margin-bottom: 8px; }
  .hero--buy .picks__h { margin-top: 12px; }
}

/* header: keep the menu, phone and buttons on one line on desktop (Oct 2026 menu order) */
.iconbtn, .top__shop { white-space: nowrap; }
@media (min-width: 64rem) {
  .top__in { gap: 12px 20px; }
  .top__nav ul { flex-wrap: nowrap; gap: 4px 18px; }
  .top__nav a { font-size: .95rem; white-space: nowrap; }
}
@media (min-width: 64rem) and (max-width: 87rem) { .top__tools .iconbtn__txt { display: none; } }

/* One-page order flow (generator/partials/_orderflow.html + generator/js/orderflow.js).
   Appended to a theme's CSS by the generator with .tw replaced by the theme's own prefix (the
   "orderflow-prefix" comment in its theme.css). Colours, fonts and shapes come from the --of-* variables the
   theme sets, so each site keeps its own look. Phone first: big targets, one step open at a time. */
.tw-wrap { display: grid; gap: 20px; align-items: start; }
.tw { min-width: 0; --of-gap: 14px; }
.tw-title { margin: 0 0 12px; font: var(--of-title-weight, 800) clamp(1.3rem, 4.6vw, 1.7rem)/1.15 var(--of-head); color: var(--of-ink); letter-spacing: -.01em; }
.tw-nojs { padding: 12px 14px; border-radius: var(--of-r); background: var(--of-tint); }
.tw-form { display: grid; gap: var(--of-gap); }

/* step rail: sticky under the header on phones */
.tw-rail { list-style: none; margin: 0 0 var(--of-gap); padding: 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; position: sticky; top: var(--of-sticky, 60px); z-index: 5; background: var(--of-rail-bg, var(--of-card)); border: 1px solid var(--of-line); border-radius: var(--of-r); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.tw-rail__b { width: 100%; appearance: none; border: 0; background: none; padding: 6px 2px; display: grid; justify-items: center; gap: 3px; font: inherit; color: var(--of-muted); cursor: pointer; border-radius: calc(var(--of-r) - 4px); }
.tw-rail__b:disabled { cursor: default; opacity: .55; }
.tw-rail__n { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--of-num-r, 50%); border: 1.5px solid currentColor; font: 800 .8rem/1 var(--of-body); }
.tw-rail__t { font-size: .72rem; font-weight: 700; line-height: 1.1; text-align: center; }
.tw-rail__i.is-done .tw-rail__b { color: var(--of-ink); }
.tw-rail__i.is-done .tw-rail__n { background: var(--of-tint); border-color: var(--of-accent-d); color: var(--of-accent-d); }
.tw-rail__i.is-active .tw-rail__b { color: var(--of-ink); background: var(--of-tint); }
.tw-rail__i.is-active .tw-rail__n { background: var(--of-accent); border-color: var(--of-accent); color: var(--of-on-accent); }

/* steps */
.tw-step { background: var(--of-card); border: var(--of-border, 1.5px) solid var(--of-line); border-radius: var(--of-r-l); padding: 14px; scroll-margin-top: var(--of-scroll, 140px); transition: border-color .2s, box-shadow .2s; }
.tw-step.is-active { border-color: var(--of-active, var(--of-ink)); box-shadow: var(--of-shadow, 0 10px 30px rgba(0, 0, 0, .08)); }
.tw-step.is-in { animation: tw-in .35s ease both; }
.tw-step.is-shake { animation: tw-shake .35s ease; }
@keyframes tw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tw-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .tw-step.is-in, .tw-step.is-shake { animation: none; } }
.tw-step__head { display: flex; align-items: center; gap: 10px; }
.tw-step__n { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--of-num-r, 50%); background: var(--of-ink); color: var(--of-on-ink, #fff); font: 800 .9rem/1 var(--of-body); }
.tw-step.is-active .tw-step__n { background: var(--of-accent); color: var(--of-on-accent); }
.tw-step.is-done .tw-step__n { background: var(--of-tint); color: var(--of-accent-d); }
.tw-step__ttl { flex: 1; min-width: 0; }
.tw-step__ttl h2 { margin: 0; font: var(--of-title-weight, 800) 1.12rem/1.2 var(--of-head); color: var(--of-ink); letter-spacing: -.01em; }
.tw-step__sum { margin: 2px 0 0; font-size: .9rem; color: var(--of-muted); overflow-wrap: anywhere; }
.tw-step__sum:empty { display: none; }
.tw-step__edit { flex: none; appearance: none; border: 1.5px solid var(--of-line); background: var(--of-card); color: var(--of-ink); border-radius: var(--of-btn-r, 999px); padding: 8px 14px; min-height: 40px; font: 700 .88rem/1 var(--of-body); cursor: pointer; }
.tw-step__edit:hover { border-color: var(--of-ink); }
.tw-step__body { margin-top: 14px; display: grid; gap: 12px; }
.tw-step__body > * { margin: 0; }
.tw-lab { display: block; margin: 0 0 6px; font-weight: 700; font-size: .92rem; color: var(--of-ink); }
.tw-go { margin: 4px 0 0; }
.tw-go button { width: 100%; min-height: 54px; font-size: 1.05rem; }
.tw-go button:disabled { opacity: .45; cursor: not-allowed; }

/* how: pack / m² / measure */
.tw-how { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 4px; border-radius: var(--of-r); background: var(--of-tint); }
.tw-how__o { position: relative; display: block; }
.tw-how__o input, .tw-pack input, .tw-way input, .tw-shape input, .tw-extra input, .tw-day input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tw-how__o span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 6px; border-radius: calc(var(--of-r) - 4px); font-weight: 700; font-size: .9rem; text-align: center; line-height: 1.15; color: var(--of-ink); cursor: pointer; }
.tw-how__o span svg { flex: none; }
.tw-how__o input:checked + span { background: var(--of-card); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); color: var(--of-accent-d); }
.tw-how__o input:focus-visible + span, .tw-pack input:focus-visible + span, .tw-way input:focus-visible + span, .tw-day input:focus-visible + span, .tw-shape input:focus-visible + span, .tw-extra input:focus-visible + span { outline: 3px solid var(--of-accent); outline-offset: 2px; }
.tw-packs { display: grid; gap: 8px; }
.tw-pack span { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border: 1.5px solid var(--of-line); border-radius: var(--of-r); background: var(--of-card); cursor: pointer; }
.tw-pack small { color: var(--of-muted); font-weight: 600; }
.tw-pack input:checked + span { border-color: var(--of-ink); background: var(--of-tint); box-shadow: inset 0 0 0 1px var(--of-ink); }

/* − / + number boxes */
.tw-bump { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: stretch; border: 1.5px solid var(--of-line); border-radius: var(--of-r); background: var(--of-card); overflow: hidden; max-width: 320px; }
.tw-bump:focus-within { border-color: var(--of-ink); box-shadow: 0 0 0 3px var(--of-tint); }
.tw-bump__b { appearance: none; border: 0; background: var(--of-tint); color: var(--of-ink); display: grid; place-items: center; cursor: pointer; min-height: 52px; }
.tw-bump__b:active { background: var(--of-accent); color: var(--of-on-accent); }
.tw-bump input { width: 100%; min-width: 0; border: 0; text-align: center; font: 800 1.35rem/1 var(--of-body); color: var(--of-ink); background: transparent; padding: 8px 4px; -moz-appearance: textfield; appearance: textfield; }
.tw-bump input::-webkit-outer-spin-button, .tw-bump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tw-bump input:focus { outline: none; }
.tw-bump--sm { grid-template-columns: 42px minmax(0, 1fr) 42px; }
.tw-bump--sm .tw-bump__b { min-height: 44px; }
.tw-bump--sm input { font-size: 1.08rem; }

/* measuring */
.tw-pieces { display: grid; gap: 10px; }
.tw-piece { border: 1.5px dashed var(--of-line); border-radius: var(--of-r); padding: 12px; display: grid; gap: 10px; }
.tw-piece.is-in { animation: tw-in .3s ease both; }
.tw-piece__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tw-piece__n { font-weight: 800; color: var(--of-ink); margin-right: auto; }
.tw-piece__del { appearance: none; border: 0; background: var(--of-tint); color: var(--of-ink); width: 36px; height: 36px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; }
.tw-shape { display: flex; gap: 4px; flex-wrap: wrap; }
.tw-shape label { position: relative; }
.tw-shape span, .tw-extra__o span { display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 6px 10px; border: 1.5px solid var(--of-line); border-radius: var(--of-btn-r, 999px); font-size: .85rem; font-weight: 700; cursor: pointer; background: var(--of-card); }
.tw-shape input:checked + span, .tw-extra input:checked + span { border-color: var(--of-ink); background: var(--of-tint); color: var(--of-accent-d); }
.tw-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tw-dim__lab { display: block; font-size: .82rem; font-weight: 700; color: var(--of-muted); margin-bottom: 4px; }
.tw-piece__area { margin: 0; font-weight: 700; color: var(--of-accent-d); }
.tw-piece__area:empty { display: none; }
.tw-extra { border: 0; padding: 0; margin: 0; min-width: 0; }
.tw-extra legend { padding: 0; margin-bottom: 6px; font-weight: 700; font-size: .92rem; color: var(--of-ink); }
.tw-extra__o { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-extra__o label { position: relative; }
.tw-extra__o small { font-weight: 500; color: var(--of-muted); }
.tw-out { padding: 14px; border-radius: var(--of-r); background: var(--of-out-bg, var(--of-tint)); color: var(--of-out-ink, var(--of-ink)); }
.tw-out__big { margin: 0; font: 800 1.9rem/1.05 var(--of-head); letter-spacing: -.02em; }
.tw-out__small { margin: 4px 0 0; font-size: .92rem; }

/* your turf */
.tw-roll { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tw-roll__pic img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: var(--of-r); }
.tw-roll__name { margin: 0; font: 800 1.08rem/1.2 var(--of-head); color: var(--of-ink); }
.tw-roll__each { margin: 2px 0 10px; color: var(--of-muted); }
.tw-roll__each b { color: var(--of-ink); font-size: 1.1rem; }
.tw-roll__cover { margin: 6px 0 0; font-size: .9rem; color: var(--of-muted); }
.tw-nudge { padding: 10px 12px; border-radius: var(--of-r); background: var(--of-nudge-bg, #fff6db); color: var(--of-nudge-ink, #5c4400); font-size: .92rem; }
.tw-lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; font-size: .95rem; }
.tw-lines:empty { display: none; }
.tw-lines dt { margin: 0; color: var(--of-muted); }
.tw-lines dd { margin: 0; font-weight: 700; text-align: right; color: var(--of-ink); }
.tw-lines .is-total { padding-top: 8px; border-top: 1.5px solid var(--of-line); font: 800 1.2rem/1.2 var(--of-head); color: var(--of-ink); }

/* collection or delivery */
.tw-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tw-way { position: relative; }
.tw-way span { display: grid; justify-items: start; gap: 4px; min-height: 108px; padding: 14px; border: 1.5px solid var(--of-line); border-radius: var(--of-r); background: var(--of-card); cursor: pointer; color: var(--of-ink); }
.tw-way span svg { color: var(--of-accent-d); }
.tw-way b { font: 800 1.02rem/1.2 var(--of-head); }
.tw-way small { font-size: .84rem; color: var(--of-muted); line-height: 1.3; }
.tw-way input:checked + span { border-color: var(--of-ink); background: var(--of-tint); box-shadow: inset 0 0 0 1px var(--of-ink); }
.tw-way input:disabled + span { opacity: .45; cursor: not-allowed; }
.tw-pc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.tw-pc__row input { min-width: 0; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--of-line); border-radius: var(--of-r); font: 700 1.1rem/1 var(--of-body); text-transform: uppercase; letter-spacing: .04em; background: var(--of-card); color: var(--of-ink); }
.tw-pc__row input:focus { outline: none; border-color: var(--of-ink); box-shadow: 0 0 0 3px var(--of-tint); }
.tw-pc__row button { min-height: 52px; }
.tw-pc__out { margin: 8px 0 0; font-size: .95rem; }
.tw-pc__out:empty { display: none; }
.tw-pc__out[data-state="yes"] { padding: 10px 12px; border-radius: var(--of-r); background: var(--of-tint); color: var(--of-ink); }
.tw-pc__out[data-state="no"] { padding: 10px 12px; border-radius: var(--of-r); background: #fff4f2; color: #7c1d16; }

/* days */
.tw-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tw-month { flex: none; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--of-muted); }
.tw-day { position: relative; flex: none; scroll-snap-align: start; }
.tw-day span { display: grid; justify-items: center; gap: 2px; width: 64px; padding: 10px 4px; border: 1.5px solid var(--of-line); border-radius: var(--of-r); background: var(--of-card); cursor: pointer; color: var(--of-ink); }
.tw-day small { font-size: .74rem; font-weight: 700; color: var(--of-muted); text-transform: uppercase; }
.tw-day b { font: 800 1.35rem/1 var(--of-head); }
.tw-day input:checked + span { background: var(--of-accent); border-color: var(--of-accent); color: var(--of-on-accent); }
.tw-day input:checked + span small { color: inherit; }

/* details */
.tw-grid { display: grid; gap: 12px; }
.tw-addr { border: 1.5px solid var(--of-line); border-radius: var(--of-r); padding: 12px; margin: 0; min-width: 0; display: grid; gap: 10px; }
.tw-addr legend { padding: 0 6px; font-weight: 800; color: var(--of-ink); }
.tw-agree { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: var(--of-r); background: var(--of-tint); font-size: .92rem; }
.tw-agree input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--of-accent-d); }
.tw-secure { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.tw-msg { padding: 12px 14px; border-radius: var(--of-r); background: var(--of-tint); color: var(--of-ink); }

/* order tray (bigger screens) */
.tw-tray { display: none; }
@media (min-width: 640px) {
  .tw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-wide { grid-column: 1 / -1; }
  .tw-roll { grid-template-columns: 180px minmax(0, 1fr); align-items: start; }
  .tw-roll__pic img { height: 160px; }
  .tw-packs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .tw-step { padding: 20px; }
  .tw-rail__t { font-size: .8rem; }
}
@media (min-width: 980px) {
  .tw-wrap--tray { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
  .tw-tray { display: block; position: sticky; top: calc(var(--of-sticky, 60px) + 16px); padding: 18px; border-radius: var(--of-r-l); background: var(--of-tray-bg, var(--of-card)); color: var(--of-tray-ink, var(--of-ink)); border: 1.5px solid var(--of-line); }
  .tw-tray__h { margin: 0 0 10px; font: 800 1.1rem/1.2 var(--of-head); }
  .tw-tray__list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; margin: 0; font-size: .92rem; }
  .tw-tray__list dt { margin: 0; opacity: .8; }
  .tw-tray__list dd { margin: 0; font-weight: 700; text-align: right; }
  .tw-tray__total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 0; padding-top: 10px; border-top: 1.5px solid var(--of-line); }
  .tw-tray__total b { font: 800 1.5rem/1 var(--of-head); }
  .tw-tray__ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
  .tw-tray__ticks li { display: flex; gap: 6px; align-items: flex-start; }
}

/* ==== one-page order flow: this brand's look (generator/css/orderflow.css supplies the layout, prefix .tw) ==== */
.tw-wrap { --of-ink: var(--pitch); --of-muted: var(--muted); --of-line: var(--line); --of-card: var(--white); --of-tint: var(--mint);
  --of-accent: var(--grass); --of-accent-d: var(--leaf); --of-on-accent: var(--btn-ink); --of-on-ink: #fff;
  --of-head: var(--font); --of-body: var(--font); --of-r: var(--r-sm); --of-r-l: var(--r-lg); --of-num-r: 6px; --of-btn-r: 999px;
  --of-sticky: 0px; --of-scroll: 96px; --of-shadow: var(--shadow); --of-active: var(--pitch); --of-border: 2px;
  --of-out-bg: var(--pitch); --of-out-ink: #fff; --of-tray-bg: var(--pitch); --of-tray-ink: #fff; --of-rail-bg: var(--pitch);
  --of-nudge-bg: var(--sun); --of-nudge-ink: var(--pitch); }
/* bright grass on deep pitch, a dab of sun, stretched Archivo */
.tw-step__ttl h2, .tw-out__big, .tw-tray__h, .tw-way b { font-stretch: 115%; font-weight: 800; }
.tw-rail__b { color: var(--on-dark); }
.tw-rail__i.is-active .tw-rail__b, .tw-rail__i.is-done .tw-rail__b { color: #fff; background: rgba(255, 255, 255, .08); }
.tw-rail__i.is-done .tw-rail__n { background: var(--sun); border-color: var(--sun); color: var(--pitch); }
.tw-step__n { background: var(--sun); color: var(--pitch); }
.tw-step.is-active { box-shadow: 6px 6px 0 var(--grass); }
.tw-pack span { border-width: 2px; }
.tw-pack input:checked + span { background: var(--grass); border-color: var(--pitch); color: var(--btn-ink); box-shadow: none; }
.tw-pack input:checked + span small { color: var(--btn-ink); }
.tw-out__big { color: var(--sun); }
.tw-tray__total b { color: var(--sun); }
.tw-tray__ticks svg { color: var(--grass); }