/* ==========================================================================
   Kaveri Tikmani — kaveritikmani.com
   Single stylesheet for all pages.

   Contents
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout
   05. Buttons
   06. Forms
   07. Header / navigation
   08. Hero
   09. Transformation cards
   10. Testimonials
   11. Client logo marquee
   12. Reason cards
   13. About
   14. Services
   15. Process
   16. Booking band
   17. FAQ accordion
   18. Blog
   19. Article
   20. Footer
   21. Utilities
   22. Responsive
   23. Motion & print
   ========================================================================== */


/* 01. Design tokens
   ========================================================================== */

:root {
  /* Brand */
  --c-cream:       #F7F2E9;  /* page background */
  --c-teal:        #00ADAC;  /* primary accent */
  --c-terracotta:  #C97B63;  /* secondary accent */
  --c-ink:         #2B2A28;  /* headings, footer, dark cards */

  /* Surfaces */
  --c-white:       #FFFFFF;
  --c-sand:        #F0EAD9;  /* warm card background */
  --c-border:      #E4DFD4;
  --c-border-dark: #3A3835;  /* dividers inside the dark footer */

  /* Text */
  --c-text:        #3A3835;
  --c-muted:       #726E68;
  --c-muted-light: #8A8680;
  --c-muted-pale:  #B7B2AA;
  --c-rule:        #B7B0A2;  /* strike-through rules */

  /* Blog card image tints */
  --c-tint-sand:   #E7E1D3;
  --c-tint-mint:   #DEE8E5;
  --c-tint-clay:   #E4D9CF;

  /* Type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Metrics */
  --wrap:      1400px;
  --wrap-mid:  1300px;
  --wrap-text: 1000px;
  --wrap-read:  760px;
  --gutter:      64px;
  --radius:       4px;
  --radius-lg:    6px;
  --nav-h:       92px;

  /* Elevation */
  --shadow-card: 0 24px 48px rgba(43, 42, 40, 0.18);
  --shadow-chip: 0 16px 32px rgba(43, 42, 40, 0.25);
  --shadow-menu: 0 12px 24px rgba(0, 0, 0, 0.10);

  --ease: 0.2s ease;
}


/* 02. Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Stop sticky header covering anchored sections */
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img { height: auto; }

a {
  color: var(--c-teal);
  text-decoration: none;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease), opacity var(--ease);
}

a:hover { color: var(--c-ink); }

::selection {
  background: var(--c-teal);
  color: var(--c-ink);
}

:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Visible only to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard shortcut to jump past the navigation */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--c-ink);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius);
}

.skip-link:focus { top: 16px; color: var(--c-white); }


/* 03. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p, figure, blockquote, ul, ol { margin: 0; }

/* Playfair, upright — primary headings */
.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--c-ink);
}

/* Playfair, italic — the accent style used mid-sentence and on quotes */
.h-accent {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  margin: 0;
  color: var(--c-ink);
}

/* Inherits the size of the heading it sits inside */
.h-accent--inline { font-size: inherit; }
.h-accent--teal   { color: var(--c-teal); font-size: inherit; }
.h-accent--ink    { color: var(--c-ink); font-size: inherit; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height: 1.4;
}

.eyebrow--teal       { color: var(--c-teal); }
.eyebrow--terracotta { color: var(--c-terracotta); }
.eyebrow--muted      { color: var(--c-muted); }
.eyebrow--ink        { color: var(--c-ink); }

/* Heading scale */
.t-hero    { font-size: 58px; line-height: 1.14; }
.t-xl      { font-size: 42px; }
.t-lg      { font-size: 40px; }
.t-md      { font-size: 38px; }
.t-sm      { font-size: 32px; line-height: 1.3; }
.t-xs      { font-size: 30px; }

.lead {
  font-size: 19px;
  line-height: 1.75;
  color: var(--c-text);
}

.strike {
  text-decoration: line-through;
  text-decoration-color: var(--c-rule);
  color: var(--c-muted-light);
}


/* 04. Layout
   ========================================================================== */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--mid  { max-width: var(--wrap-mid); }
