@import url("../fonts/fonts.css");

/* ==========================================================================
   MAISON LUMIÉRE — "Atelier Blanc · Sunlit"
   Light, luxury-tropical. The island arrives through drifting palm shadow
   and drawn botanicals, never through turquoise.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* surfaces */
  --canvas:#F7F4ED;
  --surface:#FFFDF8;
  --sunk:#EFE9DD;
  --sand:#E3D9C7;

  /* ink — sea grape, a warm green-black */
  --ink:#16201A;
  --ink-2:#4A5750;
  --ink-3:#63706A;

  /* rules */
  --rule:#DFD8CA;
  --rule-soft:#EBE5D9;
  --rule-strong:#C6BCA8;

  /* accent — conch. -deep passes AA on canvas and under white. */
  --accent:#A8483A;
  --accent-bright:#C05B4A;
  --accent-wash:#F6E9E4;
  --accent-line:#E0BEB4;

  /* botanical + metal, decoration only */
  --palm:#5E7A63;
  --palm-soft:#8FA391;
  --brass:#A8834A;

  /* type */
  --display:"Instrument Serif",Didot,"Bodoni MT",Georgia,serif;
  --body:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --script:"Allura",cursive;

  /* rhythm */
  --gutter:clamp(20px,5vw,64px);
  --measure:66ch;
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;
  --section:clamp(64px,9vw,124px);

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms;
  --t:320ms;
  --t-slow:600ms;

  --radius:2px;
  --shadow-lift:0 1px 2px rgba(22,32,26,.04),0 8px 28px -12px rgba(22,32,26,.16);
  --shadow-deep:0 2px 6px rgba(22,32,26,.05),0 28px 60px -28px rgba(22,32,26,.26);

  --z-env:0; --z-base:1; --z-sticky:40; --z-nav:60; --z-drawer:80; --z-top:100;
}

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

/* The browser's own [hidden]{display:none} lives in the UA stylesheet, and
   ANY author rule that sets display beats it regardless of specificity. So
   `.scent{display:flex}` kept filtered-out cards on screen even though their
   hidden property was true. Anything toggled with .hidden needs this. */
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
html,body{
  overflow-x:hidden;   /* fallback first */
  overflow-x:clip;     /* clip cannot be scrolled programmatically */
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* --- 2. The environment: drifting palm shadow ---------------------------
   One fixed layer behind everything. Transform-only animation so it lives
   on the compositor and never touches layout. No background-attachment,
   no backdrop-filter, no blur at runtime — the blur is baked into the PNG.
   ------------------------------------------------------------------------ */
.env{
  position:fixed;
  inset:-25vmax;
  z-index:var(--z-env);
  pointer-events:none;
  overflow:hidden;
}
.env__layer{
  position:absolute;
  inset:0;
  background-repeat:repeat;
  will-change:transform;
  backface-visibility:hidden;
}
.env__layer--near{
  background-image:url("../img/frond-near.png");
  background-size:min(1400px,150vmax) auto;
  opacity:.62;
  animation:drift-near 132s var(--ease) infinite alternate;
}
.env__layer--far{
  background-image:url("../img/frond-far.png");
  background-size:min(1100px,120vmax) auto;
  opacity:.5;
  animation:drift-far 187s var(--ease) infinite alternate;
  animation-delay:-40s;
}
.env__grain{
  position:absolute;inset:0;
  background-image:url("../img/grain.png");
  background-size:180px 180px;
  opacity:.32;
  mix-blend-mode:multiply;
}
@keyframes drift-near{
  from{transform:translate3d(-2.5%,-1.5%,0) rotate(-.6deg) scale(1.02)}
  to  {transform:translate3d(2.5%,2%,0)    rotate(.8deg)  scale(1.06)}
}
@keyframes drift-far{
  from{transform:translate3d(2%,1.5%,0)   rotate(.7deg)  scale(1.05)}
  to  {transform:translate3d(-2%,-2%,0)   rotate(-.5deg) scale(1.01)}
}

/* Everything above the environment */
.page{position:relative;z-index:var(--z-base)}

/* --- 3. Typography ------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
.t-display{font-size:clamp(2.9rem,8.4vw,6.4rem);line-height:.98;letter-spacing:-.025em}
.t-h1{font-size:clamp(2.3rem,5.6vw,4.2rem)}
.t-h2{font-size:clamp(1.85rem,3.9vw,3rem)}
.t-h3{font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.2}
.t-h4{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.25}

em,.t-italic{font-style:italic}

p{margin:0 0 1.1em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

.lede{
  font-size:clamp(1.08rem,1.7vw,1.32rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:56ch;
}
.small{font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.tiny{font-size:.82rem;line-height:1.55;color:var(--ink-3)}

.kicker{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 var(--sp-3);
}
.kicker::before{
  content:"";
  width:26px;height:1px;
  background:var(--accent);
  flex:none;
}
.kicker--plain::before{display:none}

.script{font-family:var(--display);font-style:italic;font-weight:400;line-height:1.05}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-bright)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

::selection{background:var(--accent-wash);color:var(--ink)}

/* --- 4. Layout ---------------------------------------------------------- */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:860px}
.wrap--wide{max-width:1440px}

