/* =========================================================
   יעל פריד — landing page
   Palette and type derived from the reference sites Yael chose.
   ========================================================= */

/* Dorian CLM (Culmus project) — the calligraphic face from Yael's own site,
   self-hosted so the page does not depend on Framer's CDN. */
@font-face{
  font-family:'Dorian CLM';
  src:url('fonts/dorian-clm-bookitalic.woff2') format('woff2');
  font-weight:400;
  font-style:normal;      /* the italic slant is built into the face */
  font-display:swap;
}

:root{
  /* locked theme: paper, olive, gold */
  --paper:#F2EDE3;
  --paper-warm:#EBE4D6;
  --ink:#2C2A25;
  --ink-soft:#6E6759;
  /* display type is a deep brown-black, not near-black: true black is the one
     colour on the page outside the palette, and calligraphy was always written
     in iron gall ink, which is brown */
  --ink-display:#3A2C1B;
  --line:rgba(44,42,37,.13);

  --olive:#4E5F48;
  --olive-dark:#42513D;
  --sage:#8A9581;          /* decorative only — 2.7:1 on paper */
  --sage-text:#5C6855;     /* the sage used for actual text: 5.3:1 */
  --g2-text:#8A6428;       /* the gold used for small text: 5.5:1 on white */

  --g1:#6E4E1E;             /* gold, as metal: shadow → body → specular */
  --g2:#A87C33;
  --g3:#D8B45F;
  --g4:#FFF6D8;
  --gold:var(--g2);

  /* calligraphic, used sparingly: hero, section titles, the pull quote */
  --font-display:'Dorian CLM', 'Bellefair', serif;
  --font-body:'Assistant', sans-serif;

  --measure:68ch;          /* capped again in .measure for real pages */
  --gap-section:clamp(64px,8vw,104px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  /* One continuous sheet. The atmospheric light is fixed to the viewport and
     painted here, not per section — a section that paints its own background
     leaves a visible edge where it ends. */
  background:
    radial-gradient(64% 46% at 78% 4%,  rgba(216,180,95,.20), transparent 66%) fixed,
    radial-gradient(58% 44% at 10% 96%, rgba(78,95,72,.09),  transparent 68%) fixed,
    var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  font-weight:400;
  line-height:1.9;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding-inline:clamp(20px,5vw,64px);   /* >= 20px on mobile, per brief */
}
/* body copy never stretches across the screen: 600–760px */
.measure{ max-width:720px; }

/* When wrap and measure sit on the SAME element the column gets centred, and
   when they are nested it gets aligned — which is why every section started at
   a different place. The outer grid stays 1180 everywhere; the reading column
   is constrained on the children instead, so every section begins on the same
   edge. */
.wrap.measure{ max-width:1180px; }
.wrap.measure > *{ max-width:720px; }

.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.24;
  margin:0 0 32px;
  color:var(--ink-display);
}
/* the wordmark is display type too */
.wordmark__name{ color:var(--ink-display); }

/* a gold glint on the full stop. Punctuation carries no reading load, so it
   can sit at a contrast the letters never could — gold on cream tops out
   around 3:1. */
.display .dot{ color:var(--g2); }
/* Bellefair is delicate, so it wants to be set larger than a normal serif */
.section__title{ font-size:clamp(32px,4.4vw,50px); }

/* ================= paper surface ================= */
#grain{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.055; mix-blend-mode:multiply;
}
/* fine dither ABOVE everything: this is what removes gradient banding.
   Without it the eye reads the 8-bit steps in the ombre as faint stripes. */
#dither{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:6; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
}

/* ================= motion ================= */
/* sections paint their own backgrounds, so the thread has to sit above them.
   It lives in the outer gutter and never covers the reading column. */
/* clipped: with overflow visible the thread's blur can paint past the page
   edge and extend the scrollable width, which then throws off any layout
   measured against it */
#threadWrap{ position:absolute; top:0; left:0; width:100%; pointer-events:none; z-index:3; overflow:hidden; }
#thread{ display:block; }
.site-header, main, .footer{ position:relative; z-index:2; }
@media (max-width:899px){
  #threadWrap{ opacity:.82; }   /* bold enough to read the coil and the beam */
  /* #grain and #dither are fixed, full-screen mix-blend-mode layers. As the
     page scrolls beneath them the browser must re-blend the whole viewport
     every frame — negligible on desktop, a real stutter on phones. The texture
     they add is barely visible on a small screen, so drop them here. */
  #grain, #dither{ display:none; }
  /* PHONE ONLY line-break tuning — keeps the wrapped words together so they
     drop to the next line as a unit. Desktop/tablet wrapping is left untouched. */
  .m-keep{ white-space:nowrap; }
  /* This one a-turn sentence is a few px wider than the 26ch measure allows
     at default tracking, so it wraps to 2 lines on phones. Tighten tracking
     just enough to fit it on one line without loosening the column width
     the rest of the section relies on. */
  .a-turn--tight{ letter-spacing:-0.5px; }
}
/* Hidden by default (no break on phones); shown only at min-width:900px below. */
.d-break{ display:none; }
@media (min-width:900px){
  /* DESKTOP/TABLET ONLY line-break tuning — mirrors .m-keep but for the
     min-width:900px breakpoint. Phone wrapping (.m-keep) is untouched. */
  .d-keep{ white-space:nowrap; }
  /* Forces a break only on desktop/tablet. */
  .d-break{ display:inline; }
  /* These sentences sit in fixed ch-wide columns that don't scale with the
     larger desktop font, so a specific line is a few px wider than the
     column at default tracking. Tighten just enough (verified per line at
     900px and 1440px) so each renders as one line instead of orphaning its
     last word/clause. */
  .a-turn--tight{ letter-spacing:-0.8px; }  /* turning-point a-turn: "...השינוי שרציתי." */
  .d-tight-b{ letter-spacing:-1.2px; }      /* turning-point tp-lift: "...שלך למד שם." */
  .d-tight-c{ letter-spacing:-4.5px; }      /* testimonials heading: "היא לשמוע...שם." */
}

