/* ==========================================================================
   Alex Boag — Business & Technology — services site
   One stylesheet for every route. Plain CSS, no build step.
   Design source: Website_Brief_W5.md (19 Sep 2026), which supersedes W3/W4:
   §2 palette balance (tinted surfaces, no opaque green blocks), §3 background image,
   §4 typography (Georgia display + Inter), §5–§6 split hero and plan preview,
   §7–§8 logo and monogram, §9 service rows, §13 flat buttons, §14 booking embed.
   Build rules retained: semantic HTML, skip link, disclosures collapsed,
   16px minimum, one H1, no viewport-height units.
   ========================================================================== */

/* --- Palette (W5 §2: the same five colours, rebalanced) ------------------------ */
:root {
  --bg: #0C140D;          /* main page: green-black */
  --green: #193B17;       /* deep green: used ONLY as a translucent tint, never as an opaque block */
  --text: #EFE7D7;        /* primary text: warm ivory. 15.23:1 on bg, 13.94:1 on the tint */
  --text-2: #B9B4A7;      /* supporting text. 9.05:1 on bg, 8.28:1 on the tint */
  --accent: #BF843C;      /* bronze: accent, links, primary button fill. 5.87:1 on bg, 5.37:1 on the tint */
  --ink: #0C140D;         /* dark label on bronze fills and on the ivory plan sheet (5.87:1 / 15.23:1) */
}

/* --- Surfaces and rules (W5 §2, prompt items 4–5; composited values recorded) ----- */
:root {
  --tint: rgb(25 59 23 / 0.28);        /* selected panel tint → #101F10 over bg (1.09:1 vs bg: only visible where the image sits underneath) */
  --rule: rgb(239 231 215 / 0.17);     /* decorative rules → #33382F, 1.56:1 (exempt: purely decorative) */
  --rule-mid: rgb(239 231 215 / 0.25); /* quiet grouping rules → #454940, 2.03:1 (decorative) */
  --rule-strong: rgb(239 231 215 / 0.35); /* the rules that make three service rows read as three → #5B5E54, 2.83:1 */
  --edge: rgb(239 231 215 / 0.50);     /* control and image-frame borders → #7E7E72, 4.56:1 */
  --radius: 6px;
  --radius-lg: 8px;
  --content-max: 1200px;
  --reading-max: 62ch;
  --gutter: 20px;
  --font-display: Georgia, "Times New Roman", Times, serif;   /* W5 §4: hero and major section headings */
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (max-width: 359px) { :root { --gutter: 16px; } }
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1280px) { :root { --gutter: 56px; } }

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

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  body { font-size: 18px; line-height: 1.65; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Display headings are Georgia at regular weight (W5 §4). Offer names, labels and controls stay Inter. */
h1, h2 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
strong { font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

/* Links: bronze on the page (5.87:1). Links that sit on tinted or image-backed surfaces (.cred-list a, .email-line a) are ivory with a bronze underline. */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  transition: color 150ms, text-decoration-thickness 150ms;
}
a:hover { color: var(--text); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

[id] { scroll-margin-top: 24px; }

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.reading { max-width: var(--reading-max); }

/* Major section spacing: 56px on phones, 96px on desktop (W5 §4 table) */
.section { padding: 56px 0; }
@media (min-width: 768px) { .section { padding: 80px 0; } }
@media (min-width: 1024px) { .section { padding: 96px 0; } }

/* Main section headings: 28–34px on phones, 36–44px on desktop (W5 §4) */
.section-title {
  margin-bottom: 24px;
  font-size: clamp(30px, 24px + 1.3vw, 42px);
}
@media (min-width: 768px) { .section-title { margin-bottom: 32px; } }

.section-rule { border-top: 1px solid var(--rule); }

/* --- Skip link: ivory block, dark text (15.23:1) --- */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -200px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* --- Buttons (W5 §13): flat, restrained. No inset highlight, no heavy shadow; the one gradient is the
       static reflective band on the primary booking buttons (.button-shine, session 6).
       Primary page action: flat bronze fill with the green-black label (5.87:1, passes at any
       size), 16–17px medium weight, 6px radius, ≥ 44px tap target. The long label may wrap on
       narrow screens; it is never truncated or shrunk. Ivory is never used on the bronze fill (2.60:1). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  background: var(--accent);
  color: var(--ink);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}
/* Hover: a slightly lighter bronze (bronze mixed with 12% ivory); the dark label stays, so it stays readable */
.button:hover { background-color: color-mix(in srgb, var(--accent) 88%, var(--text)); color: var(--ink); }   /* background-color only, so the reflective band below stays put on hover */
/* Focus: an ivory ring offset from the button so it sits on the surrounding dark surface (15.23:1) */
.button:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
/* Reflective band (session 6, Site feedback item 5): the primary "Book a free 15-minute strategy call" buttons
   only. A soft diagonal band of WHITE at no more than 16% over the bronze. It is a static background
   gradient: nothing moves, nothing sweeps on hover, so there is nothing for reduced motion to stop.
   White only lightens the fill, so the dark label only gains contrast: 5.87:1 on flat bronze, 7.25:1 at the
   band's centre (hover: 6.67:1 → 8.03:1; blended colours rounded to 8-bit as displayed). Never a dark band
   (dark at 20% would drop the label to 4.17:1).
   Not on the compact "Book a call" buttons (header, sticky bar) or the 404 "Home" button. */
.button-shine {
  background-image: linear-gradient(112deg, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0.16) 44%, rgb(255 255 255 / 0) 54%);
}

