/*
Theme Name: Lawyer in Dubai
Theme URI: https://lawyerindubai.ae
Description: Child theme for lawyerindubai.ae. Carries the approved design system:
  Barlow Condensed headings on a charcoal, warm white and signal red palette, with
  page content built entirely from core Gutenberg blocks. No shortcodes, no page
  builder, no per-instance CSS.
Author: SoftGlaze
Template: generatepress
Version: 0.7.35
Requires at least: 6.4
Tested up to: 7.1
License: GNU General Public License v2 or later
Text Domain: lid-child
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  --lid-masthead-pad: 20px;
  --lid-ink: #101010;
  --lid-ink-2: #2B2B2B;
  --lid-paper: #FBF9F6;
  --lid-paper-2: #F4F0E9;
  --lid-white: #FFFFFF;
  --lid-signal: #C4442A;
  --lid-signal-ink: #A3351F;
  --lid-signal-deep: #7A2716;
  --lid-signal-pale: #FBEFEA;
  --lid-signal-edge: #EFC9BC;
  --lid-sand: #E8DFD2;
  --lid-sand-ink: #3E3A34;
  --lid-line: #DDD6CA;
  --lid-line-soft: #EDE7DC;
  --lid-line-hard: #C9C2B4;
  --lid-body: #55514B;
  --lid-mute: #6A665F;
  --lid-dim: #8A857D;
  --lid-on-dark: #C6C2BA;

  --lid-radius: 8px;
  --lid-page: 1280px;
  --lid-gutter: clamp(20px, 4.4vw, 56px);
  --lid-measure: 76ch;

  --lid-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --lid-text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   2. GeneratePress neutralisation
   Scoped to body.lid-site so a future page that wants GeneratePress's own
   chrome can still have it by removing the class.
   ========================================================================== */

/* GeneratePress renders its own header and footer. The site supplies both
   from the child theme, so the parent's are removed in functions.php and
   hidden here as well, because remove_action on a GeneratePress hook is
   known to miss when the callback is registered at a non-default priority. */
body.lid-site .site-header,
body.lid-site .site-footer,
body.lid-site .footer-widgets,
body.lid-site .site-info {
  display: none;
}

/* The page title block and sidebar squeeze a block-built page to about 840px. */
body.lid-site.page .entry-header,
body.lid-site.page .sidebar,
body.lid-site.page .page-header {
  display: none;
}

/* GeneratePress caps #page at container_width and puts margins on #main.
   Both have to go before a band can reach the window edge with width:100%,
   which is the only safe full bleed: 100vw counts the scrollbar, the page
   does not. */
body.lid-site #page.site {
  max-width: 100%;
  margin: 0;
}

body.lid-site #main.site-main {
  margin: 0;
  padding: 0;
}

/* #content.site-content carries 20px of side padding of its own. Measured on
   this site: it held every band 39px short of the window while every other
   ancestor in the chain already read margin 0, padding 0, which is what makes
   this one hard to spot by reading the CSS rather than the page. */
body.lid-site #content.site-content {
  padding: 0;
}

body.lid-site #primary.content-area {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

body.lid-site .inside-article {
  padding: 0;
  max-width: none;
  background: none;
}

body.lid-site.separate-containers .inside-article,
body.lid-site.separate-containers .site-main {
  background: none;
  margin: 0;
}

body.lid-site .entry-content {
  margin-top: 0;
}

/* Two default top margins collapse through every empty wrapper and show as
   blank space above a page's first band. */
body.lid-site.page #main.site-main,
body.lid-site.page .entry-content {
  margin-top: 0;
}

/* core/group wraps its children in .wp-block-group__inner-container, so any
   grid or flex on the group itself sees exactly one child. */
body.lid-site .wp-block-group__inner-container {
  display: contents;
}

/* GeneratePress puts padding:40px and max-width:1200px on that same wrapper,
   which is a hard line break two levels above the paragraph. */
body.lid-site .wp-block-group__inner-container,
body.lid-site .entry-content > .wp-block-group > .wp-block-group__inner-container {
  padding: 0;
  margin-inline: 0;
  max-inline-size: none;
}

/* vw-based full bleed grows a horizontal scrollbar on any page tall enough to
   scroll. clip rather than hidden, because hidden makes body a scroll
   container and breaks position:sticky. */
