/* ============================================================
   TeraWorks — Dependable
   Warm, solid, human. The look of an established local IT pro you
   actually trust in your home or office. Soft warm shadows, real
   icons, friendly geometry, prominent trust signals. No monospace,
   no hairline Swiss grid.
   ============================================================ */

:root {
  /* Brand */
  --red: #DF2321;
  --red-dark: #B51C1A;
  /* --red is the DISPLAY red: buttons, dots, rules, large type. As small text on the
     ivory ground it measures 4.31:1, just under the 4.5 AA bar, so small text uses
     --red-text. Same value as --red-dark today but a SEPARATE token on purpose:
     retuning a hover colour must not be able to quietly push body text under the bar. */
  --red-text: #B51C1A;
  --red-soft: #FBEAE9;
  --ink: #1A1A1A;
  --ink-soft: #322E2B;

  /* Warm neutrals */
  --bg: #F6F3EE;            /* warm off-white page base */
  --surface: #FFFFFF;
  --surface-warm: #FBF8F3;  /* faint warm panel */
  --muted: #5E574F;         /* AA on white & warm bg */
  --muted-light: #8C847A;

  /* Warm darks (hero / footer / cta) */
  --dark: #1C1815;
  --dark-2: #25201C;
  --on-dark: #F6F3EE;
  --on-dark-muted: rgba(246, 243, 238, 0.66);

  /* Hairlines (used sparingly, warm) */
  --line: rgba(26, 18, 12, 0.10);
  --line-strong: rgba(26, 18, 12, 0.16);
  --line-dark: rgba(246, 243, 238, 0.12);

  /* Type */
  --display: 'Sora', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 70px;
  --radius: 16px;
  --radius-sm: 12px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Warm-tinted layered shadows */
  --shadow-sm: 0 1px 2px rgba(40, 28, 20, 0.05), 0 2px 8px rgba(40, 28, 20, 0.05);
  --shadow-md: 0 2px 4px rgba(40, 28, 20, 0.05), 0 14px 28px -12px rgba(40, 28, 20, 0.16);
  --shadow-lg: 0 4px 10px rgba(40, 28, 20, 0.06), 0 28px 56px -20px rgba(40, 28, 20, 0.22);
  --shadow-red: 0 14px 32px -14px rgba(223, 35, 33, 0.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
html, body { overflow-x: hidden; }
:target, [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

a, button, .btn { touch-action: manipulation; -webkit-tap-highlight-color: rgba(223, 35, 33, 0.16); }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
h3 { letter-spacing: -0.015em; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--red); color: #fff; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Skip link ---- */
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 600; font-size: 14px;
}
.skip-link:focus { top: 16px; }

/* ---- Focus ---- */
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   EYEBROW
   ============================================================ */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red-text);
}
.kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex: none;
  box-shadow: 0 0 0 4px var(--red-soft);
}
.kicker-light { color: #fff; }
.kicker-light::before { background: var(--red); box-shadow: 0 0 0 4px rgba(223,35,33,0.28); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --pad-y: 14px; --pad-x: 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: 15px;
  padding: var(--pad-y) var(--pad-x);
  border: 1.5px solid transparent; border-radius: 999px; cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico-fill { fill: currentColor; stroke: none; }
.btn-sm { --pad-y: 10px; --pad-x: 16px; font-size: 14px; }
.btn-lg { --pad-y: 17px; --pad-x: 30px; font-size: 16px; }

.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-red); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(223,35,33,0.6); }
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
@media (hover: hover) {
  .btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.btn-ghost-light { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.34); box-shadow: none; }
@media (hover: hover) {
  .btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.12); transform: translateY(-2px); }
}

.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 15px; color: var(--red);
  align-self: flex-start;
  transition: gap 0.25s var(--ease);
}
@media (hover: hover) { .text-link:hover { gap: 11px; } }

/* ============================================================
   HEADER
   ============================================================ */
