/* ============================================
   Paul Hopewell LLC — Site stylesheet v4
   Mirrors the m2m-framework.html template exactly.
   Cream / Coral / Brass / Dark — DM Sans 300 / Playfair Display / DM Mono.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400&family=Inter:wght@400;500;600&display=swap');

:root {
  --cream: #f9f7f4;
  --coral: #c25d45;
  --coral-text: #aa513c;
  --brass: #806339;
  --dark: #1a1a1a;
  --mid: #4a4440;
  --light-line: #e5e0d8;
  --coral-light: rgba(194, 93, 69, 0.08);
  --brass-light: rgba(128, 99, 57, 0.08);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--dark);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.75;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--coral-text); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--brass); }

/* ─── HEADER ─── */
.site-header {
  background: rgba(26, 26, 26, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cream);
  padding: 23px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 2px solid #c4a35a;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.9;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-logo:hover { opacity: 1; color: var(--cream); }

.site-logo__badge {
  width: 62px;
  height: 62px;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 48%;
  border-radius: 50%;
}

.site-logo span { color: var(--coral); }
.site-logo .site-logo__name { color: var(--cream); font-family: 'Inter', sans-serif; font-size: 0.85em; }

.nav-desktop ul {
  display: flex;
  gap: 24px;
  list-style: none;
  align-items: center;
  flex-wrap: nowrap;
}

.nav-desktop a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  opacity: 1;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-desktop a:hover,
.nav-desktop a.active { color: var(--coral); }

/* The portal link closes the nav on the right: a gold-ringed pill, quieter
   than the coral audit bar, taking clients straight to their sign-in. */
.nav-portal {
  border: 1px solid #c4a35a;
  border-radius: 999px;
  padding: 6px 16px;
}
.nav-desktop a.nav-portal,
.nav-mobile a.nav-portal { color: #ffffff; }
.nav-desktop a.nav-portal:hover,
.nav-mobile a.nav-portal:hover {
  background: #c4a35a;
  border-color: #c4a35a;
  color: var(--dark);
}

/* The audit link is the one solid block in the nav: coral bar, white text
   like its neighbours, flashing gold on hover like every other CTA. */
.nav-cta {
  border: 1px solid var(--coral);
  border-radius: 999px;
  padding: 6px 16px;
  background: var(--coral);
}

.nav-desktop a.nav-cta,
.nav-mobile a.nav-cta { color: #ffffff; }

.nav-desktop a.nav-cta:hover,
.nav-mobile a.nav-cta:hover {
  background: #c4a35a;
  border-color: #c4a35a;
  color: var(--dark);
}

.nav-desktop a.nav-cta.active,
.nav-mobile a.nav-cta.active {
  color: #ffffff;
  border-color: #c4a35a;
}

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  margin: 5px 0;
  transition: all 0.2s;
}

.nav-mobile { display: none; background: var(--dark); padding: 44px 48px 32px; border-bottom: 1px solid rgba(249,247,244,0.1); position: fixed; top: 93px; left: 0; right: 0; z-index: 99; }
.nav-mobile.is-open { display: block; }
.nav-mobile ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.nav-mobile a {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
}
.nav-mobile a:hover,
.nav-mobile a.active { color: var(--coral); }
.nav-mobile a.nav-cta { display: inline-block; padding: 8px 16px; }
.nav-mobile a.nav-cta:hover { border-color: var(--coral); }

/* ─── HERO ─── */
.hero {
  background: var(--dark);
  color: var(--cream);
  /* the bottom band hosts the scroll cue */
  padding: 140px min(48px, 4vw) 96px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(135deg, transparent 40%, rgba(194,93,69,0.12) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Homepage hero — montage feeding through dark banner */
.hero--home {
  background:
    linear-gradient(180deg, rgba(26,26,26,0.68) 0%, rgba(26,26,26,0.72) 60%, rgba(42,34,25,0.78) 100%),
    url('../assets/images/hero-montage.jpg') center top / cover no-repeat;
  background-attachment: scroll;
}

.hero .container { position: relative; z-index: 1; }

.hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--coral);
}

.hero-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.7;
  margin-bottom: 16px;
}

.hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  max-width: 720px;
  margin-bottom: 28px;
  color: var(--cream);
}

