@charset "UTF-8";
/* ===================================================================
   form.css — the contact page and its enquiry form.
   Handle: ts-form, enqueued after oh-ds, gated to /contact/ only.
   Owned by the FORM agent.
   -------------------------------------------------------------------
   The house language is country.css's: forest green structure, gold as
   a flourish and never as body text on white, Outfit for everything
   that has to be read and Cormorant Garamond for the one display line
   under each heading. Radii are the house set — 12px on anything you
   type into or press, 18px on a card, 22px on a surface. Nothing in
   this file is square.

   EVERYTHING IS PREFIXED .ts-cf- AND SCOPED UNDER .ts-cf. Three other
   writers are in this theme; nothing here may reach their sections,
   and nothing of theirs should need to reach in here.

   THE RULES THAT ARE NOT STYLE CHOICES
   ------------------------------------
   1. Every control is at least 48px high and every tick target is at
      least 44px, including the compact ones.
   2. Focus is always visible, and it is visible on the CONTROL, not
      just on a wrapper. Nothing here sets `outline:none` without
      drawing a replacement in the same rule.
   3. `[hidden]` is forced off. form.js toggles the attribute, and on
      this theme a class-based `display` rule elsewhere in the cascade
      has beaten the attribute before now, leaving JS-hidden panels
      permanently on screen.
   4. No grid track is a bare `1fr`. A `1fr` track floors at
      min-content, so one long option label silently widens its column
      and pushes the page into horizontal scroll. Every track here is
      `minmax(0,1fr)` or an explicit `minmax(min(100%,Npx),1fr)`.
   5. No `overflow-x:hidden` on a wrapper. It would hide exactly the
      overflow this page has to be measured for.
   =================================================================== */

.ts-cf{
  --cf-max:1240px;
  --cf-gap:clamp(20px,2.6vw,36px);
  --cf-r:12px;          /* inputs, buttons, ticks */
  --cf-r-card:18px;     /* cards */
  --cf-r-surface:22px;  /* the big surfaces */
  --cf-bad:#8E3220;     /* the one non-brand colour: an error, on white, 7.4:1 */
  --cf-bad-bg:#FBF0ED;
  --cf-shadow:0 1px 2px rgba(58,46,37,.05), 0 14px 38px rgba(58,46,37,.09);
  --cf-head:110px;      /* sticky header + breathing room, for anchors */

  background:#fff;
  font-family:var(--sans,"Outfit",system-ui,sans-serif);
  color:var(--ink,#3A2E25);
}

/* The site header is sticky, so an in-page anchor has to clear it. */
.ts-cf [id]{ scroll-margin-top:var(--cf-head) }

/* See rule 3 above. This is load-bearing, not tidiness. */
.ts-cf [hidden]{ display:none !important }

.ts-cf-shell{
  width:100%;
  max-width:var(--cf-max);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
}

.ts-cf *,
.ts-cf *::before,
.ts-cf *::after{ box-sizing:border-box }


/* ==================================================================
   1. THE OPENING BAND
   ================================================================== */

/* The padding is deliberately modest, and it is a requirement rather than a
   taste: the whole of the first field of the form has to be on screen at
   load, and every pixel of this band sits above it. Measured on the built
   page, with the sticky site header above it, the name input's bottom edge
   lands at 584px of a 900px viewport at 1440 wide, 579px of 768px at 1366
   wide, and 445px of 844px at 390 wide. Raising these numbers is what would
   break that, so raise them only with those three folds re-measured. */
.ts-cf-hero{
  position:relative;
  padding-block:clamp(26px,3vw,40px);
  background:var(--ac,#124933);
  color:#fff;
  isolation:isolate;
}

/* A single soft light from the top left. No image, so nothing to credit
   and nothing to load. */
.ts-cf-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(12,51,35,0) 55%, rgba(12,51,35,.45) 100%);
  z-index:-1;
  pointer-events:none;
}

.ts-cf-kick{
  margin:0 0 10px;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold,#EAB924);
}

.ts-cf-h1{
  margin:0;
  font-family:var(--sans,"Outfit",sans-serif);
  font-weight:700;
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.05;
  color:#fff;
  text-wrap:balance;
}

