@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&family=Lexend:wght@400;500;600;700&family=Readex+Pro:wght@400;500;600;700&display=swap');

/*Design tokens, mapped 1:1 onto the Tailwind scales the React app uses, so a value
  read in src/components can be traced straight to this block.

  Before this the file carried ~10 ad-hoc greys, two different border greys (#303030
  and #252525), and Tailwind *v3* slate/gray values (#cbd5e1, #d1d5db, #e5e7eb) that
  matched nothing else on the site. Names mirror the app's neutral/orange/amber scale
  rather than describing a shade, which is what makes the mapping checkable.

  Radius mirrors Tailwind too: lg = rounded-2xl, md = rounded-xl, sm = rounded-lg.
  The previous 14px / 7px / 6px values were on no scale at all. */
:root {
  --font-body: 'Readex Pro', 'Segoe UI', Arial, sans-serif;
  --font-ui: 'Lexend', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Fugaz One', 'Segoe UI', Arial, sans-serif;

  --bg: #0a0a0a;              /* neutral-950 — matches src/index.css body */
  --surface: #171717;         /* neutral-900 */
  --surface-strong: #1f1f1f;  /* neutral-800 */
  --well: #0d0d0d;            /* recessed field */
  --line: #262626;            /* neutral-800 */
  --line-soft: rgba(255, 255, 255, .1); /* white/10 — the app's card hairline */

  --text: #fafafa;            /* neutral-50 */
  --ink: #111111;             /* text on the warm gradient — the app uses text-black */
  --muted: #a3a3a3;           /* neutral-400 */
  --muted-strong: #d4d4d4;    /* neutral-300 */

  --orange: #f97316;          /* orange-500 */
  --orange-light: #fb923c;    /* orange-400 */
  --amber: #fbbf24;           /* amber-400 */
  --warm: #fdba74;            /* orange-300 */

  --emerald: #34d399;         /* emerald-400 */
  --red: #f87171;             /* red-400 */

  --radius-lg: 16px;          /* rounded-2xl */
  --radius-md: 12px;          /* rounded-xl */
  --radius-sm: 8px;           /* rounded-lg */

  /*Warm light is capped here instead of at each use. README §9 keeps it at or below
    ~0.2 so the warm h1 stays above a 4.5:1 contrast ratio against near-black. */
  --glow: rgba(249, 115, 22, .18);
  --glow-soft: rgba(251, 191, 36, .1);
  --rim: rgba(251, 146, 60, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
/* Headings share the app's heading face and line-height (src/index.css). */
h1, h2, h3, h4 { font-family: var(--font-ui); line-height: 1.15; font-weight: 700; }
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--warm); }
.site-header { border-bottom: 1px solid var(--line-soft); background: rgba(10, 10, 10, .96); }
/*`14px` rather than the previous `18px`: the mark is 30px tall where the wordmark alone
  was ~18px, so without this the bar would grow from ~54px to ~66px. At 14px it is ~58px,
  which keeps the five static pages close to the React header's own proportions. */
.nav { align-items: center; display: flex; gap: 20px; justify-content: space-between; margin: auto; max-width: 1180px; padding: 14px 24px; }
/*`inline-flex` puts the mark and the wordmark on one row. The old rule was block-level
  with the wordmark inline, which left no room for a mark. */
