/* Porchlight - landing site
   Palette and accessibility rules come from ElderlyAssets/elderly_care_website_color_theme.md.
   Audience is facility staff, many of them reading on an office monitor, so the base
   size is 18px and every interactive target clears 44px.

   Layout idea: the page is one garden. The hero is a pinned scene that lifts the camera
   off the bench; from there a single path (#trail) runs behind every section to the
   porch, where the booking form is. Sections are open editorial layouts, not cards. */

:root{
  --bg-main:#F7F4EC;
  --bg-card:#FFFDF9;
  --green-soft:#BFD3B8;
  --green-primary:#3E7259;
  --green-deep:#2F5845;
  --orange-soft:#F4B36A;
  --cta-primary:#F2673D;
  --cta-primary-dark:#DB5530;
  --text-primary:#26332D;
  --text-secondary:#69726D;
  --border-soft:#DDD9CF;
  --cta-alternate:#087F73;
  --section-soft:#EEF3EA;

  /* garden */
  --lawn:#DFE9D8;
  --path:#EADFC9;
  --path-edge:#D8CDB3;
  --rule:#D7D2C5;

  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Instrument Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --radius:20px;
  --shadow-soft:0 2px 10px rgba(38,51,45,.05);

  /* how far the page scrolls while the hero is pinned */
  --pin-travel:110vh;
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg-main);
  color:var(--text-primary);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

h1,h2,h3{
  font-family:var(--serif); font-weight:600; letter-spacing:-.015em; line-height:1.12; margin:0;
  font-variation-settings:"SOFT" 50;
}
h1{font-size:clamp(34px,5.1vw,62px); font-weight:500}
h2{font-size:clamp(30px,3.5vw,46px); font-weight:500}
h3{font-size:clamp(20px,2.1vw,23px); line-height:1.25}
p{margin:0}

a{color:var(--green-primary); text-underline-offset:3px}
a:hover{color:var(--green-deep)}

:focus-visible{outline:3px solid var(--cta-alternate); outline-offset:3px; border-radius:6px}

main{position:relative}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--bg-card); color:var(--text-primary);
  padding:12px 18px; border-radius:0 0 12px 0; font-weight:600;
}
.skip:focus{left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:.85rem 1.6rem;
  border-radius:999px; border:none;
  background:var(--cta-primary); color:#fff;
  font-family:var(--sans); font-size:18px; font-weight:600; text-decoration:none;
  cursor:pointer; transition:background .18s ease, transform .18s ease;
}
.btn:hover{background:var(--cta-primary-dark); color:#fff}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none}

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:.8rem 1.4rem;
  border-radius:999px; background:transparent;
  border:1.5px solid var(--green-primary); color:var(--green-primary);
  font-size:17px; font-weight:600; text-decoration:none; cursor:pointer;
}
.btn-ghost:hover{background:var(--section-soft); color:var(--green-deep)}

/* ---------- header (shared with planner.html) ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(247,244,236,.9);
  backdrop-filter:saturate(1.1) blur(10px);
  -webkit-backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
  padding-top:env(safe-area-inset-top,0px);
}
.site-head.stuck{border-bottom-color:var(--border-soft)}
.head-inner{display:flex; align-items:center; gap:24px; min-height:76px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex:none}
.brand-name{font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:-.01em; line-height:1; font-variation-settings:"SOFT" 50}
.brand-tag{display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.22em; color:var(--text-secondary); margin-top:4px}

.nav{display:flex; align-items:center; gap:28px; margin-left:auto}
.nav a{
  color:var(--text-primary); text-decoration:none; font-size:16.5px; font-weight:500;
  padding:8px 0; border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--orange-soft)}
.nav .signin{color:var(--text-secondary)}
.head-cta{flex:none}
.nav-toggle{display:none}

@media (max-width:920px){
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-card); border-bottom:1px solid var(--border-soft);
    padding:8px 24px 18px;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--border-soft)}
  .nav a:last-child{border-bottom:none}
  .head-cta{display:none}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    margin-left:auto; min-height:46px; padding:.5rem 1rem;
    background:transparent; border:1.5px solid var(--border-soft); border-radius:999px;
    font:inherit; font-size:16px; font-weight:600; color:var(--text-primary); cursor:pointer;
  }
}

/* =====================================================================
   HERO: the pinned scene
   js/site.js writes three numbers onto .hero-pin as the pin scrolls:
     --p  raw progress, 0 at rest and 1 when the pin releases
     --z  the same, eased, for the fades
     --s  the camera scale, 1 at rest down to the trail's scale at release
   The garden (.world) is one group scaled about a point above the frame, so
   the bench, the planting around it and the path at its feet all shrink
   together and keep their places. Without JS (or with reduced motion) the
   numbers stay at rest and the hero is a still. */