.wrap--text { max-width: var(--wrap-text); }
.wrap--read { max-width: var(--wrap-read); }
.wrap--narrow { max-width: 900px; }

.section       { padding-block: 76px; }
.section--tight { padding-block: 40px; }
.section--flush-top { padding-top: 0; }

.section-head { margin-bottom: 48px; }

.section-head__title { margin-top: 20px; max-width: 820px; }

.grid { display: grid; gap: 24px; }

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 36px 30px;
}


/* 05. Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 17px 32px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}

/* Teal fill — the main call to action */
.btn--primary {
  background: var(--c-teal);
  color: var(--c-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--c-ink);
  color: var(--c-white);
}

/* Dark fill */
.btn--dark {
  background: var(--c-ink);
  color: var(--c-white);
}

.btn--dark:hover,
.btn--dark:focus-visible {
  background: var(--c-teal);
  color: var(--c-white);
}

/* Outline */
.btn--outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--c-ink);
  color: var(--c-white);
}

/* Teal fill on a dark background */
.btn--invert {
  background: var(--c-teal);
  color: var(--c-ink);
}

.btn--invert:hover,
.btn--invert:focus-visible {
  background: var(--c-white);
  color: var(--c-ink);
}

.btn--sm { font-size: 15px; padding: 14px 24px; }

/* Underlined text link with an arrow */
.btn-text {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-ink);
  padding-bottom: 2px;
}

.btn-text:hover,
.btn-text:focus-visible {
  color: var(--c-teal);
  border-color: var(--c-teal);
}


/* 06. Forms
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
}

.field__hint {
  font-size: 13px;
  color: var(--c-muted);
}

.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--c-ink);
  background: var(--c-white);
  padding: 13px 15px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.input::placeholder { color: var(--c-muted-pale); }

.input:focus {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(0, 173, 172, 0.15);
}

textarea.input { resize: vertical; min-height: 120px; }
textarea.input--compact { min-height: 88px; }

/* Inline validation, toggled by main.js */
.input[aria-invalid='true'] { border-color: #C0392B; }

.field__error {
  display: none;
  font-size: 13px;
  font-weight: 600;
  color: #C0392B;
}

.field__error.is-visible { display: block; }

/* Honeypot — hidden from people, visible to bots */
.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.form-status {
  display: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  padding: 16px 18px;
  border-radius: var(--radius);
}

.form-status.is-visible { display: block; }

.form-status--ok {
  background: rgba(0, 173, 172, 0.12);
  color: #0A6867;
  border: 1px solid rgba(0, 173, 172, 0.35);
}

.form-status--error {
  background: rgba(192, 57, 43, 0.08);
  color: #8E2A20;
  border: 1px solid rgba(192, 57, 43, 0.3);
}

button[disabled] { opacity: 0.6; cursor: wait; }


/* 07. Header / navigation
   ========================================================================== */

/* The sticky positioning has to live on the <header> wrapper, not on .nav.
   A sticky element can only travel inside its parent's box, and <header> is
   exactly nav-height tall — so making .nav itself sticky does nothing at all. */
header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  /* Positioned so the mobile .nav__menu dropdown (top: 100%) anchors to it. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  background: rgba(247, 242, 233, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
}

.nav__logo { flex-shrink: 0; }
.nav__logo img { height: 60px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.nav__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--c-teal); }

/* Current page */
.nav__link[aria-current='page'] {
  color: var(--c-teal);
  font-weight: 700;
}

.nav__social {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav__social a { display: flex; }
.nav__social a:hover { opacity: 0.65; }

.nav__cta {
  font-size: 14px;
  padding: 11px 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hamburger — shown below 1024px by the media query in §21 */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--c-ink);
}

.nav__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 2px;
  padding: 20px 24px 28px;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-menu);
}

.nav__menu.is-open { display: flex; }

.nav__menu a {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--c-sand);
}

.nav__menu a:hover { color: var(--c-teal); }

.nav__menu-social {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0 6px;
}

.nav__menu-social a { border-bottom: none; padding: 0; }

.nav__menu .btn {
  margin-top: 10px;
  border-bottom: none;
  color: var(--c-white);
}


