/* ==========================================================
   Little Surprises — page-builder sections

   Every section the client can add to a page, styled once here.
   The rules were lifted from the hand-built About, How to Order,
   Contact and Custom pages, so a page rebuilt from sections looks
   the way those pages always did.
   ========================================================== */

/* ── shared ─────────────────────────────────────────────────── */
.s-sec{ padding:72px 0; position:relative; }
.s-sec.t-paper{ background:var(--paper); }
.s-sec.t-peach{ background:var(--peach); }
.s-sec.t-soft{ background:var(--peach-soft); }
.s-sec.t-dark{ background:var(--band); color:#fff; }
.s-sec.t-dark h2, .s-sec.t-dark h3{ color:#fff; }
.s-sec.t-dark p{ color:rgba(255,255,255,.76); }
.s-sec + .s-sec.t-paper, .s-sec.t-paper + .s-sec.t-paper{ padding-top:24px; }

.s-head{ max-width:58ch; margin-bottom:36px; }
.s-head.c{ text-align:center; margin-left:auto; margin-right:auto; }
.s-head h2{ font-size:26px; }
.s-head h2 em, .s-sec h1 em{ font-style:italic; color:var(--rose); }
.s-head p{ color:var(--teal-75); font-size:14.5px; margin-top:10px; line-height:1.8; }
.s-sec.t-dark .s-head p{ color:rgba(255,255,255,.72); }
.s-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.s-btns.c{ justify-content:center; }
.s-sec.t-dark .btn-solid{ background:var(--rose); }
.s-sec.t-dark .btn-line{ border-color:rgba(255,255,255,.6); color:#fff; }

/* ── hero: heading band ─────────────────────────────────────── */
.s-banner{ background:linear-gradient(180deg,var(--peach-soft),var(--paper)); padding:48px 0 38px; border-bottom:1px solid var(--teal-12); }
.s-banner .crumb{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--teal-55); margin-bottom:16px; }
.s-banner .crumb a:hover{ color:var(--rose); }
.s-banner .eyebrow{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose); margin-bottom:12px; }
.s-banner h1{ font-size:34px; }
.s-banner .lede{ color:var(--teal-75); font-size:15px; max-width:58ch; margin-top:12px; line-height:1.85; }
.s-banner .s-btns{ margin-top:24px; }
.s-banner .note{ font-size:12.5px; color:var(--teal-55); margin-top:16px; }

/* ── hero: story opening ────────────────────────────────────── */
.s-story{ background:linear-gradient(180deg,var(--peach-soft) 0%,var(--paper) 100%); border-bottom:1px solid var(--teal-12); }
.s-story-in{ max-width:760px; margin:0 auto; padding:82px 24px 74px; }
.s-story .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose); margin-bottom:22px; }
.s-story .eyebrow svg{ color:var(--gold); }
.s-story h1{ font-size:clamp(26px,3.1vw,32px); line-height:1.4; max-width:20ch; }
.s-story .lede{ color:var(--teal-75); font-size:15.5px; line-height:1.8; margin-top:22px; max-width:56ch; }
.s-story .s-btns{ margin-top:28px; }
.s-story .sig{ margin-top:30px; padding-top:20px; border-top:1px solid var(--teal-12); font-size:12.5px; color:var(--teal-55); }

