/* ---------------------------------------------------------------------------
   The public estimator.

   Loaded after app.css and only on the open pages, so it inherits the brand
   tokens without inheriting the application shell. The tone is deliberately
   different: a visitor here is being persuaded, not operated, so the page is
   quieter than the tool - more air, fewer borders, one thing to do at a time.

   The restraint is the design. Two typefaces, three colours, and every rule
   that can be replaced by space has been.
   --------------------------------------------------------------------------- */

:root {
  /* Ink, warmed very slightly off pure grey so it sits with the amber. */
  --pub-ink: #131b24;
  --pub-body: #4a5765;
  --pub-soft: #7d8a98;

  /* Surfaces. The page is a shade off white so white cards lift from it
     without needing a shadow to say so. */
  --pub-page: #fbfbfa;
  --pub-card: #ffffff;
  --pub-line: #e8eaed;
  --pub-line-soft: #f1f2f4;

  --pub-radius: 16px;
  --pub-radius-sm: 10px;

  /* One shadow, used sparingly. A page where everything floats reads as a
     dashboard, not as a document. */
  --pub-lift: 0 1px 2px rgba(19,27,36,.04), 0 8px 24px -12px rgba(19,27,36,.14);

  --pub-measure: 60ch;
}

body.pub {
  background: var(--pub-page);
  color: var(--pub-ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pub-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* A type scale with actual ratios rather than whatever looked right. */
.pub h1 {
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.033em;
  font-weight: 700;
  margin: 0 0 .4em;
}
.pub h2 {
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 650;
  margin: 0 0 .5em;
}
.pub h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .7em; color: var(--pub-ink); }

.pub-lead {
  font-size: 1.14rem; line-height: 1.6; color: var(--pub-body);
  margin: 0 0 1.4em; max-width: 46ch;
}
.pub-small { font-size: .86rem; }
.pub-dim { color: var(--pub-soft); }
.pub-hint { display: block; font-size: .83rem; line-height: 1.5; color: var(--pub-soft); margin-top: .45rem; }
.pub-err { font-size: .85rem; color: var(--bad); margin: .4rem 0 0; }

.pub-eyebrow {
  font-size: .73rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--battery); font-weight: 700; margin: 0 0 1.1em;
}

/* --------------------------------------------------------------------- head */

.pub-head {
  border-bottom: 1px solid var(--pub-line);
  background: rgba(251,251,250,.85);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky; top: 0; z-index: 30;
}
.pub-head-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 72px;
}
.pub-brand { text-decoration: none; display: flex; align-items: center; }
.pub-brand img { height: 47px; width: auto; display: block; } /* artwork 35% up: 29px to 39px inside the 4px padding */

.pub-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.pub-nav a {
  text-decoration: none; color: var(--pub-body); font-size: .92rem; font-weight: 500;
  padding: 9px 14px; border-radius: 999px; transition: background .14s, color .14s;
}
.pub-nav a:hover { background: var(--pub-line-soft); color: var(--pub-ink); }
.pub-nav a.on { color: var(--pub-ink); background: var(--pub-line-soft); font-weight: 600; }
.pub-nav a.pub-cta {
  background: var(--pub-ink); color: #fff; font-weight: 600; margin-left: 6px;
}
.pub-nav a.pub-cta:hover { background: var(--brand); color: #fff; }
.pub-nav a.pub-quiet { color: var(--pub-soft); font-weight: 400; }
/* The one button in the menu that leads into the application. */
.pub-nav a.pub-start { background: var(--brand); color: #1b1f2a; font-weight: 700; margin-left: 4px; }
.pub-nav a.pub-start:hover { background: var(--pub-ink); color: #fff; }

/* --------------------------------------------------------------------- hero */

.pub-hero {
  /* Light falling from the top right, and nothing else. No border at the
     bottom: the colour simply runs out, which is quieter than a rule. */
  background:
    radial-gradient(900px 480px at 88% -20%, rgba(250,174,67,.20), transparent 60%),
    radial-gradient(700px 400px at 10% 10%, rgba(19,76,151,.045), transparent 60%);
  padding: 92px 0 84px;
}
.pub-hero-in {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center;
}

/* Three short claims, set as quiet type rather than as badges. Pills here
   competed with the tab bar directly below them. */
.pub-assure {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 1.6rem;
  font-size: .88rem; color: var(--pub-body);
}
.pub-assure span { display: inline-flex; align-items: center; gap: 8px; }
.pub-assure span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--sun); flex: 0 0 5px;
}

/* -------------------------------------------------------------- two columns */

.pub-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: start; padding-top: 64px; padding-bottom: 72px;
}

.pub-card {
  background: var(--pub-card);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  padding: 32px;
}

/* --------------------------------------------------------------------- form */

.pub-form { border: 0; padding: 0; margin: 0; }