/* Solid header at all times. Dark nav on the cream bar is always legible,
   independent of scroll position or JS. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(246,243,238,0.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 22px -18px rgba(40,28,20,0.5); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { height: 42px; width: auto; }
.main-nav { display: none; gap: 32px; }
.main-nav a {
  font-size: 15px; font-weight: 600; color: var(--muted); position: relative; padding: 4px 0;
  transition: color 0.2s var(--ease);
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px;
  background: var(--red); border-radius: 2px; transition: width 0.3s var(--ease);
}
@media (hover: hover) { .main-nav a:hover { color: var(--ink); } .main-nav a:hover::after { width: 100%; } }
.header-actions { display: flex; align-items: center; gap: 12px; }

/* Hamburger */
.hamburger { display: inline-flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; box-shadow: var(--shadow-sm); }
.hamburger span { width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 99;
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px var(--gutter) 30px;
  transform: translateY(-120%); transition: transform 0.4s var(--ease), visibility 0.4s;
  box-shadow: 0 24px 40px -28px rgba(40,28,20,0.5);
  visibility: hidden;
}
.mobile-nav.open { transform: translateY(0); visibility: visible; transition: transform 0.4s var(--ease); }
.mobile-nav-link { padding: 16px 4px; font-size: 18px; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; border-bottom: 1px solid var(--line); }
.mobile-nav-cta { margin-top: 22px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: var(--dark); color: var(--on-dark);
  /* Fill the viewport below the sticky header. 100svh keeps it correct on
     iOS Safari where the toolbar steals height. */
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 7vh, 96px) 0;
}
/* warm depth: red glow + soft vignette + subtle grain */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 88% 6%, rgba(223,35,33,0.30), transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(223,35,33,0.10), transparent 60%),
    linear-gradient(180deg, var(--dark-2), var(--dark) 60%);
}
.hero-grid-lines {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* No max-width override here: .hero-inner shares the element with .container,
   so it must inherit the container's 1180px cap to align with every other
   section. (Overriding to 100% made the hero bleed past the container.) */
.hero-inner { position: relative; }
.hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  font-weight: 800; margin: 24px 0 0; letter-spacing: -0.04em; line-height: 1.04;
  overflow-wrap: break-word;
}
.accent-line { position: relative; display: inline-block; color: #fff; }
.accent-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.1em;
  background: var(--red); border-radius: 3px; z-index: -1;
}
.hero-sub {
  margin-top: 26px; max-width: 56ch; font-size: clamp(1.06rem, 2vw, 1.28rem);
  color: var(--on-dark-muted); line-height: 1.6;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* trust strip */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line-dark);
}
.hero-trust li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--on-dark);
}
.hero-trust .ico { width: 18px; height: 18px; color: var(--red); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: clamp(56px, 9vw, 116px) 0; }
.section-alt { background: var(--surface-warm); }
.section-head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-top: 16px; }
.section-lead { margin-top: 18px; color: var(--muted); font-size: 1.08rem; max-width: 60ch; }

/* ---- Card grids ---- */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-3 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }

.cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
@media (hover: hover) {
  .cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
}
.cell h3 { font-size: 1.28rem; }
.cell p { color: var(--muted); font-size: 1rem; }

