/* ==========================================================================
   Mid-Ulster Injury Clinic — site styles
   Palette is taken straight from the MUIC brand sheet (brand/brand-sheet.webp).
   ========================================================================== */

:root {
  /* Brand */
  --blue: #007BFF;
  --blue-hover: #0063d1;
  --charcoal: #0F172A;
  --steel: #6B7280;
  --white: #F8FAFC;

  /* Derived surfaces — kept within the brand family, never new hues */
  --ink: #0A1120;
  --surface: #111B2E;
  --surface-2: #16213A;
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(148, 163, 184, 0.3);
  --muted: #94A3B8;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);

  --radius: 14px;
  --radius-lg: 20px;
  --container: 1180px;
  --header-h: 76px;
}

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

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header instead of hiding under it. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .6em; }
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -0.015em; }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1.1em; }
a  { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(68px, 9vw, 112px) 0; border-bottom: 1px solid var(--line); }
.section--tight { padding: clamp(44px, 6vw, 64px) 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.measure { max-width: 680px; }
.measure.center { margin-inline: auto; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}

/* Keyboard users land here first. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--blue); color: #fff; padding: 10px 16px;
  border-radius: 8px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

:is(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 10px;
  font-family: var(--font-sans); font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn svg { flex-shrink: 0; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 123, 255, .3); }
.btn--ghost { border-color: var(--line-strong); color: var(--white); background: transparent; }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.btn--sm { padding: 10px 18px; font-size: .88rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(10, 17, 32, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.header.is-stuck { border-bottom-color: var(--line); background: rgba(10, 17, 32, .94); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header__logo { display: block; flex-shrink: 0; }
.header__logo img { height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  text-decoration: none; font-size: .93rem; font-weight: 500; color: var(--muted);
  transition: color .15s ease;
}
.nav a:hover { color: var(--white); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  color: var(--white); border-radius: 9px; padding: 9px; cursor: pointer; line-height: 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(72px, 11vw, 132px) 0 clamp(60px, 8vw, 96px);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: ''; position: absolute; inset: -30% -10% auto; height: 120%;
  background: radial-gradient(60% 55% at 50% 0%, rgba(0, 123, 255, .22), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__media { position: relative; }
.hero__tagline {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 20px; margin-bottom: 26px;
}
.hero__tagline span:nth-child(2) { color: var(--blue); }
.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero__lead { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--muted); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__assurance { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 34px 0 0; padding: 0; list-style: none; }
.hero__assurance li { display: flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--muted); }
.hero__assurance svg { color: var(--blue); flex-shrink: 0; }

/* ---------- Picture slots ----------
   A dashed box until SITE.heroImage / treatmentImage / assessmentImage is set;
   main.js then swaps the box for an <img> of the same shape, so nothing jumps. */
.img-slot {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px dashed var(--line-strong); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--steel); font-size: .9rem; padding: 24px; gap: 4px;
}
.img-slot span { font-size: .78rem; opacity: .75; }
.img-filled { width: 100%; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--line); }

.img-slot--hero, .img-filled--hero { aspect-ratio: 4 / 5; }
.img-slot--service, .img-filled--service { aspect-ratio: 16 / 10; margin-bottom: 26px; }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pillar { background: var(--ink); padding: 30px 24px; text-align: center; }
.pillar svg { color: var(--blue); margin: 0 auto 14px; }
.pillar h3 { font-size: .83rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--white); }

/* ---------- Service cards ---------- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 26px; }
.service {
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, var(--surface), var(--ink) 70%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: border-color .2s ease, transform .2s ease;
}
.service:hover { border-color: rgba(0, 123, 255, .45); transform: translateY(-2px); }
.service__num {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .2em; color: var(--blue); margin-bottom: 16px;
}
.service h3 { font-size: 1.55rem; }
.service__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.service__meta li {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--blue); background: rgba(0, 123, 255, .1);
  border: 1px solid rgba(0, 123, 255, .28); border-radius: 999px; padding: 5px 13px;
}
.service > p { color: var(--muted); }
.service__listlead { margin: 0 0 12px; font-weight: 600; font-size: .95rem; }
.service__list { list-style: none; margin: 4px 0 28px; padding: 0; display: grid; gap: 11px; }
.service__list li { display: flex; gap: 11px; align-items: flex-start; font-size: .96rem; color: var(--white); }
.service__list svg { color: var(--blue); flex-shrink: 0; margin-top: 4px; }
.service .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; }
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(0, 123, 255, .12); border: 1px solid rgba(0, 123, 255, .3);
  color: var(--blue); font-family: var(--font-display); font-weight: 700; margin-bottom: 18px;
}
.step h3 { font-size: 1.15rem; }
.step p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.about__credentials { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.about__credentials li { display: flex; gap: 13px; align-items: flex-start; }
.about__credentials svg { color: var(--blue); flex-shrink: 0; margin-top: 4px; }
.about__quote {
  background: linear-gradient(160deg, rgba(0, 123, 255, .12), transparent 72%);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px;
}
.about__quote p { font-size: 1.12rem; font-style: italic; color: var(--white); margin-bottom: 14px; }
.about__quote cite { font-style: normal; font-size: .88rem; color: var(--blue); }
.about__portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--line); margin-bottom: 20px; }
.portrait-placeholder {
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  border: 1px dashed var(--line-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--steel); font-size: .85rem; padding: 24px; margin-bottom: 20px;
}

/* ---------- Google review wall (horizontal scrolling strip) ----------
   The track holds the review list twice over; translating it left by exactly
   50% lands the second copy where the first began, so the loop is seamless.
   Duration is set from JS as --gwall-duration, measured from the real track
   width — a fixed duration would crawl with 5 reviews and blur with 70. */
