/* ============================================================
   SITE STYLES
   Everything her brand controls lives in :root below.
   Change those eight values and the whole site changes.
   ============================================================ */

/* Declares the page as light-only. Without this, mobile browsers and in-app
   webviews with dark mode on will auto-darken anything that doesn't set its
   own background — which turned the plain sections black with dark-brown text
   on them. This one line is the actual fix; the explicit section backgrounds
   below are the belt-and-braces version. */
:root{
  color-scheme: light;
  /* ---- BRAND TOKENS — tans, beige, natural wood, a hint of light sage ----
     Text tones are dark because they have to be readable; they're warm browns
     rather than charcoal, so nothing reads as black. The large dark blocks
     (footer, feature band) are warm mocha now, not near-black. Light sage is
     an accent for fills and marks only — it can't carry text at any size. */
  --ground:   #F5F2EA;   /* warm white — page background */
  --surface:  #FFFFFF;   /* cards */
  --ink:      #3A3428;   /* warm dark brown — headings and body text */
  --deep:     #3A3428;   /* alias, kept so older rules still resolve */
  --muted:    #605747;   /* warm taupe — secondary text */
  --rule:     #E2D9C7;   /* hairlines */
  --accent:   #6E5A40;   /* natural wood — links, buttons, active states */
  --accent-d: #574838;   /* wood, darkened for hover */
  --sage:     #A9B49C;   /* light sage — fills and tints ONLY, never text */
  --sage-d:   #7E8C70;   /* deeper sage — small graphic marks only */
  --sage-btn: #657358;   /* deep sage — the bio buttons. White text clears 5:1;
                            anything lighter than this fails with white on it. */
  --accent-l: #A9B49C;   /* alias for older rules */
  --oat:      #E9E0CE;   /* tan — tint sections */
  --brown:    #6B5D4B;   /* mid warm brown — the main light-on-dark band */
  --mocha:    #574C3D;   /* deep warm brown — the footer anchor, used once */

  /* ---- TYPE ---- */
  --display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, sans-serif;

  /* ---- SPACING ---- */
  --gut: 22px;
  --max: 1240px;
  --section: clamp(64px, 11vw, 132px);
}

*{box-sizing:border-box}
/* display rules on .btn etc. outrank the UA's [hidden], so make it explicit */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--ground); color:var(--deep);
  font-family:var(--sans); font-size:16.5px; font-weight:300;
  line-height:1.72; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
/* every band declares its own background so none of them can be overridden */
.page-head{background:var(--ground)}
.narrow{max-width:760px; margin:0 auto; padding:0 var(--gut)}
.section{padding:var(--section) 0; background:var(--ground)}
.center{text-align:center}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:400; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(40px,8.5vw,86px); line-height:1.02}
h2{font-size:clamp(30px,5.4vw,54px); line-height:1.1}
h3{font-size:clamp(22px,3.2vw,30px); line-height:1.2}
h4{font-size:clamp(18px,2.4vw,22px); line-height:1.3}
.italic{font-style:italic}
p{margin:0 0 1.1em}
.lede{font-size:clamp(17px,2.1vw,20px); line-height:1.75; color:var(--muted)}

/* eyebrow — wide-tracked label above a heading */
.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:400;
  letter-spacing:.32em; text-transform:uppercase; color:var(--muted);
  margin:0 0 16px; display:block;
}
.eyebrow.on-dark{color:rgba(255,255,255,.75)}