/* The thread DRAWS ITSELF along the wire as you scroll — the pen following the
   line, spiralling the coil into being loop by loop — down as you go down, back
   up as you go up. ON EVERY DEVICE now, not just phones: a stroke-dashoffset
   reveal (not a Y-clip, which reveals horizontal bands and pops the coil in as
   chunks) driven by a CSS scroll-timeline, so it runs on the browser's
   compositor instead of a per-frame JavaScript loop that had to re-render blur
   filters and a mask every frame — the thing that stuttered the whole page and
   revealed the loom in chunks on slower machines. Only the single thin strand
   (and the cheap unfiltered unravel beam) animates; the heavy filtered/masked
   layers are gone. The @keyframes are generated per page in thread.js.
   Gated behind @supports so a browser without scroll-timelines keeps the static,
   fully-drawn thread; and behind no-preference so reduced-motion users get it
   static, never drawing on scroll. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    #tStrand > path{
      animation-name: threadDrawLine;
      animation-timeline: scroll(root block);
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    /* the unravel beam (halo + core) draws in step with the strand; its
       dashoffset holds constant outside the release, so it only paints while
       the loom is opening — the smooth scroll elsewhere is untouched */
    #tBeamHalo, #tBeamCore{
      animation-name: threadBeam;
      animation-timeline: scroll(root block);
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
  }
}

/* only ever hide content when JS is running to bring it back */
.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
}
.js .reveal.is-in{ opacity:1; transform:none; }
.reveal--d1{ transition-delay:.10s; }
.reveal--d2{ transition-delay:.20s; }
.reveal--d3{ transition-delay:.30s; }

/* On phones the reveal-on-scroll pops: a single flick scrolls a whole screen,
   and iOS batches the IntersectionObserver callbacks during momentum scroll,
   so a cluster of text animates in all at once the moment the fling settles —
   the "whole page jumps in front of me" effect. There's no elegant fade at
   that scroll speed, so don't hide the text at all: let it simply be present
   as you scroll to it, which is the flowy feel. Matches the thread's mobile
   breakpoint. */
