/* ==========================================================================
   One & Different — stylesheet
   Rebuilt from the saved Divi page. Breakpoints match the original:
   desktop ≥ 981px, tablet 768–980px, phone ≤ 767px.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Same families the original page loads from Google Fonts, served locally. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("../fonts/PTSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("../fonts/PTSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("../fonts/PTSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("../fonts/PTSerif-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #faf9f7;
  --ink: #1a1a1a;
  --white: #ffffff;
  --off-white: #faf9f7;
  --accent: #fe2953;
  /* A darker relative of the accent: the accent itself is 3.5:1 on the cream
     ground, which is too low for the words an error message is made of. */
  --error: #c3123a;
  --slate: #4a6e80;
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "PT Serif", Georgia, "Times New Roman", serif;
  --font-nav: "Inter", Helvetica, Arial, Lucida, sans-serif;
  --header-h: 80px;
  --header-h-fixed: 54px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* The `hidden` attribute is set by the browser at a specificity any class
   rule beats, so a class that sets `display` silently un-hides the element.
   This keeps `hidden` meaning hidden. */
[hidden] { display: none !important; }

/* Slate, not the brand red: the red measures 3.5:1 on this ground, which is
   below the minimum for text, and it is the wrong temperature for the page. */
a { color: var(--slate); }

h1, h2 {
  margin: 0;
  padding: 0 0 10px;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.5em;
  color: var(--ink);
}

p {
  margin: 0;
  padding: 0 0 1em;
}

strong { font-weight: 700; }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure { margin: 0; }

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

/* For names a line break would otherwise split across two lines. */
.nowrap { white-space: nowrap; }

/* ---------- Focus ---------- */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The slate outline disappears on the dark sections. */
.hero :where(a, button):focus-visible,
.brand :where(a, button):focus-visible,
.explore :where(a, button):focus-visible {
  outline-color: var(--off-white);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  z-index: 100000;
  padding: 10px 14px;
  background: var(--off-white);
  color: var(--ink);
  border-radius: 2px;
  font-family: var(--font-nav);
  font-size: 15px;
}

.container {
  width: 80%;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 99999;
  background-color: rgba(250, 249, 247, 0);
  font-family: var(--font-nav);
  font-weight: 500;
  line-height: 23px;
  transition: background-color 0.4s, box-shadow 0.4s, height 0.4s ease-in-out;
}

.site-header__inner { height: 100%; }

/* No left padding: the nav sits flush against the container's right edge, so
   anything here would leave the logo 5px shy of matching it on the left. */
.site-logo {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.site-logo img {
  display: block;
  width: auto;
  max-height: 66%;
  transition: all 0.4s ease-in-out;
}

.site-nav {
  float: right;
  padding-top: 33px;
  font-weight: 600;
  transition: all 0.4s ease-in-out;
}

.site-nav__list {
  display: flex;
  line-height: 0;
}

.site-nav__list li {
  padding-right: 26px;
  line-height: 1em;
}

.site-nav__list li:last-child { padding-right: 0; }

.site-nav__list a {
  display: block;
  position: relative;
  padding-bottom: 33px;
  font-size: 18px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color 300ms ease, padding 0.4s ease-in-out;
}

/* A rule that grows from the left, rather than the whole label dimming.
   Pinned to the top edge so it holds still when the header shrinks. */
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.site-nav__list a:hover::after { transform: scaleX(1); }

/* The page you are on keeps the rule drawn, which is the same cue hover gives
   rather than a second visual language for "you are here". */
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }

/* Book a Session is an action, not a destination, so it keeps its rule at
   all times while the other two draw one only on hover.

   It takes the slate only once the header has its cream background. Over the
   hero photograph the slate measures 1.2:1 against the sky, against 2.6:1
   for the ink, so colouring it there would make it markedly harder to read.
   See the note on the header in general. */
.site-nav__list a.site-nav__cta::after { transform: scaleX(1); }
.site-header.is-scrolled .site-nav__list a.site-nav__cta { color: var(--slate); }

/* Scrolled (fixed) state on desktop */
.site-header.is-scrolled {
  height: var(--header-h-fixed);
  background-color: var(--bg);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

.site-header.is-scrolled .site-nav { padding-top: 20px; }
.site-header.is-scrolled .site-nav__list a { padding-bottom: 20px; }

/* Mobile navigation (hidden on desktop) */
.mobile-nav {
  display: none;
  float: right;
  padding-top: 24px;
}

/* White reads against the hero photograph, which is what sits behind the
   header at the top of the page. Once the header takes its cream background,
   or the cream menu panel opens behind it, white would be invisible, so both
   states switch the icon to ink. */
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  line-height: 0;
  transition: color 300ms ease;
}

.site-header.is-scrolled .mobile-nav__toggle,
.mobile-nav__toggle[aria-expanded="true"] { color: var(--ink); }

/* With the menu open the header takes the same cream as the panel, so the
   two read as one surface instead of a strip of photograph above it. Older
   browsers without :has() simply keep the transparent header. */
