/* Palaniyappa Print-N-Pack - site styles.
   Colours come from tokens.css (resolved at step 1b); nothing here is picked by eye.
   The ground is white; steel (--colour-steel) is the only dark, used for the three tag bands
   and the footer; the feather tint marks the change between white sections. */

/* ---------- Fonts (self-hosted, Latin subset; Barlow has no rupee glyph, so a one-glyph
   Noto Sans face is named next in every stack and supplies U+20B9 and nothing else) ---------- */
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Rupee Sans"; src: url("../fonts/NotoSans-rupee-400.woff2") format("woff2"); font-weight: 400; unicode-range: U+20B9; font-display: swap; }
@font-face { font-family: "Rupee Sans"; src: url("../fonts/NotoSans-rupee-500.woff2") format("woff2"); font-weight: 500 600; unicode-range: U+20B9; font-display: swap; }
@font-face { font-family: "Rupee Sans Condensed"; src: url("../fonts/NotoSans-rupee-cond-600.woff2") format("woff2"); font-weight: 600; unicode-range: U+20B9; font-display: swap; }
@font-face { font-family: "Rupee Sans Condensed"; src: url("../fonts/NotoSans-rupee-cond-700.woff2") format("woff2"); font-weight: 700; unicode-range: U+20B9; font-display: swap; }

:root {
  --font-body: "Barlow", "Rupee Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Rupee Sans Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --maxw: 75rem;                       /* 1200px */
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 96px;                    /* brand.json logoMetrics.headerHeight */
  --logo-h: 64px;                      /* logoMetrics.displayHeight */
  --space-section: clamp(56px, 8vw, 112px);
  --radius: 3px;
  --measure: 38em;
}
@media (max-width: 767px) {
  :root { --header-h: 68px; --logo-h: 44px; }   /* logoMetrics.displayHeightMobile */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--colour-bg);
  color: var(--colour-text);
  font-family: var(--font-body);
  font-size: 1.125rem;                 /* 18px */
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--colour-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* hover thickens the underline as well as shifting the colour, so a link on the tint (where the
   link colour already is the hover colour) still answers the pointer */
a:hover { color: var(--colour-primary-hover); text-decoration-thickness: 2px; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
strong { font-weight: 500; color: var(--colour-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--colour-ink);
  margin: 0 0 0.4em;
  text-wrap: balance;
  font-kerning: normal;
}
h1 { font-size: clamp(2.5rem, 1.4rem + 3.1vw, 4.25rem); line-height: 1.04; letter-spacing: -0.01em; font-weight: 700; }
h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1.08; letter-spacing: -0.005em; color: var(--colour-primary); }
h3 { font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.85rem); line-height: 1.15; }
h4 { font-size: 1.25rem; line-height: 1.2; }
[class*="__title"], [class*="__name"], [class*="__label"], [class*="__value"] { line-height: 1.25; }

:focus-visible { outline: 3px solid var(--colour-primary); outline-offset: 3px; }
.on-steel :focus-visible { outline-color: var(--colour-focus-on-steel); }

.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section--tint { background: var(--colour-tint); }
/* Container link rules never match a button: :where(:not(.btn)) adds no specificity, so every other
   cascade relationship is unchanged, and a button keeps its own colours in any container. */
.section--tint a:where(:not(.btn)) { color: var(--colour-link-on-tint); }
.section--tight { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.measure { max-width: var(--measure); }
.lead { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.5; color: var(--colour-ink); font-weight: 400; text-wrap: pretty; }
.num { font-variant-numeric: lining-nums tabular-nums; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--colour-action); color: var(--colour-on-action); padding: 12px 18px; font-weight: 500; }
.skip:focus { left: 12px; top: 12px; }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-primary);
  margin: 0 0 0.9rem;
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px;
  padding: 0.6rem 1.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.25, 1, .5, 1), color .15s cubic-bezier(.25, 1, .5, 1), border-color .15s cubic-bezier(.25, 1, .5, 1), transform .12s cubic-bezier(.25, 1, .5, 1);
}
/* a press sinks the control by a pixel: every button, the form's Send, the chips and the dock */
.btn:active, .cf-submit:active, .jump a:active, .menu-toggle:active, .dock-action:active { transform: translateY(1px); }
/* Button colours are set at .btn.btn--* (0,2,0), above any "container a" rule (0,1,1), and restated
   for focus-visible and active, so ink #15140f sits on the yellow in every state and every container
   (13.33 on #ffd900, 11.69 on hover #f2cb00). */