@media (max-width:899px), (pointer:coarse){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

p{ margin:0 0 24px; }

/* ================= header ================= */
.site-header{
  position:absolute; top:0; inset-inline-start:0; width:100%; z-index:5;
  padding-block:30px;
}
/* wordmark lockup: calligraphic name, neutral tagline — the same pairing the
   rest of the page runs on, and the tagline stays legible small */
.wordmark{ display:inline-flex; align-items:center; gap:10px; }
/* Name and tagline carry the SAME declared font-size. Do not "correct" this by
   measuring letter heights and scaling the tagline up: that was tried, and it
   made the tagline overpower the name badly. Dorian is a fine italic script and
   Assistant is a solid sans, so at equal measured height the sans always reads
   larger — thicker strokes, wider letters. Equal declared px is what actually
   looks equal here. Chosen by eye, on the page, against real text. */
.wordmark__name{
  font-family:var(--font-display);
  font-size:clamp(16px,1.4vw,19px);
  line-height:1;
  color:var(--ink-display);
}
/* a plain upright bar between the two halves */
.wordmark__rule{
  flex:none;
  font-family:var(--font-body);
  font-size:clamp(16px,1.4vw,19px);
  line-height:1;
  color:var(--g2);
}
.wordmark__rule::before{ content:'|'; }
.wordmark__tag{
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(16px,1.4vw,19px);        /* = the name, same number */
  line-height:1; letter-spacing:.01em;
  color:var(--sage-text); white-space:nowrap;
}
@media (max-width:600px){
  .wordmark{ gap:8px; }
  .wordmark__name{ font-size:14px; }
  .wordmark__rule{ font-size:14px; }
  .wordmark__tag{ font-size:14px; }        /* = the name, same number */
}

/* ================= buttons — all four identical ================= */
/* Hot foil stamping: a dark olive block with gold foil lettering and a fine
   gold frame, the way a luxury card is stamped. The letters carry the thread's
   own metal gradient, so the button is made of the same material as the line
   running down the page. No icons — the brief forbids them. */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body);
  /* 19px/600: gold on olive is ~3.8:1, which only clears the bar as large text */
  font-weight:700; font-size:19px; letter-spacing:.035em;
  line-height:1;           /* otherwise it inherits the body's 1.9 and bloats */
  padding:23px 46px;
  min-height:46px;
  white-space:nowrap;      /* the label must never break across two lines */
  border:none; border-radius:999px;
  background:var(--olive); color:var(--g3);
  text-decoration:none; cursor:pointer;
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(216,180,95,.55),
    0 2px 3px rgba(44,42,37,.14),
    0 12px 26px rgba(44,42,37,.12);
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* the foil itself */
.btn__foil{
  /* The floor of this gradient is the legibility limit, not a design choice:
     on olive, #D8B45F is 3.47:1 and #A87C33 is 1.83:1 — the old bronze end was
     1.10:1, i.e. invisible. Real foil never goes black either; it dulls. */
  background:linear-gradient(100deg,
    var(--g3) 0%, #EACF8E 24%, #FFF9E8 46%, #EACF8E 64%, var(--g3) 100%);
  background-size:220% 100%;
  /* RTL: the line starts on the right, so the bright part of the foil sits
     there at rest — on "כן" — and travels leftwards on hover */
  background-position:8% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  transition:background-position .85s cubic-bezier(.22,1,.36,1);
}
/* The glare: one band of light crossing the whole face, behind the letters.
   Driven by a keyframe rather than a transition — a transition only runs on the
   change into :hover, so if the pointer is already over a button when it scrolls
   into view (which happens on the lower CTAs) the sweep is missed entirely and
   never replays. An animation restarts on every hover. */
.btn::before{
  content:''; position:absolute; top:0; bottom:0;
  inset-inline-start:-65%; width:48%;
  background:linear-gradient(105deg, transparent, rgba(255,246,216,.38), transparent);
  transform:skewX(-14deg);
  pointer-events:none;
}
@keyframes btnGlare{
  from{ inset-inline-start:-65%; }
  to  { inset-inline-start:120%; }
}
.btn:hover::before{ animation:btnGlare .8s cubic-bezier(.22,1,.36,1) both; }
.btn:hover{
  background:var(--olive-dark);
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,246,216,.8),
    0 4px 6px rgba(44,42,37,.16),
    0 20px 38px rgba(44,42,37,.18);
}
/* superseded by the btnGlare keyframe above — a static end value here would
   place the band at the far edge before the animation had a chance to run */
.btn:hover .btn__foil{ background-position:82% 0; }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--g3); outline-offset:4px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

@media (prefers-reduced-motion:reduce){
  .btn, .btn__foil{ transition:none; }
  .btn::before, .btn:hover::before{ display:none; animation:none; }
}

@media (max-width:599px){
  /* full width of the content area, and small enough that the label still
     fits on one line at 320px */
  .btn{ width:100%; font-size:16px; letter-spacing:.02em; padding:20px 16px; }
}

.cta-gap{ margin-top:clamp(48px,7vw,76px); }
.cta-gap--center{ display:flex; justify-content:center; }

/* ================= sections ================= */
.section{ padding-block:var(--gap-section); }
/* deliberately no background: a warm block would leave a hard edge at each end.
   Kept as a hook in case a section ever needs its own ground. */
.section--warm{ background:transparent; }

/* The ombre panel already supplies the breathing room on both of its sides.
   Without this the neighbours add a full section gap on top of the fade and
   you get an enormous hole. */
#empathy{ padding-bottom:0; }
#turning-point{ padding-top:0; }

/* ================= 3. המחיר של הלופ — typographic weight ================= */
/* the opening statement carries the section's argument */
.cost .c-open{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,42px);
  line-height:1.3; color:#F4EFE1;
  margin-bottom:clamp(38px,5vw,60px);
  max-width:22ch;
}
/* the line the litany hangs off */
.cost .c-topic{
  font-size:clamp(20px,2vw,25px);
  margin-bottom:clamp(26px,3vw,36px);
}
.section--dark .cost p.c-topic{ color:#F4EFE2; }
/* brightest thing in the section after the last time line */
.section--dark .cost p.c-open{ color:#FBF7EC; }
/* the two bare words sit furthest back */
/* same colour as the body copy: at 16px it needs 4.5:1, and anything
   dimmer than this fails. The quieter reading comes from size alone. */
.section--dark .cost p.c-beat{ color:#D9D2C1; }
/* the litany: each "הוא" a separate blow, so they get air between them */
.cost .c-list{ margin-bottom:20px; }
/* two bare words — quieter, but on the same edge as everything else. An indent
   here reads as broken alignment, not as an aside. */
.cost .c-beat{
  font-size:16px; color:#C9C2AF;
  margin-bottom:10px;
}
.cost .c-beat + .c-beat{ margin-bottom:0; }

/* ================= 4. the turning point =================
   The pivot of the whole page: the knot opens here, so the line that names it
   is set larger than any other heading and given room to land. */
#turning-point .section__title{
  font-size:clamp(44px,7vw,96px);
  line-height:1.02;
  margin:0 0 clamp(38px,5vw,64px);
  max-width:none;
}
/* the short broken lines read as a held breath, not a paragraph */
#turning-point .measure > p{ margin-bottom:18px; max-width:32ch; }

/* the thesis of her whole method */
#turning-point .tp-thesis{
  font-size:clamp(21px,2vw,27px);
  line-height:1.5;
  color:var(--ink);
  margin-bottom:30px;
  max-width:26ch;
}
/* a question, and its answer — they should not look like the same thing */
#turning-point .tp-q{
  font-family:var(--font-display);
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.2; color:var(--olive);
  margin:clamp(34px,4.4vw,52px) 0 6px;
}
#turning-point .tp-a{
  font-size:16px; color:var(--ink-soft);
  letter-spacing:.02em;
  margin-bottom:clamp(34px,4.4vw,52px);
}
/* where she turns from the problem to her own work */
#turning-point .tp-method{
  font-size:clamp(19px,1.7vw,23px);
  color:var(--ink);
  margin-top:clamp(30px,4vw,44px);
  max-width:28ch;
}
/* the payoff of the entire page — nothing after it competes */
#turning-point .tp-payoff{
  font-family:var(--font-display);
  font-size:clamp(32px,4.8vw,60px);
  line-height:1.24;
  color:var(--olive);
  margin-top:clamp(44px,6vw,72px);
  max-width:20ch;
}
/* four lines that are really one sentence — set as a stanza, tight together */
#turning-point .tp-stanza{
  font-size:clamp(19px,1.75vw,22px);
  line-height:1.55;
  margin-bottom:8px;
  max-width:30ch;
}
/* the admission the stanza was building to — set in the display face, since it
   is a turn in the voice rather than another line of the argument */