html,
body.lid-site {
  overflow-x: clip;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

body.lid-site {
  background: var(--lid-paper);
  color: var(--lid-ink);
  font-family: var(--lid-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.lid-site :where(.entry-content) :where(h1, h2, h3, h4, h5, h6),
body.lid-site :where(.lid-h) {
  font-family: var(--lid-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.08;
  color: var(--lid-ink);
  margin: 0 0 0.4em 0;
}

body.lid-site :where(.entry-content) :where(h1) { font-size: clamp(34px, 5.2vw, 54px); }
body.lid-site :where(.entry-content) :where(h2) { font-size: clamp(28px, 3.8vw, 40px); }
body.lid-site :where(.entry-content) :where(h3) { font-size: clamp(22px, 2.6vw, 27px); }
body.lid-site :where(.entry-content) :where(h4) { font-size: clamp(19px, 2.1vw, 22px); }

body.lid-site :where(.entry-content) :where(p, li) {
  color: var(--lid-body);
}

body.lid-site :where(.entry-content) :where(a) {
  color: var(--lid-signal-ink);
  text-underline-offset: 3px;
}

body.lid-site :where(.entry-content) :where(a):hover {
  color: var(--lid-signal-deep);
}

body.lid-site :where(.entry-content) :where(strong) {
  color: var(--lid-ink);
  font-weight: 700;
}

/* ==========================================================================
   4. Bands and measure
   Every top level block in the content is a full width band. Bare prose is
   given the page measure so it never runs the whole window.
   ========================================================================== */

body.lid-site .entry-content > .wp-block-group {
  width: 100%;
  margin-block: 0;
}

body.lid-site .lid-wrap,
body.lid-site .entry-content > :where(p, h2, h3, h4, ul, ol, figure, table, .wp-block-table, .wp-block-buttons, .wp-block-image, .wp-block-quote) {
  max-width: var(--lid-page);
  margin-inline: auto;
  padding-inline: var(--lid-gutter);
  box-sizing: border-box;
}

body.lid-site .entry-content > :where(p, ul, ol) {
  margin-block: 0 1.05em;
}

body.lid-site .entry-content > :where(h2) { margin-block: 1.5em 0.45em; }
body.lid-site .entry-content > :where(h3) { margin-block: 1.25em 0.4em; }

/* A band's own inner padding. The gutter is on .lid-wrap, so the band only
   owns the vertical rhythm and the surface colour. */
body.lid-site .lid-band {
  padding-block: clamp(30px, 4.6vw, 52px);
}

body.lid-site .lid-band--tight { padding-block: clamp(22px, 3vw, 34px); }
body.lid-site .lid-band--ink { background: var(--lid-ink); color: var(--lid-paper); }
body.lid-site .lid-band--sand { background: var(--lid-sand); color: var(--lid-sand-ink); }
body.lid-site .lid-band--white { background: var(--lid-white); }
body.lid-site .lid-band--signal { background: var(--lid-signal); color: var(--lid-white); }

body.lid-site .lid-band--ink :where(h1, h2, h3, h4, .lid-h) { color: var(--lid-paper); }
body.lid-site .lid-band--ink :where(p, li) { color: var(--lid-on-dark); }
body.lid-site .lid-band--ink a { color: #E8B7A6; }
body.lid-site .lid-band--sand :where(h1, h2, h3, h4, .lid-h) { color: var(--lid-ink); }
body.lid-site .lid-band--sand :where(p, li) { color: var(--lid-sand-ink); }
body.lid-site .lid-band--signal :where(h1, h2, h3, h4, .lid-h) { color: var(--lid-white); }
body.lid-site .lid-band--signal :where(p, li) { color: #FFE4DC; }

body.lid-site .lid-band--paper2 { background: var(--lid-paper-2); }

/* The breadcrumb band: sand, one line, tight. */
body.lid-site .lid-band--crumbs { padding-block: 11px; font-size: 14px; }
body.lid-site .lid-band--crumbs p { margin: 0; font-size: 14px; color: var(--lid-mute); }
body.lid-site .lid-band--crumbs a { color: var(--lid-signal-ink); text-decoration: none; }
body.lid-site .lid-band--crumbs a:hover { text-decoration: underline; }

/* A band that has no inner gutter, for a full bleed photograph or a row of
   strips that must run edge to edge. */
body.lid-site .lid-band--flush { padding-block: 0; }
body.lid-site .lid-band--flush > .lid-wrap { max-width: none; padding-inline: 0; }

body.lid-site .lid-band--rule-top { border-top: 1px solid var(--lid-line); }
body.lid-site .lid-band--rule-bottom { border-bottom: 1px solid var(--lid-line); }

/* ==========================================================================
   5. Chrome
   ========================================================================== */

.lid-utility {
  background: var(--lid-ink);
  color: #E5E1D9;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.lid-utility__in {
  max-width: var(--lid-page);
  margin-inline: auto;
  padding: 9px var(--lid-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.lid-utility__record {
  font-family: var(--lid-head);
  text-transform: uppercase;
}

.lid-utility a { color: #E8B7A6; text-decoration: none; }
.lid-utility a:hover { text-decoration: underline; }

.lid-masthead {
  background: var(--lid-ink);
  color: var(--lid-paper);
  border-top: 1px solid var(--lid-ink-2);
  position: relative;
  z-index: 20;
}

.lid-masthead__in {
  max-width: var(--lid-page);
  margin-inline: auto;
  padding: 16px var(--lid-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* The wordmark is now an image, with the text kept as the fallback for the
   case where the attachment goes missing. */
.lid-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--lid-head);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lid-paper);
  text-decoration: none;
  flex: 0 0 auto;
}

.lid-wordmark img {
  display: block;
  height: 44px;
  width: auto;
}

.lid-foot__logo {
  display: inline-block;
  margin: 0 0 16px 0;
  text-decoration: none;
  color: var(--lid-paper);
  font-family: var(--lid-head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lid-foot__logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* The footer already prints the name underneath, so with a logo above it the
   text name is a duplicate. */
.lid-foot__logo + .lid-foot__name { display: none; }

@media (max-width: 520px) {
  .lid-wordmark img { height: 34px; }
}

.lid-nav {
  display: flex;
  gap: 26px;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
}

.lid-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The bar itself. Levels two and deeper are panels, styled below. */
.lid-nav__list--1 {
  display: flex;
  gap: 26px;
  align-items: center;
}

.lid-nav a {
  color: var(--lid-paper);
  text-decoration: none;
}

.lid-nav a:hover,
.lid-nav a:focus-visible,
.lid-nav .is-current > .lid-nav__row > .lid-nav__link {
  color: #E8B7A6;
}

/* -- the multi level menu ------------------------------------------------
 * A parent keeps its own link and gains a button beside it, so nothing in
 * here is a link to nowhere. Desktop opens a panel on hover and on keyboard
 * focus; the button is what opens it on touch and on the accordion.
 * --------------------------------------------------------------------- */

.lid-nav__item { position: relative; }

.lid-nav__row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lid-nav__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
}

.lid-nav__chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.lid-nav__more:hover,
.lid-nav__more:focus-visible { color: #E8B7A6; }

.lid-nav__item--l1 > .lid-nav__row > .lid-nav__link { padding-block: 6px; }

/* Panels. Hidden with visibility rather than display so a keyboard user can
   reach them and so the width is measurable before they open. */
.lid-nav__list--2,
.lid-nav__list--3,
.lid-nav__list--4 {
  position: absolute;
  z-index: 40;
  min-width: 256px;
  max-width: 320px;
  padding: 8px;
  background: var(--lid-ink);
  border: 1px solid var(--lid-ink-2);
  border-radius: var(--lid-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  /* A closed panel must not be hoverable even if something inside it ends up
     visible again. Second guard on the same bug. */
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.lid-nav__list--2 { top: 100%; left: -10px; margin-top: 10px; }

/* Levels three and four fly out sideways from their row. */
.lid-nav__list--3,
.lid-nav__list--4 { top: -9px; left: 100%; margin-left: 6px; }

.lid-nav__item:hover > ul,
.lid-nav__item:focus-within > ul,
.lid-nav__item.is-open > ul {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* pointer-events INHERITS, and the rule above only reaches the direct child.
 * Every list nested deeper kept pointer-events: none from the closed state
 * and passed it down, so inside the practice areas panel only the six column
 * headings could be clicked: 38 of the 44 links were dead to the mouse while
 * looking perfectly normal.
 *
 * Re-enabling it on every descendant list is safe because visibility is what
 * actually keeps a closed panel inert, and a visibility: hidden element is
 * not hit tested whatever its pointer-events say. */
.lid-nav__item:hover ul,
.lid-nav__item:focus-within ul,
.lid-nav__item.is-open ul { pointer-events: auto; }

.lid-nav__item.is-open > .lid-nav__row > .lid-nav__more .lid-nav__chevron {
  transform: translateY(1px) rotate(-135deg);
}

.lid-nav__list--2 .lid-nav__row,
.lid-nav__list--3 .lid-nav__row,
.lid-nav__list--4 .lid-nav__row {
  justify-content: space-between;
  border-radius: 6px;
}

.lid-nav__list--2 .lid-nav__link,
.lid-nav__list--3 .lid-nav__link,
.lid-nav__list--4 .lid-nav__link {
  flex: 1 1 auto;
  padding: 9px 10px;
  line-height: 1.35;
}

.lid-nav__list--2 .lid-nav__row:hover,
.lid-nav__list--3 .lid-nav__row:hover,
.lid-nav__list--4 .lid-nav__row:hover,
.lid-nav__list--2 .lid-nav__row:focus-within,
.lid-nav__list--3 .lid-nav__row:focus-within,
.lid-nav__list--4 .lid-nav__row:focus-within { background: var(--lid-ink-2); }

/* -- the wide practice areas panel ---------------------------------------
 * Six groups, their practice areas and the individual matters, all visible
 * at once in one panel. The alternative was a fourth flyout, which at 1280
 * measured left 526 against the second panel's 532: it covered its own
 * grandparent.
 * --------------------------------------------------------------------- */

.lid-masthead { position: relative; }

/* Static, so the panel anchors to the masthead and can span the page. */
.lid-nav__item--mega,
.lid-nav__item--mega .lid-nav__item { position: static; }

.lid-nav__item--mega > .lid-nav__list--2 {
  /* Flush to the bar, with no dead strip to fall through.
   *
   * This item is position: static so the panel can span the page, which
   * means top: 100% resolves against .lid-masthead rather than against the
   * item. Measured: the item ends at y 97, the masthead at y 117, so the
   * panel opened 20px below the thing that opened it. Moving the pointer
   * down off "Practice areas" crossed a strip belonging to neither, :hover
   * was lost and the panel closed before it could be reached. The menu
   * could be opened and not used.
   *
   * A covering pseudo element was the first attempt and does not work here:
   * the panel carries overflow-y: auto for short screens, which clips
   * anything drawn outside it, so the cover never received the pointer.
   *
   * The 20px is the bottom padding of .lid-masthead__in plus the few pixels
   * the item is short of the row. If that padding changes, this changes with
   * it, which is why it reads from the same token. */
  top: calc(100% - var(--lid-masthead-pad, 20px));
  left: 50%;
  right: auto;
  width: min(1120px, calc(100vw - 32px));
  min-width: 0;
  max-width: none;
  padding: 20px 22px 14px 22px;
  columns: 3;
  column-gap: 26px;
  /* A short laptop screen is 768 tall and the panel measures 646. */
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  transform: translateX(-50%) translateY(6px);
}

.lid-nav__item--mega:hover > .lid-nav__list--2,
.lid-nav__item--mega:focus-within > .lid-nav__list--2,
.lid-nav__item--mega.is-open > .lid-nav__list--2 { transform: translateX(-50%); }


.lid-nav__item--mega .lid-nav__item--l2 {
  break-inside: avoid;
  margin-bottom: 16px;
}

/* Inside the panel nothing floats: every level is already on screen. */
.lid-nav__item--mega .lid-nav__list--3,
.lid-nav__item--mega .lid-nav__list--4 {
  position: static;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0 0 0 10px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  /* NOT visible. visibility is inherited, and setting it explicitly here
     un-hid these lists while their closed parent panel was still opacity 0.
     An opacity 0 element is invisible but still hit tested, so a 1120 by 646
     panel of live links sat on top of the hero: pointing anywhere in the hero
     landed on a link reading "Gratuity calculator" and opened the menu. */
  visibility: inherit;
  transform: none;
}

.lid-nav__item--mega .lid-nav__list--4 {
  border-left: 1px solid var(--lid-ink-2);
  margin-left: 10px;
}

/* Only the buttons INSIDE the panel go: every level under them is
   already on screen. The bar's own chevron stays. */
.lid-nav__item--mega .lid-nav__list--2 .lid-nav__more { display: none; }

/* The group name reads as a column heading, not as another link in a list. */
.lid-nav__item--mega .lid-nav__item--l2 > .lid-nav__row > .lid-nav__link {
  font-family: var(--lid-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A9A49A;
  padding: 4px 10px 6px 10px;
}

.lid-nav__item--mega .lid-nav__item--l3 > .lid-nav__row > .lid-nav__link {
  font-weight: 600;
}

.lid-nav__item--mega .lid-nav__item--l4 > .lid-nav__row > .lid-nav__link {
  font-size: 14px;
  color: #C9C4BA;
  padding-block: 6px;
}

/* A panel that would run off the right edge opens to the left instead. */
.lid-nav__item--flip > .lid-nav__list--2 { left: auto; right: -10px; }
.lid-nav__item--flip > .lid-nav__list--3,
.lid-nav__item--flip > .lid-nav__list--4 {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 6px;
}

.lid-nav__call {
  background: var(--lid-signal);
  color: var(--lid-white) !important;
  padding: 10px 20px;
  font-weight: 700;
  border-radius: var(--lid-radius);
  white-space: nowrap;
}

.lid-nav__call:hover { background: var(--lid-signal-ink); }

.lid-nav__toggle {
  display: none;
  background: none;
  border: 1px solid #4A473F;
  border-radius: var(--lid-radius);
  color: var(--lid-paper);
  font-family: var(--lid-head);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}

.lid-foot {
  background: var(--lid-ink);
  color: var(--lid-on-dark);
}

.lid-foot__in {
  max-width: var(--lid-page);
  margin-inline: auto;
  padding: 44px var(--lid-gutter) 0 var(--lid-gutter);
}

.lid-foot__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--lid-ink-2);
}

.lid-foot__name {
  font-family: var(--lid-head);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lid-paper);
  margin-bottom: 12px;
}

.lid-foot__addr { font-size: 15px; line-height: 1.7; }
.lid-foot__tel { font-size: 15px; margin-top: 12px; color: var(--lid-paper); font-weight: 700; }
.lid-foot__tel a { color: var(--lid-paper); text-decoration: none; }

.lid-foot__head {
  font-family: var(--lid-head);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lid-dim);
  margin-bottom: 12px;
}

.lid-foot__cols ul { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 2.1; }
.lid-foot__cols ul a { color: var(--lid-on-dark); text-decoration: none; display: block; }
.lid-foot__cols ul a:hover { color: var(--lid-paper); }

.lid-foot__legal {
  padding: 20px 0 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.lid-foot__disclaimer {
  font-size: 13px;
  line-height: 1.65;
  color: var(--lid-dim);
  max-width: 760px;
  margin: 0;
}

.lid-foot__licence {
  font-family: var(--lid-head);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lid-dim);
  white-space: nowrap;
}

/* ==========================================================================
   6. Components
   Every one of these is a core block carrying a class. Nothing here needs a
   shortcode or a custom block type.
   ========================================================================== */

/* -- buttons ------------------------------------------------------------- */
/* A core/button's wrapper div and its inner link both carry the className, so
   padding written once lands twice. Style the link, reset the wrapper. */

body.lid-site .wp-block-button.lid-btn,
body.lid-site .wp-block-button.lid-btn-ghost,
body.lid-site .wp-block-button.lid-btn-light {
  padding: 0;
  border: 0;
  background: none;
  margin: 0;
}

body.lid-site .lid-btn .wp-block-button__link,
body.lid-site a.lid-btn:not(.wp-block-button),
body.lid-site button.lid-btn {
  display: inline-block;
  background: var(--lid-signal);
  color: var(--lid-white);
  border: 1px solid var(--lid-signal);
  border-radius: var(--lid-radius);
  padding: 14px 26px;
  font-family: var(--lid-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}

body.lid-site .lid-btn .wp-block-button__link:hover,
body.lid-site a.lid-btn:not(.wp-block-button):hover,
body.lid-site button.lid-btn:hover {
  background: var(--lid-signal-ink);
  border-color: var(--lid-signal-ink);
  color: var(--lid-white);
}

body.lid-site .lid-btn-ghost .wp-block-button__link,
body.lid-site a.lid-btn-ghost:not(.wp-block-button) {
  display: inline-block;
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
  border-radius: var(--lid-radius);
  padding: 13px 26px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}

body.lid-site .lid-btn-ghost .wp-block-button__link:hover,
body.lid-site a.lid-btn-ghost:not(.wp-block-button):hover {
  background: rgba(255, 255, 255, 0.08);
}

body.lid-site .lid-band--sand .lid-btn-ghost .wp-block-button__link:hover,
body.lid-site .lid-band--white .lid-btn-ghost .wp-block-button__link:hover {
  background: rgba(28, 27, 25, 0.05);
}

body.lid-site .lid-btn-light .wp-block-button__link {
  display: inline-block;
  background: var(--lid-white);
  color: var(--lid-signal);
  border: 1px solid var(--lid-white);
  border-radius: var(--lid-radius);
  padding: 14px 26px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}

body.lid-site .wp-block-buttons.lid-actions {
  gap: 12px;
  align-items: center;
}

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

body.lid-site .lid-hero {
  position: relative;
  background: var(--lid-ink);
  color: var(--lid-paper);
  overflow: hidden;
}

body.lid-site .lid-hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

body.lid-site .lid-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The overlay the client asked to keep. Dense on the left where the text
   sits, so the photograph still reads on the right. */
body.lid-site .lid-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(28, 27, 25, 0.95) 0%, rgba(28, 27, 25, 0.78) 42%, rgba(28, 27, 25, 0.42) 100%);
}

body.lid-site .lid-hero__in {
  position: relative;
  z-index: 2;
  max-width: var(--lid-page);
  margin-inline: auto;
  padding: clamp(44px, 6vw, 88px) var(--lid-gutter);
}

body.lid-site .lid-hero__in > * { max-width: 760px; }

body.lid-site .lid-hero :where(h1) {
  color: var(--lid-paper);
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.03;
  margin: 8px 0 14px 0;
}

body.lid-site .lid-hero :where(p) {
  color: #D8D4CC;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
}

/* Compact typographic hero, used where the reader arrived from a search with
   a question rather than to be impressed. */
body.lid-site .lid-hero--flat { background: var(--lid-ink); }
body.lid-site .lid-hero--flat .lid-hero__in { padding-block: clamp(36px, 4.4vw, 48px); }

body.lid-site .lid-rule {
  width: 64px;
  height: 4px;
  background: var(--lid-signal);
  border-radius: var(--lid-radius);
  margin-bottom: 20px;
}

body.lid-site .lid-eyebrow {
  font-family: var(--lid-head);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lid-dim);
  margin: 0 0 8px 0;
}

body.lid-site .lid-band--ink .lid-eyebrow { color: #E8B7A6; }
body.lid-site .lid-hero .lid-eyebrow { color: #E8B7A6; }
body.lid-site .lid-eyebrow--signal { color: var(--lid-signal); }

/* -- trust strip --------------------------------------------------------- */

body.lid-site .lid-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--lid-line);
  background: var(--lid-white);
}

body.lid-site .lid-trust > * {
  padding: 18px var(--lid-gutter);
  border-right: 1px solid var(--lid-line);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

body.lid-site .lid-trust > *:last-child { border-right: 0; }

/* -- card grids ---------------------------------------------------------- */

body.lid-site .lid-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

body.lid-site .lid-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.lid-site .lid-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.lid-site .lid-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

body.lid-site .lid-card {
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-radius: var(--lid-radius);
  padding: 22px;
  margin: 0;
}

body.lid-site .lid-card > :last-child { margin-bottom: 0; }

body.lid-site .lid-card :where(h2, h3, h4) {
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 7px 0;
}

body.lid-site .lid-card :where(p).lid-card__title {
  font-family: var(--lid-head);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--lid-ink);
  margin: 0 0 7px 0;
}

body.lid-site .lid-card :where(p) {
  font-size: 15px;
  line-height: 1.55;
  color: var(--lid-mute);
  margin: 0 0 12px 0;
}

body.lid-site .lid-card--accent { border-left: 5px solid var(--lid-signal); }
body.lid-site .lid-card--sand { background: var(--lid-sand); border-color: transparent; }
body.lid-site .lid-card--signal { background: var(--lid-signal); border-color: var(--lid-signal); }
body.lid-site .lid-card--signal :where(h2, h3, h4) { color: var(--lid-white); }
body.lid-site .lid-card--signal :where(p) { color: #FFE4DC; }

/* A card that is one big link. The whole tile is clickable, which is what a
   reader in a hurry expects. */
body.lid-site a.lid-card,
body.lid-site .lid-card > a.lid-card__hit {
  display: block;
  text-decoration: none;
  color: var(--lid-ink);
}

body.lid-site a.lid-card:hover { border-color: var(--lid-line-hard); }

body.lid-site .lid-card__more {
  font-size: 14px;
  font-weight: 700;
  color: var(--lid-signal);
  letter-spacing: 0.02em;
}

/* -- image card ---------------------------------------------------------- */
/* The triage tiles: a photograph with the same charcoal gradient the rest of
   the site uses, then a white body. */

body.lid-site .lid-tile {
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-radius: var(--lid-radius);
  overflow: hidden;
  margin: 0;
}

body.lid-site .lid-tile__media {
  position: relative;
  display: block;
  margin: 0;
  line-height: 0;
}

body.lid-site .lid-tile__media img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

body.lid-site .lid-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 27, 25, 0.80) 0%, rgba(28, 27, 25, 0.20) 72%);
}

body.lid-site .lid-tile__body { padding: 17px 20px 19px 20px; }
body.lid-site .lid-tile__body > :last-child { margin-bottom: 0; }

body.lid-site .lid-tile :where(h2, h3, h4) {
  font-size: 23px;
  line-height: 1.12;
  margin: 0 0 5px 0;
}

body.lid-site .lid-tile :where(p) {
  font-size: 15px;
  color: var(--lid-mute);
  margin: 0 0 13px 0;
}

/* -- practice strip ------------------------------------------------------ */

body.lid-site .lid-strip {
  position: relative;
  min-height: 226px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--lid-radius);
  margin: 0;
  text-decoration: none;
}

body.lid-site .lid-strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.lid-site .lid-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 27, 25, 0.96) 0%, rgba(28, 27, 25, 0.35) 100%);
}

body.lid-site .lid-strip__body {
  position: relative;
  z-index: 2;
  padding: 22px;
  color: var(--lid-paper);
}

body.lid-site .lid-strip__body :where(h2, h3) { color: var(--lid-paper); font-size: 26px; }
body.lid-site .lid-strip__body :where(p) { color: #D8D4CC; font-size: 15px; margin: 0; }

/* -- callout ------------------------------------------------------------- */

body.lid-site .lid-callout {
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-left: 5px solid var(--lid-signal);
  border-radius: var(--lid-radius);
  padding: 24px 26px;
  margin: 0;
}

body.lid-site .lid-callout > :last-child { margin-bottom: 0; }
body.lid-site .lid-callout :where(p) { font-size: 18px; line-height: 1.65; color: var(--lid-ink); }

body.lid-site .lid-note {
  background: var(--lid-signal-pale);
  border: 1px solid var(--lid-signal-edge);
  border-radius: var(--lid-radius);
  padding: 18px 22px;
  margin: 0;
}

body.lid-site .lid-note > :last-child { margin-bottom: 0; }
body.lid-site .lid-note :where(h2, h3, h4) { font-size: 20px; color: var(--lid-signal); }
body.lid-site .lid-note :where(p, li) { font-size: 16px; line-height: 1.65; color: var(--lid-ink); }

body.lid-site .lid-limits {
  background: var(--lid-sand);
  border-radius: var(--lid-radius);
  padding: 22px 26px;
  margin: 0;
}

body.lid-site .lid-limits > :last-child { margin-bottom: 0; }

/* -- numbered steps ------------------------------------------------------ */

body.lid-site .lid-steps { counter-reset: lid-step; }

/* Grid, not flex. The heading and the paragraph are siblings of the numeral,
   so under flex they line up beside each other instead of stacking. Placing
   the numeral in column one and every real child in column two gives the
   stacked text column the design has, without wrapping them in another div. */
body.lid-site .lid-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--lid-line-soft);
  margin: 0;
}

body.lid-site .lid-step > * {
  grid-column: 2;
}

body.lid-site .lid-step::before {
  counter-increment: lid-step;
  content: counter(lid-step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  height: 38px;
  border-radius: var(--lid-radius);
  background: var(--lid-ink);
  color: var(--lid-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lid-head);
  font-weight: 700;
  font-size: 18px;
}

body.lid-site .lid-step > :last-child { margin-bottom: 0; }
body.lid-site .lid-step :where(h2, h3, h4) { font-size: 20px; margin: 0 0 4px 0; }
body.lid-site .lid-step :where(p) { font-size: 16px; line-height: 1.65; margin: 0; }

/* The guide variant puts a large sand numeral in the margin instead. */
body.lid-site .lid-steps--margin .lid-step {
  border-bottom: 0;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 22px;
  padding: 0 0 26px 0;
}

body.lid-site .lid-steps--margin .lid-step::before {
  width: 54px;
  height: auto;
  background: none;
  color: var(--lid-sand);
  font-size: 44px;
  line-height: 0.95;
  border-radius: 0;
  justify-content: flex-start;
}

/* -- checklist ----------------------------------------------------------- */

body.lid-site ul.lid-checks {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.lid-site ul.lid-checks li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--lid-ink);
}

body.lid-site ul.lid-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--lid-signal);
  font-weight: 700;
}