/* ---------- buttons ---------- */
/* outlined buttons sit on a wood-brown rule, not a black one */
.btn{
  display:inline-block; font-family:var(--sans); font-size:11.5px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; text-decoration:none;
  padding:16px 34px; border:1px solid var(--accent); color:var(--accent);
  background:transparent; cursor:pointer; transition:background .3s, color .3s, border-color .3s;
}
.btn:hover,.btn:focus-visible{background:var(--accent); color:var(--ground); border-color:var(--accent)}
.btn.solid{background:var(--accent); color:var(--ground); border-color:var(--accent)}
.btn.solid:hover{background:var(--accent-d); border-color:var(--accent-d)}
.btn.light{border-color:rgba(255,255,255,.8); color:#fff}
.btn.light:hover{background:#fff; color:var(--deep)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* button row */
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:22px}
.row > *{margin:0}
@media (max-width:520px){
  .row{flex-direction:column; align-items:stretch}
  .row .btn,.row button{width:100%}
}

/* text link with a rule under it */
.tlink{
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:5px;
  transition:border-color .3s, color .3s; display:inline-block;
}
.tlink:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- header ---------- */
.hdr{
  position:absolute; top:0; left:0; right:0; z-index:60;
  padding:26px 0; transition:background .35s, padding .35s;
}
.hdr.on-ground{position:sticky; background:var(--ground); padding:20px 0}
.hdr.on-ground.stuck{padding:13px 0; border-bottom:1px solid var(--rule)}
.hdr.stuck{position:fixed; background:var(--ground); padding:14px 0;
  border-bottom:1px solid var(--rule)}
.hdr.solid{position:sticky; background:var(--ground); border-bottom:1px solid var(--rule)}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.logo{
  font-family:var(--display); font-size:19px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; line-height:1;
}
.nav{display:flex; gap:34px; align-items:center}
.nav a{
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  text-decoration:none; transition:color .3s; padding:4px 0;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent)}
.hdr.over .logo,.hdr.over .nav a{color:#fff}
.hdr.over.stuck .logo,.hdr.over.stuck .nav a{color:var(--deep)}
.burger{display:none; background:none; border:0; padding:9px; cursor:pointer}
.nav-close{display:none}
.burger span{display:block; width:24px; height:1px; background:currentColor; margin:6px 0;
  transition:transform .3s, opacity .3s}
.hdr.over .burger{color:#fff}
.hdr.over.stuck .burger{color:var(--deep)}

@media (max-width:860px){
  .burger{display:block}
  .nav{
    position:fixed; inset:0; background:var(--ground); flex-direction:column;
    justify-content:center; gap:28px; transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.4,0,.2,1); z-index:70;
  }
  .nav.open{transform:none}
  .nav a{font-size:14px; letter-spacing:.28em; color:var(--deep)!important}
  .hdr.over .nav.open a{color:var(--deep)!important}
  .nav-close{display:block; position:absolute; top:24px; right:20px; background:none;
    border:0; font-size:30px; line-height:1; cursor:pointer; color:var(--deep); padding:10px}
}

/* ---------- image frames + placeholders ---------- */
/* Any <img> that fails to load shows its label instead, so the layout
   is real before the photos arrive. Drop files into /images and they appear. */
.f{position:relative; overflow:hidden; background:var(--oat)}
.f::after{
  content:attr(data-label); position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:18px;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); pointer-events:none; z-index:0;
}
.f img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover}
.f img.missing{display:none}
.f.r43{aspect-ratio:4/3} .f.r34{aspect-ratio:3/4}
.f.r11{aspect-ratio:1/1}  .f.r169{aspect-ratio:16/9}
.f.r23{aspect-ratio:2/3}  .f.r32{aspect-ratio:3/2}

/* ---------- hero ----------
   Split rather than full-bleed. Every photo Lauren shoots is portrait, and a
   portrait image in a half-width full-height panel fits with no crop loss —
   where a landscape hero would throw away half the frame. It also puts the
   headline on the page background instead of over the photo, so her
   photography doesn't have to be dimmed by a scrim to stay readable. */
/* The header sits above the hero in flow, so a full 100svh hero pushes its own
   bottom edge — and the wordmark on it — below the fold. Subtract the header. */
.hero{position:relative; display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(0,1fr);
  min-height:calc(100svh - var(--hdr-h, 68px)); background:var(--ground); overflow:hidden}
.hero-copy{display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,5vw,64px) clamp(28px,4.5vw,72px);
  max-width:none}
/* Sized against the half-width column it lives in, not the whole viewport.
   At 1024px the global h1 scale put 86px type in a 460px column, which wrapped
   to five lines and pushed the hero past the fold. */
.hero h1{font-size:clamp(32px,4.6vw,74px); max-width:13ch}
.hero .lede{max-width:38ch; margin-top:22px}
.hero-cta{margin-top:34px; display:flex; gap:12px; flex-wrap:wrap}
.hero-img{position:relative; overflow:hidden; background:var(--oat)}
/* Absolute, so the photo's intrinsic height can't drive the hero. Her images
   are 1400x1800 — left in flow, a half-width column at 1920px makes the hero
   1234px tall and pushes the wordmark off screen. */
