:root {
  --white: #FFFFFF;
  --ivory: #F7F3EA;
  --warm-white: #FCFBF8;
  --ink: #242321;
  --text: #4E4A45;
  --sage: #79846F;
  --olive: #485640;
  --olive-deep: #3F4C39;
  --line: #D8D1C6;
  --line-dark: rgba(255,255,255,.45);
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --shell: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }

.shell {
  width: min(calc(100% - 96px), var(--shell));
  margin-inline: auto;
}

/* Header */
.site-header {
  background: var(--ivory);
  border-bottom: 1px solid rgba(36,35,33,.06);
  position: relative;
  z-index: 5;
}

.nav {
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 38px;
}

.brand {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .29em;
}

.brand-mark {
  display: inline-flex;
  gap: 4px;
}

.brand-mark i {
  width: 9px;
  height: 23px;
  border: 1.2px solid var(--olive);
  border-radius: 50% 8% 50% 8%;
  display: block;
}

.brand-mark i:first-child { transform: rotate(-11deg); }
.brand-mark i:last-child { transform: rotate(169deg); }

.nav-links {
  display: flex;
  gap: 40px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-links a,
.text-link,
.footer-links a {
  transition: opacity .18s ease;
}

.nav-links a:hover,
.text-link:hover,
.footer-links a:hover { opacity: .62; }

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border: 1px solid var(--olive);
  background: var(--olive);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: background .18s ease, transform .18s ease;
}

.button:hover {
  background: var(--olive-deep);
  transform: translateY(-1px);
}

.button-nav {
  justify-self: end;
  min-height: 44px;
}

.menu-toggle, .mobile-nav { display: none; }

/* Hero */
.hero {
  background: var(--ivory);
  border-bottom: 1px solid rgba(36,35,33,.08);
}

.hero-grid {
  display: grid;
  grid-template-columns: 49% 51%;
  min-height: 505px;
}

.hero-copy {
  align-self: center;
  padding: 54px 68px 50px 0;
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(58px, 5.5vw, 82px);
  line-height: .99;
  letter-spacing: -.028em;
}

.rule {
  width: 42px;
  height: 1px;
  background: var(--olive);
  margin: 29px 0 24px;
}

.rule.small { width: 31px; margin: 13px 0 18px; }