.hero h1 em { font-style: italic; color: var(--coral); }

.hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 400;
  max-width: 600px;
  opacity: 0.8;
  line-height: 1.6;
  margin-bottom: 48px;
}

.hero-cta {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-inner {
  position: relative;
}

.hero-book-wrap {
  position: absolute;
  bottom: 0;
  left: 20px;
  z-index: 5;
  width: 110px;
  height: 110px;
  transition: transform 0.3s ease;
}

.hero-book-badge {
  display: block;
  width: 110px;
  height: 110px;
  transition: transform 0.2s ease;
}

.hero-book-badge:hover { transform: scale(1.06); }

.hero-book-badge img {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-book-arrow {
  display: none;
}

.cta-group {
  margin-top: 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-group .cta-btn {
  flex: 1;
  text-align: center;
}

/* ─── CONTAINER ─── */
.container {
  max-width: 900px;
  margin: 0 auto;
  /* Fluid gutter: holds at 48px while the container is capped at its max-width,
     then eases down only once the viewport is genuinely narrow. Keeps the text
     measure monotonically decreasing — no jumping wider as the window shrinks. */
  padding: 0 min(48px, 6vw);
}

.container--narrow { max-width: 720px; }

/* ─── SECTIONS ─── */
.section { padding: 40px 0; }
.section-bordered { border-top: 1px solid var(--light-line); }

.section-label {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.section-title {
  font-family: Georgia, serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 32px;
  color: var(--dark);
}

/* ─── BODY TEXT ─── */
.body-text {
  font-size: 17px;
  line-height: 1.8;
  color: var(--mid);
  margin-bottom: 20px;
}

.body-text strong { color: var(--dark); font-weight: 500; }
.body-text em { font-style: italic; }

/* ─── FOUNDATIONS GRID (3-col cards) ─── */
.foundations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--light-line);
  margin-top: 40px;
  border: 1px solid var(--light-line);
}

.foundation-card {
  background: var(--cream);
  padding: 36px 28px;
}

.foundation-number {
  font-family: Georgia, serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--coral);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 12px;
}

.foundation-card h3 {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--dark);
}

.foundation-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mid);
}

/* ─── DARK FEATURE SECTION ─── */
.section-dark {
  background: var(--dark);
  color: var(--cream);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.section-dark::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(128,99,57,0.2) 0%, transparent 70%);
  pointer-events: none;
}

.section-dark .container { position: relative; z-index: 1; }
.section-dark .section-label { color: var(--brass); opacity: 0.85; }
.section-dark .section-title { color: var(--cream); }
.section-dark .body-text { color: rgba(249,247,244,0.75); }
.section-dark .body-text strong { color: var(--cream); }

/* ─── METHODOLOGY STEPS ─── */
.methodology-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
}

.method-step {
  position: relative;
  padding-top: 24px;
  border-top: 2px solid var(--brass);
}


.method-step-num {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--brass);
  margin-bottom: 12px;
}

.method-step h2, .method-step h3 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--dark);
}

.method-step p {
  font-size: 15px;
  color: var(--mid);
  line-height: 1.7;
}

/* ─── BUTTONS ─── */
.cta-btn,
.btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.2s;
  cursor: pointer;
  background: none;
  align-self: flex-start;
  /* rounded off to echo the circular M2M badge */
  border-radius: 999px;
}

.cta-btn-primary,
.btn-primary {
  border-color: var(--coral);
  color: var(--coral);
}
.cta-btn-primary:hover,
.btn-primary:hover { background: var(--coral); color: var(--cream); }

