/* ==========================================================================
   "YOUR COMPANY" FUNERAL HOME - showcase stylesheet (rewritten 27 Oct 2026 from
   showcase-rebuild/funeral/JAMES-BRIEF.md). The old resort/towing sheet is kept in
   superseded/resort-pages-26oct/.
   Look (James's brief): ivory and warm white, black text, soft gold accents.
   No brown, no gray, no charcoal. Elegant serif headlines, clean sans body, type a
   60-year-old reads on a phone. Numbers in the body font.
   Wide screens (7:5 and wider): full-screen pictures, words on ivory glass placed
   off the subject. Phones and upright tablets: every picture edge to edge at its
   own shape (nothing cut off), its words right under it on the ivory band.
   Only transform and opacity move.
   ========================================================================== */
:root{
  --ivory:#faf6ee; --white:#fffdf9; --ink:#0d0d0d;
  --gold:#c6a65c; --gold-soft:#e6d3a3; --gold-line:rgba(198,166,92,.55);
  --glass:rgba(255,253,249,.86);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter','Segoe UI',Helvetica,Arial,sans-serif;
  --top:0px; --gutter:max(18px,env(safe-area-inset-left),env(safe-area-inset-right));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 19px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.08;color:var(--ink);letter-spacing:-.005em}
h1{font-size:clamp(2.9rem,5.2vw,5.4rem)}
h2{font-size:clamp(2.2rem,3.6vw,3.5rem)}
h3{font-size:clamp(1.6rem,2.2vw,2.1rem)}
p{margin:0}
.eyebrow{font:600 .92rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:42px;height:1px;background:var(--gold);flex:none}
.lede{font-size:clamp(1.12rem,1.5vw,1.32rem);margin-top:18px;max-width:46em}
.num{font-family:var(--sans);font-variant-numeric:lining-nums tabular-nums}

/* ---------- top: honesty line, header ---------- */
.concept{background:var(--white);border-bottom:1px solid var(--gold-line);font:500 .92rem/1.5 var(--sans);text-align:center;padding:9px 16px;margin:0}
header.bar{position:sticky;top:0;z-index:60;background:rgba(250,246,238,.97);border-bottom:1px solid var(--gold-line)}
header.bar .in{display:flex;align-items:center;gap:22px;min-height:84px;max-width:1560px;margin:auto;padding:0 clamp(18px,4vw,64px)}
.logo{font-family:var(--serif);font-weight:600;font-size:1.7rem;line-height:1;white-space:nowrap;text-decoration:none;color:var(--ink)}
.logo small{display:block;font:600 .66rem/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;margin-top:7px}
nav.main{margin-left:auto;display:flex;gap:4px;align-items:center}
nav.main a{font:500 1rem/1 var(--sans);text-decoration:none;padding:12px 12px;border-bottom:1px solid transparent}
nav.main a:hover,nav.main a[aria-current]{border-bottom-color:var(--gold)}
nav.main a.more{display:none}
.callbtn{display:inline-flex;flex-direction:column;align-items:flex-start;background:var(--ink);color:var(--white)!important;padding:11px 20px!important;margin-left:10px;border:0!important;white-space:nowrap}
.callbtn small{font:600 .66rem/1.2 var(--sans);letter-spacing:.2em;color:var(--gold-soft)}
.callbtn b{font:600 1.06rem/1.25 var(--sans)}
.navtoggle{display:none;margin-left:auto;background:none;border:0;padding:12px;cursor:pointer}
.navtoggle span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0}
@media (max-width:1180px){
  .navtoggle{display:block}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ivory);flex-direction:column;align-items:stretch;padding:8px var(--gutter) 20px;border-bottom:1px solid var(--gold-line);max-height:calc(100svh - 90px);overflow:auto}
  nav.main.open{display:flex}
  nav.main a{padding:15px 4px;font-size:1.1rem;border-bottom:1px solid rgba(198,166,92,.3)}
  nav.main a.more{display:block}
  .callbtn{margin:12px 0 0}
  header.bar .in{position:relative;min-height:74px}
  .logo{font-size:1.45rem}
}