.section{padding-block:var(--section);position:relative}
.section--sunk{background:linear-gradient(180deg,transparent,var(--sunk) 12%,var(--sunk) 88%,transparent)}
.section--tight{padding-block:clamp(48px,7vw,96px)}

/* `.defer` deliberately does NOT use content-visibility:auto. It was tried
   and removed: the placeholder height never matches the real section, so the
   scrollbar and scroll position jump as sections render in. On a page this
   size the paint saving is not worth losing smooth scrolling, which is the
   whole point of the build. The hook stays for per-section tuning. */
.defer{}

.rule{height:1px;background:var(--rule);border:0;margin:0}
.rule--soft{background:var(--rule-soft)}

.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

.section-head{margin-bottom:clamp(36px,5vw,64px);max-width:64ch}
.section-head .lede{margin-top:var(--sp-3)}

/* --- 5. The badge (her real circular mark) ------------------------------ */
.badge{
  --size:132px;
  width:var(--size);height:var(--size);
  border:1px solid var(--ink);
  border-radius:50%;
  display:grid;
  /* grid-template-columns:100% is load-bearing. place-content:center sizes
     the track to max-content, so the wordmark overflowed the circle instead
     of wrapping inside it. */
  grid-template-columns:100%;
  align-content:center;
  justify-items:center;
  text-align:center;
  gap:4px;
  padding:11px;
  flex:none;
  overflow:hidden;
  color:var(--ink);
}
.badge__name{
  font-family:var(--display);
  font-size:calc(var(--size)*.26);
  line-height:.94;
  letter-spacing:.01em;
  max-width:100%;
}
.badge__line{
  font-family:var(--mono);
  font-size:calc(var(--size)*.062);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.badge__est{
  font-family:var(--mono);
  font-size:calc(var(--size)*.052);
  letter-spacing:.2em;
  color:var(--ink-3);
}
.badge--sm{--size:84px}
.badge--lg{--size:180px}
.badge--brass{border-color:var(--brass);color:var(--brass)}
.badge--brass .badge__line,.badge--brass .badge__est{color:var(--brass);opacity:.82}

/* --- 6. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-family:var(--mono);
  font-size:.73rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t) var(--ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:#fff;box-shadow:0 10px 26px -14px rgba(168,72,58,.85)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(22,32,26,.03);color:var(--ink)}

.btn--quiet{background:transparent;color:var(--ink-2);border-color:transparent;padding-inline:0}
.btn--quiet:hover{color:var(--accent)}

.btn--wa{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn--wa:hover{background:#22312a;border-color:#22312a;color:var(--surface)}

.btn--block{width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}

.btn__icon{width:16px;height:16px;flex:none}

/* Text link with an animated rule under it */
.link-rule{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding-block:6px;
  position:relative;
}
.link-rule::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);
  transform:scaleX(1);transform-origin:right;
  transition:transform var(--t) var(--ease);
}
.link-rule:hover{color:var(--accent)}
.link-rule:hover::after{background:var(--accent);transform:scaleX(0);transform-origin:right}
.link-rule__arrow{transition:transform var(--t) var(--ease)}
.link-rule:hover .link-rule__arrow{transform:translateX(4px)}