.hero-img img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block}
.hero-img::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(18,17,15,.12) 0%, rgba(18,17,15,0) 22%),
    linear-gradient(180deg, rgba(18,17,15,0) 62%, rgba(18,17,15,.12) 82%,
                            rgba(18,17,15,.24) 100%)}

/* ---------- the wordmark, stamped on the photo ----------
   Sits on the image rather than in the nav bar. The header logo fades in only
   once you scroll past the hero, so the stamp gets the opening moment and the
   name is still there when you need it. */
/* The mark carries its own gradient rather than relying on a scrim over the
   whole photo. That way it stays legible no matter which image she swaps in,
   and the rest of the picture isn't dimmed to protect four words. */
/* Add class "top" on .hero-mark to move the stamp to the top of the photo. */
.hero-mark.top{top:0; bottom:auto;
  padding:clamp(26px,3.4vw,44px) 22px clamp(56px,7vw,88px);
  background:linear-gradient(180deg, rgba(18,17,15,.62) 0%, rgba(18,17,15,.30) 54%,
                                     rgba(18,17,15,0) 100%)}
@media (max-width:900px){
  .hero-mark.top{padding:clamp(20px,4vw,30px) 20px clamp(48px,11vw,72px)}
}
.hero-mark{position:absolute; left:0; right:0; bottom:0; z-index:4;
  text-align:center; pointer-events:none;
  padding:clamp(56px,7vw,88px) 22px clamp(26px,3.4vw,44px);
  background:linear-gradient(180deg, rgba(18,17,15,0) 0%, rgba(18,17,15,.34) 46%,
                                     rgba(18,17,15,.66) 100%)}
.hero-mark b{display:block; font-family:var(--display); font-weight:400; color:#fff;
  font-size:clamp(22px,2.7vw,35px); letter-spacing:.26em; text-transform:uppercase;
  line-height:1.25; text-indent:.26em;
  /* insurance for the bright spots a photo always has somewhere */
  text-shadow:0 1px 14px rgba(18,17,15,.55), 0 1px 3px rgba(18,17,15,.35)}
.hero-mark i{display:block; font-style:normal; font-family:var(--sans); font-weight:300;
  font-size:clamp(9.5px,1.1vw,11.5px); letter-spacing:.38em; text-transform:uppercase;
  color:#fff; margin-top:11px; text-indent:.38em;
  text-shadow:0 1px 12px rgba(18,17,15,.8), 0 1px 3px rgba(18,17,15,.5)}
.hero-mark .rule{display:block; width:52px; height:1px; margin:16px auto 0;
  background:rgba(255,255,255,.7); box-shadow:0 1px 8px rgba(18,17,15,.5)}
@media (max-width:900px){
  .hero-mark{padding:clamp(48px,11vw,72px) 20px clamp(20px,4vw,30px)}
  .hero-mark b{font-size:clamp(20px,5.6vw,30px); letter-spacing:.24em; text-indent:.24em}
}

/* home page: hold the nav logo back until the hero is behind you */
body.home .hdr .logo{opacity:0; transition:opacity .45s ease}
body.home .hdr.stuck .logo{opacity:1}
@media (prefers-reduced-motion:reduce){
  body.home .hdr .logo{transition:none}
}
.scroll-cue{position:absolute; bottom:26px; left:clamp(28px,4.5vw,72px); z-index:3;
  color:var(--muted); font-size:10px; letter-spacing:.28em; text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){
  .hero-img img{animation:drift 26s ease-in-out infinite alternate}
  @keyframes drift{from{transform:scale(1)}to{transform:scale(1.06)}}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr; grid-template-rows:auto auto; min-height:0}
  .hero-img{height:62svh; order:-1}
  .hero-copy{padding:clamp(34px,7vw,52px) var(--gut) clamp(44px,8vw,60px)}
  .hero h1{font-size:clamp(34px,8.2vw,54px); max-width:14ch}
  .hero .lede{max-width:46ch}
  .scroll-cue{display:none}
  /* The diagonal scrim was for when copy sat over the photo. On mobile the
     copy is below it, but the wordmark is still on it — so keep the bottom
     gradient and drop only the side one. */
  .hero-img::after{background:
    linear-gradient(180deg, rgba(18,17,15,0) 66%, rgba(18,17,15,.10) 84%,
                            rgba(18,17,15,.22) 100%)}
}