.eyebrow {
  margin: 0;
  color: var(--olive);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero-intro {
  max-width: 470px;
  margin: 24px 0 0;
  font-size: 17px;
  color: var(--text);
  line-height: 1.65;
}

.hero-actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.text-link {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--olive);
  border-bottom: 1px solid rgba(72,86,64,.55);
  padding-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.text-link span { font-size: 16px; }

.hero-image {
  overflow: hidden;
  min-height: 505px;
}

.hero-image img {
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
}

/* Services */
.services {
  background: var(--olive-deep);
  color: #F7F3EA;
  padding: 34px 0 34px;
}

.services-heading {
  text-align: center;
}

.eyebrow.light { color: #F7F3EA; }

.rule-light {
  margin: 12px auto 14px;
  background: rgba(247,243,234,.7);
  width: 33px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
}

.service {
  padding: 26px 46px 30px;
  min-height: 285px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service + .service {
  border-left: 1px solid var(--line-dark);
}

.service h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.09;
  font-weight: 400;
}

.service p {
  margin: 0;
  max-width: 330px;
  color: rgba(255,255,255,.88);
  font-size: 15px;
}

.service-link {
  margin-top: auto;
  padding-top: 26px;
  border-bottom: 1px solid rgba(247,243,234,.6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Founder */
.founder {
  background: var(--white);
  padding: 72px 0;
}

.founder-grid {
  display: grid;
  grid-template-columns: 51% 49%;
  gap: 72px;
  align-items: center;
}

.founder-copy {
  max-width: 690px;
}

.founder-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(43px, 4.1vw, 60px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.018em;
}

.founder-copy p {
  color: var(--text);
  max-width: 680px;
}

.founder-copy strong { font-weight: 600; }

.portrait-placeholder {
  justify-self: end;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4/3;
  background:
    linear-gradient(140deg, #EDE6DC, #F8F5F0);
  border: 1px solid #E8E2D9;
  display: grid;
  place-items: center;
  text-align: center;
}

.portrait-inner {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  color: var(--olive);
  background: rgba(255,255,255,.7);
}

.portrait-inner span {
  font-family: var(--serif);
  font-size: 21px;
  text-transform: capitalize;
}

.portrait-inner small {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Inclusion */
.inclusion {
  background: #F3F1EC;
  padding: 36px 0;
  border-top: 1px solid #E7E2D9;
  border-bottom: 1px solid #E7E2D9;
}

.inclusion-grid {
  display: grid;
  grid-template-columns: 1px 1fr;
  gap: 40px;
  max-width: 1090px;
}

.vertical-rule {
  background: var(--olive);
}

.inclusion p {
  margin: 0 0 8px;
  color: var(--text);
  max-width: 900px;
}

/* CTA */
.closing {
  background: var(--white);
}

.closing-row {
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.closing h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 400;
}

/* Footer */
.footer {
  background: var(--warm-white);
  border-top: 1px solid #E6E1D8;
  padding: 38px 0 22px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.15fr .7fr 1.15fr .5fr .9fr;
  gap: 34px;
  align-items: start;
}

.footer-brand {
  display: grid;
  gap: 7px;
  font-size: 12px;
}

.footer-brand-lockup {
  font-size: 16px;
}

.footer-links,
.footer-contact,
.footer-legal {
  display: grid;
  gap: 6px;
  font-size: 12px;
}

.footer-contact span,
.footer-legal span {
  color: #6D6963;
}

.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}

.footer-bottom {
  border-top: 1px solid #E6E1D8;
  margin-top: 28px;
  padding-top: 16px;
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  font-size: 11px;
  color: #74706A;
}

/* Responsive */
@media (max-width: 980px) {
  .shell { width: min(calc(100% - 48px), var(--shell)); }

  .nav {
    grid-template-columns: 1fr auto;
  }

  .nav-links,
  .button-nav {
    display: none;
  }

  .menu-toggle {
    display: grid;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 8px 0 8px 12px;
  }

  .menu-toggle span {
    width: 25px;
    height: 1px;
    background: var(--ink);
  }

  .mobile-nav.open {
    display: grid;
    padding: 22px 24px 28px;
    gap: 16px;
    background: var(--ivory);
    border-top: 1px solid rgba(36,35,33,.08);
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding: 66px 0 48px;
  }

  .hero-image {
    min-height: 420px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service + .service {
    border-left: 0;
    border-top: 1px solid var(--line-dark);
  }

  .founder-grid {
    grid-template-columns: 1fr;
  }

  .portrait-placeholder {
    justify-self: start;
    max-width: 440px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .shell { width: min(calc(100% - 32px), var(--shell)); }

  .nav { min-height: 76px; }
  .brand { font-size: 16px; }

  .hero h1 { font-size: 56px; }
  .hero-intro { font-size: 16px; }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-image { min-height: 310px; }

  .services { padding-top: 48px; }
  .service {
    min-height: auto;
    padding: 35px 10px;
  }

  .service h2 { font-size: 28px; }

  .founder { padding: 58px 0; }
  .founder-copy h2 { font-size: 43px; }

  .inclusion-grid {
    gap: 22px;
  }

  .closing-row {
    min-height: 165px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    justify-content: flex-start;
  }
}

/* About page */
.about-hero {
  background: var(--ivory);
  padding: 78px 0 82px;
  border-bottom: 1px solid rgba(36,35,33,.08);
}
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 90px;
  align-items: center;
}
.about-hero h1 {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(58px, 6vw, 86px);
  line-height: .99;
  letter-spacing: -.028em;
}
.about-deck {
  max-width: 650px;
  margin: 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.7;
}
.about-portrait { max-width: 430px; aspect-ratio: 4/5; }
.about-story { padding: 92px 0 98px; }
.story-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  gap: 90px;
  justify-content: center;
}
.story-role { margin-top: 8px; color: var(--text); font-size: 13px; }
.story-copy p { color: var(--text); margin: 0 0 24px; font-size: 17px; }
.story-copy .lead {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 34px;
  line-height: 1.25;
}
.story-copy .story-close {
  margin-top: 38px;
  font-family: var(--serif);
  color: var(--ink);
  font-size: 30px;
  line-height: 1.3;
}
.experience {
  background: var(--olive-deep);
  color: var(--ivory);
  padding: 78px 0;
}
.experience-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 90px;
}
.experience h2 {
  max-width: 470px;
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(42px, 4.5vw, 62px);
  font-weight: 400;
  line-height: 1.04;
}
.experience-copy p { margin-top: 0; color: rgba(255,255,255,.88); font-size: 16px; }
.experience-notes {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.35);
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.credentials {
  background: var(--olive-deep);
  color: var(--ivory);
  padding: 72px 0 76px;
}
.credentials-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 90px;
  align-items: start;
}
.credentials-copy p {
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: 16px;
  line-height: 1.8;
}
.credentials-copy strong { color: #fff; font-weight: 600; }
.credentials-copy a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.credentials-copy .personal-note {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.78);
}

.about-philosophy { background: #F3F1EC; padding: 70px 0; }
.philosophy-grid {
  max-width: 1050px;
  display: grid;
  grid-template-columns: 1px 1fr;
  gap: 40px;
}
.philosophy-grid h2 {
  margin: 14px 0 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.08;
}
.philosophy-grid p:not(.eyebrow) { max-width: 780px; color: var(--text); }
.philosophy-grid .text-link { margin-top: 12px; }

@media (max-width: 980px) {
  .about-hero-grid, .experience-grid, .credentials-grid { grid-template-columns: 1fr; }
  .about-hero-grid { gap: 48px; }
  .about-portrait { justify-self: start; width: min(100%, 430px); }
  .story-grid { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 640px) {
  .about-hero { padding: 58px 0; }
  .about-hero h1 { font-size: 54px; }
  .about-story { padding: 62px 0; }
  .story-copy .lead { font-size: 29px; }
  .experience { padding: 58px 0; }
  .experience-grid, .credentials-grid { gap: 34px; }
  .credentials { padding: 58px 0; }
}


/* Production interior pages */
.page-hero { background: var(--ivory); padding: 92px 0 82px; border-bottom: 1px solid rgba(42,48,42,.12); }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(54px,7vw,88px); line-height:.98; margin:0; max-width: 900px; }
.page-deck { max-width: 760px; margin: 28px 0 0; font-size: 19px; line-height:1.7; color:var(--text); }
.content-section { padding: 82px 0; background:#fff; }
.content-section.alt { background:#F3F1EC; }
.content-section.dark { background:var(--olive-deep); color:var(--ivory); }
.content-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:90px; align-items:start; }
.content-grid h2, .content-section > .shell > h2 { font-family:var(--serif); font-size:clamp(38px,4.4vw,58px); line-height:1.05; font-weight:400; margin:0; }
.content-copy { max-width:760px; }
.content-copy p { margin:0 0 22px; font-size:16px; line-height:1.82; }
.content-copy p:last-child { margin-bottom:0; }
.content-section.dark .content-copy p { color:rgba(255,255,255,.88); }
.content-section.dark .eyebrow { color:rgba(255,255,255,.7); }
.service-cards { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.32); margin-top:48px; }
.service-card { padding:38px 34px 10px 0; }
.service-card + .service-card { border-left:1px solid rgba(255,255,255,.32); padding-left:34px; }
.service-card h2 { font-family:var(--serif); font-size:35px; line-height:1.08; font-weight:400; margin:0 0 20px; }
.service-card p { color:rgba(255,255,255,.82); min-height:145px; }
.service-card a { color:#fff; }
.split-band { display:grid; grid-template-columns:1fr 1fr; }
.split-panel { padding:76px max(5vw,40px); }
.split-panel:first-child { background:#F3F1EC; }
.split-panel:last-child { background:#fff; }
.split-panel h2 { font-family:var(--serif); font-size:clamp(38px,4vw,52px); font-weight:400; line-height:1.05; margin:0 0 24px; }
.split-panel p { max-width:600px; line-height:1.8; }
.approach-principles { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid rgba(42,48,42,.18); }
.principle { padding:58px 60px 58px 0; border-bottom:1px solid rgba(42,48,42,.18); }
.principle:nth-child(even) { padding-left:60px; border-left:1px solid rgba(42,48,42,.18); }
.principle h2 { font-family:var(--serif); font-weight:400; font-size:40px; line-height:1.08; margin:0 0 20px; }
.principle p { max-width:560px; line-height:1.8; }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.contact-form label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; margin:0 0 9px; }
.form-row { margin-bottom:24px; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; box-sizing:border-box; border:1px solid rgba(42,48,42,.25); background:#fff; padding:14px 15px; font:inherit; color:var(--text); border-radius:0; }
.contact-form textarea { min-height:150px; resize:vertical; }
.form-note { font-size:12px; line-height:1.65; color:#666; margin:16px 0 24px; }
.form-note a { color:inherit; }
.legal-copy { max-width:820px; }
.legal-copy h2 { font-family:var(--serif); font-weight:400; font-size:34px; margin:42px 0 14px; }
.legal-copy p,.legal-copy li { line-height:1.8; }
.legal-copy .notice { padding:22px 24px; background:#F3F1EC; border-left:2px solid var(--olive-deep); }
.future-ready { display:none; }
@media (max-width: 900px){ .content-grid,.contact-grid{grid-template-columns:1fr;gap:34px}.service-cards{grid-template-columns:1fr}.service-card,.service-card+.service-card{border-left:0;border-bottom:1px solid rgba(255,255,255,.28);padding:30px 0}.service-card p{min-height:0}.split-band{grid-template-columns:1fr}.approach-principles{grid-template-columns:1fr}.principle,.principle:nth-child(even){padding:42px 0;border-left:0}.page-hero{padding:66px 0 58px}}


/* v6: v3 Fresh baseline — shorter desktop homepage hero */
@media (min-width: 900px) {
  .home-hero,
  .hero.home-hero,
  body.home .hero,
  .homepage .hero {
    min-height: auto !important;
    height: auto !important;
  }

  .home-hero .hero-inner,
  .hero.home-hero .hero-inner,
  body.home .hero .hero-inner,
  .homepage .hero .hero-inner {
    min-height: 500px !important;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  .home-hero .hero-image,
  .hero.home-hero .hero-image,
  body.home .hero .hero-image,
  .homepage .hero .hero-image {
    min-height: 430px !important;
    max-height: 500px !important;
  }

  .home-hero .hero-image img,
  .hero.home-hero .hero-image img,
  body.home .hero .hero-image img,
  .homepage .hero .hero-image img {
    height: 100% !important;
    max-height: 500px !important;
    object-fit: cover !important;
  }
}


/* v7: ensure the green services section is visible in the initial desktop viewport.
   These selectors target the actual v3 homepage markup. */
@media (min-width: 901px) {
  .hero-grid {
    min-height: 380px !important;
  }

  .hero-copy {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .hero h1 {
    font-size: clamp(52px, 4.7vw, 70px) !important;
  }

  .hero-copy .rule {
    margin-top: 20px !important;
    margin-bottom: 18px !important;
  }

  .hero-intro {
    margin-top: 17px !important;
    line-height: 1.55 !important;
  }

  .hero-actions {
    margin-top: 24px !important;
  }

  .hero-image {
    min-height: 380px !important;
    height: 380px !important;
  }

  .hero-image img {
    height: 380px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}


/* v8: Services page first-viewport refinement */
@media (min-width: 901px) {
  body.services-page .page-hero,
  body.services-page .services-page-hero,
  body.services-page .hero {
    min-height: auto !important;
    height: auto !important;
    padding-top: 34px !important;
    padding-bottom: 26px !important;
  }

  body.services-page .page-hero .container,
  body.services-page .services-page-hero .container,
  body.services-page .hero .container {
    min-height: auto !important;
  }

  body.services-page .page-hero h1,
  body.services-page .services-page-hero h1,
  body.services-page .hero h1 {
    margin-bottom: 10px !important;
  }

  body.services-page .page-hero h2,
  body.services-page .services-page-hero h2,
  body.services-page .hero h2 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  body.services-page .page-hero p,
  body.services-page .services-page-hero p,
  body.services-page .hero p {
    margin-bottom: 0 !important;
  }

  body.services-page .services-overview-dark,
  body.services-page .services-dark,
  body.services-page .dark-section {
    padding-top: 28px !important;
  }
}


/* v9: Services page — show the actual service names in the initial desktop viewport */
@media (min-width: 901px) {
  body.services-page .page-hero {
    padding-top: 24px !important;
    padding-bottom: 20px !important;
  }

  body.services-page .page-hero .eyebrow {
    margin-bottom: 10px !important;
  }

  body.services-page .page-hero h1 {
    font-size: clamp(50px, 5vw, 64px) !important;
    line-height: 1 !important;
    max-width: 780px !important;
  }

  body.services-page .page-deck {
    margin-top: 14px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    max-width: 820px !important;
  }

  body.services-page .content-section.dark {
    padding-top: 24px !important;
    padding-bottom: 64px !important;
  }

  body.services-page .content-section.dark .eyebrow {
    margin-bottom: 0 !important;
  }

  body.services-page .service-cards {
    margin-top: 20px !important;
  }

  body.services-page .service-card {
    padding-top: 22px !important;
  }

  body.services-page .service-card h2 {
    font-size: 31px !important;
    margin-bottom: 14px !important;
  }
}


/* v10 tonal-depth exploration
   Same core Kinward palette; adds only restrained warm-stone and pale-sage neutrals. */
:root {
  --stone: #EAE4D9;
  --stone-soft: #F1ECE4;
  --sage-pale: #E4E8DF;
  --sage-line: #C9D0C3;
}

/* Slightly richer separation between ivory and white content areas */
.section-soft,
.soft-section,
.band-neutral {
  background: var(--stone-soft);
}

/* Homepage inclusivity band: warm stone rather than another green block */
.inclusivity,
.inclusivity-band,
.home-inclusivity {
  background: var(--stone-soft) !important;
}

/* Quiet pale-sage treatment for selected small editorial accents */
.eyebrow::before,
.kicker::before {
  border-color: var(--sage-line);
}

/* Keep cards crisp, but give rules/dividers a softer tonal character */
.service-card,
.editorial-card {
  border-color: rgba(201, 208, 195, 0.62);
}

/* Subtle tonal hover only; deep olive remains the dominant brand color */
a:not(.button):hover {
  text-decoration-color: var(--sage);
}

/* Footer gets a slightly differentiated warm neutral field */
.site-footer {
  background: var(--stone-soft);
}

/* Preserve crisp white in major content areas so the site stays legal/editorial */
.founder-section,
.about-founder,
.content-white,
.section-white {
  background: #FFFFFF;
}


/* v12 production logo system */
.brand-lockup {
  gap: 10px;
  letter-spacing: 0;
  align-items: center;
}

.brand-symbol {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  display: block;
}

.brand-type {
  display: grid;
  justify-items: center;
  line-height: 1;
}

.brand-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .18em;
  padding-left: .18em;
  color: var(--olive);
  white-space: nowrap;
}

.brand-law {
  width: 82%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--olive);
}

.brand-law i {
  height: 1px;
  background: currentColor;
  opacity: .72;
}

.brand-law b {
  font-family: Inter, Arial, sans-serif;
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: .28em;
  padding-left: .28em;
}

.footer-brand-lockup .brand-symbol {
  width: 24px;
  height: 24px;
}

.footer-brand-lockup .brand-name {
  font-size: 19px;
}

@media (max-width: 640px) {
  .brand-lockup { gap: 8px; }
  .brand-symbol { width: 24px; height: 24px; }
  .brand-name { font-size: 19px; }
  .brand-law { margin-top: 3px; }
}


/* v13: wordmark-only identity */
.brand-lockup {
  gap: 0 !important;
}

.brand-lockup .brand-symbol {
  display: none !important;
}

.brand-lockup .brand-name {
  font-size: 23px;
  letter-spacing: .20em;
  padding-left: .20em;
}

.brand-lockup .brand-law {
  width: 76%;
  margin-top: 4px;
}

.footer-brand-lockup .brand-name {
  font-size: 20px;
}

@media (max-width: 640px) {
  .brand-lockup .brand-name {
    font-size: 20px;
  }
}


/* v14 footer refinement: separate legal entity name from the wordmark */
.footer-legal-name {
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--charcoal, #222222);
  justify-self: start;
  align-self: end;
  margin-right: auto;
}

.footer-legal-name-fallback {
  max-width: var(--container, 1180px);
  margin: 24px auto 0;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 640px) {
  .footer-legal-name {
    margin-top: 18px;
  }
}


/* v15 responsive + accessibility QA refinements */

/* Footer: legal entity bottom-left, utility links bottom-right */
.footer-bottom {
  justify-content: space-between !important;
  align-items: center;
}
.footer-bottom-links {
  display: inline-flex;
  gap: 18px;
  margin-left: auto;
}
.footer-legal-name {
  margin: 0 !important;
  color: #74706A;
}

/* Keyboard accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}
.content-section.dark a:focus-visible,
.services a:focus-visible {
  outline-color: var(--ivory);
}

/* Prevent long text/URLs from creating horizontal overflow */
.footer-contact,
.footer-legal,
.legal-copy,
.content-copy,
.story-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Intermediate tablet sizing */
@media (max-width: 1100px) and (min-width: 981px) {
  .shell { width: min(calc(100% - 64px), var(--shell)); }
  .nav-links { gap: 26px; }
  .hero-copy { padding-right: 44px !important; }
  .service { padding-left: 28px; padding-right: 28px; }
}

/* Mobile typography and spacing safeguards */
@media (max-width: 640px) {
  .hero h1,
  .about-hero h1,
  .page-hero h1 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .page-hero h1 { font-size: 48px; }
  .page-deck { font-size: 17px; }
  .content-section { padding: 58px 0; }
  .content-grid h2,
  .content-section > .shell > h2 { font-size: 40px; }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .footer-bottom-links {
    margin-left: 0;
    flex-wrap: wrap;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* v16 brand architecture: KINWARD is the primary brand */
.brand-lockup .brand-type {
  display: block;
}

.brand-lockup .brand-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .22em;
  padding-left: .22em;
  line-height: 1;
}

.footer-brand-lockup .brand-name {
  font-size: 21px;
}

@media (max-width: 640px) {
  .brand-lockup .brand-name {
    font-size: 21px;
  }
}

/* Contact workflow refinements */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--olive-deep);
  outline-offset: 2px;
  border-color: var(--olive-deep);
}
.contact-form select:invalid { color: #77736D; }
.contact-form select option { color: var(--text); }
.confirmation-section {
  background: var(--ivory);
  min-height: 62vh;
  display: grid;
  align-items: center;
  padding: 90px 0 100px;
}
.confirmation-inner { max-width: 780px; }
.confirmation-inner h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 6vw, 82px);
  line-height: 1;
  letter-spacing: -.025em;
  margin: 16px 0 28px;
}
.confirmation-inner > p {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text);
}
.confirmation-inner .confirmation-note {
  margin: 28px 0 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(42,48,42,.18);
  font-size: 13px;
  line-height: 1.7;
}

/* Privacy + legal pages */
.legal-page { background: var(--ivory); padding: 92px 0 110px; }
.legal-page-inner { max-width: 900px; }
.legal-page h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 6vw, 82px);
  line-height: 1;
  letter-spacing: -.025em;
  margin: 16px 0 24px;
}
.legal-intro {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 52px;
}
.legal-copy {
  max-width: 760px;
  padding-top: 38px;
  border-top: 1px solid rgba(42,48,42,.18);
}
.legal-copy h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  margin: 42px 0 13px;
}
.legal-copy p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 16px;
}
.legal-copy a { text-decoration: underline; text-underline-offset: 3px; }
.legal-updated {
  font-size: 12px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 30px !important;
}
@media (max-width: 720px) {
  .legal-page { padding: 64px 0 78px; }
  .legal-intro { margin-bottom: 38px; }
  .legal-copy { padding-top: 28px; }
  .legal-copy h2 { font-size: 27px; margin-top: 34px; }
}

/* v21 — WHITE-FORWARD COLOR RHYTHM
   Visual refinement only: no copy, typography, spacing, layout, or brand changes.
   White becomes the primary canvas; ivory is reserved for selected warm bands;
   deep green retains the site's strongest brand/authority moments. */

/* Default editorial canvas */
body,
main {
  background: #FFFFFF;
}

/* Primary page openings */
.hero,
.about-hero,
.services-hero,
.service-hero,
.approach-hero,
.contact-hero,
.legal-page,
.confirmation-section {
  background: #FFFFFF;
}

/* Main long-form/content sections should read crisp and editorial */
.about-story,
.service-content,
.service-detail,
.approach-content,
.contact-main,
.contact-section {
  background: #FFFFFF;
}

/* Preserve intentional warmth as a secondary tonal layer */
.about-philosophy,
.inclusivity,
.warm-band,
.soft-band,
.service-secondary,
.approach-secondary {
  background: var(--ivory);
}

/* Preserve all existing dark-green sections and CTA treatments.
   Existing selectors remain authoritative; no green values are changed. */

/* v22 — COHESION CORRECTIONS */

/* Homepage hero is a single editorial composition: copy + image + tagline
   share the same warm ivory field. */
body.home .hero,
.home .hero,
.hero-home,
.home-hero,
.hero.hero-home {
  background: var(--ivory);
}
body.home .hero *,
.home .hero *,
.hero-home *,
.home-hero * {
  /* descendants keep their existing typography; background inheritance only
     where v21 introduced a white panel */
}
body.home .hero-copy,
body.home .hero-image,
body.home .hero-tagline,
.home .hero-copy,
.home .hero-image,
.home .hero-tagline,
.hero-home .hero-copy,
.hero-home .hero-image,
.hero-home .hero-tagline,
.home-hero .hero-copy,
.home-hero .hero-image,
.home-hero .hero-tagline {
  background: var(--ivory);
}

/* Interior top headers use one consistent white treatment. */
.services-hero,
.approach-hero,
.contact-hero {
  background: #FFFFFF;
}
.services-hero .shell,
.approach-hero .shell,
.contact-hero .shell,
.services-hero-inner,
.approach-hero-inner,
.contact-hero-inner {
  background: #FFFFFF;
}

/* v23 — selector correction based on actual page markup */

/* HOME: restore the full hero field — headline, copy and photograph — to ivory. */
.hero {
  background: var(--ivory) !important;
}
.hero-grid,
.hero-copy,
.hero-image {
  background: var(--ivory) !important;
}

/* INTERIOR PAGE HEADERS: Services, Approach and Contact all use .page-hero. */
.page-hero,
body.services-page .page-hero {
  background: #FFFFFF !important;
}
.page-hero > .shell,
body.services-page .page-hero > .shell {
  background: #FFFFFF !important;
}

/* v24 — restrained brand-name explanation */
.name-meaning {
  background: var(--ivory);
  padding: 72px 0 76px;
}
.name-meaning-inner {
  max-width: 820px;
}
.name-meaning h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 12px 0 22px;
}
.name-meaning-inner > p:last-child {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 720px) {
  .name-meaning { padding: 54px 0 58px; }
}

/* v27 — green-banner repair
   Preserve the original two-column compositions; only simplify the left-side
   hierarchy after removing the secondary service headlines. */
.content-section.dark .green-banner-lead {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-transform: none;
  max-width: 420px;
}
.content-section.dark .approach-banner-lead {
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 440px;
  margin: 0;
}

/* v28 — Parentage Orders card rhythm
   The Following Surrogacy card sits beside a white card, so keep the pair
   visually consistent and let the lower ivory section provide the tonal shift. */
.parentage-following-card {
  background: #FFFFFF !important;
}

/* v29 — Parentage Orders: make both paired panels white.
   v28 targeted the wrapper, but the visible backgrounds are applied directly
   to .split-panel:first-child / :last-child. */
.parentage-following-card .split-panel:first-child,
.parentage-following-card .split-panel:last-child {
  background: #FFFFFF !important;
}

/* v30 — paired-card rhythm */
.force-white-panel {
  background: #FFFFFF !important;
}

/* v31 — correct paired-panel targeting.
   The visible backgrounds are on the child .split-panel elements, not the
   surrounding .split-band wrapper. Make both cards in these marked pairs white. */
.force-white-panel .split-panel:first-child,
.force-white-panel .split-panel:last-child {
  background: #FFFFFF !important;
}

/* v32 — white-forward header + homepage hero */
.site-header {
  background: #FFFFFF !important;
}
.hero,
.hero-grid,
.hero-copy,
.hero-image {
  background: #FFFFFF !important;
}

/* v32 — Services card CTA alignment on desktop.
   Cards become flex columns so the CTA sits at the same baseline even when
   titles/descriptions wrap to different heights. */
@media (min-width: 901px) {
  body.services-page .service-card {
    display: flex;
    flex-direction: column;
  }
  body.services-page .service-card p {
    min-height: 0;
  }
  body.services-page .service-card .text-link {
    margin-top: auto;
  }
}

/* v40 — staging candidate: consolidated final overrides */

/* Approach: the only divider before the principles is the principles' own top rule. */
body.approach-page .page-hero {
  border-bottom: 0 !important;
}

/* Homepage founder section: white editorial field, no beige photo frame. */
.founder,
.founder-grid,
.founder-copy {
  background: #FFFFFF !important;
}
.portrait-placeholder {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.portrait-inner {
  background: #FFFFFF !important;
}

/* Founder columns must fit inside the shell including the gap. */
.founder-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
}
.founder-copy,
.portrait-placeholder {
  min-width: 0;
}

/* Homepage shell alignment.
   Keep the content grid on the site shell, but restore the previously approved
   hero-photo treatment: the image bleeds from its grid column to the right edge
   so it visually aligns with the full-width green Services band. */
.hero > .shell,
.services > .shell,
.founder > .shell,
.closing > .shell {
  width: min(calc(100% - 96px), var(--shell));
  margin-inline: auto;
}
.hero {
  overflow: hidden;
}
.closing-row {
  justify-content: flex-end;
}

@media (min-width: 981px) {
  .hero-image {
    width: calc(100% + max(48px, calc((100vw - var(--shell)) / 2)));
    margin-right: calc(-1 * max(48px, calc((100vw - var(--shell)) / 2)));
  }
}
@media (min-width: 641px) and (max-width: 980px) {
  .hero-image {
    width: calc(100% + 24px);
    margin-right: -24px;
  }
}
@media (max-width: 640px) {
  .hero-image {
    width: calc(100% + 16px);
    margin-right: -16px;
  }
}

/* Footer has four active columns while social URLs are intentionally omitted. */
.footer-top {
  grid-template-columns: 1.15fr .7fr 1.15fr .9fr;
}

@media (max-width: 980px) {
  .hero > .shell,
  .services > .shell,
  .founder > .shell,
  .closing > .shell {
    width: min(calc(100% - 48px), var(--shell));
  }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .hero > .shell,
  .services > .shell,
  .founder > .shell,
  .closing > .shell {
    width: min(calc(100% - 32px), var(--shell));
  }
  .footer-top { grid-template-columns: 1fr; }
}

/* v41 — Approach rhythm
   Reduce the large white gap after “Kinward was founded with both in mind.”
   while preserving breathing room and the single rule above 01 / 02. */
body.approach-page .page-hero {
  padding-bottom: 52px;
}
body.approach-page .page-hero + .content-section {
  padding-top: 44px;
}
@media (max-width: 900px) {
  body.approach-page .page-hero {
    padding-bottom: 42px;
  }
  body.approach-page .page-hero + .content-section {
    padding-top: 34px;
  }
}

/* v42 — mobile QA refinements
   Mobile-only corrections identified during real-device staging review. */
@media (max-width: 640px) {
  /* Homepage founder section: v40's late desktop grid override was winning
     over the earlier mobile rule and squeezing the biography into half width. */
  body.home .founder-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px;
  }
  body.home .founder-copy,
  body.home .portrait-placeholder {
    width: 100%;
    max-width: none;
  }

  /* Services overview: bring the closing CTA closer to the preceding copy. */
  body.services-page .closing-row {
    min-height: 0;
    padding: 30px 0 38px;
    justify-content: flex-start;
  }

  /* Individual service pages: align stacked panels to the same 16px mobile
     shell edge used elsewhere and tighten the large vertical gaps. */
  body.service-detail-page .page-hero + .content-section {
    padding-bottom: 36px;
  }
  body.service-detail-page .split-panel {
    padding: 38px 16px;
  }
  body.service-detail-page .split-panel + .split-panel {
    border-top: 1px solid rgba(42,48,42,.14);
  }
}

/* v43 — mobile homepage correction
   Fixes two issues found on-device after v42 deployment. Desktop is unchanged. */
@media (max-width: 640px) {
  /* The homepage body has no .home class, so target the actual founder markup.
     Force a true one-column mobile composition at full shell width. */
  .founder .founder-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px;
  }
  .founder .founder-copy,
  .founder .portrait-placeholder {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* On mobile, let the homepage hero photograph run edge-to-edge rather than
     leaving the shell gutter visible at the left. Center the crop as well. */
  .hero .hero-image {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
  .hero .hero-image img {
    width: 100% !important;
    object-position: 50% center !important;
  }
}

/* v44 — mobile closing CTA rhythm
   Tighten only the three closing CTA areas flagged during real-device QA.
   Desktop and the already-approved mobile CTA spacing on other pages are unchanged. */
@media (max-width: 640px) {
  /* Homepage: reduce the white gap after the inclusivity section. */
  .inclusion + .closing .closing-row {
    min-height: 0;
    padding: 28px 0 34px;
  }

  /* About: bring the CTA closer to the Name / meaning section. */
  .name-meaning + .closing .closing-row {
    min-height: 0;
    padding: 28px 0 34px;
  }

  /* Donor / embryo service page: tighten the standalone CTA beneath the
     Independent Legal Guidance green band without changing other service pages. */
  body.service-detail-page .content-section.dark + .closing .closing-row {
    min-height: 0;
    padding: 28px 0 34px;
  }
}

/* v45 — DESKTOP ABOUT HERO TOP SPACING
   Tighten only the desktop space above "About Ashley Pyon".
   Mobile/tablet spacing remains unchanged. */
@media (min-width: 981px) {
  .about-hero {
    padding-top: 48px;
  }
}

/* v46 — DESKTOP INTERIOR HERO TOP RHYTHM
   Use the Services page's approved desktop top spacing as the common standard
   for About, Approach and Contact. Mobile/tablet remains unchanged. */
@media (min-width: 981px) {
  .about-hero,
  body.approach-page .page-hero,
  body:not(.services-page):not(.service-detail-page):not(.approach-page) .page-hero {
    padding-top: 24px !important;
  }
}

/* v47 — ABOUT DESKTOP HERO CONTENT ALIGNMENT
   The apparent top gap on About was caused by the text column being vertically
   centered against the taller portrait, not by section padding alone. On desktop,
   top-align the two columns so the eyebrow follows the same opening rhythm as the
   other interior pages. Mobile/tablet remains unchanged. */
@media (min-width: 981px) {
  .about-hero-grid {
    align-items: start;
  }
}


/* v48 — DRAFT PORTRAIT PREVIEW
   Temporary staging portraits supplied by Ashley. Images remain replaceable;
   layout/cropping is controlled in CSS rather than baked into the files. */
.founder-portrait,
.about-portrait {
  overflow: hidden;
}
.founder-portrait img,
.about-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.founder-portrait img {
  object-position: 56% 48%;
}
.about-portrait img {
  object-position: 50% 46%;
}

@media (max-width: 640px) {
  .founder-portrait {
    aspect-ratio: 4 / 5;
  }
  .founder-portrait img {
    object-position: 54% 46%;
  }
  .about-portrait img {
    object-position: 50% 44%;
  }
}


/* v49 final brand lockup — mirror approved business card */
.brand-lockup .brand-type {
  display: grid;
  justify-items: center;
  line-height: 1;
}
.brand-lockup .brand-law {
  width: 76%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--olive);
}
.brand-lockup .brand-law i { height: 1px; background: currentColor; opacity: .72; }
.brand-lockup .brand-law b {
  font-family: Inter, Arial, sans-serif;
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: .28em;
  padding-left: .28em;
}
@media (max-width: 640px) {
  .brand-lockup .brand-law { margin-top: 3px; }
}

/* v55 final portrait crop: show more outfit while trimming excess wall. */
@media (min-width: 769px) {
  .founder-portrait { aspect-ratio: 3 / 4; }
  .founder-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 68%; }
}


