/* =========================================================
   v5 — built on the Cruip "Talent" template, composed as a
   light editorial page. Talent supplies style.css, the
   Aspekta / Cabinet Grotesk typefaces and AOS.
   This layer adds only what its compiled build cannot express.
   ========================================================= */

:root {
  --ink: #16202e;
  --body: #55637a;
  --rule: #e6eaf0;
  --rule-soft: #f0f3f7;
  --accent: #14607a;         /* deep clinical teal */
  --accent-soft: #f0f7f9;
  --accent-strong: #0f4b60;
  --warm: #f7f5f1;           /* paper band */
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }
body { color: var(--ink); }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 90;
  background: var(--accent); color: #fff; padding: .6rem 1rem;
  border-radius: 999px; font-weight: 700; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.hdr.stuck { border-bottom-color: var(--rule); }
.brand { text-decoration: none; color: var(--ink); }
.brand .n { font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; display: block; }
.brand .r { font-size: .72rem; color: var(--body); letter-spacing: .02em; }
.hlink {
  color: var(--body); text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: .4rem .6rem; border-radius: 6px; transition: color .16s var(--ease), background .16s var(--ease);
}
.hlink:hover { color: var(--ink); background: var(--rule-soft); }
.hcall {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .85rem; padding: .5rem .9rem; border-radius: 999px;
  transition: background .18s var(--ease);
}
.hcall:hover { background: var(--accent-strong); color: #fff; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(180deg, var(--warm) 0%, #fff 100%); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 700;
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
.display {
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  letter-spacing: -.035em; line-height: 1.02; color: var(--ink);
}
.lede { color: var(--body); }

.portrait {
  position: relative; border-radius: 20px; overflow: hidden;
  background: linear-gradient(165deg, #e9eef2, #f6f8fa);
  border: 1px solid var(--rule);
  aspect-ratio: 4/5; display: flex; align-items: flex-end;
}
.portrait svg { position: absolute; bottom: 2.4rem; left: 50%; translate: -50% 0; width: 56%; color: #b9c6d2; }
.portrait .cap {
  position: relative; width: 100%; padding: .8rem 1rem;
  font-size: .74rem; color: var(--body);
  background: rgba(255,255,255,.85); border-top: 1px solid var(--rule);
}

/* fact rail under the hero */
.facts { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: #fff; }
.fact { padding: 1.4rem 1.3rem; border-right: 1px solid var(--rule); }
.fact:last-child { border-right: 0; }
.fact .v {
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.fact .v sup { font-size: .5em; color: var(--accent); }
.fact .k { font-size: .8rem; color: var(--body); margin-top: .15rem; }
@media (max-width: 639px) {
  .fact { border-right: 0; border-bottom: 1px solid var(--rule); }
  .fact:last-child { border-bottom: 0; }
}

/* ---------- sections ---------- */
.band-warm { background: var(--warm); }
.rule-top { border-top: 1px solid var(--rule); }

.sec-title {
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  letter-spacing: -.028em; color: var(--ink); line-height: 1.1;
}

/* about: pull quote + body */
.pull {
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4;
  color: var(--ink); border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
}

/* credentials as a definition table */
.creds { border-top: 1px solid var(--rule); }
.cred {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.2rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.cred dt { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--body); font-weight: 600; }
.cred dd { color: var(--ink); font-size: .95rem; }
@media (max-width: 639px) { .cred { grid-template-columns: 1fr; gap: .3rem; } }

/* conditions: numbered editorial list */
.clist { border-top: 1px solid var(--rule); }
.citem { border-bottom: 1px solid var(--rule); }
.ctrig {
  width: 100%; display: grid; grid-template-columns: 3rem 1fr auto;
  align-items: baseline; gap: 1rem; padding: 1.3rem .2rem;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  color: var(--ink); transition: color .18s var(--ease);
}
.ctrig:hover { color: var(--accent); }
.ctrig .num { font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; font-size: .8rem; color: var(--accent); }
.ctrig .ttl { font-family: "Cabinet Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: -.02em; }
.ctrig .sign {
  width: 1.4rem; height: 1.4rem; position: relative; flex: none; color: var(--body);
  transition: transform .3s var(--ease), color .18s var(--ease);
}
.ctrig .sign::before, .ctrig .sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor;
}
.ctrig .sign::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.ctrig[aria-expanded="true"] .sign { color: var(--accent); }
.ctrig[aria-expanded="true"] .sign::after { transform: rotate(0deg); }

.cpanel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); }
.cpanel > div { overflow: hidden; }
.cpanel.open { grid-template-rows: 1fr; }
.cbody { padding: 0 .2rem 1.5rem 4rem; max-width: 60ch; color: var(--body); }
.cbody p + p { margin-top: .7rem; }
.ctags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; list-style: none; padding: 0; }
.ctags li {
  font-size: .76rem; font-weight: 700; color: var(--accent-strong);
  background: var(--accent-soft); border-radius: 5px; padding: .25rem .55rem;
}
@media (max-width: 639px) {
  .ctrig { grid-template-columns: 2rem 1fr auto; gap: .6rem; }
  .cbody { padding-left: 2.6rem; }
}

/* journey as a horizontal rail */
.jrail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.jcard { border-top: 2px solid var(--accent); padding-top: 1.2rem; }
.jcard .jn { font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; font-size: .78rem; color: var(--accent); }
.jcard h3 { font-family: "Cabinet Grotesk", sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; margin: .5rem 0 .5rem; }
.jcard p { font-size: .92rem; color: var(--body); }
@media (max-width: 767px) { .jrail { grid-template-columns: 1fr; } }

/* locations */
.loc {
  border: 1px solid var(--rule); border-radius: 16px; background: #fff;
  padding: 1.6rem 1.5rem; height: 100%; display: flex; flex-direction: column; gap: .7rem;
}
.loc h3 { font-family: "Cabinet Grotesk", sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.loc address { font-style: normal; color: var(--body); font-size: .93rem; }
.loc .n { font-size: .87rem; color: var(--body); }
.loc .lk { margin-top: auto; padding-top: .6rem; display: flex; flex-wrap: wrap; gap: 1rem; font-size: .88rem; }
.loc .lk a { color: var(--accent); font-weight: 600; text-decoration: none; }
.loc .lk a:hover { text-decoration: underline; }

/* review slot */
.slot { border: 1px dashed var(--rule); border-radius: 16px; padding: 2rem 1.8rem; background: #fff; }

/* contact */
.ccard { border: 1px solid var(--rule); border-radius: 16px; background: #fff; padding: 1.8rem 1.6rem; }
.ccard .who { font-size: .87rem; color: var(--body); }
.ccard .who strong { display: block; font-family: "Cabinet Grotesk", sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.tel-xl {
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
  letter-spacing: -.03em; color: var(--ink); text-decoration: none; display: block;
}
.tel-xl:hover { color: var(--accent); }
.gdpr {
  margin-top: 1.2rem; padding: .85rem 1rem; border-radius: 10px;
  background: var(--accent-soft); border-left: 2px solid var(--accent);
  font-size: .84rem; color: var(--body);
}

/* footer */
.ftr { border-top: 1px solid var(--rule); color: var(--body); font-size: .86rem; }
.ftr a { color: var(--body); text-decoration: none; }
.ftr a:hover { color: var(--accent); }

/* subpage prose */
.doc h2 { font-family: "Cabinet Grotesk", sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; margin: 2rem 0 .6rem; color: var(--ink); }
.doc p { color: var(--body); }
.doc p + p { margin-top: .8rem; }
.doc ul { margin: .7rem 0 0 1.15rem; color: var(--body); }
.doc li + li { margin-top: .35rem; }
.doc .callout {
  margin-top: 1.8rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 1.1rem 1.3rem; background: #fff;
}

body.locked { overflow: hidden; }

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

@media print {
  .hdr, .skip { display: none !important; }
  .hero, .band-warm { background: #fff !important; }
}

/* ---------------------------------------------------------
   Layout layer.
   Talent ships a COMPILED Tailwind build containing only the
   classes its own demo used, so utilities like lg:col-span-3,
   sm:grid-cols-4 and md:text-7xl simply do not exist in it.
   Rather than bend the design to that subset, the handful of
   layouts this page needs are defined explicitly here.
   --------------------------------------------------------- */

.hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 3fr 2fr; } }

.facts-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .facts-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1023px) {
  .facts-grid .fact:nth-child(2) { border-right: 0; }
  .facts-grid .fact:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

.about-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 2fr; } }

.two-col { display: grid; gap: 1.75rem; }
@media (min-width: 640px) { .two-col { grid-template-columns: 1fr 1fr; } }

.contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.h-hero { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
.h-sec  { font-size: clamp(1.75rem, 4vw, 2.9rem); }
.tel-xl { font-size: clamp(1.7rem, 4.5vw, 2.5rem); }
.fact .v { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }

/* ------------------------------------------------------------------
   Utilities the purchased Talent build does not contain.
   The template ships a COMPILED Tailwind stylesheet, so it only holds
   the classes its own demo happened to use. Anything else in the markup
   fails silently. These are written out longhand so they cannot vanish.
   ------------------------------------------------------------------ */
.gap-6 { gap: 1.5rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mt-3  { margin-top: .75rem; }

/* The header's About / Conditions links are marked "hidden md:inline-flex".
   md:inline-flex is absent from the compiled build, so without this rule the
   links stay hidden at every screen width. custom.css is unlayered, so it
   outranks Tailwind's layered .hidden above the md breakpoint. */
@media (min-width: 768px) {
  .hlink.hidden { display: inline-flex; }
}

/* Links inside subpage prose need to look like links. */
.doc p a, .doc li a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.doc p a:hover, .doc li a:hover { text-decoration: none; }