/* Emerson Legacy Web Design: all site styles.

   Mobile first: the base styles are for phones. The @media (min-width: ...)
   blocks add the wider layouts for tablets and desktops.

   Sections in this file:
    1. Fonts                      7. Page heading band (inner pages)
    2. Design tokens              8. Home page sections
    3. Base                       9. Services, About, FAQ components
    4. Buttons and links         10. Contact page and form
    5. Header                    11. Call-to-action band
    6. Hero (home page top)      12. Footer and mobile action bar */

/* ---------- 1. Fonts ---------- */

/* The two brand fonts are stored in /fonts, so pages don't load anything from
   Google. Each file holds every weight we use (a "variable font").
   font-display: swap shows text right away in a system font, then swaps in
   the brand font as soon as it arrives. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url(/fonts/figtree-latin.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Design tokens ---------- */

/* "Tokens" are named values used everywhere below. Change a color here and
   it changes across the whole site. */
:root {
  /* Brand colors (from the brand kit) */
  --deep: #06302A;          /* Deep Emerald: dark sections, text on light */
  --emerald: #0B7A55;       /* Emerald: buttons, links, and icons on light */
  --bright: #3DDC97;        /* Bright Emerald: accents on dark only */
  --gold: #E6B84A;          /* Heirloom Gold: one highlight per page */
  --mint: #F1F7F3;          /* Mint White: light background, text on dark */
  --white: #FFFFFF;

  /* Supporting shades */
  --emerald-hover: #096446;
  --gold-hover: #F0C868;
  --mint-deep: #E2EEE7;     /* tinted panels and icon tiles on light */
  --muted: #3F5A52;         /* secondary text on light */
  --soft: #5A7469;          /* second half of two-tone headings on light */
  --on-dark-muted: #A6C9BB; /* secondary text on dark */
  --on-dark-soft: #8DB5A6;  /* second half of two-tone headings on dark */
  --line: #D3E3DB;          /* borders on light */
  --line-dark: rgba(241, 247, 243, 0.14); /* borders on dark */
  --error: #B42318;

  --font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 32px);  /* space at the left and right page edges */
  --max: 1200px;                     /* widest the content gets */
  --radius: 10px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(6, 48, 42, 0.05), 0 12px 32px -14px rgba(6, 48, 42, 0.22);
  --shadow-lg: 0 40px 80px -30px rgba(6, 48, 42, 0.5);
  --section-space: clamp(4rem, 10vw, 7rem);
}

/* ---------- 3. Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* When a link jumps to a spot on the page, leave a little room above it */
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  font: 400 1.0625rem/1.65 var(--font-body);
  color: var(--deep);
  background: var(--mint);
  overflow-wrap: break-word; /* long words like web addresses break instead of widening the page */
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance; /* evens out line lengths in headings */
}
h2 { font-size: clamp(2rem, 5.5vw, 3.25rem); }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--emerald); text-underline-offset: 0.18em; }
a:hover { color: var(--emerald-hover); }
/* Email addresses have no spaces, so let them break on very narrow screens */
a[href^="mailto:"] { overflow-wrap: anywhere; }

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

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Dark areas: header, hero, page headings, call-to-action band, footer */
.dark { background: var(--deep); color: var(--mint); }
.dark a:not(.btn) { color: var(--mint); }
.dark a:not(.btn):hover { color: var(--bright); }
.dark :focus-visible { outline-color: var(--bright); }

/* Small line icons. They are drawn with lines (stroke), and currentColor
   makes them the same color as the text around them. */
.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A rounded square behind an icon */
.icon-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--mint-deep);
  color: var(--emerald);
}
.icon-tile .icon { width: 1.4rem; height: 1.4rem; }
.dark .icon-tile,
.card-featured .icon-tile { background: rgba(61, 220, 151, 0.12); color: var(--bright); }

/* Hidden from view but still read by screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden until a keyboard user presses Tab, then jumps past the header */
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus-visible { outline-color: var(--mint); }
.skip-link:focus {
  left: var(--gutter);
  top: 8px;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--deep);
}

/* Small label above a heading, with a short line in front */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
}
.dark .eyebrow { color: var(--bright); }