/* ---------- buttons ---------- */
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 1.06rem/1.2 var(--sans);padding:19px 30px;min-height:58px;border:1px solid var(--ink);text-decoration:none;cursor:pointer;text-align:center;transition:background .25s,color .25s}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--white)}
.phone-line{margin-top:18px;font:500 1.05rem/1.4 var(--sans)}
.phone-line a{font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold)}
.link{font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}

/* ---------- the ivory glass panel on a picture ---------- */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);border:1px solid var(--gold-line);padding:clamp(24px,2.8vw,44px);max-width:min(600px,100%);box-shadow:0 24px 60px -30px rgba(0,0,0,.35)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,253,249,.95)}}
.glass p{margin-top:14px;font-size:clamp(1.06rem,1.3vw,1.2rem)}
.glass.hero{max-width:min(760px,100%)}
.glass.hero h1{font-size:clamp(3.1rem,5.6vw,5.8rem)}

/* ---------- a full-screen picture ---------- */
.shot{display:grid;position:relative;overflow:hidden;background:var(--ivory)}
.shot>*{grid-area:1/1}
.shot>img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
.shot .layer{display:flex;padding:clamp(18px,4vw,72px);z-index:2;pointer-events:none}
.shot .layer>*{pointer-events:auto}
.bl{align-items:flex-end;justify-content:flex-start}
.br{align-items:flex-end;justify-content:flex-end}
.tl{align-items:flex-start;justify-content:flex-start}
.tr{align-items:flex-start;justify-content:flex-end}
.l{align-items:center;justify-content:flex-start}

