/* ==========================================================================
   Yadhan — shared styles
   Design system: Modernist, retuned to the brand's metallic teal (#2D6A65,
   the base colour of the YADHAN emblem) on near-white.
   Token values, type scale and component classes come from the design
   system's styles.css; the page-level overrides that were layered on top of
   it during design (8px radii, mint section grounds, nav underline sweep)
   are folded in here.

   Loaded by every page. Page-specific sections live in home.css / pages.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #fbfbfa;
  --color-surface: #f7f8f5;
  --color-text: #1b2222;
  --color-divider: #bcc6b8;
  --color-border: #bcc6b8;

  /* The brand's metallic teal, ramped. #2D6A65 is the logo's base and the
     site's accent, so the emblem and the interface are one colour rather
     than two teals a shade apart; 300/400 are the logo's own highlights and
     700/900 come from its dark stops and its shadow. #2D6A65 carries 6.2:1
     against the page ground, so it holds up as body-weight text and as a
     button ground under white. */
  --color-accent: #2d6a65;
  --color-accent-100: #d9edea;
  --color-accent-200: #a9d6d1;
  --color-accent-300: #56bbb3;
  --color-accent-400: #40918c;
  --color-accent-500: #2d6a65;
  --color-accent-600: #265b57;
  --color-accent-700: #1f4d49;
  --color-accent-800: #163734;
  --color-accent-900: #0f2b28;

  --color-neutral-100: #f2f4ec;
  --color-neutral-200: #e0e5d8;
  --color-neutral-300: #cdd4c4;
  --color-neutral-400: #adb7a4;
  --color-neutral-500: #8f9a89;
  --color-neutral-600: #6d7768;
  --color-neutral-700: #4d554a;
  --color-neutral-800: #333a31;
  --color-neutral-900: #1b2018;

  /* the mint ground shared by the four-steps and enquiry bands */
  --color-mint: #eafbf3;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;

  /* the brand lockup only — the interface stays on Archivo. The artwork sets
     YADHAN in a heavy geometric sans, so the wordmark is Montserrat 800
     rather than the Trajan-style serif the written spec also allowed. */
  --font-brand: "Montserrat", "Archivo", system-ui, sans-serif;
  --font-brand-tagline: "Montserrat", "Archivo", system-ui, sans-serif;
  /* the deep tone the emblem is drawn in, for the type beside it */
  --color-brand-ink: #1e5450;

  /* one place to resize the whole lockup; the media queries below step it
     down as the header tightens */
  --logo-size: 60px;
  --logo-name-size: 22px;
  --logo-tagline-size: 9px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* page frame */
  --page-max: 1200px;
  --page-pad: clamp(20px, 5vw, 72px);
  --section-pad: 88px;
}

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

/* the chat panel is display:flex, which would otherwise beat [hidden] */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; }
figure { margin: 0; }

/* the design system's image wrapper — content photographs print black and white */
.grayscale { filter: grayscale(1) contrast(1.08); }

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* section kicker — the small uppercase label above every section heading */
.kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   3. Buttons and fields
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }

.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* the solid teal button used for "Meet the companions" */
.btn-solid {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 34px;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease;
}
.btn-solid:hover {
  color: #ffffff;
  background: var(--color-accent-600);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.btn-solid:active { transform: translateY(0) scale(.98); }

.field > label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 65px;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.nav {
  width: 100%;
  min-height: 65px;
  padding: 16px clamp(16px, 2vw, 28px);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(14px, 1.6vw, 24px);
  row-gap: 10px;
}
.nav__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
}
/* The brand lockup: compass emblem, then the wordmark over the strapline.
   The emblem is the simplified mark — the full one's eight cardinal labels
   smudge at this size. The type is live text rather than part of the
   artwork, so it stays crisp at every zoom and is selectable and indexed. */
