/* =========================================================
   0. FONTS – self-hosted Roboto (Latin subset incl. Irish fadas)
   ========================================================= */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-700-normal.woff2") format("woff2");
}

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  /* Palette – AMO pink with clean neutrals */
  --ink: #14181F;          /* headings, primary text, focus ring */
  --ink-soft: #4A5260;     /* body copy (8:1 on white) */
  --surface: #FFFFFF;      /* page background */
  --mist: #F4F5F7;         /* subtle neutral surfaces */
  --line: #E1E4E8;         /* borders */
  --cta: #EE3380;          /* AMO pink – buttons and accents */
  --cta-hover: #D81B6A;    /* darker pink for hover */
  --cta-tint: #FDEAF2;     /* very light pink for small accents */
  --on-cta: #FFFFFF;

  /* Type scale (mobile first, fluid up to desktop) */
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-body: 1rem;                                   /* 16px */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-nav: 1.1875rem;                               /* same size as the LET'S TALK button */
  --fs-h1: clamp(1.594rem, 1.05rem + 2.25vw, 2.625rem);
  --fs-h2: var(--fs-h1);                             /* section headings match the page title */
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);

  /* Spacing, radius, shadow */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(3rem, 2rem + 4vw, 6rem);
  --radius-xl: 0.75rem;     /* "rounded-xl" */
  --radius-2xl: 1.25rem;    /* larger media */
  --shadow-sm: 0 1px 2px rgba(15, 30, 43, 0.06), 0 2px 6px rgba(15, 30, 43, 0.06);
  --shadow-lg: 0 10px 30px -10px rgba(15, 30, 43, 0.25), 0 4px 10px -6px rgba(15, 30, 43, 0.12);
  --container: 75rem;       /* 1200px */
  --header-h: 4.5rem;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }   /* smooth anchor scrolling, off for reduced-motion users */
}
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--ink); font-weight: 700; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: var(--space-md); }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; }

/* Fills the iOS notch area behind the sticky header */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 10;
  height: env(safe-area-inset-top, 0px); background: var(--surface);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ink); color: var(--surface);
  padding: 0.75rem 1rem; border-radius: var(--radius-xl); font-weight: 500;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 2.75rem;               /* 44px touch target */
  padding: 0.625rem 1.375rem;
  font: 700 1.1875rem/1.2 var(--font);   /* 19px bold counts as large text: white on #EE3380 passes WCAG AA */
  text-decoration: none; white-space: nowrap; text-transform: uppercase;
  border-radius: var(--radius-xl);
  border: 2px solid var(--cta);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn--primary { background: var(--cta); color: var(--on-cta); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); box-shadow: var(--shadow-lg); transform: translateY(-1px); }

/* Chevron icon drawn by CSS on every button. The mask lets it take the text colour. */
.btn::after {
  content: ""; flex-shrink: 0;
  width: 1.125rem; height: 1.125rem;
  background: currentColor;
  -webkit-mask: url("/assets/icons/chevron.svg") center / contain no-repeat;
  mask: url("/assets/icons/chevron.svg") center / contain no-repeat;
  transition: transform .2s ease;
}
.btn:hover::after { transform: translateX(3px); }

/* =========================================================
   4. HEADER / NAVIGATION
   ========================================================= */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs);   /* small gap so logo, Let's Talk and menu fit on a 320px phone */
  min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; color: var(--ink); }
.logo img { width: auto; height: 1.75rem; }   /* 1400×500 source – keeps its 2.8:1 ratio */

.primary-nav { display: none; }
.nav-list { display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); }
.nav-list a {
  position: relative;
  font-size: var(--fs-nav); font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap; text-transform: uppercase;
  padding-block: 0.5rem;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.125rem;
  height: 2px; background: var(--cta); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--space-xs); }
.header-actions .btn { padding-inline: 0.875rem; }   /* compact on phones; full size from tablet up */

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-xl); cursor: pointer;
}
.menu-toggle svg { width: 1.375rem; height: 1.375rem; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile menu panel (opened via toggle) */
.primary-nav.is-open {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) clamp(1.25rem, 4vw, 2.5rem) var(--space-md);
}
.primary-nav.is-open .nav-list { flex-direction: column; gap: 0; }
.primary-nav.is-open .nav-list a {
  display: block; padding: 0.875rem 0; font-size: 1.0625rem;
  border-bottom: 1px solid var(--line);
}
.primary-nav.is-open .nav-list a::after { display: none; }

/* =========================================================
   5. HERO
   ========================================================= */