/* ---------- a pinned scroll story: pictures cross-fade, one caption per step ---------- */
.story{position:relative}
.story .pin{position:sticky;top:var(--top);display:grid;overflow:hidden;background:var(--ivory)}
.story .pin>*{grid-area:1/1}
.story .frames{display:grid;overflow:hidden}
.story .frames>img{grid-area:1/1;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);opacity:0;will-change:opacity,transform}
.story .frames>img:first-child{opacity:1}
.story .caps{display:grid;padding:clamp(18px,4vw,72px);z-index:3;pointer-events:none}
.story .caps>.glass{grid-area:1/1;opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.story .caps>.glass.on{opacity:1;transform:none;pointer-events:auto}
.story .caps.bl{align-items:end;justify-items:start}
.story .caps.br{align-items:end;justify-items:end}
.story .caps.tl{align-items:start;justify-items:start}
.story .caps.tr{align-items:start;justify-items:end}
.stepdots{display:flex;gap:8px;margin-top:20px}
.stepdots i{width:30px;height:2px;background:rgba(13,13,13,.18)}
.stepdots i.on{background:var(--gold)}

/* wide screens (computers, landscape tablets): full-screen stage */
@media (min-aspect-ratio:7/5){
  .shot{height:100vh;height:calc(100svh - var(--top));min-height:560px}
  .shot>img{transform:scale(1.06);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
  .shot.seen>img{transform:none}
  .story{height:calc(var(--len,3) * 100svh)}
  .story .pin{height:100vh;height:calc(100svh - var(--top));min-height:560px}
  .story .frames>img{transform:scale(calc(1.06 - var(--zoom,0) * .06));transform-origin:var(--fx,50%) var(--fy,60%)}
}

/* phones and upright tablets: picture edge to edge at its own shape, words under it */
@media (max-aspect-ratio:7/5){
  body{font-size:18px}
  .shot{display:block}
  .shot>img{height:auto;aspect-ratio:1672/941}
  .shot .layer{display:block;padding:26px var(--gutter) 40px}
  .glass,.story .caps>.glass{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;padding:0;max-width:100%}
  .glass.hero h1{font-size:clamp(2.5rem,10.5vw,3.6rem)}
  h1{font-size:clamp(2.3rem,9.2vw,3.3rem)}
  h2{font-size:clamp(1.85rem,7.4vw,2.6rem)}
  .story{height:calc(var(--len,3) * 60svh + 40svh)}
  .story .pin{grid-template-rows:auto auto;align-content:start}
  .story .frames{grid-area:1/1;aspect-ratio:1672/941}
  .story .caps{grid-area:2/1;padding:24px var(--gutter) 28px}
  .btn{width:100%}
  .btns{margin-top:22px}
}

/* ---------- ivory / warm white bands (words on their own, no picture) ---------- */
.band{padding:clamp(72px,10vw,140px) var(--gutter)}
.band.white{background:var(--white);border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.band.black{background:var(--ink);color:var(--white)}
.band.black h1,.band.black h2,.band.black h3{color:var(--white)}
.band.black .eyebrow{color:var(--white)}
.band .in{max-width:1180px;margin:0 auto}
.band .in.narrow{max-width:860px}
.band .center{text-align:center}
.band .center .eyebrow{justify-content:center}
.band .center .eyebrow::after{content:"";width:42px;height:1px;background:var(--gold);flex:none}
.band .center .lede{margin-left:auto;margin-right:auto}
.band .center .btns{justify-content:center}
.page-head{padding:clamp(80px,12vw,170px) var(--gutter) clamp(56px,7vw,100px);text-align:center;border-bottom:1px solid var(--gold-line);background:var(--white)}
.page-head .in{max-width:980px;margin:0 auto}
.page-head .eyebrow{justify-content:center}
.page-head .eyebrow::after{content:"";width:42px;height:1px;background:var(--gold);flex:none}
.page-head .lede{margin:22px auto 0}
.page-head .btns{justify-content:center}
.rule{width:64px;height:1px;background:var(--gold);margin:30px auto}
.example{font:500 .98rem/1.5 var(--sans);letter-spacing:.04em;margin-top:22px}
.example::before{content:"Example \2014 ";font-weight:700}

/* ---------- cards (no icons) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;margin-top:48px}
.card{background:var(--white);border:1px solid var(--gold-line);border-top:2px solid var(--gold);padding:34px 30px;text-decoration:none;display:block}
.band.white .card{background:var(--ivory)}
.card h3{font-size:clamp(1.6rem,2vw,1.95rem)}
.card p{margin-top:12px}
.card .link{display:inline-block;margin-top:18px}
a.card{transition:transform .3s,box-shadow .3s}
a.card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(0,0,0,.4)}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}

/* prices */
.price{font:600 clamp(2.2rem,3.4vw,3rem)/1 var(--sans);margin-top:16px;letter-spacing:-.02em}
.price small{display:block;font:600 .74rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.gpl{margin-top:48px;border-top:1px solid var(--gold-line)}
.gpl details{border-bottom:1px solid var(--gold-line)}
.gpl summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:24px 4px;font:600 clamp(1.3rem,1.8vw,1.6rem)/1.3 var(--serif)}
.gpl summary::-webkit-details-marker{display:none}
.gpl summary::after{content:"+";font:400 1.6rem/1 var(--sans);color:var(--gold)}
.gpl details[open] summary::after{content:"\2212"}
.gpl table{width:100%;border-collapse:collapse;margin:0 0 24px}
.gpl td{padding:12px 4px;border-top:1px solid rgba(198,166,92,.28);vertical-align:top}
.gpl td:last-child{text-align:right;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}

/* obituaries */
.obit h3{font-size:clamp(1.7rem,2.2vw,2rem)}
.obit .dates{font:500 .98rem/1.4 var(--sans);margin-top:8px;font-variant-numeric:lining-nums}
.obit .when{margin-top:16px;padding-top:16px;border-top:1px solid rgba(198,166,92,.35);font-size:1rem}
.obit .acts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
.search{display:flex;gap:12px;flex-wrap:wrap;max-width:720px;margin:36px auto 0}
.search input{flex:1;min-width:220px}

/* reviews */
.stars{color:var(--gold);letter-spacing:4px;font-size:1.2rem}
.quote p{font:500 clamp(1.3rem,1.7vw,1.55rem)/1.45 var(--serif)}
.quote .who{display:block;margin-top:18px;font:600 .95rem/1.4 var(--sans)}
.score{font:600 clamp(3.4rem,6vw,5rem)/1 var(--sans);letter-spacing:-.03em}

/* count-up numbers (body font, James's rule) */
.counts{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,90px);justify-content:center;margin-top:48px}
.counts div{text-align:center;min-width:150px}
.counts b{display:block;font:600 clamp(2.6rem,4.6vw,4rem)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.counts span{display:block;margin-top:10px;font:600 .92rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.band.black .counts b{color:var(--gold-soft)}

/* numbered steps */
.steps{list-style:none;margin:48px 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:6px clamp(20px,3vw,44px);padding:34px 0;border-top:1px solid var(--gold-line)}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;font:500 clamp(2.2rem,3.6vw,3.2rem)/1 var(--sans);color:var(--gold);font-variant-numeric:tabular-nums}
.steps h3{font-size:clamp(1.6rem,2.2vw,2.1rem)}
.steps p{max-width:44em}

/* plain reading text */
.prose{max-width:780px;margin:0 auto}
.prose h2{margin-top:64px;font-size:clamp(1.9rem,2.8vw,2.6rem)}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{margin-top:18px}
.prose ul{padding-left:1.2em}
.prose li{margin-top:8px}
.prose li::marker{color:var(--gold)}

/* faq */
.faq{max-width:900px;margin:0 auto;border-top:1px solid var(--gold-line)}
.faq details{border-bottom:1px solid var(--gold-line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;padding:26px 4px;font:600 clamp(1.35rem,1.9vw,1.7rem)/1.3 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.6rem/1 var(--sans);color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 4px 26px;max-width:46em}

/* timeline (heritage) */
.timeline{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:clamp(18px,3vw,44px);padding:28px 0;border-top:1px solid var(--gold-line)}
.timeline b{font:600 1.5rem/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:640px){.timeline li{grid-template-columns:1fr;gap:6px}}

/* ---------- forms ---------- */
form.f{display:grid;gap:18px;margin-top:40px;max-width:760px}
.center form.f{margin-left:auto;margin-right:auto;text-align:left}
form.f label{font:600 .95rem/1.3 var(--sans);display:grid;gap:8px}
input,select,textarea{font:400 1.06rem/1.4 var(--sans);padding:17px 16px;border:1px solid rgba(13,13,13,.35);background:var(--white);color:var(--ink);border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{display:inline-flex;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none;width:auto}
.chips span{padding:12px 18px;border:1px solid rgba(13,13,13,.4);font:500 1rem/1 var(--sans);background:var(--white)}
.chips input:checked+span{background:var(--ink);color:var(--white);border-color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid var(--gold)}
.fine{font-size:.92rem}
form.f .btn{justify-self:start}
@media (max-width:640px){form.f .btn{justify-self:stretch}}

/* ---------- Ashley on the page ---------- */
.ash-demo{max-width:620px;margin:44px auto 0;background:var(--white);border:1px solid var(--gold-line);text-align:left}
.ash-demo .head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--gold-line)}
.ash-demo .head img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.ash-demo .head b{display:block;font:600 1.05rem/1.2 var(--sans)}
.ash-demo .head span{font:500 .88rem/1.3 var(--sans)}
.ash-demo .msgs{padding:20px;display:grid;gap:12px}
.bub{padding:14px 16px;max-width:86%;font-size:1rem;line-height:1.5}
.bub.them{background:var(--ivory);border:1px solid rgba(198,166,92,.4);justify-self:start}
.bub.me{background:var(--ink);color:var(--white);justify-self:end}
.ash-demo .bub{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
.ash-demo.seen .bub{opacity:1;transform:none}
.ash-demo.seen .bub:nth-child(2){transition-delay:.9s}
.ash-demo.seen .bub:nth-child(3){transition-delay:1.9s}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--white);padding:80px var(--gutter) 40px}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;max-width:1400px;margin:auto}
footer.site .logo{color:var(--white)}
footer.site strong{display:block;font:600 .78rem/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
footer.site p{line-height:2}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--gold-soft)}
footer.site .big{font:600 1.5rem/1.3 var(--sans)}
footer.site .legal{max-width:1400px;margin:50px auto 0;padding-top:24px;border-top:1px solid rgba(230,211,163,.3);font-size:.88rem}
footer.site .others{max-width:1400px;margin:14px auto 0;display:flex;gap:10px 18px;flex-wrap:wrap;font-size:.88rem}
footer.site .others a{text-decoration:underline}

