/* Self-hosted so the site makes no third-party font requests. Montserrat is
   a variable font covering 400-700; Lato ships as static weights. */
@font-face { font-family:'Montserrat'; src:url('/fonts/Montserrat-var.woff2') format('woff2-variations'),
  url('/fonts/Montserrat-var.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'Lato'; src:url('/fonts/Lato-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Lato'; src:url('/fonts/Lato-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap; }

/* =========================================================
   The Marketing Mix — shared stylesheet
   ========================================================= */

:root {
  --sage: #9ba88d;
  --sage-dark: #8f9b82;
  --sage-darker: #4a5a3c;
  /* Page ground is near-white on the live site; --cream is the warmer
     card surface, sampled from the logo artwork so cards blend into it. */
  --page-bg: #f8f8f8;
  --cream: #efe8e1;
  --panel: #f5f3ef;
  /* Headings are muted sage with an orange full stop on the live site,
     not terracotta. Live serves #8b977e/#eb6e3e on home and services and
     #8f9b82/#f27141 on packages, recent work and blog titles — a difference
     of a couple of percent, so one pair is used for both. */
  --heading-dot: #f27141;
  --charcoal: #2f3e3a;
  --charcoal-soft: #4a5650;
  --terracotta: #d2632e;
  --terracotta-dark: #b4501f;
  --peach: #f6dccf;
  --peach-border: #e8b79e;
  --text-body: #55605a;
  --white: #ffffff;

  --font-heading: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Lato', 'Segoe UI', Arial, sans-serif;

  --max-width: 1200px;
  --radius: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--page-bg);
  /* Live theme: body 16px desktop / 14px mobile, line-height 1.2. */
  font-size: 1rem;
  line-height: 1.2;
}
@media (max-width: 800px) { body { font-size: 0.875rem; } }

/* Live heading scale, large breakpoint. Headings are weight 400; the live
   markup wraps heading text in <strong>, which is what makes them look bold. */
h1 { font-size: 2.8125rem; }
h2 { font-size: 2.3125rem; }
h3 { font-size: 1.9375rem; }
h4 { font-size: 1.625rem; }
h5 { font-size: 1.375rem; }
h6 { font-size: 1.125rem; }
@media (max-width: 800px) {
  h1 { font-size: 2.1875rem; }
  h2 { font-size: 1.8125rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.875rem; }
}
p { margin: 0 0 1em; }

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--sage-dark);
  margin: 0 0 0.5em;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  /* Horizontal only. The `padding: 0 2rem` shorthand this replaces also set
     vertical padding to 0, and a class beats the `section { padding: 4rem 0 }`
     element rule — so every <section class="container"> lost its vertical
     spacing and its content ran straight into the footer. */
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.65em 1.4em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }

.btn-primary {
  background: var(--sage);
  color: var(--charcoal);
  border-color: var(--sage);
}
.btn-outline {
  background: transparent;
  color: var(--sage-dark);
  border-color: var(--sage-dark);
}
.btn-outline.on-dark {
  color: var(--cream);
  border-color: var(--cream);
}
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--sage);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.brand-mark {
  background: var(--cream);
  padding: 0.6rem;
  width: 110px;
  flex-shrink: 0;
  /* Visually on the far right of the header, kept first in the markup so
     it's still the first thing a keyboard/screen-reader user reaches. */
  order: 2;
}
.brand-mark img { width: 100%; }

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1;
  order: 1;
}
.header-cta {
  font-size: 0.85rem;
  color: var(--white);
}
.header-cta a {
  text-decoration: underline;
  font-weight: 600;
}