/* One card, three sections, divided by a rule rather than by space between
   separate boxes. Three cards read as three unrelated forms; one card with
   dividers reads as one form with three parts, which is what it is. */
.est {
  background: var(--pub-card);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
}

.est-sec { border: 0; margin: 0; padding: 32px; }
.est-sec + .est-sec { border-top: 1px solid var(--pub-line-soft); }

/* The heading is a legend, so it must not be positioned - a legend that is
   taken out of flow stops being announced with its fieldset. Grid keeps the
   numeral beside the text without moving either. */
.est-sec-h {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  padding: 0; margin: 0 0 24px; float: left; width: 100%;
  /* The application stylesheet uppercases every legend for its dense internal
     forms. These are headings a visitor reads, so the inherited transform and
     tracking are undone rather than inherited. */
  text-transform: none; letter-spacing: normal; font-size: 1rem; color: var(--pub-ink);
}
.est-sec-h strong {
  display: block; font-size: 1.16rem; font-weight: 650;
  letter-spacing: -.018em; color: var(--pub-ink); line-height: 1.3;
}
.est-sec-h em {
  display: block; font-style: normal; font-size: .89rem; line-height: 1.5;
  color: var(--pub-body); margin-top: 3px;
}
.est-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--pub-ink); color: #fff;
  font-size: .82rem; font-weight: 700; margin-top: 1px;
}
/* The float above needs clearing before the fields start. */
.est-sec-h + * { clear: both; }

.est-submit { padding: 26px 32px 30px; border-top: 1px solid var(--pub-line-soft); }
.est-submit .pub-hint { text-align: center; margin-top: .8rem; }

/* A hint that belongs to a pair of fields rather than to one of them. */
.est-hint-span { margin: -10px 0 20px; }

.pub-field { display: block; margin-bottom: 22px; }
.pub-label {
  display: block; font-weight: 600; font-size: .9rem;
  letter-spacing: -.005em; margin-bottom: 8px; color: var(--pub-ink);
}
.pub-label em { font-style: normal; font-weight: 400; color: var(--pub-soft); font-size: .86em; }