/* ---------- phones: the call bar stays on screen ---------- */
.mbar{display:none}
@media (max-width:1180px){
  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--ivory);border-top:1px solid var(--gold-line)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;background:var(--ink);color:var(--white);font:600 1.08rem/1.2 var(--sans);text-decoration:none}
  .mbar small{font:600 .7rem/1 var(--sans);letter-spacing:.2em;color:var(--gold-soft)}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .ash{bottom:calc(90px + env(safe-area-inset-bottom))!important}
}

/* ---------- arrivals: cards slide in, lines rise, headlines letter in ---------- */
.rise,.in-l,.in-r{opacity:0;transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.rise{transform:translateY(46px)}
.in-l{transform:translateX(-90px)}
.in-r{transform:translateX(90px)}
.seen.rise,.seen.in-l,.seen.in-r{opacity:1;transform:none}
.cards>.card:nth-child(2){transition-delay:.12s}.cards>.card:nth-child(3){transition-delay:.24s}
.cards>.card:nth-child(4){transition-delay:.36s}.cards>.card:nth-child(5){transition-delay:.48s}.cards>.card:nth-child(6){transition-delay:.6s}
.wd{display:inline-block;white-space:nowrap}
.ltr{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.seen .ltr,.seen.ltrs .ltr,.story .caps>.glass.on .ltr{opacity:1;transform:none}
.readbar{position:fixed;left:0;top:0;right:0;height:3px;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);z-index:90;pointer-events:none}

/* ---------- Ashley, the chat window ---------- */
.ash{position:fixed;right:clamp(14px,2.5vw,30px);bottom:clamp(14px,2.5vw,30px);z-index:80;display:flex;flex-direction:column;align-items:flex-end}
.ash-tab{appearance:none;border:1px solid var(--gold);cursor:pointer;background:var(--ink);color:var(--white);border-radius:999px;padding:8px 22px 8px 8px;font:600 1rem/1 var(--sans);display:flex;align-items:center;gap:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.ash-tab img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.ash-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);display:inline-block;margin-left:-20px;margin-top:30px;border:2px solid var(--ink)}
.ash-box{position:absolute;right:0;bottom:calc(100% + 12px);width:min(380px,calc(100vw - 28px));background:var(--white);border:1px solid var(--gold-line);box-shadow:0 30px 70px -26px rgba(0,0,0,.5)}
.ash-head{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--gold-line);background:var(--ivory)}
.ash-head img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.ash-head b{display:block;font:600 1.05rem/1.2 var(--sans)}
.ash-head span{display:block;font:500 .85rem/1.4 var(--sans)}
.ash-x{margin-left:auto;appearance:none;background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;padding:0 6px;color:var(--ink)}
.ash-body{padding:16px;display:grid;gap:10px;max-height:min(360px,45svh);overflow-y:auto}
.ash-body .bub{font-size:.98rem}
.ash-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.ash-quick button{font:500 .92rem/1.1 var(--sans);padding:10px 14px;border:1px solid var(--ink);background:var(--white);color:var(--ink);cursor:pointer}
.ash-quick button:hover{background:var(--ink);color:var(--white)}
@media (max-width:600px){.ash-tab{padding:6px 16px 6px 6px;font-size:.92rem}.ash-tab img{width:38px;height:38px}}