.site-header:has(.mobile-nav__toggle[aria-expanded="true"]) {
  background-color: var(--off-white);
  box-shadow: none;
}

.mobile-nav__toggle svg {
  display: block;
  width: 30px;
  height: 30px;
  fill: currentColor;
  stroke: currentColor;
}

.mobile-nav__toggle .icon-close { display: none; }
.mobile-nav__toggle[aria-expanded="true"] .icon-menu { display: none; }
.mobile-nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* A full panel in the page's own cream rather than a floating white card,
   with the links set in the display face the rest of the site speaks in.
   Toggling stays on `display`, which is what the script drives. */
.mobile-menu {
  display: none;
  position: fixed;
  left: 0;
  top: var(--header-h);
  width: 100%;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  padding: 7vh 30px calc(28px + env(safe-area-inset-bottom));
  background-color: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 9999;
}

.mobile-menu.is-open {
  display: flex;
  flex-direction: column;
}

.mobile-menu__list { flex: 1 1 auto; }

.mobile-menu__list li + li { margin-top: 6px; }

/* Same face as the desktop nav, set larger for touch. */
.mobile-menu__list a {
  display: block;
  padding: 14px 0;
  font-family: var(--font-nav);
  font-size: clamp(20px, 5.5vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color 250ms ease;
}

.mobile-menu__list a:hover,
.mobile-menu__list a:active,
.mobile-menu__list a[aria-current="page"] { color: var(--slate); }

/* Book a Session is the action of the three. */
.mobile-menu__list .mobile-menu__cta {
  margin-top: 10px;
  padding-top: 26px;
  border-top: 1px solid rgba(74, 110, 128, 0.18);
  color: var(--slate);
}

.mobile-menu__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 32px;
  padding: 13px 0; /* keeps the tap target at 44px */
  font-family: var(--font-nav);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--slate);
  text-decoration: none;
  transition: color 250ms ease;
}

.mobile-menu__social:hover { color: var(--ink); }

.mobile-menu__social svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

/* The panel and its items settle in rather than snapping open. */
.mobile-menu.is-open .mobile-menu__list li,
.mobile-menu.is-open .mobile-menu__social {
  animation: menu-item-in 420ms ease-out both;
}

.mobile-menu.is-open .mobile-menu__list li:nth-child(2) { animation-delay: 60ms; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(3) { animation-delay: 120ms; }
.mobile-menu.is-open .mobile-menu__social { animation-delay: 180ms; }

@keyframes menu-item-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu.is-open .mobile-menu__list li,
  .mobile-menu.is-open .mobile-menu__social { animation: none; }
}

/* ---------- Layout primitives ---------- */
.section {
  position: relative;
  padding: 4% 0;
  background-color: var(--bg);
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.row {
  position: relative;
  width: 80%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 2% 0;
}

.row::after {
  content: "";
  display: block;
  clear: both;
}

.col {
  float: left;
  position: relative;
  min-height: 1px;
  margin-right: 5.5%;
}

.col--last { margin-right: 0; }
.col--full { width: 100%; }
.col--half { width: 47.25%; }
.col--three-fifths { width: 57.8%; }
.col--two-fifths { width: 36.7%; }

/* The three rows that set a picture beside a block of text. The original
   placed the text with a hand-measured top margin — 186px in the intro,
   264px in about, 20px in coaching — which only lined up at the width those
   numbers were measured at: the pictures are sized by the column, so every
   other width slid the text off the picture's centre line. Flex states the
   intent instead, and holds it from 981px up to the 1600px cap.

   The columns keep their floats for the stack below 981px, where the row
   goes back to `display: block` and each column runs full width. */
@media only screen and (min-width: 981px) {
  .intro__row,
  .about__row,
  .coaching__row {
    display: flex;
    align-items: center;
  }

  /* Otherwise the float clearfix joins the row as a third flex item. */
  .intro__row::after,
  .about__row::after,
  .coaching__row::after { content: none; }
}

.text { word-wrap: break-word; }
.text p:last-of-type { padding-bottom: 0; }

.image { line-height: 0; }
.image img {
  display: inline-block;
  max-width: 100%;
}

/* Anchor offset for the fixed header */
[id] { scroll-margin-top: var(--header-h-fixed); }

/* Fade-in on scroll, matching the original Divi "fade" animation.
   Divi applied `animation: et_pb_fade` with a 0% starting opacity, a 1000ms
   duration, a 150ms delay and an ease-in-out curve, fired by a waypoint at
   `offset: 100%` (the section's top edge reaching the bottom of the
   viewport) and run once. A transition on the same numbers reproduces that
   exactly, and needs no keyframes.

   The one departure from the original: sections are visible by default and
   the script adds `js-anim` to opt in, so the page still reads if the
   script fails to load or is blocked. */
.reveal { opacity: 1; }

.js-anim .reveal {
  opacity: 0;
  transition: opacity 1000ms ease-in-out 150ms;
}

/* The brand section ran slightly slower and later than the rest. */
.js-anim .reveal--slow { transition: opacity 1150ms ease-in-out 250ms; }

.js-anim .reveal.is-visible { opacity: 1; }

/* The original faded at every width, so the fades stay on mobile. Anyone who
   has asked their system for less motion still gets none. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 444.3px;
  padding: 140px 0 207px;
  background-color: #fff;
  /* Scrim, as in the explore section. The headline measured 2.33:1 against
     the brightest part of this sky, under the 3:1 large text needs; the
     photograph carries the contrast rather than the type going grey. */
  background-image:
    linear-gradient(rgba(40, 36, 50, 0.20), rgba(40, 36, 50, 0.20)),
    url("../images/bg-ocean.webp");
  background-position: center bottom 13%;
}

