/* ============================================================
   Organized Living By Sonia — palette + type lifted from her own
   brand graphics: cream paper, brass line-art, high-contrast serif.
   ============================================================ */

/* === defensive base — injected by harden_css.py; do not hand-edit === */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-padding-top: calc(var(--nav-h, 72px) + 1rem); }
img, svg, video, iframe, canvas, table { display: block; max-width: 100%; }
p, li, h1, h2, h3, h4, blockquote, td, dd, dt { overflow-wrap: anywhere; }
form[style*="min-height"] { align-content: center; }
/* === end defensive base === */

:root{
  --cream:      #FBF5E6;
  --cream-2:    #F5EEDF;
  --paper:      #FFFBF0;
  --brass:      #8F6F2C;
  --brass-lt:   #B99A57;
  --brass-soft: #E4D6B4;
  --ink:        #2A241C;
  --ink-soft:   #6E6154;
  --line:       #E0D5BE;

  --nav-h: 76px;

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body:    "Jost", "Avenir Next", "Segoe UI", sans-serif;

  --wrap: 1180px;
  --r: 4px;
}

*{ box-sizing: border-box; }

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

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.wrap{ width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 640px){ .wrap{ width: min(100% - 2.25rem, var(--wrap)); } }

/* clipped, not parked off-canvas at -9999px — that is real geometry and it
   reads as a horizontal overflow to any layout check */