#turning-point .tp-beat{
  font-family:var(--font-display);
  font-size:clamp(25px,2.9vw,36px);
  line-height:1.35;
  color:var(--olive);
  margin-top:clamp(26px,3vw,38px);
  margin-bottom:clamp(32px,3.8vw,48px);
  max-width:24ch;
}
/* raised, so the payoff underneath does not arrive out of flat copy */
#turning-point .tp-lift{
  font-size:clamp(19px,1.75vw,22px);
  line-height:1.55;
  margin-bottom:8px;
  max-width:30ch;
}
#turning-point .cta-gap{ margin-top:clamp(56px,8vw,92px); }

/* ================= 6. קצת עליי =================
   The "קצת עליי" label was removed at Yael's decision: it was the only heading
   on the page that was a category name rather than her voice, and the section
   is evidence for the reader's decision, not a biography. This sentence is the
   heading now — and it mirrors the hero, which the label was burying. */
#about .a-lead{
  font-size:clamp(27px,3.4vw,42px);
  line-height:1.3;
  margin-bottom:clamp(30px,3.4vw,44px);
  max-width:22ch;
}
/* deliberately echoes the hero's list — set tight and quiet so it reads as a
   list she is running through, and so the echo is visible at all */
#about .a-echo{
  font-size:16px; color:var(--ink-soft);
  margin-bottom:6px; line-height:1.7;
}
#about .a-echo + :not(.a-echo){ margin-top:clamp(24px,3vw,34px); }
/* the line that connects: she recognises herself here. This is the emotional
   centre of the section, not the credential. */
#about .a-turn{
  font-size:clamp(22px,2.5vw,31px);
  line-height:1.45;
  color:var(--olive);
  max-width:26ch;
  margin-bottom:clamp(32px,3.8vw,46px);
}
/* the credential is stated plainly, at body size. It is evidence, not the
   point — saying it quietly reads more confident than announcing it. */
#about .a-cred{
  font-size:18px;
  line-height:1.9;
  color:var(--ink);
  margin-bottom:clamp(22px,2.6vw,30px);
}
/* her positioning, in one sentence */
#about .a-position{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,42px);
  line-height:1.3;
  color:var(--olive);
  margin:clamp(30px,3.8vw,46px) 0;
  max-width:22ch;
}
#about .a-close{ font-size:17px; color:var(--ink-soft); }

/* ================= 7. FAQ ================= */
/* the first line of an answer leads; the rest support it */
.faq__a-inner p:first-child{ font-size:clamp(18px,1.6vw,20px); color:var(--ink); }
.faq__a-inner p{ color:var(--ink-soft); margin-bottom:14px; }

/* ================= 8. the form ================= */
#contact-form .f-pre{
  font-size:17px; color:var(--ink-soft);
  margin-bottom:10px;
}
#contact-form .f-invite{
  font-size:clamp(19px,1.8vw,23px);
  margin-bottom:8px;
}
#contact-form .f-sub{ font-size:17px; color:var(--ink-soft); }

/* full-bleed colour field — the emotional floor of the page.
   Contrast is what stops a page reading as a document. */
/* The floor of the page. An ombre panel, not a block: it fades up out of the
   paper and back down into it, so there is no edge anywhere. Stops follow a
   smoothstep curve — a plain 3-stop gradient shows corners where the rate of
   change turns. */