body.lid-site ul.lid-bullets { list-style: none; margin: 0; padding: 0; }

body.lid-site ul.lid-bullets li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--lid-ink);
}

body.lid-site ul.lid-bullets li::before {
  content: "\25CF";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--lid-signal);
  font-size: 12px;
}

/* -- chips --------------------------------------------------------------- */

body.lid-site .lid-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.lid-site .lid-chips li { margin: 0; }

body.lid-site .lid-chips a,
body.lid-site .lid-chips > li > span {
  display: inline-block;
  background: var(--lid-white);
  border: 1px solid var(--lid-line-hard);
  border-radius: var(--lid-radius);
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lid-ink);
  text-decoration: none;
}

body.lid-site .lid-chips a:hover { border-color: var(--lid-ink); }

/* -- data table ---------------------------------------------------------- */

body.lid-site .wp-block-table.lid-table { margin: 0; }

body.lid-site .lid-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-radius: var(--lid-radius);
  overflow: hidden;
}

body.lid-site .lid-table th,
body.lid-site .lid-table td {
  text-align: left;
  padding: 13px 22px;
  border: 0;
  border-bottom: 1px solid var(--lid-line-soft);
  font-size: 16px;
  color: var(--lid-body);
  vertical-align: top;
}

body.lid-site .lid-table tr:last-child td { border-bottom: 0; }