.cta-btn-filled,
.btn-filled {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--cream);
}
.cta-btn-filled:hover,
.btn-filled:hover {
  /* the bright gold of the header's top line, with dark text for contrast */
  background: #c4a35a;
  border-color: #c4a35a;
  color: var(--dark);
}

/* ─── THE BOOKING BUTTON ───
   The one control on the site that actually takes a client to payment, so it
   is allowed to look like nothing else: the filled block sits inside its own
   thin ring with clear space between, and the same band of light that crosses
   the framework pyramid crosses it. */
.cta-btn-book {
  position: relative;
  overflow: hidden;
  border-color: var(--coral);
  background: var(--coral);
  color: var(--cream);
  outline: 1px solid var(--coral);
  outline-offset: 5px;
}
.cta-btn-book:hover {
  background: #c4a35a;
  border-color: #c4a35a;
  outline-color: #c4a35a;
  color: var(--dark);
}

/* The crest, borrowed from .pyr-sweep: a soft band, brightest at its centre,
   angled and carried across the block. translateX is in the band's own widths;
   the long parked tail paces the repeats, as on the pyramid. */
.cta-btn-book::after {
  content: "";
  position: absolute;
  top: -80%;
  left: 0;
  width: 36%;
  height: 260%;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.07) 28%,
    rgba(255, 255, 255, 0.2) 44%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.2) 56%,
    rgba(255, 255, 255, 0.07) 72%,
    rgba(255, 255, 255, 0) 100%);
  transform: rotate(18deg) translateX(-360%);
  animation: book-sheen 5s linear infinite;
  pointer-events: none;
}

@keyframes book-sheen {
  0%   { transform: rotate(18deg) translateX(-360%); }
  55%  { transform: rotate(18deg) translateX(480%); }
  100% { transform: rotate(18deg) translateX(480%); }
}

.cta-btn-dark,
.btn-dark {
  border-color: var(--cream);
  color: var(--cream);
}
.cta-btn-dark:hover,
.btn-dark:hover { background: var(--cream); color: var(--dark); }

.cta-btn-outline {
  border-color: var(--dark);
  color: var(--dark);
}
.cta-btn-outline:hover { background: var(--dark); color: var(--cream); }

/* ─── ABOUT BLOCK ─── */
.about {
  background: var(--brass-light);
  border-top: 1px solid var(--light-line);
  padding: 32px 0 12px;
}

/* ─── FOOTER ─── */
.site-footer {
  background: var(--dark);
  color: rgba(249,247,244,0.5);
  padding: 32px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 6px solid var(--coral);
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer a {
  color: rgba(249,247,244,0.5);
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer a:hover { color: var(--coral); }

.footer-contact {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
  font-style: normal;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(249,247,244,0.5);
}

/* QFC accreditation mark — white-out version on transparent background,
   opacity matched to the surrounding footer text so it sits quietly */
.footer-qfc-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.55;
}

.footer-contact-item svg {
  flex-shrink: 0;
  color: var(--coral);
  opacity: 1;
}

.footer-brand {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--cream);
  text-transform: uppercase;
}

.footer-legal {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── ARTICLE / EDITORIAL CONTENT ─── */
.article-content h2 {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--dark);
  margin: 48px 0 20px;
  line-height: 1.2;
}

.article-content h3 {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--dark);
  margin: 32px 0 16px;
}

.article-content p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--mid);
  margin-bottom: 20px;
}

.article-content p strong { color: var(--dark); font-weight: 500; }
.article-content p em { font-style: italic; }

.article-content ul,
.article-content ol {
  margin: 20px 0 28px 20px;
  font-size: 17px;
  color: var(--mid);
  line-height: 1.8;
}

.article-content ul li,
.article-content ol li { margin-bottom: 8px; }

.article-content blockquote {
  border-left: 3px solid var(--coral);
  padding: 24px 36px;
  margin: 32px 0;
  background: var(--coral-light);
  border-radius: 0 4px 4px 0;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: var(--dark);
}

/* ─── ARTICLE LIST CARDS ─── */
.article-card {
  border-bottom: 1px solid var(--light-line);
  padding: 32px 0;
}