/* Inner page headers are typographic, not white-text-over-photo.
   Interior photography is high-key by nature — every one of Lauren's images
   measured under 2:1 against white text, and the scrim needed to fix that
   dulls the photo badly. Her work shows better in the content, uncropped. */
.page-head{padding:clamp(110px,13vw,170px) 0 clamp(34px,5vw,56px);
  text-align:center; border-bottom:1px solid var(--rule)}
.page-head h1{font-size:clamp(38px,8vw,76px); line-height:1.02}
.page-head .lede{margin:20px auto 0; max-width:52ch}

.page-hero{position:relative; min-height:52svh; display:flex; align-items:center;
  overflow:hidden; background:var(--oat); text-align:center}
.page-hero .hero-img{position:absolute; inset:0; z-index:0}
.page-hero .hero-img::after{background:
  linear-gradient(180deg, rgba(18,17,15,.56) 0%, rgba(18,17,15,.40) 50%,
                          rgba(18,17,15,.52) 100%)}
.page-hero-in{position:relative; z-index:2; width:100%; color:#fff; padding:120px 0 60px}
.page-hero h1{color:#fff; margin:0 auto; max-width:18ch}

/* ---------- signature: the portfolio ribbon ---------- */
.ribbon{overflow:hidden; padding:0; background:var(--ground)}
.ribbon-track{display:flex; gap:14px; width:max-content}
@media (prefers-reduced-motion:no-preference){
  .ribbon-track{animation:slide 64s linear infinite}
  .ribbon:hover .ribbon-track{animation-play-state:paused}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){
  .ribbon{overflow-x:auto; -webkit-overflow-scrolling:touch}
}
.ribbon .f{flex:0 0 auto; width:clamp(200px,26vw,330px)}

/* ---------- layout helpers ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,84px); align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.wide-right{grid-template-columns:.85fr 1.15fr}
@media (max-width:820px){
  .split,.split.wide-left,.split.wide-right{grid-template-columns:1fr; gap:34px}
  .split .order-first{order:-1}
}
.grid{display:grid; gap:clamp(16px,2.4vw,30px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}

.tint{background:var(--oat)}
.ribbon{background:var(--ground)}
/* Two light-on-dark treatments, on purpose.
   .warm is the mid brown and does most of the work. .deep is the darker
   mocha and appears twice on the whole site, so it still lands when it does. */
.warm{background:var(--brown); color:var(--ground)}
.warm h2,.warm h3,.warm h4{color:var(--ground)}
.warm .lede{color:rgba(245,242,234,.82)}
.warm .eyebrow{color:rgba(245,242,234,.75)}
.deep,.dark{background:var(--mocha); color:var(--ground)}
.dark h2,.dark h3{color:var(--ground)}
.dark .lede{color:rgba(245,242,234,.8)}
.hr{height:1px; background:var(--rule); border:0; margin:0}

/* ---------- project cards ---------- */
.proj{text-decoration:none; display:block; group:card}
.proj .f{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.proj:hover .f img{transform:scale(1.05)}
.proj .f img{transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.proj .meta{padding:18px 2px 0}
.proj .meta h3{font-size:clamp(19px,2.4vw,25px)}
.proj .meta .m{font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-top:7px}

/* ---------- services ---------- */
.svc{border-top:1px solid var(--rule); padding:clamp(34px,5vw,58px) 0}
.svc:last-of-type{border-bottom:1px solid var(--rule)}
.svc-head{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap}
.svc-price{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.svc ul{margin:18px 0 0; padding:0; list-style:none; columns:2; column-gap:40px}
.svc ul li{padding:7px 0 7px 20px; position:relative; break-inside:avoid; font-size:15px}
.svc ul li::before{content:""; position:absolute; left:0; top:17px; width:8px; height:1px; background:var(--sage-d)}
@media (max-width:640px){.svc ul{columns:1}}

/* ---------- process steps (these ARE a sequence, so they're numbered) ---------- */
.steps{counter-reset:s}
.step{counter-increment:s; display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:26px 0; border-top:1px solid var(--rule)}
.step::before{content:counter(s,decimal-leading-zero); font-family:var(--display);
  font-size:24px; color:var(--accent); line-height:1.2}
@media (max-width:560px){.step{grid-template-columns:44px 1fr; gap:14px}}

/* ---------- testimonial ---------- */
.quote{max-width:820px; margin:0 auto; text-align:center}
.quote blockquote{font-family:var(--display); font-size:clamp(22px,3.6vw,38px);
  line-height:1.32; margin:0 0 26px; font-style:italic}
.quote cite{font-style:normal; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted)}

/* ---------- forms ---------- */
.form{display:grid; gap:20px}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:600px){.form .two{grid-template-columns:1fr}}
.field label{display:block; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:16px; font-weight:300; color:var(--deep);
  background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:11px 0; border-radius:0; appearance:none; transition:border-color .3s;
}
.field textarea{resize:vertical; line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-bottom-color:var(--accent)}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M0 0h11L5.5 7z' fill='%236E6B63'/></svg>");
  background-repeat:no-repeat; background-position:right 2px center}

/* ---------- footer ---------- */
.ftr{background:var(--mocha); color:var(--ground); padding:clamp(56px,8vw,92px) 0 34px}
.ftr a{color:var(--ground); text-decoration:none}
.ftr a:hover{color:#fff}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; margin-bottom:56px}
@media (max-width:760px){.ftr-grid{grid-template-columns:1fr; gap:34px}}
.ftr h4{font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  font-family:var(--sans); color:rgba(245,242,234,.72); margin-bottom:16px}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin-bottom:9px; font-size:14px}
.ftr .mark{font-family:var(--display); font-size:26px; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:14px}
.ftr-base{border-top:1px solid rgba(245,242,234,.22); padding-top:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(245,242,234,.66)}

/* ---------- reveal on scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1)}
  .rise.in{opacity:1; transform:none}
}

/* ---------- lightbox ---------- */
.lb{position:fixed; inset:0; background:rgba(24,23,21,.95); z-index:200;
  display:none; align-items:center; justify-content:center; padding:34px}
.lb.open{display:flex}
.lb img{max-width:92vw; max-height:86vh; object-fit:contain; width:auto; height:auto}
.lb button{position:absolute; background:none; border:0; color:#fff; cursor:pointer;
  font-size:34px; line-height:1; padding:14px}
.lb .x{top:10px; right:14px} .lb .prev{left:6px} .lb .next{right:6px}
.lb .prev,.lb .next{top:50%; transform:translateY(-50%); font-size:40px}

/* ---------- filters ---------- */
.filters{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:44px}
.filters button{
  background:none; border:1px solid var(--rule); padding:10px 20px; cursor:pointer;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); transition:all .3s;
}
.filters button[aria-pressed="true"]{border-color:var(--deep); color:var(--deep)}
.filters button:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- LINK IN BIO page ---------- */
body.bio{background:var(--ground)}
/* The bio page has no full-width sections, so nothing was painting a
   background — an auto-darkening browser overrides html/body and the whole
   page goes black with dark text still on it. This wrapper is a real element,
   so its background survives. */
.bio-page{background:var(--ground); min-height:100svh; width:100%}
.bio-wrap{max-width:520px; margin:0 auto; padding:44px 22px 60px; text-align:center}
/* Monogram sits underneath, so the circle reads as a mark rather than a
   broken image until her portrait exists. Drop in images/avatar.jpg and the
   photo covers it. */
/* The monogram itself sits underneath, so the circle reads as her mark until
   a portrait exists. Drop in images/avatar.jpg and the photo covers it. */
.bio-avatar{width:118px; height:118px; border-radius:50%; overflow:hidden;
  margin:0 auto 22px; position:relative;
  background:var(--sage-btn) url("../images/logo-monogram.svg") center/cover no-repeat}
.bio-avatar img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:1}
/* site.js flags images that fail to load — hide it so the monogram shows
   cleanly instead of the browser's alt text sitting on top of it */