body.lid-site .lid-table th {
  font-family: var(--lid-head);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lid-dim);
  font-weight: 700;
}

body.lid-site .lid-table tbody th {
  width: 230px;
  color: var(--lid-ink);
  font-family: var(--lid-text);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

/* -- fee cards ----------------------------------------------------------- */

body.lid-site .lid-fee {
  border-radius: var(--lid-radius);
  padding: 24px 22px;
  margin: 0;
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
}

body.lid-site .lid-fee > :last-child { margin-bottom: 0; }

body.lid-site .lid-fee__label {
  font-family: var(--lid-head);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lid-dim);
  margin: 0 0 7px 0;
}

body.lid-site .lid-fee :where(h2, h3, h4) {
  font-size: 26px;
  line-height: 1.12;
  margin: 0 0 9px 0;
}

body.lid-site .lid-fee :where(p) { font-size: 15px; line-height: 1.55; color: var(--lid-body); margin: 0; }

body.lid-site .lid-fee--lead {
  background: var(--lid-signal);
  border-color: var(--lid-signal);
}

body.lid-site .lid-fee--lead .lid-fee__label { color: #FFD3C8; }
body.lid-site .lid-fee--lead :where(h2, h3, h4) { color: var(--lid-white); font-size: 36px; line-height: 1.05; }
body.lid-site .lid-fee--lead :where(p) { color: #FFE4DC; }

/* -- FAQ ----------------------------------------------------------------- */

body.lid-site .lid-faq__item {
  padding: 18px 0;
  border-bottom: 1px solid var(--lid-line);
  margin: 0;
}

body.lid-site .lid-faq__item > :last-child { margin-bottom: 0; }
body.lid-site .lid-faq__item :where(h2, h3, h4) { font-size: 22px; margin: 0 0 7px 0; }
body.lid-site .lid-faq__item :where(p) { font-size: 16px; line-height: 1.65; max-width: 900px; margin: 0; }

/* -- contents rail ------------------------------------------------------- */

body.lid-site .lid-split {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

body.lid-site .lid-split--form { grid-template-columns: minmax(0, 1fr) 440px; }
body.lid-site .lid-split > * { margin: 0; }

body.lid-site .lid-rail {
  position: sticky;
  top: 20px;
}

body.lid-site .lid-rail__box {
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-radius: var(--lid-radius);
  padding: 18px 20px;
}

body.lid-site .lid-rail ul { list-style: none; margin: 0; padding: 0; }

body.lid-site .lid-rail li a {
  display: block;
  padding: 9px 0;
  font-size: 15px;
  color: var(--lid-body);
  text-decoration: none;
  border-bottom: 1px solid #E6E0D5;
}

body.lid-site .lid-rail li:last-child a { border-bottom: 0; }
body.lid-site .lid-rail li a:hover { color: var(--lid-signal); }

body.lid-site .lid-prose { max-width: 860px; }
body.lid-site .lid-prose > :first-child { margin-top: 0; }
body.lid-site .lid-prose :where(p, li) { font-size: 17px; line-height: 1.75; }

/* -- article furniture --------------------------------------------------- */

body.lid-site .lid-article__head { text-align: center; }
body.lid-site .lid-article__head > * { margin-inline: auto; }
body.lid-site .lid-article__head :where(h1) { max-width: 860px; }
body.lid-site .lid-article__head :where(p) { max-width: 760px; font-size: 21px; line-height: 1.6; }

body.lid-site .lid-byline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--lid-mute);
  border-top: 1px solid var(--lid-line);
  border-bottom: 1px solid var(--lid-line);
  padding: 11px 0;
  margin: 0;
}

body.lid-site .lid-narrow { max-width: 800px; margin-inline: auto; }

body.lid-site .lid-pullquote {
  border-left: 5px solid var(--lid-signal);
  padding: 6px 0 6px 24px;
  margin: 0;
}

body.lid-site .lid-pullquote p {
  font-family: var(--lid-head);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.28;
  color: var(--lid-ink);
  margin: 0;
}

body.lid-site .lid-author {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-radius: var(--lid-radius);
  padding: 22px;
  margin: 0;
}

body.lid-site .lid-author > :last-child { margin-bottom: 0; }

body.lid-site .lid-figure { margin: 0; position: relative; line-height: 0; }
body.lid-site .lid-figure img { width: 100%; display: block; object-fit: cover; }

body.lid-site .lid-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 27, 25, 0.82) 0%, rgba(28, 27, 25, 0.18) 62%);
}

body.lid-site .lid-figure figcaption {
  position: absolute;
  left: var(--lid-gutter);
  right: var(--lid-gutter);
  bottom: 22px;
  z-index: 2;
  color: #E5E1D9;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

body.lid-site .lid-figure--plain::after { background: rgba(28, 27, 25, 0.32); }

/* -- placeholder --------------------------------------------------------- */
/* A field the client still owes. Deliberately visible rather than invented. */

body.lid-site .lid-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed #4A473F;
  border-radius: var(--lid-radius);
  color: var(--lid-on-dark);
  font-size: 13px;
  line-height: 1.4;
  padding: 12px;
  margin: 0;
}

/* -- licence chip -------------------------------------------------------- */

body.lid-site .lid-licence {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-radius: var(--lid-radius);
  padding: 11px 18px;
  margin: 0;
  font-size: 15px;
}

body.lid-site .lid-licence strong { font-size: 19px; }

/* -- back to top --------------------------------------------------------
 * Replaces the GeneratePress control, which was an <a href="#">.
 * --------------------------------------------------------------------- */

body.lid-site .lid-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lid-ink);
  color: var(--lid-paper);
  border: 1px solid var(--lid-ink-2);
  border-radius: var(--lid-radius);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

body.lid-site .lid-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

body.lid-site .lid-top:hover,
body.lid-site .lid-top:focus-visible { background: var(--lid-signal); }

body.lid-site .lid-top__arrow {
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(2px) rotate(45deg);
}

/* -- breadcrumb ---------------------------------------------------------- */

body.lid-site .lid-crumbs {
  background: var(--lid-sand);
  font-size: 14px;
}

body.lid-site .lid-crumbs__in {
  max-width: var(--lid-page);
  margin-inline: auto;
  padding: 11px var(--lid-gutter);
}

body.lid-site .lid-crumbs a { color: var(--lid-signal-ink); text-decoration: none; }
body.lid-site .lid-crumbs a:hover { text-decoration: underline; }
body.lid-site .lid-crumbs span { color: var(--lid-mute); }

/* -- split media band ---------------------------------------------------- */

body.lid-site .lid-mediasplit {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  align-items: stretch;
}

body.lid-site .lid-mediasplit > * { margin: 0; }

body.lid-site .lid-mediasplit__media { position: relative; line-height: 0; }

body.lid-site .lid-mediasplit__media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
}

body.lid-site .lid-mediasplit__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 25, 0.34);
}

