/* Sarramet - polish theme.json cannot express.
   Mobile-first throughout; the estate that inspired this build runs ~70% phone
   and a rural trades site will run higher. */

:root {
  --sr-ease: cubic-bezier(.2, .7, .3, 1);
  --sr-radius: 3px;
}

* { -webkit-tap-highlight-color: transparent; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Skip link + focus: keyboard users must be able to see where they are. */
:where(a, button, input, textarea, .chip):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ header */
.sr-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.sr-header .wp-block-navigation {
  font-family: var(--wp--preset--font-family--body);
  font-size: .9375rem;
  font-weight: 500;
}
.sr-header .wp-block-navigation a { text-decoration: none; }
.sr-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); }
.sr-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--text); }
.sr-header .wp-block-site-title a:hover { color: var(--wp--preset--color--accent); }

/* the phone number is the conversion on a trades site - keep it reachable */
.sr-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .9375rem;
  text-decoration: none !important;
  padding: .6rem 1rem;
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--sr-radius);
  transition: border-color .2s var(--sr-ease), color .2s var(--sr-ease);
}
.sr-phone:hover { border-color: var(--wp--preset--color--accent); }

/* -------------------------------------------------------------------- hero */
.sr-hero {
  position: relative;
  padding-block: clamp(3.5rem, 11vw, 7.5rem) clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}
/* A machined hairline grid. Cheap, on-theme, and it means the hero does not
   depend on a photograph we do not have at usable resolution. */
.sr-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--wp--preset--color--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--wp--preset--color--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 80% at 78% 0%, #000 0%, transparent 72%);
  opacity: .55;
}
.sr-hero > * { position: relative; }
.sr-hero h1 { text-wrap: balance; max-width: 16ch; }
.sr-lead {
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  color: var(--wp--preset--color--muted);
  max-width: 46ch; line-height: 1.55;
}

/* eyebrow */
.sr-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------- reference */
/* The strongest asset this business has: who it has actually built for. */
.sr-refs {
  border-block: 1px solid var(--wp--preset--color--line);
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
}
.sr-refs ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 2.25rem;
}
.sr-refs li {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: clamp(.9375rem, 2.2vw, 1.0625rem);
  color: var(--wp--preset--color--text);
  letter-spacing: -.01em;
}
.sr-refs li span {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400; font-size: .8125rem;
  color: var(--wp--preset--color--muted);
  letter-spacing: 0;
}

/* ------------------------------------------------------------------- cards */
.wp-block-post-template.is-layout-grid { gap: 1.25rem; }

.sr-grid .wp-block-post {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--sr-radius);
  overflow: hidden;
  transition: border-color .25s var(--sr-ease), transform .25s var(--sr-ease);
}
.sr-grid .wp-block-post:hover { border-color: var(--wp--preset--color--line-strong); transform: translateY(-2px); }
.sr-grid .wp-block-post-featured-image { margin: 0; }
.sr-grid .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.04);
  transition: transform .5s var(--sr-ease), filter .3s var(--sr-ease);
}
.sr-grid .wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.035); filter: saturate(1) contrast(1.06);
}
.sr-grid .wp-block-post-title {
  margin: 0; padding: .9rem 1.05rem 1.05rem;
  font-size: 1rem !important; line-height: 1.3;
}
.sr-grid .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--text); }
.sr-grid .wp-block-post:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); }
.sr-grid .sr-terms {
  padding: 0 1.05rem 1rem; margin: -.5rem 0 0;
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

/* ----------------------------------------------------------------- filters */
.sarramet-filters { margin-block: 1.5rem 2.5rem; }
.filter-label {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wp--preset--color--muted);
  margin: 1.25rem 0 .6rem;
}
.sarramet-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 100px;
  transition: border-color .2s var(--sr-ease), background .2s var(--sr-ease);
  min-height: 40px;               /* thumb target */
}
.chip:hover { border-color: var(--wp--preset--color--line-strong); }
.chip span { color: var(--wp--preset--color--muted); font-size: .8125rem; }
.chip.is-active {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
}
.chip.is-active span { color: var(--wp--preset--color--ink); opacity: .7; }

/* ------------------------------------------------------------ light panels */
.sr-paper {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--paper-ink);
}
.sr-paper :where(h1, h2, h3, h4) { color: var(--wp--preset--color--paper-ink); }
.sr-paper p { color: var(--wp--preset--color--paper-muted); }
.sr-paper a { color: var(--wp--preset--color--accent-deep); }
.sr-paper .wp-block-button__link {
  background: var(--wp--preset--color--paper-ink);
  color: var(--wp--preset--color--paper);
}