.btn.btn--action { background: var(--colour-action); color: var(--colour-on-action); border-color: var(--colour-action-edge); }
.btn.btn--action:is(:focus-visible, :active) { background: var(--colour-action); color: var(--colour-on-action); }
.btn.btn--action:hover { background: var(--colour-action-hover); color: var(--colour-on-action); }
/* Secondary: an ink outline. Yellow is only ever Request a quote. */
.btn.btn--outline { background: transparent; color: var(--colour-ink); border-color: var(--colour-ink); }
.btn.btn--outline:hover { background: var(--colour-tint); color: var(--colour-link-on-tint); border-color: var(--colour-link-on-tint); }
.on-steel .btn.btn--action { border-color: var(--colour-action); }
.on-steel .btn.btn--action:hover { border-color: var(--colour-action-hover); }
.text-link { font-weight: 500; white-space: nowrap; }
.on-steel .text-link, .on-steel a:not(.btn) { color: #fff; }
.on-steel a:not(.btn):hover { color: var(--colour-action); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 40; background: #fff; }
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--colour-ink); flex: 0 1 auto; }
.brand__mark { width: auto; height: var(--logo-h); flex: 0 0 auto; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.05; letter-spacing: 0.005em; color: var(--colour-ink); min-width: 0; }
.brand__name span { white-space: nowrap; }
.brand:hover .brand__name { color: var(--colour-primary); }

.nav { margin-left: auto; display: none; }
.nav__list { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__link, .nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 0 12px;
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 500;
  color: var(--colour-ink); text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.nav__link:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--colour-primary); }
.nav__link[aria-current="page"] { color: var(--colour-primary); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.nav__trigger svg { width: 12px; height: 12px; transition: transform .15s ease; }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__item--group { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 6px); left: -8px; min-width: 430px;
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(21,20,15,.06), 0 4px 10px rgba(21,20,15,.07), 0 14px 32px rgba(21,20,15,.10);
  padding: 10px; display: none;
}
.nav__panel.is-open { display: block; opacity: 1; transform: none; transition: opacity .16s cubic-bezier(.25, 1, .5, 1), transform .16s cubic-bezier(.25, 1, .5, 1); }
@starting-style { .nav__panel.is-open { opacity: 0; transform: translateY(-4px); } }
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel a { display: block; padding: 10px 14px; border-radius: 2px; text-decoration: none; }
.nav__panel a:where(:not(.btn)) { color: var(--colour-ink); }
.nav__panel a:where(:not(.btn)):hover, .nav__panel a:where(:not(.btn)):focus-visible { background: var(--colour-tint); }
.nav__panel a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; white-space: nowrap; }
.nav__panel-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; white-space: nowrap; }
.nav__panel-note { font-size: 0.95rem; color: var(--colour-text); white-space: nowrap; }
.nav__panel-all { border-top: 1px solid var(--colour-border); margin-top: 6px; padding-top: 6px; }
.nav__panel-all a { font-weight: 500; color: var(--colour-link); }   /* 4.75 on white */
/* on the tint the link teal is only 4.38, so hover and focus take the tint's own link colour (5.63) */
.nav__panel-all a:hover, .nav__panel-all a:focus-visible { color: var(--colour-link-on-tint); }

.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
.header-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; min-height: 48px; padding: 0 4px;
  color: var(--colour-ink); text-decoration: none; font-weight: 500; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.header-phone svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--colour-primary); }
