/* ============================================================
   StraightUp Inspections — plain, text-led design system
   ------------------------------------------------------------
   One stylesheet. No images, no icon fonts, no external fonts.
   Palette:  ivory page, deep-teal ink, one optional coral accent.
   Written mobile-first (base = phone), then 768px, then 1024px.
   ============================================================ */

/* ---------- 1. Tokens -------------------------------------- */
:root {
  --page:     #fcf9f1;              /* warm ivory  */
  --ink:      #173f46;              /* deep teal   */
  --accent:   #e76f45;              /* burnt coral — used sparingly */
  --ink-soft: rgb(23 63 70 / 78%);  /* supporting text */
  --divider:  rgb(23 63 70 / 15%);  /* quiet separator only */
  --rule:     rgb(23 63 70 / 32%);  /* visible hairline */

  --content:  70rem;                /* 1120px */
  --measure:  44rem;                /* narrow reading column */
  --gutter:   1.25rem;
  --radius:   .25rem;
  --tap:      3rem;                 /* 48px project target size */
}

@media (max-width: 22rem) { :root { --gutter: 1rem; } }
@media (min-width: 48rem) { :root { --gutter: 2rem; } }
@media (min-width: 64rem) { :root { --gutter: 2.5rem; } }

/* ---------- 2. Base ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}
@media (min-width: 48rem) { body { font-size: 1.0625rem; } }
@media (min-width: 64rem) { body { font-size: 1.125rem; } }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: -.01em;
}
h3, h4 { font-weight: 600; }
p, ul, ol, dl, figure, table { margin: 0 0 1rem; }
p { max-width: 65ch; line-height: 1.6; }
:where(h1, h2, h3, h4) + p { margin-top: 0; }
img { max-width: 100%; height: auto; }
hr { height: 0; border: 0; border-top: 1px solid var(--divider); margin: 2rem 0; }

a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--ink); color: var(--page); }

/* Headings ------------------------------------------------- */
h1 { font-size: clamp(2.25rem, 1.9rem + 1.8vw, 2.75rem); max-width: 20ch; }
h2 { font-size: clamp(1.75rem, 1.55rem + 1vw, 2rem);     max-width: 24ch; }
h3 { font-size: clamp(1.25rem, 1.15rem + .5vw, 1.375rem); max-width: 30ch; }
h4 { font-size: 1.0625rem; }

@media (min-width: 48rem) {
  h1 { font-size: clamp(3rem, 2rem + 2.1vw, 3.5rem); }
  h2 { font-size: clamp(2.125rem, 1.8rem + .7vw, 2.375rem); }
  h3 { font-size: clamp(1.375rem, 1.3rem + .3vw, 1.5rem); }
}
@media (min-width: 64rem) {
  h1 { font-size: clamp(3.5rem, 2.5rem + 1.6vw, 4rem); }
  h2 { font-size: clamp(2.375rem, 2rem + .6vw, 2.625rem); }
  h3 { font-size: 1.5rem; }
}

/* ---------- 3. Layout -------------------------------------- */
.sui-wrap {
  width: min(100% - 2 * var(--gutter), var(--content));
  margin-inline: auto;
}
.sui-narrow { max-width: var(--measure); }

section { padding-block: 3.25rem; }
@media (min-width: 48rem) { section { padding-block: 4rem; } }
@media (min-width: 64rem) { section { padding-block: 5rem; } }

.sui-tight { padding-block-start: 1.75rem; }
@media (min-width: 48rem) { .sui-tight { padding-block-start: 2rem; } }
@media (min-width: 64rem) { .sui-tight { padding-block-start: 2.5rem; } }

/* Heading -> intro -> content rhythm (guideline section 5) */
.sui-intro { margin-top: 1rem; margin-bottom: 1.5rem; color: var(--ink-soft); }
@media (min-width: 48rem) { .sui-intro { margin-bottom: 1.75rem; } }
@media (min-width: 64rem) { .sui-intro { margin-top: 1.25rem; margin-bottom: 2rem; } }

.sui-lead { font-size: 1.0625em; }

.sui-two-col { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .sui-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }

.sui-sep { border-top: 1px solid var(--divider); }