/* --- 7. Header + navigation --------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:var(--z-nav);
  background:transparent;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(247,244,237,.9);
  border-bottom-color:var(--rule-soft);
  box-shadow:0 1px 20px -12px rgba(22,32,26,.4);
}
@supports (backdrop-filter:blur(8px)){
  .hdr.is-stuck{background:rgba(247,244,237,.72);backdrop-filter:blur(14px) saturate(1.1)}
}
.hdr__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:72px;
}
.hdr__brand{
  display:flex;align-items:baseline;gap:10px;
  text-decoration:none;color:var(--ink);
  padding-block:8px;
}
.hdr__brand-name{font-family:var(--display);font-size:1.85rem;line-height:1;letter-spacing:.01em}
.hdr__brand-sub{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:520px){.hdr__brand-sub{display:none}}

.nav{display:none}
@media (min-width:960px){
  .nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
}
.nav__link{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);
  padding:10px 2px;position:relative;
  transition:color var(--t) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--ink)}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--ink)}

.hdr__actions{display:flex;align-items:center;gap:var(--sp-2)}
.hdr__cta{display:none}
@media (min-width:960px){.hdr__cta{display:inline-flex}}

.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  background:none;border:1px solid var(--rule-strong);border-radius:var(--radius);
  cursor:pointer;color:var(--ink);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
  touch-action:manipulation;
}
.burger:hover{border-color:var(--ink)}
@media (min-width:960px){.burger{display:none}}
.burger__bars{display:block;width:19px;height:11px;position:relative}
.burger__bars span{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease);
}
.burger__bars span:nth-child(1){top:0}
.burger__bars span:nth-child(2){top:50%;margin-top:-.75px}
.burger__bars span:nth-child(3){bottom:0}
.burger[aria-expanded="true"] .burger__bars span:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bars span:nth-child(3){transform:translateY(-4.75px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:var(--canvas);
  display:flex;flex-direction:column;
  padding:var(--gutter);
  padding-top:max(var(--gutter),env(safe-area-inset-top));
  padding-bottom:max(var(--gutter),env(safe-area-inset-bottom));
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform var(--t-slow) var(--ease-out),visibility 0s linear var(--t-slow);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.drawer.is-open{transform:translateY(0);visibility:visible;transition:transform var(--t-slow) var(--ease-out),visibility 0s}
.drawer__head{display:flex;align-items:center;justify-content:space-between;min-height:72px;margin-bottom:var(--sp-4)}
.drawer__close{
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule-strong);border-radius:var(--radius);
  cursor:pointer;color:var(--ink);font-size:1.2rem;line-height:1;
}
.drawer__nav{display:flex;flex-direction:column;gap:2px;flex:1}
.drawer__link{
  font-family:var(--display);font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.16;
  text-decoration:none;color:var(--ink);
  padding:9px 0;
  display:flex;align-items:baseline;gap:14px;
  border-bottom:1px solid var(--rule-soft);
  opacity:0;transform:translateY(14px);
}
.drawer.is-open .drawer__link{
  animation:drawer-in var(--t-slow) var(--ease-out) forwards;
  animation-delay:calc(70ms + var(--i,0)*46ms);
}
@keyframes drawer-in{to{opacity:1;transform:translateY(0)}}
.drawer__link-n{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--ink-3)}
.drawer__link[aria-current="page"]{color:var(--accent)}
.drawer__foot{margin-top:var(--sp-5);display:grid;gap:var(--sp-2)}

/* --- 8. Skip link -------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-top);
  background:var(--ink);color:var(--surface);
  padding:14px 22px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0;color:var(--surface)}

/* --- 9. Hero ------------------------------------------------------------ */
.hero{
  position:relative;
  padding-top:clamp(32px,5vw,64px);
  padding-bottom:clamp(40px,5vw,72px);
  min-height:min(76svh,760px);
  display:flex;align-items:center;
}
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(36px,5vw,64px);
  align-items:center;
  width:100%;
}
@media (min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.hero__eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:var(--sp-4);
}
/* The headline carries its own line break, so balancing fights it and leaves
   a stray indented last line. Let the authored break do the work. */