.bio-avatar img.missing{display:none}
.bio-wrap h1{font-size:clamp(29px,7.8vw,39px); margin-bottom:36px}

/* Sage panels, white type, no thumbnails. */
.bio-card{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:var(--sage-btn); border:1px solid var(--sage-btn); color:#fff;
  padding:19px 22px; margin-bottom:12px; text-align:left;
  transition:background .25s, transform .25s, border-color .25s;
}
.bio-card:hover,.bio-card:focus-visible{background:#59664D; border-color:#59664D;
  transform:translateY(-2px)}
.bio-card .t{flex:1; min-width:0}
.bio-card .t b{display:block; font-weight:400; font-size:15px; line-height:1.3;
  color:#fff; font-family:var(--display); text-transform:uppercase; letter-spacing:.2em;
  text-indent:.2em}

/* Centred variant — add "centred" on .bio-page to switch the whole stack. */
.bio-page.centred .bio-card{justify-content:center; text-align:center; padding:21px 22px}
.bio-page.centred .bio-card .t{flex:0 1 auto}
.bio-page.centred .bio-card .arrow{display:none}
.bio-card .arrow{color:rgba(255,255,255,.8); font-size:18px; flex:0 0 auto}
.bio-card:hover .arrow{color:#fff}

/* the top one, marked as current */
.bio-socials{display:flex; justify-content:center; gap:26px; margin-top:34px}
.bio-socials a{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; color:var(--muted)}
.bio-socials a:hover{color:var(--accent)}

/* ---------- shop / LTK ---------- */
.ltk-slot{min-height:220px; border:1px dashed var(--rule); padding:22px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-size:12.5px; line-height:1.7}
.ltk-slot:has(iframe),.ltk-slot:has(.rs-adunit){border:0; padding:0; display:block}

/* ============================================================
   INTAKE FORM
   Multi-step on screens that run JS; one long form if they don't.
   ============================================================ */

.intake{max-width:780px; margin:0 auto}

/* progress */
.prog{margin-bottom:38px}
.prog-bar{height:2px; background:var(--rule); position:relative; overflow:hidden}
.prog-bar i{display:block; height:100%; background:var(--accent); width:20%;
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.prog-meta{display:flex; justify-content:space-between; margin-top:12px;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.no-js .prog{display:none}

/* steps */
.step-panel{border:0; padding:0; margin:0; min-width:0}
.step-panel legend{padding:0; margin-bottom:6px}
.step-panel h3{margin-bottom:6px}
.step-panel .hint{color:var(--muted); font-size:14.5px; margin:0 0 30px}
.js .step-panel[hidden]{display:none}
.js .step-panel{animation:stepIn .4s ease both}
@keyframes stepIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.js .step-panel{animation:none}}
.no-js .step-panel{margin-bottom:52px; padding-bottom:44px; border-bottom:1px solid var(--rule)}

/* chip / card selects */
.choices{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.choices.tight{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.choice{position:relative}
/* these are <label>s inside .field, so reset the inherited label styling */
.choice,.sw-pick{text-transform:none; letter-spacing:normal; font-weight:300}
.choice input{position:absolute; opacity:0; width:1px; height:1px}
.choice span{
  display:block; border:1px solid var(--rule); background:var(--surface);
  padding:14px 16px; cursor:pointer; font-size:14.5px; line-height:1.4;
  transition:border-color .22s, background .22s, color .22s;
}
.choice span b{display:block; font-weight:400; font-size:15px; letter-spacing:0;
  text-transform:none}
.choice span em{display:block; font-style:normal; font-size:12.5px; color:var(--muted);
  margin-top:5px; letter-spacing:0; text-transform:none; line-height:1.45}
.choice input:checked + span{border-color:var(--accent); background:var(--oat)}
.choice input:checked + span em{color:var(--accent)}
.choice input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.choice span:hover{border-color:var(--accent-l)}

/* swatch picker */
.swatches-pick{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.sw-pick input{position:absolute; opacity:0; width:1px; height:1px}
.sw-pick{position:relative}
.sw-pick span{display:block; cursor:pointer; border:1px solid var(--rule);
  background:var(--surface); transition:border-color .22s}
.sw-pick span i{display:block; height:52px}
.sw-pick span b{display:block; font-weight:400; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:9px 6px; text-align:center; color:var(--muted)}
.sw-pick input:checked + span{border-color:var(--accent); border-width:2px}
.sw-pick input:checked + span b{color:var(--accent)}
.sw-pick input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}

/* file drop */
.drop{border:1px dashed var(--rule); background:var(--surface); padding:34px 22px;
  text-align:center; cursor:pointer; transition:border-color .22s, background .22s}
.drop:hover,.drop.over{border-color:var(--accent); background:var(--oat)}
.drop input{position:absolute; opacity:0; width:1px; height:1px}
#slots{display:none}
.drop .big{font-family:var(--display); font-size:19px; display:block; margin-bottom:6px}
.drop small{color:var(--muted); font-size:12.5px; letter-spacing:.02em}
.filelist{margin-top:14px; display:grid; gap:8px}
.filelist div{display:flex; justify-content:space-between; gap:12px; align-items:center;
  font-size:13px; color:var(--muted); border-bottom:1px solid var(--rule); padding-bottom:8px}
.filelist button{background:none; border:0; color:var(--muted); cursor:pointer;
  font-size:18px; line-height:1; padding:2px 6px}

/* step nav */
.step-nav{display:flex; gap:12px; justify-content:space-between; align-items:center;
  margin-top:36px; padding-top:26px; border-top:1px solid var(--rule)}
.step-nav .right{display:flex; gap:12px; margin-left:auto}
.no-js .step-nav .back,.no-js .step-nav .next{display:none}

/* validation */
.err{color:#8C3B2E; font-size:12.5px; margin-top:7px; display:none}
.field.bad .err{display:block}
.field.bad input,.field.bad select,.field.bad textarea{border-bottom-color:#8C3B2E}
.req{color:var(--accent)}

/* success */
.done{text-align:center; padding:60px 20px}
.done h2{margin-bottom:16px}

/* ============================================================
   STYLE QUIZ
   ============================================================ */

.quiz-wrap{max-width:840px; margin:0 auto}
.quiz-prog{margin-bottom:40px}
.quiz-prog .track{height:2px; background:var(--rule); overflow:hidden}
.quiz-prog i{display:block; height:100%; background:var(--accent); width:0;
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.quiz-count{display:block; margin-top:12px; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted)}

.qhead{margin-bottom:28px}
.qhead h2{font-size:clamp(25px,4.4vw,40px); line-height:1.14}
.qhead .hint{margin-top:10px}

/* option cards */
.qopts{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.qopt{
  display:flex; align-items:center; gap:15px; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--rule); padding:15px 17px;
  cursor:pointer; font-family:var(--sans); font-size:15.5px; font-weight:300;
  color:var(--deep); line-height:1.42; letter-spacing:normal; text-transform:none;
  transition:border-color .22s, transform .22s, background .22s;
}
.qopt:hover{border-color:var(--accent-l); transform:translateY(-2px)}
.qopt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.qopt.picked{border-color:var(--accent); background:var(--oat)}
.qopt span{flex:1}

.qsw{display:flex; flex:0 0 auto; width:46px; height:46px; overflow:hidden;
  border:1px solid rgba(50,49,43,.10)}
.qsw i{flex:1; display:block}

.qnav{margin-top:30px; padding-top:24px; border-top:1px solid var(--rule);
  min-height:1px}

/* ---------- result ---------- */
.result{animation:none}
@media (prefers-reduced-motion:no-preference){
  .result{animation:resIn .6s ease both}
  @keyframes resIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
}
.rhead{text-align:center; padding-bottom:32px; border-bottom:1px solid var(--rule)}
.rhead h2{font-size:clamp(30px,6vw,54px); line-height:1.06; margin-top:2px}
.rtag{font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin:14px 0 0}
.rswatch{display:flex; justify-content:center; gap:0; margin:24px auto 0;
  max-width:280px; height:52px; border:1px solid rgba(50,49,43,.10)}
.rswatch i{flex:1; display:block}
.rblurb{margin:32px 0 0}

.rnote{background:var(--oat); padding:20px 22px; margin-top:26px; font-size:15px;
  line-height:1.65; border-left:2px solid var(--accent)}

.rsec{margin-top:clamp(38px,5vw,56px)}
.rsec h3{font-size:13px; font-family:var(--sans); letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent); padding-bottom:10px;
  border-bottom:1px solid var(--rule); margin-bottom:20px}

.rtable{width:100%; border-collapse:collapse; font-size:14.5px}
.rtable th{text-align:left; font-family:var(--sans); font-size:10px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  padding:0 12px 9px 0; border-bottom:1px solid var(--rule)}
.rtable td{padding:11px 12px 11px 0; border-bottom:1px solid var(--rule)}
.rtable td:nth-child(3){font-family:var(--sans); letter-spacing:.05em; color:var(--accent)}
@media (max-width:560px){
  .rtable th:nth-child(4),.rtable td:nth-child(4){display:none}
}

.rlist{list-style:none; margin:0; padding:0; columns:2; column-gap:36px}
.rlist li{padding:8px 0 8px 20px; position:relative; break-inside:avoid; font-size:15px}
.rlist li::before{content:""; position:absolute; left:0; top:18px; width:9px; height:1px;
  background:var(--sage-d)}
.rlist.warn{columns:1}
.rlist.warn li::before{background:#8C3B2E}
@media (max-width:620px){.rlist{columns:1}}

.rsteps{counter-reset:rs; list-style:none; margin:0; padding:0}
.rsteps li{counter-increment:rs; position:relative; padding:12px 0 12px 44px;
  border-bottom:1px solid var(--rule); font-size:15.5px}
.rsteps li:last-child{border-bottom:0}
.rsteps li::before{content:counter(rs,decimal-leading-zero); position:absolute; left:0;
  top:12px; font-family:var(--display); font-size:19px; color:var(--accent)}

.bars{display:grid; gap:9px}
.bar{display:grid; grid-template-columns:minmax(120px,1.1fr) 3fr 34px; gap:12px;
  align-items:center; font-size:13.5px}
.bar span{color:var(--muted)}
.bar i{display:block; height:5px; background:var(--rule)}
.bar b{display:block; height:100%; background:var(--sage)}
.bar:first-child b{background:var(--sage-d)}
.bar:first-child span{color:var(--deep)}
.bar em{font-style:normal; font-size:11px; letter-spacing:.1em; color:var(--muted);
  text-align:right}
@media (max-width:520px){.bar{grid-template-columns:minmax(96px,1fr) 2fr 30px; font-size:12.5px}}

.rcta{background:var(--oat); padding:clamp(26px,4vw,40px); text-align:center}
.rcta h3{border:0; color:var(--deep); font-family:var(--display); font-size:clamp(21px,3.4vw,29px);
  text-transform:none; letter-spacing:-.01em; padding:0; margin-bottom:12px}
.rcta p{max-width:52ch; margin:0 auto 22px; color:var(--muted)}
.rcta .row{justify-content:center; margin-top:0}

/* email capture under the result */
.capture{border:1px solid var(--rule); background:var(--surface);
  padding:clamp(26px,4vw,38px); margin-top:22px}
.capture h3{font-family:var(--display); font-size:clamp(20px,3.2vw,27px); margin-bottom:10px}
.capture p{color:var(--muted); font-size:15px; margin-bottom:22px; max-width:56ch}
.capture .cap-row{display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:end}
@media (max-width:680px){.capture .cap-row{grid-template-columns:1fr}}

@media print{
  .qnav,.rcta,.capture,.quiz-prog,.bars{display:none !important}
  .rsec{break-inside:avoid}
}

/* ---------- service cards, no photo ---------- */
.svc-card{border-top:2px solid var(--accent); padding:22px 0 0}
.svc-num{font-family:var(--display); font-size:13px; letter-spacing:.2em;
  color:var(--sage-d); display:block; margin-bottom:12px}
.svc-card h3{margin-bottom:12px}
.svc-card p{color:var(--muted); margin-bottom:14px}
/* same cards on a brown band */
.warm .svc-card{border-top-color:var(--sage)}
.warm .svc-num{color:var(--sage)}
.warm .svc-card p{color:rgba(245,242,234,.82)}
.warm .tlink{color:var(--ground); border-bottom-color:rgba(245,242,234,.35)}
.warm .tlink:hover{color:#fff; border-bottom-color:var(--sage)}