/* Small utilities ------------------------------------------- */
.sui-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sui-eyebrow {
  margin: 0 0 .75rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sui-note { font-size: .875rem; color: var(--ink-soft); }
.sui-note-spaced { margin-top: 1.5rem; }

.sui-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--page);
  padding: .75rem 1rem; border-radius: var(--radius); text-decoration: none;
}
.sui-skip:focus { left: var(--gutter); top: .5rem; }

/* ---------- 4. Buttons and links --------------------------- */
.sui-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: .75rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--page);
  font: inherit; font-size: 1rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.sui-btn:hover { background: #0f2f35; border-color: #0f2f35; }
.sui-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.75rem; }
.sui-actions .sui-btn { width: 100%; }
@media (min-width: 30rem) {
  .sui-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; }
  .sui-actions .sui-btn { width: auto; }
}

/* A phone number rendered as text, with a comfortable hit area */
.sui-tel { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }

/* ---------- 5. Header and navigation ----------------------- */
.sui-site-header { border-bottom: 1px solid var(--divider); background: var(--page); }
.sui-header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: 4rem; padding-block: .75rem;
}
@media (min-width: 48rem) { .sui-header-inner { min-height: 4.5rem; } }

.sui-wordmark {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap;
}
.sui-wordmark span { font-weight: 400; }
@media (max-width: 26rem) { .sui-wordmark span { display: none; } }
@media (min-width: 30rem) { .sui-wordmark { font-size: 1.25rem; } }
@media (min-width: 48rem) { .sui-wordmark { font-size: 1.375rem; } }

/* The Menu button only exists when JavaScript can operate it. */
.sui-nav-btn { display: none; }
.js .sui-nav-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--tap); padding: .5rem .875rem;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.sui-nav-btn .bars { display: inline-block; width: 1rem; border-top: 2px solid currentColor; }
.sui-nav-btn .bars::before, .sui-nav-btn .bars::after {
  content: ""; display: block; margin-top: 3px; border-top: 2px solid currentColor;
}
@media (min-width: 64rem) { .js .sui-nav-btn { display: none; } }

.sui-nav { flex: 0 0 100%; width: 100%; }
.sui-menu { list-style: none; margin: 0; padding: 0; }
.sui-menu a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: .5rem 0; text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--divider);
}
.sui-menu a:hover, .sui-menu .current-menu-item > a { text-decoration: underline; }
.sui-nav .sui-btn { margin-top: 1rem; width: 100%; }
.sui-nav-tel { display: block; margin-top: .75rem; }

@media (min-width: 64rem) {
  /* The row stays wrappable. At normal text sizes everything fits on one
     line and looks like a conventional header; if the labels grow (a larger
     browser font size, a longer menu) the navigation drops to a second line
     rather than pushing the page sideways. */
  .sui-nav { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center;
             gap: .75rem 1.75rem; width: auto; min-width: 0; justify-content: flex-end; }
  .sui-menu { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.75rem; }
  .sui-menu a { min-height: var(--tap); padding: 0; border-bottom: 0; font-weight: 400; }
  .sui-nav .sui-btn { margin-top: 0; width: auto; }
  .sui-nav-tel { display: none; }
}

/* Mobile disclosure panel: its own row in normal flow, no overlay, no scroll
   lock. Spacing lives on .sui-nav itself so the no-JS fallback (panel always
   visible) is spaced correctly too. */
.sui-nav { padding-bottom: 1rem; }
@media (min-width: 64rem) { .sui-nav { padding-bottom: 0; } }


/* Hidden always wins over a display rule from a media query. */
[hidden] { display: none !important; }

/* Contact lives in the footer on desktop; it stays in the mobile menu. */
@media (min-width: 64rem) { .sui-nav-only { display: none; } }

/* ---------- 6. Hero (centred, per the layout reference) ----- */
.sui-hero { padding-block: 3rem 2.25rem; text-align: center; }
@media (min-width: 48rem) { .sui-hero { padding-block: 4.5rem 3rem; } }
@media (min-width: 64rem) { .sui-hero { padding-block: 6rem 3.5rem; } }