/* ---------- reduced motion and weak phones: finished frames, still ---------- */
@media (prefers-reduced-motion:reduce){
  .rise,.in-l,.in-r,.ltr,.ash-demo .bub{opacity:1!important;transform:none!important;transition:none!important}
  .shot>img,.story .frames>img{transform:none!important;transition:none!important}
  .story{height:auto!important}
  .story .pin{position:relative!important}
}
html.lite .rise,html.lite .in-l,html.lite .in-r,html.lite .ltr,html.lite .ash-demo .bub{opacity:1!important;transform:none!important}
html.lite .shot>img,html.lite .story .frames>img{transform:none!important}
html.lite .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,253,249,.95)}
.band.black .btn-line{color:var(--white);border-color:var(--white)}
.band.black .btn-line:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* nothing that slides in from the side may widen the page on a phone */
main{overflow-x:clip}
/* phones and tablets: Ashley sits in the call bar, so she never covers a button or a picture */
.mash{display:none}
@media (max-width:1180px){
  .mbar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
  .mash{display:block;appearance:none;border:1px solid var(--gold);background:var(--ink);border-radius:50%;width:58px;height:58px;padding:5px;cursor:pointer}
  .mash img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .ash-tab{display:none}
}
/* wide screens: each panel kept to the clear part of its own picture (sized per scene, --pw) */
@media (min-aspect-ratio:7/5){
  .shot .layer{padding:clamp(18px,2.6vw,48px)}
  .shot .glass{max-width:var(--pw,600px);padding:clamp(22px,2vw,34px)}
  .shot .glass h2{font-size:clamp(2rem,2.9vw,2.9rem)}
  .glass.hero h1{font-size:clamp(2.7rem,4vw,4.1rem)}
  .glass .btns{margin-top:22px}
  .bc{align-items:flex-end;justify-content:center}
  .tc{align-items:flex-start;justify-content:center}
  /* the home opening: one wide strip on the drive, under the building */
  .glass.strip{max-width:min(1340px,100%);display:grid;grid-template-columns:1.2fr 1fr;column-gap:46px;align-items:end;padding:26px 38px}
  .glass.strip>*{grid-column:2}
  .glass.strip>.eyebrow{grid-column:1;grid-row:1}
  .glass.strip>h1{grid-column:1;grid-row:2/5;font-size:clamp(2.9rem,4.4vw,4.6rem)}
  .glass.strip>p:not(.eyebrow){margin-top:0}
  .tc .glass.strip{grid-template-columns:auto;padding:20px 36px;text-align:center}
  .tc .glass.strip>*{grid-column:1}
  .tc .glass.strip>h1{grid-row:auto}
  .tc .glass.strip .eyebrow{justify-content:center}
  .tc .glass.strip>p:not(.eyebrow){margin-top:8px}
  .story .caps{padding:clamp(18px,2.6vw,48px)}
  .story .caps>.glass{max-width:620px;padding:24px 30px}
  .story .caps>.glass h2{font-size:clamp(1.9rem,2.6vw,2.6rem)}
}
@media (min-aspect-ratio:7/5){
  /* the picture fills the stage exactly, at every screen width (big screens grew the row past the stage) */
  .shot,.story .pin{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
  .story .frames{min-height:0}
  .story .caps>.glass{max-width:540px}
}
@media (min-aspect-ratio:7/5){.story .frames{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}}
/* the home opening strip leaves the bottom-right corner to Ashley's button */
@media (min-aspect-ratio:7/5){
  .bc{justify-content:flex-start}
  .bc .glass.strip{max-width:min(1240px,calc(100% - 250px))}
}
.phone-line a{white-space:nowrap}

/* 28 Oct (James): see-through cards with a bright white outline; a picture behind every section */
.glass{background:rgba(255,253,249,.34);border:2px solid #fff;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 24px 60px -30px rgba(0,0,0,.35)}
.bd{position:relative;isolation:isolate}
.bd>.bd-pic{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:-1;overflow:hidden}
.bd-pic img{width:100%;height:100%;object-fit:cover;display:block}
.bd-pic::after{content:"";position:absolute;inset:0;background:rgba(255,253,249,.42)}
.bd .band,.bd .band.white,.bd .page-head{background:transparent;border-color:rgba(255,255,255,.7)}
.bd .card,.bd .band.white .card{background:rgba(255,253,249,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid #fff}
.ash-tab,.mash{border:2px solid #fff}

/* 28 Oct (James): a full-size picture behind EVERY section. The picture stays put while that section's
   words scroll up over it; side panels sit off the subject. Only used on the pages after Home. */
.band.pic{position:relative;isolation:isolate;padding:0;background:transparent;border:0}
.band.pic>.bgp{position:sticky;top:var(--top);height:100vh;height:calc(100svh - var(--top));margin-bottom:-100vh;margin-bottom:calc(var(--top) - 100svh);z-index:-1;overflow:hidden}
.band.pic>.bgp img{width:100%;height:100%;object-fit:cover;display:block}
.band.pic>.bgp::after{content:"";position:absolute;inset:0;background:rgba(255,253,249,.28)}
.band.pic>.pad{min-height:100vh;min-height:calc(100svh - var(--top));padding:46svh var(--gutter) 12svh;display:flex;flex-direction:column;justify-content:flex-end}
.band.pic .in{width:100%}
.band.pic .in>:not(.cards):not(.glass),.band.pic .in>.center>*{text-shadow:0 0 2px rgba(255,253,249,.9),0 0 22px rgba(255,253,249,.95)}
.band.pic[class*=side-] .in{max-width:none;display:flex}
.band.pic.side-r .in{justify-content:flex-end}
.band.pic[class*=side-] .glass{max-width:min(640px,44vw)}
.band.pic .card{background:rgba(255,253,249,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid #fff}
.cards.stack{grid-template-columns:1fr;width:min(560px,42vw);margin-top:0}
.shot.bare>img{grid-area:1/1}
h3.sub{margin-top:24px;font-size:clamp(1.5rem,2vw,1.9rem)}
ul.list{padding-left:1.2em;margin:18px 0 0}
ul.list li{margin-top:8px}
ul.list li::marker{color:var(--gold)}
.obit .face{width:calc(100% + 60px);max-width:none;height:auto;aspect-ratio:1;object-fit:cover;margin:-34px -30px 24px}
.band.pic .steps li{border-top-color:rgba(255,255,255,.8)}
/* the card words glide on, gently, as they come into view (James: "elegantly go on to the cards") */
body[data-v2] .gl{opacity:0;transform:translateX(-30px);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
body[data-v2] .go>.gl,body[data-v2] .story .caps>.glass.on>.gl{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){body[data-v2] .gl{opacity:1!important;transform:none!important;transition:none!important}}
html.lite body[data-v2] .gl{opacity:1!important;transform:none!important}
@media (max-aspect-ratio:7/5){
  .band.pic[class*=side-] .glass,.cards.stack{max-width:100%;width:100%}
}
/* the bronze-on-granite scroll ornament over a heading */
.orn{display:block;width:220px;height:auto;margin:0 0 18px}
.center .orn{margin:0 auto 18px}
.band.pic .ash-demo{background:rgba(255,253,249,.82);margin-top:30px}
/* chat 8: placeholder for a picture still being made (no words), finder results, price estimator */
.ph{width:100%;height:100%;min-height:min(56.3vw,100vh);background:radial-gradient(120% 90% at 30% 20%,#fffdf8 0%,#f4ecdc 55%,#e9dcc0 100%)}
.find{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.find input{flex:1 1 220px}
.find-out{display:grid;gap:12px;margin-top:16px}
.est fieldset{border:0;border-top:1px solid var(--gold-line);padding:14px 0;margin:0}
.est legend{font:600 .78rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding-right:10px}
.est .row{display:flex;align-items:center;gap:12px;padding:6px 0}.est .row span{flex:1}
.est .total{font:600 1.5rem/1.3 var(--sans);margin-top:18px}.est .total b{margin-left:12px}