/* 08. Hero
   ========================================================================== */

.hero {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 64px var(--gutter) 24px;
  display: flex;
  align-items: flex-end;
  gap: 80px;
}

.hero__text { flex: 1; min-width: 0; }

.hero__eyebrow { margin-bottom: 22px; }

.hero__title { max-width: 600px; }

.hero__title .h-accent {
  color: var(--c-teal);
  font-size: inherit;
}

.hero__lead { max-width: 520px; margin-top: 28px; }

.hero__cta {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
}

.hero__media {
  flex: 0 0 420px;
  padding-bottom: 20px;
}

.hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: bottom;
}


/* 09. Transformation cards
   ========================================================================== */

.transform-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}

.transform-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
}

.pill--before {
  color: var(--c-muted-light);
  background: #EFE9DD;
}

.pill--after {
  color: var(--c-white);
  background: var(--c-teal);
}

.transform-card__arrow { color: var(--c-rule); }

.transform-card__note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-muted);
}


/* 10. Testimonials
   ========================================================================== */

.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 220px;
  padding: 40px 34px;
  border-radius: var(--radius);
}

.quote-card__text { font-size: 20px; line-height: 1.5; }
.quote-card__name { font-size: 14.5px; font-weight: 700; }
.quote-card__role { font-size: 13.5px; margin-top: 2px; }

/* Dark variant */
.quote-card--ink                 { background: var(--c-ink); }
.quote-card--ink .quote-card__text,
.quote-card--ink .quote-card__name { color: var(--c-white); }
.quote-card--ink .quote-card__role { color: var(--c-muted-pale); }
.quote-card--ink .quote-mark       { color: var(--c-teal); }

/* Teal variant */
.quote-card--teal                  { background: var(--c-teal); }
.quote-card--teal .quote-card__text,
.quote-card--teal .quote-card__name { color: var(--c-ink); }
.quote-card--teal .quote-card__role { color: #1E4E4D; }
.quote-card--teal .quote-mark       { color: var(--c-ink); }

/* Sand variant */
.quote-card--sand                  { background: var(--c-sand); }
.quote-card--sand .quote-card__text,
.quote-card--sand .quote-card__name { color: var(--c-ink); }
.quote-card--sand .quote-card__role { color: var(--c-muted); }
.quote-card--sand .quote-mark       { color: var(--c-terracotta); }


/* 11. Client logo marquee
   ========================================================================== */

.trust {
  padding-block: 28px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.trust__label {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
  font-size: 15px;
  color: var(--c-muted);
}

.marquee {
  margin-top: 24px;
  overflow: hidden;
  /* Fade the strip out at both edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

/* Pause on hover so a logo can be read */
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track img {
  height: 88px;
  width: auto;
  margin-inline: 32px;
  object-fit: contain;
  opacity: 0.75;
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* 12. Reason cards
   ========================================================================== */

.reason {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reason__title { font-size: 22px; }

.reason__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-muted);
}


/* 13. About
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 64px;
  align-items: center;
}

.about__media { position: relative; }

/* Offset teal block behind the photo */
.about__media::before {
  content: '';
  position: absolute;
  inset: 26px -22px -26px 0;
  transform: translateX(-22px);
  background: var(--c-teal);
  border-radius: var(--radius-lg);
}

.about__media img {
  position: relative;
  width: 100%;
  height: 520px;
  object-fit: cover;
  /* The box is near-square, so a tall portrait gets trimmed top and bottom.
     If you swap this photo, keep the subject near the middle of the frame. */
  object-position: center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.about__badge {
  position: absolute;
  right: -28px;
  bottom: -28px;
  max-width: 230px;
  padding: 20px 22px;
  background: var(--c-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-chip);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-white);
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about__stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-block: 6px 8px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-white);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
}

.about__body { font-size: 17px; line-height: 1.75; }

.pull-quote {
  border-left: 3px solid var(--c-teal);
  padding-left: 22px;
  font-size: 22px;
  line-height: 1.45;
}


/* 14. Services
   ========================================================================== */

.services {
  display: flex;
  gap: 28px;
  align-items: stretch;
}

.service {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--c-white);
  padding: 48px;
  border-radius: var(--radius);
}

.service__kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.service__kicker--teal       { color: var(--c-teal); }
.service__kicker--terracotta { color: var(--c-terracotta); }

.service__title { font-size: 28px; }

.service__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-muted);
}