.hero__row {
  width: 92.6%;
  min-height: 80.9px;
}

/* The hero line is the page's only h1. padding-bottom is pinned to 0 so the
   heading keeps the box the previous div-plus-paragraph produced. */
.hero__text {
  padding: 53px 0 0;
  min-height: 69px;
  font-family: var(--font-heading);
  font-size: 75px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4em;
  text-align: center;
  color: var(--off-white);
}

/* ---------- Intro ---------- */
.intro {
  margin: 0 115px;
  padding-bottom: 10px;
}

.intro__row {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.intro__image { text-align: center; }
.intro__image img {
  max-height: 768px;
  width: auto;
}

.intro__heading {
  margin-bottom: 25px;
}

/* 50px on a single line of greeting; the opening now carries the whole
   proposition, so it runs to four lines and needs leading to match. Set
   solid at 50/50 it read as a slab rather than a welcome. */
.intro__heading h2 {
  font-style: italic;
  font-size: 44px;
  line-height: 1.24em;
  text-wrap: pretty;
}

.intro__copy {
  font-size: 22px;
  line-height: 1.9em;
}

/* Keeps "out." and its like from ending a paragraph alone on a line. */
.intro__copy p { text-wrap: pretty; }

/* ---------- About ---------- */
.about {
  margin: 0 115px;
  padding-bottom: 160px;
}

.about__row {
  width: 90%;
  max-width: 1350px;
}

/* Full column width, like the copy beneath it. At 88.6% the block was
   456px inside a 515px column, and "and a deeply curious student of life."
   needs 484px at 35px — so the last word dropped to a line of its own. */
.about__heading {
  max-width: 560px;
  margin-bottom: 25px;
}

.about__heading h2 {
  font-style: italic;
  font-size: 60px;
  line-height: 50px;
}

/* Was an h1. Now a paragraph, so the typography the global heading rule used
   to supply is restated here. Element-qualified to outrank
   `.text p:last-of-type`, which would otherwise drop the bottom padding. */
.about__heading p.about__role {
  margin: 0;
  padding: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 35px;
  font-weight: 400;
  line-height: 1.5em;
  color: var(--ink);
}

.about__copy {
  font-size: 22px;
  line-height: 1.9em;
}

.about__image { text-align: center; }
.about__image img {
  max-height: 870px;
  width: auto;
}

/* ---------- Where we begin ---------- */
.explore {
  padding-left: 40px;
  padding-right: 40px;
  /* Scrim so the white copy clears AA against the photograph. The
     white-on-photograph treatment is deliberate, so the overlay carries the
     contrast rather than a darker text colour. */
  background-image:
    linear-gradient(rgba(40, 36, 50, 0.60), rgba(40, 36, 50, 0.60)),
    url("../images/sky.webp");
}

.explore__row {
  width: 90%;
  max-width: 1206px;
}

.explore__heading {
  margin: 0 290px;
}

.explore__heading h2 {
  font-style: italic;
  font-size: 40px;
  color: var(--white);
  text-align: center;
}

.explore__copy {
  font-size: 22px;
  line-height: 1.9em;
  color: var(--white);
}

.explore__copy p { text-align: center; }

/* ---------- Book a session ---------- */
.book {
  margin: 90px 0;
}

.book__row { width: 100%; }

.book__text {
  padding-top: 58px; /* the original carries an empty leading paragraph on desktop */
  font-size: 22px;
  line-height: 1.9em;
  color: var(--slate);
}

.book__text h2 {
  font-weight: 700;
  font-size: 46px;
  color: var(--slate);
  text-align: center;
}

.book__text p { text-align: center; }

/* ---------- Enquiry form ---------- */
/* Held to a readable measure; without it this single line runs the full
   width of the section on a wide screen. */
.book__prompt {
  max-width: 37rem;
  margin: 6px auto 0;
}

/* The form sits on a quiet panel so its left-aligned fields have a home of
   their own inside an otherwise centred, airy section. */
.enquiry {
  max-width: 40rem;
  margin: 40px auto 0;
  /* Padding scales with the viewport instead of stepping at a breakpoint, so
     narrow phones keep their width for typing. */
  padding: clamp(22px, 4.5vw, 44px);
  text-align: left;
  background: var(--white);
  border: 1px solid rgba(74, 110, 128, 0.16);
  border-radius: 4px;
}

.enquiry fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Separated by space rather than a rule: a border on a fieldset renders
   inconsistently around its legend. */
.enquiry fieldset + fieldset { margin-top: 42px; }

.enquiry legend {
  padding: 0 0 22px;
  font-family: var(--font-heading);
  font-size: 30px;
  font-style: italic;
  line-height: 1.25;
  color: var(--slate);
}

/* ---- The form, behind one control ---- */
/* Closed, the section is a heading, an invitation and a single button, so the
   page reads through to "What is Coaching?" without a form in the way. */
.enquiry-panel {
  margin-top: 34px;
  text-align: center;
}

.enquiry-panel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;          /* a comfortable tap target on a phone */
  padding: 14px 28px;
  border-radius: 3px;
  background: var(--slate);
  color: var(--off-white);
  font-family: var(--font-nav);
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;                 /* Firefox */
  /* colour only: transitioning padding would relayout the section on open. */
  transition: background-color 250ms ease, color 250ms ease;
}