.main-nav { position: relative; }
.main-nav > ul {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.has-dropdown { position: relative; }
.main-nav a.nav-link {
  color: var(--white);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a.nav-link.active,
.main-nav a.nav-link:hover {
  border-bottom-color: var(--white);
}
.nav-caret { font-size: 0.6em; margin-left: 0.2em; }

.dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--sage);
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  padding: 0.4rem 0;
  z-index: 200;
}
.has-dropdown:hover .dropdown-panel,
.has-dropdown:focus-within .dropdown-panel {
  display: block;
}
.dropdown-panel li { list-style: none; }
.dropdown-panel a {
  display: block;
  padding: 0.6rem 1.2rem;
  color: var(--white);
  font-size: 0.9rem;
  white-space: nowrap;
}
.dropdown-panel a.active,
.dropdown-panel a:hover {
  text-decoration: underline;
}
.dropdown-panel.dots { right: 0; left: auto; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--white);
  color: var(--white);
  font-size: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius);
  cursor: pointer;
}

@media (max-width: 880px) {
  .header-right { align-items: flex-start; width: 100%; }
  .header-cta { display: none; }
  .nav-toggle { display: block; }
  .main-nav > ul { display: none; flex-direction: column; align-items: flex-start; width: 100%; gap: 0; }
  .main-nav.open > ul { display: flex; }
  .main-nav > ul > li { width: 100%; }
  .main-nav a.nav-link { display: block; padding: 0.6rem 0; width: 100%; }
  .dropdown-panel { position: static; display: none; box-shadow: none; padding-left: 1rem; }
  .has-dropdown.open .dropdown-panel { display: block; }
  .dropdown-panel.dots { right: auto; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  padding: 4rem 2rem 5rem;
  text-align: center;
  color: var(--white);
  /* The live site washes the sky photo with a 50% near-white overlay, which
     is what keeps the clouds soft pink/blue rather than bold red. */
  background: linear-gradient(rgba(248,248,248,0.5), rgba(248,248,248,0.5)),
              url('/images/hero-sky.jpg') center/cover no-repeat, #e9b6a8;
}
.hero-card {
  background: var(--cream);
  max-width: 660px;
  margin: 0 auto 2.5rem;
  padding: 2.5rem 2rem;
}
.logo-lockup { display: flex; align-items: center; gap: 1.2rem; justify-content: center; }
.logo-lockup .mark { width: 90px; flex-shrink: 0; }
.logo-lockup .word {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--charcoal);
  font-size: 2.1rem;
  line-height: 1.05;
  text-align: left;
}
.hero-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--charcoal);
  font-size: 0.9rem;
  margin-top: 1.2rem;
}
.logo-lockup.small { gap: 0.7rem; }
.logo-lockup.small .mark { width: 44px; }
.logo-lockup.small .word { font-size: 1.15rem; }
.logo-lockup.small .hero-tagline { font-size: 0.5rem; letter-spacing: 0.12em; margin-top: 0.3rem; }
.hero-sub {
  max-width: 760px;
  margin: 0 auto 2rem;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* ---------- Page hero banner (inner pages) ---------- */
.page-banner {
  position: relative;
  padding: 3rem 2rem;
  color: var(--white);
  /* Each inner page carries its own darkened photo, matching the live site. */
  background: var(--charcoal);
  background-size: cover;
  background-position: center;
}
.banner-about {
  background-image: linear-gradient(rgba(201,209,197,0.6), rgba(201,209,197,0.6)),
                    url('/images/bg-about.jpg');
}
.banner-blog {
  background-image: linear-gradient(rgba(47,62,58,0.5), rgba(47,62,58,0.5)),
                    url('/images/blog-hero.jpg');
}
.banner-privacy {
  background-image: linear-gradient(rgba(47,62,58,0.62), rgba(47,62,58,0.62)),
                    url('/images/bg-privacy.jpg');
}
.banner-legal {
  background-image: linear-gradient(rgba(47,62,58,0.62), rgba(47,62,58,0.62)),
                    url('/images/bg-legal.jpg');
}

.page-banner h1 {
  color: var(--white);
  text-align: center;
  font-size: 2rem;
  position: relative;
}
.page-banner h1 .dot { color: var(--heading-dot); }

/* ---------- Generic sections ---------- */
section { padding: 4rem 0; }
/* Vertical padding only — this class is always used alongside .container,
   and the shorthand `padding: 2rem 0` would override .container's
   `padding: 0 2rem`, leaving content flush against the viewport edge. */
.section-tight { padding-top: 2rem; padding-bottom: 2rem; }

.eyebrow-heading {
  color: var(--sage-dark);
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
}
.eyebrow-heading .dot { color: var(--heading-dot); }
.olive-heading {
  color: var(--sage-dark);
  font-size: 1.8rem;
}
.olive-heading .dot { color: var(--heading-dot); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; }
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
@media (max-width: 900px) {
  .three-col { grid-template-columns: 1fr; }
}

/* Square corners by default, matching the live site's rectangle geometry. */
.card-photo { width: 100%; overflow: hidden; margin-bottom: 1.2rem; }
/* Home cards and the blog portrait use the live rounded-rectangle: 12px. */
.card-photo.rounded, .photo.rounded { border-radius: 12px; }

.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.btn-row.spread { justify-content: space-between; }

/* ---------- Service page template ---------- */
.service-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 3rem 0 1rem; align-items: start; }
@media (max-width: 800px) { .service-hero { grid-template-columns: 1fr; } }
.service-block { margin: 1.6rem 0; }
.service-block h3 { color: var(--terracotta); font-size: 1.1rem; letter-spacing: 0.03em; margin-bottom: 0.4rem; }
.service-block ul { margin: 0; padding-left: 1.2rem; }
.addon-note { margin-top: 1.5rem; }
.addon-examples { font-style: italic; }
.addon-examples strong { font-style: normal; }