/* Header action (W5 §7, §13): compact "Book a call", dark fill, ivory label, restrained bronze outline.
   Outline against the header background: bronze on green-black = 5.87:1 (≥ 3:1). */
.button-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 16px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.button-header:hover { background: rgb(191 132 60 / 0.16); color: var(--text); border-color: var(--text); }
.button-header:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.menu-toggle[aria-expanded="true"] { background: var(--tint); border-color: var(--accent); }

/* --- Brand (W5 §7–§8): the supplied horizontal logo in the header, the monogram in the footer.
       Assets/alex-boag-header.svg is 604 × 96 with ~4 units of built-in whitespace on each side;
       its own name line is 0.40 × the logo height and its Build / Improve / Grow line 0.13 ×,
       so the logo is sized by height and the tagline is small by the artwork's own proportions. */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.brand-logo {
  display: block;
  height: clamp(34px, 8.5vw, 48px);   /* 34px at 360px wide (214px wide), 48px from ~565px */
  width: auto;
}
@media (min-width: 1024px) { .brand-logo { height: 56px; } }   /* 352px wide on desktop */
.brand:hover .brand-logo { opacity: 0.88; }

.footer-mark { display: block; height: 28px; width: auto; }   /* 709 × 433 monogram → 46px wide */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.brand-desc {
  color: var(--text-2);
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}

/* --- Header (W5 §7): logo left; Services / Work / About and the compact "Book a call".
       Below 1024px: logo and the Menu button on ONE row; the menu opens beneath with the
       three links and the booking link (no full-width booking row). From 1024px: one row,
       logo | nav + Book a call. Normal flow at every width. ------------------------------ */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand { grid-row: 1; grid-column: 1; min-width: 0; }
.menu-toggle { grid-row: 1; grid-column: 2; }
.js .menu-toggle { display: inline-flex; }

.site-nav {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 6px 0 12px;
  border-top: 1px solid var(--rule);
}
.js .site-nav { display: none; }
.js.menu-open .site-nav { display: block; }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-list a:not(.button-header) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.nav-list a:not(.button-header):hover { color: var(--accent); }
.nav-book { margin-top: 10px; }
.nav-book .button-header { width: max-content; }

