/* ============================================================
   Wellness Path — built to the Figma DEV HANDOFF canvas
   Design canvas: 1440 x 5603
   Content inset: 202px  |  Nav & footer inset: 96px
   ============================================================ */

@font-face {
  font-family: "PP Fragment";
  src: url("assets/fonts/PPFragment-SerifLight.woff2") format("woff2"),
       url("assets/fonts/PPFragment-SerifLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Figma colour variables */
  --ivory: #F9F7F3;      /* page base */
  --cream: #F3F1EA;      /* bands */
  --sage: #D0CFB6;       /* SAGE */
  --terracotta: #A16E50; /* Terracotta */
  --brown: #473B36;      /* Dark Brown — headings + About/Contact labels */
  --lavender: #9F9DB4;   /* LAVENDER — button hover state */
  --ink: #45443E;        /* body copy */

  --serif: "PP Fragment", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Content insets.
     Below 1440 they stay proportional to the design (202/1440, 96/1440, 101/1440).
     At and above 1440 they resolve to "where a centred 1440 canvas would put it",
     which makes the content column land on its EXACT design width at any width
     (1440 - 2*202 = 1036, 1440 - 2*96 = 1248, 1440 - 2*101 = 1238) while the
     section's background still spans the full viewport. */
  --inset:       max(14.028%, calc((100% - 1440px) / 2 + 202px));
  --inset-edge:  max(6.667%,  calc((100% - 1440px) / 2 + 96px));
  --inset-wide:  max(7.014%,  calc((100% - 1440px) / 2 + 101px));
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, li, label { overflow-wrap: break-word; }

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

/* Full-bleed canvas: colour bands and images reach the viewport edges, while
   the --inset variables keep every content column at its design width. */
.canvas {
  width: 100%;
  background: var(--ivory);
  overflow: hidden;
}

/* ---------- Type scale (from Frame 301 spec sheet) ---------- */
h1 { font-family: var(--serif); font-weight: 300; font-size: 64px; line-height: 70px; letter-spacing: 0; color: var(--brown); }
h2 { font-family: var(--serif); font-weight: 300; font-size: 48px; line-height: 62px; letter-spacing: 0; }
h3 { font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 25px; letter-spacing: 0; color: var(--brown); }

/* H4 — uppercase section labels.
   Figma: "AREAS OF SUPPORT" is Terracotta; "MEET YOUR NATUROPATH" and
   "CONTACT" are Dark Brown. Default to brown, opt in to terracotta. */
.label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brown);
}
.areas .label { color: var(--terracotta); }
.lbl-narrow { display: none; }

/* BUTTON — Manrope Bold 14/19 +15% */
.btn-pill, .btn-outline, .btn-solid, .nav-left a, .nav-right > a, .book-menu a {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---------- Nav (TOP MENU 1440 x 113) ---------- */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--ivory);
  transition: box-shadow 0.25s ease;
}
/* The nav and the page are both ivory, so scrolled content ran straight into the
   wordmark with no separation. The Figma only shows the at-rest state, so this
   hairline appears ONLY once the page is scrolled. */