/* The gold Cormorant line. Display size only — never at text size. */
.ts-cf-sf{
  display:block;
  font-family:var(--serif,"Cormorant Garamond",serif);
  font-weight:500;
  font-size:1.08em;
  line-height:1.02;
  color:var(--gold,#EAB924);
}

/* The lead paragraph and the three direct-contact chips that used to sit
   here are gone; their rules went with them rather than being left as dead
   selectors. The phone number, the WhatsApp link and the email address now
   live only in the "Where to find us" card — see .ts-cf-side__ below. */


/* ==================================================================
   2. THE TWO COLUMNS
   ================================================================== */

.ts-cf-main{ padding-block:clamp(32px,4.4vw,64px) }

.ts-cf-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--cf-gap);
  align-items:start;
}

@media (min-width:1000px){
  .ts-cf-grid{ grid-template-columns:minmax(0,1.6fr) minmax(0,.85fr) }

  /* The aside follows the form down a long page, but only where there
     is room for it to; `align-self:start` keeps it from stretching. */
  .ts-cf-aside{ position:sticky; top:var(--cf-head); align-self:start }
}

.ts-cf-card{
  background:#fff;
  border:1px solid var(--line,#E6E0D8);
  border-radius:var(--cf-r-surface);
  box-shadow:var(--cf-shadow);
}

.ts-cf-card--form{ padding:clamp(20px,2.8vw,40px) }


/* ==================================================================
   3. THE FORM
   ================================================================== */

.ts-cf-set{
  margin:0;
  padding:26px 0 0;
  border:0;
  border-top:1px solid var(--line,#E6E0D8);
  min-inline-size:0;   /* a fieldset defaults to min-content; without this
                          a long option label can widen the whole page */
}
.ts-cf-set:first-of-type{ padding-top:0; border-top:0 }
.ts-cf-set + .ts-cf-set{ margin-top:28px }

.ts-cf-legend{
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:0; margin:0 0 6px;
  font-size:clamp(17px,1.5vw,21px); font-weight:700; line-height:1.25;
  color:var(--ink,#3A2E25);
}

.ts-cf-legend__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:none;
  border-radius:50%;
  background:var(--ac-soft,#E6EDE9);
  color:var(--ac,#124933);
  font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* --- rows --------------------------------------------------------- */

.ts-cf-rows{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px 18px;
  margin-top:16px;
}
.ts-cf-rows--sub{ margin-top:14px }

@media (min-width:640px){
  .ts-cf-rows{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .ts-cf-rows--trio{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

.ts-cf-field{ margin:0; min-width:0 }
.ts-cf-field--wide{ grid-column:1 / -1 }
.ts-cf-hint--span{ grid-column:1 / -1; margin-top:-4px }

.ts-cf-label{
  display:block;
  margin:0 0 6px;
  font-size:14px; font-weight:600; line-height:1.35;
  color:var(--ink,#3A2E25);
}

/* "required" reads as a word, not as a bare asterisk nobody explains. */
.ts-cf-req{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--ac-soft,#E6EDE9);
  color:var(--ac-dark,#0C3323);
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  vertical-align:2px;
}

.ts-cf-hint{
  display:block;
  margin:6px 0 0;
  font-size:13px; line-height:1.55;
  color:var(--muted,#7A6F66);
}

/* --- controls ------------------------------------------------------ */

.ts-cf-input{
  display:block;
  width:100%;
  min-width:0;               /* grid children default to min-content */
  min-height:52px;
  padding:12px 14px;
  border:1px solid var(--line,#E6E0D8);
  border-radius:var(--cf-r);
  background:#fff;
  color:var(--ink,#3A2E25);
  font-family:inherit;
  font-size:16px;            /* under 16px, iOS Safari zooms on focus */
  line-height:1.4;
  transition:border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance:none; appearance:none;
}

.ts-cf-input::placeholder{ color:#A79C92 }

.ts-cf-input:hover{ border-color:#CFC7BC }

.ts-cf-input:focus{ outline:none }
.ts-cf-input:focus-visible,
.ts-cf-input:focus{
  border-color:var(--ac,#124933);
  box-shadow:0 0 0 3px rgba(18,73,51,.16);
}

.ts-cf-input.is-bad{ border-color:var(--cf-bad); background:var(--cf-bad-bg) }
.ts-cf-input.is-bad:focus{ box-shadow:0 0 0 3px rgba(142,50,32,.16) }

.ts-cf-area{ min-height:150px; line-height:1.6; resize:vertical }

/* The chevron is drawn here rather than left to the platform, because
   `appearance:none` removes the platform's own. */
.ts-cf-select{
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6F66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;
  cursor:pointer;
}

/* Firefox paints its own inner focus ring inside a select. */
.ts-cf-select:-moz-focusring{ color:transparent; text-shadow:0 0 0 var(--ink,#3A2E25) }

/* A date input's picker indicator is the only part of it that is
   clickable in Chrome, so give it room and a visible colour. */
.ts-cf-input[type="date"]::-webkit-calendar-picker-indicator{
  width:22px; height:22px; cursor:pointer; opacity:.6;
}
.ts-cf-input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1 }

/* --- ticks and pills ---------------------------------------------- */

.ts-cf-choices{ margin-top:14px }

.ts-cf-choices--row{ display:flex; flex-wrap:wrap; gap:10px }

.ts-cf-choices--grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
  gap:10px;
}
.ts-cf-choices--dense{ grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)) }

.ts-cf-tick,
.ts-cf-pill{
  display:flex; align-items:center; gap:11px;
  min-height:48px;
  margin:0;
  padding:10px 14px;
  border:1px solid var(--line,#E6E0D8);
  border-radius:var(--cf-r);
  background:#fff;
  font-size:14.5px; line-height:1.35;
  color:var(--ink,#3A2E25);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.ts-cf-pill{ font-weight:600 }

.ts-cf-tick:hover,
.ts-cf-pill:hover{ border-color:var(--ac,#124933); background:#FCFBF9 }

/* The native control stays visible and keeps the checked state legible
   even where :has() is not available. accent-color paints it green. */
.ts-cf-tick input,
.ts-cf-pill input{
  width:20px; height:20px; flex:none; margin:0;
  accent-color:var(--ac,#124933);
  cursor:pointer;
}

/* Focus has to land on the visible box, not on the 20px control alone. */
.ts-cf-tick:has(input:focus-visible),
.ts-cf-pill:has(input:focus-visible){
  outline:2px solid var(--ac,#124933);
  outline-offset:2px;
}
.ts-cf-tick input:focus-visible,
.ts-cf-pill input:focus-visible{ outline:2px solid var(--ac,#124933); outline-offset:2px }

.ts-cf-tick:has(input:checked),
.ts-cf-pill:has(input:checked){
  border-color:var(--ac,#124933);
  background:var(--ac-soft,#E6EDE9);
}

/* A checkbox sitting under its own field rather than in a grid. */
.ts-cf-check{
  display:flex; align-items:center; gap:10px;
  min-height:44px;
  margin:8px 0 0;
  font-size:13.5px;
  color:var(--muted,#7A6F66);
  cursor:pointer;
}
.ts-cf-check input{ width:20px; height:20px; flex:none; margin:0; accent-color:var(--ac,#124933) }
.ts-cf-check input:focus-visible{ outline:2px solid var(--ac,#124933); outline-offset:2px }

/* --- errors -------------------------------------------------------- */

.ts-cf-err{
  display:flex; align-items:flex-start; gap:7px;
  margin:8px 0 0;
  font-size:13.5px; font-weight:500; line-height:1.5;
  color:var(--cf-bad);
}
.ts-cf-err svg{ width:16px; height:16px; flex:none; margin-top:2px }

.ts-cf-alert{
  margin:0 0 26px;
  padding:18px 20px;
  border:1px solid rgba(142,50,32,.3);
  border-left:4px solid var(--cf-bad);
  border-radius:var(--cf-r-card);
  background:var(--cf-bad-bg);
}
.ts-cf-alert:focus{ outline:2px solid var(--cf-bad); outline-offset:3px }

.ts-cf-alert__h{
  margin:0 0 8px;
  font-size:17px; font-weight:700; line-height:1.3;
  color:var(--cf-bad);
}
.ts-cf-alert__p{ margin:0 0 8px; font-size:14px; line-height:1.6; color:var(--ink,#3A2E25) }
.ts-cf-alert__list{ margin:0; padding-left:20px; font-size:14px; line-height:1.7 }
.ts-cf .ts-cf-alert__list a{ color:var(--cf-bad); font-weight:600 }

/* --- the honeypot -------------------------------------------------- */

/* Off-screen rather than display:none: a bot that skips hidden inputs
   still sees this one, which is the whole point of it. */
.ts-cf-hp{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* --- send ---------------------------------------------------------- */

.ts-cf-send{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid var(--line,#E6E0D8);
}

.ts-cf .ts-cf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px;
  padding:0 28px;
  border:1px solid var(--ac,#124933);
  border-radius:var(--cf-r);
  background:var(--ac,#124933);
  color:#fff;
  font-family:inherit; font-size:15.5px; font-weight:600; line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.ts-cf .ts-cf-btn:hover{ background:var(--ac-dark,#0C3323); border-color:var(--ac-dark,#0C3323); color:#fff }
.ts-cf .ts-cf-btn:focus-visible{ outline:2px solid var(--gold-dark,#C99C13); outline-offset:3px }
.ts-cf-btn svg{ width:19px; height:19px; flex:none }

.ts-cf .ts-cf-btn--line{
  min-height:48px; padding:0 18px;
  background:#fff; border-color:var(--line,#E6E0D8); color:var(--ac,#124933);
  font-size:14px;
}
.ts-cf .ts-cf-btn--line:hover{ background:var(--ac,#124933); border-color:var(--ac,#124933); color:#fff }

.ts-cf-send__note{
  flex:1 1 280px;
  margin:0;
  font-size:12.5px; line-height:1.55;
  color:var(--muted,#7A6F66);
}


/* ==================================================================
   4. THE SUCCESS PANEL
   ================================================================== */

.ts-cf-card--done{
  display:flex; gap:clamp(16px,2vw,24px);
  padding:clamp(22px,2.8vw,36px);
  background:var(--ac-soft,#E6EDE9);
  border-color:rgba(18,73,51,.22);
}
.ts-cf-card--done.is-partial{ background:#FDF6E7; border-color:rgba(201,156,19,.45) }

.ts-cf-done__mark{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; flex:none;
  border-radius:50%;
  background:var(--ac,#124933);
  color:#fff;
}
.is-partial .ts-cf-done__mark{ background:var(--gold-dark,#C99C13) }
.ts-cf-done__mark svg{ width:26px; height:26px }

.ts-cf-done__body{ min-width:0 }
.ts-cf-done__body:focus{ outline:none }

.ts-cf-done__h{
  margin:0 0 10px;
  font-size:clamp(20px,2.2vw,28px); font-weight:700; line-height:1.2;
  color:var(--ac-dark,#0C3323);
  text-wrap:balance;
}
.ts-cf-done__p{ margin:0 0 12px; font-size:15px; line-height:1.65; color:var(--ink,#3A2E25) }

.ts-cf-done__acts{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:16px 0; padding:0; list-style:none;
}

.ts-cf-done__ref{
  margin:16px 0 0;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted,#7A6F66);
}
.ts-cf-done__ref strong{
  margin-left:8px;
  font-size:15px; letter-spacing:.04em;
  color:var(--ac-dark,#0C3323);
  font-variant-numeric:tabular-nums;
}

.ts-cf-done__more{ margin:14px 0 0; font-size:14px; display:flex; flex-wrap:wrap; align-items:center; gap:2px 16px }
.ts-cf .ts-cf-done__more a{
  display:inline-flex; align-items:center;
  min-height:44px;
  color:var(--ac-dark,#0C3323); font-weight:600;
}
.ts-cf .ts-cf-done__more a:focus-visible{ outline:2px solid var(--ac,#124933); outline-offset:3px }


/* ==================================================================
   5. THE ASIDE
   ================================================================== */

.ts-cf-aside{ display:grid; gap:18px; min-width:0 }

.ts-cf-card--side{ padding:clamp(20px,2.2vw,28px); border-radius:var(--cf-r-card) }

.ts-cf-side__h{
  margin:0 0 16px;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ac,#124933);
}

.ts-cf-side__list{ margin:0; padding:0; list-style:none; display:grid; gap:16px }

.ts-cf-side__row{ display:flex; gap:13px; align-items:flex-start; min-width:0 }

.ts-cf-side__i{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none;
  border-radius:10px;
  background:var(--ac-soft,#E6EDE9);
  color:var(--ac,#124933);
}
.ts-cf-side__i svg{ width:18px; height:18px }

.ts-cf-side__k{
  display:block;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted,#7A6F66);
}
.ts-cf-side__v{
  display:block;
  margin-top:3px;
  font-size:14.5px; line-height:1.5;
  color:var(--ink,#3A2E25);
  overflow-wrap:anywhere;   /* a long email must wrap, not widen the page */
}

/* A tel:, mailto: or wa.me link is a target, so it gets a real one.
   44px, not the 28px the line box gives it: measured at 1440 these came
   out 28px tall, and they are exactly the links somebody presses with a
   thumb. The height is set here rather than left to the font. */
.ts-cf a.ts-cf-side__v--link{
  display:inline-flex; align-items:center;
  min-height:44px;
  color:var(--ac-dark,#0C3323);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(18,73,51,.28);
}
.ts-cf a.ts-cf-side__v--link:hover{ border-bottom-color:var(--ac,#124933) }
.ts-cf a.ts-cf-side__v--link:focus-visible{ outline:2px solid var(--ac,#124933); outline-offset:3px }

/* --- credentials --------------------------------------------------- */

.ts-cf-card--creds{ background:var(--cream,#F7F3EE) }

.ts-cf-creds__name{
  margin:0 0 14px;
  font-family:var(--serif,"Cormorant Garamond",serif);
  font-size:24px; font-weight:600; line-height:1.15;
  color:var(--ac-dark,#0C3323);
}

.ts-cf-creds__list{ margin:0; padding:0; list-style:none; display:grid; gap:14px }
.ts-cf-creds__list li{ display:flex; gap:13px; align-items:flex-start; min-width:0 }

.ts-cf-creds__k{ display:block; font-size:13.5px; line-height:1.45; color:var(--ink,#3A2E25) }
.ts-cf-creds__v{
  display:block;
  margin-top:3px;
  font-size:13px; letter-spacing:.03em;
  color:var(--muted,#7A6F66);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.ts-cf-creds__ta{ display:flex; gap:13px; align-items:center; margin:16px 0 0 }
.ts-cf .ts-cf-creds__ta a{
  min-height:44px;
  display:inline-flex; align-items:center;
  font-size:13.5px; font-weight:600;
  color:var(--ac-dark,#0C3323);
  text-decoration:underline; text-underline-offset:3px;
}
.ts-cf .ts-cf-creds__ta a:focus-visible{ outline:2px solid var(--ac,#124933); outline-offset:3px }


/* ==================================================================
   6. WHAT HAPPENS NEXT
   ================================================================== */

.ts-cf-steps{
  padding-block:clamp(34px,4.6vw,66px);
  background:var(--cream,#F7F3EE);
  border-top:1px solid var(--line,#E6E0D8);
}

.ts-cf-steps__h{
  margin:0 0 clamp(20px,2.4vw,32px);
  font-size:clamp(21px,2.4vw,30px); font-weight:700; line-height:1.2;
  color:var(--ink,#3A2E25);
  text-wrap:balance;
}

.ts-cf-steps__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(14px,2vw,22px);
  margin:0; padding:0; list-style:none;
  counter-reset:ts-cf-step;
}

.ts-cf-step{
  position:relative;
  padding:24px 22px;
  background:#fff;
  border:1px solid var(--line,#E6E0D8);
  border-radius:var(--cf-r-card);
  counter-increment:ts-cf-step;
}

/* A gold hairline capping the card, the same flourish country.css uses. */
.ts-cf-step::before{
  content:"";
  position:absolute; inset:0 auto auto 22px;
  width:34px; height:2px;
  background:var(--gold,#EAB924);
  border-radius:2px;
}

.ts-cf-step__i{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  margin-bottom:14px;
  border-radius:12px;
  background:var(--ac-soft,#E6EDE9);
  color:var(--ac,#124933);
}
.ts-cf-step__i svg{ width:21px; height:21px }

.ts-cf-step__h{ margin:0 0 8px; font-size:17px; font-weight:700; line-height:1.3; color:var(--ink,#3A2E25) }
.ts-cf-step__p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--muted,#7A6F66) }


/* ==================================================================
   7. SMALL SCREENS
   ================================================================== */

@media (max-width:520px){
  /* The success panel's icon and text stop fighting for the same row. */
  .ts-cf-card--done{ flex-direction:column }

  /* Three number fields will not sit side by side at 390px. */
  .ts-cf-rows--trio{ grid-template-columns:minmax(0,1fr) }

  /* Full-width send button: it is the one thing on the page that has
     to be impossible to miss with a thumb. */
  .ts-cf-send{ flex-direction:column; align-items:stretch }
  .ts-cf .ts-cf-send .ts-cf-btn{ width:100% }

}

/* Somebody who has asked for less movement gets none of it. */
@media (prefers-reduced-motion:reduce){
  .ts-cf *{ transition:none !important; animation:none !important }
}

/* The form is the page; a printed copy of it is not useful, but a
   printed copy of the address and the licence number is. */
@media print{
  .ts-cf-hero, .ts-cf-steps{ background:#fff; color:#000 }
  .ts-cf-card--form{ display:none }
  .ts-cf-h1, .ts-cf-kick, .ts-cf-sf{ color:#000 }
}