body.lid-site .lid-mediasplit__body {
  padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.lid-site .lid-mediasplit__body > :last-child { margin-bottom: 0; }

/* -- form ---------------------------------------------------------------- */
/* WPForms is already active on the site, so the real form goes in a core
   Shortcode block, which is a genuine block and stays editable. These rules
   dress it to match everything else. */

body.lid-site .lid-form label {
  display: block;
  font-family: var(--lid-head);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --lid-dim measured 3.66:1 on white at this size and weight, against the
     4.5:1 minimum. These are the labels on the one form the site exists to
     have filled in. --lid-body is 7.50:1. */
  color: var(--lid-body);
  font-weight: 700;
}

body.lid-site .lid-form input[type="text"],
body.lid-site .lid-form input[type="email"],
body.lid-site .lid-form input[type="tel"],
body.lid-site .lid-form textarea,
body.lid-site .lid-form select {
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-radius: var(--lid-radius);
  padding: 13px 15px;
  font-family: var(--lid-text);
  font-size: 16px;
  color: var(--lid-ink);
  width: 100%;
  box-sizing: border-box;
}

body.lid-site .lid-form input:focus,
body.lid-site .lid-form textarea:focus {
  outline: 2px solid var(--lid-signal);
  outline-offset: 1px;
  border-color: var(--lid-signal);
}

body.lid-site .lid-form button[type="submit"],
body.lid-site .lid-form input[type="submit"] {
  background: var(--lid-signal);
  color: var(--lid-white);
  border: 1px solid var(--lid-signal);
  border-radius: var(--lid-radius);
  padding: 14px 26px;
  font-family: var(--lid-text);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

/* -- the contact form ---------------------------------------------------
 * Hand built, because WPForms had no forms and the page rendered no inputs
 * at all. The two result panels are shown with :target, so the whole thing
 * works with JavaScript blocked.
 * --------------------------------------------------------------------- */

body.lid-site .lid-form__form { margin: 0; }

body.lid-site .lid-form__field { margin: 0 0 18px 0; }

body.lid-site .lid-form__req {
  color: var(--lid-signal);
  letter-spacing: 0.06em;
}

body.lid-site .lid-form__hint {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--lid-mute);
  margin: 3px 0 7px 0;
}

body.lid-site .lid-form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 20px 0;
}

body.lid-site .lid-form__check input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--lid-signal);
}

/* This one reads as a sentence, not as a field label. */
body.lid-site .lid-form__check label {
  font-family: var(--lid-text);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lid-ink);
  font-weight: 400;
}

body.lid-site .lid-form__submit { margin: 0 0 14px 0; }

body.lid-site .lid-form__small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lid-mute);
  margin: 0;
}

/* Out of the layout and out of the accessibility tree, not display:none,
   which some automated fillers treat as a signal to skip the field. */
body.lid-site .lid-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body.lid-site .lid-form__result {
  display: none;
  border-radius: var(--lid-radius);
  padding: 18px 20px;
  margin: 0 0 22px 0;
}

body.lid-site .lid-form__result:target { display: block; }

body.lid-site .lid-form__result-head {
  font-family: var(--lid-head);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

body.lid-site .lid-form__result :where(p) { margin: 0 0 6px 0; }
body.lid-site .lid-form__result :where(p):last-child { margin-bottom: 0; }

body.lid-site .lid-form__result--ok {
  background: var(--lid-white);
  border: 2px solid var(--lid-signal);
}

body.lid-site .lid-form__result--ok .lid-form__result-head {
  color: var(--lid-signal-ink);
}

body.lid-site .lid-form__result--bad {
  background: var(--lid-sand);
  border: 2px solid var(--lid-ink);
}

body.lid-site .lid-form__result a {
  color: var(--lid-signal-ink);
  text-decoration: underline;
}

body.lid-site .lid-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--lid-ink) 50%),
                    linear-gradient(135deg, var(--lid-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

body.lid-site .lid-form button[type="submit"]:hover,
body.lid-site .lid-form button[type="submit"]:focus-visible {
  background: var(--lid-signal-ink);
  border-color: var(--lid-signal-ink);
}

body.lid-site .lid-form select:focus {
  outline: 2px solid var(--lid-signal);
  outline-offset: 1px;
  border-color: var(--lid-signal);
}

/* -- the gratuity calculator --------------------------------------------
 * The result is shown as a range on purpose. The law sets the 21 and 30 day
 * multipliers but never states what one day of a monthly wage is worth, and
 * the two readings differ by about 17 per cent. Presenting one of them as
 * the answer would be stating a rule that does not exist.
 * --------------------------------------------------------------------- */

body.lid-site .lid-calc {
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-radius: var(--lid-radius);
  padding: 26px;
}

body.lid-site .lid-calc__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px;
  margin: 0;
}

body.lid-site .lid-calc__field { margin: 0; }

body.lid-site .lid-calc label {
  display: block;
  font-family: var(--lid-head);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lid-body);
}

body.lid-site .lid-calc__hint {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--lid-mute);
  margin: 3px 0 7px 0;
}

body.lid-site .lid-calc input {
  width: 100%;
  box-sizing: border-box;
  background: var(--lid-white);
  border: 1px solid var(--lid-line);
  border-radius: var(--lid-radius);
  padding: 13px 15px;
  font-family: var(--lid-text);
  font-size: 16px;
  color: var(--lid-ink);
}

body.lid-site .lid-calc input:focus {
  outline: 2px solid var(--lid-signal);
  outline-offset: 1px;
  border-color: var(--lid-signal);
}

body.lid-site .lid-calc__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 0 0;
}

body.lid-site .lid-calc button {
  cursor: pointer;
  font-family: var(--lid-text);
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--lid-radius);
  padding: 14px 26px;
}

body.lid-site .lid-calc button[type="submit"] {
  background: var(--lid-signal);
  color: var(--lid-white);
  border: 1px solid var(--lid-signal);
}

body.lid-site .lid-calc button[type="submit"]:hover,
body.lid-site .lid-calc button[type="submit"]:focus-visible {
  background: var(--lid-signal-ink);
  border-color: var(--lid-signal-ink);
}

body.lid-site .lid-calc button[type="reset"] {
  background: none;
  color: var(--lid-ink);
  border: 1px solid var(--lid-line-hard);
}

body.lid-site .lid-calc button[type="reset"]:hover,
body.lid-site .lid-calc button[type="reset"]:focus-visible {
  border-color: var(--lid-ink);
}

body.lid-site .lid-calc__out {
  margin: 24px 0 0 0;
  padding: 22px;
  background: var(--lid-sand);
  border-radius: var(--lid-radius);
}

body.lid-site .lid-calc__out:focus-visible { outline: 2px solid var(--lid-signal); }

body.lid-site .lid-calc__lead {
  font-size: 15px;
  color: var(--lid-mute);
  margin: 0 0 6px 0;
}

body.lid-site .lid-calc__range {
  font-family: var(--lid-head);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--lid-ink);
  margin: 0 0 16px 0;
}

body.lid-site .lid-calc__range span { color: var(--lid-signal-ink); }

body.lid-site .lid-calc__rows {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  border-top: 1px solid var(--lid-line);
}

body.lid-site .lid-calc__rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--lid-line);
  margin: 0;
  font-size: 15px;
}

body.lid-site .lid-calc__rows strong {
  font-family: var(--lid-head);
  font-size: 19px;
  white-space: nowrap;
}

body.lid-site .lid-calc__flag {
  background: var(--lid-white);
  border-left: 3px solid var(--lid-signal);
  padding: 11px 14px;
  font-size: 15px;
  margin: 0 0 14px 0;
}

body.lid-site .lid-calc__why,
body.lid-site .lid-calc__after :where(p) {
  font-size: 15px;
  line-height: 1.55;
  color: var(--lid-mute);
  margin: 0 0 10px 0;
}

body.lid-site .lid-calc__why { margin-bottom: 0; }

body.lid-site .lid-calc__after {
  margin: 18px 0 0 0;
  padding: 18px 0 0 0;
  border-top: 1px solid var(--lid-line);
}

body.lid-site .lid-calc__after :where(p):last-child { margin-bottom: 0; }

body.lid-site .lid-calc__problem {
  color: var(--lid-signal-ink);
  font-weight: 600;
  margin: 0;
}

@media (max-width: 720px) {
  body.lid-site .lid-calc { padding: 20px; }
  body.lid-site .lid-calc__form { grid-template-columns: minmax(0, 1fr); }
  body.lid-site .lid-calc__range { font-size: 27px; }
  body.lid-site .lid-calc__rows li { flex-direction: column; gap: 2px; }
  body.lid-site .lid-calc button { width: 100%; }
}

/* -- the reviews widget -------------------------------------------------
 * Trustindex brings its own stylesheet. These rules only give it room in the
 * band and stop it inheriting type sizes meant for prose.
 * --------------------------------------------------------------------- */

body.lid-site .ti-widget { margin-top: 18px; }

/* The plugin emits its markup inside a pre so wpautop cannot mangle it, and
   its loader moves it out. Until that happens the pre must not render as
   monospace code across the page. */
body.lid-site pre.ti-widget {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--lid-text);
  white-space: normal;
}

body.lid-site .ti-widget :where(p) { margin: 0; }

/* -- map ----------------------------------------------------------------- */

body.lid-site .lid-map {
  border-radius: var(--lid-radius);
  overflow: hidden;
  border: 1px solid var(--lid-line);
  margin: 0;
}

body.lid-site .lid-map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* -- skip link ----------------------------------------------------------- */

.lid-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lid-signal);
  color: #fff;
  padding: 12px 18px;
  z-index: 999;
  border-radius: 0 0 var(--lid-radius) 0;
}

.lid-skip:focus { left: 0; }



/* -- trust facts --------------------------------------------------------- */
/* Four label and value pairs on sand, directly under the hero. The earlier
   version used four sentences on white, which read as body copy rather than
   as a record. */

body.lid-site .lid-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}

body.lid-site .lid-facts > * { margin: 0; }

body.lid-site .lid-facts__label {
  font-family: var(--lid-head);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lid-mute);
  margin: 0 0 2px 0;
}

body.lid-site .lid-facts__value {
  font-weight: 700;
  font-size: 18px;
  color: var(--lid-ink);
  margin: 0;
  line-height: 1.3;
}

/* -- practice strips, full bleed ----------------------------------------- */
/* Two rows of three, two pixels apart on an ink ground, so the row reads as
   one band of photography rather than six separate cards. */