@media (min-width: 1024px) {
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 32px;
    min-height: 88px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .site-nav,
  .js .site-nav {
    display: block;
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .nav-list { flex-direction: row; align-items: center; gap: 28px; }
  .nav-list a:not(.button-header) { font-size: 16px; }
  .nav-book { margin: 0 0 0 8px; }
  .menu-toggle,
  .js .menu-toggle { display: none; }
}

/* --- Hero band (W5 §3): one composition behind the hero AND the credibility strip ------
   The supplied image (Assets/services-background-web.jpg, 1600 × 900) is decorative, with
   the page colour as fallback. Its left two thirds are darker than the page colour; the
   bronze-edged shapes sit in the right third (image x ≥ 1100), which is where the plan
   preview sits on desktop. Overlays: one light uniform layer over the whole band so the
   open areas show the image, plus a strong local layer attached to the text column
   (.hero-copy::before) that fades out past the column. Worst-case backdrops under text are
   recomputed from the image's own pixels in the session-05 reply.
   Height comes from content, never the viewport. */
.hero-band {
  position: relative;
  isolation: isolate;
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(12, 20, 13, 0.38) 0%, rgba(12, 20, 13, 0.38) 100%),
    url("/Assets/services-background-web.jpg");
  background-size: cover, cover;
  background-repeat: no-repeat;
  background-position: 70% 0, 70% 0;          /* narrow-screen crop: the mid-right shapes, text kept over the dark area */
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .hero-band { background-position: 78% center, 78% center; }
}
@media (min-width: 1024px) {
  .hero-band { background-position: right center, right center; }   /* desktop crop: shapes under and beside the plan preview */
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 32px 0 40px;
}
@media (min-width: 768px) { .hero { padding: 56px 0 64px; } }
@media (min-width: 1024px) { .hero { padding: 72px 0 80px; } }

/* Text column: the local overlay. On phones it covers the copy block and fades out
   beneath it (the plan preview below is an opaque sheet). From 1024px it covers the left
   column and fades over 200px past the column's right edge. */
.hero-copy {
  position: relative;
  isolation: isolate;
}
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -200px;
  bottom: -160px;
  left: -4000px;
  right: -4000px;
  background: linear-gradient(180deg, rgba(12, 20, 13, 0.84) 0, rgba(12, 20, 13, 0.84) calc(100% - 160px), rgba(12, 20, 13, 0.1) 100%);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .hero-copy::before {
    top: -400px;
    bottom: -400px;
    left: -4000px;
    right: -200px;
    background: linear-gradient(90deg, rgba(12, 20, 13, 0.84) 0, rgba(12, 20, 13, 0.84) calc(100% - 200px), rgba(12, 20, 13, 0) 100%);
  }
}

/* Hero grid (W5 §5): one column on phones (copy, then the visual); ~55/45 from 1024px */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
@media (min-width: 768px) {
  .hero-grid { gap: 48px; }
  .plan { max-width: 560px; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 56px; }
  .plan { max-width: none; justify-self: end; width: 100%; }
}
@media (min-width: 1280px) { .hero-grid { gap: 72px; } }

.hero-audience {
  margin: 0 0 18px;
  color: var(--text-2);
  font-size: 17px;
  font-weight: 500;
}

/* Hero heading: Georgia, 36–42px on phones and 56–64px on desktop (W5 §4). The two approved
   clauses are one heading; each clause is its own line and wraps naturally inside it. */