.gwall__aside { text-align: center; margin-bottom: clamp(26px, 3.5vw, 38px); }
.gwall__score { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-bottom: 8px; }
.gwall__score b { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 700; }
.gwall__stars { display: flex; justify-content: center; gap: 3px; color: var(--blue); margin-bottom: 12px; }
.gwall__count { color: var(--muted); font-size: .95rem; margin-bottom: 16px; }
.gwall__link {
  display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600;
  color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent;
}
.gwall__link:hover { border-bottom-color: var(--blue); }

/* Full-bleed: the strip escapes the container and runs edge to edge. body has
   overflow-x: hidden, so the scrollbar's share of 100vw cannot cause a
   horizontal scrollbar of its own. */
.gwall__viewport {
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
/* Spacing is card margin, not flex `gap`: with a gap, half a gap is left over
   at the seam and the loop visibly jumps every cycle. */
.gwall__track {
  display: flex; flex-direction: row; align-items: stretch; width: max-content;
  animation: gwall-scroll var(--gwall-duration, 120s) linear infinite;
}
.gwall__viewport:hover .gwall__track,
.gwall__viewport:focus-within .gwall__track { animation-play-state: paused; }
@keyframes gwall-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.gcard {
  display: flex; flex-direction: column; flex: 0 0 auto;
  /* Wider cards beat taller ones for fitting a long review: at 380x440 sixteen
     of the twenty-six were clipped, at 480x520 only five are. */
  width: clamp(280px, 80vw, 480px); height: clamp(400px, 56vh, 520px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 26px 22px;
  /* <figure> carries a UA margin of 1em 40px — it has to go to zero, or the
     cards sit inset and the spacing stops being the uniform 16px the seamless
     loop depends on. */
  margin: 0 16px 0 0;
}
.gcard__stars { display: flex; gap: 3px; color: var(--blue); margin-bottom: 14px; flex: 0 0 auto; }
/* Cards are a uniform size, so a long review is clipped rather than allowed to
   set the height of the whole strip. Only the ones that actually overflow get
   the fade — JS adds .is-clipped. The full text stays in the DOM either way. */
.gcard blockquote { flex: 1 1 auto; overflow: hidden; min-height: 0; }
.gcard blockquote.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.gcard p { margin: 0 0 .9em; color: var(--muted); font-size: .94rem; }
.gcard cite {
  font-style: normal; font-weight: 600; font-size: .92rem; display: block; flex: 0 0 auto;
  border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px;
}

/* No animation for anyone who asked for none — the strip simply becomes a
   normally scrollable row, so every review is still reachable. */
@media (prefers-reduced-motion: reduce) {
  .gwall__viewport { overflow-x: auto; }
  .gwall__track { animation: none; }
  /* The second copy only exists to make the loop seamless. With no loop it
     would just repeat every review, so it goes. */
  .gwall__track > [aria-hidden='true'] { display: none; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--blue); flex-shrink: 0; transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details > div { padding: 0 24px 22px; color: var(--muted); font-size: .96rem; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Booking band ---------- */
.cta-band {
  background: linear-gradient(150deg, rgba(0, 123, 255, .16), transparent 65%), var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 64px); text-align: center;
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { color: var(--muted); max-width: 54ch; margin-inline: auto; }
.cta-band .btn { margin-top: 10px; }
.cta-note {
  /* --muted, not --steel: --steel on this surface is about 3.3:1, under the
     4.5:1 WCAG AA minimum for text this size. */
  margin: 26px auto 0; max-width: 52ch; font-size: .88rem; color: var(--muted);
  padding-top: 22px; border-top: 1px solid var(--line);
}
/* The number sits on its own line so it can never break across two. */
.cta-note__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 11px 18px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease;
}
.cta-note__link:hover { border-color: var(--blue); background: rgba(0, 123, 255, .08); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 36px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.contact-card svg { color: var(--blue); margin-bottom: 14px; }
.contact-card h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.contact-card a, .contact-card p { font-size: 1rem; color: var(--white); text-decoration: none; margin: 0; }
.contact-card a:hover { color: var(--blue); }
.contact-card__link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px !important;
  font-size: .88rem !important; font-weight: 600; color: var(--blue) !important;
}
.contact-card__link:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.footer { padding: 54px 0 40px; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
.footer img { height: 44px; width: auto; }
.footer__meta { font-size: .85rem; color: var(--steel); text-align: right; }
.footer__meta p { margin: 0 0 4px; }
.footer__disclaimer { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 24px; font-size: .8rem; color: var(--steel); }

/* ---------- Reveal on scroll ----------
   `.will-reveal` is added by main.js immediately before it starts observing, so
   content can only ever be hidden by the same code path that reveals it. If the
   script is missing, blocked or throws, the page simply renders fully visible. */
.will-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.will-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .about { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  /* Headline first, picture under it — the words do the selling on a phone. */
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { max-width: none; }
  .img-slot--hero, .img-filled--hero { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--line);
    padding: 10px 24px 22px; transform: translateY(-12px); opacity: 0;
    pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav .btn { margin-top: 16px; }
  .nav-toggle { display: block; }
  .header__logo img { height: 28px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__meta { text-align: left; }
}
@media (max-width: 520px) {
  .pillars { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .will-reveal { opacity: 1; transform: none; }
}