/* ── text ───────────────────────────────────────────────────── */
.s-doc{ max-width:780px; margin:0 auto; }
.s-doc.wide{ max-width:none; }
.s-doc.c{ text-align:center; }
.s-doc > h2:first-child{ margin-top:0; }
.s-doc h2{ font-size:22px; margin:42px 0 12px; }
.s-doc h3{ font-size:16px; margin:26px 0 8px; }
.s-doc h4{ font-size:14.5px; margin:20px 0 6px; }
.s-doc p{ color:var(--teal-75); font-size:14.5px; line-height:1.9; margin-bottom:14px; }
.s-doc ul, .s-doc ol{ margin:0 0 18px; }
.s-doc ol{ padding-left:20px; list-style:decimal; }
.s-doc ul li{ color:var(--teal-75); font-size:14.5px; line-height:1.85; padding:6px 0 6px 20px; position:relative; }
.s-doc ul li::before{ content:''; position:absolute; left:2px; top:15px; width:5px; height:5px; border-radius:50%; background:var(--rose); }
.s-doc.c ul li{ padding-left:0; } .s-doc.c ul li::before{ display:none; }
.s-doc ol li{ color:var(--teal-75); font-size:14.5px; line-height:1.85; padding:4px 0; }
.s-doc a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px; }
.s-doc b, .s-doc strong{ color:var(--teal); font-weight:500; }
.s-doc blockquote{ border-left:2px solid var(--gold-lt); padding:4px 0 4px 18px; margin:18px 0; font-family:var(--ff-head); font-style:italic; font-size:17px; color:var(--teal); }
.s-doc table{ width:100%; border-collapse:collapse; margin:8px 0 22px; font-size:14px; text-align:left; }
.s-doc th, .s-doc td{ padding:12px 14px; border-bottom:1px solid var(--teal-12); color:var(--teal-75); }
.s-doc th{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:500; }
.s-doc .note{ background:var(--peach-soft); padding:20px 22px; font-size:14px; color:var(--teal-75); line-height:1.85; margin:22px 0; }
.t-soft .s-doc .note{ background:var(--paper); }
.s-doc .upd{ font-size:12px; color:var(--teal-55); margin-top:44px; padding-top:18px; border-top:1px solid var(--teal-12); }
.s-doc-head{ font-size:26px; margin-bottom:18px; }
.t-dark .s-doc p, .t-dark .s-doc li{ color:rgba(255,255,255,.78); }

/* ── text + image ───────────────────────────────────────────── */
.s-ti{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; }
.s-ti.flip .s-ti-copy{ order:2; }
.s-ti .eyebrow{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose); margin-bottom:12px; }
.s-ti h2{ font-size:28px; margin-bottom:14px; }
.s-ti .s-doc{ margin:0 0 24px; }
.s-ti-imgs{ display:grid; gap:14px; }
.s-ti-imgs img{ width:100%; height:100%; object-fit:cover; }
.s-ti-imgs.n1 img{ aspect-ratio:4/3; }
.s-ti-imgs.n2{ grid-template-columns:1fr 1fr; } .s-ti-imgs.n2 img{ aspect-ratio:4/5; }
.s-ti-imgs.n3{ grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; }
.s-ti-imgs.n3 img:first-child{ grid-row:span 2; aspect-ratio:auto; }
.s-ti-imgs.n3 img{ aspect-ratio:1; }

/* ── grids of things ────────────────────────────────────────── */
.s-more{ text-align:center; margin-top:40px; }
.s-empty{ text-align:center; color:var(--teal-55); font-size:14px; padding:20px 0; }
.chooser.n3{ grid-template-columns:repeat(3,1fr); }
.chooser.n4{ grid-template-columns:repeat(4,1fr); }
.chooser.n1{ grid-template-columns:1fr; }

.s-gallery{ display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:16px; }
.s-gallery figure{ overflow:hidden; background:var(--peach-soft); }
.s-gallery img{ width:100%; aspect-ratio:1; object-fit:cover; transition:transform .6s var(--ease); }
.s-gallery a:hover img{ transform:scale(1.04); }
.s-gallery figcaption{ font-size:12.5px; color:var(--teal-55); padding:10px 2px 0; background:var(--paper); }