.hero-title {
  margin: 0 0 22px;
  font-size: clamp(36px, 26px + 2.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.hero-line { display: block; }
.hero-title .accent { color: var(--accent); }   /* the short bronze emphasis; the rest of the heading is ivory */

.hero-lead {
  max-width: var(--reading-max);
  margin: 0 0 16px;
  font-size: 18px;
}
.hero-guarantee {
  max-width: var(--reading-max);
  margin: 0 0 26px;
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 768px) {
  .hero-lead { font-size: 19px; }
  .hero-guarantee { font-size: 19px; margin-bottom: 30px; }
}

.hero-actions { margin: 0 0 12px; }
.hero-actions .button { max-width: 100%; }

.hero-invite {
  max-width: 48ch;
  margin: 0 0 6px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
}

.hero-more { margin: 0; }
.hero-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

/* --- Improvement-plan preview (W5 §6): warm ivory sheet, dark text, the AB mark, a compact
       title, three priorities and one highlighted next action. Live text, so it stays sharp. ---
       Colours on the sheet: ink #0C140D on ivory 15.23:1; secondary #4C544A 6.39:1;
       dark text on the bronze number tiles 5.87:1; next-action band = green at 12% over ivory (#D5D2C0), ink 12.31:1. */
.plan {
  /* Session 6: the sheet is painted ABOVE the text column's dark layer (.hero-copy::before).
     That layer is positioned, so without this it painted over the sheet: across its left
     128–144px on desktop (the layer at 54–60% opacity at the sheet's edge) and its top
     112–120px on phones and tablets (62–66% at the top edge, ending in a hard 10% line).
     That was the heavy "shadow" on the card. The sheet's own box-shadow is an ivory hairline. */
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  max-width: 560px;
  padding: 20px 22px 22px;
  background: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgb(239 231 215 / 0.25);
  color: var(--ink);
}
@media (min-width: 768px) { .plan { padding: 24px 30px 28px; } }
/* The sheet's header (session 7): the eyebrow, a category label, comes first in the source; the grid shows it
   above the title (ink on ivory, 15.23:1), with the AB mark beside both. The eyebrow and the line at the foot
   of the sheet mark the figures as an example rather than a promise, so neither is hidden at any width. */
.plan-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark cat" "mark title";
  align-items: center;
  gap: 2px 14px;
  margin: 0 0 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(12 20 13 / 0.18);
}
.plan-mark { flex: 0 0 auto; height: 30px; width: auto; }
.plan-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
@media (min-width: 768px) { .plan-title { font-size: 24px; } }
/* Session 7: header placement, and the eyebrow's two inherited values. Inside a priority, .plan-item gives its
   category label 16px and #4C544A (6.39:1 on ivory); the eyebrow sits outside .plan-item, so it is given the same two. */
.plan-head .plan-cat { grid-area: cat; font-size: 16px; color: #4C544A; }
.plan-head .plan-mark { grid-area: mark; }
.plan-head .plan-title { grid-area: title; }
.plan-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.plan-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid rgb(12 20 13 / 0.12);
}
.plan-list li:last-child { border-bottom: 0; }
.plan-n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  background: var(--accent);
  border-radius: 6px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.plan-item { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.4; }
.plan-item strong { font-weight: 600; color: var(--ink); }
.plan-item span { color: #4C544A; }
/* Category label: the card's eyebrow style. Written in capitals in the HTML, as supplied; 16px/600,
   letter-spaced, secondary on ivory (6.39:1). The offer labels (.service-label) repeat it on the dark page. */
.plan-cat { font-weight: 600; letter-spacing: 0.06em; line-height: 1.3; }
.plan-next {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin: 0;
  padding: 12px 14px;
  background: rgb(25 59 23 / 0.12);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.45;
}
.plan-next strong { flex: 0 0 auto; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 16px; }
.plan-next span { flex: 1 1 22ch; color: var(--ink); }
/* Session 7: the line at the foot of the sheet, under the next-action band. Small and muted: 16px (the site's
   minimum size) in the sheet's secondary colour, #4C544A (6.39:1 on ivory). */
.plan-foot { margin: 12px 0 0; color: #4C544A; font-size: 16px; line-height: 1.5; }
/* Session 7: keeps a hyphenated word on one line (the hyphen is otherwise a line-break point). */
.nowrap { white-space: nowrap; }

/* --- Email line: the secondary route, a visible text link, never a button ---------
       Ivory link (15.23:1 on bg; ≥ 11.7:1 on the closing crop's worst backdrop); bronze underline. */
.email-line {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
}
.email-line a {
  display: inline-block;
  padding: 10px 0;
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.email-line a:hover { color: var(--text); text-decoration-thickness: 2px; }

/* --- Credibility strip: inside the hero band, so the image runs through it (W5 §3, §10).
       Surface = the selected green tint over a local dark layer; with the band's 0.38 layer
       the combined alpha behind the strip is 0.90, enough to keep ivory text ≥ 4.5:1 over
       the image's brightest pixels while the bronze edges still glow through. --- */
.credibility {
  padding: 22px 0;
  background-image: linear-gradient(var(--tint), var(--tint)), linear-gradient(rgba(12, 20, 13, 0.78), rgba(12, 20, 13, 0.78));
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px) { .credibility { padding: 28px 0; } }

.cred-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 32px;
}
.cred-list li {
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}
@media (min-width: 768px) { .cred-list li { font-size: 17px; } }
/* Ivory link on the tint (13.94:1) with a bronze underline; hover thickens the underline */
.cred-list a { color: var(--text); text-decoration-color: var(--accent); }
.cred-list a:hover { color: var(--text); text-decoration-thickness: 2px; }
@media (min-width: 768px) {
  .cred-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; }
}

/* --- Service rows (W5 §9): aligned compact rows — name | description | price | control —
       separated by fine rules. The separators are ivory at 35% (#5B5E54 over bg, 2.83:1): the
       rules are what make three rows read as three, so they are deliberately stronger than the
       decorative 17% rule. No fills. On phones the four parts stack inside each row. --- */
.offers .section-title { max-width: 22ch; }

.service-list {
  margin: 8px 0 0;
  border-top: 1px solid var(--rule-strong);
}
.service {
  border-bottom: 1px solid var(--rule-strong);
}
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 24px 0 22px;
}
/* Each row opens with a small service label above its question heading (session 6). The label repeats the
   hero card's eyebrow style (capitals as written, 16px/600, letter-spaced); on the dark page it takes the
   secondary text colour (9.05:1), because the card's grey-green is for ivory. */
.service-label,
.case-stack-label {
  margin: 0 0 4px;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.service-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.service-desc {
  max-width: var(--reading-max);
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
}
.service-price {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}

/* The details control: a real button, Inter 16px/500, ≥ 44px tall, bronze chevron that turns when open */
.service-toggle {
  display: none;                       /* shown only when JavaScript is running (.js) */
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 6px 0 0;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.js .service-toggle { display: inline-flex; }
.service-toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 150ms;
}
.service-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
.service-toggle:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.service-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (min-width: 768px) {
  .service-row {
    grid-template-columns: minmax(150px, 0.9fr) minmax(0, 2.1fr);
    grid-template-areas: "name desc" "price control";
    column-gap: 32px;
    row-gap: 10px;
    padding: 28px 0 24px;
  }
  .service-head { grid-area: name; }
  .service-desc { grid-area: desc; }
  .service-price { grid-area: price; margin: 0; align-self: start; }
  .service-toggle { grid-area: control; justify-self: start; align-self: start; margin: 0; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .service-row {
    grid-template-columns: minmax(200px, 1.05fr) minmax(0, 2.2fr) minmax(190px, 1fr) auto;   /* name column widened in session 6: questions and labels are longer than the old names */
    grid-template-areas: "name desc price control";
    column-gap: 36px;
    align-items: start;
    padding: 30px 0 26px;
  }
  .service-head { padding-top: 2px; }
  .service-name { font-size: 21px; }
  .service-price { padding-top: 2px; }
  .service-toggle { justify-self: end; margin: -8px 0 0; }
}

/* The expanded panel: opens directly beneath its own row; readable body text, clear internal labels */
.service-panel {
  max-width: 68ch;
  padding: 2px 0 30px;
}
.service-panel h4 {
  margin: 18px 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.service-panel h4:first-child { margin-top: 0; }
.service-panel p, .service-panel li { font-size: 17px; line-height: 1.6; color: var(--text); }
.service-panel p { margin: 0 0 10px; }
.service-panel ul { margin: 0 0 12px; padding-left: 1.2em; }
.service-panel li { margin: 0 0 4px; }

/* One shared booking action beneath the three rows, with the approved supporting line */
.offers-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin: 32px 0 0;
}
.offers-cta-line { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.5; max-width: 40ch; }
@media (min-width: 768px) { .offers-cta { margin-top: 36px; } }

/* Shared working conditions: readable, never tiny */
.conditions {
  max-width: var(--reading-max);
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
}
.conditions p { margin: 0 0 8px; }

/* Visually hidden text (accessible names that identify each control's service) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Disclosures (native details/summary for the FAQ and the technical list; every one
       starts collapsed). Summary text is ivory; the chevron is bronze (5.87:1 on bg).
       Hover thickens the underline; no colour change. */
.disclosure > summary {
  position: relative;
  list-style: none;
  padding: 14px 40px 14px 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 150ms;
}
.disclosure[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.disclosure > summary:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.disclosure > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* --- Section kicker (small label above a heading: "Work", "About") ------------------ */
.kicker {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Work example (W5 §11): text beside a larger image area from 1024px; stacked below --- */
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
@media (min-width: 1024px) {
  .case-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
}
@media (min-width: 1280px) { .case-grid { gap: 72px; } }
.case-text { max-width: var(--reading-max); margin: 0 0 20px; font-size: 18px; }
@media (min-width: 768px) { .case-text { font-size: 19px; } }
.case-link { margin: 0; }
.case-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* "Under the hood": a small label (the offer-label style), then the seven technologies as chips in the site's
   existing tag style (the former "Demo data" tag: 1px edge border 4.56:1, 4px radius, bronze 16px/600 text 5.87:1). */
.case-stack-label { margin: 28px 0 10px; }
.chips {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  padding: 1px 8px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}

.case-figure { margin: 0; }
/* One fixed frame: the box keeps the dashboard's proportions (1448 × 1086) whichever screenshot is shown, so a
   swap never changes the page's layout. The 1600 × 900 detail screenshot is shown whole inside it (object-fit:
   contain), with page-colour bands above and below. The width/height attributes stay on the img. */
.case-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1448 / 1086;
  object-fit: contain;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.case-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
  margin-top: 10px;
}
/* Toggle buttons: the shown screenshot's button takes the muted style of the old "Dashboard" caption label
   (secondary text 9.05:1, no underline); the other takes the bronze link style (5.87:1, underlined).
   aria-pressed carries the state; both are real buttons, so Enter and Space work. Hidden without JavaScript. */
.case-toggle {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  cursor: pointer;
  transition: color 150ms, text-decoration-thickness 150ms;
}
.js .case-toggle { display: inline-flex; }
.case-toggle:hover { color: var(--text); text-decoration-thickness: 2px; }
.case-toggle[aria-pressed="true"] { color: var(--text-2); text-decoration: none; cursor: default; }
.case-full { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.case-caption { margin-top: 4px; color: var(--text-2); font-size: 16px; line-height: 1.5; }

/* --- About: owner and capabilities combined (W5 §12). Copy left, examples right from 1024px. --- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
}
@media (min-width: 1280px) { .about-grid { gap: 88px; } }
.about-copy { max-width: 640px; }
.about-copy p { margin-bottom: 1em; font-size: 18px; }
.about-copy p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .about-copy p { font-size: 19px; } }
/* Highlight lines (session 6): the ten-years line plus the two lines the feedback adds, one block with one bronze bar */
.about-facts {
  list-style: none;
  margin: 0 0 24px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--accent);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}
.about-facts li + li { margin-top: 6px; }
.about-audience {
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--text-2);
  font-size: 17px !important;
}

.about-side-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}
@media (min-width: 768px) { .about-side-title { font-size: 27px; } }
.examples {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.examples li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
  line-height: 1.55;
}
.examples strong { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 600; }

/* The technical-work list is always open (session 6): no summary, no arrow, no collapse. It keeps the old
   summary's look for its heading (ivory 16px/600). One divider only between it and the examples: the last
   example's rule; the block has no top border of its own. */
.cap-block { border-bottom: 1px solid var(--rule); }
.cap-title { margin: 0 0 4px; color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.4; }
.cap-block ul { list-style: none; margin: 0; padding: 0 0 8px; }
.cap-block li { padding: 8px 0; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.cap-block li strong { color: var(--text); }

/* --- FAQ (native details/summary; every answer starts collapsed; generous rows) ------- */
.faq-list { max-width: 800px; border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item > summary {
  padding: 18px 48px 18px 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
@media (min-width: 768px) { .faq-item > summary { font-size: 19px; padding: 20px 56px 20px 0; } }
.faq-answer { max-width: var(--reading-max); padding: 0 0 22px; }
.faq-answer p { font-size: 17px; line-height: 1.6; }

/* "Still not sure? Let's talk." (session 6): centred under the questions, on the FAQ list's own width (800px),
   so it reads as the end of the list; the primary button; the small reassurance line beneath. */
.faq-cta {
  max-width: 800px;
  margin: 44px 0 0;
  text-align: center;
}
.faq-cta-title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(24px, 20px + 0.8vw, 30px);
  font-weight: 400;
  line-height: 1.2;
}
.faq-cta .button { max-width: 100%; }
/* Small supporting line under a primary button ("15 minutes, free, no obligation."): 16px, secondary text */
.small-note { margin: 10px 0 0; color: var(--text-2); font-size: 16px; line-height: 1.5; }

/* --- Closing invitation (W5 §3, §15): the image returns in a different, enlarged crop
       (lower-right curves), under a uniform 0.5 layer; the text block carries its own
       0.8 layer (.closing .container::before), combined 0.9. Decorative, dark fallback. --- */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;                 /* the local overlay layer extends past the section; clip it */
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(12, 20, 13, 0.5) 0%, rgba(12, 20, 13, 0.5) 100%),
    url("/Assets/services-background-web.jpg");
  background-size: cover, 260% auto;
  background-repeat: no-repeat;
  background-position: center, 82% 62%;      /* phone crop */
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .closing { background-size: cover, 170% auto; background-position: center, 86% 70%; }   /* desktop crop */
}
/* The text block (.closing-inner, max 640px) carries the local layer: solid over the whole block,
   fading out beneath it on phones; from 1024px solid to 60px past the block's right edge, then
   fading over 240px so the enlarged crop shows on the right. */
.closing-inner { position: relative; max-width: 640px; }
.closing-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -400px;
  bottom: -120px;
  left: -4000px;
  right: -4000px;
  background: linear-gradient(180deg, rgba(12, 20, 13, 0.8) 0, rgba(12, 20, 13, 0.8) calc(100% - 120px), rgba(12, 20, 13, 0.1) 100%);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .closing-inner::before {
    bottom: -400px;
    right: -300px;
    background: linear-gradient(90deg, rgba(12, 20, 13, 0.8) 0, rgba(12, 20, 13, 0.8) calc(100% - 240px), rgba(12, 20, 13, 0) 100%);
  }
}
.closing-title { max-width: 20ch; font-size: clamp(32px, 24px + 1.8vw, 50px); margin-bottom: 16px; }
.closing-lead { max-width: var(--reading-max); margin-bottom: 26px; font-size: 18px; }
@media (min-width: 768px) { .closing-lead { font-size: 19px; margin-bottom: 30px; } }
/* Session 6: stacked — the button, the small reassurance line under it, then the email route */
.closing-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}
.closing-actions .button { max-width: 100%; }
.closing-actions .small-note { margin: 10px 0 0; }
.closing-actions .email-line { margin: 6px 0 0; }