.hero__title{white-space:pre-line;text-wrap:normal;font-size:clamp(2.7rem,6.6vw,5.2rem)}
.hero__title em{color:var(--accent);font-style:italic}
.hero__sub{margin-top:var(--sp-4);max-width:44ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:clamp(24px,3vw,36px)}
.hero__figure{position:relative;justify-self:center;width:100%;max-width:520px}
.hero__img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow-deep);
  background:var(--sunk);
}
.hero__badge{
  position:absolute;right:-14px;bottom:-26px;
  background:var(--surface);
  box-shadow:var(--shadow-lift);
}
@media (max-width:600px){
  .hero__badge{--size:96px;right:-6px;bottom:-18px}
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  margin-top:0;
  padding-top:var(--sp-4);
  border-top:1px solid var(--rule);
}
.hero__meta div{display:grid;gap:3px}
.hero__meta dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.hero__meta dd{margin:0;font-family:var(--display);font-size:1.3rem}

/* --- 10. Scent card — built from her real jar label --------------------- */
.scent-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
/* The home page shows exactly three, so give them three columns rather than
   letting auto-fill leave a hole in a four-column track. */
@media (min-width:900px){.scent-grid--3{grid-template-columns:repeat(3,1fr)}}

.scent{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  text-decoration:none;color:var(--ink);
  overflow:hidden;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);
}
.scent:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-lift);transform:translateY(-3px);color:var(--ink)}
.scent__media{
  position:relative;aspect-ratio:4/5;background:var(--sunk);overflow:hidden;
}
.scent__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-slow) var(--ease-out);
}
.scent:hover .scent__media img{transform:scale(1.035)}
.scent__media--empty{display:grid;place-content:center;gap:8px;text-align:center;padding:var(--sp-3)}

/* The label: her real packaging, redrawn */
.label{
  border:1px solid currentColor;
  padding:14px 16px 12px;
  text-align:center;
  display:grid;gap:5px;
  color:var(--ink);
  background:var(--surface);
}
.label__house{
  font-family:var(--mono);font-size:.54rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-2);
}
.label__mono{
  font-family:var(--display);font-size:2.6rem;line-height:.86;letter-spacing:.02em;
}
.label__name{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
}
.label__foot{
  font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.label--float{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  min-width:64%;
  box-shadow:0 6px 22px -14px rgba(22,32,26,.5);
}

.scent__body{padding:var(--sp-3);display:flex;flex-direction:column;gap:10px;flex:1}
.scent__name{font-family:var(--display);font-size:1.45rem;line-height:1.05}
.scent__notes{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.6;
}
.scent__foot{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--rule-soft);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.scent__price{font-family:var(--display);font-size:1.1rem}
.scent__price span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 9px;border:1px solid var(--rule);border-radius:100px;color:var(--ink-2);
  background:var(--surface);
}
.tag--out{color:var(--ink-3);border-color:var(--rule)}
.tag--accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 34%,transparent);background:var(--accent-wash)}
.tag--palm{color:#3F5745;border-color:color-mix(in srgb,var(--palm) 38%,transparent);background:color-mix(in srgb,var(--palm) 9%,var(--surface))}
.tag--float{position:absolute;top:12px;left:12px;z-index:2}

/* --- 10b. Breadcrumbs ---------------------------------------------------- */
.crumbs{padding-top:22px}
.crumbs ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:0 8px;margin:0;padding:0;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);
}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs a{color:inherit;text-decoration:none;padding-block:8px;transition:color var(--t) var(--ease)}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs__here{color:var(--ink)}
.crumbs__sep{opacity:.6}
@media (pointer:coarse){.crumbs a{padding-block:15px}}

/* --- 10c. Size picker ----------------------------------------------------
   Real radios, visually replaced. The input keeps keyboard and screen-reader
   behaviour; the box is the visible control. */