.article-card:first-child { padding-top: 0; }
.article-card:last-child { border-bottom: none; }

.article-card__meta {
  display: flex;
  gap: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--brass);
  text-transform: uppercase;
  margin-bottom: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.article-card__title {
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
}

.article-card__title a { color: var(--dark); }
.article-card__title a:hover { color: var(--coral); }

.article-card__excerpt {
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 14px;
  font-size: 16px;
}

.article-card__link {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral-text);
  text-decoration: none;
}

.article-card__link:hover { color: var(--brass); }

/* ─── TESTIMONIAL CARDS ─── */
/* Testimonial cards pick up the house details: white ground, generous
   radius, a ghost quote mark, gradient avatar coins, and a gentle lift
   with a coral edge on hover. */
.testimonial {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--light-line);
  padding: 40px 32px 28px;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease, border-color 0.4s ease;
}
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: -14px;
  left: 18px;
  font-family: Georgia, serif;
  font-size: 120px;
  line-height: 1;
  color: var(--coral);
  opacity: 0.14;
  pointer-events: none;
}
.testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(26, 26, 26, 0.13);
  border-color: rgba(194, 93, 69, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .testimonial:hover { transform: none; box-shadow: none; }
}

.testimonial blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  color: var(--dark);
  margin: 0 0 20px;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--light-line);
  padding-top: 16px;
}

.testimonial__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--brass));
  box-shadow: 0 4px 12px rgba(194, 93, 69, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--cream);
  flex-shrink: 0;
}

.testimonial__name {
  font-weight: 500;
  font-size: 14px;
  color: var(--dark);
  margin: 0;
}

.testimonial__role {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--brass);
  margin: 0;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}

/* ─── FORMS ─── */
/* Contact layout: details beside the form on desktop, stacked on mobile */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Pale panel that lifts the contact form off the page */
.contact-form-panel {
  background: #ffffff;
  border: 1px solid var(--light-line);
  border-radius: 22px;
  padding: clamp(26px, 3.5vw, 44px);
  box-shadow: 0 16px 44px rgba(26, 26, 26, 0.07);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}

.form-input {
  padding: 14px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid #8f8676;
  /* rounded to match the pill buttons; textareas keep a softer corner below */
  border-radius: 999px;
  padding-left: 20px;
  background: var(--cream);
  color: var(--dark);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(194, 93, 69, 0.3);
}

.form-input::placeholder { color: var(--brass); opacity: 0.6; }

textarea.form-input {
  min-height: 120px;
  resize: vertical;
  font-family: 'DM Sans', sans-serif;
  border-radius: 18px;
}

/* ─── SIDEBAR ─── */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  margin-top: 40px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-box {
  background: var(--brass-light);
  border: 1px solid var(--light-line);
  padding: 24px;
  border-radius: 4px;
}

.sidebar-box h4 {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
}

.sidebar-box p {
  font-size: 14px;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 12px;
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.topic-tag {
  display: inline-block;
  padding: 4px 10px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--brass);
  border: 1px solid var(--light-line);
  border-radius: 3px;
  background: var(--cream);
  transition: border-color 0.2s, color 0.2s;
}

.topic-tag:hover { border-color: var(--coral); color: var(--coral-text); }

/* ─── UTILITIES ─── */
.text-center { text-align: center; }
.mt-xl { margin-top: 48px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 1000;
  background: var(--dark);
  color: var(--cream);
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 8px;
}

/* ─── DISCLAIMER ─── */
.disclaimer {
  font-size: 14px;
  color: var(--brass);
  font-style: italic;
  padding: 20px 24px;
  background: var(--brass-light);
  border-left: 3px solid var(--brass);
  border-radius: 0 4px 4px 0;
  margin: 32px 0;
}

.disclaimer strong { color: var(--dark); font-style: normal; }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero h1,
.hero-subtitle,
.hero-eyebrow,
.hero-cta { animation: fadeUp 0.7s ease both; }