.nav__mark {
  width: var(--logo-size);
  height: var(--logo-size);
  flex: none;
  display: block;
}
.nav__lockup { display: flex; flex-direction: column; gap: 5px; }
.nav__wordmark {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: var(--logo-name-size);
  line-height: 1;
  letter-spacing: 4px;
  /* the emblem's own deep tone, so mark and wordmark read as one object */
  color: var(--color-brand-ink);
}
.nav__tagline {
  font-family: var(--font-brand-tagline);
  font-weight: 600;
  font-size: var(--logo-tagline-size);
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  /* the emblem's deep tone, not the lighter 400: at 9px the lighter tone
     only reached 3.6:1 on the page ground */
  color: var(--color-brand-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The menu button
   Shown only on phones, where the links collapse behind it. Without
   JavaScript it is hidden and the links stay in the bar, so the navigation
   is never locked behind a control that cannot open it.
   -------------------------------------------------------------------------- */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-brand-ink);
  cursor: pointer;
}
/* the three lines: the middle one is the element, the others its edges */
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block;
  width: 19px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, background-color .2s ease;
}
.nav__bars { position: relative; }
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -6px; }
.nav__bars::after { top: 6px; }

/* open: the lines cross */
.nav.is-open .nav__bars { background: transparent; }
.nav.is-open .nav__bars::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav__links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(10px, 1.4vw, 24px);
}
/* plain text links: ink stays put, a teal rule sweeps in from the left */
.nav__link {
  position: relative;
  display: inline-block;
  padding: 6px 2px;
  font-size: clamp(11.5px, 1.25vw, 13.5px);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease;
}
.nav__link:hover, .nav__link:active { color: var(--color-text); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: 700; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.nav__cta .btn { font-size: clamp(12px, 1.2vw, 14px); padding: 8px clamp(10px, 1.2vw, 18px); }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--color-accent); color: var(--color-bg); }
.site-footer__grid {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 48px var(--page-pad) 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 32px;
}
/* same lockup on the teal ground, using the light emblem */
.site-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.site-footer__mark { width: 56px; height: 56px; flex: none; display: block; }
.site-footer__lockup { display: flex; flex-direction: column; gap: 5px; }
.site-footer__wordmark {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 4px;
  color: var(--color-bg);
}
.site-footer__tagline {
  font-family: var(--font-brand-tagline);
  font-weight: 600;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-bg) 82%, transparent);
}
.site-footer__blurb {
  margin: 0;
  max-width: 26ch;
  font-size: 13px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-bg) 85%, transparent);
}
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
/* The footer's column headings were <h6>, four levels below the <h2>s above
   them in the page — a screen reader moving by heading jumped h2 to h6 on
   every page. They are <h2> now, which is what they are: top-level headings
   of the footer. This keeps the small uppercase label they always looked
   like, since the old h6 element styles no longer reach them. */
.site-footer__h {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  line-height: 1.12;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bg);
}
.site-footer__col a,
.site-footer__col span { font-size: 13px; color: var(--color-bg); text-decoration: none; }
.site-footer__col .site-footer__muted { color: color-mix(in srgb, var(--color-bg) 85%, transparent); }
.site-footer a { transition: opacity .18s ease, transform .18s ease; }
.site-footer a:hover { opacity: .7; transform: translateX(3px); color: var(--color-bg); }

.site-footer__legal {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px var(--page-pad) 40px;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 28%, transparent);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-bg) 85%, transparent);
}
.site-footer__legal-links { margin-left: auto; }

/* --------------------------------------------------------------------------
   13. WhatsApp button
   -------------------------------------------------------------------------- */
/* a plain link to the desk's WhatsApp — tapping it opens the chat itself */
.chat-fab {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.chat-fab:hover { color: #ffffff; background: var(--color-accent-600); transform: translateY(-2px); }
.chat-fab:active { transform: translateY(0) scale(.97); }
.chat-fab__dot { width: 9px; height: 9px; background: #25d366; display: block; }

@media (max-width: 480px) {
  .chat-fab { padding: 13px 16px; font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --section-pad: 64px; }
}

/* the lockup steps down before the nav runs out of room for its links */
@media (max-width: 1000px) {
  :root { --logo-size: 52px; --logo-name-size: 19px; --logo-tagline-size: 8px; }
}
@media (max-width: 780px) {
  :root { --logo-size: 44px; --logo-name-size: 17px; --logo-tagline-size: 7px; }
}

@media (max-width: 620px) {
  /* the compact lockup: mark and wordmark only. With the strapline the
     brand block is wide enough to push the buttons on to a row of their
     own, and a three-row sticky header eats the phone's viewport. The
     footer still carries the strapline. */
  .nav__tagline { display: none; }
  .nav { flex-wrap: wrap; gap: 10px; }
  .nav__cta { margin-left: auto; gap: 8px; }
  .nav__cta .btn { font-size: 12px; padding: 9px 11px; }

  /* Without JavaScript the links stay in the bar on their own row, as
     before. With it, they collapse behind the menu button: the bar holds
     the brand on the left and Sign in, Book a visit and the menu on the
     right, and the links open as a panel under the header. */
  .nav__links { order: 3; flex: 1 0 100%; justify-content: flex-start; flex-wrap: wrap; row-gap: 2px; }
  .js .nav__toggle { display: inline-flex; }
  .js .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--page-pad) 12px;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-divider);
    box-shadow: var(--shadow-md);
  }
  .js .nav.is-open .nav__links { display: flex; }
  .js .nav__link { padding: 13px 2px; font-size: 15px; }
  /* the underline sweep is a pointer affordance; in the panel each link is
     a full-width row with a rule under it instead */
  .js .nav__link::after { display: none; }
  .js .nav__link + .nav__link { border-top: 1px solid var(--color-divider); }

  .btn-solid { font-size: 16px; padding: 16px 22px; }
  .site-footer__legal-links { margin-left: 0; }
}