/* ---------------------------------------------------------------- services */
/* Cards are anchors now. Edgar's note was that they read as tabs but were not
   clickable - so the affordance is made real rather than removed: each links to
   that type's gallery, or to Contact if we have no photos of it yet. */
.sr-services {
  display: grid; gap: 1px;
  background: var(--wp--preset--color--line);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--sr-radius);
  overflow: hidden;
}
.sr-svc {
  display: flex; flex-direction: column; gap: .5rem;
  padding: clamp(1.35rem, 3vw, 1.85rem);
  background: var(--wp--preset--color--ink);
  text-decoration: none !important;
  transition: background .22s var(--sr-ease);
  min-height: 100%;
}
.sr-svc:hover { background: var(--wp--preset--color--surface); }
.sr-svc h3 {
  margin: 0; font-size: 1.1875rem; line-height: 1.25;
  color: var(--wp--preset--color--text);
  transition: color .22s var(--sr-ease);
}
.sr-svc:hover h3 { color: var(--wp--preset--color--accent); }
.sr-svc p {
  margin: 0; font-size: .9375rem; line-height: 1.55;
  color: var(--wp--preset--color--muted);
}
.sr-svc-foot {
  margin-top: auto; padding-top: 1.1rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.sr-svc-cue { color: var(--wp--preset--color--accent); }
.sr-svc-arrow {
  color: var(--wp--preset--color--accent);
  font-size: 1rem; transition: transform .22s var(--sr-ease);
}
.sr-svc:hover .sr-svc-arrow { transform: translateX(4px); }
@media (min-width: 700px)  { .sr-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sr-services { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ single */
.sr-single-media img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--sr-radius);
  /* never upscale past the source: 734px is all we have */
  max-width: 734px; margin-inline: auto;
}
.sr-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  padding-block: 1rem; margin-block: 1.5rem;
  border-block: 1px solid var(--wp--preset--color--line);
  font-size: .875rem; color: var(--wp--preset--color--muted);
}
.sr-meta strong {
  color: var(--wp--preset--color--text); font-weight: 600;
  display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: .15rem;
}