.section--dark{
  color:#EFE9DC;
  /* The fades are a FIXED height, not a share of the section height, so the
     copy can start below the top fade and never sits on light paper in cream
     ink. Percentage stops made the fade grow with the content. */
  --fade-in:280px;
  --fade-out:320px;
  /* the +50 keeps "עוד שנה" clear of where the bottom fade begins */
  padding-block:calc(var(--fade-in) + 20px) calc(var(--fade-out) + 50px);
  background:
    radial-gradient(70% 42% at 60% 50%, rgba(216,180,95,.15), transparent 68%),
    linear-gradient(180deg,
      rgba(78,95,72,0)     0%, rgba(78,95,72,.037) 12.5%,
      rgba(78,95,72,.156) 25%, rgba(78,95,72,.316) 37.5%,
      rgba(78,95,72,.500) 50%, rgba(78,95,72,.684) 62.5%,
      rgba(78,95,72,.844) 75%, rgba(78,95,72,.963) 87.5%,
      rgba(78,95,72,1)   100%),
    linear-gradient(0deg,
      rgba(78,95,72,0)     0%, rgba(78,95,72,.037) 12.5%,
      rgba(78,95,72,.156) 25%, rgba(78,95,72,.316) 37.5%,
      rgba(78,95,72,.500) 50%, rgba(78,95,72,.684) 62.5%,
      rgba(78,95,72,.844) 75%, rgba(78,95,72,.963) 87.5%,
      rgba(78,95,72,1)   100%),
    linear-gradient(var(--olive), var(--olive));
  background-repeat:no-repeat;
  background-size:
    100% 100%,
    100% var(--fade-in),
    100% var(--fade-out),
    /* 2px of overlap at each end: without it the layers leave a hairline seam */
    100% calc(100% - var(--fade-in) - var(--fade-out) + 4px);
  background-position: center, top, bottom, 0 calc(var(--fade-in) - 2px);
}
@media (max-width:899px){
  .section--dark{ --fade-in:210px; --fade-out:240px; }
}
.section--dark .cost p{ color:#D9D2C1; }
/* the time lines stay in the body face — large and light, not calligraphic.
   They also brighten as they grow, and the last one lands in gold: the only
   place in the section where the thread's own material appears in the type. */
.section--dark .t1,.section--dark .t2,.section--dark .t3,.section--dark .t4{
  font-family:var(--font-body);
  font-weight:400;
}
.section--dark .cost p.t1{ color:#DCD5C4; }
.section--dark .cost p.t2{ color:#E7E1D2; }
.section--dark .cost p.t3{ color:#F4EFE2; }
/* gold on olive is 3.47:1 — fine at this size, nowhere near it at body size */
.section--dark .cost p.t4{ color:var(--g3); }

/* ================= 1. hero — type-led =================
   No portrait: the copy is about her, not about Yael. The headline is the
   image. Everything else gets out of its way. */
.hero{
  position:relative;
  /* not a full 100svh: a full screen with centred content leaves a dead band
     under the button before the next section starts */
  min-height:92svh;
  display:flex; align-items:center;
  padding:clamp(112px,12vw,150px) 0 clamp(28px,3.4vw,44px);
  /* no background of its own — the page's light is painted on the body, so the
     hero cannot leave an edge where it ends */
}
.hero__inner{
  width:100%; max-width:1180px; margin:0 auto;
  padding-inline:clamp(20px,5vw,64px);
  /* keep clear of the gutter the thread runs down */
  padding-inline-end:clamp(20px,11vw,200px);
}

.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.26em;
  color:var(--sage); margin:0 0 clamp(26px,3.4vw,40px);
}

.hero__title{
  /* size is set in JS so the line always fits exactly once — never wraps */
  font-size:clamp(34px,10.5vw,132px);
  white-space:nowrap;
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0 0 clamp(26px,3.4vw,44px);
}

.hero__body{ max-width:34ch; margin-bottom:clamp(30px,3.6vw,46px); }
.hero__body .hero__line{ font-size:clamp(17px,1.35vw,20px); margin-bottom:10px; }
/* Assistant, not Dorian: this is a full sentence, and the calligraphic face
   becomes hard work over more than a few words */
.hero__body .hero__line--q{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(21px,2.2vw,29px);
  line-height:1.45; color:var(--olive);
  margin-top:22px;
  max-width:26ch;
}

.hero__foot{ max-width:46ch; }
.hero__line--turn{ font-size:clamp(18px,1.5vw,21px); margin-bottom:10px; }
.hero__line--support{ color:var(--ink-soft); font-size:16px; margin-bottom:34px; }

/* short laptop screens: keep the CTA above the fold without shrinking phones */
@media (min-width:900px) and (max-height:760px){
  .hero{ padding-block:clamp(96px,11vh,120px) clamp(40px,6vh,64px); }
  .hero__title{ font-size:clamp(48px,7.4vh,86px); margin-bottom:clamp(20px,2.6vh,30px); }
  .eyebrow{ margin-bottom:clamp(18px,2.4vh,26px); }
  .hero__body{ margin-bottom:clamp(22px,3vh,32px); }
  .hero__body .hero__line--q{ font-size:clamp(21px,3.1vh,28px); margin-top:14px; }
  .hero__line--support{ margin-bottom:24px; }
}

@media (max-width:899px){
  .hero{ min-height:auto; padding-top:clamp(120px,26vw,150px); }
  .hero__inner{ padding-inline:clamp(20px,6vw,40px); }
  .hero__title{ max-width:none; }
}
/* a hairline of gold under the section titles */
.section__title{ position:relative; }
#turning-point .section__title::after,
#about .section__title::after,
#faq .section__title::after,
#contact-form .section__title::after{
  content:''; display:block;
  width:52px; height:1px; margin-top:22px;
  background:linear-gradient(90deg, var(--gold), rgba(185,143,69,0));
}
.hero__text{ max-width:560px; margin-inline-start:auto; }

.hero__panel--media{
  position:relative;
  min-height:56vh;
}
@media (min-width:900px){
  .hero__panel--media{ min-height:100svh; }
}

/* image runs to the edge of the viewport, never boxed */
.photo--bleed{ position:absolute; inset:0; width:100%; height:100%; border:none; }

/* portrait card overlaps the seam between the two panels */
.photo--card{
  position:absolute;
  bottom:clamp(36px,7vw,86px);
  inset-inline-start:clamp(-40px,-4vw,-28px);
  width:clamp(190px,26vw,300px);
  aspect-ratio:4/5;
  box-shadow:0 24px 60px rgba(43,42,38,.16);
}
@media (max-width:899px){
  .photo--card{
    position:relative; inset:auto; margin:-64px auto 0;
    width:min(230px,62%);
  }
  .hero__panel--media{ padding-bottom:56px; }
}
.hero__title{
  font-size:clamp(52px,8.4vw,104px);   /* Bellefair is delicate; it wants size */
  line-height:1.06;
  margin-bottom:34px;
}
.hero__line{ margin-bottom:14px; }
.hero__line--q{ margin-top:20px; }
.hero__line--turn{ margin-top:26px; }
.hero__line--support{ color:var(--ink-soft); font-size:16.5px; margin-bottom:38px; }

.hero__media{ display:flex; justify-content:center; }

/* photo placeholders — replaced with Yael's real photos, never stock */
.photo{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#EFE8DB,#E3D9C8);
  color:var(--ink-soft); font-size:13px; letter-spacing:.04em;
  border:1px solid var(--line);
}
.photo--hero{ width:100%; max-width:430px; aspect-ratio:4/5; }
.photo--about{ width:100%; max-width:390px; aspect-ratio:4/5; }
.photo--shot{ width:100%; aspect-ratio:9/16; background:#fff; }

/* text first on mobile, image after, button not pushed far down */
@media (max-width:899px){
  .hero__text{ order:1; }
  .hero__media{ order:2; }
  .photo--hero{ max-width:290px; }
}

/* ================= 2. empathy ================= */
/* The hero is a full screen tall and centres its content, so it leaves dead
   space below the button; the section then added its own top padding on top of
   that. The result was a void, and the first line arrived with nothing to
   announce it. */
#empathy{ padding-top:clamp(24px,3vw,44px); }

/* the opening beat: larger, so it reads as the section starting rather than a
   paragraph continuing */
#empathy .e-lead{
  font-size:clamp(22px,2.3vw,30px);
  line-height:1.5;
  margin-bottom:clamp(26px,3vw,38px);
  max-width:24ch;
}
/* the lines that set up what follows — quieter, leaning into it */
#empathy .e-cue{ color:var(--ink-soft); margin-bottom:14px; }

/* the trigger: where the section turns from morning resolve to what breaks it */
#empathy .e-trigger{
  font-size:clamp(19px,1.7vw,22px);
  margin-top:clamp(26px,3vw,36px);
  margin-bottom:clamp(22px,2.6vw,30px);
  max-width:30ch;
}
/* two physical facts, in the body. Set close together and in olive — they are
   sensation, not argument. */
#empathy .e-body{
  font-family:var(--font-display);
  font-size:clamp(24px,2.8vw,34px);
  line-height:1.3;
  color:var(--olive);
  margin-bottom:6px;
}
#empathy .e-body + :not(.e-body){ margin-top:clamp(26px,3vw,36px); }
/* the line the whole passage exists for */
#empathy .e-punch{
  font-size:clamp(19px,1.75vw,23px);
  line-height:1.55;
  max-width:28ch;
  margin-bottom:clamp(24px,2.8vw,34px);
}