.pub-form input[type=text],
.pub-form input[type=email],
.pub-form input[type=number],
.pub-form textarea {
  display: block; width: 100%;
  font: inherit; font-size: 1rem; padding: 13px 15px;
  border: 1px solid var(--pub-line); border-radius: var(--pub-radius-sm);
  background: var(--pub-page); color: var(--pub-ink);
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.pub-form input::placeholder, .pub-form textarea::placeholder { color: var(--pub-soft); }
.pub-form input:hover, .pub-form textarea:hover { border-color: #d7dbe0; }
.pub-form input:focus, .pub-form textarea:focus {
  outline: none; background: var(--pub-card);
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(19,76,151,.10);
}
/* :user-invalid, not :invalid. A required field is invalid the moment the page
   loads, so :invalid painted every empty box red before anyone had typed a
   character - the enquiry form opened looking like it had already been filled
   in wrongly. :user-invalid waits until the visitor has actually tried. */
.pub-form input:user-invalid,
.pub-form textarea:user-invalid { border-color: var(--bad); background: #fffafa; }

.pub-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

/* The system-type cards: the one choice that changes every other question, so
   it gets the room to be read rather than a dropdown. */
.pub-picks { display: grid; gap: 12px; }
.pub-pick { position: relative; display: block; }
/* Transparent but full size and on top, rather than collapsed to nothing. A
   zero-by-zero input is reachable by keyboard and by clicking the label, but it
   is not itself clickable - which breaks automation and anything else that
   targets the control instead of its label. */
.pub-pick input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.pub-pick-in {
  display: grid; grid-template-columns: 38px 1fr; gap: 2px 16px; align-items: center;
  border: 1px solid var(--pub-line); border-radius: var(--pub-radius-sm);
  padding: 18px 20px; cursor: pointer;
  transition: border-color .14s, background .14s;
}
.pub-pick-in svg { grid-row: span 2; width: 32px; height: 32px; color: var(--pub-soft); transition: color .14s; }
.pub-pick-in strong { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
.pub-pick-in em { font-style: normal; font-size: .89rem; color: var(--pub-body); line-height: 1.45; }
.pub-pick-in:hover { border-color: #ccd3db; background: var(--pub-line-soft); }
.pub-pick input:checked + .pub-pick-in {
  border-color: var(--brand); background: rgba(19,76,151,.04);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.pub-pick input:checked + .pub-pick-in svg { color: var(--brand); }
.pub-pick input:focus-visible + .pub-pick-in { outline: 2px solid var(--brand); outline-offset: 3px; }

.pub-choice { border: 0; padding: 0; margin: 0 0 22px; }
.pub-choice legend {
  padding: 0; text-transform: none; letter-spacing: -.005em;
  color: var(--pub-ink); font-weight: 600; font-size: .9rem; margin-bottom: 10px;
}
.pub-chip {
  position: relative; display: inline-flex; align-items: center;
  margin: 0 8px 8px 0;
  border: 1px solid var(--pub-line); border-radius: 999px;
  cursor: pointer; transition: border-color .14s, background .14s, color .14s;
}
.pub-chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.pub-chip span { padding: 10px 17px; font-size: .91rem; font-weight: 500; border-radius: 999px; }
.pub-chip:hover { border-color: #ccd3db; background: var(--pub-line-soft); }
.pub-chip:has(input:checked) {
  border-color: var(--pub-ink); background: var(--pub-ink); color: #fff; font-weight: 600;
}
.pub-chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }

.pub-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: .86rem;
  color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; margin: -12px 0 22px;
}

.pub-btn {
  display: inline-block; width: 100%; text-align: center;
  font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: -.005em;
  padding: 15px 22px; border: 1px solid transparent; border-radius: var(--pub-radius-sm);
  background: var(--pub-ink); color: #fff; cursor: pointer; text-decoration: none;
  transition: background .14s, transform .1s;
}
.pub-btn:hover { background: var(--brand); }
.pub-btn:active { transform: translateY(1px); }
.pub-btn.ghost {
  background: transparent; color: var(--pub-body); border-color: var(--pub-line);
}
.pub-btn.ghost:hover { background: var(--pub-line-soft); color: var(--pub-ink); border-color: #ccd3db; }

/* ------------------------------------------------------------------- result */

.pub-result-col { position: sticky; top: 96px; }

.pub-card.is-empty {
  background: transparent; border-style: dashed; border-color: #dde1e6;
  color: var(--pub-body);
}
.pub-ticks { list-style: none; padding: 0; margin: 18px 0 0; }
.pub-ticks li {
  position: relative; padding-left: 28px; margin-bottom: 11px;
  color: var(--pub-body); font-size: .93rem; line-height: 1.5;
}
.pub-ticks li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sun);
}

.pub-result { padding: 0; overflow: hidden; }
.pub-result-head {
  /* Wraps rather than squeezing. The panel is a column beside the form, so at
     most widths the heading and the badge do not both fit on one line, and
     forcing them there broke the heading across two lines mid-phrase. */
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 18px; flex-wrap: wrap;
  padding: 26px 32px 20px; border-bottom: 1px solid var(--pub-line-soft);
}
.pub-result-head > div { min-width: 0; }
.pub-result-head h2 { margin: 0; text-wrap: balance; }
.pub-result > *:not(.pub-result-head):not(.pub-figures) { margin-inline: 32px; }
.pub-result > .pub-note:last-of-type { margin-bottom: 0; }

.pub-badge {
  flex: 0 0 auto; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
  background: var(--pub-line-soft); color: var(--pub-soft);
}
.pub-badge.ok { background: rgba(21,128,61,.09); color: var(--ok); }

.pub-h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--pub-soft); font-weight: 700; margin: 30px 0 14px;
}

/* Hairlines drawn with the background rather than with borders, so the corners
   of the grid stay clean where it meets the card. */
.pub-figures {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--pub-line-soft); margin: 0 0 4px;
  border-bottom: 1px solid var(--pub-line-soft);
}
.pub-fig { background: var(--pub-card); padding: 22px 32px 20px; }
.pub-fig:nth-child(even) { padding-left: 24px; }
.pub-fig.accent { background: linear-gradient(180deg, rgba(250,174,67,.10), rgba(250,174,67,.04)); }
.pub-fig:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pub-fig-n {
  display: block; font-size: 1.75rem; font-weight: 680; letter-spacing: -.035em;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.pub-fig-u {
  display: block; font-size: .8rem; font-weight: 600; color: var(--pub-body);
  margin-top: 5px; letter-spacing: -.005em;
}
.pub-fig-u sub { font-size: .8em; }
.pub-fig-l { display: block; font-size: .8rem; color: var(--pub-soft); margin-top: 6px; line-height: 1.45; }

.pub-cover { margin: 24px 32px; }
.pub-cover-bar {
  height: 8px; border-radius: 999px; background: var(--pub-line-soft);
  overflow: hidden; margin-bottom: 11px;
}
.pub-cover-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--sun), var(--battery));
}

/* Twelve bars. Enough to see the shape of the year, which is the whole point
   for an off-grid site, without pretending to be a chart. */
.pub-bars { display: flex; align-items: flex-end; gap: 5px; height: 104px; margin-bottom: 12px; }
.pub-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.pub-bar span {
  display: block; background: var(--sun); border-radius: 3px 3px 0 0;
  transition: background .14s;
}
.pub-bar.is-worst span { background: var(--brand); }
.pub-bar:hover span { background: var(--battery); }
.pub-bar em { font-style: normal; font-size: .62rem; color: var(--pub-soft); margin-top: 6px; letter-spacing: .01em; }