.hero{position:relative}
.js-anim .hero{height:calc(100vh + var(--pin-travel)); height:calc(100svh + var(--pin-travel))}

.hero-pin{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  padding-top:76px;
  --p:0; --z:0; --s:1;
}

.hero-copy{
  position:relative; z-index:3; text-align:center; max-width:820px; margin:0 auto;
  padding-top:clamp(8px,2.2vh,32px);
  opacity:calc(1 - clamp(0, var(--p) / .24, 1));
  transform:translateY(calc(var(--z) * -56px));
}
.copy-out .hero-copy{pointer-events:none}
.eyebrow{
  font-size:13.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green-primary); font-weight:600; margin-bottom:16px;
}
.hero h1{margin-bottom:16px}
.hero-sub{font-size:clamp(17px,1.9vw,20px); color:var(--text-secondary); max-width:56ch; margin:0 auto 24px}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero-note{margin-top:16px; font-size:15.5px; color:var(--text-secondary); max-width:62ch; margin-inline:auto}
@media (max-height:940px){
  .hero-note{display:none}
  .hero h1{font-size:clamp(30px,4.4vw,50px)}
  .hero-copy{padding-top:6px}
}
/* On a phone the copy is tall and the frame is short, so the note (which the
   porch repeats) goes, the type steps down, and the bench sits smaller. */
@media (max-width:760px){
  .hero-note{display:none}
  .hero-copy{padding-top:4px}
  .eyebrow{font-size:12.5px; letter-spacing:.16em; margin-bottom:14px}
  .hero h1{font-size:clamp(30px,8.6vw,38px); margin-bottom:14px}
  .hero-sub{font-size:16.5px; margin-bottom:20px}
  .hero-actions{gap:10px}
}