.sui-hero-inner { max-width: 47.5rem; margin-inline: auto; }
.sui-hero .sui-eyebrow { margin-bottom: .625rem; }
.sui-hero-rule {
  width: 8.5rem; height: 0; margin: 0 auto 1.75rem;
  border-top: 1px solid var(--rule);
}
.sui-hero h1 { max-width: 16ch; margin-inline: auto; margin-bottom: 1.25rem; }
.sui-hero p { margin-inline: auto; max-width: 56ch; color: var(--ink-soft); }
.sui-hero .sui-actions { align-items: center; justify-content: center; }

.sui-trustline {
  margin: 1.75rem auto 0; max-width: 44ch;
  font-size: .875rem; color: var(--ink-soft);
}

/* Scroll cue — a real link to the services section */
.sui-scroll { margin-top: 2.5rem; text-align: center; }
.sui-scroll a {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--ink); border-radius: 50%;
  text-decoration: none; font-size: 1.125rem; line-height: 1;
}
.sui-scroll a:hover { background: var(--ink); color: var(--page); }
.sui-scroll .line {
  display: block; width: 0; height: 3.5rem;
  margin: 0 auto; border-left: 1px solid var(--rule);
}
@media (min-width: 64rem) { .sui-scroll .line { height: 5rem; } }



/* Inner-page header: left-aligned; only the homepage hero is centred. */
.sui-page-header { padding-block: 2.5rem 1rem; }
@media (min-width: 48rem) { .sui-page-header { padding-block: 3.25rem 1.25rem; } }
@media (min-width: 64rem) { .sui-page-header { padding-block: 4rem 1.5rem; } }
.sui-page-header h1 { margin-bottom: 1rem; }
.sui-page-header .sui-lead { color: var(--ink-soft); max-width: 58ch; }

/* On the homepage the hairline under the hero leads straight into the rows,
   so the section carries no top padding of its own. Elsewhere the service
   rows are an ordinary section. */
.sui-hero + .sui-services { padding-block-start: 0; }

/* ---------- 7. Services ------------------------------------ */
/* Lead label: a short solid rule, then the label. Left-aligned, unlike the
   hero's centred divider label. */
.sui-label-lead {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.5rem;
  font-size: .875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.sui-label-lead::before {
  content: ""; flex: 0 0 3.5rem; border-top: 1px solid var(--ink);
}

.sui-label-plain {
  margin: 0 0 1.25rem;
  font-size: .875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}

.sui-sec-head { margin-bottom: 2.5rem; }
.sui-sec-head h2 { margin: 0; max-width: 26ch; }
.sui-sec-aside { margin: 1rem 0 0; color: var(--ink-soft); max-width: 46ch; }

@media (min-width: 64rem) {
  /* Heading left, introduction alongside it and sitting on the heading's
     last line, as drawn. */
  .sui-sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 3.5rem;
    align-items: end;
    margin-bottom: 3.5rem;
  }
  .sui-sec-head--top { align-items: start; }
  .sui-label-lead { grid-column: 1 / -1; margin-bottom: 2rem; }
  .sui-sec-aside { margin: 0 0 .5rem; }
}

/* The six tiles ------------------------------------------------ */
.sui-tiles { display: grid; gap: 0; }
@media (min-width: 64rem) {
  .sui-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

.sui-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
  padding-block: 1.75rem;
  border-top: 1px solid var(--divider);
}
/* The last row of tiles closes the section off. */
.sui-tiles > .sui-tile:last-child { border-bottom: 1px solid var(--divider); }
@media (min-width: 64rem) {
  .sui-tiles > .sui-tile:nth-last-child(-n + 2) { border-bottom: 1px solid var(--divider); }
  .sui-tile { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1.25rem; }
}