.hero-eyebrow { animation-delay: 0s; }
.hero h1 { animation-delay: 0.1s; }
.hero-subtitle { animation-delay: 0.2s; }
.hero-cta { animation-delay: 0.3s; }

/* ─── M2M FRAMEWORK ─── */
.level-card {
  margin: 0;
  padding: 40px 0;
  border-top: 1px solid var(--light-line);
  position: relative;
  background: #ffffff;
}
.level-card--alt { background: var(--cream); }

.level-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 56px;
}

/* The level number sits in a circular coral-to-brass ring, in keeping with
   the M2M roundel and the pill buttons. Inner disc matches the card ground. */
.level-badge {
  display: grid;
  place-content: center;
  text-align: center;
  width: 104px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, var(--coral), var(--brass), var(--coral));
  position: relative;
}
.level-badge::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #ffffff;
}
.level-card--alt .level-badge::before { background: var(--cream); }
.level-badge > * { position: relative; }

.level-number {
  font-family: Georgia, serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--coral);
}

.level-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

.level-title-block h2 {
  font-family: Georgia, serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.15;
  margin-bottom: 10px;
}

.level-tagline {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--brass);
  line-height: 1.5;
}

.level-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.level-col-left,
.level-col-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.level-section h3 {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--light-line);
}

.level-section p {
  font-size: 16px;
  color: var(--mid);
  line-height: 1.75;
}

.level-section p strong { color: var(--dark); font-weight: 500; }

.shift-block {
  background: var(--coral-light);
  border-left: 3px solid var(--coral);
  padding: 20px 24px;
  margin-top: 4px;
  border-radius: 0 4px 4px 0;
}

.milestone {
  margin-top: 0;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--brass);
  line-height: 1.6;
}

/* ─── RESPONSIVE ─── */

/* Tier 1: tighten nav spacing so the full logo wordmark survives on 1440px laptops */
@media (max-width: 1500px) {
  .site-header { padding: 23px 32px; }
  .nav-desktop ul { gap: 18px; }
  .nav-desktop a { font-size: 12px; letter-spacing: 0.08em; }
  .nav-cta { padding: 6px 10px; }
}

/* Tier 2: drop the wordmark (badge still carries the brand) to keep the full nav */
@media (max-width: 1340px) {
  .site-logo__name { display: none; }
}

/* Tier 3: once the centred text block reaches the badge, slide it off-screen
   leaving only the arrow as a hint (prevents overlap on narrow laptops/tablets).
   Tapping the arrow slides the badge into view (readable, tappable to book);
   tapping the arrow again slides it back off-screen. Arrow flips direction
   to show which way it will move next. */
@media (max-width: 1200px) {
  .hero { overflow-x: visible; }
  .hero-book-wrap {
    transform: translateX(-150px);
  }
  .hero-book-wrap.is-open {
    transform: translateX(0);
  }
  .hero-book-arrow {
    display: block;
    position: absolute;
    top: 50%;
    right: -34px;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    transform: translateY(-50%);
  }
  .hero-book-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--cream);
    border-right: 2px solid var(--cream);
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.9;
    transition: transform 0.3s ease;
  }
  .hero-book-wrap.is-open .hero-book-arrow::before {
    transform: translate(-50%, -50%) rotate(225deg);
  }
}

/* The footer sits on one line only above roughly 1590px. Below that it wraps,
   and space-between leaves each wrapped line flush left, which reads as broken.
   Centre the lines as soon as wrapping is possible; the full stack at 1060px
   below then takes over. */
@media (max-width: 1600px) {
  .site-footer {
    justify-content: center;
    text-align: center;
  }
  /* The contact block wraps independently of the footer, so it needs centring
     of its own — otherwise QFC drops to a second line flush left. */
  .footer-contact {
    justify-content: center;
  }
}