.picker{margin-top:var(--sp-4)}
.picker__lbl{margin:0 0 var(--sp-2)}
.picker__opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
.opt{position:relative;display:block;cursor:pointer}
.opt input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;
}
.opt__box{
  display:flex;flex-direction:column;gap:3px;
  min-height:76px;padding:13px 15px;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.opt__l{font-size:.95rem;line-height:1.2}
.opt__p{
  font-family:var(--display);font-size:1.3rem;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.opt__n{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.opt__n--out{color:var(--accent)}

.opt:hover input:not(:disabled) ~ .opt__box{border-color:var(--rule-strong)}
.opt input:checked ~ .opt__box{
  border-color:var(--ink);
  background:var(--sunk);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.opt input:focus-visible ~ .opt__box{outline:2px solid var(--accent);outline-offset:3px}
.opt.is-out{cursor:not-allowed}
.opt.is-out .opt__box{opacity:.5;background:var(--sunk)}
.opt.is-out .opt__p{text-decoration:line-through;text-decoration-thickness:1px}

/* --- 11. Filters --------------------------------------------------------- */
.filters{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:var(--sp-4);
}
.filter{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  padding:11px 17px;min-height:44px;
  display:inline-flex;align-items:center;
  border:1px solid var(--rule);border-radius:100px;background:var(--surface);
  color:var(--ink-2);cursor:pointer;
  transition:all var(--t) var(--ease);
  touch-action:manipulation;
}
.filter:hover{border-color:var(--ink);color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* --- 12. Editorial blocks ------------------------------------------------ */
.split{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:repeat(2,1fr)}
  .split--wide-left{grid-template-columns:1.15fr .85fr}
  .split--wide-right{grid-template-columns:.85fr 1.15fr}
  .split--flip>*:first-child{order:2}
}
.figure{position:relative;margin:0}
.figure img{width:100%;height:auto;display:block;border-radius:var(--radius);background:var(--sunk)}
.figure figcaption{
  margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);
}
.figure--framed img{border:1px solid var(--rule);box-shadow:var(--shadow-lift)}

.stat-row{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:var(--sp-5)}
.stat{border-top:1px solid var(--rule);padding-top:var(--sp-2)}
.stat__n{display:block;font-family:var(--display);font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1}
.stat__l{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}

/* Numbered steps */
.steps{display:grid;gap:var(--sp-4);counter-reset:step}
@media (min-width:820px){.steps--3{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding-top:var(--sp-3);border-top:1px solid var(--rule)}
.step__n{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--accent);display:block;margin-bottom:12px}
.step__t{font-family:var(--display);font-size:1.4rem;line-height:1.1;margin-bottom:10px}
.step__b{color:var(--ink-2);font-size:.96rem}

/* --- 13. Price table ----------------------------------------------------- */
.prices{width:100%;border-collapse:collapse;margin-top:var(--sp-3)}
.prices caption{text-align:left;font-family:var(--mono);font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);padding-bottom:12px}
.prices th,.prices td{text-align:left;padding:15px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.prices th{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.prices td:first-child{font-family:var(--display);font-size:1.2rem}
.prices .price{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.95rem;font-weight:500}
.prices tr.is-out td{color:var(--ink-3)}
.prices tr.is-out .price{text-decoration:line-through;text-decoration-thickness:1px}

/* --- 14. Accordion (FAQ) ------------------------------------------------- */
.acc{border-top:1px solid var(--rule)}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);
  background:none;border:0;padding:22px 0;min-height:44px;
  font-family:var(--display);font-size:clamp(1.12rem,1.9vw,1.4rem);line-height:1.25;
  text-align:left;color:var(--ink);cursor:pointer;
  transition:color var(--t) var(--ease);
  touch-action:manipulation;
}
.acc__btn:hover{color:var(--accent)}
.acc__sign{position:relative;width:15px;height:15px;flex:none;margin-top:7px}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;background:currentColor;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);
}
.acc__sign::before{left:0;right:0;top:7px;height:1px}
.acc__sign::after{top:0;bottom:0;left:7px;width:1px}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:rotate(90deg);opacity:0}
.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-slow) var(--ease-out);
}
.acc__panel[data-open="true"]{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__panel p{padding-bottom:24px;color:var(--ink-2);max-width:70ch}

/* --- 15. Forms ----------------------------------------------------------- */
.field{display:grid;gap:8px;margin-bottom:var(--sp-3)}
.field label{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.field .hint{font-size:.8rem;color:var(--ink-3);line-height:1.5}
.input,.select,.textarea{
  width:100%;min-height:48px;
  padding:13px 15px;
  font-family:var(--body);font-size:16px;   /* 16px stops iOS zoom-on-focus */
  color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:var(--radius);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.textarea{min-height:132px;resize:vertical;line-height:1.6}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);
}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2363706A' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
  padding-right:42px;
}
.field--error .input,.field--error .select,.field--error .textarea{border-color:var(--accent)}
.err{
  font-size:.82rem;color:var(--accent);display:flex;align-items:center;gap:6px;
}