.lede { font-size: clamp(1.125rem, 2.4vw, 1.3rem); line-height: 1.55; max-width: 40ch; }
.dark .lede { color: var(--on-dark-muted); }

.note { margin-top: 2rem; color: var(--muted); }

/* Two-tone headings (idea from cofounder.co): the second phrase is lighter */
.soft { color: var(--soft); }
.dark .soft { color: var(--on-dark-soft); }

.nowrap { white-space: nowrap; } /* keeps a phone number on one line */

/* Visible marker for a photo that still needs to be swapped in */
.ph-tag {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: rgba(4, 33, 29, 0.85);
  color: var(--mint);
  font-size: 0.8rem;
  font-weight: 600;
}

/* A list with check marks instead of bullets. ::before draws the circle,
   ::after draws the check (two borders of a box, turned 45 degrees). */
.checklist { display: grid; gap: 0.65rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.checklist li { position: relative; padding-left: 2.1rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--mint-deep);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 0.5em;
  width: 0.6rem;
  height: 0.34rem;
  border-left: 2px solid var(--emerald);
  border-bottom: 2px solid var(--emerald);
  transform: rotate(-45deg);
}
.dark .checklist li::before,
.card-featured .checklist li::before { background: rgba(61, 220, 151, 0.15); }
.dark .checklist li::after,
.card-featured .checklist li::after { border-color: var(--bright); }

/* Small rounded labels (project tags) */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tags li {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--mint-deep);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- 4. Buttons and links ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.btn {
  display: inline-flex;
  flex-wrap: wrap;      /* lets "Call" and the number stack if text is very large */
  align-items: center;
  justify-content: center;
  column-gap: 0.45em;
  min-height: 52px;
  padding: 0.8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: 600 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn .icon { width: 1.15em; height: 1.15em; }

.btn-gold { background: var(--gold); color: var(--deep); }
.btn-gold:hover { background: var(--gold-hover); color: var(--deep); }
.btn-light { background: var(--mint); color: var(--deep); }
.btn-light:hover { background: var(--white); color: var(--deep); }
.btn-outline { border-color: rgba(241, 247, 243, 0.75); color: var(--mint); }
.btn-outline:hover { border-color: var(--mint); background: rgba(241, 247, 243, 0.1); color: var(--mint); }
.btn-emerald { background: var(--emerald); color: var(--white); }
.btn-emerald:hover { background: var(--emerald-hover); color: var(--white); }
.btn-ghost { border-color: var(--emerald); color: var(--emerald); }
.btn-ghost:hover { background: var(--emerald); color: var(--white); }
.btn-small { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.95rem; }
.btn-block { width: 100%; }

/* A link that stands on its own line, with an arrow */
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 1.25rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(11, 122, 85, 0.3);
  text-underline-offset: 0.3em;
}
.more-link:hover { text-decoration-color: currentColor; }
.more-link .icon { width: 1.1em; height: 1.1em; transition: transform 0.15s; }
.more-link:hover .icon { transform: translateX(3px); }

/* People who turn on "reduce motion" in their device settings get no movement */
@media (prefers-reduced-motion: reduce) {
  .btn, .more-link .icon { transition: none; }
  .btn:hover, .more-link:hover .icon { transform: none; }
}

/* ---------- 5. Header ---------- */

.site-header { position: relative; z-index: 50; border-bottom: 1px solid var(--line-dark); }

/* Phones: a row that wraps. Logo and language link on top, menu on its own row
   underneath (order: 3 moves it last). If someone uses very large text, the
   pieces wrap onto more lines instead of pushing the page sideways.
   Desktop (the @media block below): a grid with everything in one row. */
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  padding-block: 0.5rem;
}
.site-nav { order: 3; flex-basis: 100%; }

.brand {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img { width: 40px; height: 40px; }

.site-nav { grid-area: nav; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
}
/* A bright line under the page you're on */
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--bright);
}

.lang-link {
  grid-area: lang;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.header-cta { grid-area: cta; display: none; }

/* Desktop: one row, and the header stays at the top while you scroll
   ("sticky"). It's slightly see-through, with a blur behind it. */
@media (min-width: 1000px) {
  html { scroll-padding-top: 6rem; } /* so the sticky header never covers a heading you jump to */

  .site-header {
    position: sticky;
    top: 0;
    background: rgba(6, 48, 42, 0.94);
    backdrop-filter: saturate(140%) blur(10px);
  }
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "brand nav lang cta";
    gap: 0 1.75rem;
    min-height: 72px;
  }
  .site-nav ul { justify-content: flex-end; gap: 0 1.75rem; }
  .header-cta { display: inline-flex; }
}