.enquiry-panel__toggle::-webkit-details-marker { display: none; }  /* Safari */

.enquiry-panel__toggle:hover { background: var(--ink); }

.enquiry-panel__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 250ms ease;
}

/* Open, the button stands down to a quiet control: the only button left on
   screen is then the one that actually sends, and "Before we meet" is free to
   read as the first heading inside the panel. */
.enquiry-panel[open] .enquiry-panel__toggle {
  min-height: 0;
  padding: 0 0 2px;
  background: transparent;
  color: var(--slate);
  font-size: 14px;
}

.enquiry-panel[open] .enquiry-panel__toggle:hover {
  background: transparent;
  color: var(--ink);
}

.enquiry-panel[open] .enquiry-panel__toggle::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.enquiry-panel__body { text-align: left; }

.enquiry__field { margin-bottom: 24px; }
.enquiry__field:last-child { margin-bottom: 0; }

/* Short fields share a row once there is room for two, and fall to one
   column on their own when there is not. No breakpoint needed. */
.enquiry__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  column-gap: 22px;
}

.enquiry__pair .enquiry__field:last-child { margin-bottom: 24px; }

/* Questions are numbered in the display face, so the set reads as a short
   sequence rather than a stack of form rows. */
.enquiry__questions { counter-reset: enquiry-question; }

.enquiry__questions .enquiry__field > label {
  counter-increment: enquiry-question;
  display: flex;
  align-items: baseline;
  gap: 11px;
}

.enquiry__questions .enquiry__field > label::before {
  content: counter(enquiry-question) ".";
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 20px;
  font-style: italic;
  line-height: 1.45;
  color: var(--slate);
}

.enquiry label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-nav);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}

/* The four questions are set like the note at the foot of the form: PT Serif
   at 15px in the slate, so the words Bhanu-nandini is actually asking read as
   her prose rather than as form furniture. 5.5:1 on the white panel. */
.enquiry__questions .enquiry__field > label {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--slate);
}

.enquiry input,
.enquiry textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px; /* 16px keeps iOS from zooming when a field is focused */
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid rgba(74, 110, 128, 0.35);
  border-radius: 3px;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.enquiry input:hover,
.enquiry textarea:hover { border-color: rgba(74, 110, 128, 0.6); }

.enquiry input:focus,
.enquiry textarea:focus {
  background: var(--white);
  border-color: var(--slate);
}

.enquiry textarea {
  resize: vertical;
  min-height: 92px;
}

.enquiry__hint,
.enquiry__error {
  display: block;
  margin-top: 5px;
  font-family: var(--font-nav);
  font-size: 13px;
  line-height: 1.5;
}

.enquiry__hint { color: var(--slate); }

/* Errors are words next to the field, not a red outline alone. */
.enquiry__error { color: var(--error); }
.enquiry [aria-invalid="true"] { border-color: var(--error); }

.enquiry__trap {
  position: absolute;
  left: -9999px;
}

.enquiry__timing,
.thankyou__note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
}

.enquiry__timing {
  margin: 30px 0 18px;
  padding-top: 26px;
  border-top: 1px solid rgba(74, 110, 128, 0.14);
}

.enquiry__routes { display: flex; }

.enquiry__routes .btn { flex: 1 1 15rem; }

/* The booking step on thank-you.html: the next thing to do, so it gets
   room above and below rather than sitting in the run of the prose. */
.thankyou__book-wrap { margin: 32px 0 14px; }