.service__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-muted);
}

.service__list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.service .btn,
.service .btn-text { margin-top: 8px; align-self: flex-start; }

/* Inline retainer enquiry form, revealed by main.js */
.service__form {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
}

.service__form.is-open { display: flex; }


/* 14b. Contact page
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--c-white);
  padding: 18px 22px;
  border-radius: var(--radius);
  color: var(--c-ink);
}

.contact-row:hover {
  background: var(--c-sand);
  color: var(--c-ink);
}

.contact-row > span { display: flex; flex-direction: column; gap: 2px; }

.contact-row__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c-muted-light);
}

.contact-row__value {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--c-ink);
  word-break: break-word;
}

/* Match the native select to the other inputs */
select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23726E68' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
}


/* 15. Process
   ========================================================================== */

.steps { display: flex; gap: 44px; }

.step { flex: 1; }

.step__num {
  font-size: 44px;
  color: var(--c-teal);
  opacity: 0.5;
}

.step__title { font-size: 23px; margin-top: 12px; }

.step__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--c-muted);
  margin-top: 10px;
}


/* 16. Booking band
   ========================================================================== */

.book {
  background: var(--c-terracotta);
  padding: 88px var(--gutter);
}

.book__inner {
  max-width: var(--wrap-text);
  margin-inline: auto;
  text-align: center;
}

.book__title { color: var(--c-white); margin-top: 20px; }

.book__lead {
  font-size: 17px;
  line-height: 1.7;
  color: #FBEAE3;
  max-width: 640px;
  margin: 18px auto 0;
}

.book__embed {
  background: var(--c-cream);
  border-radius: var(--radius-lg);
  margin-top: 40px;
  overflow: hidden;
}

.book__embed iframe {
  width: 100%;
  height: 640px;
  border: none;
}

.book__note {
  font-size: 15px;
  color: var(--c-ink);
  margin-top: 24px;
}

.book__note a { color: var(--c-ink); font-weight: 700; }
.book__note a:hover { color: var(--c-white); }

/* Dark CTA band used on the blog */
.cta-dark {
  background: var(--c-ink);
  padding: 64px var(--gutter);
}

.cta-dark__inner {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.cta-dark__title { color: var(--c-white); margin-top: 18px; }
.cta-dark .btn { margin-top: 32px; }


/* 17. FAQ accordion
   ========================================================================== */

.faq { display: flex; flex-direction: column; margin-top: 44px; }

.faq__item { border-bottom: 1px solid var(--c-border); }

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 19px;
  color: var(--c-ink);
}

.faq__trigger:hover { color: var(--c-teal); }

.faq__marker {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--c-muted);
  flex-shrink: 0;
  line-height: 1;
}

.faq__panel {
  display: none;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 700px;
  padding-bottom: 26px;
}

.faq__panel.is-open { display: block; }


/* 18. Blog
   ========================================================================== */

.blog-hero { text-align: center; padding: 64px var(--gutter) 40px; }

.blog-hero__title { font-size: 50px; color: var(--c-teal); margin-top: 20px; }

.blog-hero__title .h-accent {
  color: var(--c-ink);
  font-size: inherit;
}

.blog-hero__lead {
  font-size: 18px;
  line-height: 1.75;
  color: var(--c-text);
  max-width: 680px;
  margin: 24px auto 0;
}

.qa-card {
  background: var(--c-white);
  padding: 32px;
  border-radius: var(--radius);
}

.qa-card__q { font-size: 19px; }

.qa-card__a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-muted);
  margin-top: 12px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
}

.post-card:hover { transform: translateY(-3px); }

.post-card {
  transition: transform var(--ease), box-shadow var(--ease);
}

.post-card:hover { box-shadow: 0 12px 28px rgba(43, 42, 40, 0.10); }