/* --- Mobile sticky booking control (W5 §13): one compact action with the short header
   label. Shown by script once the hero action has left view and hidden while the closing
   action is in view; body padding reserves its height so it never covers content. Hidden at 768px+. */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px var(--gutter);
  background: rgb(12 20 13 / 0.94);
  border-top: 1px solid var(--rule-mid);
  text-align: right;
}
.sticky-cta .button { min-height: 44px; padding: 10px 18px; font-size: 16px; }
@media (max-width: 767px) {
  .sticky-on .sticky-cta { display: block; }
  .sticky-on body { padding-bottom: 72px; }
}

/* --- Interior pages (/book, 404) ---------------------------------------------- */
.page-title {
  margin-bottom: 12px;
  font-size: clamp(32px, 24px + 2vw, 52px);
  line-height: 1.12;
}
.book-lead { max-width: var(--reading-max); margin-bottom: 0; font-size: 18px; }
@media (min-width: 768px) { .book-lead { font-size: 19px; } }

/* The scheduling embed is the page's main content: space reserved, never lazy-loaded,
   never shorter than 600px at any width, scrolls internally (no overflow hidden).
   W5 §14: wrapper and frame are both opaque white so Google's dark calendar text is
   readable; the frame declares a light colour scheme so its canvas is never transparent.
   Parent CSS styles only the frame and its surroundings; Google's content is cross-origin. */