.pub-basis { margin: 0 0 24px; font-size: .88rem; }
.pub-basis > div {
  display: flex; justify-content: space-between; gap: 18px; padding: 9px 0;
  border-bottom: 1px solid var(--pub-line-soft);
}
.pub-basis > div:last-child { border-bottom: 0; }
.pub-basis dt { color: var(--pub-body); margin: 0; }
.pub-basis dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; font-weight: 550; }

.pub-note {
  background: var(--pub-line-soft); border-radius: var(--pub-radius-sm);
  padding: 16px 18px; font-size: .89rem; line-height: 1.55;
  color: var(--pub-body); margin: 0 0 24px;
}
.pub-note strong { color: var(--pub-ink); }
.pub-note.ok { background: rgba(21,128,61,.07); margin: 28px 0 0; }
.pub-note.warn { background: rgba(179,38,30,.06); margin: 0 32px 24px; }
.pub-est-notice { font-size: .84rem; margin: 0 0 16px; }

.pub-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.5; margin: 0 0 18px; color: var(--pub-body); }
.pub-consent input { margin-top: 3px; flex: none; width: auto; }

/* ---------------------------------------------------------------- explainer */

.pub-how { padding: 80px 0; border-top: 1px solid var(--pub-line); }
.pub-how > h2 { max-width: 20ch; margin-bottom: 2rem; }
.pub-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.pub-how h3 {
  font-size: .73rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--pub-soft); font-weight: 700; margin-bottom: 1.1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--pub-line);
}
.pub-how ul { margin: 0; padding: 0; list-style: none; }
.pub-how li {
  margin-bottom: 1.1rem; color: var(--pub-body); font-size: .95rem; line-height: 1.6;
  padding-left: 20px; position: relative;
}
.pub-how li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 1px; background: var(--pub-soft);
}
.pub-how em { font-style: italic; color: var(--pub-ink); }

.pub-band {
  background: linear-gradient(180deg, var(--pub-page), #f4f5f6);
  border-top: 1px solid var(--pub-line);
}

/* -------------------------------------------------------------------- foot */

.pub-foot { border-top: 1px solid var(--pub-line); padding: 44px 0 56px; }
.pub-foot p { margin: 0 0 10px; color: var(--pub-soft); max-width: 76ch; font-size: .85rem; line-height: 1.6; }
.pub-foot a { color: var(--pub-body); text-underline-offset: 3px; }
.pub-foot a:hover { color: var(--pub-ink); }

/* ------------------------------------------------------------------- narrow */

@media (max-width: 1000px) {
  .pub-wrap { padding: 0 24px; }
  .pub-hero-in { gap: 40px; }
  .pub-cols { gap: 32px; }
  .pub-card { padding: 26px; }
  .est-sec { padding: 26px; }
  .est-submit { padding: 22px 26px 26px; }
  .pub-result-head, .pub-fig { padding-inline: 26px; }
  .pub-result > *:not(.pub-result-head):not(.pub-figures) { margin-inline: 26px; }
  .pub-cover, .pub-note.warn { margin-inline: 26px; }
}

@media (max-width: 860px) {
  .pub-wrap { padding: 0 20px; }
  .pub-hero { padding: 52px 0 48px; }
  .pub-hero-in,
  .pub-cols,
  .pub-how-grid { grid-template-columns: 1fr; }
  .pub-hero-in { gap: 32px; }
  .pub-how-grid { gap: 40px; }
  .pub-how { padding: 56px 0; }

  /* The result stops following the form once they are stacked: a sticky panel
     in a single column just covers the thing being filled in. */
  .pub-result-col { position: static; }

  /* The one action on the page follows you down it, because the form is long
     on a phone and the button is at the bottom of all three sections. */
  .est-submit {
    position: sticky; bottom: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,.72), var(--pub-card) 30%);
    backdrop-filter: blur(6px);
  }
}

@media (max-width: 620px) {
  .pub-nav a[href$="#how"] { display: none; }
  .pub-brand img { height: 39px; }
  .pub-head-in { min-height: 62px; flex-wrap: wrap; padding: 8px 0; }
  .pub-nav { width: 100%; }
  .pub-nav a { padding: 8px 11px; font-size: .87rem; }
}

@media (max-width: 480px) {
  body.pub { font-size: 16px; }
  .pub-wrap { padding: 0 16px; }
  .pub-pair { grid-template-columns: 1fr; gap: 0; }
  .pub-figures { grid-template-columns: 1fr; }
  .pub-card { padding: 22px 18px; }
  .est-sec { padding: 24px 18px; }
  .est-submit { padding: 18px; }
  .est-sec-h { grid-template-columns: 26px 1fr; gap: 11px; }
  .est-n { width: 26px; height: 26px; font-size: .76rem; }
  .pub-result-head, .pub-fig { padding-inline: 18px; }
  .pub-result > *:not(.pub-result-head):not(.pub-figures) { margin-inline: 18px; }
  .pub-cover, .pub-note.warn { margin-inline: 18px; }
  .pub-fig:nth-child(even) { padding-left: 18px; }
  .pub-bar em { font-size: .55rem; }

}