.scene{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.scene img{position:absolute}

/* sky */
.sky{
  position:absolute; inset:0;
  opacity:calc(1 - clamp(0, var(--z) / .55, 1));
  transform:translateY(calc(var(--z) * -22vh));
}
.sun{right:6%; top:9%; width:clamp(74px,9vw,130px); opacity:.9}
.cloud-a{left:2%; top:12%; width:clamp(150px,19vw,280px); opacity:.85}
.cloud-b{right:16%; top:24%; width:clamp(130px,16vw,230px); opacity:.6}

/* lawn */
.lawn-grad{
  position:absolute; left:0; right:0; bottom:0; height:100%; z-index:0;
  transform-origin:50% 100%;
  transform:scaleY(calc(.44 + .56 * clamp(0, var(--z) / .6, 1)));
  background:linear-gradient(180deg,rgba(223,233,216,0) 0%,rgba(223,233,216,.72) 42%,var(--lawn) 100%);
}
.lawn-fill{position:absolute; inset:0; background:var(--lawn); opacity:clamp(0, (var(--z) - .3) / .45, 1)}

/* the garden */
.world{
  position:absolute; inset:0; z-index:1;
  transform-origin:50% -15%;   /* keep in step with ORIGIN_Y in site.js */
  transform:scale(var(--s));
  will-change:transform;
}
.prop{bottom:0}
/* around the bench */
.far-l{left:-2%; width:clamp(150px,20vw,300px); opacity:.6}
.far-r{right:-1%; width:clamp(160px,21vw,320px); opacity:.6}
.near-l{left:2%; width:clamp(190px,26vw,390px)}
.near-r{right:1%; width:clamp(200px,27vw,400px)}
.bush-l{left:19%; width:clamp(90px,12vw,180px)}
.bush-r{right:20%; width:clamp(90px,12vw,180px)}
.bed-l{left:0; width:clamp(150px,22vw,330px)}
.bed-r{right:0; width:clamp(150px,22vw,330px)}
.butterfly{left:clamp(48px,9vw,190px); bottom:clamp(150px,18vw,250px); width:clamp(30px,3.4vw,54px)}
@media (max-width:760px){ .butterfly, .cloud-b{display:none} }

/* further out. Placed by the base of the trunk (left/top are the centre of
   the base), in fractions of the frame, so the garden keeps its shape at any
   size. The path runs south from the bench swinging left then right; these
   stand clear of it. */
.o{bottom:auto; transform:translate(-50%,-100%)}
.o1{left:12%;  top:148%; width:clamp(300px,40vw,580px)}
.o2{left:64%;  top:136%; width:clamp(160px,21vw,300px)}
.o3{left:96%;  top:172%; width:clamp(280px,37vw,540px)}
.o4{left:-32%; top:214%; width:clamp(300px,40vw,580px)}
.o5{left:28%;  top:238%; width:clamp(320px,43vw,620px)}
.o6{left:106%; top:216%; width:clamp(170px,22vw,320px)}
.o7{left:140%; top:262%; width:clamp(300px,40vw,580px)}
.o8{left:-8%;  top:266%; width:clamp(300px,40vw,580px)}
.o9{left:156%; top:118%; width:clamp(260px,34vw,500px); opacity:.9}
.o10{left:-58%; top:112%; width:clamp(260px,34vw,500px); opacity:.9}
.o11{left:66%;  top:198%; width:clamp(150px,20vw,290px)}
.o12{left:58%;  top:186%; width:clamp(50px,6.5vw,96px)}

/* the bench, and the wide path at its feet */
.scene-path{position:absolute; left:0; top:0; width:100%; overflow:visible}
.trio{
  left:50%; bottom:14%;   /* keep in step with FEET in site.js */
  width:min(34vw,38vh,500px);
  transform:translateX(-50%);
  z-index:2;
}
@media (max-width:760px){ .trio{width:min(62vw,30vh)} }

/* the path itself, shared by the scene and the trail */
.path-edge{fill:none; stroke:var(--path-edge); stroke-width:64; stroke-linecap:round; stroke-linejoin:round}
.path-fill{fill:none; stroke:var(--path); stroke-width:54; stroke-linecap:round; stroke-linejoin:round}
/* In the scene the path is drawn in "at rest" pixels and shrinks with the
   garden, so its stroke is the trail's stroke divided by the final scale
   (S_END in site.js). It is always fully laid: it is a real path in the
   garden, not something being built. */
.scene-path .path-edge{stroke-width:160}
.scene-path .path-fill{stroke-width:135}
.trail-rail .path-edge,.trail-rail .path-fill{
  stroke-dasharray:var(--len,0px);
  stroke-dashoffset:calc(var(--len,0px) * (1 - var(--draw,0)));
}
html:not(.js-anim) .scene-path{display:none}

/* =====================================================================
   THE TRAIL: sections along the path */
.trail{
  position:relative;
  background:linear-gradient(180deg,var(--lawn) 0px,var(--bg-main) 720px);
}
/* The rail repaints on every scroll frame as the path is laid, so it gets its
   own compositor layer; otherwise the sections sharing its tiles rasterise
   late and things like the lantern flicker in on the first pass. */
.trail-rail{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; --draw:0; will-change:transform}
html:not(.js-anim) .trail-rail{display:none}

.stop{position:relative; z-index:1; padding:clamp(72px,9vw,132px) 0}
.stop + .stop{padding-top:clamp(40px,6vw,96px)}
@media (min-width:901px){ .stop + .stop{padding-top:clamp(150px,17vw,250px)} }
.stop-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:center}
.stop-copy{grid-column:1 / span 7; min-width:0}
.flip .stop-copy{grid-column:6 / span 7}
.wp{grid-column:8 / span 4; grid-row:1; position:relative; height:0; align-self:center}
.flip .wp{grid-column:2 / span 4}

/* planting beside the path. The anchor (.wp) is the point the path threads
   through, bowing 34px away from the copy there; the ribbon is 64px wide. So
   the path's outer edge is 66px from the anchor, and everything is placed off
   that edge: one tree (or bed) planted on the outer side, and at most one
   small thing hugging the inner edge a little further down. */