.topnav.scrolled { box-shadow: 0 1px 0 rgba(71, 59, 54, 0.12), 0 6px 18px rgba(71, 59, 54, 0.05); }
.topnav.nav-open.scrolled { box-shadow: none; }
.topnav-inner {
  height: 113px;
  padding: 0 var(--inset-edge);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-left { display: flex; gap: 46px; }
.nav-right { display: flex; gap: 46px; align-items: center; justify-content: flex-end; }
.nav-left a, .nav-right > a { color: var(--brown); text-decoration: none; }
.nav-left a:hover, .nav-right > a:hover { color: var(--terracotta); }

.wordmark { display: block; }
.wordmark img { width: 227px; height: 36px; }

.btn-pill {
  color: var(--terracotta);
  background: transparent;
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  width: 243px;
  height: 44px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-pill:hover { color: var(--lavender); border-color: var(--lavender); }

/* Book Consultation dropdown — Figma "Frame 299".
   718 x 146 band, bg #42352E, padding T64 R94 B63 L95, items in a
   HORIZONTAL row with an 80px gap (Face to Face first, then Online).
   It is positioned against .topnav (fixed), not the button, so its right
   edge sits where the design puts it: 96px past the nav content edge,
   i.e. flush with the 1440 canvas edge. */
.book-wrap { position: static; }
.book-menu {
  display: none;
  position: absolute;
  top: 113px;                                   /* nav height */
  right: max(0px, calc(var(--inset-edge) - 96px));
  width: 718px;
  height: 146px;
  background: #42352E;
  padding: 64px 94px 63px 95px;
}
.book-menu.open { display: flex; align-items: flex-start; gap: 80px; }
.book-menu a {
  display: block;
  padding: 0;
  color: var(--ivory);
  text-decoration: none;
  line-height: 19px;
  white-space: nowrap;
  transition: color 0.2s;
}
.book-menu a:hover { color: var(--terracotta); }

/* Button reads as hovered while its menu is open (matches the Figma state) */
.btn-pill[aria-expanded="true"] { color: var(--lavender); border-color: var(--lavender); }

.nav-toggle { display: none; }
.mobile-menu { display: none; }

/* ---------- Hero (722 | 718, height 696) ---------- */
.hero {
  margin-top: 113px;
  display: grid;
  grid-template-columns: 722fr 718fr;
  /* An explicit ROW is required: with an auto row the photo's height:100% is
     indefinite, so it falls back to its intrinsic ratio and overflows the
     section on any viewport wider than 1440. */
  grid-template-rows: 696px;
  height: 696px;
}
.hero-panel {
  background: url("assets/hero-panel.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-panel h1 { text-align: center; }
.hero-image { position: relative; overflow: hidden; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* symbol_over_image: 176x29 at left 1004, top 447 (canvas coords) */
.hero-symbol {
  position: absolute;
  left: 39.28%;   /* (1004-722)/718 */
  top: 47.99%;    /* (447-113)/696 */
  width: 176px;
  height: 29px;
}

/* ---------- Tagline (section 586 tall, text at +198) ---------- */
.tagline {
  padding: 198px var(--inset-edge) 215px;
  display: flex;
  justify-content: center;
}
.tagline h2 {
  color: var(--terracotta);
  text-align: center;
  max-width: 1120px;
}

/* ---------- Intro (text 506 @202 · image 605 @837) ---------- */
.intro {
  display: grid;
  grid-template-columns: 506fr 605fr;
  column-gap: 129px;             /* 837 - (202+506) */
  padding: 0 0 0 var(--inset);
  padding-right: 6.667%;         /* 1442-(837+605) ≈ 0 → keep image to edge */
  align-items: center;
  padding-right: 0;
}
/* Cap the copy at its design width so line length never grows on wide screens;
   the image column keeps expanding and stays flush to the right edge. */
.intro-text { max-width: 506px; }
.intro-text p { margin-bottom: 28px; }
.intro-text p:last-of-type { margin-bottom: 0; }
.intro-ctas { display: flex; flex-direction: column; gap: 24px; margin-top: 42px; }

/* Button: 362 x 38 */
.btn-outline {
  width: 362px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta);
  text-decoration: none;
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { color: var(--lavender); border-color: var(--lavender); }
.intro-image img { width: 100%; height: auto; }

/* ---------- Banner (1440 x 550) ---------- */
.banner {
  height: 550px;
  background: url("assets/banner.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--inset-edge);
}
.banner h2 { color: #FFFFFF; text-align: center; }

/* ---------- Values (1238 wide, gap 132, image 600) ---------- */
.values {
  display: grid;
  grid-template-columns: 600fr 506fr;
  column-gap: 132px;
  align-items: center;
  padding: 0 var(--inset-wide);   /* design gutter 101px -> content 1238 */
  height: 616px;
}
.values-image img { width: 100%; height: 616px; object-fit: cover; }
.value { margin-bottom: 32px; }
.value:last-child { margin-bottom: 0; }
.value h3 { margin-bottom: 0; }

/* ---------- Areas of support (cream band, 507 tall) ---------- */
.areas {
  background: var(--cream);
  padding: 82px var(--inset);
  min-height: 507px;
}
.areas-inner { max-width: 773px; }
.areas .label { margin-bottom: 67px; }
.areas-cols {
  display: grid;
  grid-template-columns: 202px 1fr;
  column-gap: 223px;
}
.areas-cols ul { list-style: none; }
.areas-cols li {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--terracotta);
  white-space: nowrap;
}

/* ---------- About (sage band, 763 tall) ---------- */
.about {
  background: var(--sage);
  padding: 82px 0;
  margin-top: -56px;      /* sage starts at 3618, cream band ends 3674 */
  padding-top: 138px;
}
.about-inner {
  display: grid;
  grid-template-columns: 514fr 506fr;
  column-gap: 122px;       /* 838 - (202+514) */
  padding-left: var(--inset);
  padding-right: var(--inset-edge);
  align-items: start;
}
.about-text p { margin-bottom: 28px; }
.about-text .label { margin-bottom: 49px; }
.about-text .sign { margin-top: 49px; margin-bottom: 0; }
.about-image img { width: 100%; height: auto; }

/* ---------- Contact (1036 @202, padding 82) ---------- */
.contact { padding: 82px var(--inset); }
.contact .label { margin-bottom: 82px; }
.row { display: grid; gap: 60px; margin-bottom: 44px; }
.row.two { grid-template-columns: 1fr 1fr; }
form label { display: block; font-size: 18px; line-height: 28px; color: var(--ink); }
input, textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(71, 43, 38, 0.3);
  background: transparent;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 28px;
  color: var(--brown);
  padding: 10px 2px;
  outline: none;
  resize: vertical;
}
textarea { border: 1px solid rgba(71, 43, 38, 0.3); margin-top: 12px; padding: 14px; }
input:focus, textarea:focus { border-color: var(--terracotta); }
input::placeholder, textarea::placeholder { color: transparent; }

.btn-solid {
  color: var(--ivory);
  background: var(--terracotta);
  border: none;
  border-radius: 999px;
  height: 38px;
  padding: 0 40px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-solid:hover { background: var(--lavender); }
.btn-solid:disabled { opacity: 0.6; cursor: default; }
.form-status { margin-top: 20px; font-size: 16px; min-height: 22px; }
.form-status.ok { color: #4d6b3c; }
.form-status.err { color: #a03a2e; }
.form-status a { color: inherit; text-decoration: underline; }

/* ---------- Footer (image band 393 + bar 64) ---------- */
.footer { position: relative; }
/* The band and everything in it is sized as a % of the 1440 canvas so the
   composition scales exactly like the design instead of crop-shifting. */
.footer-inner {
  position: relative;
  aspect-ratio: 1440 / 393;
  padding: 7.083% var(--inset-edge) 0;   /* 102/1440 */
  overflow: hidden;
}
.footer-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  /* footer.jpg is the exact 1440x393 Figma crop, so 100% 100% is undistorted.
     The node's 40% opacity is ALREADY baked into the export (flattened on
     PNG->JPEG). Do NOT re-apply opacity here — that double-dims it and was
     why the live page read much lighter than the Figma. */
  background: url("assets/footer.jpg") center top / 100% 100% no-repeat;
  z-index: 0;
}
.footer-logo, .ig, .footer-symbol { position: relative; z-index: 1; }
/* % resolves against the padded content box (1440 - 2*96 = 1248), so 667/1248 */
.footer-logo { width: 53.446%; height: auto; }
.ig {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 1.736%;            /* 25/1440 */
  color: var(--brown);
  text-decoration: none;
  font-size: 18px;
  line-height: 28px;
}
.ig:hover { color: var(--terracotta); }
/* Right-aligned to the content edge so it tracks "Design by Serif" at any width
   (at 1440 this lands within 4px of the design's left:1248). */
.footer-symbol {
  position: absolute;
  right: var(--inset-edge);
  top: 81.934%;      /* 322 / 393 — top resolves against band height */
  width: 6.389%;     /* 92 / 1440 */
  max-width: 92px;
  height: auto;
}

/* Past the design canvas, hold the band at its design height and let the image
   cover, instead of letting aspect-ratio grow it into a huge strip. */
@media (min-width: 1441px) {
  .footer-inner { aspect-ratio: auto; height: 393px; padding-top: 102px; }
  .footer-inner::before { background-size: cover; }
  .footer-logo { width: 667px; }
  .footer-symbol { top: 322px; }
}
.footer-bar { background: var(--cream); height: 64px; display: flex; align-items: center; }
.footer-bar-inner a { color: inherit; text-decoration: underline; }
.footer-bar-inner a:hover { color: var(--terracotta); }
.footer-bar-inner {
  width: 100%;
  padding: 0 var(--inset-edge);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
  .areas-cols { column-gap: 80px; grid-template-columns: 1fr 1fr; }
  .areas-cols li { white-space: normal; }
  .areas-inner { max-width: none; }
  .tagline { padding: 120px var(--inset-edge) 130px; }
  .hero { height: 560px; grid-template-rows: 560px; }
  .values { height: auto; padding-top: 80px; padding-bottom: 80px; }
  .values-image img { height: 480px; }
}

@media (max-width: 900px) {
  /* Mobile type scale, read off "HOME Mobile":
     hero headline = H2 48/62 · tagline + banner = H3 36/43 (-1%) · body = B1 18/28 */
  body { font-size: 18px; line-height: 28px; }
  h1 { font-size: 48px; line-height: 62px; }
  h2 { font-size: 36px; line-height: 43px; letter-spacing: -0.01em; }

  /* Mobile nav: wordmark CENTRED, hamburger hard right */
  /* Figma mobile nav is bottom-weighted: logo ink sits at y 71-97 in the 115 band */
  .topnav-inner {
    height: 115px;
    padding: 0 16px 18px;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    position: relative;
    z-index: 2;
  }
  .wordmark { grid-column: 2; justify-self: center; }
  .nav-toggle { grid-column: 3; }
  .wordmark img { width: 180px; height: auto; }
  /* The desktop nav items and the Book dropdown do not exist on mobile —
     the design replaces them with a full-screen overlay (Figma "Menu Mobile"). */
  .nav-left, .nav-right { display: none !important; }
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--brown);
    cursor: pointer;
    justify-self: end;
  }

  /* ---- Figma "Menu Mobile": 375 x 823, bg Dark Brown ----
     logo+X 60-87 · CONTACT 272 · buttons 243x64 at 331 and 439 (gap 44)
     · copyright at 787 */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--brown);
    flex-direction: column;
    align-items: center;
    padding: 272px 16px 0;
  }
  .topnav.nav-open { background: transparent; }
  .topnav.nav-open .mobile-menu { display: flex; }
  /* cream wordmark + close icon over the dark overlay */
  .topnav.nav-open .wordmark img { filter: brightness(0) invert(1); opacity: 0.95; }
  .topnav.nav-open .nav-toggle { color: var(--ivory); }

  .mm-contact {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ivory);
    text-decoration: none;
  }
  .mm-btn {
    width: 243px;
    height: 64px;
    margin-top: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ivory);
    text-decoration: none;
    border: 1px solid var(--ivory);
    border-radius: 32px;
    transition: background 0.2s, color 0.2s;
  }
  .mm-btn + .mm-btn { margin-top: 44px; }
  .mm-btn:hover { background: var(--ivory); color: var(--brown); }
  .mm-copy {
    position: absolute;
    bottom: 25px;
    left: 0; right: 0;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--ivory);
  }

  /* Figma "HOME Mobile" (375 x 6078): nav 115, hero panel 248, photo 248 */
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; margin-top: 115px; }
  .hero-panel { height: 248px; }
  .hero-image { height: 248px; }
  .hero-symbol { width: 130px; height: auto; }

  /* Tagline sits on its own CREAM band in the mobile design */
  .tagline { padding: 72px 16px; background: var(--cream); }
  .tagline h2 { max-width: 312px; }   /* Figma mobile tagline block is 312 wide */
  .dbr { display: none; }

  .intro, .values, .about-inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
    padding: 0 16px;
  }
  /* Mobile stacking order differs from desktop in all three split sections:
     intro = IMAGE then text · values = TEXT then image · about = PORTRAIT then text */
  /* Figma mobile: last button ends y1970, banner starts y2014 -> 44px gap.
     Without this the Book Face to Face button sits flush on the banner. */
  .intro { padding: 0 0 44px; }
  .intro-image { order: -1; }
  .intro-text { padding: 0 16px; max-width: none; }
  .values { padding: 72px 0; }
  .values-list { padding: 0 16px; }
  .values-image { order: 1; }
  .values-image img { height: 300px; }
  /* Figma mobile: band 1058 tall = 39 pad + 403 portrait + 52 gap + text + 48 pad.
     The About copy is overridden to 16px / auto (~22px) on mobile — tighter than B1. */
  .about { padding: 39px 0 48px; margin-top: 0; }
  .about-inner { row-gap: 52px; }
  .about-image { order: -1; }
  .about-text p { font-size: 16px; line-height: 22px; margin-bottom: 22px; }
  .about-text .label { margin-bottom: 30px; }
  .about-text .sign { margin-top: 30px; }
  .btn-outline { width: 100%; max-width: none; height: 44px; }

  .banner { height: 380px; padding: 0 16px; }
  .areas { padding: 72px 16px; min-height: 0; }
  .areas .label { margin-bottom: 32px; }
  .areas-cols { grid-template-columns: 1fr; column-gap: 0; }
  /* Figma mobile contact band = 603: pad 40, heading, 4 fields @44 + 19 gaps,
     message box 136, submit 38, pad 48 */
  .contact { padding: 40px 16px 48px; }
  .contact .label { margin-bottom: 38px; }
  .lbl-wide { display: none; }
  .lbl-narrow { display: inline; }
  .row { gap: 19px; margin-bottom: 19px; }
  .row.two { grid-template-columns: 1fr; }

  /* Mobile form fields are BOXED: ivory fill, 1px sage border */
  input, textarea {
    background: var(--ivory);
    border: 1px solid var(--sage);
    padding: 12px 14px;
  }
  input { height: 44px; }
  textarea { margin-top: 0; height: 136px; min-height: 136px; }
  /* Mobile uses placeholder-in-box; the label stays for screen readers */
  .fl {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  input::placeholder, textarea::placeholder { color: var(--ink); opacity: 1; }
  .btn-solid { padding: 0 32px; }

  /* Mobile keeps the swoosh, moved to the bottom-left of the band */
  .footer-symbol { display: block; left: 16px; right: auto; top: auto; bottom: 24px; width: 92px; }
  .footer-inner { aspect-ratio: auto; min-height: 393px; padding: 56px 16px 80px; }
  .footer-inner::before { background-size: cover; }
  .footer-logo { width: 100%; }
  .footer-bar-inner { padding: 0 24px; font-size: 11px; }
  .ig { font-size: 16px; margin-top: 18px; }
}