.thankyou__note {
  font-family: var(--font-nav);
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  font-family: var(--font-nav);
  /* Never italic, whatever it is sitting inside: the confirmation panel is
     set in the heading face and would otherwise lend the button its slant. */
  font-style: normal;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.btn--primary {
  background: var(--slate);
  color: var(--off-white);
}

.btn--primary:hover { background: var(--ink); }

.btn--secondary {
  background: transparent;
  border-color: var(--slate);
  color: var(--slate);
}

.btn--secondary:hover {
  background: var(--slate);
  color: var(--off-white);
}

/* While the answers are in flight. The button steps back rather than
   vanishing, so the choice someone just made is still legible, and the
   cursor says the page is working rather than broken. */
.btn:disabled {
  cursor: progress;
  opacity: 0.55;
}

.btn.is-sending {
  opacity: 1;
  animation: btn-sending 1400ms ease-in-out infinite;
}

@keyframes btn-sending {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Anyone who has asked their system for less motion gets the same
   information as a steady state instead. */
@media (prefers-reduced-motion: reduce) {
  .btn.is-sending { animation: none; opacity: 0.8; }
}

.enquiry__done {
  /* It was a <p> and inherited this from the section; as a <div> holding
     the thank-you, the button and the note, it has to say so itself. */
  text-align: center;
  max-width: 40rem;
  margin: 40px auto 0;
  padding: clamp(20px, 4vw, 28px);
  background: var(--white);
  border: 1px solid rgba(74, 110, 128, 0.16);
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-style: italic;
  line-height: 1.45;
  color: var(--slate);
}

.enquiry__done:focus { outline: none; }

/* The form reads left-aligned inside an otherwise centred section. */
.book__text .enquiry p,
.book__text .enquiry label,
.book__text .enquiry legend { text-align: left; }

/* ---------- What is coaching ---------- */
.coaching {
  padding-right: 40px;
  margin-bottom: 128px;
}

.coaching__row {
  width: 100%;
  max-width: 1800px;
  margin-left: 0;
}

.coaching__image { text-align: left; }
.coaching__image img {
  max-height: 959px;
  width: auto;
}

.coaching__heading {
  max-width: 500px;
  margin-bottom: 4px;
}

.coaching__heading h2 {
  font-style: italic;
  font-size: 50px;
  line-height: 50px;
}

.coaching__copy {
  max-width: 500px;
  font-size: 22px;
  line-height: 1.9em;
}

/* ---------- Blog ---------- */
/* A second page, so it needs the header's height as padding: index.html only
   gets away without it because its hero runs under the fixed header. */
.page {
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 96px;
}

.page__inner {
  width: 90%;
  max-width: 60rem;
  margin: 0 auto;
}

/* An entry gives its photographs and video the full width, but holds the
   writing to a readable line. Prose set to 60rem at this size would run past
   90 characters a line, which is where the eye starts losing its place. */
/* An entry is ONE column: the writing, the photographs and the way back all
   share a measure, so they share both edges. They used to disagree — prose
   held to 46rem and centred inside a 60rem column while the photographs ran
   the full 60rem — which left the text indented 112px from the pictures
   above and below it, and nothing lining up with anything.
   46rem is the reading measure, about 67 characters; the pictures come in
   to meet it rather than the words going out to meet them. */
.page .crumb,
.posts--single {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.page__header { margin-bottom: 64px; }

.page__header h1 {
  font-family: var(--font-heading);
  font-size: 50px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.page__lede {
  font-size: 22px;
  line-height: 1.9em;
  color: var(--ink);
}

.posts__empty {
  font-size: 22px;
  line-height: 1.9em;
  color: var(--ink);
}

/* Posts are stacked newest first on one page. With a handful of entries that
   is simpler to publish and to link than an index plus a file per post; each
   still has its own id, so blog.html#slug addresses one directly. */
.post + .post {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid rgba(74, 110, 128, 0.16);
}

.post__header { margin-bottom: 26px; }

.post__title {
  margin: 0;
  padding: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}

.post__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 250ms ease;
}

.post__title a:hover { color: var(--slate); }

.post__date {
  padding: 0;
  font-family: var(--font-nav);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--slate);
}

.post__body {
  font-size: 22px;
  line-height: 1.9em;
}

.post__figure { margin: 34px 0; }

/* ---- The list of entries ---- */
/* The whole card is one link: a bigger target than a title, and one tab stop
   per entry rather than several. */
.entry + .entry {
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid rgba(74, 110, 128, 0.16);
}

.entry__link {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 32px;
  align-items: start;
  color: inherit;
  text-decoration: none;
}

.entry__thumb {
  display: block;
  overflow: hidden;
  background: rgba(74, 110, 128, 0.08);
}

.entry__thumb img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform 400ms ease;
}

.entry__link:hover .entry__thumb img { transform: scale(1.04); }

.entry__text { display: block; }

.entry__date {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-nav);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--slate);
}

.entry__title {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 30px;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  transition: color 250ms ease;
}

.entry__link:hover .entry__title { color: var(--slate); }

.entry__excerpt {
  display: block;
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.9em;
  color: var(--ink);
}

/* Reads as a link without being one: the card around it already is. */
.entry__more {
  display: inline-block;
  position: relative;
  font-family: var(--font-nav);
  font-size: 14px;
  color: var(--slate);
}

.entry__more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.entry__link:hover .entry__more::after { transform: scaleX(1); }

/* A single entry's own page: no card, and the title carries the page. */
.posts--single .post__title {
  font-size: 50px;
  line-height: 1.12;
}