body.lid-site .lid-strips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--lid-ink);
  margin: 0;
}

body.lid-site .lid-strips + .lid-strips { border-top: 2px solid var(--lid-ink); }

body.lid-site .lid-strips .lid-strip {
  border-radius: 0;
  min-height: 226px;
}

body.lid-site .lid-strips .lid-strip::after {
  background: linear-gradient(to top, rgba(28, 27, 25, 0.96) 24%, rgba(28, 27, 25, 0.35) 80%);
}

body.lid-site .lid-strips .lid-strip__body { padding: 0 20px 18px 20px; }
body.lid-site .lid-strips .lid-strip__body :where(h2, h3) { font-size: 26px; margin: 0; }
body.lid-site .lid-strips .lid-strip__body :where(p) { font-size: 15px; color: #CFCBC3; margin: 2px 0 0 0; }
body.lid-site .lid-strips .lid-strip__body .lid-card__more { display: none; }

/* -- feature band -------------------------------------------------------- */
/* A full bleed photograph carrying a heading and one paragraph, with the
   gradient weighted to the left so the text sits on the dense end. */

body.lid-site .lid-feature {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0;
}

body.lid-site .lid-feature > figure.wp-block-image,
body.lid-site .lid-feature > .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  line-height: 0;
}

body.lid-site .lid-feature img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
}

body.lid-site .lid-feature > .wp-block-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(28, 27, 25, 0.94) 0%, rgba(28, 27, 25, 0.86) 52%, rgba(28, 27, 25, 0.45) 100%);
}

body.lid-site .lid-feature__body {
  position: relative;
  z-index: 2;
  max-width: var(--lid-page);
  margin-inline: auto;
  padding: 46px var(--lid-gutter);
  width: 100%;
}

body.lid-site .lid-feature__body > * { max-width: 680px; }
body.lid-site .lid-feature__body :where(h2, h3) { color: var(--lid-paper); font-size: clamp(26px, 3.4vw, 38px); }
body.lid-site .lid-feature__body :where(p) { color: #D2CEC6; font-size: 17px; line-height: 1.6; margin: 0; }

/* -- closing bar --------------------------------------------------------- */
/* The red bar the page ends on, under the charcoal call to action. */

body.lid-site .lid-bar-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin: 0;
}

body.lid-site .lid-bar-cta > * { margin: 0; }
body.lid-site .lid-bar-cta :where(h2, h3) { color: var(--lid-white); font-size: clamp(22px, 2.6vw, 30px); margin: 0; }
body.lid-site .lid-bar-cta :where(p) { color: #FFE0D8; font-size: 16px; margin: 4px 0 0 0; }
body.lid-site .lid-bar-cta .wp-block-buttons { flex-shrink: 0; }

/* -- text left, panel right ---------------------------------------------- */

body.lid-site .lid-aside {
  display: flex;
  gap: 40px;
  align-items: center;
  margin: 0;
}

body.lid-site .lid-aside > *:first-child { flex-grow: 1; margin: 0; }
body.lid-site .lid-aside > *:last-child { flex-shrink: 0; margin: 0; }

body.lid-site .lid-aside__panel {
  border: 2px solid var(--lid-ink);
  border-radius: var(--lid-radius);
  padding: 18px 26px;
  text-align: center;
  background: var(--lid-paper);
}

body.lid-site .lid-aside__panel :where(p) { margin: 0; }

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  body.lid-site .lid-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lid-site .lid-split,
  body.lid-site .lid-split--form { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.lid-site .lid-rail { position: static; }
  body.lid-site .lid-mediasplit { grid-template-columns: minmax(0, 1fr); }
  body.lid-site .lid-mediasplit__media img { min-height: 220px; }
}

@media (max-width: 1024px) {
  body.lid-site .lid-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lid-site .lid-strips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  body.lid-site .lid-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lid-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lid-foot__legal { flex-direction: column; gap: 14px; }
  body.lid-site .lid-trust > * { border-right: 0; border-bottom: 1px solid var(--lid-line); }
}

/* The nav becomes an accordion well before the phone breakpoint: six items,
   a four level tree and a phone number do not fit a tablet bar. Everything
   below is scoped to .lid-nav so the rest of the page keeps its own
   breakpoints. */
@media (max-width: 1024px) {
  .lid-nav__toggle { display: inline-block; }
  .lid-nav { display: none; }
  .lid-nav.is-open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /* The panel starts 159px down once the utility bar and the masthead are
       above it. At 100vh - 100 its bottom landed at 903 on an 844 screen, so
       the last 59px were unreachable. */
    max-height: calc(100vh - 175px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lid-ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--lid-gutter) 20px var(--lid-gutter);
    border-top: 1px solid var(--lid-ink-2);
    z-index: 60;
  }
  .lid-nav.is-open .lid-nav__list--1 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Panels stop floating and become nested rows. */
  .lid-nav.is-open .lid-nav__list--2,
  .lid-nav.is-open .lid-nav__list--3,
  .lid-nav.is-open .lid-nav__list--4 {
    position: static;
    display: none;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 0 0 14px;
    background: none;
    border: 0;
    border-left: 1px solid var(--lid-ink-2);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* Hover must not open anything on a touch screen: the button does it. */
  .lid-nav.is-open .lid-nav__item:hover > ul,
  .lid-nav.is-open .lid-nav__item:focus-within > ul { display: none; }
  .lid-nav.is-open .lid-nav__item.is-open > ul { display: block; }

  /* The wide desktop panel is columns and a half width offset. Neither
     survives a 390px screen, and its buttons are the accordion here. */
  .lid-nav.is-open .lid-nav__item--mega > .lid-nav__list--2 {
    columns: auto;
    width: auto;
    left: auto;
    transform: none;
  }
  .lid-nav.is-open .lid-nav__item--mega .lid-nav__item--l2 { margin-bottom: 0; }
  .lid-nav.is-open .lid-nav__item--mega .lid-nav__list--4 { margin-left: 0; }
  .lid-nav.is-open .lid-nav__item--mega .lid-nav__more { display: inline-flex; }
  .lid-nav.is-open .lid-nav__item--mega .lid-nav__item--l2
    > .lid-nav__row > .lid-nav__link { padding: 13px 0; }

  .lid-nav.is-open .lid-nav__row {
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--lid-ink-2);
  }
  .lid-nav.is-open .lid-nav__link {
    flex: 1 1 auto;
    padding: 13px 0;
    line-height: 1.35;
  }
  /* A finger sized target, which a 22px button is not. */
  .lid-nav.is-open .lid-nav__more {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    margin-right: -8px;
  }
  .lid-nav.is-open .lid-nav__call { margin-top: 14px; text-align: center; }
}

/* -- touch and legibility on a phone -------------------------------------
 * Measured on a 375px layout: the utility bar link came out 21px tall, the
 * footer phone number 18px, and a card title link 27px, against the 40px
 * minimum. Small uppercase labels read at 13px on a desktop and do not on a
 * phone held at arm's length, so they step up one.
 * --------------------------------------------------------------------- */

@media (max-width: 720px) {
  body.lid-site .lid-utility,
  body.lid-site .lid-foot__disclaimer,
  body.lid-site .lid-foot__licence,
  body.lid-site .lid-eyebrow,
  body.lid-site .lid-facts__label,
  body.lid-site .lid-card__label,
  body.lid-site .lid-fee__label,
  body.lid-site .lid-form .wpforms-field-label { font-size: 14px; }

  /* A link that is the only thing in its row gets a real target. Inline
     links inside a sentence are left alone: padding there would break the
     line rhythm and the whole line is tappable anyway. */
  /* 8px of padding left this one at 39px against a 40px minimum. */
  body.lid-site .lid-utility a { padding-block: 10px; }

  body.lid-site .lid-utility a,
  body.lid-site .lid-foot a,
  body.lid-site .lid-chips a,
  body.lid-site .lid-card > h2 > a,
  body.lid-site .lid-card > h3 > a,
  body.lid-site .lid-card__more a,
  body.lid-site .lid-crumbs a {
    display: inline-block;
    padding-block: 8px;
  }

  body.lid-site .lid-chips a { padding-block: 11px; }
}

@media (max-width: 720px) {
  body.lid-site .lid-grid--2,
  body.lid-site .lid-grid--3,
  body.lid-site .lid-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .lid-foot__cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  body.lid-site .lid-author { flex-direction: column; }
  body.lid-site .lid-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.lid-site .lid-strips { grid-template-columns: minmax(0, 1fr); }
  body.lid-site .lid-bar-cta { flex-direction: column; align-items: flex-start; gap: 18px; }
  body.lid-site .lid-aside { flex-direction: column; align-items: flex-start; }
  body.lid-site .lid-byline { gap: 8px; }
}

/* ==========================================================================
   8. Print and motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.lid-site * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .lid-utility, .lid-masthead, .lid-foot, .lid-crumbs { display: none; }
  body.lid-site .lid-hero__media::after,
  body.lid-site .lid-tile__media::after,
  body.lid-site .lid-strip::after { display: none; }
}


/* ==========================================================================
   9. Colour on dark surfaces, stated rather than inherited
   Every one of these computed to charcoal before the base rules were moved
   into :where(). They are restated here so the contract is visible in one
   place: anything sitting on ink, signal or a photograph says what colour it
   is, and does not rely on the cascade to work it out.
   ========================================================================== */

body.lid-site .lid-hero h1,
body.lid-site .lid-hero h2,
body.lid-site .lid-band--ink h1,
body.lid-site .lid-band--ink h2,
body.lid-site .lid-band--ink h3,
body.lid-site .lid-band--ink h4,
body.lid-site .lid-band--signal h1,
body.lid-site .lid-band--signal h2,
body.lid-site .lid-band--signal h3,
body.lid-site .lid-strip__body h2,
body.lid-site .lid-strip__body h3,
body.lid-site .lid-feature__body h2,
body.lid-site .lid-feature__body h3,
body.lid-site .lid-bar-cta h2,
body.lid-site .lid-bar-cta h3,
body.lid-site .lid-card--signal h2,
body.lid-site .lid-card--signal h3,
body.lid-site .lid-fee--lead h2,
body.lid-site .lid-fee--lead h3 {
  color: var(--lid-paper);
}