/* ---------- Services grid (landing) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } }
.service-card h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.service-card.accent h3, .service-card.accent p { color: var(--terracotta); }
.service-card p { margin-bottom: 1rem; }

/* ---------- How it works ---------- */
.how-list dt {
  color: var(--terracotta);
  font-weight: 700;
  font-family: var(--font-heading);
  margin-top: 1.4rem;
}
.how-list dd { margin: 0.2rem 0 0; }

.flow-diagram { background: var(--panel); padding: 2rem; }
.flow-step { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.flow-badge {
  flex-shrink: 0;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--charcoal);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.7rem;
  text-align: center; letter-spacing: 0.03em;
  border: 3px solid var(--sage);
}
.flow-text { background: var(--white); padding: 0.8rem 1rem; border-radius: 20px; font-size: 0.85rem; }
.flow-text strong { display: block; color: var(--charcoal); font-size: 0.9rem; }

/* ---------- Packages ---------- */
.package-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  padding: 2.4rem 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.package-row:first-of-type { border-top: none; }
@media (max-width: 800px) { .package-row { grid-template-columns: 1fr; } }
.package-name { color: var(--terracotta); font-size: 1.3rem; font-family: var(--font-heading); font-weight: 700; }
.package-formula { color: var(--terracotta); font-size: 1.1rem; margin-bottom: 0.8rem; }
.package-formula strong { color: var(--sage-dark); }
.package-commit { color: var(--terracotta); font-size: 0.95rem; margin-bottom: 0.8rem; }
.package-includes-label { font-style: italic; margin-bottom: 0.4rem; }

/* ---------- Recent work ---------- */
.case-study .client-logo {
  width: 130px; height: 130px; border-radius: 50%;
  object-fit: cover; object-position: center;
  margin-bottom: 1.2rem; background: var(--white);
}
.case-study .tags { font-weight: 600; color: var(--charcoal); margin-bottom: 0.3rem; }
.case-study .scope { font-style: italic; margin-bottom: 0.6rem; }
.case-study .result { font-weight: 600; color: var(--charcoal); }
.case-study blockquote { font-style: italic; margin: 0.8rem 0 0; padding-left: 0.8rem; border-left: 3px solid var(--sage); }
.trusted-line { text-align: center; color: var(--terracotta); font-size: 1.5rem; font-family: var(--font-heading); max-width: 800px; margin: 3rem auto 0; }