/* v56 portrait comparison: Photo 7 home / Photo 5 About. */
@media (min-width: 641px) {
  .founder-portrait { aspect-ratio: 4 / 5 !important; }
  .founder-portrait img { object-position: 50% 100% !important; }
}
.about-hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
.about-hero-grid > div:first-child { max-width: 820px; }
.story-profile { align-self: start; }
.about-inline-portrait {
  width: 100%;
  max-width: 220px;
  margin-top: 26px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.about-inline-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}
@media (max-width: 760px) {
  .about-inline-portrait { max-width: 280px; margin-top: 22px; }
}

/* v57: preserve Photo 7 outfit; trim only excess wall above portrait. */
@media (min-width: 641px) {
  .founder-portrait { aspect-ratio: 1365 / 1867 !important; }
  .founder-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 50% !important; }
}
/* Tighten transition from About introduction into biography. */
.about-story { padding-top: 48px !important; }
@media (max-width: 760px) {
  .about-story { padding-top: 36px !important; }
}

/* v58: give Services intro a little more breathing room before the green section. */
@media (min-width: 901px) {
  body.services-page .page-hero { padding-bottom: 34px !important; }
}

/* v59: About portrait — preserve Photo 5's native proportions and resolution. */
.about-inline-portrait {
  max-width: 240px;
  aspect-ratio: auto !important;
  overflow: visible;
}
.about-inline-portrait img {
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 760px) {
  .about-inline-portrait { max-width: 260px; }
}