.post-card__media {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-tint-sand);
  color: var(--c-muted-light);
  font-size: 13px;
}

.post-card__media--sand { background: var(--c-tint-sand); }
.post-card__media--mint { background: var(--c-tint-mint); }
.post-card__media--clay { background: var(--c-tint-clay); }
.post-card__media--warm { background: var(--c-sand); }

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 26px 26px 30px;
}

.post-card__cat {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-teal);
}

.post-card__title { font-size: 19px; line-height: 1.35; }

.post-card__excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-muted);
  flex: 1;
}

.post-card__meta {
  font-size: 13px;
  color: var(--c-muted-light);
  margin-top: 6px;
}

/* Posts that have not been written yet */
.post-card--soon { cursor: default; }
.post-card--soon:hover { transform: none; box-shadow: none; }

.post-card__badge {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-muted);
  background: var(--c-sand);
  padding: 5px 10px;
  border-radius: 20px;
}

/* Compact card used in "Keep reading" */
.post-card--mini {
  gap: 10px;
  padding: 26px;
}

.post-card--mini .post-card__title { font-size: 17px; line-height: 1.4; }


/* 19. Article
   ========================================================================== */

.article-head { padding: 36px var(--gutter) 16px; }

.article-head__back {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-muted);
}

.article-head__back:hover { color: var(--c-teal); }

.article-head__cat {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-teal);
  margin-top: 20px;
}

.article-head__title { font-size: 38px; margin-top: 14px; }

.article-head__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--c-muted);
}

.article-head__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-muted-pale);
}

.article-banner {
  aspect-ratio: 21 / 8;
  max-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-tint-sand);
  border-radius: var(--radius-lg);
  color: var(--c-muted-light);
  font-size: 14px;
}

.article-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.article { padding: 32px var(--gutter) 90px; }

.article p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--c-text);
  margin: 0 0 26px;
}

.article h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  color: var(--c-ink);
  margin: 52px 0 18px;
}

.article h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--c-ink);
  margin: 48px 0 18px;
}

.article ul,
.article ol {
  font-size: 18px;
  line-height: 1.85;
  color: var(--c-text);
  margin: 0 0 26px;
  padding-left: 24px;
}

.article li { margin-bottom: 10px; }

.article blockquote {
  margin: 32px 0;
  padding-left: 22px;
  border-left: 3px solid var(--c-teal);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--c-ink);
}

.article img { border-radius: var(--radius-lg); margin: 32px 0; }

.article a { font-weight: 600; }

.article__cta {
  margin-top: 48px;
  padding: 36px 40px;
  background: var(--c-sand);
  border-radius: var(--radius-lg);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
}

.article__cta a { font-weight: 700; }


/* 20. Footer
   ========================================================================== */

.footer {
  background: var(--c-ink);
  padding: 56px var(--gutter) 36px;
}

.footer__top {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--c-border-dark);
}

.footer__brand { max-width: 320px; }
.footer__brand img { height: 48px; width: auto; }

.footer__tagline {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted-light);
  margin-top: 20px;
}

.footer__cols { display: flex; gap: 80px; flex-wrap: wrap; }

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__heading {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--c-muted);
  margin-bottom: 4px;
}

.footer__col a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--c-muted-pale);
}

.footer__col a:hover { color: var(--c-teal); }

.footer__legal {
  max-width: var(--wrap);
  margin: 20px auto 0;
  font-size: 13px;
  color: var(--c-muted);
}


/* 21. Utilities
   --------------------------------------------------------------------------
   A deliberately small set of spacing and alignment helpers, so section
   rhythm can be tuned in the markup without one-off inline styles.
   ========================================================================== */

.u-center { text-align: center; }