/* ---------- Contact ---------- */
/* Netlify Forms honeypot — hidden from people, visible to bots that fill
   in every field. A submission with this field set is discarded. */
.hp-field { display: none; }

.contact-page { background: var(--sage); color: var(--white); min-height: 60vh; }
.contact-page h1 { color: var(--white); }
.contact-form label { display: block; font-size: 0.85rem; margin: 1.1rem 0 0.3rem; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--white);
  background: transparent;
  color: var(--white);
  padding: 0.6rem 0.8rem;
  font-family: var(--font-body);
  border-radius: 2px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,0.6); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .required-note { font-size: 0.8rem; margin-top: 1rem; }
.contact-form .consent { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; font-size: 0.85rem; }
.contact-form .consent input { width: auto; }
.contact-form .btn-primary { margin-top: 1.2rem; background: var(--cream); border-color: var(--cream); }
.contact-email-line { text-align: center; font-weight: 700; margin: 3rem 0 2rem; font-size: 1.05rem; }
.contact-email-line a { text-decoration: underline; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
@media (max-width: 800px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-number { font-size: 2.6rem; color: var(--sage); font-family: var(--font-heading); font-weight: 700; }
.blog-teaser h3 { color: var(--terracotta); }

.post-hero { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .post-hero { grid-template-columns: 1fr; } }
.post-hero .photo { min-height: 320px; }
.post-hero .content { padding: 3rem; }
.post-hero.reverse { direction: rtl; }
.post-hero.reverse .content { direction: ltr; }
.post-body { padding: 3rem 0; }
.post-body h2, .post-body h3 { color: var(--terracotta); }
.post-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 2rem 0; }
@media (max-width: 900px) { .post-columns { grid-template-columns: 1fr; } }
.post-columns > div { background: var(--white); padding: 1.5rem; }
.post-quote-block { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; padding: 3rem 0; }
@media (max-width: 800px) { .post-quote-block { grid-template-columns: 1fr; } }
.post-quote-block blockquote { color: var(--terracotta); font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; }
.post-quote-block .spoiler { font-style: italic; }

.inline-form { background: var(--white); padding: 2rem; margin-top: 2rem; }
.inline-form label { display: block; font-size: 0.85rem; margin: 1rem 0 0.3rem; }
.inline-form input, .inline-form textarea {
  width: 100%; border: none; background: var(--peach);
  padding: 0.7rem 0.9rem; border-radius: 2px; font-family: var(--font-body);
}
.inline-form textarea { min-height: 150px; resize: vertical; }
.inline-form .consent { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; font-size: 0.8rem; }
.inline-form .consent input { width: auto; accent-color: var(--peach-border); }

/* ---------- Legal / policy pages ---------- */
.legal-body h2 { color: var(--white); font-size: 1.05rem; margin-top: 1.6rem; }
.legal-body p, .legal-body div { margin: 0.2rem 0; }
.legal-page-inner { color: var(--white); }

/* ---------- Photography ---------- */
.photo {
  /* height:auto, not 100%. A percentage height here resolves against the
     parent only when that parent has a definite height, so the same image
     rendered inside a stretched grid cell would balloon to the row height.
     auto keeps the image on its own aspect ratio in every context. */
  width: 100%; height: auto; min-height: 260px;
  object-fit: cover; object-position: center;
  display: block;
}
/* Mary's headshot sits in an oval on the original site, using a tighter
   crop of the source photo (the live site serves l179,t10,w888,h1608), so
   the image file itself is already cropped to that framing. Height is
   capped at the 508px the live layout uses. */
.photo.portrait {
  min-height: 0;
  width: auto;
  max-width: 100%;
  max-height: 508px;
  /* The live site uses border-radius:500px, which the browser clamps against
     the box — giving straight sides with fully rounded ends, not an ellipse. */
  border-radius: 500px;
  margin-left: auto;
}
@media (max-width: 800px) { .photo.portrait { margin: 0 auto; } }

/* ---------- Footer ---------- */
/* No top margin: under a full-bleed section it showed as a pale strip
   between that section and the footer (most visible on About). */
.site-footer { background: var(--sage); color: var(--white); padding: 3rem 0 1.5rem; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; }
@media (max-width: 800px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 0.3rem; }
.footer-nav a { display: inline-block; padding: 0.3rem 0.6rem; }
.footer-nav a.active { background: var(--white); color: var(--charcoal); }
.footer-trustee { margin-top: 2rem; font-size: 0.9rem; }
.footer-trustee a { text-decoration: underline; }
.footer-brand { text-align: right; }
.footer-brand .footer-logo-link { display: inline-block; margin-left: auto; }
.footer-brand .footer-logo { width: 190px; height: auto; min-height: 0; }
.footer-meta { text-align: right; font-size: 0.85rem; margin-top: 1rem; line-height: 1.8; }
.footer-meta a { text-decoration: underline; }
@media (max-width: 800px) { .footer-brand, .footer-meta { text-align: left; } .footer-brand .footer-logo-link { margin-left: 0; } }

/* ---------- misc ---------- */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.italic { font-style: italic; }

/* The How It Works infographic mirrors the live site, where the graphic
   links through to the downloadable PDF. The text flow steps below it carry
   the same content in a form that stays readable on small screens. */
.flow-infographic { width: 100%; max-width: 520px; margin: 0 auto; border-radius: var(--radius); }

/* On the live site Mary's portrait sits low in the column, level with her
   name and the buttons, rather than at the top. align-self overrides the
   section's inline align-items:start for this one column. */
.about-layout > .about-text { max-width: 100%; }
/* The live site overlaps the portrait onto the lower right of the text with a
   grid, which only holds while the text stays short enough not to collide.
   Floating it instead gives the same look and lets text wrap at any size.
   Width is explicit because max-height alone will not constrain a float. */
.about-layout .photo.portrait {
  float: right;
  width: 281px;
  max-width: 42%;
  height: auto;
  max-height: none;
  margin: 0.5rem 0 1.5rem 2.5rem;
  shape-outside: inset(0 round 500px);
  shape-margin: 1rem;
}
.about-layout::after { content: ""; display: block; clear: both; }
@media (max-width: 800px) {
  .about-layout .photo.portrait {
    float: none; width: 281px; max-width: 80%;
    margin: 2rem auto 0; shape-outside: none;
  }
}

/* Home hero: the live site uses one prepared logo image, cropped to a wide
   band, with the headline beneath it. */
.hero-logo { width: 100%; max-width: 560px; margin: 0 auto; }
.hero-h1 { color: var(--charcoal); text-align: center; margin: 1.6rem auto 1.2rem; }
.hero-h1 .dot { color: var(--heading-dot); }
.case-study .feedback-label { font-weight: 700; color: var(--charcoal); margin-bottom: 0.3rem; }

/* Nested submenu under "News & Blog Posts" in the ••• menu, as on the live site. */
.dropdown-panel .has-sub { position: relative; }
.dropdown-sub {
  display: none; position: absolute; top: 0; right: 100%;
  background: var(--sage); min-width: 260px; margin: 0; padding: 0.4rem 0;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.dropdown-panel .has-sub:hover .dropdown-sub,
.dropdown-panel .has-sub:focus-within .dropdown-sub,
.dropdown-panel .has-sub.open .dropdown-sub { display: block; }
@media (max-width: 880px) {
  .dropdown-sub { position: static; display: block; box-shadow: none; padding-left: 1rem; min-width: 0; }
}

/* Inline form validation messages, matching the live site's wording. */
.field-error { color: #ffe2d6; font-size: 0.8rem; margin: 0.25rem 0 0; min-height: 1em; }
.field-error:empty { display: none; }
.inline-form .field-error { color: #a33f12; }