/* Somebody who has asked for less movement gets the layout without the
   animation; the tab underline is decoration, not information. */
@media (prefers-reduced-motion: reduce) {
  .est-tab-ink { transition: none; }
  .pub-btn:active { transform: none; }
}

/* ------------------------------------------------------- documents and notice */

/* Privacy and cookies. One column, generous measure, no card - these are read
   top to bottom rather than scanned, and a card around a page of prose only
   makes it narrower. */
.pub-doc { padding: 64px 0 88px; }
.pub-doc .pub-wrap { max-width: 760px; }
.pub-doc-head { margin-bottom: 40px; }
.pub-doc-head h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); }
.pub-doc-note { margin-bottom: 40px; }

.pub-doc-body { font-size: 1.02rem; line-height: 1.75; color: var(--pub-body); }
.pub-doc-body h2 {
  font-size: 1.14rem; font-weight: 650; color: var(--pub-ink);
  margin: 2.6rem 0 .8rem; padding-top: 1.6rem; border-top: 1px solid var(--pub-line);
}
.pub-doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pub-doc-body p { margin: 0 0 1.1rem; }
.pub-doc-body strong, .pub-doc-body em { color: var(--pub-ink); }
.pub-doc-body a { color: var(--brand); text-underline-offset: 3px; }
.pub-doc-body ul { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.pub-doc-body li { position: relative; padding-left: 20px; margin-bottom: .6rem; }
.pub-doc-body li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 6px; height: 1px; background: var(--pub-soft);
}

.pub-doc-table { margin: 0 0 1.6rem; overflow-x: auto; }
.pub-doc-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pub-doc-table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--pub-soft); font-weight: 700; padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--pub-line);
}
.pub-doc-table td {
  padding: 14px 16px 14px 0; vertical-align: top; line-height: 1.55;
  border-bottom: 1px solid var(--pub-line-soft);
}
.pub-doc-table td:last-child, .pub-doc-table th:last-child { padding-right: 0; }

/* The notice. Bottom-anchored and quiet: it is information, not a decision, so
   it does not dim the page or block anything behind it. */
/* While the notice is up, the page ends above it. A fixed bar that covers the
   submit button is the most common way this pattern goes wrong. */
body.has-cookie-note { padding-bottom: 104px; }

.pub-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 680px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  background: var(--pub-ink); color: #e7eaee;
  border-radius: var(--pub-radius-sm); padding: 14px 16px 14px 20px;
  box-shadow: 0 8px 32px -8px rgba(19,27,36,.4);
  font-size: .86rem; line-height: 1.5;
}
.pub-cookie p { margin: 0; }
.pub-cookie a { color: #fff; text-underline-offset: 3px; }
.pub-cookie button {
  flex: 0 0 auto; font: inherit; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  border-radius: 999px; padding: 9px 18px;
}
.pub-cookie button:hover { background: rgba(255,255,255,.24); }

@media (max-width: 560px) {
  .pub-cookie { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; text-align: left; }
  .pub-cookie button { width: 100%; }
  /* Taller once it wraps to two rows, and the sticky submit row has to clear
     it as well. */
  body.has-cookie-note { padding-bottom: 168px; }
}

/* ------------------------------------------------- photographs and showcase */

/* Kinds of site. */
.pub-show { padding: 72px 0 24px; }
.pub-show h2, .pub-engineer h2 { margin: .2rem 0 1.4rem; }
.pub-show-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pub-show-card { margin: 0; background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: 16px; overflow: hidden; }
.pub-show-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.pub-show-card figcaption { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--pub-body); line-height: 1.5; }
.pub-show-card strong { color: var(--pub-ink); font-size: 1rem; }

/* Engineering and the company's own equipment. */
.pub-engineer { padding: 64px 0 56px; background: var(--pub-line-soft); margin-top: 48px; }
.pub-engineer-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pub-engineer-photo { display: block; width: 100%; height: auto; aspect-ratio: 11 / 8; object-fit: cover; border-radius: 20px; }
/* In the engineer section the list carries a check mark rather than the sun
   dot used elsewhere; it replaces the dot outright, so the two never overlap. */
.pub-engineer .pub-ticks { margin: 1.2rem 0 1.6rem; display: grid; gap: 8px; }
.pub-engineer .pub-ticks li { margin-bottom: 0; padding-left: 26px; }
.pub-engineer .pub-ticks li::before {
  content: "✓"; left: 0; top: 0; width: auto; height: auto; border-radius: 0; background: none;
  color: var(--brand); font-weight: 700; line-height: inherit;
}
.pub-engineer .pub-btn { display: inline-block; width: auto; text-decoration: none; }
/* Wrapping rows, centred: when five cards do not fit on one line, the short
   last row sits in the middle rather than leaving one card alone at the left. */