.u-mt-16 { margin-top: 16px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-36 { margin-top: 36px; }
.u-mt-48 { margin-top: 48px; }
.u-mt-76 { margin-top: 76px; }

.u-mb-16 { margin-bottom: 16px; }

.u-pt-0  { padding-top: 0; }
.u-pt-32 { padding-top: 32px; }
.u-pt-36 { padding-top: 36px; }
.u-pt-56 { padding-top: 56px; }

.u-pb-40 { padding-bottom: 40px; }

.u-gap-20 { gap: 20px; }
.u-gap-28 { gap: 28px; }

.u-mw-700 { max-width: 700px; }
.u-mw-820 { max-width: 820px; }

.u-start { align-self: flex-start; }


/* 22. Responsive
   ========================================================================== */

/* Large desktop — keep the mobile menu out of the way */
@media (min-width: 1025px) {
  .nav__toggle,
  .nav__menu { display: none; }
}

/* Tablet & below — swap to the hamburger menu */
@media (max-width: 1024px) {
  :root {
    --gutter: 24px;
    --nav-h: 72px;
  }

  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
    padding: 40px var(--gutter) 24px;
  }

  .hero__text { max-width: 100%; }

  .hero__title,
  .hero__lead {
    max-width: 100%;
    margin-inline: auto;
  }

  .hero__cta { justify-content: center; flex-wrap: wrap; }

  .hero__media {
    flex: 0 0 auto;
    width: 260px;
    padding-bottom: 0;
  }

  .t-hero { font-size: 44px; }
  .t-xl   { font-size: 34px; }
  .t-lg   { font-size: 32px; }
  .t-md   { font-size: 30px; }

  .blog-hero__title { font-size: 38px; }

  .section { padding-block: 56px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* About — stack, and pull the decorative offsets in */
  .about {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .about__media::before { inset: 18px -14px -18px 0; transform: translateX(-14px); }
  .about__media img { height: 420px; }
  .about__badge { right: 0; bottom: -20px; }

  .services { flex-direction: column; }
  .service { padding: 36px 28px; }

  /* Stack the columns and lead with the form — it's the primary action, and
     on a phone the direct-contact card would otherwise push it below the fold. */
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-grid .service { order: -1; }

  .steps { flex-direction: column; gap: 32px; }

  .book { padding: 64px var(--gutter); }
  .book__embed iframe { height: 720px; }

  .marquee__track img { height: 64px; margin-inline: 22px; }
}

/* Mobile */
@media (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .t-hero { font-size: 36px; }
  .t-xl   { font-size: 30px; }
  .t-lg   { font-size: 28px; }
  .t-md   { font-size: 26px; }
  .t-sm   { font-size: 24px; }
  .t-xs   { font-size: 24px; }

  .lead { font-size: 17px; }

  .blog-hero__title { font-size: 32px; }
  .article-head__title { font-size: 28px; }
  .article p,
  .article ul,
  .article ol { font-size: 17px; }
  .article h2 { font-size: 26px; }
  .article h3 { font-size: 22px; }
  .article__cta { padding: 26px 24px; }

  .section { padding-block: 48px; }
  .section-head { margin-bottom: 32px; }

  .footer__top { flex-direction: column; gap: 32px; }
  .footer__cols { gap: 40px; }

  .about__media img { height: 340px; }
  .about__badge {
    position: static;
    max-width: 100%;
    margin-top: 20px;
    box-shadow: none;
  }

  .pull-quote { font-size: 19px; }
  .quote-card { padding: 32px 26px; min-height: 0; }
  .quote-card__text { font-size: 18px; }

  /* Stack the two CTAs. Centre them so the text link's underline hugs its
     own label instead of running the full width of the column. */
  .hero__cta { flex-direction: column; align-items: center; gap: 16px; }
  .hero__cta .btn { width: 100%; }

  .book__embed iframe { height: 900px; }
}

/* Small phones */
@media (max-width: 420px) {
  :root { --gutter: 18px; }

  .t-hero { font-size: 32px; }
  .service { padding: 28px 22px; }
  .faq__trigger { font-size: 17px; }
  .marquee__track img { height: 52px; margin-inline: 16px; }
}


/* 23. Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .marquee__track { animation: none; }
  .post-card:hover { transform: none; }
}

@media print {
  .nav,
  .footer,
  .book__embed,
  .marquee,
  .skip-link { display: none; }

  body { background: #fff; color: #000; }
  .article { padding: 0; }
}