body.lid-site .lid-band--signal h1,
body.lid-site .lid-band--signal h2,
body.lid-site .lid-band--signal h3,
body.lid-site .lid-bar-cta h2,
body.lid-site .lid-bar-cta h3,
body.lid-site .lid-card--signal h2,
body.lid-site .lid-card--signal h3,
body.lid-site .lid-fee--lead h2,
body.lid-site .lid-fee--lead h3 {
  color: var(--lid-white);
}

body.lid-site .lid-band--ink p,
body.lid-site .lid-band--ink li {
  color: var(--lid-on-dark);
}

body.lid-site .lid-hero p { color: #D8D4CC; }
body.lid-site .lid-strip__body p { color: #CFCBC3; }
body.lid-site .lid-feature__body p { color: #D2CEC6; }
body.lid-site .lid-band--signal p,
body.lid-site .lid-band--signal li,
body.lid-site .lid-bar-cta p,
body.lid-site .lid-card--signal p { color: #FFE4DC; }
body.lid-site .lid-fee--lead p { color: #FFE4DC; }
body.lid-site .lid-fee--lead .lid-fee__label { color: #FFD3C8; }

body.lid-site .lid-band--sand h1,
body.lid-site .lid-band--sand h2,
body.lid-site .lid-band--sand h3,
body.lid-site .lid-band--sand h4 { color: var(--lid-ink); }

body.lid-site .lid-band--sand p,
body.lid-site .lid-band--sand li { color: var(--lid-sand-ink); }

body.lid-site .lid-band--ink a { color: #E8B7A6; }
body.lid-site .lid-placeholder p { color: var(--lid-on-dark); margin: 0; }


/* ==========================================================================
   10. WordPress block layout, held off the components
   A layout attribute in a block comment is not a note to the editor:
   WordPress reads it at render time, adds is-layout-constrained or
   is-layout-flex to the element and prints CSS for it that owns width,
   max-width, auto margins and display. Measured on the live home page it made
   the six triage tiles 298, 300, 240, 272, 286 and 294px wide instead of
   three equal columns, and shrank a practice strip cell from 470px to 251px.
   The emitter no longer writes the attribute; this makes sure a stray one
   cannot do it again.
   ========================================================================== */

body.lid-site :where(.entry-content) [class*="lid-"].is-layout-constrained > *,
body.lid-site :where(.entry-content) [class*="lid-"].is-layout-flow > *,
body.lid-site :where(.entry-content) [class*="lid-"].is-layout-flex > * {
  max-width: none;
  margin-inline: 0;
}

body.lid-site :where(.entry-content) .lid-grid.is-layout-flex,
body.lid-site :where(.entry-content) .lid-grid.is-layout-constrained,
body.lid-site :where(.entry-content) .lid-strips.is-layout-flex,
body.lid-site :where(.entry-content) .lid-strips.is-layout-constrained,
body.lid-site :where(.entry-content) .lid-facts.is-layout-flex,
body.lid-site :where(.entry-content) .lid-facts.is-layout-constrained,
body.lid-site :where(.entry-content) .lid-trust.is-layout-flex,
body.lid-site :where(.entry-content) .lid-split.is-layout-flex {
  display: grid;
  gap: inherit;
}

body.lid-site :where(.entry-content) .lid-step.is-layout-flex,
body.lid-site :where(.entry-content) .lid-step.is-layout-constrained {
  display: grid;
}

body.lid-site :where(.entry-content) .lid-aside.is-layout-constrained,
body.lid-site :where(.entry-content) .lid-bar-cta.is-layout-constrained,
body.lid-site :where(.entry-content) .lid-author.is-layout-constrained,
body.lid-site :where(.entry-content) .lid-mediasplit.is-layout-constrained {
  display: flex;
}

/* WordPress adds a top margin to every child of a flow or constrained block.
   The components set their own spacing. */
body.lid-site :where(.entry-content) [class*="lid-"] > *:first-child {
  margin-block-start: 0;
}

/* core/image wraps the file in a figure. Inside a strip, a feature or a hero
   the figure is scaffolding, not a figure: it must not size anything. */
body.lid-site .lid-strip > .wp-block-image,
body.lid-site .lid-feature > .wp-block-image,
body.lid-site .lid-hero > .wp-block-image,
body.lid-site .lid-tile > .wp-block-image,
body.lid-site .lid-mediasplit__media > .wp-block-image {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}


/* ==========================================================================
   11. The measure, re-asserted
   Section 10's reset is broad on purpose: it has to catch any component
   WordPress decides to lay out. That breadth also matched .lid-wrap, which is
   the element holding the page's 1280px measure, so every band went edge to
   edge. These rules are the exceptions: elements that own a measure and must
   keep it. The band still paints its background full width; only the content
   inside is boxed.
   ========================================================================== */

body.lid-site .entry-content .lid-band > .lid-wrap {
  max-width: var(--lid-page);
  margin-inline: auto;
  padding-inline: var(--lid-gutter);
  box-sizing: border-box;
}

/* A flush band is the one deliberate exception to the boxed measure: a row of
   photographic strips, or a single full bleed photograph, running the whole
   width of the window. Everything else on the site stays inside the 1280 box. */
body.lid-site .entry-content .lid-band--flush > .lid-wrap {
  max-width: none;
  padding-inline: 0;
}

body.lid-site .entry-content .lid-hero__in,
body.lid-site .entry-content .lid-feature__body {
  max-width: var(--lid-page);
  margin-inline: auto;
  padding-inline: var(--lid-gutter);
  box-sizing: border-box;
}

body.lid-site .entry-content .lid-narrow {
  max-width: 800px;
  margin-inline: auto;
}

body.lid-site .entry-content .lid-prose {
  max-width: 860px;
}

/* The guide article header centres its own children. */
body.lid-site .entry-content .lid-article__head > * {
  margin-inline: auto;
}

body.lid-site .entry-content .lid-article__head :where(h1) { max-width: 860px; }
body.lid-site .entry-content .lid-article__head :where(p) { max-width: 760px; }


/* ==========================================================================
   12. Photographic strips, and the figure that was in the way
   core/image wraps every file in a <figure>. Inside a flex strip that figure
   is a flex item: measured 257px wide in a 425px cell, which pushed the
   heading and the description across to the right of the photograph. The
   image inside it was already absolute; the wrapper was not. Taking the
   wrapper out of flow leaves the body as the only item in the row, so it
   sits bottom left over the picture, which is where the artboard puts it.
   ========================================================================== */

body.lid-site .lid-strip > .wp-block-image,
body.lid-site .lid-feature > .wp-block-image,
body.lid-site .lid-mediasplit__media > .wp-block-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 0;
  pointer-events: none;
}

body.lid-site .lid-strip > .wp-block-image img,
body.lid-site .lid-feature > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.lid-site .lid-strip__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 24px 20px 24px;
  box-sizing: border-box;
}

/* ==========================================================================
   13. Hover and focus
   Everything a reader can click says so on hover, and says the same thing to
   a keyboard. The signal colour deepens rather than lightening, so a hovered
   control never looks disabled.
   ========================================================================== */

body.lid-site a,
body.lid-site button,
body.lid-site .lid-card,
body.lid-site .lid-tile,
body.lid-site .lid-strip {
  transition: background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* -- buttons ------------------------------------------------------------- */

body.lid-site .lid-btn .wp-block-button__link:hover,
body.lid-site .lid-btn .wp-block-button__link:focus-visible,
body.lid-site a.lid-btn:not(.wp-block-button):hover,
body.lid-site button.lid-btn:hover {
  background: var(--lid-signal-ink);
  border-color: var(--lid-signal-ink);
  color: var(--lid-white);
}

body.lid-site .lid-btn .wp-block-button__link:active {
  background: var(--lid-signal-deep);
  border-color: var(--lid-signal-deep);
}

body.lid-site .lid-btn-ghost .wp-block-button__link:hover,
body.lid-site .lid-btn-ghost .wp-block-button__link:focus-visible,
body.lid-site a.lid-btn-ghost:not(.wp-block-button):hover {
  background: var(--lid-paper);
  border-color: var(--lid-paper);
  color: var(--lid-ink);
}

/* On a light band the ghost button inverts the other way. */
body.lid-site .lid-band--sand .lid-btn-ghost .wp-block-button__link:hover,
body.lid-site .lid-band--white .lid-btn-ghost .wp-block-button__link:hover,
body.lid-site .lid-band--paper2 .lid-btn-ghost .wp-block-button__link:hover {
  background: var(--lid-ink);
  border-color: var(--lid-ink);
  color: var(--lid-paper);
}

body.lid-site .lid-btn-light .wp-block-button__link:hover,
body.lid-site .lid-btn-light .wp-block-button__link:focus-visible {
  background: var(--lid-ink);
  border-color: var(--lid-ink);
  color: var(--lid-white);
}

body.lid-site .lid-nav__call:hover,
body.lid-site .lid-nav__call:focus-visible {
  background: var(--lid-signal-ink);
}

/* -- cards, tiles and strips --------------------------------------------- */
/* The whole tile reacts, not just the link inside it, because that is the
   target a reader actually moves the pointer to. */

body.lid-site a.lid-card:hover,
body.lid-site .lid-card:hover {
  border-color: var(--lid-ink);
}

body.lid-site .lid-tile:hover {
  border-color: var(--lid-ink);
  box-shadow: 0 2px 0 0 var(--lid-signal);
}

body.lid-site .lid-tile:hover .lid-card__more,
body.lid-site .lid-card:hover .lid-card__more {
  color: var(--lid-signal-deep);
}

body.lid-site .lid-tile:hover .lid-tile__media::after {
  background: linear-gradient(to top, rgba(28, 27, 25, 0.62) 0%, rgba(28, 27, 25, 0.10) 72%);
}

/* A strip lifts its gradient so more of the photograph shows through. */
body.lid-site .lid-strip:hover::after {
  background: linear-gradient(to top, rgba(28, 27, 25, 0.88) 24%, rgba(28, 27, 25, 0.18) 80%);
}

body.lid-site .lid-strip:hover .lid-card__more {
  color: var(--lid-white);
}

/* -- links --------------------------------------------------------------- */

body.lid-site .lid-card__more:hover,
body.lid-site a:hover .lid-card__more {
  color: var(--lid-signal-deep);
}

body.lid-site .lid-chips a:hover,
body.lid-site .lid-chips a:focus-visible {
  background: var(--lid-ink);
  border-color: var(--lid-ink);
  color: var(--lid-paper);
}

body.lid-site .lid-rail li a:hover,
body.lid-site .lid-rail li a:focus-visible {
  color: var(--lid-signal);
}

body.lid-site .lid-foot__cols ul a:hover,
body.lid-site .lid-foot__tel a:hover {
  color: var(--lid-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.lid-site .lid-nav a:hover,
body.lid-site .lid-nav a:focus-visible {
  color: #E8B7A6;
}

body.lid-site .lid-utility a:hover {
  color: var(--lid-white);
}

/* -- keyboard ------------------------------------------------------------ */
/* One visible focus ring everywhere, including on dark bands where the
   default ring disappears. */

body.lid-site a:focus-visible,
body.lid-site button:focus-visible,
body.lid-site input:focus-visible,
body.lid-site textarea:focus-visible {
  outline: 3px solid var(--lid-signal);
  outline-offset: 2px;
  border-radius: var(--lid-radius);
}

body.lid-site .lid-band--ink a:focus-visible,
body.lid-site .lid-band--signal a:focus-visible,
body.lid-site .lid-masthead a:focus-visible,
body.lid-site .lid-foot a:focus-visible,
body.lid-site .lid-strip:focus-within::after {
  outline-color: var(--lid-paper);
}

@media (prefers-reduced-motion: reduce) {
  body.lid-site a,
  body.lid-site button,
  body.lid-site .lid-card,
  body.lid-site .lid-tile,
  body.lid-site .lid-strip { transition: none; }
}


/* ==========================================================================
   14. Measure and vertical rhythm inside a band
   ========================================================================== */

/* The 860px cap on .lid-prose is for the pillar layout, where the prose runs
   in the right hand column beside a 236px contents rail. Applied in a single
   column band it caps the text 308px narrower than the box it sits in, which
   is a hard line break with a column of white space next to it. */
body.lid-site .entry-content .lid-prose {
  max-width: none;
}

body.lid-site .entry-content .lid-split .lid-prose {
  max-width: 860px;
}

/* A heading and a paragraph carry their own margin-bottom. A grid, a set of
   strips, a step list, an FAQ, an aside, a callout, a table and a chip row do
   not, so whatever follows one of them lands flush against it. Measured on
   the home page: the card grid to the "All guides" button was 0px, the
   glossary aside to its button was 0px, and the register cards to the prose
   below them was 0px. */
body.lid-site .lid-wrap > :is(.lid-grid, .lid-strips, .lid-steps, .lid-faq,
                              .lid-aside, .lid-callout, .lid-note, .lid-limits,
                              .lid-chips, .lid-table, .wp-block-table,
                              .lid-trust, .lid-facts, .lid-author,
                              .lid-mediasplit, .lid-split) + * {
  margin-top: 30px;
}

/* Prose following anything at all wants a little more air than a button does. */
body.lid-site .lid-wrap > .lid-prose {
  margin-top: 34px;
}

body.lid-site .lid-wrap > .lid-prose > p:last-child {
  margin-bottom: 0;
}

/* And the reverse: a grid or a callout that follows a run of prose. */
body.lid-site .lid-wrap > .lid-prose + *,
body.lid-site .lid-wrap > p + :is(.lid-grid, .lid-steps, .lid-faq, .lid-callout,
                                  .lid-chips, .lid-strips) {
  margin-top: 26px;
}


/* GeneratePress Menu Plus navigations, hidden as a fallback only. The markup
   is removed in functions.php; hiding alone would leave the links in the
   document for a crawler to follow. */
body.lid-no-gp-nav #mobile-header,
body.lid-no-gp-nav #generate-slideout-menu,
body.lid-no-gp-nav .slideout-overlay,
body.lid-no-gp-nav .menu-toggle,
body.lid-no-gp-nav .slideout-toggle {
  display: none !important;
}


/* -- sidebar card label --------------------------------------------------- */

body.lid-site .lid-rail__cta {
  font-family: var(--lid-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--lid-ink);
  margin: 0 0 6px 0;
}

/* -- related card with a thumbnail ---------------------------------------- */

body.lid-site .lid-thumb {
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding: 14px;
  overflow: hidden;
}

body.lid-site .lid-thumb > .wp-block-image {
  position: relative;
  flex: 0 0 104px;
  width: 104px;
  margin: 0;
  border-radius: var(--lid-radius);
  overflow: hidden;
  line-height: 0;
}

body.lid-site .lid-thumb > .wp-block-image img {
  width: 104px;
  height: 100%;
  min-height: 78px;
  object-fit: cover;
  display: block;
}

body.lid-site .lid-thumb > .wp-block-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 25, 0.28);
}

body.lid-site .lid-thumb__body { flex: 1 1 auto; min-width: 0; }
body.lid-site .lid-thumb__body > :last-child { margin-bottom: 0; }
body.lid-site .lid-thumb__body :where(h2, h3) { font-size: 20px; line-height: 1.18; }

@media (max-width: 720px) {
  body.lid-site .lid-thumb { flex-direction: column; }
  body.lid-site .lid-thumb > .wp-block-image,
  body.lid-site .lid-thumb > .wp-block-image img { width: 100%; flex-basis: auto; }
}


/* -- breadcrumbs, separator in CSS ---------------------------------------- */
/* Written into the text as an entity it published as the literal characters
   "&#8250;", because the paragraph emitter escapes its input and has to. */

body.lid-site ul.lid-crumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

body.lid-site ul.lid-crumbs__list li {
  margin: 0;
  font-size: 14px;
  color: var(--lid-mute);
}

body.lid-site ul.lid-crumbs__list li + li::before {
  content: "\203A";
  margin: 0 9px;
  color: #B8B1A4;
}

/* -- label card ----------------------------------------------------------- */

body.lid-site .lid-card__label {
  font-family: var(--lid-head);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lid-mute);
  margin: 0 0 4px 0;
}

body.lid-site .lid-card__value {
  font-family: var(--lid-head);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--lid-ink);
  margin: 0 0 7px 0;
}

body.lid-site .lid-fee__value {
  font-family: var(--lid-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--lid-ink);
  margin: 0 0 9px 0;
}

body.lid-site .lid-fee--lead .lid-fee__value {
  color: var(--lid-white);
  font-size: 36px;
  line-height: 1.05;
}


/* ==========================================================================
   15. The aside, after the layout reset
   ==========================================================================

   Two separate causes of one defect, both measured on the home page at a
   768px viewport.

   The group inside .lid-aside came out 936.3px wide inside a 685.4px parent
   and reached right=970 against a layout width of 753. html and body both
   carry overflow-x: clip, so documentElement.scrollWidth still read 753, no
   scrollbar appeared, and the text was simply cut off with nothing on screen
   to say so. Only body.scrollWidth, at 970, gave it away.

   First cause: on this band the aside has a single child, so it matched both
   :first-child and :last-child and the later rule set flex-shrink to 0. It
   could not shrink to its parent.

   Second cause: the layout reset in section 11 sets max-width: none on every
   child of a lid- container, and at (0,3,1) it outranks an .lid-aside rule
   written next to the component. This block sits after it deliberately.
   ========================================================================== */

body.lid-site :where(.entry-content) .lid-aside > * {
  min-width: 0;
  max-width: 100%;
}

body.lid-site :where(.entry-content) .lid-aside > *:first-child {
  flex: 1 1 auto;
}

/* Only a real second column is allowed to hold its width. */
body.lid-site :where(.entry-content) .lid-aside > *:last-child:not(:first-child) {
  flex: 0 0 auto;
}


/* ==========================================================================
   16. Contrast corrections, measured
   ==========================================================================

   Every value here replaces one that was measured below its WCAG AA minimum
   in the rendered page, not estimated from the palette.
   ========================================================================== */

/* The field border was the ONLY thing marking where an input was: white fill
   on a white panel, measured at 1.44:1 against the 3:1 minimum for a UI
   boundary. --lid-line-hard was the first attempt and only reached 1.77:1;
   --lid-field-line is the lightest value that clears 3:1 on white (3.66:1)
   and still clears it on the sand panel the calculator sits on (2.78:1 on
   sand, so the calculator's fields keep the white fill to stay above the
   line). */
:root { --lid-field-line: #8A857D; }

body.lid-site .lid-form input[type="text"],
body.lid-site .lid-form input[type="email"],
body.lid-site .lid-form input[type="tel"],
body.lid-site .lid-form textarea,
body.lid-site .lid-form select,
body.lid-site .lid-calc input {
  border-color: var(--lid-field-line);
  background: var(--lid-white);
}

/* Text on the signal red measured 4.13:1, and the lead fee label 3.66:1.
   Paper on that red is 5.42:1. */
body.lid-site .lid-band--signal :where(p, li) { color: var(--lid-paper); }
body.lid-site .lid-fee--lead .lid-fee__label { color: var(--lid-paper); }

/* The reason a submission was rejected, next to the panel heading. */
body.lid-site .lid-form__result-why {
  font-weight: 600;
  color: var(--lid-signal-ink);
}