.hero { padding-block: var(--space-lg) var(--space-xl); }
.hero-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.hero-media {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #F4F4F6;              /* matches the image's own background */
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1200 / 1012;        /* image's native ratio – nothing is cropped */
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-content { max-width: 36rem; }

.hero p, .supporting p { font-size: var(--fs-lead); max-width: 62ch; }
.hero p + p { margin-top: var(--space-sm); }

.hero .btn { margin-top: var(--space-lg); }

/* Short quotes with a pink rule (customer needs in the hero) */
.quote { border-left: 3px solid var(--cta); padding-left: var(--space-sm); }
.quote p { font-style: italic; color: var(--ink); }
.quote figcaption { margin-top: 0.25rem; font-size: 0.9375rem; }
.quote figcaption::before { content: "- "; }
.hero-quotes { display: grid; gap: var(--space-sm); margin-bottom: var(--space-md); }

/* =========================================================
   5b. SECTION BAND – full-width heading strip from the wireframe.
   Reused for "It all starts with a chat…"
   ========================================================= */
.section-band {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  text-align: center;
}

/* =========================================================
   5c. WHO WE WORK WITH – client logos
   ========================================================= */
#clients-title, #faq-title { text-transform: uppercase; }
.clients { padding-bottom: var(--space-xl); }
.client-list {
  --gap: clamp(1rem, 2.5vw, 2rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--gap);
}
.client-list li { flex: 0 1 calc((100% - var(--gap)) / 2); max-width: 11rem; }
.client-logo {
  display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* lock each tile to a square, however tall the logo */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: #FFFFFF;               /* logos are designed for white */
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s ease, transform .3s ease;
}
.client-logo img { width: 100%; height: 100%; object-fit: contain; }   /* fits tall and wide logos alike */

/* Grey by default, full colour on hover – only on devices that can hover.
   Phones and tablets always show the logos in colour. */
@media (hover: hover) {
  .client-list .client-logo img {
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter .35s ease, opacity .35s ease;
  }
  .client-list .client-logo:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
  .client-list .client-logo:hover img { filter: none; opacity: 1; }
}

/* =========================================================
   5d. SUPPORTING IRISH BUSINESSES
   ========================================================= */
.supporting { padding-block: var(--space-xl); }
.supporting-grid { display: grid; gap: var(--space-lg); align-items: center; }
.supporting h3, .clients h3 { margin-bottom: var(--space-md); }
.supporting p + p { margin-top: var(--space-sm); }
.supporting .quote { margin-top: var(--space-md); }
.supporting .btn { margin-top: var(--space-lg); }
.supporting-media {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--mist);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 34rem;
  justify-self: center;
}
.supporting-media img { width: 100%; height: 100%; object-fit: cover; }

/* Stacked layouts (below 1024px): image and text share one comfortable
   reading column, so images never stretch to the full tablet width. */
@media (max-width: 63.99em) {
  .hero-grid,
  .supporting-grid,
  .clients { max-width: 40rem; }
  .hero-content { max-width: none; order: -1; }   /* headline and text before the image */
  .supporting-media { max-width: none; aspect-ratio: 4 / 3; }
}

/* 5e. Testimonials: parked in drafts/testimonials-section-DRAFT.html until real quotes exist */

/* =========================================================
   5f. FAQs – native <details> accordion (works with no JS)
   ========================================================= */
.faq { padding-block: var(--space-xl); }
.faq-list { display: grid; gap: var(--space-sm); }

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover { box-shadow: var(--shadow-lg); }
.faq-item[open] { border-color: var(--cta); }

.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  min-height: 3.75rem;
  padding: 1rem clamp(1rem, 3vw, 1.5rem);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-xl);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  color: var(--ink);
  transition: color .2s ease;
}
.faq-icon svg { width: 1.75rem; height: 1.75rem; }
.faq-icon .bar-v {
  transform-box: fill-box; transform-origin: center;
  transition: transform .25s ease;
}
.faq-item summary:hover .faq-icon,
.faq-item[open] .faq-icon { color: var(--cta); }
.faq-item[open] .faq-icon .bar-v { transform: scaleY(0); }   /* plus becomes minus */

.faq-answer {
  padding: 0 clamp(1rem, 3vw, 1.5rem) 1.25rem;
}
.faq-answer p, .faq-answer ul { max-width: 70ch; font-size: var(--fs-lead); }
.faq-answer ul { list-style: disc; margin-top: var(--space-xs); padding-left: 1.25rem; }

/* Smooth open/close in browsers that support it (Chrome/Edge 131+); others just open instantly */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0; overflow: clip;
    transition: height .3s ease, content-visibility .3s allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; }
}

/* =========================================================
   5g. IT ALL STARTS WITH A CHAT – closing call to action
   ========================================================= */
.cta-body {
  padding-block: var(--space-lg) var(--space-xl);
  text-align: center;
}
.cta-body p {
  font-size: var(--fs-lead);
  line-height: 1.85;
  max-width: 72ch;
  margin-inline: auto;
}
.cta-body .btn { margin-top: var(--space-md); }