.header-phone:hover { color: var(--colour-primary); }
.header-phone__num { display: none; }
.header-cta { display: none; }
.menu-toggle {
  flex: 0 0 auto; width: 48px; height: 48px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1.5px solid var(--colour-ink); border-radius: var(--radius); cursor: pointer; padding: 0;
  transition: border-color .15s cubic-bezier(.25, 1, .5, 1), transform .12s cubic-bezier(.25, 1, .5, 1);
}
.menu-toggle:hover { border-color: var(--colour-primary); }
.menu-toggle:hover span { background: var(--colour-primary); }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--colour-ink); transition: transform .15s ease, opacity .15s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { border-top: 1px solid var(--colour-border); background: #fff; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__inner { padding-top: 12px; padding-bottom: 24px; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu__group-label { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--colour-primary); padding: 12px 0 4px; }
.mobile-menu a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-weight: 500; border-bottom: 1px solid #ece8e2; }
.mobile-menu a:where(:not(.btn)) { color: var(--colour-ink); }
.mobile-menu a:not(.btn):hover { color: var(--colour-primary); }
.mobile-menu a:where(:not(.btn))[aria-current="page"] { color: var(--colour-primary); }
.mobile-menu .mobile-menu__families a { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.mobile-menu__cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; }
.mobile-menu__cta a { border-bottom: 0; justify-content: center; }
.mobile-menu__cta .header-phone { justify-content: center; border: 1.5px solid var(--colour-ink); border-radius: var(--radius); }

@media (min-width: 600px) {
  .header-cta { display: inline-flex; }
}
@media (min-width: 1180px) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }
  .header-actions { margin-left: 8px; }
}
@media (min-width: 1320px) {
  .header-phone__num { display: inline; }
  .header-phone { padding: 0 8px; }
}
@media (max-width: 767px) {
  .site-header__inner { gap: 10px; }
  .brand { gap: 10px; }
  .brand__name { font-size: 1.12rem; }
  .brand__name span { display: block; }
}

/* ---------- Steel bands (the signature move: photographs dissolve into the rebar grey) ---------- */
.on-steel { background: var(--colour-steel); color: var(--colour-on-steel); }
.on-steel h1, .on-steel h2, .on-steel h3 { color: #fff; }
.on-steel strong { color: #fff; }
.on-steel .eyebrow { color: var(--colour-action); }
.band { position: relative; overflow: hidden; }
.band__media img { display: block; }

/* Home hero and the TMT Bar Tags head. From 768px the photograph is a column that fills the band's
   full height, flush to its top and bleeding off the viewport's right edge; it dissolves into the
   steel only on its left (the re-render's own falloff, plus a short mask) and at its foot. The
   band's height is set by its text, never by the photograph, so no steel is stranded under the
   button. The column widens with the screen and stops at the source's 1024px, so the tags are
   never painted larger than the file. */
.hero__grid { position: relative; z-index: 1; }
.hero__text { padding-top: clamp(40px, 6vh, 88px); padding-bottom: clamp(40px, 6vh, 80px); }
.hero__text h1 { margin-bottom: 0.45em; }
.hero__sub { font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.3rem); line-height: 1.5; color: var(--colour-on-steel); max-width: 34em; margin-bottom: 1.6em; text-wrap: pretty; }
.hero__media { margin: 0; }
.hero__media img { width: 100%; height: auto; }

@media (min-width: 768px) {
  .hero { --pw: min(max(42vw, calc(50vw - 72px)), 1024px); }
  .hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: var(--pw); }
  .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%), linear-gradient(to top, transparent 0, #000 14%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, #000 6%), linear-gradient(to top, transparent 0, #000 14%);
            mask-composite: intersect; }
  /* text stops 32px short of the photograph's rect: nothing is ever set over the photo */
  .hero__text { max-width: min(38rem, calc(100vw - var(--pw) - max(var(--gutter), (100vw - var(--maxw)) / 2) - 32px)); }
}
/* Short screens (a 1280x600 laptop window): tighten the space around the words, never the H1's
   size, so the hero's own Request a quote is inside the first screen. */
@media (min-width: 768px) and (max-height: 700px) {
  .hero__text { padding-top: 24px; padding-bottom: 32px; }
  .hero .eyebrow { margin-bottom: 0.6rem; }
  .hero__text h1 { margin-bottom: 0.35em; }
  .hero__sub { margin-bottom: 1.2em; }
}
@media (max-width: 767px) {
  .hero__text { padding-bottom: 8px; }
  .hero__media img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% 42%;
    /* the photograph's top edge sits inside the band on a phone, so it fades into it */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
  }
  .hero--tmt .hero__media img { object-position: 60% 30%; }
}

.hero__types { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.hero__types h2 { font-size: 1.35rem; color: #fff; margin-bottom: 0.5em; }
.hero__types ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px 24px; }
.hero__types li { padding-left: 16px; position: relative; }
.hero__types li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 2px; background: var(--colour-action); }
@media (min-width: 1100px) { .hero__types ul { grid-template-columns: 1fr 1fr; } }