.tprop{position:absolute; bottom:0}
.tprop.outer.tree{width:clamp(180px,18vw,260px); bottom:-24px}
.tprop.outer.bed{width:clamp(190px,19vw,270px); bottom:-70px}
.tprop.inner.bush{width:78px; bottom:-150px}
/* right-hand stops: outer = right of the path */
.stop:not(.flip) .tprop.outer{left:50%; margin-left:78px}
.stop:not(.flip) .tprop.inner{left:50%; transform:translateX(calc(-100% - 80px))}
/* left-hand stops: outer = left of the path */
.flip .tprop.outer{left:50%; transform:translateX(calc(-100% - 78px))}
.flip .tprop.inner{left:50%; margin-left:74px}
/* the butterfly hovers over the tall flowers of the bed at stop 02 */
.flip .tprop.outer.butterfly{width:38px; bottom:150px; transform:translateX(calc(-100% - 96px))}
/* the robin stands on the path itself at stop 05 */
.tprop.robin{width:36px; left:50%; margin-left:-56px; bottom:-72px}

@media (max-width:900px){
  .stop-grid{display:block}
  .wp{display:none}
  .trail-rail{display:none}
  .trail{background:linear-gradient(180deg,var(--lawn) 0px,var(--bg-main) 420px)}
}

/* copy inside a stop */
.kicker{
  display:flex; align-items:center; gap:14px;
  font-size:13.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--green-primary); margin-bottom:20px;
}
.kicker::before{content:""; width:26px; height:2px; background:var(--orange-soft); border-radius:2px}
.kicker span{font-family:var(--serif); font-size:16px; letter-spacing:0; color:var(--text-secondary); font-variation-settings:"SOFT" 50}
.stop h2{max-width:22ch; margin-bottom:18px}
.lede{font-size:clamp(18px,1.6vw,20px); color:var(--text-secondary); max-width:58ch}

.rows{list-style:none; margin:36px 0 0; padding:0; border-top:1px solid var(--rule)}
.rows li{padding:22px 0; border-bottom:1px solid var(--rule); display:grid; gap:6px}
.rows h3{font-size:21px}
.rows p{color:var(--text-secondary); font-size:16.5px}
@media (min-width:640px){
  .rows li{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:28px; align-items:start}
}

.steps{list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--rule)}
.steps li{display:grid; grid-template-columns:54px minmax(0,1fr); gap:18px; padding:22px 0; border-bottom:1px solid var(--rule)}
.steps .num{
  font-family:var(--serif); font-size:40px; line-height:1; color:var(--green-primary);
  font-variation-settings:"SOFT" 50; font-weight:500; padding-top:2px;
}
.steps h3{font-size:21px; margin-bottom:6px}
.steps p{color:var(--text-secondary); font-size:16.5px}