/* icon medallion */
.cell-icon, .benefit-icon {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: var(--red-soft); color: var(--red);
  border: 1px solid rgba(223,35,33,0.16);
}
.cell-icon svg, .benefit-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* problems get a muted neutral medallion to contrast solutions */
.cell-problem .cell-icon { background: #ECE7E0; color: var(--ink-soft); border-color: var(--line); }

/* CTA card inside grid */
.cell-cta { background: var(--dark); border-color: transparent; color: #fff; justify-content: space-between; }
.cell-cta h3 { color: #fff; }
.cell-cta p { color: var(--on-dark-muted); }
.cell-cta .text-link { color: #fff; }
@media (hover: hover) { .cell-cta .text-link:hover { color: #fff; } }

/* ---- Benefits (2-col with icon left) ---- */
.benefits { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 22px); }
.benefit {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
@media (hover: hover) { .benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } }
.benefit h3 { font-size: 1.18rem; }
.benefit p { color: var(--muted); font-size: 0.98rem; margin-top: 6px; }

/* Dark CTA tile inside the benefits grid. Higher specificity than .benefit so
   the dark surface and white text always win the cascade. */
.benefit.benefit-cta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  background: var(--dark); border-color: transparent; color: #fff;
}
.benefit.benefit-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 90% at 100% 0%, rgba(223,35,33,0.30), transparent 60%);
}
.benefit.benefit-cta > * { position: relative; z-index: 1; }
.benefit.benefit-cta h3 { color: #fff; }
.benefit.benefit-cta p { color: var(--on-dark-muted); margin-top: 0; }
.benefit.benefit-cta .btn { align-self: flex-start; margin-top: 6px; }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 28px); counter-reset: step; }
.step {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(28px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm);
}
.step-num {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--red); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  box-shadow: var(--shadow-red);
}
.step h3 { font-size: 1.22rem; }
.step p { color: var(--muted); }

/* ---- Meet Johan ---- */
.meet {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: center;
}
.meet-portrait {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, var(--dark-2), var(--dark));
  aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg);
  display: grid; place-items: center; isolation: isolate;
}
.meet-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.meet-portrait::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,16,12,0.55), transparent 55%);
}
/* monogram fallback when no photo present */
.meet-monogram {
  position: relative; z-index: 0; text-align: center; color: var(--on-dark); padding: 32px;
}
.meet-monogram .mono-mark {
  font-family: var(--display); font-weight: 800; font-size: clamp(4rem, 10vw, 6.5rem);
  letter-spacing: -0.04em; line-height: 1; color: #fff;
}
.meet-monogram .mono-mark span { color: var(--red); }
.meet-monogram .mono-sub { margin-top: 14px; font-size: 14px; color: var(--on-dark-muted); }
.meet-badge {
  position: absolute; z-index: 2; left: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.95); color: var(--ink);
  padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-md);
}
.meet-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22a559; flex: none; }
.meet-body h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
.meet-body .meet-lead { margin-top: 18px; color: var(--ink-soft); font-size: 1.12rem; }
.meet-body p + p { margin-top: 14px; }
.meet-body .meet-quote {
  margin-top: 22px; padding-left: 18px; border-left: 3px solid var(--red);
  font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em;
  line-height: 1.4; color: var(--ink);
}
.meet-sign { margin-top: 22px; font-weight: 700; }
.meet-sign span { display: block; font-weight: 500; color: var(--muted); font-size: 0.95rem; }

/* ---- Services ---- */
.services { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.8vw, 20px); }
.service {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 22px clamp(20px, 2.4vw, 26px);
  display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
@media (hover: hover) { .service:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; } }
.service-ico { width: 44px; height: 44px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--red-soft); color: var(--red); border: 1px solid rgba(223,35,33,0.16); }
.service-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service h3 { font-size: 1.08rem; letter-spacing: -0.01em; }
.service p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; margin-top: 3px; }