/* ── steps ──────────────────────────────────────────────────── */
.s-steps-cols{ display:grid; grid-template-columns:repeat(var(--n,4),1fr); }
.s-steps-cols .st{ padding:26px 26px 26px 0; border-top:1px solid var(--teal-12); }
.s-steps-cols .st + .st{ padding-left:26px; border-left:1px solid var(--teal-12); }
.s-steps-cols .ico{ width:26px; height:26px; color:var(--rose); margin-bottom:16px; }
.s-steps-cols .n{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-55); margin-bottom:6px; }
.s-steps-cols h3{ font-size:16px; margin-bottom:8px; }
.s-steps-cols p{ color:var(--teal-75); font-size:13.5px; line-height:1.75; max-width:30ch; }

.s-steps-rows .st{ display:grid; grid-template-columns:78px 1fr 1fr; gap:36px; align-items:start; padding:34px 0; border-top:1px solid var(--teal-12); }
.s-steps-rows .st:last-child{ border-bottom:1px solid var(--teal-12); }
.s-steps-rows .st.no-note{ grid-template-columns:78px 1fr; }
.s-steps-rows .n{ font-family:var(--ff-head); font-size:38px; color:var(--rose); line-height:1; }
.s-steps-rows h3{ font-size:22px; margin-bottom:10px; }
.s-steps-rows p{ color:var(--teal-75); line-height:1.85; font-size:14.5px; }
.s-steps-rows aside{ background:var(--peach-soft); padding:20px 22px; font-size:13px; color:var(--teal-75); line-height:1.8; }
.t-soft .s-steps-rows aside{ background:var(--paper); }
.s-steps-rows aside .tiny{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); margin-bottom:8px; }

.s-steps-time{ display:grid; grid-template-columns:repeat(var(--n,4),1fr); gap:20px; max-width:1000px; margin:0 auto; }
.s-steps-time .st{ text-align:center; position:relative; }
.s-steps-time .dot{ width:11px; height:11px; border-radius:50%; background:var(--rose); margin:0 auto 16px; position:relative; z-index:2; }
.s-steps-time .st::before{ content:''; position:absolute; top:5px; left:-50%; right:50%; height:1px; background:var(--gold-lt); opacity:.5; }
.s-steps-time .st:first-child::before{ display:none; }
.s-steps-time .d{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); margin-bottom:6px; }
.s-steps-time h3{ font-size:16px; margin-bottom:6px; }
.s-steps-time p{ font-size:12.5px; color:var(--teal-75); line-height:1.7; }

.s-steps-num{ display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:30px; max-width:1000px; margin:0 auto; }
.s-steps-num .st{ text-align:center; }
.s-steps-num .n{ font-family:var(--ff-head); font-size:30px; color:var(--rose); }
.s-steps-num h3{ font-size:16px; margin:8px 0 6px; }
.s-steps-num p{ font-size:13px; color:var(--teal-75); line-height:1.75; }

/* ── features ───────────────────────────────────────────────── */
.s-feat-rows{ border-top:1px solid var(--gold); }
.s-feat-rows .ft{ display:grid; grid-template-columns:34px 1fr 1.5fr; gap:28px; align-items:start; padding:30px 0; border-bottom:1px solid var(--teal-12); }
.s-feat-rows .ft:last-child{ border-bottom:1px solid var(--gold); }
.s-feat-rows .mark{ color:var(--gold); padding-top:2px; }
.s-feat-rows h3{ font-size:17px; line-height:1.45; }
.s-feat-rows p{ color:var(--teal-75); font-size:14.5px; line-height:1.8; max-width:58ch; }
.s-feat-cols{ display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:28px; }
.s-feat-cols .ft{ border-top:1px solid var(--gold-lt); padding-top:18px; }
.t-dark .s-feat-cols .ft{ border-top-color:rgba(255,255,255,.18); }
.s-feat-cols h3{ font-size:16px; margin-bottom:8px; }
.s-feat-cols p{ font-size:13.5px; color:var(--teal-75); line-height:1.8; }
.s-band-orn{ width:46px; height:10px; color:var(--gold-dk); margin-bottom:22px; }