.skip-link{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus{
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  width: auto; height: auto; margin: 0; padding: .75rem 1.25rem;
  overflow: visible; clip: auto; clip-path: none;
  background: var(--ink); color: var(--cream);
}

/* ---------- shared type ---------- */
.eyebrow{
  font-size: .72rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass);
  margin: 0 0 1.1rem;
}
.section__title{
  font-family: var(--display);
  text-wrap: balance;
  font-weight: 500;
  font-size: clamp(1.85rem, 4.2vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 1.3rem;
}
.lede{
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  font-family: var(--body);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  white-space: nowrap;
}
.btn--brass{ background: var(--brass); color: #FFF9EA; }
.btn--brass:hover{ background: #7B5F24; transform: translateY(-1px); }
.btn--ghost{ border-color: var(--brass); color: var(--brass); background: transparent; }
.btn--ghost:hover{ background: var(--brass); color: #FFF9EA; }
.btn--lg{ padding: 1.1rem 2rem; font-size: .86rem; }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform: none; } }

/* ============================================================
   nav
   ============================================================ */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,245,230,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner{
  width: min(100% - 3rem, var(--wrap)); margin-inline: auto;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand{ display: flex; align-items: center; gap: .7rem; text-decoration: none; min-width: 0; }
.brand__mark{ width: 46px; height: auto; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.02; min-width: 0; }
.brand__name{
  font-family: var(--display); font-size: 1.06rem; font-weight: 600;
  letter-spacing: .005em;
}
.brand__sub{
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass); font-weight: 500;
}

.nav__links{ display: flex; align-items: center; gap: 1.9rem; }
.nav__links a{
  text-decoration: none; font-size: .84rem; letter-spacing: .04em;
  color: var(--ink-soft); transition: color .2s ease;
}
.nav__links a:hover{ color: var(--brass); }
.nav__cta{ color: #FFF9EA !important; }
.nav__cta:hover{ color: #FFF9EA !important; }

.nav__toggle{
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav__toggle span{ display: block; height: 1.5px; width: 100%; background: var(--ink); transition: transform .25s ease, opacity .25s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px){
  :root{ --nav-h: 64px; }
  .nav__toggle{ display: flex; }
  .nav__links{
    display: none;               /* real hide — a class must opt it back in */
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: .5rem 1.5rem 1.5rem;
  }
  .nav__links.is-open{ display: flex; }
  .nav__links a{ padding: .85rem 0; font-size: .95rem; border-bottom: 1px solid var(--line); }
  .nav__cta{ margin-top: 1rem; border-bottom: 0 !important; }
  .brand__mark{ width: 38px; }
}

/* ============================================================
   hero — must fit the first screen whole, at every width
   ============================================================ */
.hero{
  container-type: inline-size;
  min-height: calc(100svh - var(--nav-h));
  display: flex; align-items: center;
  padding: clamp(1.25rem, 3cqi, 3rem) 0;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(228,214,180,.55) 0%, transparent 60%),
    var(--cream);
}
.hero__grid{
  width: min(100% - 3rem, var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: 1.08fr .92fr;
  align-items: center; gap: clamp(1.5rem, 5cqi, 4.5rem);
}
.hero__copy{ min-width: 0; }
.hero__title{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.05rem, 7.2cqi, 4.25rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 clamp(.75rem, 1.6cqi, 1.35rem);
}
.hero__title em{ font-style: italic; color: var(--brass); }
.hero__lede{
  font-size: clamp(.98rem, 1.55cqi, 1.18rem);
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 0 clamp(1.25rem, 2.4cqi, 2rem);
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: clamp(1.1rem, 2.2cqi, 1.9rem); }
.hero__proof{
  display: flex; align-items: center; gap: .6rem;
  margin: 0;
  font-size: clamp(.8rem, 1.15cqi, .92rem);
  color: var(--ink-soft);
  letter-spacing: .015em;
}
.hero__proof-mark{ color: var(--brass); font-size: 1.05em; }

.hero__figure{ margin: 0; min-width: 0; }
.hero__figure img{
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 24px 60px -30px rgba(42,36,28,.45);
}

@media (max-width: 900px){
  .hero{ align-items: center; }
  .hero__grid{
    grid-template-columns: 1fr;
    gap: clamp(1rem, 4cqi, 1.75rem);
    width: min(100% - 2.25rem, var(--wrap));
  }
  .hero__title{ font-size: clamp(1.95rem, 10.5cqi, 3.4rem); }
  .hero__actions .btn{ flex: 1 1 auto; }
  /* cap the photo so headline + CTAs + proof + image all clear the fold */
  .hero__figure img{
    max-height: 30svh;
    object-fit: cover;
    object-position: center 38%;
  }
}
@media (max-width: 420px){
  .hero__figure img{ max-height: 24svh; }
  .hero__actions{ gap: .6rem; }
}

/* ============================================================
   benefits strip
   ============================================================ */
.benefits{
  background: var(--ink);
  color: var(--cream);
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
}
.benefits__list{
  width: min(100% - 3rem, var(--wrap)); margin-inline: auto;
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .9rem clamp(1.5rem, 4vw, 3.4rem);
}
.benefits__list li{
  font-family: var(--display);
  font-size: clamp(.95rem, 1.55vw, 1.18rem);
  letter-spacing: .01em;
  white-space: nowrap;
}
.benefits__list span{ color: var(--brass-lt); font-style: italic; }

/* ============================================================
   sections
   ============================================================ */
.section{ padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section--paper{ background: var(--paper); border-block: 1px solid var(--line); }

/* services */
.cards{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.card{
  background: var(--cream);
  padding: clamp(1.6rem, 2.6vw, 2.3rem);
  display: flex; flex-direction: column;
  transition: background-color .3s ease;
}
.card:hover{ background: var(--paper); }
.card__num{
  font-family: var(--display); font-size: .82rem; font-style: italic;
  color: var(--brass-lt); margin-bottom: 1.1rem;
}
.card h3{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.18rem, 1.9vw, 1.42rem);
  margin: 0 0 .7rem; line-height: 1.2;
}
.card p{ margin: 0 0 1.5rem; color: var(--ink-soft); font-size: .96rem; }
.card__cta{
  margin-top: auto;
  text-decoration: none; color: var(--brass);
  font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.card__cta span{ transition: transform .25s ease; display: inline-block; }
.card:hover .card__cta span{ transform: translateX(4px); }

.note{
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  font-size: .98rem; color: var(--ink-soft);
  max-width: 58ch;
}
.note a{ color: var(--brass); text-underline-offset: 3px; }

/* approach */
.approach{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.steps{
  list-style: none; counter-reset: step; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.steps li{
  counter-increment: step;
  border-bottom: 1px solid var(--line);
  padding: 1.35rem 0 1.35rem 3.2rem;
  position: relative;
}
.steps li::before{
  content: "0" counter(step);
  position: absolute; left: 0; top: 1.5rem;
  font-family: var(--display); font-style: italic; font-size: .88rem;
  color: var(--brass-lt);
}
.steps h3{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.06rem, 1.6vw, 1.22rem);
  margin: 0 0 .3rem; line-height: 1.25;
}
.steps p{ margin: 0; color: var(--ink-soft); font-size: .94rem; }

@media (max-width: 820px){
  .approach{ grid-template-columns: 1fr; }
}

/* work */
.work{
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  /* the two shots are different heights; centring splits the leftover space
     evenly instead of dumping it all under the shorter column */
  align-items: center;
}
.work__item{ margin: 0; }
/* No object-fit here on purpose: the source files are already cropped to the
   ratio they're shown at, so the image renders at its natural height and the
   caption below can't be mistaken for unfilled space under a cover-fit crop. */
.work__media{
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 18px 44px -28px rgba(42,36,28,.5);
}
.work__media img{ width: 100%; }
.work__item figcaption{
  margin-top: .95rem;
  font-size: .9rem; color: var(--ink-soft);
}
.work__item figcaption strong{ color: var(--ink); font-weight: 500; }
@media (max-width: 780px){
  .work{ grid-template-columns: 1fr; }
  .work__item--tall .work__media{ max-width: 420px; }
}

/* about */
.about{
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about__portrait{ margin: 0; max-width: 360px; }
.about__portrait img{
  width: 100%;
  border-radius: 2px;
  background: var(--cream-2);
}
.about__copy p{ color: var(--ink-soft); max-width: 52ch; }
.about__copy p em{ color: var(--ink); font-style: italic; }
.signature{
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  color: var(--brass) !important;
  margin: 1.6rem 0 1.8rem;
}
@media (max-width: 780px){
  .about{ grid-template-columns: 1fr; }
  .about__portrait{ max-width: 300px; }
}

/* final CTA */
.cta{
  background: var(--ink);
  color: var(--cream);
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  text-align: center;
}
.cta .eyebrow{ color: var(--brass-lt); }
.cta__title{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.1; margin: 0 0 1.2rem;
}
.cta__lede{
  color: #CFC4B2; max-width: 46ch; margin: 0 auto 2.4rem;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
}
.cta__actions{ display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.cta .btn--ghost{ border-color: var(--brass-lt); color: var(--brass-lt); }
.cta .btn--ghost:hover{ background: var(--brass-lt); color: var(--ink); }

/* ============================================================
   footer
   ============================================================ */
.footer{ background: var(--cream-2); border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
.footer__inner{
  display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.footer__mark{ width: 76px; height: auto; margin-bottom: .9rem; }
.footer__tag{ margin: 0; font-size: .93rem; color: var(--ink-soft); }
.footer__col h4{
  font-family: var(--body); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
  margin: 0 0 1rem;
}
.footer__col a{
  display: block; text-decoration: none; color: var(--ink-soft);
  font-size: .93rem; padding: .28rem 0; overflow-wrap: anywhere;
  transition: color .2s ease;
}
.footer__col a:hover{ color: var(--brass); }
.footer__base{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}
.footer__base p{ margin: 0; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 820px){
  .footer__inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .footer__inner{ grid-template-columns: 1fr; }
}

/* ============================================================
   contact page
   ============================================================ */
.sr-only{
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.contact{ padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6.5rem); }
.contact__grid{
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact__title{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.015em;
  margin: 0 0 1.2rem;
}
.contact__details{
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  border-top: 1px solid var(--line);
}
.contact__details > div{
  display: grid; grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
.contact__details dt{
  font-size: .7rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass);
  padding-top: .18rem;
}
.contact__details dd{ margin: 0; font-size: .97rem; overflow-wrap: anywhere; }
.contact__details a{ color: var(--ink); text-underline-offset: 3px; }
.contact__details a:hover{ color: var(--brass); }
@media (max-width: 520px){
  .contact__details > div{ grid-template-columns: 1fr; gap: .2rem; }
}

.contact__card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  box-shadow: 0 24px 60px -40px rgba(42,36,28,.5);
}
@media (max-width: 860px){
  .contact__grid{ grid-template-columns: 1fr; }
}

.form-fields{ display: grid; gap: 1.15rem; margin-bottom: 1.6rem; }
/* `display: grid` above beats the [hidden] attribute, so on submit the fields
   never actually hid and the confirmation just pushed the page taller. */
.form-fields[hidden]{ display: none; }
.field{ display: grid; gap: .45rem; }
.field label{
  font-size: .72rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.field input,
.field textarea{
  font-family: var(--body); font-size: 1rem; font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .85rem .95rem;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize: vertical; min-height: 7rem; line-height: 1.6; }
.field input:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(143,111,44,.14);
}
.field input::placeholder,
.field textarea::placeholder{ color: #A99A85; }

.btn--block{ width: 100%; }
.btn.is-sent{
  background: var(--ink) !important;
  color: var(--cream) !important;
  cursor: default;
}

.turnstile-box{ margin-bottom: 1.25rem; }

.form-status{
  margin: 1.25rem 0 0;
  font-size: .95rem;
  line-height: 1.6;
  padding: 1rem 1.15rem;
  border-radius: 2px;
}
.form-status a{ color: var(--brass); text-underline-offset: 3px; }
.form-status.is-success{
  background: rgba(143,111,44,.08);
  border: 1px solid var(--brass-soft);
  color: var(--ink);
}
.form-status.is-error{
  background: rgba(160,60,40,.07);
  border: 1px solid rgba(160,60,40,.25);
  color: #7A3325;
}
.form-status.is-error a{ color: #7A3325; }

/* ============================================================
   scroll reveal — below the fold only (see lcp_guard.py)
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* === site credit (injected by credit_footer.py); do not hand-edit === */
.site-credit {
  margin: 2.25rem 0 0;
  padding-inline: 1.25rem;
  font-size: .73rem;
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
  opacity: .65;
}
.site-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(128, 128, 128, .5);
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-bottom-color .25s ease;
}
.site-credit a:hover,
.site-credit a:focus-visible { border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .site-credit a { transition: none; }
}

/* Shares the footer's own copyright row: sits opposite it rather than adding a
   third line under the page. The parent is reached with :has() so no client
   class name has to be guessed, and the rule cannot fire on a footer that has
   no inline credit in it. */
.site-credit--inline {
  margin: 0;
  padding: 0;
  text-align: right;
}
footer :has(> .site-credit--inline) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1.5rem;
}
/* === end site credit === */