/* =========================================================
   5h. FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  padding-top: var(--space-xl);
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  gap: var(--space-lg);
  text-align: center;
}
.site-footer h3 { font-size: 1.0625rem; line-height: 1.3; margin-bottom: var(--space-sm); }
.site-footer a { text-underline-offset: 3px; transition: color .2s ease; }
.site-footer a:hover { color: var(--cta); }


.site-footer address { font-style: normal; line-height: 1.7; }

.footer-contact { display: grid; justify-items: center; margin-top: -0.625rem; }   /* offsets the tall tap targets so the first line aligns with the other columns */
.footer-contact a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem;                 /* comfortable tap target */
  text-decoration: none;
}
.footer-contact a:hover { text-decoration: underline; }
.footer-contact svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; color: var(--cta); }

.footer-bottom {
  margin-top: var(--space-xl);
  padding-block: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--line);
  display: grid; gap: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
}
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; }
.legal-links li + li {
  margin-left: 0.75rem; padding-left: 0.75rem;
  border-left: 1px solid var(--line);   /* visual divider – not read aloud like a "|" character */
}
.legal-links a { display: inline-block; padding-block: 0.25rem; }

/* =========================================================
   5i. EYEBROW AND INNER PAGES
   ========================================================= */
.eyebrow {
  margin-bottom: var(--space-sm);
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cta-hover);
}

/* Inner pages: /lets-talk, /privacy, the Insights article */
.page { padding-block: var(--space-lg) var(--space-xl); }
.page h1 { max-width: 22ch; }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--space-sm); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-lg); }
.prose h3 { font-size: 1.25rem; line-height: 1.3; margin-top: var(--space-md); }
.prose a:not(.btn) { color: var(--ink); text-decoration-color: var(--cta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose ul li + li { margin-top: 0.375rem; }
.prose blockquote { border-left: 4px solid var(--cta); padding-left: var(--space-sm); color: var(--ink); font-style: italic; }
.lead { font-size: var(--fs-lead); color: var(--ink); }
.meta { font-size: 0.9375rem; }
.btn + .meta { margin-top: var(--space-md); }
a[href^="tel:"] { white-space: nowrap; }   /* keep phone numbers on one line */
.table-wrap { overflow-x: auto; margin-block: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.table-wrap table { border-collapse: collapse; min-width: 44rem; font-size: 0.9375rem; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.table-wrap thead th { background: var(--mist); color: var(--ink); }
.table-wrap tbody th { color: var(--ink); }

.steps { display: grid; gap: var(--space-sm); margin-block: var(--space-md) var(--space-lg); counter-reset: step; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-sm); align-items: start;
  padding: var(--space-sm) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: var(--cta-tint); color: var(--cta-hover); font-weight: 700;
}
.steps strong { display: block; color: var(--ink); }
.talk-grid { display: grid; gap: var(--space-lg); }
.about-card { padding: var(--space-md); background: var(--mist); border-radius: var(--radius-2xl); }
.about-card h2 { font-size: 1.25rem; margin-bottom: var(--space-xs); }
.about-card p + p { margin-top: var(--space-xs); }
.about-card a { color: var(--ink); }

/* =========================================================
   5j. PHONES ONLY (< 768px)
   ========================================================= */
@media (max-width: 22.49em) {
  .header-actions .btn::after { display: none; }   /* below 360px: drop the arrow so logo, LET'S TALK and menu fit */
}
@media (max-width: 47.99em) {
  /* /lets-talk: Book a Meeting comes straight after the intro, the 3 steps follow */
  .talk-grid > div { display: flex; flex-direction: column; align-items: flex-start; }
  .talk-grid .lead { margin-bottom: var(--space-md); }
  .talk-grid .steps { order: 1; align-self: stretch; }
}

/* =========================================================
   6. RESPONSIVE – TABLET (≥ 768px)
   ========================================================= */
@media (min-width: 48em) {
  .primary-nav { display: block; margin-inline: auto clamp(1rem, 3vw, 2.5rem); }   /* links sit on the right, next to LET'S TALK */
  .primary-nav.is-open { all: unset; display: block; }   /* never show mobile panel styling on larger screens */
  .menu-toggle { display: none; }
  .header-actions .btn { padding-inline: 1.375rem; }
  .client-list li { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   7. RESPONSIVE – DESKTOP (≥ 1024px)
   Image and text side by side – matches the wireframe
   ========================================================= */
@media (min-width: 64em) {
  :root { --header-h: 5.5rem; }
  .logo img { height: 2.125rem; }
  .hero { padding-top: var(--space-xl); }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .client-list li { flex-basis: calc((100% - 4 * var(--gap)) / 5); max-width: none; }
  .supporting-grid { grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .supporting-media { justify-self: end; }
  .talk-grid { grid-template-columns: 1.2fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}