@import url('../fonts/fonts.css');

/* =========================================================================
   C&C Barnard Biokineticists
   Design tokens lifted from the original Squarespace theme.
   ========================================================================= */

:root {
  /* Palette */
  --navy:        hsl(225, 78.57%, 10.98%);   /* headings, dark sections */
  --navy-soft:   hsl(225, 40%, 22%);
  --accent:      hsl(208.91, 80.12%, 66.47%);/* buttons, links */
  --accent-dark: hsl(208.91, 55%, 52%);
  --light:       hsl(228, 16.13%, 93.92%);   /* light-grey sections */
  --white:       #fff;

  --text:        var(--navy);
  --text-invert: var(--white);

  /* Type */
  --font-head: 'Source Serif 4', 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Pontano Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* The theme's fluid type: min((size - 1) * 1.2vw + 1rem, size * 1rem),
     with the root at 17px on desktop. So h1 tops out at 6rem = 102px, h2 at
     4rem = 68px, and so on — exactly what the original renders. */
  --h1: min(calc(6vw + 1rem), 6rem);      /* size 6   */
  --h2: min(calc(3.6vw + 1rem), 4rem);    /* size 4   */
  --h3: min(calc(2.16vw + 1rem), 2.8rem); /* size 2.8 */
  --h4: min(calc(.72vw + 1rem), 1.6rem);  /* size 1.6 */
  --lead: min(calc(.6vw + 1rem), 1.5rem); /* size 1.5 — the theme's "large" text */
  --meta: .856rem;                        /* eyebrow labels, footer nav */

  /* Layout
     Section rhythm is taken straight from the original theme, which sized
     everything in vmax and gave each section a viewport-relative min-height:
       medium  min-height 66vh, padding 6.6vmax
       small   min-height 33vh, padding 3.3vmax
       large   min-height 100vh (hero) */
  --page-max: 1400px;
  --list-max: 1563px;               /* the theme's "inset" list width */
  --intro-max: 1047px;              /* the theme's centred copy column */
  --gutter: clamp(1.5rem, 4vw, 4.5rem);
  --section-y: 6.6vmax;
  --section-y-sm: 3.3vmax;
  --section-min: 66vh;
  --section-min-sm: 33vh;
  --title-gap: 70px;                /* space under a list-section title */

  --header-h: 92px;
}

/* ---------- Reset / base ------------------------------------------------ */

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

/* The original set --base-font-size: 17px and dropped to 16px below 991px.
   Every rem in this stylesheet is measured against that. */