.brand { align-items: center; color: #fff; display: inline-flex; font: 700 1.1rem/1 var(--font-ui); gap: 10px; letter-spacing: .08em; }
/*`flex: none` so the nav's space-between layout cannot squash the mark, and a fixed
  height so the bar height stays predictable across all five pages. The source is 1:1,
  so the square box does not distort it. */
.brand-mark { display: block; flex: none; height: 30px; width: 30px; }
.brand span { color: var(--orange); }
.nav-links { display: flex; flex-wrap: wrap; gap: 18px; font: 500 .8rem/1.4 var(--font-ui); }
.nav-links a { color: var(--muted-strong); }
.nav-links a:hover { color: var(--amber); }
.page-shell { margin: auto; max-width: 1180px; padding: 0 24px; }

/*The hero is a flat near-black base with layered glows, not a filled vertical ramp.
  README §9: one implied light source per view, positioned so the brightest area stays
  clear of the text — which is why both glows are pushed off-canvas (88% -12% and
  4% 112%) rather than sitting under the h1. The ramp this replaced ended in #351306,
  a warm brown wash across the whole band. */
.hero {
  background: var(--bg);
  border-bottom: 1px solid rgba(249, 115, 22, .22);
  padding: 74px 0 82px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  background:
    radial-gradient(120% 100% at 88% -12%, var(--glow-soft), var(--glow) 38%, transparent 64%),
    radial-gradient(90% 85% at 4% 112%, rgba(154, 52, 18, .28), transparent 60%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
/*Keeps the copy above the glow. The light layers are absolutely positioned, and an
  absolute sibling paints above in-flow content regardless of DOM order (§9). */
.hero > * { position: relative; }

/*An eyebrow is a rule plus tracked-out text (§9), not a pill. `inline-flex` keeps it
  shrink-wrapped so the rule sits beside the text instead of the block's far edge. */
.eyebrow {
  align-items: center;
  color: var(--warm);
  display: inline-flex;
  font: 700 .72rem/1.2 var(--font-ui);
  gap: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.eyebrow::before {
  background: linear-gradient(90deg, var(--orange), transparent);
  content: '';
  height: 1px;
  width: 40px;
}
.breadcrumb { color: var(--muted); font-size: .8rem; margin-bottom: 38px; }
.breadcrumb a { color: var(--muted-strong); }
.breadcrumb a::before { color: var(--orange); content: '\2190'; display: inline-block; font-size: 1.45rem; font-weight: 700; line-height: 0; margin-right: 10px; vertical-align: -2px; }
h1 { color: var(--warm); font-size: clamp(2.35rem, 6vw, 5.2rem); letter-spacing: -.02em; margin: 16px 0 24px; max-width: 900px; }
h2 { color: var(--text); font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 24px; }
h3 { color: var(--text); font-size: 1.05rem; margin: 0 0 8px; }

/*The price inside a generated <h2> ("Process & AI Sprint — alkaen 2 900 €"). The
  generator wraps it in this span because a gradient needs the phrase isolated in
  markup, and gluing the figure into the heading is what made the whole line read as
  one white blob.

  `color: transparent` appears only inside the @supports block, and that is deliberate:
  on a browser without `background-clip: text` it would make the figure invisible rather
  than fall back, which is how this technique classically fails. The solid colour in the
  rule above is the real fallback, not a formality. */
.h-price { color: var(--amber); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .h-price {
    background: linear-gradient(90deg, var(--amber), var(--orange-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/*The VAT note the generator writes after a price, and the one the digital-audit hero
  carries by hand. Muted and smaller than the figure it qualifies, so it reads as a
  condition of the price rather than as part of it, and nowrap so the note never breaks
  between its own brackets. */
.vat-note { color: var(--muted); font-size: .72em; font-weight: 600; margin-left: .45em; white-space: nowrap; }
.lead { color: var(--muted-strong); font-size: clamp(1.05rem, 2vw, 1.25rem); margin: 0; max-width: 760px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/*Buttons take the app's primary treatment — a warm gradient with near-black text — and
  no longer a flat orange fill with a 7px radius, which was on no radius scale. Hover
  brightens the light instead of swapping the fill, per README §9 ("hover changes the
  light, not the surface"). */
.button {
  align-items: center;
  background: linear-gradient(90deg, var(--orange), var(--amber));
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink);
  display: inline-flex;
  font: 700 .85rem/1.2 var(--font-ui);
  gap: 8px;
  padding: 13px 18px;
  transition: filter .2s ease, box-shadow .2s ease;
}
.button:hover {
  box-shadow: 0 0 0 1px var(--rim), 0 8px 24px -12px rgba(249, 115, 22, .6);
  color: var(--ink);
  filter: brightness(1.1);
}
.button:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 2px; }
.button.secondary { background: rgba(255, 255, 255, .06); border-color: var(--line-soft); color: var(--text); }
.button.secondary:hover { background: rgba(255, 255, 255, .11); box-shadow: none; color: #fff; filter: none; }
/*The button row closing a product card. `flex-wrap` rather than a nowrap row, because
  'Keskustele projektistasi' beside a product name is wider than the narrowest column —
  wrapping drops the secondary below the primary instead of squeezing both.*/
.section-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.content { padding: 72px 0; }
.intro { color: var(--muted); font-size: 1.05rem; max-width: 780px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 58px; }

/*Lit surfaces (README §9). A card is a surface that is *lit*, not a filled box: a rim
  hairline along the top edge, and a spotlight that fades in on hover. Both are
  pseudo-elements, so the treatment needs no extra markup on any of the five pages —
  which matters because two of them are partly machine-generated
  (scripts/generate-service-anchors.ts writes the option and FAQ blocks).

  An element has only two pseudo-elements, so the sweep that the app's SHEEN_CLASSES
  adds has no third slot here and is deliberately omitted. Hover reveals the light
  instead of translating the card, so a card keeps reading as a surface rather than a
  button (§9).

  The three selectors are grouped rather than repeated so the whole set cannot drift
  apart again; the per-component rules below no longer re-declare surface properties. */
.card,
.process-step,
.engagement-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  transition: border-color .5s ease;
}
/*The hairline is square-ended on purpose: the gradient fades to transparent at both
  ends, so the ends are invisible and a radius here would only distort a 1px box. */
.card::before,
.process-step::before,
.engagement-card::before {
  background: linear-gradient(90deg, transparent, var(--rim), transparent);
  content: '';
  height: 1px;
  left: 0;
  opacity: .4;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .5s ease;
}
.card::after,
.process-step::after,
.engagement-card::after {
  background: radial-gradient(120% 100% at 100% 0%, var(--glow), transparent 62%);
  border-radius: inherit;
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity .5s ease;
}
.card:hover,
.process-step:hover,
.engagement-card:hover { border-color: rgba(251, 146, 60, .4); }
.card:hover::before,
.process-step:hover::before,
.engagement-card:hover::before { opacity: 1; }
.card:hover::after,
.process-step:hover::after,
.engagement-card:hover::after { opacity: 1; }

/*Card copy is lifted above the light layers: an absolutely positioned sibling paints
  over in-flow content regardless of DOM order (§9). */
.card > *,
.process-step > *,
.engagement-card > * { position: relative; }

.card p { color: var(--muted); font-size: .94rem; margin: 0; }

/*A section boundary is a lit hairline, not a flat `border-top` (§9). */
.section { padding-top: 58px; position: relative; }
.section::before {
  background: linear-gradient(90deg, transparent, rgba(251, 146, 60, .35), transparent);
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
/*Body copy in a section is neutral. It used to be `--warm` (orange-300), which put every
  paragraph on a page inside a single warm band and left `strong` (orange-400) only one
  step away on the same hue — so bold text stopped registering as emphasis at all.
  Emphasis is brightness now, and warm is reserved for the two label roles below: an
  accent only reads as an accent while the body around it stays neutral. */
.section p { color: var(--muted-strong); max-width: 820px; }
.section p strong { color: var(--text); }

/*A paragraph whose *only* child is <strong> is a label, not emphasis — the generator
  emits `<p><strong>Työpajassa</strong></p>` immediately above the list it introduces.
  It takes the §9 eyebrow treatment, so it reads as a heading for that list instead of a
  stray orange line floating above it. */
.section p > strong:only-child {
  color: var(--warm);
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/*An inline label introduces a sentence ("Kenelle? …", "Lopputulos: …"). It stays inline
  and takes a second accent step, which is what keeps it distinct from the label above
  rather than looking like the same thing in two places. */
.section p > strong:first-child:not(:only-child) {
  color: var(--amber);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  margin-right: .35rem;
  text-transform: uppercase;
}

/*A recessed well, not another card. The checklist used to be a card with a *second*
  card on every <li>, which is nested surfaces — the items now read as content inside
  their section instead. */
.checklist {
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 22px 0 1rem;
  max-width: 820px;
  padding: 1rem;
}
/*A hairline between items rather than around them: the list is already a well, and the
  divider is what gives it a rhythm that a bare 10px gap could not. */
.checklist li { color: var(--muted-strong); padding-block: .8rem; padding-left: 1.75rem; position: relative; }
.checklist li + li { border-top: 1px solid var(--line); }
/*A drawn marker in place of the `•` character. A glyph used as an icon takes its size
  and alignment from whichever font happens to resolve it, which is why the old rule
  needed `line-height: 0` to fake the centring and a 4rem indent to clear a 1.5rem dot.
  This is a lit dot — the same "light, not fill" vocabulary as the cards — at a fixed
  pixel size, tied optically to the first line of text rather than to the item's box. */
.checklist li::before {
  background: linear-gradient(135deg, var(--amber), var(--orange));
  border-radius: 9999px;
  box-shadow: 0 0 8px rgba(251, 146, 60, .45);
  content: '';
  height: 6px;
  left: .1rem;
  position: absolute;
  top: calc(.8rem + .55em);
  width: 6px;
}
.faq-list { display: grid; gap: 10px; max-width: 820px; margin-bottom: 1rem; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; }
/*The default disclosure triangle was the last piece of browser chrome left on these
  pages. A drawn chevron replaces it, so the control matches everything else and states
  its own state instead of relying on the reader to notice the marker changed. */
summary {
  align-items: center;
  color: var(--text);
  cursor: pointer;
  display: flex;
  font: 600 .95rem/1.4 var(--font-ui);
  gap: 10px;
  list-style: none;
}
/*Safari paints its own marker unless this is removed as well.*/
summary::-webkit-details-marker { display: none; }
summary::before {
  border-bottom: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  content: '';
  flex: none;
  height: 6px;
  transform: rotate(-45deg);
  transition: transform .2s ease;
  width: 6px;
}
/*Closed points along the row; open points down at the answer.*/
details[open] > summary::before { transform: rotate(45deg); }
summary:hover { color: var(--warm); }
summary:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 2px; }
details p { color: var(--muted); margin: 14px 0 0; }
/*A numbered process list. The counter renders the step number in a small ring instead of
  the default '1.' marker, which aligns to the text baseline and reads as a footnote
  rather than a step. The ring is the same amber hairline used on the cards, so the
  sequence looks like part of the page rather than a pasted-in list.*/
.steps { counter-reset: step; display: grid; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.steps li { color: var(--muted-strong); padding-left: 34px; position: relative; }
.steps li::before { background: rgba(251, 146, 60, .12); border: 1px solid rgba(251, 146, 60, .35); border-radius: 999px; color: var(--amber); content: counter(step); counter-increment: step; font: 700 .72rem/22px var(--font-ui); height: 22px; left: 0; position: absolute; text-align: center; top: 1px; width: 22px; }

.price { color: var(--amber); font: 700 1.8rem/1.2 var(--font-ui); margin: 18px 0 0; }
/*The credit terms, which have to sit under the figure they qualify. Sized down from
  the lead and held to a readable measure so the sentence wraps beneath the price
  instead of widening the hero column, and grey rather than amber so it reads as a
  condition on the price rather than a second price.*/
.price-note { color: var(--muted); font: 500 .95rem/1.55 var(--font-body); margin: 8px 0 0; max-width: 46ch; }
/*The footer seam is a lit hairline like every other section boundary, rather than a
  third border grey — #252525 had no counterpart anywhere else in the file. */
.footer { color: var(--muted); padding: 34px 0 42px; position: relative; }
.footer::before {
  background: linear-gradient(90deg, transparent, rgba(251, 146, 60, .3), transparent);
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.footer-row { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }
.footer small { font-size: .78rem; }

/* Enhanced service architecture components */
/*A warm callout expresses its light as a low-alpha overlay on the normal surface,
  so it stays on the same token set as every other card instead of being a second,
  separately-tuned gradient. */
.package-callout {
  align-items: center;
  background: linear-gradient(135deg, rgba(249, 115, 22, .12), rgba(251, 191, 36, .06)), var(--surface);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin: 36px 0;
  padding: 20px 24px;
}
.package-callout-content h4 {
  color: #fff;
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.package-callout-content p {
  color: var(--muted-strong);
  font-size: 0.92rem;
  margin: 0;
}
.package-callout-btn {
  background: transparent;
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  color: var(--warm);
  font: 600 0.85rem/1.2 var(--font-ui);
  padding: 10px 18px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.package-callout-btn:hover {
  background: var(--orange);
  color: var(--ink);
}
.package-callout-btn:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 2px; }

/* Process Timeline / Roadmap */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 30px 0 48px;
}
/*Surface properties come from the grouped lit-surface rule above, so this carries only
  what is specific to a process step. Re-declaring them here would win on source order
  and quietly undo that rule. */
.process-step { padding: 20px; }
/*The step number takes the display face. §9 reserves the display face for ranked or
  enumerated content, and a process step is enumerated — which is the distinction that
  keeps a numeral from being mere decoration. It was 1.3rem Lexend before. */
.process-num {
  color: var(--orange);
  display: inline-block;
  font: 400 2rem/1 var(--font-display);
  margin-bottom: 12px;
}
.process-step h4 {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 8px;
}
.process-step p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

/* Tech Badges / Chips */
.tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 28px;
}
.tech-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  border-radius: 9999px;
  color: var(--muted-strong);
  font: 500 0.8rem/1.2 var(--font-ui);
  letter-spacing: 0.02em;
  padding: 5px 12px;
}

/* Engagement models 2-col or 3-col */
.engagement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0 48px;
}
/*Surface properties come from the grouped lit-surface rule above. A *featured* card may
  carry an always-on warm glow (§9), which is what the warm overlay expresses — it used
  to be a flat #22150f→#14100e ramp, a warm wash across the whole card. */
.engagement-card.featured {
  background: linear-gradient(180deg, rgba(249, 115, 22, .07), transparent 55%), var(--surface);
  border-color: rgba(249, 115, 22, 0.5);
}
/*Re-stated for the featured case: its border-color is declared at the same specificity
  and later in the file, so without this it would win on hover too and the card would
  lose its hover feedback entirely. */
.engagement-card.featured:hover { border-color: rgba(249, 115, 22, 0.75); }
.engagement-card h3 {
  color: #fff;
  font-size: 1.15rem;
  margin: 0 0 6px;
}
.engagement-tag {
  color: var(--amber);
  display: inline-block;
  font: 600 0.75rem/1.2 var(--font-ui);
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.engagement-card p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 16px;
}

/* Fast contact box on static pages */
.contact-cta-box {
  align-items: center;
  background: radial-gradient(circle at 90% 20%, var(--glow), transparent 45%), var(--surface);
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin: 54px 0 20px;
  padding: 36px;
}
.contact-cta-box h3 {
  color: #fff;
  font-size: 1.4rem;
  margin: 0 0 8px;
}
.contact-cta-box p {
  color: var(--muted-strong);
  font-size: 0.95rem;
  margin: 0;
  max-width: 600px;
}
.direct-contact-links {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 16px;
  margin-top: 14px;
}
.direct-contact-links a {
  color: var(--warm);
  font-weight: 500;
}

/* Embedded Service Inquiry Form on Static Pages */
/*No `overflow: hidden` here on purpose: this card wraps the form, and clipping it
  would cut off the focus rings the fields now carry. Nothing in it overflows anyway. */
.service-form-card {
  background: var(--surface);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: var(--radius-lg);
  margin: 48px 0 24px;
  padding: 32px;
}
.service-form-card h3 {
  font-size: 1.35rem;
  color: #fff;
  margin: 0 0 8px;
}
.service-form-card p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 24px;
}
.static-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.static-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.static-field.full {
  grid-column: 1 / -1;
}
.static-field label {
  color: var(--muted-strong);
  font: 500 0.82rem/1.2 var(--font-ui);
}
/*`'Inter'` here was a real defect rather than a preference: no @import in this file, or
  in src/index.css, loads Inter — so the enquiry form's fields, the one place a visitor
  types, silently fell back to the system sans while the labels beside them were
  Lexend. The fields now use the same face as the rest of the UI. */
.static-field input,
.static-field select,
.static-field textarea {
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: #fff;
  font: 400 0.92rem/1.4 var(--font-ui);
  outline: none;
  padding: 11px 14px;
  transition: border-color 0.2s ease;
}
.static-field input:focus,
.static-field select:focus,
.static-field textarea:focus {
  border-color: var(--orange);
}
/*A focus ring, not only a border tint: a 1px colour change is not a visible focus
  indicator for a keyboard user. */
.static-field input:focus-visible,
.static-field select:focus-visible,
.static-field textarea:focus-visible {
  outline: 2px solid var(--orange-light);
  outline-offset: 1px;
}
.form-status-msg {
  border-radius: var(--radius-sm);
  display: none;
  font-size: 0.9rem;
  margin-top: 14px;
  padding: 12px 16px;
}
.form-status-msg.success {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: var(--emerald);
  display: block;
}
.form-status-msg.error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: var(--red);
  display: block;
}

@media (max-width: 900px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) { 
  .nav { align-items: flex-start; flex-direction: column; } 
  .nav-links { gap: 10px 14px; } 
  .hero { padding: 52px 0 62px; } 
  .content { padding: 54px 0; } 
  .grid { grid-template-columns: 1fr; } 
  .process-grid { grid-template-columns: 1fr; }
  .contact-cta-box { padding: 24px; }
  .static-form-grid { grid-template-columns: 1fr; }
  .service-form-card { padding: 20px; }
  h1 { font-size: clamp(2.25rem, 12vw, 3.5rem); } 
}
/*Reduced motion has to cover the transitions too, not just the smooth scroll: this file
  sets transitions on cards, buttons, fields and the section seams, and a card that
  fades its spotlight in is exactly the kind of motion the preference exists to stop. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}