/* The stick-on band: its own layout family, a full-width steel band, never the hero's split again.
   A 3:1 strip of the stick-on photograph (images/stickon-strip.webp, the master's rows 300-812:
   coils and wraps, no wall, sky or floor) runs edge to edge, flush to the band's top. Its left
   columns are the re-render's own falloff into the steel; its foot dissolves into the steel through
   a mask (no scrim, no overlay), and the owner's lines sit on the steel below it, never over it.
   The strip is never painted wider than the file's 1536px: past that it centres, and its right edge
   dissolves too, so no straight image edge shows inside the band at any width. */
.stickon__media { margin: 0 auto; max-width: 1536px; }
.stickon__media img {
  width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
/* Past 1536px both side edges sit inside the band, so both dissolve: the left one only over the
   master's flat falloff columns, whose WebP encode is a level or two off the token and would
   otherwise show as a straight seam. */
@media (min-width: 1537px) {
  .stickon__media img {
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, #000 60%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-composite: intersect;
  }
}
/* Narrower screens keep the strip idea at a taller ratio, so the wraps stay legible; the crop comes
   off the steel falloff on the left, never off the wraps. */
@media (min-width: 768px) and (max-width: 1023px) { .stickon__media img { aspect-ratio: 5 / 2; object-position: 72% 50%; } }
@media (max-width: 767px) { .stickon__media img { aspect-ratio: 3 / 2; object-position: 64% 50%; } }

.stickon__text { padding-top: clamp(14px, 1.2vw, 18px); padding-bottom: clamp(56px, 7vw, 96px); }
.stickon__text h2 { margin-bottom: 0.35em; }
.stickon__cols { display: grid; gap: 16px 64px; align-items: start; }
.stickon__lead { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.12; color: #fff; margin: 0; max-width: 18em; text-wrap: balance; }
.stickon__body p { max-width: 32em; margin-bottom: 0.9em; }
@media (min-width: 900px) {
  /* the owner's two lines side by side under the heading, their first lines level */
  .stickon__cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .stickon__body { padding-top: 0.3em; }
}

/* ---------- Home: product range ---------- */
.range-head { margin-bottom: clamp(28px, 4vw, 48px); }
.range-feature { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: clamp(40px, 5vw, 72px); }
.range-feature__media img { width: 100%; max-width: 500px; }
.range-feature h3 { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); margin-bottom: 0.3em; }
.range-feature__group { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--colour-primary); margin: 0 0 0.6em; }
.range-feature p { max-width: 32em; }
.range-feature__lead { margin-bottom: 0.8em; }
@media (min-width: 900px) {
  .range-feature { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .range-feature__body { padding-top: 0; }
}
.tiles { display: grid; gap: 40px 28px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The tile's own "See all ..." link is stretched over the whole tile, so the product photograph and
   the name answer a click too; it stays the tile's only link and only tab stop. */
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.tile .text-link::after { content: ""; position: absolute; inset: 0; }
.tile h3 { transition: color .15s cubic-bezier(.25, 1, .5, 1); }
.tile:hover h3 { color: var(--colour-primary); }
.tile:hover .text-link { color: var(--colour-primary-hover); text-decoration-thickness: 2px; }
/* Side by side, every tile's picture sits in the same 4:3 box, the product contained in it on
   white and standing on the box's foot at its left edge, so titles and links line up across the
   row whatever the photograph's shape. */
.tile__media { position: relative; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 18px; }
.tile__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: left bottom; }
.tile__media--small img { width: min(100%, 250px); }
@media (max-width: 599px) {
  .tile__media { aspect-ratio: auto; }
  .tile__media img { position: static; width: auto; height: auto; max-width: 100%; max-height: 240px; }
  .tile__media--small img { max-width: min(100%, 250px); }
}
.tile h3 { font-size: 1.6rem; margin-bottom: 0.25em; }
.tile__group { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--colour-primary); margin: 0 0 0.4em; }
.tile p { font-size: 1.0625rem; margin-bottom: 0.8em; text-wrap: pretty; }
.tile .text-link { margin-top: auto; }

/* ---------- Splits ---------- */
.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--text-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.figure { margin: 0; }
.figure img { width: 100%; }
.figure figcaption { font-size: 0.95rem; color: var(--colour-text); margin-top: 10px; }
.section--tint .figure figcaption { color: var(--colour-text); }
.advantage__media img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 68%; max-width: 520px; }
.advantage__body h3 { font-size: 1.5rem; margin-top: 1.4em; }