/* ---------- 6. Hero (top of the home page) ---------- */

/* The photo fills the whole hero. A dark green layer (::before) sits between
   the photo and the text so the white headline is always easy to read. */
.hero {
  position: relative;
  isolation: isolate; /* keeps the photo and dark layer behind this section's text */
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fills the box, trimming the edges if needed */
  object-position: 50% 20%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 0.86 keeps every line of text readable even over the white tower in the photo */
  background: linear-gradient(180deg, rgba(6, 48, 42, 0.86) 0%, rgba(6, 48, 42, 0.88) 60%, var(--deep) 100%);
}

.hero-inner {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3.5rem, 12vw, 7.5rem) clamp(3rem, 10vw, 6.5rem);
}
.hero-inner > * { min-width: 0; } /* lets the columns shrink instead of pushing the page wider */

.hero h1 {
  max-width: 14ch;
  margin-bottom: 1.5rem;
  font-size: clamp(2.75rem, 10vw, 6.25rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}
/* The second half of the headline: smaller, on its own line */
.hero h1 .soft {
  display: block;
  max-width: 22ch;
  margin-top: 0.4em;
  font-size: max(0.42em, 1.4rem); /* never smaller than 1.4rem on phones */
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--on-dark-muted);
}

/* "Free, no obligation" line under the buttons */
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}
.hero-points li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-points .icon { color: var(--bright); }

/* The seal is shown on wider screens only, and never below 1.5 inches (144px)
   wide, because its lettering becomes unreadable. */
.hero-seal { display: none; }

@media (min-width: 900px) {
  /* Darker on the left behind the text, lighter on the right so the photo shows */
  .hero::before {
    background:
      linear-gradient(90deg, rgba(6, 48, 42, 0.95) 0%, rgba(6, 48, 42, 0.9) 45%, rgba(6, 48, 42, 0.52) 75%, rgba(6, 48, 42, 0.62) 100%),
      linear-gradient(0deg, var(--deep) 0%, rgba(6, 48, 42, 0) 28%);
  }
  .hero-photo img { object-position: 50% 30%; }
  .hero-inner {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    min-height: min(82vh, 780px);
  }
  .hero-seal {
    display: block;
    justify-self: end;
    width: clamp(180px, 18vw, 250px);
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
  }
}

/* The strip of four quick facts right under the hero */
.proof { background: var(--white); border-bottom: 1px solid var(--line); }
.proof-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1.25rem 1rem;
  margin: 0 auto;
  padding-block: 1.75rem;
  list-style: none;
}
/* Phones: icon above the text, so the words get the full width */
.proof-list li { display: flex; flex-direction: column; gap: 0.6rem; }
.proof-list p { margin: 0; line-height: 1.35; }
.proof-list strong { display: block; font-family: var(--font-head); font-weight: 700; }
.proof-list p span { display: block; margin-top: 0.15rem; font-size: 0.92rem; color: var(--muted); }

@media (min-width: 600px) {
  .proof-list li { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
}
@media (min-width: 900px) {
  .proof-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 2.25rem; }
}

/* ---------- 7. Page heading band (top of every inner page) ---------- */