/* ── two lists ──────────────────────────────────────────────── */
.s-lists{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.s-lists h2{ font-size:24px; margin-bottom:16px; }
.s-lists li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--teal-06); font-size:14px; color:var(--teal-75); }
.s-lists li b{ color:var(--teal); font-weight:500; flex:0 0 auto; min-width:140px; }
.s-lists .btn{ margin-top:22px; }

/* ── faq ────────────────────────────────────────────────────── */
.s-faq{ max-width:860px; margin:0 auto; }
.s-faq h2{ font-size:26px; text-align:center; margin-bottom:30px; }
.s-faq details{ border-bottom:1px solid var(--teal-12); }
.s-faq summary{ cursor:pointer; list-style:none; padding:18px 0; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.s-faq summary::-webkit-details-marker{ display:none; }
.s-faq summary::after{ content:'+'; color:var(--rose); font-size:19px; flex:0 0 auto; }
.s-faq details[open] summary::after{ content:'−'; }
.s-faq .a{ padding:0 0 20px; color:var(--teal-75); font-size:14px; line-height:1.85; max-width:70ch; }
.s-faq .a a{ color:var(--rose); text-decoration:underline; }

/* ── quotes ─────────────────────────────────────────────────── */
.s-quotes{ display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:22px; align-items:start; }
.s-quote{ background:var(--white); border:1px solid var(--teal-12); padding:26px 24px 22px; }
.t-dark .s-quote{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.s-quote .stars{ color:var(--rose); letter-spacing:2px; font-size:13px; margin-bottom:12px; }
.s-quote blockquote{ font-family:var(--ff-head); font-size:16px; line-height:1.65; color:var(--teal); }
.t-dark .s-quote blockquote{ color:#fff; }
.s-quote footer{ margin-top:16px; padding-top:14px; border-top:1px solid var(--teal-06); }
.s-quote .who{ font-size:13px; font-weight:500; }
.s-quote .what{ font-size:11.5px; color:var(--teal-55); margin-top:2px; }
.s-rating{ display:inline-flex; gap:9px; align-items:center; font-size:13px; color:var(--teal-75); margin-top:10px; }
.s-rating .stars{ color:var(--rose); letter-spacing:2px; }

/* ── call to action ─────────────────────────────────────────── */
.s-cta{ text-align:center; }
.s-cta h2{ font-size:27px; margin-bottom:10px; }
.s-cta p{ color:var(--teal-75); font-size:14.5px; max-width:52ch; margin:0 auto 26px; line-height:1.8; }
.s-cta .orn{ margin:0 auto 14px; width:72px; height:12px; color:var(--rose); display:block; }
.s-cta .orn-mark{ margin:0 auto 14px; }
.t-dark.s-cta .orn{ color:var(--gold-dk); }

/* ── logos, spacer, embed ───────────────────────────────────── */
.s-logos-h{ text-align:center; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-55); margin-bottom:26px; }
.s-logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px 48px; }
.s-logos img{ max-height:46px; width:auto; filter:grayscale(1); opacity:.7; transition:opacity .3s var(--ease), filter .3s var(--ease); }
.s-logos a:hover img{ filter:none; opacity:1; }
.s-spacer.small{ height:24px; } .s-spacer.medium{ height:56px; } .s-spacer.large{ height:104px; }
.s-spacer.line{ display:flex; align-items:center; }
.s-spacer.line::before{ content:''; display:block; width:min(var(--wrap), calc(100% - 48px)); margin:0 auto; border-top:1px solid var(--teal-12); }
.s-embed{ max-width:860px; margin:0 auto; }
.s-embed.wide{ max-width:none; }
.s-embed iframe{ max-width:100%; }

/* ── forms (contact + custom order) ─────────────────────────── */
.s-form .fld{ margin-bottom:20px; }
.s-form .fld label{ display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-75); margin-bottom:8px; }
.s-form .fld .opt{ letter-spacing:0; text-transform:none; font-size:11.5px; color:var(--teal-55); }
.s-form .fld input, .s-form .fld select, .s-form .fld textarea{ width:100%; border:1px solid var(--teal-12); background:var(--white); color:var(--teal); font-family:inherit; font-size:14.5px; padding:13px 15px; outline:none; transition:border-color .25s var(--ease); }
.s-form .fld input:focus, .s-form .fld select:focus, .s-form .fld textarea:focus{ border-color:var(--rose); }
.s-form .fld textarea{ min-height:130px; resize:vertical; line-height:1.7; }
.s-form .fld input::placeholder, .s-form .fld textarea::placeholder{ color:var(--teal-55); }
.s-form .fld .err{ font-size:12px; color:#A6584F; margin-top:6px; }
.s-form .frow{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.s-form .hint{ font-size:12px; color:var(--teal-55); margin-top:-12px; margin-bottom:20px; line-height:1.7; }
.s-form .done{ background:var(--peach); border:1px solid var(--gold-lt); padding:16px 20px; margin-bottom:24px; font-size:14px; color:var(--teal); line-height:1.7; }
.s-form-cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start; }
.s-form-cols h2{ font-size:26px; margin-bottom:8px; }
.s-form-cols .sub{ color:var(--teal-75); font-size:14px; margin-bottom:28px; line-height:1.8; }
.s-studio{ background:var(--band); color:#fff; padding:30px 30px 34px; }
.s-studio h3{ color:#fff; font-size:19px; margin-bottom:6px; }
.s-studio .tl{ font-family:var(--ff-head); font-style:italic; color:var(--blush); font-size:14px; margin-bottom:20px; }
.s-studio .row{ display:flex; gap:12px; padding:13px 0; border-top:1px solid rgba(255,255,255,.14); font-size:13.5px; color:rgba(255,255,255,.8); }
.s-studio .row b{ color:#fff; font-weight:500; min-width:88px; flex:0 0 auto; }
.s-studio a{ color:var(--blush); text-decoration:underline; text-underline-offset:3px; }
.s-side{ background:var(--peach-soft); padding:26px 26px 28px; }
.s-side h3{ font-size:17px; margin-bottom:10px; }
.s-side p{ font-size:13.5px; color:var(--teal-75); line-height:1.8; margin-bottom:16px; }
.s-side .row{ display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--teal-12); font-size:13px; color:var(--teal-75); }
.s-side .row b{ color:var(--teal); font-weight:500; min-width:92px; flex:0 0 auto; }
.s-wa{ display:inline-flex; align-items:center; gap:9px; background:#075E54; color:#fff !important; text-decoration:none !important; padding:12px 20px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.s-wa:hover{ filter:brightness(.94); }

/* ── admin preview only ─────────────────────────────────────── */
.cms-hidden{ position:relative; opacity:.45; outline:2px dashed var(--rose); outline-offset:-2px; }
.cms-hidden::before{ content:'Hidden — only you can see this'; position:absolute; top:10px; right:10px; z-index:5; background:var(--rose); color:#fff; font-size:11px; letter-spacing:.06em; padding:4px 10px; }
.cms-flash{ outline:3px solid var(--gold-lt); outline-offset:-3px; transition:outline-color 1s; }

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .s-ti{ grid-template-columns:1fr; gap:34px; }
  .s-ti.flip .s-ti-copy{ order:0; }
  .s-steps-cols{ grid-template-columns:1fr 1fr; }
  .s-steps-cols .st:nth-child(odd){ padding-left:0; border-left:0; }
  .s-steps-rows .st, .s-steps-rows .st.no-note{ grid-template-columns:56px 1fr; gap:22px; }
  .s-steps-rows aside{ grid-column:2; }
  .s-steps-time{ grid-template-columns:repeat(2,1fr); gap:32px 20px; }
  .s-steps-time .st::before{ display:none; }
  .s-feat-rows .ft{ grid-template-columns:34px 1fr; }
  .s-feat-rows .ft p{ grid-column:2; }
  .s-feat-cols, .s-quotes{ grid-template-columns:repeat(2,1fr); }
  .s-lists, .s-form-cols{ grid-template-columns:1fr; gap:38px; }
  .s-gallery{ grid-template-columns:repeat(min(var(--cols,3),3),1fr); }
  .chooser.n3, .chooser.n4{ grid-template-columns:1fr 1fr; }
  .s-banner h1{ font-size:27px; }
}
@media (max-width:760px){
  .s-form .frow{ grid-template-columns:1fr; }
  .s-steps-num{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:600px){
  .s-sec{ padding:54px 0; }
  .s-steps-cols, .s-steps-time, .s-feat-cols, .s-quotes{ grid-template-columns:1fr; }
  .s-steps-cols .st + .st{ padding-left:0; border-left:0; }
  .s-steps-rows .st, .s-steps-rows .st.no-note{ grid-template-columns:1fr; gap:12px; }
  .s-steps-rows aside{ grid-column:1; }
  .s-lists li{ flex-direction:column; gap:3px; }
  .s-gallery{ grid-template-columns:1fr 1fr; }
  .s-story-in{ padding:56px 0 50px; }
  .chooser.n3, .chooser.n4{ grid-template-columns:1fr; }
}

/* ── the home page's design sections (Oct 2026) ─────────────────────────
   Most of their look already lives in brand.css under the design's own
   class names (.tabs-sec, .rail-sec, .feature, .bento-sec, .proof-track,
   .edito, .perso, .story-band, .revs, .ig, .news). What follows is only
   what the section versions add: tones, the About page's cards, the map. */

/* editorial — the About page's story band adds a quote box */
.s-edito .s-edito-body p:last-child{ margin-bottom:0; }
.s-edito .s-edito-body + .btn{ margin-top:24px !important; }
.s-edito-note{
  margin-top:24px; padding:16px 20px; background:var(--peach-soft);
  border-left:2px solid var(--gold); font-family:var(--ff-head);
  font-size:14.5px; line-height:1.7; color:var(--teal); max-width:46ch;
}

/* picture cards — the About page's Sweet Boxes */
.s-cards-head{ margin-bottom:34px; max-width:56ch; }
.s-cards-head .rule-orn{ margin-bottom:22px; }
.s-cards-head h2{ font-size:26px; }
.s-cards-head h2 em{ font-style:italic; color:var(--rose); }
.s-cards-head p{ color:var(--teal-75); font-size:14.5px; margin-top:10px; max-width:52ch; line-height:1.8; }
.s-cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.s-cards-grid.n1{ grid-template-columns:minmax(0,420px); }
.s-cards-grid.n2{ grid-template-columns:repeat(2,1fr); }
.s-card{ display:block; color:inherit; text-decoration:none; }
.s-card figure{ background:var(--peach-soft); overflow:hidden; margin:0 0 14px; }
.s-card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; transition:transform .6s var(--ease); }
a.s-card:hover img{ transform:scale(1.04); }
.s-card h3{ font-size:16px; }
.s-card p{ color:var(--teal-75); font-size:13.5px; line-height:1.75; margin-top:6px; max-width:34ch; }
.t-dark .s-card p{ color:rgba(255,255,255,.76); }
.s-cards-foot{ margin-top:32px; }

/* newsletter tones and the thank-you line */
.s-news.t-paper{ background:var(--paper); }
.s-news.t-peach{ background:var(--peach); }
.s-news.t-soft{ background:var(--peach-soft); }
.s-news.t-dark{ background:var(--band); }
.s-news.t-dark h2{ color:#fff; }
.s-news.t-dark p{ color:rgba(255,255,255,.76); }
.s-news-done, .s-news-msg{ margin-top:18px !important; font-size:14px; color:var(--teal) !important; }
.s-news-msg.err{ color:var(--rose) !important; }

/* map / find us */
.s-map{ padding:56px 0 0; }
.s-map h2{ font-size:26px; margin-bottom:8px; }
.s-map .sub{ color:var(--teal-75); font-size:14px; margin-bottom:24px; }
.s-map-frame{ border:1px solid var(--teal-12); background:var(--peach-soft); height:380px; position:relative; overflow:hidden; display:grid; place-items:center; text-align:center; }
.s-map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.s-map-frame img{ width:110px; height:auto; opacity:.4; margin:0 auto 16px; }
.s-map-frame p{ font-size:13.5px; color:var(--teal-75); max-width:38ch; line-height:1.8; margin:0 auto; }

/* the rail is dragged with the mouse; keep the photos from being picked up */
.rail[data-rail]{ cursor:grab; }
.rail[data-rail].dragging{ cursor:grabbing; }
.rail[data-rail] img{ user-select:none; -webkit-user-drag:none; }

@media (max-width:1024px){
  .s-cards-grid, .s-cards-grid.n2{ grid-template-columns:1fr; gap:26px; }
  .s-edito .edito-figure img{ aspect-ratio:4/3; }
}
@media (max-width:600px){
  .s-card p{ max-width:none; }
  .s-map-frame{ height:300px; }
}

/* the cart/checkout progress line is an <ol>; its hairline items must not
   show list numbers */
.steps3{ list-style:none; padding-left:0; }
.steps3 > li{ list-style:none; }

/* demo preview only: the sample reviews say what they are */
.revs-sample{ text-align:center; font-size:11.5px; letter-spacing:.06em; color:var(--teal-55); margin:-6px auto 22px; max-width:560px; padding:7px 14px; border:1px dashed var(--teal-12); background:var(--white); }

/* ── Photo slider (top of the home page) — premium pass, Oct 2026 ───────────── */
.s-carousel{ background:var(--paper); padding:0; }
.car-track{ position:relative; overflow:hidden; height:max(380px, min(clamp(420px, 42vw, 620px), calc(100vh - 300px))); background:var(--deep, #33261A); touch-action:pan-y; isolation:isolate; }
.car-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.1s var(--ease), visibility 0s linear 1.1s; }
.car-slide.on{ opacity:1; visibility:visible; z-index:1; transition:opacity 1.1s var(--ease), visibility 0s; }
.car-media{ position:absolute; inset:0; overflow:hidden; }
.car-media img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.08); transition:transform 0s linear .9s; will-change:transform; }
.car-slide.on .car-media img{ transform:scale(1); transition:transform calc(var(--car-secs, 5s) + 2s) cubic-bezier(.2,.6,.2,1); }
/* soft vignette: the photo stays the hero, the card stays readable */
.car-media::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(51,38,26,.42) 0%, rgba(51,38,26,.12) 38%, rgba(51,38,26,0) 60%),
             linear-gradient(0deg, rgba(51,38,26,.38) 0%, rgba(51,38,26,0) 34%); }
.car-cover{ position:absolute; inset:0; z-index:2; }

/* the floating card */
.car-card{ position:absolute; z-index:3; left:clamp(20px, 5vw, 72px); bottom:clamp(64px, 8vw, 96px); max-width:420px;
  padding:26px 30px 24px; color:var(--teal);
  background:rgba(253,248,243,.84); background:color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(255,255,255,.6); border-radius:2px;
  opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease) .35s, transform .9s var(--ease) .35s; }
.car-slide.on .car-card{ opacity:1; transform:none; }
.car-card::before{ content:''; position:absolute; left:30px; top:0; width:42px; height:2px; background:var(--gold, #846121); }
.car-eyebrow{ display:block; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--rose); margin-bottom:10px; }
.car-title{ font-family:var(--ff-head); font-weight:400; font-size:clamp(28px, 3vw, 42px); line-height:1.08; letter-spacing:-.005em; color:var(--teal); margin:0; }
.car-link{ display:inline-flex; align-items:center; gap:12px; margin-top:18px; padding-bottom:4px; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal); border-bottom:1px solid var(--teal-55); transition:gap .3s var(--ease), color .2s, border-color .2s; }
.car-link:hover{ gap:18px; color:var(--rose); border-color:var(--rose); }

/* controls: progress lines, counter, round frosted arrows */
.car-ui{ position:absolute; z-index:4; left:clamp(20px, 5vw, 72px); right:clamp(20px, 5vw, 72px); bottom:clamp(22px, 3vw, 34px);
  display:flex; align-items:center; gap:22px; color:#fff; pointer-events:none; }
.car-ui > *{ pointer-events:auto; }
.car-progress{ display:flex; gap:8px; flex:0 1 360px; }
.car-progress button{ flex:1; height:16px; padding:7px 0; background:none; border:0; cursor:pointer; }
.car-progress i{ display:block; height:2px; background:rgba(255,255,255,.35); position:relative; overflow:hidden; }
.car-progress i::after{ content:''; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; }
.car-progress button.done i::after{ transform:scaleX(1); }
.car-progress button.on i::after{ animation:carFill var(--car-secs, 5s) linear forwards; }
.s-carousel.held .car-progress button.on i::after, .s-carousel.still .car-progress button.on i::after{ animation-play-state:paused; }
.s-carousel.manual .car-progress button.on i::after{ animation:none; transform:scaleX(1); }
@keyframes carFill{ to{ transform:scaleX(1); } }
.car-count{ font-family:var(--ff-head); font-size:15px; letter-spacing:.06em; white-space:nowrap; text-shadow:0 1px 10px rgba(0,0,0,.25); }
.car-count b{ font-weight:400; font-size:20px; margin-right:6px; }
.car-count span{ opacity:.75; }
.car-arrows{ margin-left:auto; display:flex; gap:10px; }
.car-arrow{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.car-arrow:hover{ background:#fff; color:var(--band); transform:translateY(-1px); }
.car-arrow:focus-visible, .car-progress button:focus-visible, .car-link:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.car-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; padding:22px 16px 30px; }
.car-cta .btn{ min-height:50px; min-width:230px; }

@media (max-width:768px){
  .car-track{ width:100%; height:auto; aspect-ratio:4/5; max-height:none; }
  .car-media::after{ background:linear-gradient(0deg, rgba(51,38,26,.55) 0%, rgba(51,38,26,.08) 46%, rgba(51,38,26,0) 62%); }
  .car-card{ left:16px; right:16px; bottom:64px; max-width:none; padding:18px 20px 16px; }
  .car-card::before{ left:20px; }
  .car-title{ font-size:26px; }
  .car-link{ margin-top:12px; }
  .car-ui{ left:16px; right:16px; bottom:18px; gap:14px; }
  .car-progress{ flex:1 1 auto; }
  .car-count{ display:none; }
  .car-arrow{ width:40px; height:40px; }
  .car-cta{ padding:16px 16px 24px; }
  .car-cta .btn{ flex:1 1 100%; min-width:0; }
}
/* tablets: full width, a wider frame than phones */
@media (min-width:601px) and (max-width:1024px){
  .car-track{ width:100%; height:auto; aspect-ratio:4/3; max-height:none; }
}
@media (max-width:600px){ .car-track{ aspect-ratio:4/5; } }
@media (max-width:600px) and (max-height:700px){ .car-track{ aspect-ratio:1/1; } }   /* small phones keep the button in view */
@media (prefers-reduced-motion:reduce){
  .car-slide, .car-card, .car-media img{ transition:none !important; transform:none !important; }
  .car-progress button.on i::after{ animation:none; transform:scaleX(1); }
}