@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root { --ink:#0c4444; --canvas:#fffaf3; --line:rgba(12,68,68,.24); --paper:#fffaf3; --burgundy:#6f222a; --sand:#d0b28e; --teal:#0c4444; --header-h:86px; }
* { box-sizing:border-box; }
img { max-width:100%; }
button, input, select, textarea { font:inherit; }
section, header, footer, main { min-width:0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-content, .about-intro, .founder-card, .sensory-copy, .workflow, .turnkey-heading, .service-card, .scope-block, .footer-group, .catalog-intro, .package-card, .package-hero, .product-block, .addons-inner, .package-actions, .service-page-heading, .service-page-grid article, .service-workflow, .enquiry-heading, .enquiry-card, .auth-card, .customer-card, .cart-card {
    animation: sectionReveal .7s cubic-bezier(.2,.7,.2,1) both;
  }
  .founder-card:nth-child(2), .service-card:nth-child(2), .service-page-grid article:nth-child(2), .workflow-step:nth-child(2) { animation-delay:.08s; }
  .founder-card:nth-child(3), .service-card:nth-child(3), .service-page-grid article:nth-child(3), .workflow-step:nth-child(3) { animation-delay:.16s; }
  .workflow-step:nth-child(4) { animation-delay:.24s; }
  .package-card:hover, .addon-card:hover, .service-card:hover, .service-page-grid article:hover { transform:translateY(-4px); }
  .package-card, .addon-card, .service-card, .service-page-grid article { transition:transform .3s ease, box-shadow .3s ease; }
  .addon-card:hover { box-shadow:0 16px 34px rgba(23,23,23,.1); }
}
@keyframes sectionReveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
html { scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:"DM Sans",Arial,sans-serif; }
/* Fixed on top at all times. Every header variant (.checkout-header,
   .admin-header, .package-header, .turnkey-header) is a .site-header, so this
   pins them all. Hero pages let the header overlay the hero; other pages
   offset their content by --header-h so nothing hides beneath it. */
.site-header { position:fixed; top:0; left:0; right:0; z-index:40; height:var(--header-h); padding:0 4.1vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.82); backdrop-filter:blur(12px); }
/* Content offset for pages whose header is an opaque top bar rather than a
   hero overlay. One mechanism for all of them: push the whole page below the
   fixed header. Hero pages (index, turnkey) intentionally omit this so the
   header can overlay the hero. Their intros carry only moderate top padding
   now, since header clearance is handled here rather than by that padding. */