/* Chip pickers for the bouquet builder */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:11px 17px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--rule-strong);border-radius:100px;background:var(--surface);
  color:var(--ink-2);
  transition:all var(--t) var(--ease);
}
.chip input:hover+span{border-color:var(--ink)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}

/* --- 16. Quote / testimonial -------------------------------------------- */
.quote{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:clamp(24px,3.4vw,38px);display:flex;flex-direction:column;gap:var(--sp-3);
}
.quote__mark{font-family:var(--display);font-size:3rem;line-height:.6;color:var(--accent);opacity:.5}
.quote__text{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.42rem);line-height:1.34}
.quote__who{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-top:auto;
}

/* --- 17. Callout / CTA band --------------------------------------------- */
.cta-band{
  background:var(--ink);color:var(--sand);
  border-radius:var(--radius);
  padding:clamp(36px,6vw,80px) clamp(24px,5vw,72px);
  position:relative;overflow:hidden;
}
.cta-band h2,.cta-band .t-h2{color:var(--surface)}
.cta-band p{color:color-mix(in srgb,var(--sand) 84%,transparent)}
.cta-band .btn--ghost{color:var(--surface);border-color:rgba(255,253,248,.34)}
.cta-band .btn--ghost:hover{border-color:var(--surface);background:rgba(255,253,248,.08);color:var(--surface)}
.cta-band__glow{
  position:absolute;width:min(560px,90%);aspect-ratio:1;
  right:-8%;top:-40%;
  background:radial-gradient(circle,rgba(224,144,74,.19),transparent 66%);
  pointer-events:none;
  animation:breathe 9s ease-in-out infinite;
  animation-delay:-3s;
}
@keyframes breathe{
  0%,100%{opacity:.72;transform:scale(1)}
  50%{opacity:1;transform:scale(1.09)}
}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}

/* --- 18. Footer ---------------------------------------------------------- */
.ftr{
  background:var(--surface);
  border-top:1px solid var(--rule);
  padding-block:clamp(52px,7vw,88px) var(--sp-4);
  margin-top:var(--section);
}
.ftr__top{display:grid;gap:clamp(36px,5vw,56px)}
@media (min-width:860px){.ftr__top{grid-template-columns:1.2fr .9fr .9fr .9fr}}
.ftr__col h3{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--sp-2);font-weight:500;
}
.ftr__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr__list a{
  color:var(--ink-2);text-decoration:none;font-size:.95rem;
  display:inline-block;padding-block:3px;
  transition:color var(--t) var(--ease),transform var(--t) var(--ease);
}
.ftr__list a:hover{color:var(--accent);transform:translateX(3px)}
.ftr__bottom{
  margin-top:clamp(44px,6vw,72px);padding-top:var(--sp-3);
  border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);justify-content:space-between;
  font-size:.8rem;color:var(--ink-3);
}
.ftr__bottom a{color:var(--ink-3)}
.ftr__bottom a:hover{color:var(--accent)}