/* ---------- Factsheet ---------- */
.facts-grid { display: grid; gap: 28px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0 32px; }
@media (min-width: 900px) { .facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts-grid div { border-top: 2px solid var(--colour-ink); padding-top: 12px; }
.facts-grid dt { font-size: 1rem; color: var(--colour-text); margin-bottom: 4px; }
.facts-grid dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.15rem); line-height: 1.1; color: var(--colour-ink); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
/* A registration number is read and copied as one string, so it never breaks; on a phone the two
   number rows take the full width, where a half-width cell is narrower than the GST number. */
.facts-grid__code dd { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 599px) { .facts-grid .facts-grid__code { grid-column: 1 / -1; } }

/* ---------- Quote band ---------- */
.quote { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .quote { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.reach { font-style: normal; }
.reach__person { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--colour-ink); margin: 0 0 0.2em; }
.reach__lines { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 4px; }
.reach__lines li { display: flex; gap: 12px; align-items: flex-start; }
.reach__lines svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 4px; color: var(--colour-primary); }
.section--tint .reach__lines svg { color: var(--colour-link-on-tint); }
.reach__lines a { font-weight: 500; }
.phone { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.form-card { background: #fff; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); }
.form-card h3 { font-size: 1.6rem; }

/* The generated contact form (build-contact-form.mjs) - styled in the direction */
.cf-form { gap: 1rem; }
.cf-field { gap: .35rem; margin: 0; }
.cf-label { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--colour-ink); }
.cf-input, .cf-textarea {
  background: #fff; color: var(--colour-ink);
  border: 1.5px solid var(--colour-grey-600);   /* #635e58 on white, 6.4:1 */
  border-radius: var(--radius); padding: .75rem .85rem; opacity: 1; font-size: 1.0625rem; min-height: 48px;
}
.cf-input:hover, .cf-textarea:hover { border-color: var(--colour-ink); }
.cf-input:focus, .cf-textarea:focus { outline: 3px solid var(--colour-primary); outline-offset: 1px; border-color: var(--colour-ink); }
.cf-textarea { min-height: 8.5rem; }
.cf-submit {
  justify-self: start;
  background: var(--colour-action); color: var(--colour-on-action);
  border: 1.5px solid var(--colour-action-edge); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: .01em;
  min-height: 48px; padding: .6rem 1.5rem; white-space: nowrap; cursor: pointer;
  transition: background-color .15s cubic-bezier(.25, 1, .5, 1), transform .12s cubic-bezier(.25, 1, .5, 1);
}
.cf-submit:hover { background: var(--colour-action-hover); }
.cf-status { font-size: 1rem; color: var(--colour-ink); }
.cf-status a { font-weight: 500; }

/* ---------- FAQ (generated by build-found-ready.mjs) ---------- */
.se-faq { max-width: 52rem; }
.se-faq__title { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); color: var(--colour-primary); margin-bottom: 0.6em; }
.se-faq__item { border-top: 1px solid var(--colour-border); }
.se-faq__item:last-child { border-bottom: 1px solid var(--colour-border); }
.se-faq__q {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 14px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--colour-ink);
}
.se-faq__q::-webkit-details-marker { display: none; }
.se-faq__q::after { content: "+"; font-family: var(--font-body); font-weight: 400; font-size: 1.6rem; color: var(--colour-primary); flex: 0 0 auto; }
.se-faq__item[open] .se-faq__q::after { content: "\2212"; }
.se-faq__q:hover { color: var(--colour-primary); }
.se-faq__a { padding: 0 0 18px; max-width: var(--measure); }
.se-faq__a p { margin: 0; }