.posts--single .post__title a { pointer-events: none; }

@media only screen and (max-width: 767px) {
  .entry__link { grid-template-columns: 1fr; gap: 14px; }
  .entry__thumb img { height: 190px; }
  .entry__title { font-size: 26px; }
  .entry__excerpt { font-size: 17px; }
  .posts--single .post__title { font-size: 30px; }
}

/* Landscape pictures fill the measure; a tall portrait one is held to most of
   a screen instead of running past it. Scaled, never cropped. */
.post__figure img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.post__figure figcaption {
  margin-top: 10px;
  font-family: var(--font-nav);
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}

/* Click to load: the embed is only fetched once the visitor asks for it, so
   opening the page sets no third-party cookies and costs no extra requests. */
.post__video {
  position: relative;
  margin: 34px 0;
  aspect-ratio: 16 / 9;
  background: var(--slate);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.post__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.post__video-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--off-white);
  font-family: var(--font-nav);
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  /* A constant scrim: the label and the play mark have to stay legible over
     whatever poster frame sits behind them. */
  background: rgba(26, 26, 26, 0.34);
  transition: background-color 250ms ease;
}

.post__video-btn:hover { background: rgba(26, 26, 26, 0.5); }

.post__video-icon {
  width: 0;
  height: 0;
  border-left: 17px solid currentColor;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

@media only screen and (max-width: 980px) {
  .page { padding-top: calc(var(--header-h) + 24px); padding-bottom: 72px; }
  .page__header { margin-bottom: 48px; }
  .page__header h1 { font-size: 42px; }
  .page__lede, .posts__empty, .entry__excerpt { font-size: 18px; }
  .post__title { font-size: 32px; }
  .post__body { font-size: 18px; }
  .post + .post { margin-top: 56px; padding-top: 56px; }
}

@media only screen and (max-width: 767px) {
  .page__inner { width: 86%; }
  .page__header h1 { font-size: 34px; }
  .page__lede, .posts__empty { font-size: 17px; }
  .post__title { font-size: 27px; }
  .post__body { font-size: 17px; }
}

/* ---------- One & Different ---------- */
.brand {
  padding-top: 59px;
  padding-bottom: 38px;
  background-color: var(--ink);
  /* Scrim: the copy runs across the lit half of the moon and measured
     3.00:1 there, well under the 4.5:1 body text needs. */
  background-image:
    linear-gradient(rgba(40, 36, 50, 0.36), rgba(40, 36, 50, 0.36)),
    url("../images/bg-moon.webp");
  /* Anchored to the top rather than centred. The moon sits flush with the
     top edge of the photograph, and `cover` crops whatever the section's
     height does not use — so a centred image loses the top of the moon
     whenever the copy is short enough to leave the section under about
     1120px tall. Anchoring keeps the disc whole at every height. */
  background-position: 50% 0;
  filter: opacity(88%);
  backface-visibility: hidden;
}

.brand__logo {
  padding: 0 35%;
  margin-bottom: 2.75%;
  text-align: left;
}

.brand__logo img { max-height: none; }

/* Set like the "Where We Begin to Work Together" copy — same size, leading,
   white and measure. It used to run in a 558px column inside a 1152px row,
   which broke a sentence every five or six words while the other
   white-on-photograph section ran nearly twice as wide. 1206px is that
   section's own cap, so the two paragraphs now hold the same line. */
.brand__copy {
  max-width: 1206px;
  margin: 0 auto 2.75%;
  font-size: 22px;
  line-height: 1.9em;
  color: var(--white);
}

.brand__credits {
  margin: 154px 182px 0;
  font-size: 22px;
  line-height: 2em;
  color: var(--off-white);
}

.brand__copy p,
.brand__credits p { text-align: center; }

/* The names in the credits that have a website of their own. The text is
   off-white on a photograph of the moon, so a link cannot be marked by a
   colour: anything dark enough to read as a link would fight the picture,
   and anything light enough would be invisible. It keeps the colour of the
   sentence and takes a rule underneath instead, held off the baseline so
   the descenders in "Sacinandana" are not struck through. The rule sits at
   45% until hover, which is enough to see and not enough to interrupt. */
.brand__credits a {
  color: inherit;
  /* A name is one thing; a line break through the middle of it reads as
     two. Every name here is short enough to hold on the narrowest line. */
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(250, 249, 247, 0.45);
  transition: text-decoration-color 200ms ease;
}

.brand__credits a:hover,
.brand__credits a:focus-visible { text-decoration-color: var(--off-white); }

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--bg);
}

.site-footer__bottom {
  padding: 15px 0 5px;
  background-color: rgba(214, 207, 196, 0.32);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  flex-wrap: wrap;
}

.site-footer__copy {
  margin: 0;
  padding: 0;
  font-family: var(--font-nav);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--slate);
}

.social-icons { line-height: 0; }

.social-icons li {
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
}

.social-icons li:first-child { margin-left: 0; }