/* ------------------------------------------------------------------ footer */
.sr-footer {
  border-top: 1px solid var(--wp--preset--color--line);
  padding-block: clamp(2.5rem, 7vw, 4rem);
  font-size: .9375rem;
}
.sr-footer a { text-decoration: none; }
.sr-footer a:hover { text-decoration: underline; }
.sr-colophon {
  border-top: 1px solid var(--wp--preset--color--line);
  margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .8125rem; color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- language */
.sr-lang { display: flex; gap: .35rem; align-items: center; font-size: .8125rem; }
.sr-lang a {
  text-decoration: none; padding: .35rem .55rem; border-radius: 2px;
  color: var(--wp--preset--color--muted); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.sr-lang a:hover, .sr-lang .current-lang a { color: var(--wp--preset--color--text); }
.sr-lang ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sr-grid .wp-block-post:hover { transform: none; }
  .sr-grid .wp-block-post:hover .wp-block-post-featured-image img { transform: none; }
}

/* --------------------------------------------------------------- nav */
.sr-nav-list { display: none; }
.sr-nav ul { list-style: none; margin: 0; padding: 0; }
.sr-nav a {
  text-decoration: none; color: var(--wp--preset--color--text);
  font-size: .9375rem; font-weight: 500;
}
.sr-nav a:hover, .sr-nav a[aria-current="page"] { color: var(--wp--preset--color--accent); }

/* mobile: <details> disclosure, no JS */
.sr-nav-mobile summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 .25rem;
  font-size: .875rem; font-weight: 600;
  color: var(--wp--preset--color--text);
}
.sr-nav-mobile summary::-webkit-details-marker { display: none; }
.sr-burger {
  width: 18px; height: 12px;
  background-image:
    linear-gradient(var(--wp--preset--color--text), var(--wp--preset--color--text)),
    linear-gradient(var(--wp--preset--color--text), var(--wp--preset--color--text)),
    linear-gradient(var(--wp--preset--color--text), var(--wp--preset--color--text));
  background-size: 18px 2px;
  background-position: 0 0, 0 5px, 0 10px;
  background-repeat: no-repeat;   /* without this the three layers tile and fill solid */
}
.sr-nav-mobile[open] > ul {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--wp--preset--color--ink);
  border-block: 1px solid var(--wp--preset--color--line);
  padding: .5rem var(--wp--preset--spacing--40) 1rem;
  display: flex; flex-direction: column;
}
.sr-nav-mobile[open] > ul a {
  display: block; padding: .85rem 0; font-size: 1.0625rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.sr-nav-mobile[open] > ul li:last-child a { border-bottom: 0; }

@media (min-width: 900px) {
  .sr-nav-mobile { display: none; }
  .sr-nav-list { display: flex; gap: 1.75rem; align-items: center; }
}
/* the phone is the conversion: hide the number on the smallest screens but keep
   it one tap away in the header, never remove it */
@media (max-width: 479px) {
  .sr-phone { padding: .55rem .7rem; font-size: .875rem; }
}

/* --------------------------------------------- mobile header fits, finally */
/* At 375px the header row was overflowing by 51px: title + menu + languages +
   phone cannot share one nowrap row. Languages move into the disclosure; the
   phone stays, because on a trades site the phone IS the conversion. */
@media (max-width: 899px) {
  .sr-header .sr-lang { display: none; }
  .sr-header .wp-block-group.is-nowrap { flex-wrap: nowrap; min-width: 0; }
  .sr-header .wp-block-site-title { flex: 0 1 auto; min-width: 0; }
  .sr-header .wp-block-site-title a { white-space: nowrap; }
}
@media (max-width: 419px) {
  .sr-nav-mobile summary { font-size: 0; gap: 0; }   /* icon only, label still read by AT */
  .sr-nav-mobile summary .sr-burger { font-size: 1rem; }
}

/* language row inside the mobile menu */
.sr-nav-langs { margin-top: .35rem; padding-top: .85rem; border-top: 1px solid var(--wp--preset--color--line); }
.sr-nav-langs ul { display: flex; gap: .5rem; }
.sr-nav-langs a {
  display: inline-block; padding: .6rem .9rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 2px; text-transform: uppercase;
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em;
  color: var(--wp--preset--color--muted);
}
.sr-nav-langs .current-lang a { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }

/* give the wordmark a real tap target */
.sr-header .wp-block-site-title a { display: inline-block; padding-block: .65rem; }


/* ============================================================= ALIGNMENT
   One left edge for the whole site.

   The old setup had contentSize 720 inside a 1240 wide container, so ordinary
   text was CENTRED in a narrow column while headings and grids marked alignwide
   sat at the wide column's left edge. Every page therefore had two different
   left edges, and the H1 sat in the middle of the page - which is what Edgar's
   screenshots showed on Teenused, Firmast and Kontakt.

   Fix: content and wide are now the same 1240px column, so every block starts
   at the same x. Line length is then capped per element below, left-aligned,
   rather than by centring a narrower column. WordPress sets the side margins
   with !important, so the overrides need it too. */

/* Specificity matters here: WordPress's layout rule is
   `.wp-container-... > :where(:not(.alignleft)...)` = 0-1-0 and !important.
   A :where()-wrapped selector scores 0-0-0 and loses even with !important,
   which is why the first attempt at this changed nothing. */
.entry-content.wp-block-post-content > *,
.wp-block-group.sr-hero > *,
.wp-block-group.sr-refs > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* readable measure, without centring anything */
.entry-content.wp-block-post-content > :where(p, ul, ol) { max-width: 68ch; }
.entry-content.wp-block-post-content > h1 { max-width: 20ch; }
.entry-content.wp-block-post-content > h2 { max-width: 28ch; }
.sr-lead                           { max-width: 52ch; }
.sr-hero h1                        { max-width: 18ch; }

/* full-bleed sections keep their own inner padding at zero so their content
   lines up with everything else */
.sr-hero, .sr-refs { padding-left: 0 !important; padding-right: 0 !important; }

/* the works/services grids and filters span the full column */
.sr-services, .sr-grid, .sarramet-filters { max-width: none !important; width: 100%; }
.sr-services { margin-top: 1.25rem; }


/* The light CTA band. Deterministic instead of vw arithmetic: pull the band out
   by exactly its own padding, so the band reads wider than the column while its
   TEXT lands on the same left edge as every other block. (A 100vw full-bleed
   version overshot, because percentage margins resolve against the containing
   block, not the viewport.) */
html { overflow-x: clip; }   /* clip, not hidden - hidden breaks sticky */

/* Scoped through .entry-content so it outranks the site-wide left-alignment
   rule above, which is 0-2-0 and was zeroing this band's negative margin. */
.entry-content.wp-block-post-content > .sr-paper,
.sr-paper {
  /* literal, not a custom property: a var() that fails to resolve makes the
     whole declaration invalid at computed-value time, so it is dropped
     silently and the block's own padding wins. That is what happened here. */
  margin-left: -32px !important;
  margin-right: -32px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  max-width: none !important;
  width: auto !important;
}
.sr-paper > * {
  max-width: 68ch !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ------------------------------------------------------------- works grid */
/* WordPress lays the query loop out with flex and per-card flex-basis computed
   from its own assumed gap. That disagreed with the real gap by ~5px, so three
   401px cards plus gaps came to 1245px in a 1240px column and the third wrapped
   - which is why the gallery rendered two-up on a 1440px screen. A real grid
   removes the arithmetic entirely. */
.sr-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.sr-grid .wp-block-post {
  width: auto !important;
  max-width: none !important;
  flex-basis: auto !important;
  margin: 0 !important;
}
@media (max-width: 1039px) {
  .sr-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .sr-grid .wp-block-post-template { grid-template-columns: 1fr; }
}

/* cards are equal height with the image on a fixed ratio, so rows line up */
.sr-grid .wp-block-post { display: flex; flex-direction: column; }
.sr-grid .wp-block-post-featured-image { aspect-ratio: 4 / 3; overflow: hidden; }
.sr-grid .wp-block-post-title { margin-top: auto !important; }

/* ------------------------------------------------------ vertical rhythm */
/* Measured gaps between top-level blocks were 16-20px regardless of role, so a
   heading sat as close to the paragraph above it as to its own content and the
   page read as one undifferentiated column. Spacing now encodes the hierarchy:
   big gap before a new section, small gap inside one. */
.entry-content.wp-block-post-content > * + * { margin-top: 2rem; }

/* a new section gets air before it */
.entry-content.wp-block-post-content > h2 { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

/* ...but its own content stays attached to it */
.entry-content.wp-block-post-content > h2 + *,
.entry-content.wp-block-post-content > h1 + * { margin-top: 1.25rem; }

.entry-content.wp-block-post-content > .sr-services,
.entry-content.wp-block-post-content > .sr-grid,
.entry-content.wp-block-post-content > .sarramet-filters { margin-top: 1.75rem; }

/* !important: the block carries an inline margin-top, and inline beats any
   plain selector. The CTA band was landing 36px below the grid while a mere
   heading got 88px, which inverted the hierarchy. */
.entry-content.wp-block-post-content > .sr-paper { margin-top: clamp(4rem, 9vw, 7rem) !important; }

/* hero internals */
.sr-hero .sr-eyebrow { margin-bottom: .9rem; }
.sr-hero h1 { margin-top: 0; margin-bottom: 1.5rem; }
.sr-hero .sr-lead { margin-top: 0; }
.sr-hero .wp-block-buttons { margin-top: 2.5rem !important; }

/* the reference strip is a divider band, not a section - keep it tight */
.entry-content.wp-block-post-content > .sr-refs { margin-top: clamp(2.5rem, 6vw, 4rem); }
.sr-refs .sr-eyebrow { margin-bottom: 1.1rem; }

/* first block on a subpage should not collide with the sticky header */
.entry-content.wp-block-post-content > :first-child { margin-top: 0; }

/* The CTA band's pull-out must equal the ACTUAL root padding, which is 32px on
   desktop but 16px on small screens. Using the desktop value everywhere pushed
   the band 16px off the left edge on mobile and created real horizontal
   overflow - caught at 375px, not by eye. */
@media (max-width: 781px) {
  .entry-content.wp-block-post-content > .sr-paper,
  .sr-paper {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* -------------------------------------------------------- footer layout */
/* Footer content comes from [sarramet_footer] so it can be language-aware;
   parts/footer.html was hard-coded Estonian and served the same Estonian text
   on every English and Russian page. */
.sr-footer-cols {
  display: grid;
  gap: 2.5rem 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .sr-footer-cols { grid-template-columns: 2fr 1fr 1fr; }
}
.sr-footer-cols h3 {
  margin: 0 0 .75rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.375rem; letter-spacing: -0.01em;
}
.sr-footer-cols p { margin: 0; }
.sr-footer-label {
  font-size: .75rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--wp--preset--color--muted);
  margin-bottom: .6rem !important;
}
.sr-footer-tag { color: var(--wp--preset--color--muted); max-width: 46ch; }
.sr-footer .sr-colophon {
  border-top: 1px solid var(--wp--preset--color--line);
  margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .8125rem; color: var(--wp--preset--color--muted);
}

/* Map link on the contact pages. The written directions ("turn off at the
   Aruvalla bridge, 6 km") are precise but assume you already know the area;
   this gives the same information to someone who does not. Styled as an
   action rather than body copy so it reads as a thing you can do. */
.sr-maplink {
    margin-top: 1.25rem;
}
.sr-maplink a {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.sr-maplink a:hover,
.sr-maplink a:focus-visible {
    opacity: .75;
}

/* ---------------------------------------------------------------------------
   Enquiry form. See mu-plugins/sarramet-contact-form.php.

   THE HONEYPOT RULE BELOW IS LOAD-BEARING. Without it the decoy field is
   visible, real people fill it in, and every submission is silently discarded
   as spam. If you refactor this file, keep .sr-hp hidden.
   --------------------------------------------------------------------------- */
.sr-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.sr-form-wrap { margin-top: 3rem; }
.sr-form-h { margin-bottom: .5rem; }
.sr-form-intro { margin-top: 0; max-width: 46ch; opacity: .85; }

.sr-form { max-width: 34rem; margin-top: 1.5rem; }
.sr-f { display: flex; flex-direction: column; margin: 0 0 1.25rem; }
.sr-f label { font-weight: 600; margin-bottom: .35rem; }
.sr-opt { font-weight: 400; opacity: .7; }

.sr-f input,
.sr-f textarea {
    font: inherit;
    color: inherit;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 2px;
    padding: .7rem .8rem;
    width: 100%;
    /* 16px minimum: iOS Safari zooms the whole page on focus below this, which
       on a phone reads as the layout breaking when you tap a field. */
    font-size: max(1rem, 16px);
}
.sr-f textarea { resize: vertical; min-height: 8rem; }
.sr-f input:focus-visible,
.sr-f textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sr-f input[aria-invalid="true"],
.sr-f textarea[aria-invalid="true"] { border-color: #e06a6a; }

.sr-hint { font-size: .875rem; opacity: .7; margin-top: .35rem; }

.sr-form-actions { margin-top: 1.75rem; }
.sr-btn {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: .8rem 1.6rem;
    border: 1px solid currentColor;
    border-radius: 2px;
    background: transparent;
    color: inherit;
    /* 44px minimum touch target - this is a site people use in a van */
    min-height: 44px;
}
.sr-btn:hover { opacity: .8; }
.sr-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.sr-form-ok,
.sr-form-err {
    border-left: 3px solid currentColor;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    background: rgba(255, 255, 255, .05);
}
.sr-form-ok:focus,
.sr-form-err:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.sr-form-err { border-left-color: #e06a6a; }
.sr-form-err ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.sr-form-ok p:last-child,
.sr-form-err p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .sr-form { max-width: none; }
}


/* --- 2026-09-04 (Corbel) -------------------------------------------------
   Services grid: tie the footer to its own card, give the tiles a keyboard
   focus state they never had, style the new contact tile, and guard against
   the empty-cell artifact returning if the term count changes.
   ---------------------------------------------------------------------- */

/* The footer sits at the bottom of an equal-height cell (margin-top:auto), so
   on a tall row it floated free of its own text. A hairline binds it to the
   card - this is the "differentiate them" half of the report. */
.sr-svc-foot { border-top: 1px solid var(--wp--preset--color--line); }

/* The whole tile is an <a>, but there was NO :focus-visible rule anywhere in
   this grid, so keyboard users got no indication at all. Mirrors :hover. */
.sr-svc:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: -2px;
  background: var(--wp--preset--color--surface);
}
.sr-svc:focus-visible h3 { color: var(--wp--preset--color--accent); }
.sr-svc:focus-visible .sr-svc-arrow { transform: translateX(4px); }

/* The contact tile filling the ninth cell. */
.sr-svc-cta h3 { color: var(--wp--preset--color--accent); }

/* Belt and braces: if the number of service types ever stops being a multiple
   of the column count, stretch the last tile across the remainder rather than
   leave a cell empty. */
@media (min-width: 1040px) {
  .sr-services > .sr-svc:last-child:nth-child(3n+1) { grid-column: span 3; }
  .sr-services > .sr-svc:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 700px) and (max-width: 1039.98px) {
  .sr-services > .sr-svc:last-child:nth-child(2n+1) { grid-column: span 2; }
}