#empathy .quoted{
  font-family:var(--font-display);
  font-size:1.06em;
  margin-bottom:16px;
  color:var(--ink-display);
}
/* the line the whole section has been building to — set as a pull quote */
#empathy .emphasis{
  font-family:var(--font-display);
  font-size:clamp(30px,5vw,58px);
  line-height:1.22;
  margin-top:clamp(48px,7vw,84px);
  max-width:14ch;
  color:var(--olive);
}
/* The alternating section offsets are gone: with every column already
   right-aligned in RTL and a thread down the left gutter, shifting sections
   read as drift rather than rhythm. One consistent edge instead. */

/* ================= 3. cost — time opens up, and grows ================= */
.cost p{ margin-bottom:26px; }
/* each unit of time is larger and further away than the last */
.cost .t1{ margin-top:clamp(56px,8vw,96px); margin-bottom:40px; font-size:clamp(24px,3vw,34px); line-height:1.35; }
.cost .t2{ margin-bottom:74px;  font-size:clamp(28px,3.6vw,42px); line-height:1.3; }
.cost .t3{ margin-bottom:118px; font-size:clamp(34px,4.6vw,54px); line-height:1.25; }
.cost .t4{ margin-bottom:0;     font-size:clamp(42px,6.4vw,76px); line-height:1.15; }