.checkout-page, .catalog-page { padding-top:var(--header-h); }
.brand { color:var(--ink); font-size:15px; font-weight:600; letter-spacing:.19em; text-decoration:none; justify-self:start; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-logo { display:block; width:auto; max-width:32px; height:28px; object-fit:contain; }
/* Auth pages (login / register): no site nav — the header carries only the
   brand and a plain link home, so the grid drops to two columns. */
.site-header.auth-header { grid-template-columns:1fr auto 1fr; }
.header-home-link { justify-self:center; text-align:center; color:var(--ink); font-size:13px; text-decoration:none; transition:color .2s; }
.header-home-link:hover { color:#6f222a; }
.primary-nav { display:flex; gap:37px; align-items:center; }
.primary-nav a { color:var(--ink); font-size:13px; letter-spacing:.01em; text-decoration:none; position:relative; padding:8px 0; }
.primary-nav a::after { content:""; position:absolute; height:1px; left:0; right:0; bottom:3px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .25s ease; }
.primary-nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.account-link { justify-self:end; display:grid; width:38px; height:38px; border:1px solid var(--ink); border-radius:50%; place-items:center; color:var(--ink); transition:background .2s,color .2s; }
.account-link:hover { color:var(--paper); background:var(--ink); }
.account-link svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; }
/* Cart + account grouped at the header's end. On pages where the account icon
   is injected (absolutely positioned), the wrapper inherits that positioning. */
.header-actions { justify-self:end; display:flex; align-items:center; gap:12px; }
.header-actions--floating { position:absolute; top:24px; right:4.1vw; z-index:30; }
.header-actions .account-link.auth-generated { position:static; top:auto; right:auto; }
.cart-link { position:relative; display:grid; place-items:center; width:38px; height:38px; color:var(--ink); transition:color .2s; }
.cart-link svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.cart-link:hover { color:#6f222a; }
.cart-count { position:absolute; top:-3px; right:-4px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:#6f222a; color:#fff; font:600 10px/16px "DM Sans",sans-serif; text-align:center; }
.cart-count[hidden] { display:none; }
/* Header back/utility link. Lives here (not only in packages.css) because
   checkout, order-confirmation, admin and dashboard use it but do not load
   packages.css — without this it fell back to the browser's default blue. */
.catalog-back { justify-self:end; color:#171717; font-size:13px; text-decoration:none; transition:color .2s; }
.catalog-back:hover { color:#6f222a; }
.auth-generated { position:absolute; right:4.1vw; top:24px; z-index:30; background:#fff; }
.package-topbar .auth-generated { top:8px; right:7vw; color:#fff; border-color:rgba(255,255,255,.6); background:transparent; }
.account-dropdown { position:absolute; z-index:40; top:76px; right:4.1vw; width:185px; padding:14px; border:1px solid rgba(23,23,23,.14); background:#fff; box-shadow:0 14px 32px rgba(23,23,23,.14); }
.package-topbar .account-dropdown { top:52px; right:7vw; }
.account-status { display:block; overflow:hidden; margin-bottom:12px; color:#59635d; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.logout-button { width:100%; margin:0; padding:10px; border:1px solid #6f222a; background:transparent; color:#6f222a; font:12px "DM Sans",sans-serif; cursor:pointer; }
.logout-button:hover { color:#fff; background:#6f222a; }
.hero { position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; color:#fff; background:#33443b; }
.hero-slides, .hero-shade { position:absolute; inset:0; }
.hero-slides { display:flex; width:300%; animation:swipe 24s infinite ease-in-out; }
.hero-slide { position:relative; width:33.333%; flex:0 0 33.333%; overflow:hidden; }
.hero-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-shade { background:linear-gradient(90deg,rgba(111,34,42,.56),rgba(12,68,68,.12) 60%,rgba(12,68,68,.26)); }
.hero-content { position:relative; z-index:1; width:min(100% - 40px,1000px); margin:auto; padding:100px 0 24px; text-align:center; }
/* Trust strip sits at the bottom of the hero (content centres above it), so the
   whole intro reads as one screen on desktop. */
.hero .trust-band { position:relative; z-index:1; padding-top:clamp(15px,1.8vw,20px); padding-bottom:clamp(15px,1.8vw,20px); background:linear-gradient(to top, rgba(9,26,25,.72), rgba(9,26,25,.3)); border-top:1px solid rgba(255,255,255,.16); backdrop-filter:blur(4px); }
.hero .trust-item + .trust-item { border-left-color:rgba(255,255,255,.22); }
.hero-content .eyebrow { margin-bottom:25px; color:rgba(255,255,255,.85); }
.hero-content h1 { max-width:860px; margin:0 auto; font-family:"DM Sans",Arial,sans-serif; font-size:clamp(26px,3.6vw,56px); line-height:1.08; font-weight:500; letter-spacing:-.05em; }
.hero-content h1 span { color:rgba(255,255,255,.5); font-weight:300; }
.hero-content h1 em { display:block; margin-top:12px; font-family:"Playfair Display",Georgia,serif; font-weight:500; letter-spacing:-.04em; }
.hero-sub { max-width:600px; margin:22px auto 0; color:rgba(255,255,255,.9); font-size:clamp(15px,1.6vw,18px); line-height:1.6; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-button { display:inline-flex; align-items:center; gap:19px; padding:15px 20px; border:1px solid #fff; color:#fff; font-size:12px; text-decoration:none; transition:background .2s,color .2s; }
.hero-button:hover { color:var(--ink); background:#fff; }
.hero-button-light { color:var(--ink); background:#fff; }
.hero-button-light:hover { color:#fff; background:transparent; }
.placeholder-anchor { position:absolute; top:100%; }
@keyframes swipe { 0%,27% { transform:translateX(0); } 33%,60% { transform:translateX(-33.333%); } 66%,93% { transform:translateX(-66.666%); } 100% { transform:translateX(0); } }
/* Trust band — existing facts surfaced right under the hero, before anyone
   scrolls. A calm teal strip between the image hero and the light About. */
.trust-band { padding:clamp(24px,3.4vw,34px) 7vw; background:#0c4444; color:#fff; }
.trust-inner { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); }
.trust-item { text-align:center; padding:2px 10px; }
.trust-item + .trust-item { border-left:1px solid rgba(255,255,255,.18); }
.trust-item strong { display:block; font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:clamp(21px,2.4vw,30px); line-height:1; letter-spacing:-.02em; color:#d0b28e; }
.trust-item span { display:block; margin-top:7px; color:rgba(255,255,255,.82); font-size:12.5px; line-height:1.45; }
@media (max-width:640px) { .trust-inner { grid-template-columns:1fr 1fr; gap:22px 12px; } .trust-item:nth-child(3) { border-left:0; } }

.about-section { min-height:100vh; padding:clamp(76px,10vw,150px) 7vw; display:flex; flex-direction:column; justify-content:center; background:#f7f7f4; }
.about-intro { display:grid; grid-template-columns:1fr 1fr; column-gap:8vw; align-items:end; max-width:1200px; margin:0 auto clamp(50px,7vw,90px); }
.about-intro .eyebrow { grid-column:1 / -1; margin-bottom:20px; color:#666; }
.about-intro h2 { margin:0; font-size:clamp(54px,7vw,105px); line-height:.9; letter-spacing:-.065em; }
.about-intro h2 span { color:#8fa797; }
.about-lede { max-width:390px; margin:0; color:#5d625e; font-size:15px; line-height:1.6; }
.founder-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,6vw,94px); max-width:1200px; margin:0 auto; }
.founder-card { min-width:0; }
.founder-image-wrap { position:relative; overflow:hidden; aspect-ratio:4 / 5; background:#dbe0d9; }
.founder-image { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.75); transition:transform .5s ease; }
.founder-card:hover .founder-image { transform:scale(1.03); }
.image-size-note { position:absolute; right:13px; bottom:12px; padding:6px 8px; color:#fff; background:rgba(20,28,24,.62); font:10px "DM Mono",monospace; letter-spacing:.04em; }
.founder-copy { padding:23px 0 0; }
.founder-role { margin:0 0 12px; color:#68746d; font:10px "DM Mono",monospace; letter-spacing:.15em; }
.founder-copy h3 { margin:0 0 13px; font-family:"Playfair Display",Georgia,serif; font-size:clamp(27px,3vw,40px); font-weight:500; letter-spacing:-.045em; }
.founder-copy > p:last-child { max-width:410px; margin:0; color:#5d625e; font-size:14px; line-height:1.65; }
/* Copy + "includes" cards side by side, workflow full-width centered below. */
.sensory-section { min-height:100vh; padding:clamp(76px,9vw,135px) 7vw; display:flex; flex-direction:column; justify-content:center; gap:clamp(44px,6vw,74px); background:#d0b28e; }
.sensory-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(40px,6vw,96px); align-items:center; max-width:1200px; width:100%; margin:0 auto; }
.sensory-section .sensory-features { grid-template-columns:repeat(2,1fr); gap:14px; }
.sensory-section .workflow { max-width:1040px; width:100%; margin:0 auto; }
.sensory-copy { max-width:470px; }
.sensory-copy .eyebrow { margin-bottom:22px; color:#68746d; }
.sensory-copy h2 { margin:0 0 28px; font-size:clamp(54px,6.5vw,98px); line-height:.92; letter-spacing:-.065em; }
.sensory-copy h2 span { color:#8fa797; }
.sensory-copy > p:not(.eyebrow) { max-width:420px; margin:0 0 31px; color:#59635d; font-size:15px; line-height:1.7; }
/* Sensory-room feature highlights — used both in the index sensory section
   (inside .sensory-copy) and standalone on the sensory-rooms page
   (.catalog-features). Neutral card styling so it reads on either light bg. */
.sensory-features { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 31px; padding:0; }
.sensory-feature { padding:17px 16px; border:1px solid rgba(23,23,23,.14); background:rgba(255,255,255,.4); }
.sensory-feature strong { display:block; margin-bottom:7px; font-family:"Playfair Display",Georgia,serif; font-size:clamp(21px,2.4vw,28px); line-height:1; font-weight:500; letter-spacing:-.03em; color:#6f222a; }
.sensory-feature span { display:block; color:#59635d; font-size:11px; line-height:1.4; letter-spacing:.02em; }
/* In the narrow index copy column, two across reads better than four. */
.sensory-copy .sensory-features { grid-template-columns:repeat(2,1fr); gap:12px; }
/* Standalone feature section on the sensory-rooms page — larger, icon-led
   cards with more presence than the compact index version (scoped to
   .catalog-features so the homepage block is untouched), a heading for
   context, and breathing room before the package cards below. */
.catalog-features-section { padding:6px 7vw clamp(56px,7vw,88px); }
.features-eyebrow { max-width:1180px; margin:0 auto 24px; color:#6f222a; }
.catalog-features { max-width:1180px; margin:0 auto; padding:0; gap:20px; }
.catalog-features .sensory-feature { display:flex; flex-direction:column; padding:30px 26px 28px; border:1px solid rgba(23,23,23,.16); background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.catalog-features .sensory-feature:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(23,23,23,.09); }
.catalog-features .feature-icon { display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin-bottom:18px; border-radius:50%; background:rgba(111,34,42,.08); color:#6f222a; }
.catalog-features .feature-icon svg { width:24px; height:24px; }
.catalog-features .sensory-feature strong { margin-bottom:3px; font-size:clamp(27px,2.7vw,36px); color:#6f222a; }
.catalog-features .feature-label { display:block; margin-bottom:9px; color:#171717; font-size:13px; font-weight:600; letter-spacing:.01em; }
.catalog-features .feature-desc { display:block; color:#59635d; font-size:12.5px; line-height:1.5; }
@media (max-width:900px) { .catalog-features { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { .catalog-features-section { padding:6px 24px clamp(48px,8vw,62px); } }
@media (max-width:520px) { .catalog-features { grid-template-columns:1fr; gap:14px; } .catalog-features .sensory-feature { padding:24px 22px; } }
@media (max-width:400px) { .sensory-copy .sensory-features { gap:10px; } .sensory-copy .sensory-feature { padding:14px 13px; } }
/* Pricing / reservation note — sets expectations before anyone reserves. */
.pricing-note strong { color:#6f222a; font-weight:600; }
/* Cross-link from the sensory catalog to bespoke turnkey work. */
/* Sensory-rooms page — two clean sections.
   1) Hero, all on one screen (desktop): the title with its tagline beside it,
      then "what's included" and "how it works" sitting side by side below. */
/* Header sits in normal flow (~86px); subtract it so the hero is exactly one
   screen and nothing spills into a stray scroll below the workflow. */
/* One-screen hero: the title with its tagline and intro copy on the left, the
   "includes" cards top-aligned on the right, workflow centered below. */
.catalog-hero { max-width:1220px; margin:0 auto; box-sizing:border-box; min-height:calc(100vh - 86px); padding:clamp(14px,2.4vw,26px) 7vw clamp(16px,2.4vw,30px); display:flex; flex-direction:column; justify-content:center; gap:clamp(16px,2.4vw,30px); }
.catalog-hero-left h1 { margin:0; font-size:clamp(40px,5vw,64px); line-height:.88; letter-spacing:-.045em; }
.catalog-hero-left h1 em { color:#6f222a; }
.catalog-hero .catalog-hero-tag { margin:13px 0 0; text-align:left; line-height:1.5; color:#6f222a; }
/* Left column: intro copy. Right column: the "includes" cards, top-aligned with
   the title. Workflow sits full width below (.catalog-hero-flow). */
.catalog-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(34px,5vw,72px); align-items:start; }
.catalog-hero-block { margin:0; }
.catalog-hero-lede { margin-top:clamp(16px,2vw,24px); }
.catalog-hero-lede p { margin:0 0 11px; color:#59635d; font-size:14px; line-height:1.62; }
.catalog-hero-lede p:last-child { margin-bottom:0; }
.catalog-hero-lede .lede-lead { color:#3a423d; font-weight:500; }
.section-eyebrow { margin:0 0 18px; color:#6f222a; }
/* Compact the shared feature/workflow blocks so both columns clear one screen. */
.catalog-hero .catalog-features { margin:0; grid-template-columns:repeat(2,1fr); gap:12px; }
.catalog-hero .catalog-features .sensory-feature { padding:14px 15px 13px; }
.catalog-hero .catalog-features .feature-icon { width:32px; height:32px; margin-bottom:8px; }
.catalog-hero .catalog-features .feature-icon svg { width:17px; height:17px; }
.catalog-hero .catalog-features .sensory-feature strong { font-size:clamp(20px,2vw,26px); margin-bottom:1px; }
.catalog-hero .catalog-features .feature-label { margin-bottom:5px; }
.catalog-hero .catalog-features .feature-desc { font-size:12px; line-height:1.45; }
/* Workflow: full-width, centered, four across with its connector — identical to
   the homepage sensory workflow. Base .workflow provides the grid, the line, and
   the mobile (<=600px) vertical treatment. */
.catalog-hero-flow { max-width:940px; width:100%; margin:0 auto; }
.catalog-hero-flow .section-eyebrow { margin-bottom:12px; text-align:center; }
.catalog-hero .catalog-workflow { max-width:none; margin:0 auto; }
/* Below desktop: stop forcing one screen — stack, breathe, and let it scroll.
   Tagline moves above the title (column-reverse) so it reads as an eyebrow. */
@media (max-width:900px) {
  .catalog-hero { min-height:0; display:block; padding:clamp(92px,15vw,120px) 7vw 56px; }
  .catalog-hero-grid { grid-template-columns:1fr; gap:clamp(30px,6vw,44px); }
  .catalog-hero-flow { margin-top:clamp(30px,6vw,46px); }
}
@media (max-width:520px) {
  .catalog-hero .catalog-features { grid-template-columns:1fr; }
}

/* 2) A short intro, then the packages. */
.catalog-body { border-top:1px solid rgba(23,23,23,.1); }
.catalog-lede { max-width:720px; margin:0 auto; padding:clamp(42px,6vw,66px) 7vw clamp(28px,3.5vw,40px); text-align:center; }
.catalog-lede p { margin:0 0 15px; color:#59635d; font-size:15px; line-height:1.75; }
.catalog-lede p:last-child { margin-bottom:0; }
.catalog-lede .lede-lead { color:#3a423d; font-weight:500; }

/* Four-sense strip — how a sensory room engages sight, sound, scent and touch.
   Each .sense-media is a placeholder image slot: drop an <img> inside to
   replace it and the "Photo" label disappears automatically. */
.sense-strip { max-width:1200px; margin:0 auto; padding:clamp(50px,7vw,84px) 7vw clamp(20px,3vw,34px); }
.sense-head { max-width:660px; margin:0 auto clamp(30px,4vw,46px); text-align:center; }
.sense-head .section-eyebrow { text-align:center; margin-bottom:16px; }
.sense-head h2 { margin:0; font-family:"Playfair Display",Georgia,serif; font-weight:500; font-size:clamp(30px,4.4vw,52px); line-height:1; letter-spacing:-.05em; color:#171717; }
.sense-lede { max-width:56ch; margin:18px auto 0; color:#59635d; font-size:15px; line-height:1.7; }
.sense-cta-line { max-width:56ch; margin:18px auto 0; color:#3a423d; font-size:16px; font-weight:500; line-height:1.6; }
/* Big, clickable poster panels (two across), each opening full-size in a
   lightbox. The descriptive copy now lives inside the poster artwork, so the
   panel is just the image (a sense name shows only while the file is missing). */
.sense-posters { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,26px); max-width:1000px; margin:0 auto; }
.sense-poster { position:relative; display:block; width:100%; aspect-ratio:4/5; padding:0; border:1px solid rgba(23,23,23,.1); border-radius:18px; overflow:hidden; background:linear-gradient(150deg,#e8eee8,#d9e1d9 55%,#e7d7bf); cursor:pointer; transition:transform .3s ease, box-shadow .3s ease; }
.sense-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.sense-poster-ph { position:absolute; inset:0; display:grid; place-items:center; font-family:"Playfair Display",Georgia,serif; font-size:clamp(22px,3vw,32px); font-weight:500; letter-spacing:-.03em; color:#6f6357; }
.sense-poster:focus-visible { outline:2px solid #0c4444; outline-offset:3px; }
@media (prefers-reduced-motion:no-preference) { .sense-poster:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(23,23,23,.14); } }
@media (max-width:640px) { .sense-posters { grid-template-columns:1fr; max-width:460px; } }

/* Lightbox for the full-size posters. */
.sense-lightbox { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; background:rgba(12,20,19,.9); backdrop-filter:blur(4px); animation:senseFade .2s ease both; }
.sense-lightbox[hidden] { display:none; }
.sense-lightbox img { max-width:min(92vw,720px); max-height:90vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.sense-lightbox-close { position:absolute; top:16px; right:20px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; transition:background .2s; }
.sense-lightbox-close:hover { background:rgba(255,255,255,.26); }
@keyframes senseFade { from { opacity:0; } to { opacity:1; } }

.catalog-bespoke { padding:44px 7vw 72px; text-align:center; }
.catalog-bespoke p { max-width:620px; margin:0 auto; color:#59635d; font-size:14.5px; line-height:1.6; }
.catalog-bespoke a { color:#6f222a; text-decoration:underline; text-underline-offset:4px; }
.catalog-bespoke a:hover { color:#0c4444; }
/* Floating WhatsApp enquiry button (injected by auth.js on public pages). */
.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:45; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; color:#fff; background:#25d366; box-shadow:0 8px 22px rgba(18,140,80,.32); transition:transform .18s ease, box-shadow .18s ease; }
.whatsapp-float:hover { color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(18,140,80,.4); }
.whatsapp-float svg { width:32px; height:32px; }
@media (max-width:600px) { .whatsapp-float { right:16px; bottom:16px; width:52px; height:52px; } .whatsapp-float svg { width:30px; height:30px; } }
.sensory-cta { display:inline-flex; align-items:center; gap:20px; padding:14px 18px; border:1px solid var(--ink); color:var(--ink); font-size:12px; text-decoration:none; transition:background .2s,color .2s; }
.sensory-cta:hover { color:#fff; background:var(--ink); }
.workflow { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-top:25px; }
/* The dots are left-aligned in each 1fr column at (dot radius) from the
   column's left edge, so the line must start at the first dot's centre (11px)
   and end at the last dot's centre — one column minus a radius in from the
   right: col = (100% - 3*16px gap)/4 = 25% - 12px, minus 11px radius. */
.workflow-line { position:absolute; top:70px; left:11px; right:calc(25% - 23px); height:1px; background:#9dad9f; overflow:visible; }
.workflow-line::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#293a32,transparent); background-size:25% 100%; background-repeat:no-repeat; animation:workflowLineGlow 4.8s infinite ease-in-out; }
.workflow-step { position:relative; z-index:1; }
.step-number { display:block; margin-bottom:21px; color:#708176; font:10px "DM Mono",monospace; letter-spacing:.14em; }
.step-dot { width:22px; height:22px; margin-bottom:28px; border:1px solid #6d8172; border-radius:50%; background:#e8eee8; box-shadow:0 0 0 6px #e8eee8; animation:workflowDot 4.8s infinite ease-in-out; }
.workflow-step:nth-child(2) .step-dot { animation-delay:0s; }.workflow-step:nth-child(3) .step-dot { animation-delay:1.2s; }.workflow-step:nth-child(4) .step-dot { animation-delay:2.4s; }.workflow-step:nth-child(5) .step-dot { animation-delay:3.6s; }
.workflow-step h3 { margin:0 0 14px; font-size:15px; line-height:1.3; font-weight:500; letter-spacing:-.02em; }
.workflow-step p { max-width:150px; margin:0; color:#68746d; font-size:12px; line-height:1.5; }
@keyframes workflowDot { 0%,20%,100% { background:#e8eee8; transform:scale(1); } 6%,14% { background:#293a32; transform:scale(1.28); } }
@keyframes workflowLineGlow { 0%,100% { background-position:-25% 0; opacity:.2; } 50% { background-position:100% 0; opacity:.8; } }
/* Neutral foundation with restrained brand accents */
:root { --ink:#171717; --canvas:#fff; --line:rgba(23,23,23,.22); --paper:#fff; }
body { color:#171717; background:#fff; }
.site-header { background:rgba(255,255,255,.9); border-bottom-color:rgba(23,23,23,.2); }
.hero-shade { background:linear-gradient(90deg,rgba(20,25,24,.58),rgba(20,25,24,.16) 60%,rgba(20,25,24,.3)); }
.about-section { background:#f7f7f4; }
.sensory-section { background:#e8eee8; }
.turnkey-section { background:#f4f4f1; color:#171717; }
.turnkey-heading .eyebrow, .scope-block .eyebrow, .footer-label { color:#6f222a; }
.turnkey-heading h2 em { color:#6f222a; }
.turnkey-heading > p:last-child, .service-card p { color:#59635d; }
.service-grid { border-color:rgba(23,23,23,.22); }
.service-card { border-right-color:rgba(23,23,23,.22); }
.service-number, .service-card a { color:#6f222a; }
.scope-list span { border-color:rgba(12,68,68,.35); color:#0c4444; }
.workflow-line { background:#9dad9f; }
.workflow-line::after { background:linear-gradient(90deg,transparent,#6f222a,transparent); }
.step-dot { border-color:#6f222a; background:#e8eee8; box-shadow:0 0 0 6px #e8eee8; }
@keyframes workflowDot { 0%,20%,100% { background:#e8eee8; transform:scale(1); } 6%,14% { background:#6f222a; transform:scale(1.28); } }
.site-footer { background:#ecece8; color:#171717; }
.footer-brand, .footer-link { color:#171717; }
.footer-brand span, .footer-link span { color:#6f222a; }
.footer-top p, .footer-contact { color:#59635d; }
.footer-grid, .footer-group + .footer-group, .footer-bottom { border-color:rgba(23,23,23,.2); }
.social-links a { border-color:rgba(12,68,68,.4); color:#0c4444; }
.social-links a:hover { color:#fff; background:#6f222a; }
.footer-bottom { color:#68746d; }
.site-footer { background:#0c4444; color:#fff; }
.footer-brand, .footer-link, .footer-top p, .footer-contact, .footer-bottom { color:#fff; }
.footer-brand span, .footer-link span, .footer-label { color:#d0b28e; }
.footer-grid, .footer-group + .footer-group, .footer-bottom { border-color:rgba(255,255,255,.3); }
.social-links a { border-color:rgba(255,255,255,.55); color:#fff; }
.social-links a:hover { color:#0c4444; background:#d0b28e; }
.eyebrow { margin:0 0 21px; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.16em; }
h1,h2 { font-family:"Playfair Display",Georgia,serif; font-weight:500; }
h1 { margin:0; max-width:700px; font-size:clamp(64px,8vw,128px); line-height:.9; letter-spacing:-.065em; }
.hero-copy { max-width:330px; margin:32px 0 26px; font-size:15px; line-height:1.55; }
.hero-link { color:var(--ink); text-underline-offset:6px; font-size:13px; }
.hero-link span { margin-left:5px; font-size:16px; }
.placeholder-section { min-height:58vh; display:grid; align-content:center; justify-items:center; padding:60px 20px; background:var(--paper); text-align:center; }
.placeholder-section.dark { color:#f3f2eb; background:#293a32; }
.placeholder-section p { margin:0; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.18em; }
.placeholder-section h2 { margin:18px 0 25px; font-size:clamp(48px,7vw,90px); letter-spacing:-.06em; }
.placeholder-section a { color:inherit; font-size:13px; text-underline-offset:5px; }
.account-section { min-height:100svh; padding:132px 20px 70px; display:grid; place-items:center; background:#d9dbd2; }
.account-card { width:min(100%,440px); padding:44px; background:var(--paper); box-shadow:0 22px 60px rgba(27,33,30,.13); }
.account-card h2 { margin:0 0 34px; font-size:48px; letter-spacing:-.055em; }
form { display:grid; gap:9px; }
label { font-size:12px; }
input { width:100%; margin-bottom:12px; padding:13px 0; border:0; border-bottom:1px solid #9ea39a; background:transparent; color:var(--ink); font:14px inherit; outline:none; }
input:focus { border-color:var(--ink); }
button { margin-top:9px; padding:15px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); font:500 13px "DM Sans",sans-serif; cursor:pointer; transition:background .2s,color .2s; }
button:hover { background:transparent; color:var(--ink); }
.registration { margin:25px 0 0; font-size:13px; text-align:center; }
.registration a { color:var(--ink); text-underline-offset:4px; }
.register-message { margin-top:19px; font-size:12px; line-height:1.45; text-align:center; color:#59615b; }
@media (max-width:640px) { :root { --header-h:72px; } .site-header { height:72px; padding:0 20px; grid-template-columns:auto 1fr auto; } .brand { font-size:12px; letter-spacing:.12em; } .primary-nav { justify-self:end; gap:14px; margin-right:16px; } .primary-nav a { font-size:11px; } .account-link { width:33px; height:33px; } .hero { padding:clamp(145px,24vh,180px) 28px 60px; } h1 { font-size:clamp(58px,16vw,82px); } .account-card { padding:33px 25px; } }
@media (max-width:520px) {
  /* Nav wraps to a second row here, so the header is taller; keep the offset
     variable in step or content on the auth/admin pages hides beneath it. */
  :root { --header-h:106px; }
  .site-header { padding:0 16px; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .primary-nav { grid-column:1 / -1; grid-row:2; justify-self:center; width:100%; justify-content:center; margin:0; padding:0 0 10px; gap:18px; }
  .site-header { height:106px; align-content:center; }
  .brand { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .hero { min-height:100svh; padding-top:160px; }
  .hero-content { width:100%; padding:38px 0 24px; }
  .hero-content h1 { font-size:clamp(25px,8.3vw,40px); letter-spacing:-.04em; }
  .hero-actions { margin-top:26px; gap:9px; }
  .hero-button { padding:12px 14px; font-size:11px; }
}
/* Sub-page headers (sensory catalog, checkout review) carry brand · back ·
   profile and have no wrapping nav. Keep a stable three-column layout on every
   mobile width with the back link centered, so it never collides with the
   profile icon (the base ≤520 rule collapses .site-header to two columns for
   the index nav, which these must opt out of). */
@media (max-width:640px) {
  .package-header, .checkout-header, .auth-header { grid-template-columns:1fr auto 1fr; }
  .package-header .catalog-back, .checkout-header .catalog-back { justify-self:center; text-align:center; }
}
@media (max-width:520px) {
  .package-header, .checkout-header, .auth-header { grid-template-columns:1fr auto 1fr; height:72px; align-content:center; }
  /* Logo only on the narrowest screens so the back link sits truly centred
     rather than being pushed off-centre by the wider wordmark. */
  .package-header .brand span, .checkout-header .brand span, .auth-header .brand span { display:none; }
  .package-header .catalog-back, .checkout-header .catalog-back, .auth-header .header-home-link { font-size:12px; }
}

.auth-page { min-height:calc(100svh - var(--header-h)); padding:calc(var(--header-h) + 30px) 20px 56px; display:grid; place-items:center; background:#f5f5f3; }
.auth-card { width:min(100%, 450px); padding:40px 44px 36px; background:#fff; border:1px solid rgba(23,23,23,.1); box-shadow:0 20px 55px rgba(23,23,23,.09); }
.auth-card h1 { margin:0 0 28px; font-size:50px; line-height:1; }
.auth-tabs { display:flex; gap:24px; margin-bottom:26px; border-bottom:1px solid #deded9; }
.auth-tab { margin:0; padding:0 0 13px; border:0; border-bottom:1px solid transparent; background:transparent; color:#888; font:500 14px "DM Sans",sans-serif; cursor:pointer; }
.auth-tab:hover { color:var(--ink); background:transparent; }
.auth-tab.active { color:var(--ink); border-bottom-color:var(--ink); }
.auth-panel[hidden] { display:none; }
.form-intro { margin:0 0 22px; color:#656565; font-size:13px; }
.auth-panel form { gap:8px; }
.auth-panel input, .auth-panel textarea { width:100%; margin:0 0 12px; padding:12px 0; border:0; border-bottom:1px solid #bdbdb7; background:transparent; color:var(--ink); font:14px inherit; outline:none; }
.auth-panel textarea { min-height:58px; resize:vertical; }
.auth-panel input:focus, .auth-panel textarea:focus { border-color:var(--ink); }
.primary-button { width:100%; margin-top:10px; }
.otp-wrap.hidden { display:none; }
.demo-note { margin:-5px 0 8px; color:#777; font-size:11px; }
.form-message { min-height:18px; margin:17px 0 0; color:#555; font-size:12px; line-height:1.45; }
.form-message.error { color:#a0453f; }
.form-message.success { color:#28734a; }
.switch-message { margin:26px 0 0; color:#666; font-size:12px; text-align:center; }
.inline-button { padding:0; border:0; background:none; color:var(--ink); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.inline-button:hover { color:#555; background:none; }
@media (max-width:640px) { .auth-page { min-height:calc(100svh - var(--header-h)); padding:calc(var(--header-h) + 20px) 16px 30px; } .auth-card { padding:32px 25px 28px; } .auth-card h1 { font-size:43px; } }
@media (max-width:720px) { .about-section { padding:70px 24px 86px; } .about-intro { display:block; margin-bottom:48px; } .about-intro .eyebrow { margin-bottom:22px; } .about-lede { margin-top:28px; } .founder-grid { grid-template-columns:1fr; gap:52px; } }
@media (max-width:900px) { .sensory-section { min-height:auto; padding:80px 7vw 90px; gap:44px; } .sensory-top { grid-template-columns:1fr; gap:36px; } .sensory-copy { max-width:620px; } .workflow { margin-top:0; } }
@media (max-width:600px) { .sensory-section { padding:70px 24px 80px; } .workflow { grid-template-columns:1fr; gap:27px; padding:0 0 0 6px; } .workflow-line { top:11px; bottom:11px; left:17px; right:auto; width:1px; height:auto; } .workflow-line::after { inset:0; width:100%; height:25%; background:linear-gradient(180deg,transparent,#293a32,transparent); background-size:100% 25%; animation-name:workflowLineGlowVertical; } .workflow-step { display:grid; grid-template-columns:22px 1fr; column-gap:16px; align-items:start; } .step-dot { grid-column:1; grid-row:1; margin:0; } .step-number { grid-column:2; grid-row:1; margin:0 0 6px; } .workflow-step h3 { grid-column:2; grid-row:2; } .workflow-step p { grid-column:2; grid-row:3; margin-bottom:0; } }
@keyframes workflowLineGlowVertical { 0%,100% { background-position:0 -25%; opacity:.2; } 50% { background-position:0 100%; opacity:.8; } }
.turnkey-section { min-height:100vh; padding:clamp(80px,10vw,145px) 7vw; background:#fffaf3; color:#0c4444; }
.turnkey-heading { display:grid; grid-template-columns:1fr 1fr; column-gap:8vw; align-items:end; max-width:1200px; margin:0 auto 64px; }
.turnkey-heading .eyebrow { grid-column:1 / -1; margin-bottom:22px; color:#b1c0b3; }
.turnkey-heading h2 { margin:0; font-size:clamp(55px,7vw,102px); line-height:.83; letter-spacing:-.065em; }
.turnkey-heading h2 em { color:#b7cbb9; font-weight:500; }
.turnkey-heading > p:last-child { max-width:390px; margin:0; color:#c4cec5; font-size:15px; line-height:1.65; }
.turnkey-intro-action { max-width:390px; }
.turnkey-intro-action > p { margin:0 0 25px; color:#59635d; font-size:15px; line-height:1.65; }
.turnkey-intro-action > p.turnkey-lead { margin:0 0 16px; color:#6f222a; font-size:16px; font-weight:500; line-height:1.55; }
.turnkey-cta { display:inline-flex; align-items:center; gap:20px; padding:14px 18px; border:1px solid #6f222a; color:#6f222a; font-size:12px; text-decoration:none; transition:background .2s,color .2s; }
.turnkey-cta:hover { color:#fff; background:#6f222a; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); max-width:1200px; margin:0 auto; border-top:1px solid rgba(244,243,237,.35); border-bottom:1px solid rgba(244,243,237,.35); }
.service-card { position:relative; min-height:270px; padding:27px 28px 31px 0; border-right:1px solid rgba(244,243,237,.35); }
.service-card + .service-card { padding-left:28px; }
.service-card:last-child { border-right:0; }
.service-number { color:#b1c0b3; font:10px "DM Mono",monospace; letter-spacing:.14em; }
.service-card h3 { margin:42px 0 17px; font-family:"Playfair Display",Georgia,serif; font-size:clamp(25px,3vw,38px); line-height:1; font-weight:500; letter-spacing:-.045em; }
.service-card p { max-width:250px; margin:0; color:#c4cec5; font-size:13px; line-height:1.55; }
.service-card a { position:absolute; right:27px; bottom:29px; color:#f4f3ed; font-size:22px; text-decoration:none; transition:transform .2s; }
.service-card a:hover { transform:translate(4px,-4px); }
.scope-block { max-width:1200px; margin:58px auto 0; }
.scope-block .eyebrow { margin-bottom:24px; color:#b1c0b3; }
.scope-list { display:flex; flex-wrap:wrap; gap:9px; }
.scope-list span { padding:11px 15px; border:1px solid rgba(244,243,237,.35); border-radius:30px; color:#e2e8e1; font-size:12px; }
@media (max-width:900px) { .turnkey-section { min-height:auto; padding:80px 7vw 90px; } .turnkey-heading { display:block; margin-bottom:52px; } .turnkey-heading > p:last-child { margin-top:28px; max-width:600px; } .turnkey-intro-action { margin-top:28px; max-width:600px; } .service-card { min-height:245px; } }
@media (max-width:600px) { .service-grid { grid-template-columns:1fr; } .service-card, .service-card + .service-card { min-height:230px; padding:25px 0; border-right:0; border-bottom:1px solid rgba(244,243,237,.35); } .service-card:last-child { border-bottom:0; } .service-card h3 { margin-top:32px; } .service-card a { right:0; bottom:25px; } .scope-block { margin-top:48px; } }
.site-footer { padding:72px 7vw 27px; color:#0c4444; background:#d0b28e; }
.site-header { background:rgba(255,250,243,.92); border-bottom-color:rgba(12,68,68,.2); }
.hero-button { border-color:#d0b28e; color:#fffaf3; }
.hero-button:hover { color:#0c4444; background:#d0b28e; }
.hero-button-light { color:#6f222a; background:#d0b28e; }
.hero-button-light:hover { color:#6f222a; background:transparent; }
.turnkey-heading .eyebrow, .scope-block .eyebrow, .footer-label { color:#6f222a; }
.turnkey-heading h2 em { color:#6f222a; }
.turnkey-heading > p:last-child, .service-card p, .footer-contact { color:#0c4444; }
.service-grid { border-color:rgba(12,68,68,.3); }
.service-card { border-right-color:rgba(12,68,68,.3); }
.service-card + .service-card { border-left-color:rgba(12,68,68,.3); }
.service-number, .service-card a, .footer-link span { color:#6f222a; }
.scope-list span { border-color:rgba(12,68,68,.3); color:#0c4444; }
.footer-brand, .footer-link { color:#0c4444; }
.footer-brand span { color:#6f222a; }
.footer-top p { color:#0c4444; }
.footer-grid, .footer-group + .footer-group, .footer-bottom { border-color:rgba(12,68,68,.3); }
.social-links a { border-color:rgba(12,68,68,.45); color:#0c4444; }
.social-links a:hover { color:#fffaf3; background:#6f222a; }
.footer-bottom { color:#0c4444; }
.workflow-line { background:#6f222a; }
.workflow-line::after { background:linear-gradient(90deg,transparent,#0c4444,transparent); }
.step-dot { border-color:#6f222a; background:#d0b28e; box-shadow:0 0 0 6px #d0b28e; }
@keyframes workflowDot { 0%,20%,100% { background:#d0b28e; transform:scale(1); } 6%,14% { background:#6f222a; transform:scale(1.28); } }
@keyframes workflowLineGlow { 0%,100% { background-position:-25% 0; opacity:.2; } 50% { background-position:100% 0; opacity:.8; } }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; max-width:1200px; margin:0 auto 72px; }
.footer-brand { color:#f0f1eb; font-size:16px; font-weight:600; letter-spacing:.18em; text-decoration:none; }
.footer-brand span { color:#a5bea9; }
.footer-top p { margin:0; color:#9eaca1; font-family:"Playfair Display",Georgia,serif; font-size:22px; line-height:1.1; text-align:right; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; max-width:1200px; margin:0 auto; padding:28px 0 68px; border-top:1px solid rgba(240,241,235,.22); }
.footer-group { display:flex; flex-direction:column; align-items:flex-start; }
.footer-group + .footer-group { padding-left:8vw; border-left:1px solid rgba(240,241,235,.22); }
.footer-label { margin:0 0 28px; color:#9eaca1; font:10px "DM Mono",monospace; letter-spacing:.14em; }
.footer-link { display:flex; justify-content:space-between; width:min(100%,220px); margin-bottom:15px; color:#f0f1eb; font-size:14px; text-decoration:none; }
.footer-link span { color:#a5bea9; transition:transform .2s; }
.footer-link:hover span { transform:translate(3px,-3px); }
.social-links { display:flex; gap:13px; margin-bottom:20px; }
.social-links a { display:grid; width:34px; height:34px; place-items:center; border:1px solid rgba(240,241,235,.4); border-radius:50%; color:#f0f1eb; transition:background .2s,color .2s; }
.social-links a:hover { color:#17221d; background:#f0f1eb; }
.social-links svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.footer-contact { margin:0; color:#9eaca1; font-size:12px; line-height:1.7; }
.footer-bottom { display:flex; justify-content:space-between; max-width:1200px; margin:0 auto; padding-top:20px; border-top:1px solid rgba(240,241,235,.22); color:#718078; font:10px "DM Mono",monospace; letter-spacing:.03em; }
@media (max-width:700px) { .site-footer { padding:58px 24px 24px; } .footer-top { display:block; margin-bottom:52px; } .footer-top p { margin-top:20px; text-align:left; } .footer-grid { grid-template-columns:1fr; gap:42px; padding-bottom:48px; } .footer-group + .footer-group { padding:42px 0 0; border-top:1px solid rgba(240,241,235,.22); border-left:0; } .footer-label { margin-bottom:22px; } .footer-bottom { display:block; line-height:2; } .footer-bottom span { display:block; } }
.site-footer { background:#0c4444 !important; color:#fff !important; }
.site-footer .footer-brand, .site-footer .footer-link, .site-footer .footer-top p, .site-footer .footer-contact, .site-footer .footer-bottom { color:#fff !important; }
/* On phones the browser auto-links the footer number/email into a default-blue
   <a>. Keep them the footer's own text colour instead. */
.footer-contact a { color: inherit !important; text-decoration: none; }
.site-footer .footer-brand span, .site-footer .footer-link span, .site-footer .footer-label { color:#d0b28e !important; }
.site-footer .footer-grid, .site-footer .footer-group + .footer-group, .site-footer .footer-bottom { border-color:rgba(255,255,255,.3); }
.site-footer .social-links a { border-color:rgba(255,255,255,.55); color:#fff; }
.site-footer .social-links a:hover { color:#0c4444; background:#d0b28e; }

/* Registration form: textarea matches the underlined input treatment */
.auth-card textarea { width:100%; margin-bottom:12px; padding:13px 0; border:0; border-bottom:1px solid #9ea39a; background:transparent; color:var(--ink); font:14px inherit; line-height:1.5; outline:none; resize:vertical; }
.auth-card textarea:focus { border-color:var(--ink); }
.label-hint { color:#8b8f88; font-weight:400; text-transform:none; letter-spacing:0; }

/* Catalog admin entry point, shown only to staff accounts */
/* Scoped to .account-dropdown so these win over context rules like
   `.package-topbar a { color:#fff }`, which is more specific than a lone
   class and otherwise renders these links white-on-white until hover. */
.account-dropdown .account-admin-link { display:block; margin-bottom:8px; padding:9px 10px; border:1px solid #0c4444; color:#0c4444; font:11px "DM Sans",sans-serif; text-align:center; text-decoration:none; }
.account-dropdown .account-admin-link:hover { color:#fff; background:#0c4444; }

/* State dropdown on the registration card, matching the underlined inputs */
.auth-card select { width:100%; margin-bottom:12px; padding:13px 0; border:0; border-bottom:1px solid #9ea39a; background:transparent; color:var(--ink); font:14px inherit; outline:none; cursor:pointer; }
.auth-card select:focus { border-color:var(--ink); }

/* ===========================================================================
   UI REFINEMENT LAYER — calmer, softer, more consistent (an "Apple-like" pass).
   Appended last so it wins by source order without rewriting existing rules.
   Shape, elevation and motion only — no copy or colour-role changes.
   ========================================================================= */
:root{
  --r-btn:999px; --r-card:18px; --r-media:16px;
  --shadow-soft:0 1px 2px rgba(12,68,68,.05), 0 12px 30px rgba(12,68,68,.08);
  --shadow-hover:0 22px 48px rgba(12,68,68,.15);
  --ease-calm:cubic-bezier(.2,.7,.2,1);
}
/* One calm pill shape for every call to action */
.hero-button, .sensory-cta, .turnkey-cta,
.account-card button, .auth-card button, .primary-button{
  border-radius:var(--r-btn);
  transition:background .25s var(--ease-calm), color .25s var(--ease-calm),
             transform .25s var(--ease-calm), box-shadow .25s var(--ease-calm);
}
@media (prefers-reduced-motion:no-preference){
  .hero-button:hover, .sensory-cta:hover, .turnkey-cta:hover{ transform:translateY(-1px); }
}
/* Soft, rounded surfaces */
.sensory-feature{ border-radius:14px; }
.catalog-features .sensory-feature{ border-radius:var(--r-card); box-shadow:var(--shadow-soft); }
.catalog-features .sensory-feature:hover{ box-shadow:var(--shadow-hover); }
.founder-image-wrap{ border-radius:var(--r-media); }
.account-card, .auth-card{ border-radius:var(--r-card); }