/* ---- Testimonials ---- */
.quote {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(28px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px;
  box-shadow: var(--shadow-sm);
}
.quote .stars { display: flex; gap: 3px; color: var(--red); }
.quote .stars svg { width: 18px; height: 18px; fill: currentColor; }
.quote blockquote { font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 18px; }
.quote figcaption strong { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.quote figcaption span { color: var(--muted); font-size: 0.92rem; }
/* Five live testimonials. Mobile 1-up, tablet 2-up, desktop 3-up. The final
   partial row is centred via extra grid tracks plus nth-child placement, so a
   card is never stranded against an empty cell (assumes exactly five cards). */
.grid.testimonials-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
@media (min-width: 760px) {
  .grid.testimonials-grid { grid-template-columns: repeat(4, 1fr); max-width: 940px; }
  .grid.testimonials-grid > .quote { grid-column: span 2; }
  .grid.testimonials-grid > .quote:nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 1040px) {
  .grid.testimonials-grid { grid-template-columns: repeat(6, 1fr); max-width: 1180px; }
  .grid.testimonials-grid > .quote:nth-child(4) { grid-column: 2 / span 2; }
  .grid.testimonials-grid > .quote:nth-child(5) { grid-column: 4 / span 2; }
}

/* ---- FAQ ---- */
.faq-layout { display: grid; grid-template-columns: 1fr; gap: 0; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow 0.3s var(--ease); }
.faq-item:has(.faq-q[aria-expanded="true"]) { box-shadow: var(--shadow-md); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--ink);
  padding: 22px clamp(20px, 2.4vw, 26px); position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-sign { position: relative; width: 16px; height: 16px; flex: none; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; background: var(--red); transition: transform 0.3s var(--ease); }
.faq-sign::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); border-radius: 2px; }
.faq-sign::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); border-radius: 2px; }
.faq-q[aria-expanded="true"] .faq-sign::after { transform: translateX(-50%) scaleY(0); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
.faq-a p { padding: 0 clamp(20px, 2.4vw, 26px) 24px; color: var(--muted); max-width: 70ch; }

/* ============================================================
   CTA
   ============================================================ */
.cta { position: relative; overflow: hidden; background: var(--dark); color: #fff; padding: clamp(64px, 11vw, 130px) 0; }
.cta-grid-lines {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 85% 12%, rgba(223,35,33,0.30), transparent 58%),
    radial-gradient(60% 70% at 0% 100%, rgba(223,35,33,0.12), transparent 60%);
}
/* Plain block (not a .container) so it sits at the container's left edge,
   aligned with the footer and section headings, rather than centred. */
.cta-grid { position: relative; z-index: 1; display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }
.cta-inner { position: relative; z-index: 1; max-width: 720px; }
.cta h2 { font-size: clamp(2rem, 5.2vw, 3.4rem); margin-top: 18px; letter-spacing: -0.035em; }
.cta-sub { margin-top: 20px; color: var(--on-dark-muted); font-size: 1.1rem; max-width: 54ch; }
.cta .hero-actions { margin-top: 34px; }
@media (min-width: 940px) {
  .cta-grid { grid-template-columns: 1fr minmax(400px, 460px); }
  .cta h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
}

/* ---- Enquiry form (white card on the dark CTA) ----
   Call and WhatsApp stay the primary path. This catches the after-hours visitor
   who will not phone a stranger. Posts to Formspree via fetch in js/main.js. */
.cta-form {
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3.4vw, 34px);
}
.form-head h3 { font-size: 1.35rem; }
.form-head p { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }
.field { margin-top: 18px; }
.field label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 7px; }
/* --muted, not --muted-light: at 14px on white the lighter token measures 3.69:1
   and fails AA. Same reason on .form-consent below. */
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--surface-warm); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 12px 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--red); background: var(--surface);
  box-shadow: 0 0 0 4px var(--red-soft);
}
/* Keyboard focus gets a stronger ring than a mouse click, since the pale one is
   easy to miss when you cannot see where the pointer went. */
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 3px rgba(223, 35, 33, 0.3); }
.field .err { display: none; margin-top: 7px; font-size: 0.85rem; color: var(--red-text); font-weight: 600; }
.field.invalid input, .field.invalid textarea { border-color: var(--red); }
.field.invalid .err { display: block; }
.form-foot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-note { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.form-note .ico { width: 17px; height: 17px; flex: none; color: var(--red-text); }
.form-consent { margin-top: 16px; font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.form-consent a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.form-error {
  display: none; margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--red-soft); color: var(--red-text); font-size: 0.9rem; font-weight: 600;
}
.form-error.show { display: block; }
.form-error a { color: var(--red-text); text-decoration: underline; text-underline-offset: 2px; }
.form-success { display: none; text-align: center; padding: 14px 0 6px; }
.form-success.show { display: block; }
.fs-icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--red-soft); color: var(--red-text);
}
.fs-icon svg { width: 26px; height: 26px; }
.form-success h3 { font-size: 1.3rem; }
.form-success p { margin-top: 10px; color: var(--muted); }
.form-success .fs-note { font-size: 0.9rem; }
.form-success .fs-note a { color: var(--red-text); font-weight: 700; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--dark); color: var(--on-dark); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-top: clamp(52px, 7vw, 84px); padding-bottom: 48px; }
.footer-logo { height: 36px; width: auto; }
.footer-reassure { margin-top: 20px; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; color: var(--on-dark); text-transform: uppercase; }
.footer-desc { margin-top: 14px; color: var(--on-dark-muted); max-width: 42ch; }
.footer-col h3 { font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col li { color: var(--on-dark); font-size: 0.98rem; opacity: 0.86; }
.footer-col a { display: inline-block; padding: 7px 9px; margin: -7px -9px; }
@media (hover: hover) { .footer-col a:hover { color: #fff; opacity: 1; } }
.footer-areas { margin-top: 22px; font-size: 0.86rem; color: var(--on-dark-muted); }
.footer-bottom { border-top: 1px solid var(--line-dark); }
.footer-bottom-inner { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding-top: 22px; padding-bottom: 22px; font-size: 0.86rem; color: var(--on-dark-muted); }
.footer-bottom-inner a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }
.link-btn { background: none; border: none; cursor: pointer; font: inherit; color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .link-btn:hover, .footer-bottom-inner a:hover { color: #fff; } }

/* ============================================================
   FLOATING CONTACT (Call + WhatsApp)
   ============================================================ */
/* Mobile-only Call bubble, stacked above WhatsApp so the phone is one thumb-tap
   from any point on a long page. Hidden on desktop where the sticky header
   already shows a tap-to-call number. */
.floating-call {
  position: fixed; z-index: 90;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 70px);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--red); color: #fff; display: none; place-items: center;
  box-shadow: 0 12px 28px -8px rgba(223,35,33,0.55);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.floating-call svg { width: 27px; height: 27px; fill: currentColor; }
@media (max-width: 859px) { .floating-call { display: grid; } }
@media (hover: hover) { .floating-call:hover { transform: scale(1.08) translateY(-2px); } }

.floating-whatsapp {
  position: fixed; z-index: 90;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,0.65);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.floating-whatsapp svg { width: 29px; height: 29px; fill: currentColor; }
@media (hover: hover) { .floating-whatsapp:hover { transform: scale(1.08) translateY(-2px); } }

/* While the contact section is on screen the bubbles sit on top of the form's
   right-hand edge, which is a tap trap. Both buttons are in the section itself
   at that point, so the visitor loses nothing by hiding them. Class is set by
   js/main.js, so with no JS they simply stay put. */
.contact-open .floating-call, .contact-open .floating-whatsapp {
  opacity: 0; transform: scale(0.85) translateY(8px); pointer-events: none;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal[data-d="1"].in { transition-delay: 0.08s; }
.js .reveal[data-d="2"].in { transition-delay: 0.16s; }
.js .reveal[data-d="3"].in { transition-delay: 0.24s; }
.js .reveal[data-d="4"].in { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 600px) {
  .services { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .main-nav { display: flex; }
  .hamburger, .mobile-nav { display: none; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(3, 1fr); }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .meet { grid-template-columns: 0.85fr 1.15fr; }
  .faq-layout { grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 72px); align-items: start; }
  .faq-layout .section-head { margin-bottom: 0; }
  .footer-grid { grid-template-columns: 2fr 1fr 1.4fr; }
}
@media (min-width: 1024px) {
  .services { grid-template-columns: repeat(3, 1fr); }
}