.sui-tile-aside {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; align-items: center; gap: .625rem;
}
.sui-tile-n {
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.sui-tile-ic { display: block; width: 3.25rem; color: var(--ink); }
.sui-tile-ic svg { display: block; width: 100%; height: auto; }
@media (min-width: 48rem) { .sui-tile-ic { width: 3.5rem; } }

.sui-tile-body { grid-column: 2; grid-row: 1; min-width: 0; }
.sui-tile-t {
  margin: 0; max-width: 22ch;
  font-size: 1.125rem; font-weight: 700; line-height: 1.25;
}
@media (min-width: 48rem) { .sui-tile-t { font-size: 1.25rem; } }
.sui-tile-t a { text-decoration: none; }
.sui-tile-t a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* One link per tile: this stretches it over the whole tile so the icon and
   the arrow are clickable without adding a second thing to tab to. */
.sui-tile-t a::after { content: ""; position: absolute; inset: 0; }

.sui-tile-d { margin: .5rem 0 0; color: var(--ink-soft); max-width: 48ch; }

/* Circular affordance. Decorative — the tile link does the work. */
.sui-tile-go {
  display: none;
  grid-column: 3; grid-row: 1;
  align-self: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--rule); border-radius: 50%;
  color: var(--ink);
  align-items: center; justify-content: center;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.sui-tile-go svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 64rem) { .sui-tile-go { display: flex; } }

.sui-tile:hover .sui-tile-go,
.sui-tile:focus-within .sui-tile-go {
  background: var(--ink); border-color: var(--ink); color: var(--page);
}
/* The stretched link has no box of its own, so put the focus ring on the tile. */
.sui-tile:focus-within { outline: 3px solid var(--ink); outline-offset: 4px; }
.sui-tile-t a:focus-visible { outline: none; }

/* ---------- 8. Process timeline and numbered steps --------- */
/* The three steps sit on one connecting rule. The rule is drawn behind the
   row and each numbered circle paints the page colour over it, so the line
   appears to break at every step without being cut into pieces. */
.sui-flow {
  position: relative;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 48rem) {
  .sui-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  /* Sits on the vertical centre of the 2.75rem circles. */
  .sui-flow::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 1.375rem;
    border-top: 1px solid var(--divider);
  }
}

.sui-flow-step { position: relative; min-width: 0; }

.sui-flow-n {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--rule); border-radius: 50%;
  background: var(--page);
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}

.sui-flow-ic { display: block; width: 3.5rem; margin: 1.5rem 0 1.25rem; color: var(--ink); }
.sui-flow-ic svg { display: block; width: 100%; height: auto; }
@media (min-width: 48rem) { .sui-flow-ic { width: 4rem; margin-top: 2rem; } }

.sui-flow-t { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 700; max-width: 24ch; }
@media (min-width: 48rem) { .sui-flow-t { font-size: 1.25rem; } }
.sui-flow-d { margin: 0; color: var(--ink-soft); max-width: 40ch; }

/* The plain numbered list still used by the service pages. */
.sui-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.75rem; }
.sui-steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .25rem .5rem; }
.sui-step-n {
  grid-row: 1; grid-column: 1;
  font-size: .875rem; font-weight: 600; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.sui-step-t { grid-row: 1; grid-column: 2; margin: 0; font-size: 1.0625rem; font-weight: 600; max-width: none; }
.sui-step-d { grid-row: 2; grid-column: 2; margin: 0; color: var(--ink-soft); }
@media (min-width: 48rem) {
  .sui-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .sui-steps li { grid-template-columns: minmax(0, 1fr); gap: .375rem; }
  .sui-step-n { grid-row: auto; grid-column: auto; }
  .sui-step-t, .sui-step-d { grid-row: auto; grid-column: auto; }
}
.sui-steps-4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .sui-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sui-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 9. Lists --------------------------------------- */
.sui-check-list, .sui-issue-list, .sui-x-list, .sui-link-list {
  list-style: none; margin: 0 0 1rem; padding: 0;
}
.sui-check-list li, .sui-issue-list li, .sui-x-list li {
  position: relative; padding: .375rem 0 .375rem 1.5rem; max-width: 65ch;
}
.sui-check-list li::before, .sui-issue-list li::before {
  content: "\2014"; position: absolute; left: 0; color: var(--ink-soft);
}
.sui-x-list li::before { content: "\00d7"; position: absolute; left: .1rem; color: var(--ink-soft); }
.sui-link-list li { border-bottom: 1px solid var(--divider); }
.sui-link-list a { display: flex; align-items: center; min-height: var(--tap); padding: .5rem 0; }

.sui-inline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.sui-inline-list a { display: inline-flex; align-items: center; min-height: var(--tap); }

.sui-compare { margin: 1.5rem 0 0; }
.sui-compare dt { font-weight: 600; margin-top: 1.25rem; }
.sui-compare dd { margin: .25rem 0 0; max-width: 65ch; color: var(--ink-soft); }

/* ---------- 10. Quotations (reviews) ----------------------- */
.sui-rating { display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 64rem) { .sui-rating { align-items: flex-end; text-align: right; } }
.sui-stars { display: flex; gap: .375rem; color: var(--ink); }
.sui-stars svg { width: 1.75rem; height: 1.75rem; }
.sui-rating-t { color: var(--ink-soft); }

.sui-quotes { display: grid; gap: 2.5rem; margin-top: 1rem; }
@media (min-width: 48rem) { .sui-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; } }
@media (min-width: 64rem) { .sui-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }

.sui-quote-item { margin: 0; min-width: 0; }
/* A hairline between adjacent quotations, as drawn — only once they sit
   side by side, and never before the first one in a row. */
@media (min-width: 64rem) {
  .sui-quote-item { padding-inline: 2.5rem; }
  .sui-quote-item:first-child { padding-inline-start: 0; }
  .sui-quote-item:last-child { padding-inline-end: 0; }
  .sui-quote-item + .sui-quote-item { border-left: 1px solid var(--divider); }
}

.sui-quote-mark {
  display: block; line-height: .8; margin-bottom: .25rem;
  font-size: 4rem; font-weight: 700; color: var(--ink);
}
.sui-quote-item blockquote { margin: 0; }
.sui-quote-item blockquote p { margin: 0; max-width: 34ch; }
/* Typographic quotation marks, as text — the large mark above is separate. */
.sui-quote-item blockquote p::before { content: "“"; }
.sui-quote-item blockquote p::after  { content: "”"; }
.sui-quote-item figcaption { margin-top: 1.5rem; font-size: .875rem; color: var(--ink-soft); }

/* ---------- 11. FAQ (native details) ----------------------- */
.sui-faq-list { border-top: 1px solid var(--divider); margin-top: 1.5rem; }
.sui-faq { border-bottom: 1px solid var(--divider); }
.sui-faq > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--tap); padding: 1rem 0;
  font-weight: 600; cursor: pointer; list-style: none;
}
.sui-faq > summary::-webkit-details-marker { display: none; }
.sui-faq > summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.sui-faq[open] > summary::after { content: "\2212"; }
.sui-faq > summary:hover { text-decoration: underline; }
.sui-faq-a { padding: 0 0 1.25rem; }
.sui-faq-a p { margin: 0; color: var(--ink-soft); }

/* ---------- 12. Forms -------------------------------------- */
.sui-form { max-width: 40rem; margin-top: 1.5rem; }
.sui-field { display: block; margin-bottom: 1.125rem; }
.sui-field > span { display: block; margin-bottom: .375rem; font-weight: 600; font-size: 1rem; }
.sui-opt { font-weight: 400; color: var(--ink-soft); }

input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .75rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--ink);
  font: inherit; font-size: 1rem;
}
textarea { min-height: 7rem; resize: vertical; }
select {
  appearance: none; padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .75rem) 55%;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-width: 2px; border-color: var(--accent);
}
.sui-field-error { display: block; margin-top: .375rem; font-size: .875rem; font-weight: 600; }

@media (min-width: 48rem) {
  .sui-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
}

.sui-hp { position: absolute; left: -9999px; }
.sui-form-note { margin-top: 1rem; font-size: .875rem; color: var(--ink-soft); max-width: 55ch; }
.sui-form button[type="submit"] { margin-top: .5rem; min-width: min(14rem, 100%); }

.sui-alert {
  border: 1px solid var(--ink); border-left-width: 4px;
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  max-width: 40rem;
}
.sui-alert h3 { margin: 0 0 .375rem; font-size: 1.0625rem; }
.sui-alert p { margin: 0; }
/* No markers: the links carry a padded hit area, and a list marker would
   align to the text's last line rather than its first. */
.sui-alert ul { margin: .25rem 0 0; padding-left: 0; list-style: none; }
.sui-alert li a { display: inline-block; padding-block: .625rem; max-width: 100%; }
.sui-alert-error { border-left-color: var(--accent); }