/* Matches the icon in the mobile menu: same colour, same size, same box. */
.social-icons__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -11px;
  color: var(--slate);
  text-decoration: none;
  transition: color 250ms ease;
}

.social-icons__link:hover { color: var(--ink); }

.social-icons__link svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: currentColor;
}

@media only screen and (max-width: 767px) {
  .site-footer__inner {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
  .social-icons__link { margin-right: 0; }
}

/* ==========================================================================
   Large screens
   ========================================================================== */
@media only screen and (min-width: 2000px) {
  .row { padding: 40px 0; }
  .section { padding: 80px 0; }
}

/* ==========================================================================
   Tablet and below (≤ 980px)
   ========================================================================== */
@media only screen and (max-width: 980px) {
  :root { --header-h-fixed: 80px; }

  /* The header keeps its height on mobile and only gains a background, so
     the logo and hamburger stay legible over the dark sections. */
  .site-header {
    height: var(--header-h);
    background-color: rgba(250, 249, 247, 0);
    box-shadow: none;
  }

  .site-header.is-scrolled {
    height: var(--header-h);
    background-color: var(--off-white);
    box-shadow: 0 1px 0 rgba(26, 26, 26, 0.08);
  }

  .site-logo img { max-height: 54%; }
  .site-nav { display: none; }
  .mobile-nav { display: block; }

  .section { padding: 50px 0; }

  .row {
    width: 80%;
    max-width: 1080px;
    padding: 30px 0;
  }

  .col {
    float: none;
    width: 100% !important;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .col--last { margin-bottom: 0; }

  /* Hero */
  .hero { padding: 140px 0 150px; }
  .hero__text {
    padding-top: 46px;
    font-size: 53px;
    line-height: 1.1em;
  }
  .hero__row { width: 92.6%; max-width: 1080px; }

  /* Intro (rainbow hidden on tablet) */
  .intro {
    margin: 0;
    padding: 0 0 10px;
  }
  .intro__row { width: 90%; margin: 0 auto; }
  .intro__image { display: none; }
  .intro__heading {
    max-width: none;
    margin: 0 91px 25px;
  }
  /* Four lines here too, so it needs the leading the desktop rule has. */
  .intro__heading h2 { font-size: 50px; line-height: 1.2em; }
  /* Stacked here, so the section titles sit on the same centre line as
     explore, book and coaching rather than hugging the left edge. */
  .intro__heading h2,
  .about__heading h2,
  .about__heading p.about__role { text-align: center; }
  .intro__copy { max-width: none; margin: 0 91px; font-size: 21px; }

  /* About */
  .about { padding: 0 0 160px; }
  .about__row { width: 90%; max-width: 1350px; }
  .about__heading { width: auto; max-width: none; margin: 64px 16px 15px; }
  .about__heading h2 { font-size: 50px; line-height: 50px; }
  .about__heading p.about__role { font-size: 30px; }
  .about__copy { margin: 0 16px; font-size: 18px; }
  /* Same inset as the copy above it, so the photograph and the text sit
     within one measure rather than three. */
  .about__image { margin: 0 16px; }
  .about__image img { max-height: 542px; }

  /* Explore */
  .explore { padding: 50px 40px; }
  .explore__row { width: 90%; margin: 0 auto; }
  .explore__heading { margin: 0; }
  .explore__copy { margin: 0 17px; font-size: 19px; }

  /* Book */
  .book { margin: 80px 0 56px; padding: 50px 0; }
  .book__row { width: 100%; }
  .book__text {
    padding: 0 58px 1px;
    font-size: 21px;
    line-height: 2em;
    color: var(--slate);
  }
  .book__text h2 {
    font-size: 47px;
    color: var(--slate);
  }

  /* Coaching (sky image hidden; text column first) */
  .coaching { padding: 0 0 50px; }
  .coaching__row {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
  }
  .coaching__image { display: none; }
  .coaching__image-col { margin-bottom: 30px; }
  .coaching__row .col--last { margin-bottom: 0; }
  .coaching__heading { max-width: none; margin: 20px 144px 4px; }
  .coaching__heading h2 { text-align: center; }
  .coaching__copy {
    max-width: none;
    margin: 0 144px;
    padding-top: 8px;
    font-size: 18px;
  }
  .coaching__copy p { text-align: center; }

  /* Brand */
  /* A portrait frame below 981px. The landscape photograph has to be magnified
     enormously to cover a section this tall and narrow, which leaves the moon
     wider than the screen and reading as texture rather than as a moon. */
  .brand {
    padding: 110px 0 31px;
    background-image:
      linear-gradient(rgba(40, 36, 50, 0.36), rgba(40, 36, 50, 0.36)),
      url("../images/bg-moon-portrait.jpg");
    /* The portrait crop is tall enough that `cover` never clips its moon,
       so it keeps the centring the landscape one had to give up. */
    background-position: 50%;
  }
  .brand__row {
    width: auto;
    margin: 0 80px 128px;
  }
  .brand__logo { padding: 0 10%; margin-bottom: 30px; }
  .brand__logo img { max-height: 155px; width: auto; }
  /* Both drop with the explore copy they are set to match; the credits
     follow so they never end up larger than the paragraph above them. */
  .brand__copy { margin: 0 28px 30px; font-size: 19px; }
  .brand__credits { margin: 154px 28px 0; font-size: 19px; }

  /* Footer */
  .social-icons {
    float: none;
    margin: 0 0 5px;
    text-align: center;
  }
  .social-icons li { margin-left: 0; }
}

/* ==========================================================================
   Phone (≤ 767px)
   ========================================================================== */
@media only screen and (max-width: 767px) {
  /* Every block on a phone hangs off this one measure. They had drifted to
     six different insets — 20, 27, 37, 38, 47 and 64px at 375px wide — so
     scrolling the page, each section began somewhere new and the measure
     swung between 247px and 335px. Nothing was wrong in any one block;
     they simply never agreed with each other. */
  :root { --gutter: 26px; }

  body { font-size: 16px; }

  .br-desktop { display: none; }

  /* Hero */
  .hero { padding: 140px 0 58px; }
  .hero__row { width: auto; margin: 0 var(--gutter); }
  .hero__text {
    padding: 4px 0 0;
    margin-bottom: 0;
    font-size: 30px;
    line-height: 1.1em;
  }

  /* Intro */
  .intro {
    margin-left: 0;
    margin-bottom: 0;
    padding: 0;
  }
  .intro__row { width: auto; margin: 0 var(--gutter); }
  .intro__heading { max-width: none; margin: 45px 0 10px; }
  /* Was 30px, the same size as the hero above it, which left the two
     competing now that this one runs to several lines. */
  .intro__heading h2 { font-size: 26px; line-height: 1.35em; }
  .intro__copy {
    max-width: none;
    margin: 0 0 25px;
    font-size: 17px;
  }

  /* About */
  .about { max-width: 100%; margin: 0; padding: 0; }
  .about__row { width: auto; margin: 0 var(--gutter); }
  /* auto side margins: the block is 88.6% wide, so it has to be centred
     itself or the centred text inside it lands left of the page axis. */
  .about__heading { margin: 45px auto 9px; }
  .about__heading h2 { font-size: 35px; line-height: 40px; }
  .about__heading p.about__role { font-size: 19px; }
  .about__copy { margin: 0; font-size: 17px; }
  .about__image { margin: 0; }
  .about__image img { max-height: 1000px; }

  /* Explore */
  .explore {
    margin-top: 75px;
    padding: 0 0 50px;
  }
  .explore__row { width: auto; margin: 0 var(--gutter); }
  .explore__heading { margin-top: 38px; }
  .explore__copy {
    margin: 0;
    padding-top: 5px;
    font-size: 17px;
  }

  /* Book */
  .book {
    margin: 40px 0 0;
    padding-top: 0;
    padding-bottom: 25px;
  }
  .book__row { width: auto; margin: 0 var(--gutter); }
  .book__text {
    padding: 0 0 1px;
    font-size: 17px;
  }
  .book__text h2 {
    font-size: 37px;
    line-height: 45px;
  }

  /* Buttons and the field pair fall into one column on their own, so the
     only phone-specific work here is trimming the surrounding insets. */
  .enquiry { margin-top: 30px; }
  .enquiry legend { font-size: 26px; padding-bottom: 18px; }
  .enquiry__done { margin-top: 30px; padding: 22px 20px; font-size: 21px; }

  /* Coaching */
  .coaching {
    padding: 0;
    margin-bottom: 0;
  }
  .coaching__row { width: auto; margin: 0 var(--gutter); }
  .coaching__heading { max-width: none; margin: 20px 0 10px; }
  .coaching__heading h2 { font-size: 40px; line-height: 40px; }
  .coaching__copy {
    max-width: none;
    margin: 13px 0 25px;
    padding-top: 0;
    font-size: 17px;
  }

  /* Brand */
  .brand { padding: 89px 0; }
  .brand__row { width: auto; margin: 0 var(--gutter); }
  .brand__logo { padding: 0; }
  .brand__logo img { max-height: 104px; }
  .brand__copy {
    margin: 0 0 30px;
    font-size: 17px;
  }
  .brand__credits {
    margin: 154px 0 0;
    font-size: 17px;
  }

  .site-footer__inner { width: auto; margin: 0 var(--gutter); }

  /* Everything centred on a phone — Tima's call, having seen it both ways.
     The page used to flip between centred and ranged left as you scrolled,
     because intro and about ranged left while explore, coaching, brand and
     book were centred. One rule now, listing every block, so the next
     person does not have to work out which sections were deliberate.

     Left off the list on purpose: the enquiry form. Its labels, hints and
     fields are controls rather than prose, and centring a label above a
     text box reads as a mistake. */
  .intro__copy p,
  .about__copy p,
  .explore__copy p,
  .coaching__copy p,
  .brand__copy p,
  .brand__credits p,
  .book__text > p { text-align: center; }
}