.pub-products { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 44px; }
.pub-products figure { flex: 1 1 170px; max-width: 220px; margin: 0; background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: 14px; padding: 18px 14px 14px; text-align: center; display: flex; flex-direction: column; }
.pub-products img { display: block; height: 130px; width: 100%; object-fit: contain; margin: 0 auto 12px; }
.pub-products figcaption { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--pub-soft, var(--pub-body)); line-height: 1.4; }
.pub-products strong { color: var(--pub-ink); font-size: .88rem; }

/* The group. */
.pub-group { padding: 44px 0 64px; text-align: center; }
.pub-group p { color: var(--pub-soft, var(--pub-body)); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 18px; }
/* Two group companies, each in its own tile: the logos differ in shape (a
   tall mark and a wide wordmark), so each is sized to look equal in weight. */
.pub-group-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 18px; }
.pub-group-card {
  margin: 0; flex: 0 1 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: 14px; padding: 22px 24px 18px;
}
.pub-group-card img { display: block; width: auto; object-fit: contain; }
.pub-group-card.is-tall img { height: 78px; }
.pub-group-card.is-wide img { height: 44px; max-width: 100%; margin-block: 17px; }
.pub-group-card figcaption { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.pub-group-card strong { color: var(--pub-ink); font-size: .9rem; }
.pub-group-card span { color: var(--pub-soft, var(--pub-body)); font-size: .78rem; text-transform: none; letter-spacing: 0; }

@media (max-width: 860px) {
  .pub-show-grid, .pub-engineer-in { grid-template-columns: 1fr; gap: 24px; }
  .pub-show { padding-top: 48px; }
  .pub-products figure { flex-basis: 150px; }
}

/* A wide photograph across the top of a page such as pricing. */
.pub-photo-band { height: 220px; background-size: cover; background-position: center 60%; }
@media (max-width: 860px) { .pub-photo-band { height: 140px; } }

/* ===================================================== estimator: the hero */

.est-hero { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.est-hero-bg {
  position: absolute; inset: -2%; z-index: -2;
  background-size: cover; background-position: right 30%;
  animation: est-drift 28s ease-in-out infinite alternate;
}
/* A navy wash heavy on the left where the words are, light on the right. */
.est-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(10,22,44,.88) 0%, rgba(10,22,44,.66) 36%, rgba(10,22,44,.12) 62%, rgba(10,22,44,0) 100%),
    linear-gradient(to top, rgba(10,22,44,.55), transparent 40%);
}
@keyframes est-drift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.10) translate3d(-1.5%, -1%, 0); } }

.est-hero-in {
  display: block; padding-top: 104px; padding-bottom: 150px;
}
.est-hero-copy { max-width: 640px; }