html { font-size: 17px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (max-width: 991px) { html { font-size: 16px; } }

/* On portrait phones the theme scaled headings off the viewport height
   instead of the width, so they stay large rather than collapsing. */
@media (max-width: 767px) and (orientation: portrait) {
  :root {
    --h1: calc(5 * .012 * min(100vh, 900px) + 1rem);
    --h2: calc(3 * .012 * min(100vh, 900px) + 1rem);
    --h3: calc(1.8 * .012 * min(100vh, 900px) + 1rem);
    --h4: calc(.6 * .012 * min(100vh, 900px) + 1rem);
    --lead: calc(.5 * .012 * min(100vh, 900px) + 1rem);
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* The theme tightened leading as headings grew — these are its ratios. */
h1 { font-size: var(--h1); line-height: 1.12; }
h2 { font-size: var(--h2); line-height: 1.232; }
h3 { font-size: var(--h3); line-height: 1.299; }
h4 { font-size: var(--h4); line-height: 1.366; }

/* Visual-size utilities. They let the heading *level* follow document
   structure while the *appearance* stays as the original had it. */
.t-h2 { font-size: var(--h2); line-height: 1.232; }
.t-h3 { font-size: var(--h3); line-height: 1.299; }
.t-h4 { font-size: var(--h4); line-height: 1.366; }
p.t-h4 { font-family: var(--font-head); font-weight: 400; }

p { margin: 0 0 1.2em; }

/* The theme's "large" body size, used for the hero and intro paragraphs. */
.lead { font-size: var(--lead); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

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

/* ---------- Layout helpers --------------------------------------------- */

/* Content column: caps at 1400px, never closer than one gutter to the edge —
   the same rule the original theme used (--maxPageWidth / --pagePadding). */
.wrap {
  width: min(var(--page-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* The services / team / testimonial lists ran wider than the copy column. */
.wrap--wide { width: min(var(--list-max), 100% - var(--gutter) * 2); }

/* Content is vertically centred inside the min-height, as in the original. */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--section-min);
  padding-block: var(--section-y);
}

.section--sm {
  min-height: var(--section-min-sm);
  padding-block: var(--section-y-sm);
}

/* List-style sections (the services / team / testimonial rows) are content-
   sized in the original — no min-height, and their own padding. */
.section--list { min-height: 0; }
.section--list-sm { min-height: 0; padding-block: var(--section-y-sm); }
.section--flush { min-height: 0; padding-block: 0; }

/* The short light band the original sits between the team row and the
   testimonials. */
.spacer { height: 71px; }

.section--navy  { background: var(--navy);  color: var(--text-invert); }
.section--light { background: var(--light); }

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--text-invert); }

.center { text-align: center; }

.measure { max-width: var(--intro-max); margin-inline: auto; }

/* Centred section titles sit --title-gap above whatever follows. */
.section-title { margin-bottom: var(--title-gap); }

.grid { display: grid; gap: clamp(2rem, 4vw, 4.5rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.stack-lg > * + * { margin-top: clamp(2.5rem, 4.6vmax, 5.8rem); }

/* ---------- Buttons ----------------------------------------------------- */

/* Sizes match the original: in-page buttons 17px/24px/40px (≈190×69),
   the header button a step smaller at 14.5px/20px/34px (≈169×60). */
.btn {
  display: inline-block;
  padding: 1.4rem 2.34rem;
  background: var(--accent);
  color: var(--white);
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.25;
  border: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.btn--sm {
  padding: 1.2rem 2rem;
  font-size: var(--meta);
  letter-spacing: .1em;
}
.btn:hover,
.btn:focus-visible { background: var(--accent-dark); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}
.btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* ---------- Header ------------------------------------------------------ */

/* The original header sits transparently over the hero and scrolls away
   with the page — it is not sticky. */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.site-header__inner {
  width: min(var(--page-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

.brand { display: block; flex: 0 0 auto; }
.brand img { width: clamp(140px, 14vw, 190px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.nav a {
  color: var(--white);
  text-decoration: none;
  font-size: .95rem;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, opacity .2s ease;
}
.nav a:hover { opacity: .75; }
.nav a[aria-current='page'] { border-bottom-color: currentColor; }

.site-header .btn { margin-left: auto; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--white);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    background: var(--navy);
    gap: 1.75rem;
    font-size: 1.4rem;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 60;
  }
  .nav[data-open='true'] { transform: none; }
  .nav a { font-size: 1.35rem; }
  .nav .btn { color: var(--white); }
  .site-header .btn { display: none; }
  .nav .btn--mobile { display: inline-block; margin: 0; }
}

@media (min-width: 881px) {
  .nav .btn--mobile { display: none; }
}

/* ---------- Hero -------------------------------------------------------- */

.hero {
  --scrim: .4;                       /* matches the theme's image-overlay opacity */
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100vh;                 /* section-height--large in the original */
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 7vh, 7rem);
  color: var(--white);
  background: var(--navy) center / cover no-repeat;
  isolation: isolate;
}

.hero--middle { align-items: center; }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsl(225 78% 11% / var(--scrim));
}

/* Plain navy hero (Team, Contact) — no image, so no scrim needed. */
.hero--plain::after { display: none; }

/* section-height--medium in the original */
.hero--medium { min-height: 66vh; min-height: 66svh; }

/* Team and Contact set their headline at the heading-2 step, not heading-1. */
.hero--compact h1 { font-size: var(--h2); }

.hero h1, .hero h2 { color: var(--white); margin-bottom: .35em; }
.hero p { font-size: var(--lead); max-width: 34ch; }

/* The original hero copy sat in a narrow layout-engine column, which is what
   made "Movement is medicine." break onto two lines. */
.hero__text { max-width: 580px; }

.hero--center { text-align: center; }
.hero--center .hero__text { max-width: 900px; margin-inline: auto; }
.hero--center p { margin-inline: auto; }

/* ---------- Media + text pairs ----------------------------------------- */

.media-text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.media-text h2 { margin-bottom: .95em; }
.media-text--top { align-items: start; }
.media-text__media img { width: 100%; }

/* The theme's fluid grid cropped this one to a near-square cell. */
.img-cover { aspect-ratio: 21 / 20; object-fit: cover; }

/* About page: staggered image / text rhythm */
.stagger { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.stagger__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.stagger__row--reverse .stagger__text { order: 2; }

/* ---------- Cards / icon trio ------------------------------------------ */

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); }

.icon-card { text-align: center; }

/* Icons sat in a 350×263 cell in the original, cropped to fill. */
.icon-card img {
  width: min(350px, 100%);
  aspect-ratio: 350 / 263;
  object-fit: cover;
  margin: 0 auto 38px;
}
.icon-card h3,
.icon-card h4 { font-size: var(--h4); margin-bottom: .8rem; }
.icon-card p { font-size: .95rem; }

/* ---------- Locations --------------------------------------------------- */

.locations { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.location__map {
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 0;
  background: var(--light);
  filter: saturate(.9);
}
.location p { margin-top: 1.25rem; font-size: .95rem; }

/* ---------- Team -------------------------------------------------------- */

.person {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.person__photo {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
}
.person__role {
  font-size: var(--meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.person__name { margin-bottom: 1.6rem; }

/* Team cards on the home page — 510px portraits in two 680px columns. */
.team-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: var(--page-max); margin-inline: auto; }
.team-preview figure { margin: 0; text-align: center; }
.team-preview img {
  width: min(510px, 100%);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 54px;
}
.team-preview figcaption { font-family: var(--font-head); font-size: var(--h4); }

/* ---------- Carousels (testimonials + gallery) -------------------------- */

.carousel { position: relative; }

/* No `scroll-behavior: smooth` here — combined with mandatory snapping Chrome
   cancels the programmatic scroll and springs straight back. The arrow buttons
   pass behavior:'smooth' to scrollTo() instead. */
.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide { flex: 0 0 100%; scroll-snap-align: start; }

.carousel__btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .2s ease;
  z-index: 2;
}
.carousel__btn:hover { background: var(--accent-dark); }
.carousel__btn--prev { left: clamp(.5rem, 2vw, 2rem); }
.carousel__btn--next { right: clamp(.5rem, 2vw, 2rem); }

/* Testimonials — the theme ran this list full-width with no section padding,
   so the breathing room lives on the slide itself. */
.quote {
  text-align: center;
  max-width: 1560px;
  margin-inline: auto;
  padding-block: 65px;
  padding-inline: clamp(3.5rem, 8vw, 8rem);
}
.quote blockquote { margin: 0; }
.quote q { font-family: var(--font-head); font-size: min(calc(1.44vw + 1rem), 2.2rem); line-height: 1.23; quotes: none; }
.quote cite { display: block; margin-top: 62px; font-style: normal; font-size: min(calc(.24vw + 1rem), 1.2rem); }

/* Full-bleed image gallery */
.gallery { background: var(--light); }
.gallery .carousel__track { gap: 2px; }
.gallery .carousel__slide { flex: 0 0 min(66vw, 900px); }
.gallery img { width: 100%; height: clamp(320px, 46vw, 520px); object-fit: cover; }
.gallery .carousel__btn { background: var(--white); color: var(--navy); border-radius: 0; }

/* ---------- Services list ---------------------------------------------- */

.rule { border: 0; border-top: 1px solid var(--accent); max-width: 360px; margin: var(--section-y) auto; }

.service-list { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
.service-list li { break-inside: avoid; font-size: .95rem; }

/* ---------- Testimonial card (Services) --------------------------------- */

.quote-card {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}
.quote-card__img { grid-column: 1 / span 6; grid-row: 1; }
.quote-card__img img { width: 100%; height: clamp(320px, 34vw, 440px); object-fit: cover; }
.quote-card__body {
  grid-column: 6 / span 7;
  grid-row: 1;
  background: var(--white);
  padding: clamp(2rem, 4vw, 4rem);
}
.quote-card__body q { font-family: var(--font-head); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; quotes: none; }
.quote-card__body cite { display: block; margin-top: 1.75rem; font-style: normal; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Contact form ------------------------------------------------ */

.form-panel { background: var(--navy); color: var(--text-invert); padding: clamp(2.5rem, 6vw, 5.5rem); }
.form-panel--plain { background: transparent; color: inherit; padding: 0; }

.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__group { display: grid; gap: .4rem; }
.form label { font-size: .9rem; }
.form .req { opacity: .65; font-size: .8rem; }

.form input,
.form textarea {
  font: inherit;
  font-size: .95rem;
  padding: .65rem .8rem;
  border: 1px solid var(--navy);
  background: #fafafa;
  color: var(--navy);
  width: 100%;
}
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus-visible,
.form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.form__note { font-size: .9rem; margin: 0; }
.form__note[hidden] { display: none; }

/* ---------- Footer ------------------------------------------------------ */

.site-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--section-min-sm);
  padding-block: var(--section-y-sm);
  font-size: 1rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.site-footer h2 { font-size: var(--lead); font-family: var(--font-body); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .75rem; }
.site-footer .footer-nav a { font-size: var(--meta); }
.site-footer a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--navy); }

.socials { display: flex; gap: 1.1rem; justify-content: flex-end; }
.socials a { color: var(--navy); text-decoration: none; }
.socials a:hover { color: var(--accent-dark); }
.socials svg { width: 20px; height: 20px; display: block; }

.legal { margin-top: 3rem; font-size: .8rem; opacity: .6; }

/* ---------- WhatsApp float --------------------------------------------- */

.wa-float {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 16px hsl(225 40% 15% / .28);
  z-index: 80;
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 32px; height: 32px; fill: #4fce5d; }

/* ---------- Scroll reveal ---------------------------------------------- */

/* Scoped to .js (set by an inline script in <head>) so that if main.js fails
   to load, every revealable element simply stays visible. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .carousel__track { scroll-behavior: auto; }
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1000px) {
  .locations { grid-template-columns: 1fr 1fr; }
  .locations__intro { grid-column: 1 / -1; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .socials { justify-content: flex-start; }
}

@media (max-width: 780px) {
  .grid--2, .grid--3,
  .media-text,
  .stagger__row,
  .trio,
  .team-preview,
  .person { grid-template-columns: 1fr; }

  .stagger__row--reverse .stagger__text { order: 0; }

  .person__photo { max-width: 220px; }

  .team-preview img { max-width: 320px; margin-inline: auto; }

  .service-list { columns: 1; }

  .locations { grid-template-columns: 1fr; }

  .quote-card { grid-template-columns: 1fr; }
  .quote-card__img, .quote-card__body { grid-column: 1 / -1; }
  .quote-card__img { grid-row: 1; }
  .quote-card__body { grid-row: 2; margin-inline: clamp(1rem, 5vw, 3rem); margin-top: -3rem; }

  .gallery .carousel__slide { flex: 0 0 88vw; }

  .form__row { grid-template-columns: 1fr; }

  .site-footer__inner { grid-template-columns: 1fr; }
}