/* ---------- Family pages ---------- */
.family-head { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .family-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.family-head__text { padding-top: 0; }
.family-head__text p { max-width: 32em; }
.family-head__media { margin: 0; display: flex; justify-content: center; }
.family-head__media img { width: 100%; max-width: 680px; }
/* A family whose only head photograph is a small original (Advertising Printing, 500x298): the
   photograph gets a column its own size beside the text, never a wide column it floats in, and is
   never painted wider than 300px. */
.family-head__media--small { width: 100%; max-width: 300px; }
.family-head__media--small img { max-width: 100%; }
@media (min-width: 900px) {
  .family-head--small { grid-template-columns: minmax(0, 1fr) 300px; }
}
.page-head { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(32px, 5vw, 64px); }

.intro-cols { display: grid; gap: 32px 48px; }
@media (min-width: 900px) { .intro-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.intro-cols h2 { font-size: 1.6rem; }
.intro-cols ul { padding-left: 1.1em; }

.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; list-style: none; padding: 0; margin: 0; }
.jump__label { font-weight: 500; color: var(--colour-ink); margin-right: 4px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--colour-grey-600); border-radius: 999px;
  text-decoration: none; color: var(--colour-ink); font-weight: 500; white-space: nowrap;
}
.jump a:hover { border-color: var(--colour-primary); color: var(--colour-primary); }
.section--tint .jump a { color: var(--colour-ink); }

.category { padding-top: clamp(56px, 7vw, 96px); scroll-margin-top: 16px; }
.category + .category { border-top: 0; }
.category__head { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--colour-ink); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.category__head h2 { margin: 0; }
.category__count { font-size: 1rem; color: var(--colour-text); }

.product { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(8px, 2vw, 16px); scroll-margin-top: 16px; }
.product + .product { border-top: 1px solid var(--colour-border); margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 900px) {
  .product--has-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .product--flip.product--has-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .product--flip .product__media { order: 2; }
  .product__media { position: sticky; top: 24px; }
}
.product__media { margin: 0; }
.product__media img { width: auto; max-width: min(100%, 440px); height: auto; }
.product--flip .product__media { display: flex; justify-content: flex-end; }
.product__name { font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.15rem); margin-bottom: 0.55em; }
.product__desc { max-width: var(--measure); }
.product__desc ul { padding-left: 1.2em; }
.product__desc li { margin-bottom: .35em; }
.product__label { font-weight: 500; color: var(--colour-ink); margin-bottom: .4em; }
.product__desc a[href^="tel:"] { white-space: nowrap; }

.facts { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 24px 0 20px; border-top: 2px solid var(--colour-ink); max-width: 46rem; }
.facts div { padding: 12px 0; flex: 0 1 auto; min-width: 9rem; }
.facts dd { white-space: nowrap; }
.facts dt { font-size: 0.95rem; color: var(--colour-text); }
.facts dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.15; color: var(--colour-ink); font-variant-numeric: lining-nums tabular-nums; }

.specs { margin: 8px 0 24px; max-width: 44rem; }
.specs__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--colour-ink); margin: 0 0 6px; }
.specs dl { margin: 0; display: grid; grid-template-columns: 1fr; column-gap: 32px; }
@media (min-width: 640px) { .specs dl { grid-template-columns: 1fr 1fr; } }
.specs dl div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid #ebe7e1; font-size: 1rem; line-height: 1.4; }
@media (min-width: 640px) { .specs dl div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.specs dt { color: var(--colour-text); }
.specs dd { margin: 0; color: var(--colour-ink); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }

/* A text block: a listing with no photograph of its own on this page (none in the listing, or the
   same photograph already shown higher up; a photograph is shown once per page). It is not a photo
   block with the photo missing: its Product Details become a card that stands where the photograph
   would, on the side the page's left/right alternation gives it, while the name, description, facts
   and quote button keep the reading column. Phones stack it in reading order, the card after the
   description. */
.product--text { row-gap: 0; }
.product--text .product__desc > :last-child { margin-bottom: 0; }
.product__sheet { max-width: none; margin: 24px 0 0; padding: 18px clamp(18px, 2.4vw, 28px) 8px; background: var(--colour-tint); border-top: 2px solid var(--colour-ink); }
.product__sheet dl { grid-template-columns: minmax(0, 1fr); }
.product__sheet dl div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); border-bottom-color: var(--colour-border); }
.product__sheet dl div:last-child { border-bottom: 0; }
.product--text .facts { margin: 28px 0 20px; }
.product__cta { justify-self: start; }
.product__sheet + .product__cta { margin-top: 28px; } /* no facts strip between them */
@media (min-width: 900px) {
  .product--text {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "sheet name" "sheet desc" "sheet facts" "sheet cta" "sheet .";
  }
  .product--text.product--flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "name sheet" "desc sheet" "facts sheet" "cta sheet" ". sheet";
  }
  .product--text .product__name { grid-area: name; }
  .product--text .product__desc { grid-area: desc; }
  .product--text .facts { grid-area: facts; }
  .product--text .product__cta { grid-area: cta; }
  .product__sheet { grid-area: sheet; align-self: start; position: sticky; top: 24px; margin: 6px 0 0; }
  /* no description: the facts strip sits straight under the name */
  .product--text .product__name + .product__sheet + .facts { margin-top: 12px; }
}