/* ================= 5. testimonials ================= */
.shots{ display:grid; gap:14px; margin-top:clamp(44px,6vw,64px); }
/* 1–3: three separate screenshots stacked in one column, close together */
.shots--story{ grid-template-columns:1fr; justify-items:center; gap:8px; }
.shots--story .shot{ width:min(440px,100%); }
.shot__img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line);
}
.shots--single{ justify-items:center; }
.shots--single .shot{ width:min(440px,100%); }
.shot{ margin:0; }

/* significant vertical gap between the first story and each later one,
   with no divider line: 80–120px desktop, 56–80px mobile */
.shots--single{ margin-top:clamp(56px,9vw,120px); }

/* ================= 6. about — image bleeds to the edge ================= */
.about-section{ overflow:hidden; }
/* same outer grid as every other section, so the text starts on the same edge */
.about{
  width:100%; max-width:1180px; margin:0 auto;
  padding-inline:clamp(20px,5vw,64px);
  display:grid; grid-template-columns:1fr;
  gap:clamp(40px,6vw,64px); align-items:center;
}
@media (min-width:900px){
  .about{ grid-template-columns:1.02fr .98fr; }
  /* only the image is allowed to break the grid and run off the edge */
  .about__media{ margin-inline-end:calc(-1 * clamp(20px,5vw,64px)); }
}
.about__media{ display:flex; justify-content:center; }

/* arch-topped mask, as on the reference sites */
.photo--arch{
  display:block;
  width:100%; max-width:430px; aspect-ratio:4/5;
  object-fit:cover;
  /* a landscape photo in a portrait arch: hold her face near the top */
  object-position:50% 22%;
  border-radius:50% 50% 4px 4px / 34% 34% 3% 3%;
  /* a fine gold edge, echoing the thread */
  box-shadow:0 0 0 1px rgba(216,180,95,.5), 0 22px 50px rgba(44,42,37,.14);
}

/* ================= 7. faq ================= */
.faq{ margin-top:clamp(36px,5vw,52px); border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ margin:0; font-size:inherit; font-weight:400; }
/* deliberately NOT the calligraphic face — it gets tiring in quantity */
.faq__btn{
  width:100%;
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  text-align:start;
  font-family:var(--font-body); font-weight:400; font-size:clamp(18px,2.2vw,22px); line-height:1.55;
  color:var(--ink);
  background:none; border:none; cursor:pointer;
  padding:26px 0;
  min-height:44px;
}
.faq__btn:hover{ color:var(--olive); }
.faq__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.faq__btn[aria-expanded="true"]{ color:var(--olive); }

/* The control. Built from two gold hairlines rather than an imported icon, so
   it is made of the same material as the thread: a plus when closed, a single
   line when open. */
.faq__mark{
  position:relative; flex:none;
  width:15px; height:15px; margin-top:.55em;
}
.faq__mark::before,
.faq__mark::after{
  content:''; position:absolute; inset-inline-start:0; top:50%;
  width:15px; height:1px; margin-top:-.5px;
  background:var(--g2);
  transition:transform .28s cubic-bezier(.22,1,.36,1), background-color .28s ease;
}
.faq__mark::after{ transform:rotate(90deg); }         /* the vertical stroke */
.faq__btn[aria-expanded="true"] .faq__mark::after{ transform:rotate(0deg); }
.faq__btn:hover .faq__mark::before,
.faq__btn:hover .faq__mark::after,
.faq__btn[aria-expanded="true"] .faq__mark::before,
.faq__btn[aria-expanded="true"] .faq__mark::after{ background:var(--g3); }

/* an open question steps forward */
.faq__btn[aria-expanded="true"] .faq__label{ color:var(--olive); }

.faq__a{ overflow:hidden; }
.faq__a-inner{ padding-bottom:28px; }
.faq__a-inner p:last-child{ margin-bottom:0; }

/* ================= 8. form =================
   Matches the field style on Yael's own site: the question sits inside the
   field. Implemented as a floating label rather than a placeholder, so every
   field keeps a real visible label once typed into — the brief requires that,
   and a placeholder disappears the moment she starts writing. */
.form{ margin-top:clamp(38px,5vw,52px); max-width:560px; }