/* --- 19. Floating WhatsApp ---------------------------------------------- */
.wa-float{
  position:fixed;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:var(--z-sticky);
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--surface);
  border-radius:50%;
  box-shadow:0 6px 24px -8px rgba(22,32,26,.5);
  text-decoration:none;
  transition:transform var(--t) var(--ease),background var(--t) var(--ease),opacity var(--t) var(--ease);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
}
.wa-float.is-in{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{background:#22312a;transform:scale(1.06);color:var(--surface)}
.wa-float svg{width:26px;height:26px}

/* --- 20. Reveal choreography -------------------------------------------- */
/* Start state only applies when JS is present and motion is allowed. */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);
  transition-delay:calc(var(--i,0)*70ms);
}
.js .reveal.is-in{opacity:1;transform:none}

.js .reveal-fade{opacity:0;transition:opacity var(--t-slow) var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.js .reveal-fade.is-in{opacity:1}

/* Once the entrance is done the stagger delay is retired, or every later
   hover on these elements lags by its stagger. Selector repeats .reveal so
   it can actually beat the rule above. */
.js .reveal.is-in.is-settled,.js .reveal-fade.is-in.is-settled{transition-delay:0ms!important}

/* Self-drawing rule */
.js .draw{transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-out)}
.js .draw.is-in{transform:scaleX(1)}

/* Word-by-word rise for display headings */
.js .rise .w{display:inline-block;opacity:0;transform:translateY(.42em)}
.js .rise.is-in .w{
  animation:rise-w 760ms var(--ease-out) forwards;
  animation-delay:calc(var(--wi,0)*54ms);
}
@keyframes rise-w{to{opacity:1;transform:none}}
.rise .w-space{display:inline-block;width:.26em}

/* --- 21. Utilities ------------------------------------------------------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.center{text-align:center}
.center p,.center .lede{margin-inline:auto}
/* A centred caption at full measure leaves a one-word orphan line. */
.center .tiny{max-width:48ch}
.stack-2{display:grid;gap:var(--sp-2)}
.stack-3{display:grid;gap:var(--sp-3)}
.stack-4{display:grid;gap:var(--sp-4)}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
/* A hairline box, not an accent rail. The rail reads as a bolted-on callout
   and is the most recognisable tell going; a tinted hairline matches the
   1px rule every card on this site already uses. */
.notice{
  border:1px solid var(--accent-line);
  background:var(--accent-wash);
  padding:15px 18px;border-radius:var(--radius);
  font-size:.92rem;color:var(--ink-2);
}
.notice strong{color:var(--ink);font-weight:600}
.notice--quiet{border-color:var(--rule);background:var(--sunk)}

/* --- 22. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    animation-delay:0ms!important;
  }
  .env__layer{animation:none}
  /* Final states, since the entrances no longer run */
  .js .reveal,.js .reveal-fade{opacity:1;transform:none}
  .js .draw{transform:scaleX(1)}
  .js .rise .w{opacity:1;transform:none}
  .wa-float{opacity:1;transform:none;pointer-events:auto}
}

/* --- 23. Small screens --------------------------------------------------- */
@media (max-width:600px){
  body{font-size:16.5px}
  .hero{min-height:auto}
  /* Two even columns beat flex-wrap here: wrapped flex items landed on
     different baselines and read as misaligned. */
  .hero__meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-3)}
  /* Buttons at their content width look ragged stacked. Equalise them. */
  .hero__actions{gap:10px}
  .hero__actions .btn{width:100%}
  .cta-band__actions .btn{width:100%}
  .row .btn{flex:1 1 auto}
}
/* Very short viewports: a phone held sideways has no room for decoration */
@media (max-height:520px){
  .wa-float{display:none}
  .hero__badge{display:none}
}

/* Coarse pointers get real touch targets without changing layout.
   a.link-rule is a genuine tap target and must clear 44px; the same class on
   a decorative span inside an already-tappable card does not need to grow. */
@media (pointer:coarse){
  .nav__link,.ftr__list a{padding-block:11px}
  a.link-rule{padding-block:14px}
}

/* --- 24. Print ----------------------------------------------------------- */
@media print{
  .env,.wa-float,.hdr,.drawer,.cta-band__glow{display:none!important}
  body{background:#fff;color:#000}
  .section{padding-block:24px}
}