.itinerary{list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--rule)}
.itinerary li{padding:22px 0; border-bottom:1px solid var(--rule)}
.itinerary h3{font-size:22px; margin-bottom:6px}
.itinerary p{color:var(--text-secondary); font-size:16.5px}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; font-size:15px}
.meta i{width:4px; height:4px; border-radius:50%; background:var(--orange-soft)}
.meta em{font-style:normal; font-weight:600; color:#8A5A22}
.aside{margin-top:28px; font-size:16.5px; color:var(--text-secondary); max-width:60ch}

.split{display:grid; gap:34px; margin-top:34px}
.split h3{font-size:19px; letter-spacing:.01em; margin-bottom:6px}
.split h3.muted{color:var(--text-secondary)}
.split h3.green{color:var(--green-primary)}
.marks{list-style:none; margin:14px 0 0; padding:0}
.marks li{position:relative; padding-left:30px; margin-bottom:14px; color:var(--text-secondary); font-size:16.5px}
.marks li strong{color:var(--text-primary)}
.marks.dash li::before{content:""; position:absolute; left:3px; top:13px; width:14px; height:2px; background:#C4BEAE; border-radius:2px}
.marks.check li::before{
  content:""; position:absolute; left:6px; top:5px; width:8px; height:15px;
  border:solid var(--green-primary); border-width:0 2.5px 2.5px 0; transform:rotate(42deg);
}
@media (min-width:700px){
  .split{grid-template-columns:1fr 1fr; gap:0}
  .split>div:first-child{padding-right:32px}
  .split>div+div{border-left:1px solid var(--rule); padding-left:32px}
}

.scope{margin-top:26px; color:var(--text-secondary); font-size:16.5px}
.scope strong{color:var(--text-primary)}

.figures{display:grid; gap:28px 32px; margin:38px 0 0; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.figures>div{border-top:2px solid var(--green-soft); padding-top:16px}
.figures dt{
  font-family:var(--serif); font-size:clamp(36px,3.4vw,48px); line-height:1; color:var(--green-primary);
  font-weight:500; letter-spacing:-.02em; font-variation-settings:"SOFT" 50, "opsz" 72;
}
.figures dd{margin:10px 0 0; font-size:16px; color:var(--text-secondary)}
.figures cite{display:block; font-size:13px; margin-top:10px; font-style:normal; opacity:.85}

/* =====================================================================
   THE PORCH: where the path ends */
.porch{
  position:relative; z-index:1;
  background:var(--section-soft);
  margin-top:clamp(70px,9vw,120px);
  padding:clamp(96px,11vw,150px) 0 clamp(72px,9vw,120px);
}
.porch::before{ /* the soft rise of the lawn up to the porch */
  content:""; position:absolute; left:-12%; right:-12%; top:-72px; height:150px;
  background:var(--section-soft); border-radius:50%;
}
/* Nothing in the porch animates on entry. The copy and form used to fade in
   here, and the compositor layers Chrome creates for that transition made the
   lantern flicker for a frame as they were ordered in. */
.wp-porch{position:absolute; left:50%; top:0; width:0; height:0}
.wp-porch .glow{
  position:absolute; left:-150px; top:-150px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(244,179,106,.5) 0%,rgba(244,179,106,.18) 40%,rgba(244,179,106,0) 68%);
}
.wp-porch .lantern{position:absolute; width:96px; height:96px; left:-48px; top:-52px}

.porch-grid{display:grid; gap:44px; align-items:start}
.porch h2{margin-bottom:18px}
.porch-note{margin-top:22px; font-size:16.5px; color:var(--text-secondary)}
@media (min-width:900px){
  .porch-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px}
}

.book-form{display:grid; gap:18px 20px}
@media (min-width:640px){ .book-form{grid-template-columns:1fr 1fr} .field-wide{grid-column:1 / -1} }
.field label{display:block; font-weight:600; margin-bottom:8px; font-size:16px}
.field .opt{font-weight:400; color:var(--text-secondary)}
.field input,.field textarea,.field select{
  width:100%; min-height:52px; padding:13px 16px;
  border:1.5px solid var(--border-soft); border-radius:12px;
  background:var(--bg-card); color:var(--text-primary);
  font:inherit; font-size:17px;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green-primary)}
.form-foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px}
.form-foot p{font-size:15px; color:var(--text-secondary)}

/* ---------- planner.html still uses these ---------- */
.section{position:relative; padding:clamp(56px,7vw,104px) 0}
.section-soft{background:var(--section-soft)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px}
.tag{
  font-size:14px; font-weight:600; padding:6px 12px; border-radius:999px;
  background:var(--section-soft); color:var(--green-deep); border:1px solid #DCE6D7;
}
.tag.warm{background:#FBECD8; color:#8A5A22; border-color:#F0DBBE}

/* ---------- footer (shared) ---------- */
.site-foot{
  position:relative; z-index:1;
  background:var(--green-primary); color:rgba(255,253,249,.9);
  padding:clamp(44px,5vw,70px) 0 calc(28px + env(safe-area-inset-bottom,0px));
}
.foot-grid{display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.site-foot a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.site-foot a:hover{border-bottom-color:#fff; color:#fff}
.site-foot h4{font-family:var(--serif); font-size:20px; margin:0 0 12px; color:#fff; font-weight:600; font-variation-settings:"SOFT" 50}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:10px; font-size:16px}
.foot-bottom{
  margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,253,249,.2);
  font-size:14.5px; opacity:.85; display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap;
}

/* ---------- reveal on scroll ----------
   Content is visible by DEFAULT. Only a page that has proved it can animate
   (JS running, IntersectionObserver available, motion allowed) opts into
   hiding sections first, so no-JS visitors, crawlers and print see everything. */
.reveal{opacity:1; transform:none}
.js-anim .reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.js-anim .reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .js-anim .reveal{opacity:1; transform:none; transition:none}
}