/* Credentials: one line of figures across the photograph, no panel behind. */
.est-creds { display: flex; flex-wrap: wrap; margin: 34px 0 0; padding: 0; }
.est-creds > div { display: flex; flex-direction: column-reverse; padding: 0 30px; border-left: 1px solid rgba(255,255,255,.28); }
.est-creds > div:first-child { padding-left: 0; border-left: 0; }
.est-creds dd { margin: 0; font-size: 2.1rem; font-weight: 750; letter-spacing: -.02em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.est-creds dt { margin-top: 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #ffd27f; }
.est-pill {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  padding: 7px 14px; border-radius: 999px; font-size: .8rem; letter-spacing: .02em;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px);
}
.est-dot { width: 8px; height: 8px; border-radius: 50%; background: #FAAE43; box-shadow: 0 0 0 0 rgba(250,174,67,.7); animation: est-pulse 2.2s infinite; }
@keyframes est-pulse { 0% { box-shadow: 0 0 0 0 rgba(250,174,67,.65); } 70% { box-shadow: 0 0 0 10px rgba(250,174,67,0); } 100% { box-shadow: 0 0 0 0 rgba(250,174,67,0); } }
.est-hero h1 { color: #fff; font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4rem); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 20px; max-width: 13ch; }
.est-glow {
  background: linear-gradient(92deg, #FAAE43 0%, #ffd27f 45%, #f08a24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.est-hero-lead { font-size: 1.12rem; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 46ch; margin: 0 0 30px; }
.est-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.est-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px;
  font-weight: 650; text-decoration: none; color: #131b24; background: #FAAE43;
  box-shadow: 0 10px 30px rgba(250,174,67,.35); transition: transform .18s, box-shadow .18s, background .18s;
}
.est-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(250,174,67,.45); background: #ffbd5c; color: #131b24; }
.est-cta.ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.4); box-shadow: none; backdrop-filter: blur(6px); }
.est-cta.ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.est-assure { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .9rem; color: rgba(255,255,255,.82); }
.est-assure li::before { content: "✓"; color: #FAAE43; font-weight: 700; margin-right: 8px; }
/* The landing page's way in: the free estimate first, then the application. */
.est-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.est-hero-cta a { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: background .14s, color .14s, border-color .14s; }
.est-cta-main { background: #FAAE43; color: #1b1f2a; }
.est-cta-main:hover { background: #fff; }
.est-cta-alt { border: 1.5px solid rgba(255,255,255,.75); color: #fff; }
.est-cta-alt:hover { background: #fff; color: #1b1f2a; border-color: #fff; }
.est-cta-note { margin: 12px 0 0; font-size: .85rem; color: rgba(255,255,255,.78); }
.est-hero-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ================================ estimator: the tagline and three ways in */

.est-tagline {
  margin: 0 0 6px; color: #ffd27f; line-height: 1.1;
  font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", "Apple Chancery", "URW Chancery L", cursive;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.est-tabs {
  position: relative; z-index: 2; margin-top: -84px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.est-tab {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px 20px 20px 18px; border-radius: 18px;
  background: var(--pub-card); border: 1px solid var(--pub-line); text-decoration: none !important; color: var(--pub-ink);
  box-shadow: 0 24px 60px rgba(19,27,36,.12); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.est-tab:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(19,27,36,.18); border-color: #FAAE43; color: var(--pub-ink); }
.est-tab-ico {
  flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #134C97, #2f6fc4);
}
.est-tab-ico svg { width: 22px; height: 22px; }
.est-tab.is-primary .est-tab-ico { background: linear-gradient(135deg, #f08a24, #FAAE43); }
.est-tab-txt { flex: 1; min-width: 0; }
.est-tab-txt strong { display: block; font-size: 1.04rem; letter-spacing: -.01em; }
.est-tab-txt span { display: block; margin-top: 3px; color: var(--pub-body); font-size: .86rem; line-height: 1.45; }
.est-tab-go { flex: none; align-self: center; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pub-line-soft); color: var(--pub-ink); font-weight: 700; transition: background .2s, color .2s; }
.est-tab:hover .est-tab-go { background: #FAAE43; color: #131b24; }
.est-main { padding-top: 56px; }

/* ===================================== estimator: photo cards for the system */

.pub-picks:has(.est-pick) { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pub-pick-in.est-pick {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%;
  border-radius: 14px; transition: border-color .16s, box-shadow .2s, transform .2s;
}
.pub-pick-in.est-pick:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(19,27,36,.12); background: var(--pub-card); }
.est-pick-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.est-pick-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pub-pick-in.est-pick:hover .est-pick-photo img { transform: scale(1.06); }
.est-pick-tick {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--brand); font-size: .8rem; font-weight: 800; opacity: 0; transform: scale(.6);
  transition: opacity .18s, transform .18s; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.est-pick-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.pub-pick-in.est-pick strong { display: flex; align-items: center; gap: 7px; font-size: .95rem; }
.pub-pick-in.est-pick strong svg { width: 18px; height: 18px; grid-row: auto; flex: none; }
.pub-pick-in.est-pick em { font-size: .82rem; }
.pub-pick input:checked + .pub-pick-in.est-pick { box-shadow: 0 0 0 2px var(--brand), 0 14px 30px rgba(19,76,151,.16); background: var(--pub-card); }
.pub-pick input:checked + .pub-pick-in.est-pick .est-pick-tick { opacity: 1; transform: scale(1); }

/* ========================================================= reveal on scroll */

/* Hidden only once the script has run, so without it everything simply shows. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.js-reveal [data-reveal]:nth-child(2) { transition-delay: .1s; }
.js-reveal [data-reveal]:nth-child(3) { transition-delay: .2s; }
.js-reveal [data-reveal]:nth-child(4) { transition-delay: .3s; }
.js-reveal [data-reveal]:nth-child(5) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .est-hero-bg, .est-dot { animation: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pub-pick-in.est-pick, .est-pick-photo img, .est-cta { transition: none; }
}

/* Two by two only when the form column has room; otherwise one per row,
   photo beside the words. Measured on the column, not the screen. */
#est-system { container-type: inline-size; }
@container (max-width: 640px) {
  .pub-picks:has(.est-pick) { grid-template-columns: 1fr; }
  .pub-pick-in.est-pick { flex-direction: row; }
  .est-pick-photo { width: 150px; flex: none; aspect-ratio: auto; min-height: 92px; }
  .est-pick-body { justify-content: center; padding: 12px 16px; }
}
@media (max-width: 860px) {
  .est-hero-in { padding-top: 64px; padding-bottom: 120px; }
  /* Narrow screens put the family behind the words: an even wash keeps them legible. */
  .est-hero::before { background: linear-gradient(to bottom, rgba(10,22,44,.62), rgba(10,22,44,.86) 55%, rgba(10,22,44,.9)); }
  .est-hero-bg { background-position: 72% top; }
  .est-creds { gap: 18px 0; }
  .est-creds > div { padding: 0 18px; flex: 0 0 50%; border-left: 0; padding-left: 0; }
  .est-creds dd { font-size: 1.6rem; }
  .est-tabs { margin-top: -64px; grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .est-pick-photo { width: 104px !important; }
  .est-hero-lead { font-size: 1rem; }
}

/* The family beside the enquiry form. */
.est-enq-photo { margin: 0 0 22px; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px rgba(19,27,36,.16); }
.est-enq-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; }

/* ------------------------------------------------------------ product range */
.prange-h { text-align: center; margin: 2.4rem 0 1rem; }
.prange-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.prange-card { background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; }
.prange-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.prange-page .pub-wrap { max-width: 1180px; }
.prange-top img { width: 104px; height: 104px; object-fit: contain; flex: none; background: var(--pub-line-soft); border-radius: 12px; padding: 8px; }
.prange-top h3 { margin: 0 0 4px; font-size: 1.05rem; }
.prange-brand { margin: 0; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.prange-models { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pub-line); }
.prange-models li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--pub-line-soft); font-size: .84rem; align-items: baseline; }
.prange-models span { color: var(--pub-body); }
.prange-models em { font-style: normal; font-size: .72rem; color: var(--pub-soft, var(--pub-body)); }
.prange-foot { margin: 10px 0 0; }
@media (max-width: 860px) {
  .prange-grid { grid-template-columns: 1fr; }
  .prange-models li { grid-template-columns: 1fr; gap: 0; }
}

/* The heading above the estimate form. */
.est-intro { text-align: center; padding-top: 64px; scroll-margin-top: 80px; }
.est-intro h2 { margin: .3rem 0 .6rem; }
.est-intro .pub-lead { max-width: 58ch; margin: 0 auto; }
.est-intro + .est-main { padding-top: 32px; }

/* ---- Features --------------------------------------------------------------
   The whole application, grouped as the work runs. Cards of one height per row;
   the list uses the same check mark as the engineer section. */
.pub-features { padding-block: 64px 24px; display: grid; gap: 14px; scroll-margin-top: 80px; }
.pub-features > h2 { margin: .2rem 0 0; }
.pub-features > .pub-lead { max-width: 64ch; margin: 0; }
.pub-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 18px; }
.pub-feature { background: var(--pub-card); border: 1px solid var(--pub-line); border-radius: 14px; padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pub-feature h3 { margin: 0; font-size: 1.05rem; color: var(--pub-ink); }
.pub-feature .pub-ticks { margin: 8px 0 0; display: grid; gap: 6px; }
.pub-feature .pub-ticks li { margin-bottom: 0; padding-left: 24px; font-size: .9rem; }
.pub-feature .pub-ticks li::before {
  content: "✓"; left: 0; top: 0; width: auto; height: auto; border-radius: 0; background: none;
  color: var(--brand); font-weight: 700; line-height: inherit;
}
.pub-feature-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 18px 0 0; }
.pub-feature-cta .pub-btn { display: inline-block; width: auto; text-decoration: none; }
.pub-quiet-link { color: var(--pub-ink); font-weight: 600; }

/* The estimate lands in view after "Work it out", clear of the sticky bar. */
#result { scroll-margin-top: 84px; }

/* ---- The bar on a phone ------------------------------------------------
   Logo, the button into the app, and a menu button; everything else opens
   below as a list. */
.pub-menu-toggle { display: none; }
@media (max-width: 760px) {
  .pub-head-in { flex-wrap: wrap; gap: 10px; min-height: 60px; padding: 8px 0; }
  .pub-brand { margin-right: auto; }
  .pub-brand img { height: 38px; }
  .pub-menu-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; order: 3;
    width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer;
    background: transparent; border: 1px solid var(--pub-line);
  }
  .pub-menu-toggle span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s, opacity .18s; }
  .pub-head.menu-open .pub-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .pub-head.menu-open .pub-menu-toggle span:nth-child(2) { opacity: 0; }
  .pub-head.menu-open .pub-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .pub-nav { width: auto; order: 2; }
  .pub-nav > * { display: none !important; }
  .pub-nav > .pub-start { display: inline-flex !important; margin: 0; padding: 10px 14px; }
  .pub-head.menu-open .pub-nav {
    order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px 0 12px; border-top: 1px solid var(--pub-line);
  }
  .pub-head.menu-open .pub-nav > * { display: flex !important; }
  .pub-head.menu-open .pub-nav > a { padding: 12px 14px; font-size: 1rem; margin: 0; }
  .pub-head.menu-open .pub-nav > a[href$="#how"] { display: flex !important; }
  .pub-head.menu-open .pub-nav > .pub-start { order: 99; justify-content: center; }
  .pub-head.menu-open .pub-nav > :not(a) { justify-content: flex-start; align-self: flex-start; margin: 4px 14px; }
}