/* ---------- 13. Breadcrumbs -------------------------------- */
.sui-breadcrumbs { padding-block: .25rem 0; font-size: .875rem; color: var(--ink-soft); }
.sui-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; }
.sui-breadcrumbs li { display: flex; align-items: center; }
.sui-breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--rule); }
.sui-breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- 14. Article list and body content -------------- */
.sui-post-list { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--divider); }
.sui-post-list li { padding-block: 1.5rem; border-bottom: 1px solid var(--divider); }
.sui-post-list h2, .sui-post-list h3 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 600; max-width: 40ch; }
.sui-post-list h2 a, .sui-post-list h3 a {
  display: inline-block; padding-block: .6875rem; max-width: 100%;
}
.sui-post-list a { text-decoration: underline; text-underline-offset: .2em; }
.sui-post-date { display: block; font-size: .875rem; color: var(--ink-soft); margin-bottom: .375rem; }
.sui-post-list p { margin: 0; color: var(--ink-soft); }

.sui-content { max-width: var(--measure); }
.sui-content > * { max-width: 65ch; }
.sui-content h2 { margin-top: 2.5rem; }
.sui-content h3 { margin-top: 2rem; }
.sui-content ul, .sui-content ol { padding-left: 1.25rem; }
.sui-content li { margin-bottom: .5rem; }
.sui-content blockquote {
  margin: 1.5rem 0; padding-left: 1.25rem; border-left: 2px solid var(--rule);
}
.sui-content table { width: 100%; border-collapse: collapse; }
.sui-content th, .sui-content td { text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--divider); }
.sui-content .wp-block-table, .sui-table-scroll { overflow-x: auto; max-width: 100%; }
.sui-content img { border-radius: var(--radius); }

.sui-pagination { margin-top: 2.5rem; }
.sui-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.sui-pagination a, .sui-pagination .current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); padding: 0 .75rem;
  border: 1px solid var(--divider); border-radius: var(--radius); text-decoration: none;
}
.sui-pagination .current { border-color: var(--ink); font-weight: 600; }
.sui-pagination .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

/* ---------- 15. Footer ------------------------------------- */
.sui-footer { border-top: 1px solid var(--rule); padding-block: 2.5rem 2rem; background: var(--page); }
@media (min-width: 48rem) { .sui-footer { padding-block: 3rem 2.25rem; } }
.sui-footer-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .sui-footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
.sui-footer h2 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; max-width: none; }
.sui-footer p { margin: 0 0 .75rem; color: var(--ink-soft); max-width: 40ch; }
.sui-footer-name { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .5rem; }
.sui-footer-contact, .sui-footer-links { list-style: none; margin: 0; padding: 0; }
.sui-footer-contact li { padding-block: .125rem; }
.sui-footer-contact a, .sui-footer-links a { display: inline-flex; align-items: center; min-height: var(--tap); }
.sui-footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--divider);
  font-size: .875rem; color: var(--ink-soft);
}

/* ---------- 16. Narrow-screen guards ----------------------- */
/* An inline-flex box sizes to max-content, so its text will not wrap and it
   can push the page sideways at large text sizes. Every control built that
   way is capped at the width actually available. */
.sui-btn, .sui-tel, .sui-inline-list a,
.sui-footer-contact a, .sui-footer-links a, .sui-breadcrumbs a { max-width: 100%; }
/* Grid and flex children default to min-width:auto, which lets a long word
   or a wide child push the whole page sideways. These keep the 320px
   requirement honest without hiding the overflow. */
.sui-tile, .sui-tile-body, .sui-steps li, .sui-two-col > *, .sui-quotes > *,
.sui-field-row > *, .sui-footer-grid > * { min-width: 0; }

.sui-breadcrumbs li, .sui-footer-contact li, .sui-post-list li { overflow-wrap: anywhere; }

/* Long email addresses and URLs in body copy break rather than overflow. */
.sui-content a, .sui-footer-contact a { overflow-wrap: anywhere; }

/* ---------- 17. Motion ------------------------------------- */
.sui-btn, .sui-nav-btn { transition: background-color 150ms ease, color 150ms ease; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}