.lines { list-style: none; padding: 0; margin: clamp(32px, 4vw, 48px) 0 0; border-top: 1px solid var(--colour-border); }
.lines li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--colour-border); scroll-margin-top: 16px; }
.lines h3 { margin: 0; font-size: 1.45rem; }

/* ---------- Range page ---------- */
.fam { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
/* The first family shares the page head's white: the head's own bottom padding is the gap, not
   that plus a second section's top padding. */
.page-head + .fam:not(.section--tint) { padding-top: 0; }
.fam__grid { display: grid; gap: 32px 56px; align-items: start; }
@media (min-width: 960px) { .fam__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.fam__intro p { max-width: 30em; text-wrap: pretty; }
.cats { display: grid; gap: 28px 32px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.cat--no-thumb { grid-template-columns: minmax(0, 1fr); }
.cat__thumb { width: 96px; }
.cat__thumb img { width: 96px; height: auto; }
.cat h3 { font-size: 1.35rem; margin-bottom: .3em; }
.cat h3 a { color: var(--colour-ink); text-decoration: none; }
.cat h3 a:hover { color: var(--colour-primary); text-decoration: underline; }
.cat ul { list-style: none; padding: 0; margin: 0; font-size: 1rem; }
.cat li { margin-bottom: 4px; }

/* ---------- About ---------- */
.groups { display: grid; gap: 28px 40px; list-style: none; padding: 0; margin: 28px 0 0; }
@media (min-width: 900px) { .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.groups li { border-top: 2px solid var(--colour-ink); padding-top: 14px; }
.groups h3 { font-size: 1.5rem; margin-bottom: .35em; }
.album { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 700px) { .album { grid-template-columns: 1fr 1fr; } }
.album img { width: 100%; max-width: 500px; }
/* Our Vision and Our Mission, the owner's two short lines, set as a staggered pair of display
   statements on the tint: not a column row, the second stepping right of the first. */
.vm { display: grid; gap: clamp(40px, 5vw, 64px); margin-bottom: clamp(64px, 8vw, 112px); }
.vm__item { max-width: 52rem; }
.vm__item h2 { font-size: 1.5rem; line-height: 1.2; color: var(--colour-link-on-tint); margin: 0 0 0.5em; }
.vm__line { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.14; letter-spacing: -0.005em; color: var(--colour-ink); margin: 0; text-wrap: balance; }
@media (min-width: 900px) { .vm__item--offset { margin-left: auto; } }
/* Aim, Vision and Mission in full: one row each, the name in a rail beside its paragraph. */
.avm { display: grid; max-width: 60rem; margin-top: 8px; }
.avm > div { padding: 20px 0 22px; border-top: 1px solid var(--colour-border); }
.avm > div:last-child { border-bottom: 1px solid var(--colour-border); }
.avm h3 { font-size: 1.5rem; margin: 0 0 0.3em; }
.avm p { margin: 0; max-width: 40em; }
@media (min-width: 900px) {
  .avm > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 32px; align-items: baseline; }
  .avm h3 { margin: 0; }
}
.pair { display: grid; gap: 28px 40px; margin-bottom: 48px; }
@media (min-width: 900px) { .pair { grid-template-columns: 1fr 1fr; } }
/* short leads in the pair balance, so "stick-on" is never split at its hyphen onto a last line */
.pair .lead { text-wrap: balance; }
.video { position: relative; display: block; max-width: 480px; background: var(--colour-steel); color: #fff; }
.video img { width: 100%; }
.video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; background: var(--colour-action); color: var(--colour-on-action);
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--colour-action-edge);
}
.video__play svg { width: 28px; height: 28px; margin-left: 4px; }
.video:hover .video__play { background: var(--colour-action-hover); }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.factsheet dl { margin: 0; display: grid; grid-template-columns: 1fr; max-width: 52rem; }
.factsheet dl div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--colour-border); }
.factsheet dt { color: var(--colour-text); }
.factsheet dd { margin: 0; color: var(--colour-ink); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 599px) { .factsheet dl div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Footer (steel) ---------- */
.site-footer { background: var(--colour-steel); color: var(--colour-on-steel); padding-top: clamp(56px, 7vw, 88px); padding-bottom: 32px; font-size: 1rem; }
.site-footer a:where(:not(.btn)) { color: #fff; }
.site-footer a:where(:not(.btn)):hover { color: var(--colour-action); }
.site-footer :focus-visible { outline-color: var(--colour-focus-on-steel); }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); } }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer__brand-row { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.footer__brand-row img { width: auto; height: 64px; }
.footer__name { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: #fff; line-height: 1.05; }
.footer__address { font-style: normal; line-height: 1.6; }
.site-footer h2 { font-size: 1.25rem; color: #fff; margin-bottom: .7em; letter-spacing: .01em; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }
.footer__base { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 0.95rem; }
.footer__credit a:where(:not(.btn)) { color: var(--colour-on-steel); }
@media (max-width: 767px) { .site-footer { padding-bottom: 104px; } }

/* ---------- Contact dock (WhatsApp + call), pure HTML/CSS ---------- */
.contact-dock { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; display: flex; flex-direction: column; align-items: flex-end; }
.contact-dock summary { list-style: none; }
.contact-dock summary::-webkit-details-marker { display: none; }
.dock-fab {
  width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--colour-steel); color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(21,20,15,.18), 0 10px 24px rgba(21,20,15,.22);
  transition: color .15s cubic-bezier(.25, 1, .5, 1), transform .12s cubic-bezier(.25, 1, .5, 1);
}
/* The dock floats over white and over the steel footer, and no single colour clears 3:1 on both:
   the focus teal #0079a0 is 4.95 on white but only 2.96 on steel, the yellow 10.58 on steel but 1.38
   on white. So its focus ring is two-tone, as the toggle and both pills: a 3px ink band next to the
   control (18.44 against white) and a 3px yellow band outside it (10.58 against steel), ink and
   yellow 13.33 against each other. Hover lights the icon in the action yellow, as footer links do. */
.dock-fab:hover { color: var(--colour-action); }
.dock-fab:active { transform: scale(.96); }
.dock-fab:focus-visible {
  outline: 3px solid var(--colour-ink); outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 8px var(--colour-action), 0 2px 4px rgba(21,20,15,.18), 0 10px 24px rgba(21,20,15,.22);
}
.contact-dock[open] .dock-actions { opacity: 1; transform: none; transition: opacity .16s cubic-bezier(.25, 1, .5, 1), transform .16s cubic-bezier(.25, 1, .5, 1); }
@starting-style { .contact-dock[open] .dock-actions { opacity: 0; transform: translateY(6px); } }
.dock-fab svg { width: 26px; height: 26px; }
.dock-fab .dock-fab__close { display: none; }
.contact-dock[open] .dock-fab__open { display: none; }
.contact-dock[open] .dock-fab__close { display: block; }
.dock-actions { position: absolute; right: 0; bottom: 70px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.dock-action {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px;
  background: #fff; color: var(--colour-ink); text-decoration: none; font-weight: 500; white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--colour-ink), 0 6px 18px rgba(21,20,15,.18);
  transition: background-color .15s cubic-bezier(.25, 1, .5, 1), transform .12s cubic-bezier(.25, 1, .5, 1);
}
.dock-action svg { width: 22px; height: 22px; flex: 0 0 auto; }
.dock-wa svg { color: #1a8d4f; }
.dock-call svg { color: var(--colour-primary); }
.dock-action:hover { background: var(--colour-tint); color: var(--colour-ink); }
/* the same two-tone ring as the toggle: the pill's 1.5px ink edge plus a 3px ink outline, then yellow */
.dock-action:focus-visible {
  outline: 3px solid var(--colour-ink); outline-offset: 1.5px;
  box-shadow: 0 0 0 1.5px var(--colour-ink), 0 0 0 7.5px var(--colour-action), 0 6px 18px rgba(21,20,15,.18);
}
@media print { .contact-dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.form-card.section--tint { background: var(--colour-tint); }
.form-card.section--tint .cf-input, .form-card.section--tint .cf-textarea { background: #fff; }