.booking-embed {
  margin: 28px 0 12px;
  padding: 16px;
  min-height: 632px;             /* 600px frame + 2 × 16px padding */
  background: #fff;
  border-radius: 12px;
}
.booking-embed iframe {
  display: block;
  width: 100%;
  height: 600px;
  min-height: 600px;
  border: 0;
  background: #fff;
  color-scheme: light;
}
@media (max-width: 399px) {
  .booking-embed { padding: 12px; min-height: 624px; }      /* small phones: 12px padding gives the calendar more width */
}
@media (min-width: 768px) {
  .booking-embed { margin-top: 32px; min-height: 792px; }   /* 760px frame + padding */
  .booking-embed iframe { height: 760px; }
}
.book-fallback { margin: 0 0 8px; font-size: 17px; }
.book-fallback a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

.book-note {
  max-width: var(--reading-max);
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--text-2);
  font-size: 16px;
}
.page-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
}
.page-links a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Footer --------------------------------------------------------------------- */
.site-footer {
  padding: 40px 0 36px;
  border-top: 1px solid var(--rule);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 48px;
  margin-bottom: 20px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--text); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: 16px;
  text-decoration: none;
}
.footer-nav a:hover { color: var(--accent); }
/* Supporting information stays legible: 16px, secondary colour (9.05:1), never smaller */
.footer-terms {
  max-width: 80ch;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 16px;
}