@media (max-width: 1060px) {
  .site-header { padding: 23px 24px 23px 48px; }
  .nav-desktop { display: none; }
  .nav-toggle { display: block; }
  .nav-mobile { padding: 32px 24px 32px; }

  /* Type scales fluidly via clamp() in the base rules — no font-size overrides
     here, so headings never snap to a different size mid-resize. */
  .hero { padding-bottom: 48px; }
  .hero h1 { margin-bottom: 20px; }
  .hero-subtitle { margin-bottom: 32px; }
  .hero-tagline { margin-bottom: 12px; }

  .section { padding: 40px 0; }

  .layout-with-sidebar { grid-template-columns: 1fr; gap: 32px; }

  .level-body { grid-template-columns: 1fr; gap: 32px; }
  .level-header { grid-template-columns: auto 1fr; gap: 20px; }

  .site-footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    text-align: center;
    padding: 24px;
  }

  /* Stacked footer resolves to five centred lines:
     1) brand  2) address  3) tel  4) email  5) QFC · Legal
     footer-contact is flattened (display: contents) so its items become
     flex items of the footer itself, letting QFC wrap onto the same
     trailing row as Legal instead of being trapped inside the address. */
  .footer-contact {
    display: contents;
  }
  .footer-brand,
  .footer-contact-item:nth-child(1),
  .footer-contact-item:nth-child(2),
  .footer-contact-item:nth-child(3) {
    flex-basis: 100%;
    justify-content: center;
  }
  .footer-contact-item {
    justify-content: center;
  }

}

/* Keep the three-line footer intact a little further down before the
   contact items are forced to stack */
@media (max-width: 700px) {
  .footer-contact { gap: 10px 12px; }
  .footer-contact-item { font-size: 13px; letter-spacing: 0.04em; }
}

/* Content tier: collapse multi-column grids only when the columns genuinely get
   cramped — not at the nav breakpoint — so the text measure steps down once. */
@media (max-width: 820px) {
  .foundations-grid,
  .methodology-steps { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .foundations-grid,
  .methodology-steps { grid-template-columns: 1fr; }

  .method-step:first-child { border-top: none; padding-top: 0; }
  .level-number { font-size: 42px; }
}


/* ─── M2M PYRAMID (m2m-framework.html) ─── */
/* The artwork is a flat PNG, so the levels are not separate shapes and cannot
   be animated individually. The wave is instead a band of light laid over the
   image and masked to the PNG's own alpha channel, which confines it to the
   pyramid's silhouette exactly. */
.m2m-pyramid {
  position: relative;
  display: block;
  margin: 0 auto;
}

.m2m-pyramid img { width: 100%; display: block; }

.pyr-wave { display: none; }

/* Only run the wave where masking is supported; without it the band would
   show as a rectangle over the whole image rather than inside the pyramid. */
@supports (mask-image: url(a.png)) or (-webkit-mask-image: url(a.png)) {
  .pyr-wave {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: url('../assets/images/pyramid.png');
            mask-image: url('../assets/images/pyramid.png');
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
}

/* The crest: a soft band of light, brightest at its centre. Sized and placed so
   that, once rotated about its own centre, it spans the pyramid comfortably. */
.pyr-sweep {
  position: absolute;
  top: 37%;
  left: -50%;
  width: 200%;
  height: 26%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.06) 26%,
    rgba(255, 255, 255, 0.18) 42%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0.18) 58%,
    rgba(255, 255, 255, 0.06) 74%,
    rgba(255, 255, 255, 0) 100%);
  animation: pyr-sweep 6s linear infinite;
}

/* 60.28deg is atan(1.752), the slope every boundary between levels sits at, so
   the rotated band lies parallel to them. translateY then acts along the band's
   own perpendicular, carrying it from the bottom-left corner through levels 1
   to 5 and out along the right slope. The percentages are of the band's own
   height: it starts clear of the bottom-left corner and finishes clear of the
   right slope. Most of the cycle is the crossing; the tail is spent parked
   off-shape, which paces the repeats. */