/* the emblem alone once the wordmark stops fitting beside the buttons */
@media (max-width: 430px) {
  .js .nav__wordmark { display: none; }
}

/* on the narrowest phones the two buttons and the menu are 6px too wide for
   one row; trimming their padding keeps the header a single row */
@media (max-width: 360px) {
  .js .nav__cta .btn { padding: 9px 9px; font-size: 11.5px; }
  .js .nav__toggle { width: 36px; height: 36px; }
}

/* --------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-solid, .nav__link, .nav__link::after, .site-footer a, .chat-fab {
    transition: none;
  }
  .btn:hover, .btn:active, .btn-solid:hover, .btn-solid:active,
  .site-footer a:hover, .chat-fab:hover, .chat-fab:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Closing teal band
   Shared: it closes Services, How it works, About and now the homepage, so
   it lives here rather than in pages.css, which the homepage never loads.
   -------------------------------------------------------------------------- */
/* A contained panel, not a full-bleed band. Run edge to edge in the accent
   and it butts straight up against the footer, which is the same teal — the
   two read as one block and the closing call to action looks like part of
   the footer. Set on the page ground with air around it, it reads as what it
   is: the last thing on the page. */
.cta-band {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad) clamp(56px, 7vw, 96px);
  color: var(--color-text);
}
.cta-band__inner {
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: 16px;
}
.cta-band h2 {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.06;
  margin: 0 0 24px;
  margin-left: -0.058em;
  color: var(--color-bg);
}
/* The kicker and body copy that go on the band. They live here beside
   .cta-band rather than in home.css: the band is shared, and a page that did
   not load home.css got the ordinary dark-teal kicker on the teal ground.
   85%, not 78% — at 13px the lighter mix measured 4.39:1 on the teal. */
.kicker--light { color: color-mix(in srgb, var(--color-bg) 85%, transparent); }
.cta-band__body {
  max-width: 58ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-bg) 88%, transparent);
}

.btn-outline-light {
  color: var(--color-bg);
  border: 1px solid var(--color-bg);
  padding: 12px 20px;
  font-size: 15px;
}
.btn-outline-light:hover {
  color: var(--color-accent);
  background: var(--color-bg);
}
/* The inverse primary, for a band where one action is clearly the main one.
   btn-primary cannot be used there: its ground is the same accent as the
   band, so it vanishes into it. Light ground, accent text — 6.2:1. */
.btn-solid-light {
  background: var(--color-bg);
  border: 1px solid var(--color-bg);
  color: var(--color-accent);
  padding: 12px 20px;
  font-size: 15px;
}
.btn-solid-light:hover { background: #ffffff; color: var(--color-accent-700); }

/* .btn is nowrap, which is right in a header or beside a form but not here:
   at 320px "Join or enquire on WhatsApp" is 13px wider than the band's inner
   width and pushed the whole page sideways. In the band a long label wraps
   instead. It changes nothing at widths where the label already fits. */
.cta-band .actions .btn { white-space: normal; }

/* full-width action button (design-system .btn-block) */
.btn-block {
  width: 100%;
  margin-top: var(--space-2);
  justify-content: flex-start;
  text-align: left;
}
.btn-tall { min-height: 44px; }

/* available to screen readers and search engines, not shown on screen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}