/* A big headline on dark, with thin line art on wider screens (idea from agiloft.com) */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 10vw, 6.5rem) clamp(3rem, 8vw, 5rem);
}
.page-head h1 {
  max-width: 18ch;
  margin-bottom: 1.25rem;
  font-size: clamp(2.5rem, 7.5vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.page-head .lede { max-width: 46ch; margin-bottom: 0; }
.page-head .lede a { font-weight: 600; }

/* Pill-shaped links that jump to sections further down the page */
.jump-links ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(241, 247, 243, 0.3);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.jump-links a:hover { border-color: var(--bright); }

/* The line art. ::after adds a decorative box that isn't in the HTML. */
@media (min-width: 900px) {
  .page-head::after,
  .cta::before {
    content: "";
    position: absolute;
    right: -60px;
    bottom: 12px;
    width: min(640px, 38vw); /* shrinks on smaller screens so it stays clear of the text */
    aspect-ratio: 640 / 260;
    background: url(/images/lines.svg) no-repeat center / contain;
    pointer-events: none;
  }
  .page-head .container { position: relative; z-index: 1; }
}

/* ---------- 8. Home page sections ---------- */

.section { padding-block: var(--section-space); }
.section-white { background: var(--white); }

.section-intro { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-intro p:not(.eyebrow) { font-size: 1.125rem; color: var(--muted); }

/* Image and text side by side (stacked on phones) */
.split { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-wide-text { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (min-width: 900px) {
  .photo-tall { aspect-ratio: 4 / 5; }
}

.list-title { margin: 1.75rem 0 0; font-weight: 600; }

/* Service cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
.card .icon-tile { margin-bottom: 1.25rem; }
.card h3 { margin-bottom: 0.4rem; }
.card p { margin: 0; color: var(--muted); }
.card .more-link { margin-top: auto; padding-top: 1rem; }

/* The bilingual card is dark to stand out: Spanish is the studio's strongest selling point */
.card-featured { border-color: var(--deep); background: var(--deep); color: var(--mint); }
.card-featured p { color: var(--on-dark-muted); }
.card-featured .more-link { color: var(--bright); text-decoration-color: rgba(61, 220, 151, 0.4); }
.card-featured .more-link:hover { color: var(--bright); text-decoration-color: currentColor; }
.card-featured :focus-visible { outline-color: var(--bright); }

.card-tag {
  margin: -0.25rem 0 1rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(61, 220, 151, 0.15);
  color: var(--bright);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Smaller cards for the two ongoing services */
.extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.extra {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--mint);
}
.extra h3 { margin-bottom: 0.3rem; font-size: 1.15rem; }
.extra p { margin: 0; color: var(--muted); }

/* Recent work: screenshots in a browser frame and a phone frame */
.showcase { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.showcase > * { min-width: 0; }
@media (min-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.devices { position: relative; margin: 0; padding: 0 9% 14% 0; }
.browser {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(6, 48, 42, 0.1);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
/* The three dots of a browser window, drawn with CSS */
.browser-bar { display: flex; gap: 6px; padding: 10px 12px; background: #E6EEEA; }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #C3D3CB; }
.phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  padding: 5px;
  border-radius: 24px;
  background: #0B1A17;
  box-shadow: var(--shadow-lg);
}
.phone img { border-radius: 19px; }

.showcase h3 { margin-top: 1.75rem; font-size: 1.1rem; }

.before {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin: 1.75rem 0 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.before img { border-radius: 6px; }
.before figcaption { font-size: 0.92rem; line-height: 1.45; color: var(--muted); }
.before figcaption strong { display: block; color: var(--deep); }

/* Numbered steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--mint);
}
/* The "01, 02..." numbers. The second `content` line hides the number from
   screen readers (the list already tells them the step number). */
.steps li::before {
  content: counter(step, decimal-leading-zero);
  content: counter(step, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--emerald);
}
.steps h3 { margin-bottom: 0.4rem; }
.steps p { margin: 0; color: var(--muted); }

/* Meet the founder */
.founder-photo { position: relative; width: 100%; max-width: 340px; margin: 0; }
@media (min-width: 900px) {
  .founder-photo { max-width: 440px; }
}
.founder-photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.founder-photo .ph-tag { position: absolute; left: 12px; bottom: 12px; }

/* ---------- 9. Services, About, FAQ components ---------- */

/* Price cards (Services page) */
.price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
.price-card .icon-tile { margin-bottom: 1.25rem; }
.price-card h3 { font-size: 1.5rem; }
.price-card > p { color: var(--muted); }
.price-card .checklist { margin-bottom: 2rem; }
.price-card .price { margin-top: auto; } /* pushes the price to the bottom so prices line up across cards */
.price-card.card-featured { border-color: var(--deep); background: var(--deep); color: var(--mint); }
.price-card.card-featured > p { color: var(--on-dark-muted); }

.price {
  align-self: stretch;
  margin: 0.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}
.card-featured .price,
.dark .price { border-color: var(--line-dark); }
.price-card.card-featured > .price,
.panel .panel-action .price { color: var(--mint); }
.price-label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-featured .price-label,
.dark .price-label { color: var(--on-dark-muted); }

/* Feature grid: what every site includes */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 2.25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.features .icon-tile { margin-bottom: 1rem; }
.features h3 { margin-bottom: 0.3rem; font-size: 1.12rem; }
.features p { margin: 0; color: var(--muted); }

/* A dark panel inside a light section (free checkup on the Services page) */
.panel {
  display: grid;
  gap: 2rem;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  border-radius: var(--radius-lg);
}
.panel > * { min-width: 0; }
.panel h2 { font-size: clamp(1.9rem, 5vw, 2.75rem); }
.panel > div > p:not(.eyebrow) { color: var(--on-dark-muted); }
.panel-action { display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 900px) {
  .panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
}

/* Two big figures side by side (payment terms) */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 2rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.figures li { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.figure-big {
  margin-bottom: 0.5rem;
  font-family: var(--font-head);
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--emerald);
}
.figures p:last-child { margin: 0; color: var(--muted); }

/* Label-and-value list (education, languages...) on the About page */
.facts { margin: 1.75rem 0 0; border-top: 1px solid var(--line); }
.facts div { display: grid; gap: 0.1rem 1.5rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
.facts dt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts dd { margin: 0; }
@media (min-width: 600px) {
  .facts div { grid-template-columns: 9rem 1fr; align-items: baseline; }
}

.split-seal img { width: min(70vw, 320px); margin-inline: auto; }

/* Numbered value cards (About page) */
.values { counter-reset: value; }
.values .card { counter-increment: value; }
.values .card::before {
  content: counter(value, decimal-leading-zero);
  content: counter(value, decimal-leading-zero) / "";
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--emerald);
}

/* FAQ: heading on the left, questions on the right (like set.space) */
.faq-group {
  display: grid;
  gap: 1.5rem 3rem;
  padding-block: 2.5rem;
  scroll-margin-top: 1rem;
}
.faq-group:first-child { padding-top: 0; }
.faq-group > * { min-width: 0; }
.faq-group h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
@media (min-width: 900px) {
  .faq-group { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
  .faq-group > :first-child { position: sticky; top: 1.5rem; align-self: start; }
}
@media (min-width: 1000px) {
  .faq-group > :first-child { top: 6.5rem; } /* below the sticky header */
}

/* <details> is a built-in open/close box: no JavaScript needed */
.faq { border-bottom: 1px solid var(--line); }
.faq:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding-block: 1rem;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  list-style: none; /* hides the default triangle */
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
/* The + in a circle; it turns into an x when the answer is open */
.faq summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--mint-deep);
  color: var(--emerald);
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--emerald); }
.faq-answer { max-width: 44rem; padding-bottom: 1.4rem; color: var(--muted); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer .checklist { margin: 0 0 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* Long text (privacy policy) */
.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.4rem, 4vw, 1.9rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.75rem; }
.prose address { font-style: normal; }

/* ---------- 10. Contact page and form ---------- */

.contact-layout { display: grid; gap: 1.5rem; align-items: start; }
.contact-layout > * { min-width: 0; }

/* On wide screens the form card overlaps the dark heading band above it */
@media (min-width: 960px) {
  .page-head-overlap { padding-bottom: 9rem; }
  .page-head-overlap::after { display: none; } /* the line art would run behind the cards */
  .contact-section { padding-top: 0; }
  .contact-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 2rem;
    margin-top: -6rem;
    position: relative;
  }
}

.form-card {
  padding: clamp(1.5rem, 5vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}

.form { display: grid; gap: 1.25rem; }
.form h2 { margin-bottom: 0; font-size: clamp(1.6rem, 4vw, 2.1rem); }
.field { display: grid; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-row { display: grid; gap: 1.25rem; }
.field label,
.field legend { padding: 0; font-weight: 600; }
.field legend { margin-bottom: 0.4rem; }
.req { font-weight: 400; color: var(--muted); }

@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.form input:not([type="checkbox"]),
.form select,
.form textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--soft); /* dark enough (5:1) for people with low vision to see the box */
  border-radius: 8px;
  background: var(--white);
  color: var(--deep);
  font: inherit;
}
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible { border-color: var(--emerald); outline-offset: 0; }

/* Red border on a field that was filled in wrong, but only after the visitor
   has typed in it or tried to send (that's what :user-invalid means) */
.form input:user-invalid,
.form textarea:user-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 0.5rem;
}
/* Each checkbox sits in its own tappable box */
.choice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 400;
  cursor: pointer;
}
.choice:hover { border-color: var(--emerald); }
.choice:has(input:checked) { border-color: var(--emerald); background: var(--mint); }
.choice input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--emerald); }

/* Spam trap: hidden from people, but spam bots fill it in and get rejected */
.hp { display: none; }

.form-note { margin: 0; font-size: 0.95rem; color: var(--muted); }

/* Contact details and "what happens next" beside the form */
.contact-aside { display: grid; gap: 1.5rem; }
.contact-card {
  padding: 1.75rem;
  border: 1px solid var(--line-dark); /* shows the card's edge where it overlaps the dark band */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.contact-card h2 { font-size: 1.5rem; }
.contact-card h3 {
  margin: 1.5rem 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bright);
}
.contact-card p { margin: 0; }
.contact-card address { font-style: normal; }
.contact-lines { display: grid; margin: 0; padding: 0; list-style: none; }
.contact-lines a {
  display: inline-flex;
  flex-wrap: wrap; /* with very large text, the icon moves above the number instead of overflowing */
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  font-weight: 600;
}
.contact-lines .icon { color: var(--bright); }

.next-card {
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.next-card h2 { font-size: 1.5rem; }
.mini-steps { display: grid; gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: mini; }
.mini-steps li { counter-increment: mini; display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; color: var(--muted); }
.mini-steps li::before {
  content: counter(mini);
  content: counter(mini) / "";
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--mint-deep);
  color: var(--emerald);
  font-weight: 600;
}
.mini-steps p { margin: 0; }
.mini-steps strong { display: block; color: var(--deep); }

/* ---------- 11. Call-to-action band (centered, like agiloft.com) ---------- */

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta .container { position: relative; z-index: 1; }
.cta h2 { max-width: 20ch; margin-inline: auto; font-size: clamp(2.1rem, 7vw, 3.75rem); }
.cta .lede { margin-inline: auto; }
.cta .actions { justify-content: center; }
@media (min-width: 900px) {
  .cta::before { right: auto; left: -60px; top: 24px; bottom: auto; transform: scaleX(-1); }
}

/* ---------- 12. Footer and mobile action bar ---------- */

.site-footer {
  padding-top: var(--section-space);
  border-top: 1px solid var(--line-dark);
}

.footer-grid { display: grid; gap: 2.5rem; }
.footer-grid > * { min-width: 0; }

.footer-brand img { width: 150px; margin-bottom: 1.25rem; }
.footer-brand p { margin: 0; color: var(--on-dark-muted); }
.footer-brand .footer-name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; color: var(--mint); }

.site-footer address { font-style: normal; }
.site-footer address p { margin: 0; }
.site-footer p { color: var(--on-dark-muted); }

.footer-heading {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bright);
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links a,
.site-footer address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 3.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.875rem;
}
.footer-bottom p { margin: 0; }

/* Phones and tablets: a bar fixed to the bottom of the screen with the two
   main actions, always within thumb reach. Hidden on desktop, where the
   sticky header has the button instead. */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem var(--gutter);
  border-top: 1px solid var(--line-dark);
  background: rgba(6, 48, 42, 0.97);
}
.action-bar .btn { min-height: 48px; padding: 0.5rem 0.75rem; }

/* Extra room at the bottom of the footer so the bar never hides its last line,
   and so links that jump down the page don't land behind the bar */
.with-action-bar .site-footer { padding-bottom: 4rem; }
html:has(.with-action-bar) { scroll-padding-bottom: 5rem; }

@media (min-width: 1000px) {
  .action-bar { display: none; }
  .with-action-bar .site-footer { padding-bottom: 0; }
}

/* ---------- Not-found page ---------- */

.not-found {
  display: grid;
  align-content: center;
  min-height: 70vh;
  padding-block: var(--section-space);
}
.not-found h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); letter-spacing: -0.03em; }