@keyframes pyr-sweep {
  0%   { transform: rotate(60.28deg) translateY(338%); }
  60%  { transform: rotate(60.28deg) translateY(-159%); }
  100% { transform: rotate(60.28deg) translateY(-159%); }
}

@media (prefers-reduced-motion: reduce) {
  .pyr-sweep { animation: none; display: none; }
  .cta-btn-book::after { animation: none; display: none; }
}

/* Money-back seal: circular badge echoing the M2M roundel — ring of slowly
   revolving DM Mono text around a glowing 100% core. Sits beside the
   guarantee copy on desktop, below it on narrow screens. */
.guarantee-flex {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
}
.guarantee-copy { flex: 1 1 420px; }
.guarantee-seal {
  flex: 0 0 auto;
  width: clamp(170px, 20vw, 220px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  margin-inline: auto;
}
.guarantee-seal svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.seal-ring-text {
  animation: sealSpin 26s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
.seal-core {
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at 35% 30%, rgba(194, 93, 69, 0.4), rgba(194, 93, 69, 0.1) 70%);
  border: 1px solid rgba(194, 93, 69, 0.6);
  box-shadow: 0 0 40px rgba(194, 93, 69, 0.35), inset 0 0 30px rgba(194, 93, 69, 0.2);
  animation: sealGlow 4s ease-in-out infinite;
  font-family: Georgia, serif;
  color: var(--cream);
}
@keyframes sealGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(194, 93, 69, 0.3), inset 0 0 24px rgba(194, 93, 69, 0.18); }
  50% { box-shadow: 0 0 56px rgba(194, 93, 69, 0.55), inset 0 0 36px rgba(194, 93, 69, 0.3); }
}
.seal-core .pct {
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
}
.seal-core .lbl {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c4a35a;
  margin-top: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .seal-ring-text { animation: none; }
  .seal-core { animation: none; }
}

/* Scroll cue: quiet SCROLL wordmark at the foot of the hero with a thin
   line of light that repeatedly draws down and fades, inviting the reader on */
.hero-scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(249, 247, 244, 0.65);
  text-decoration: none;
}
.hero-scroll-cue:hover { color: var(--cream); }
.hero-scroll-cue::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--coral), transparent);
  animation: cueDrop 2s ease-in-out infinite;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue::after { animation: none; opacity: 0.6; }
}
/* phones scroll by instinct, and the stacked hero CTAs need the room */
@media (max-width: 700px) {
  .hero-scroll-cue { display: none; }
}

/* Button motion on rollover: every button keeps its original look at rest,
   then lifts slightly and a band of light crosses it. The sheen uses ::before
   because .cta-btn-book already owns ::after for its idle crest. */
.cta-btn,
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.2s,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
}
.cta-btn::before,
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.55s ease;
}
.cta-btn:hover,
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(26, 26, 26, 0.18);
}
.cta-btn:hover::before,
.btn:hover::before { left: 130%; }
.cta-btn-filled:hover,
.btn-filled:hover,
.cta-btn-book:hover { box-shadow: 0 12px 26px rgba(194, 93, 69, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .cta-btn, .btn { transition: all 0.2s; }
  .cta-btn:hover, .btn:hover { transform: none; box-shadow: none; }
  .cta-btn::before, .btn::before { display: none; }
}

/* Scroll reveal — classes applied by js/scroll-reveal.js; without JS nothing
   is hidden, and reduced-motion visitors never get the classes at all */
.reveal-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-init.reveal-in {
  opacity: 1;
  transform: none;
}

/* ─── KEEP IN TOUCH INLINE FORM (framework page) ─── */
/* The revealed form and its success note sit directly under the CTA pair;
   each button there is flex: 1 (half the row minus half the 16px gap), so
   this width keeps the input bars the same length as the button above. */
#keep-in-touch-form,
#keep-in-touch-success {
  max-width: calc(50% - 8px);
  margin-top: 32px;
}

@media (max-width: 600px) {
  #keep-in-touch-form,
  #keep-in-touch-success {
    max-width: 100%;
  }
}