.field{ position:relative; margin-bottom:18px; }
.field__input{
  width:100%;
  font-family:var(--font-body);
  font-size:16px;                /* 16px stops iOS auto-zoom on focus */
  line-height:1.5;
  padding:26px 22px 14px;
  min-height:64px;
  color:var(--ink);
  background:rgba(255,255,255,.55);
  border:1px solid var(--line);
  border-radius:10px;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.field__input--area{ min-height:132px; resize:vertical; padding-top:30px; }

.field__label{
  position:absolute; inset-inline-start:23px; top:21px;
  font-size:16px; color:var(--ink-soft);
  pointer-events:none;
  transform-origin:right top;
  transition:transform .22s ease, color .22s ease;
}
/* lifts once the field has focus or content */
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label{
  transform:translateY(-13px) scale(.72);
  color:var(--olive);
}
.field__input:focus{
  outline:none;
  border-color:var(--g2);
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 3px rgba(216,180,95,.18);
}
.field__input[aria-invalid="true"]{ border-color:#A5442F; }

.field__error, .form__error{
  margin:7px 2px 0;
  font-size:14.5px;
  color:#A5442F;
}

/* the consent line, per the brief: only present because a mailing system needs it */
.consent{ display:flex; align-items:flex-start; gap:11px; margin:22px 0 30px; }
.consent__box{
  flex:none; width:18px; height:18px; margin-top:5px;
  accent-color:var(--olive); cursor:pointer;
}
.consent__label{ font-size:15px; line-height:1.6; color:var(--ink-soft); cursor:pointer; }

.btn--submit{ margin-top:4px; }

.form__success{
  margin-top:clamp(38px,5vw,52px);
  padding:30px 32px;
  background:rgba(255,255,255,.5);
  border-inline-start:2px solid var(--g3);
  border-radius:8px;
  max-width:560px;
}
.form__success p{ margin-bottom:10px; }
.form__success p:last-child{ margin-bottom:0; }

/* ================= 9. footer =================
   ONE row, three parts, no visible dividers:
     right  — the copyright, because it names her and RTL reads from there
     centre — the social icons, the only thing anyone clicks; they break up the
              two blocks of text and give the row a centre
     left   — the legal links, furthest away because they are obligation
   Bottom padding clears the floating buttons in the opposite corner. */
.footer{
  position:relative;
  padding-block:clamp(44px,5.5vw,60px) clamp(52px,6.5vw,72px);
  color:var(--ink-soft);
  font-size:15px;
}
.footer::before{
  content:''; position:absolute; top:0; inset-inline:0; height:1px;
  background:linear-gradient(to left,
    rgba(168,124,51,0), var(--g2) 22%, var(--g3) 50%, var(--g2) 78%, rgba(168,124,51,0));
  opacity:.5;
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:18px 32px;
  align-items:center; justify-content:space-between;
}

/* right: the copyright. Dorian's letters render about 1.33x taller than
   Assistant's, so the two sizes differ in order to match optically. */
.footer__copy{
  margin:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  line-height:1.6;
}
.footer__name{ font-family:var(--font-display); color:var(--ink-display); font-size:15px; }
.footer__year{ font-family:var(--font-body); color:var(--ink-soft); font-size:20px; letter-spacing:.04em; }

/* centre: the icons */
.social{
  display:flex; align-items:center; gap:6px;
  margin:0; padding:0; list-style:none;
}
.social__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  color:var(--olive);
  border-radius:50%;
  transition:color .25s ease, background .25s ease;
}
.social__link:hover{ color:var(--olive-dark); background:rgba(78,95,72,.10); }
.social__link:focus-visible{ outline:2px solid var(--g3); outline-offset:2px; }

/* left: the fine print */
.footer__nav{ display:flex; flex-wrap:wrap; gap:12px 24px; }
.footer__nav a{ color:var(--ink-soft); font-size:14px; letter-spacing:.02em; text-decoration:none; }
.footer__nav a:hover{ color:var(--ink); text-decoration:underline; }
.footer__nav a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

@media (max-width:820px){
  /* stack, centred: social icons on top, legal links, then the copyright last */
  .footer__inner{ flex-direction:column; align-items:center; text-align:center; gap:22px; }
  .social{ order:-1; margin-inline-start:0; }   /* icons first */
  /* the website link gets its own line under the icons; the three legal
     links sit together on the line below it, with a tighter gap so they
     hold one line down to 320px */
  .footer__nav{ justify-content:center; gap:10px 14px; }
  .footer__nav a:first-child{ flex:0 0 100%; text-align:center; }
  .footer__copy{ order:1; justify-content:center; gap:5px; }
  /* one calm size so the copyright holds on a single line; on the very
     narrowest phones it wraps but still sits at the bottom */
  .footer__name, .footer__year{ font-size:12px; }
  .footer{ padding-bottom:120px; }        /* clear of the floating buttons */
}

/* ================= back to top ================= */
.to-top{
  position:fixed; z-index:59;
  inset-inline-end:20px; bottom:84px;      /* directly above the accessibility button */
  width:52px; height:52px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(168,124,51,.55); border-radius:50%;
  background:#FBF8F2; color:var(--g2-text);
  cursor:pointer;
  box-shadow:0 6px 18px rgba(44,42,37,.16);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, background .25s ease, border-color .25s ease;
}
.to-top.is-in{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:#fff; border-color:var(--g3); }
.to-top:focus-visible{ outline:3px solid var(--g3); outline-offset:3px; }
@media (max-width:520px){
  .to-top{ inset-inline-end:14px; bottom:76px; width:46px; height:46px; }
}
@media (prefers-reduced-motion:reduce){
  .to-top{ transition:none; }
}

}