:root {
  /* ───────── COLOR · neutrals ───────── */
  --color-paper:       #F6F3EC; /* page background ("canvas") */
  --color-white:       #FFFFFF; /* raised surfaces, alt sections */
  --color-sand:        #ECE5D8; /* warm alt section, email capture */
  --color-stone:       #D9D1C2; /* image placeholder fill */
  --color-line:        #E3DDD1; /* hairline borders / dividers (decorative) */
  --color-line-strong: #7F837A; /* input + control borders (3.49:1 on paper) */

  /* ───────── COLOR · ink ───────── */
  --color-ink:   #1C1F1B; /* headings, body */
  --color-ink-2: #41463F; /* secondary text, lead paragraphs */
  --color-muted: #62675F; /* captions, meta, fine print (≥4.63:1 on all light surfaces) */

  /* ───────── COLOR · brand ───────── */
  --color-pine:      #22392F; /* brand primary: CTA fill, inverse sections */
  --color-pine-700:  #182A22; /* primary hover/active */
  --color-pine-100:  #E4EAE3; /* selected chip, subtle brand tint */
  --color-clay:      #A4532C; /* accent: wordmark dot, focus ring, small text links on light */
  --color-clay-300:  #D9A27E; /* accent on dark surfaces (eyebrows, focus ring) */

  /* ───────── COLOR · on dark ───────── */
  --color-on-dark:       #F4F0E7;
  --color-on-dark-muted: #B7C2B8;

  /* ───────── COLOR · semantic ───────── */
  --color-success:    #2F6A46; --color-success-bg: #E6EFE7;
  --color-warn:       #8A5A0B; --color-warn-bg:    #F6ECD6;
  --color-error:      #A33A2B; --color-error-bg:   #F7E5E1;

  /* ───────── COLOR · surface aliases (use these in components) ───────── */
  --surface-page:        var(--color-paper);
  --surface-raised:      var(--color-white);
  --surface-alt:         var(--color-sand);
  --surface-inverse:     var(--color-pine);
  --surface-footer:      var(--color-ink);
  --surface-placeholder: var(--color-stone);
  --focus-ring:          var(--color-clay);
  --focus-ring-on-dark:  var(--color-clay-300);

  /* ───────── TYPE · families ───────── */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text:    "Hanken Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* ───────── TYPE · fluid scale (390px → 1440px) ───────── */
  --fs-display-xl: clamp(2.75rem,  1.7286rem + 4.1905vw, 5.5rem);    /* 44 → 88  hero H1 */
  --fs-display-l:  clamp(2.125rem, 1.5214rem + 2.4762vw, 3.75rem);   /* 34 → 60  section H2 */
  --fs-display-m:  clamp(1.75rem,  1.4714rem + 1.1429vw, 2.5rem);    /* 28 → 40  PDP H1, feature H3 */
  --fs-display-s:  clamp(1.375rem, 1.2357rem + 0.5714vw, 1.75rem);   /* 22 → 28  card / step titles */
  --fs-title:      clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);   /* 18 → 20  UI titles, FAQ question */
  --fs-body-lg:    clamp(1.125rem, 1.0554rem + 0.2857vw, 1.3125rem); /* 18 → 21  lead */
  --fs-body:       clamp(1rem,     0.9768rem + 0.0952vw, 1.0625rem); /* 16 → 17  body */
  --fs-body-sm:    clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem); /* 14 → 15  meta, table cells */
  --fs-caption:    clamp(0.75rem,  0.7268rem + 0.0952vw, 0.8125rem); /* 12 → 13  eyebrow, captions */
  --fs-price:      clamp(1.75rem,  1.6571rem + 0.3810vw, 2rem);      /* 28 → 32  buy-box price */

  /* ───────── TYPE · line-height / tracking / weight ───────── */
  --lh-display: 1.04;  /* display-xl */
  --lh-heading: 1.1;   /* display-l / m */
  --lh-title:   1.25;  /* display-s, title */
  --lh-body:    1.6;
  --lh-ui:      1.2;   /* buttons, chips, nav */

  --ls-display: -0.02em;
  --ls-heading: -0.012em;
  --ls-body:    0;
  --ls-ui:      0.005em;
  --ls-eyebrow: 0.14em; /* uppercase eyebrows only */

  --fw-display:  400;  /* Newsreader regular – never bold for display */
  --fw-display-italic: 400; /* italic accent word in headlines (optional) */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ───────── SPACE · 4px base ───────── */
  --space-1:  0.25rem; /*  4 */
  --space-2:  0.5rem;  /*  8 */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.25rem; /* 20 */
  --space-6:  1.5rem;  /* 24 */
  --space-8:  2rem;    /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */
  --space-40: 10rem;   /* 160 */
  --section-y:  clamp(4.5rem, 2.8286rem + 6.8571vw, 9rem); /* 72 → 144 vertical section padding */
  --section-y-sm: clamp(3rem, 2.5357rem + 1.9048vw, 4.25rem); /* 48 → 68 compact bands (trust row) */
  --stack-head: clamp(2rem, 1.7214rem + 1.1429vw, 2.75rem);  /* 32 → 44 section head → content */

  /* ───────── RADII ───────── */
  --radius-xs:   2px;   /* tags, draft badges */
  --radius-sm:   4px;   /* image frames, cards, table */
  --radius-md:   8px;   /* panels, buy-box notice, inputs-in-panel */
  --radius-lg:   16px;  /* modal */
  --radius-pill: 999px; /* buttons, chips, email input */

  /* ───────── BORDERS ───────── */
  --border-hairline: 1px solid var(--color-line);
  --border-control:  1px solid var(--color-line-strong);
  --border-ink:      1.5px solid var(--color-ink);
  --border-on-dark:  1px solid rgb(244 240 231 / 0.18);

  /* ───────── SHADOWS (used sparingly; hairlines first) ───────── */
  --shadow-0: none;
  --shadow-1: 0 1px 0 var(--color-line);                                                  /* header after scroll */
  --shadow-2: 0 2px 6px -2px rgb(28 31 27 / 0.08), 0 12px 28px -14px rgb(28 31 27 / 0.20); /* card hover, sticky buy bar */
  --shadow-3: 0 24px 64px -24px rgb(28 31 27 / 0.36);                                     /* drawer, modal */

  /* ───────── LAYOUT ───────── */
  --container-max:    82rem;  /* 1312px content = 1440 − 2×64 */
  --container-narrow: 55rem;  /* 880px  FAQ, comparison table */
  --container-text:   42.5rem;/* 680px  long-form copy (~68ch) */
  --page-margin: clamp(1.25rem, 0.2286rem + 4.1905vw, 4rem);   /* 20 → 64 */
  --gutter:      clamp(1rem,    0.8143rem + 0.7619vw, 1.5rem); /* 16 → 24 */
  --grid-cols: 4;                                              /* 4 → 8 (≥768) → 12 (≥1024) */
  --announce-h: 36px;
  --header-h:   64px;  /* 76px ≥1024 */
  --tap-min:    44px;
  --btn-h-lg:   56px;
  --btn-h-md:   48px;
  --btn-h-sm:   44px;

  /* Breakpoints (reference only — custom properties cannot be used inside @media):
     sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1440px  (mobile-first, min-width) */

  /* ───────── Z-INDEX ───────── */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky-buy: 30;
  --z-header: 40;
  --z-overlay: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-skip: 90;

  /* ───────── MOTION ───────── */
  --dur-instant: 100ms; /* press feedback */
  --dur-fast:    160ms; /* color/underline hovers */
  --dur-base:    240ms; /* accordion chevron, chip select, card lift */
  --dur-slow:    400ms; /* drawer, accordion height, image fade-in */
  --dur-reveal:  640ms; /* scroll reveal */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-distance: 16px;
  --stagger: 80ms;
}
@media (min-width: 768px)  { :root { --grid-cols: 8; } }
@media (min-width: 1024px) { :root { --grid-cols: 12; --header-h: 76px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; --reveal-distance: 0px; --stagger: 0ms; }
}

/* tokens inlined */

*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-text);
  color:var(--color-ink);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{text-wrap:pretty;margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
ul,ol{margin:0;padding:0}
button,input{font:inherit}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:inherit
}
.on-dark :where(a,button,input,summary):focus-visible{outline-color:var(--focus-ring-on-dark)}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:var(--z-skip);background:var(--color-ink);color:var(--color-on-dark);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm)}
.skip:focus{top:var(--space-4)}

.eyebrow{display:block;font:var(--fw-semibold) var(--fs-caption)/var(--lh-ui) var(--font-text);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-4)}
.on-dark .eyebrow{color:var(--color-clay-300)}
.h-xl{font:var(--fw-display) var(--fs-display-xl)/var(--lh-display) var(--font-display);letter-spacing:var(--ls-display);text-wrap:balance}
.h-l{font:var(--fw-display) var(--fs-display-l)/var(--lh-heading) var(--font-display);letter-spacing:var(--ls-heading);text-wrap:balance}
.h-m{font:var(--fw-display) var(--fs-display-m)/var(--lh-heading) var(--font-display);letter-spacing:var(--ls-heading)}
.h-s{font:var(--fw-display) var(--fs-display-s)/var(--lh-title) var(--font-display);letter-spacing:-0.01em}
.lead{font-size:var(--fs-body-lg);color:var(--color-ink-2);max-width:34em;text-wrap:pretty}
.meta{font-size:var(--fs-body-sm);color:var(--color-muted)}
.on-dark .meta,.on-dark .lead{color:var(--color-on-dark-muted)}

.container{width:100%;max-width:calc(var(--container-max) + 2*var(--page-margin));margin-inline:auto;padding-inline:var(--page-margin)}
.container--narrow{max-width:calc(var(--container-narrow) + 2*var(--page-margin))}
.container--text{max-width:calc(var(--container-text) + 2*var(--page-margin))}
.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--sm{padding-block:var(--section-y-sm)}
.section--sand{background:var(--surface-alt)}
.section--white{background:var(--surface-raised)}
.section--pine{background:var(--surface-inverse);color:var(--color-on-dark)}
.section-head{display:grid;gap:var(--space-3);margin-bottom:var(--stack-head);max-width:40rem}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center}

/* Buttons */
.btn{
  --h:var(--btn-h-md);--px:28px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--h);padding:0 var(--px);border:0;border-radius:var(--radius-pill);
  font:600 16px/var(--lh-ui) var(--font-text);letter-spacing:var(--ls-ui);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard)
}
.btn--lg{--h:var(--btn-h-lg);--px:32px}
.btn--sm{--h:var(--btn-h-sm);--px:20px;font-size:15px}
.btn--primary{background:var(--color-pine);color:var(--color-white)}
.btn--primary:hover{background:var(--color-pine-700)}
.btn--secondary{background:transparent;color:var(--color-ink);box-shadow:inset 0 0 0 1.5px var(--color-ink)}
.btn--secondary:hover{background:var(--color-ink);color:var(--color-paper)}
.btn--on-dark{background:var(--color-on-dark);color:var(--color-pine)}
.btn--on-dark:hover{background:var(--color-white)}
.btn:active{transform:translateY(1px)}
.btn--block{width:100%}
.link{font-weight:600;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;padding-block:12px;transition:text-decoration-thickness var(--dur-fast)}
.link:hover{text-decoration-thickness:2px}
.link--clay{color:var(--color-clay)}

/* Announce */
.announce{background:var(--surface-footer);color:var(--color-on-dark);min-height:var(--announce-h);display:grid;place-items:center;padding-inline:var(--page-margin);font:500 13px/1.3 var(--font-text);letter-spacing:.02em;text-align:center}
.announce p{margin:0}
.announce a{color:var(--color-clay-300);text-decoration:underline;text-underline-offset:3px}
.announce a:hover{color:var(--color-white)}

/* Header */
.hdr{position:sticky;top:0;z-index:var(--z-header);background:rgb(246 243 236/.88);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);transition:box-shadow var(--dur-base) var(--ease-standard)}
.hdr.is-scrolled{box-shadow:var(--shadow-1)}
.hdr__in{display:flex;align-items:center;gap:var(--space-4);height:var(--header-h)}
.wordmark{display:inline-flex;align-items:center;color:var(--color-ink);text-decoration:none;height:24px}
.wordmark svg{height:100%;width:auto}
@media (min-width:1024px){.wordmark{height:26px}}
.hdr__nav{display:none;margin-inline:auto;gap:var(--space-8)}
.hdr__nav a{font:500 15px/1 var(--font-text);color:var(--color-ink);text-decoration:none;padding-block:var(--space-3);background:linear-gradient(currentColor 0 0) 0 100%/0 1px no-repeat;transition:background-size var(--dur-base) var(--ease-standard)}
.hdr__nav a:hover,.hdr__nav a[aria-current=page]{background-size:100% 1px}
.hdr__cta{margin-left:auto}
.hdr__menu{width:var(--tap-min);height:var(--tap-min);display:grid;place-content:center;gap:6px;border:0;background:none;border-radius:var(--radius-pill);cursor:pointer;padding:0}
.hdr__menu:hover{background:var(--color-pine-100)}
.hdr__menu:active{transform:scale(.96)}
.hdr__menu i{display:block;width:20px;height:1.5px;background:var(--color-ink)}
@media (min-width:1024px){
  .hdr__nav{display:flex}
  .hdr__menu{display:none}
  .hdr__cta{margin-left:0}
}

/* Drawer */
.drawer{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(100vw,420px);border:0;padding:var(--space-5) var(--page-margin) var(--space-10);background:var(--surface-page);box-shadow:var(--shadow-3);transform:translateX(100%);transition:transform 240ms var(--ease-in),overlay 240ms allow-discrete,display 240ms allow-discrete}
.drawer[open]{transform:none;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-out)}
@starting-style{.drawer[open]{transform:translateX(100%)}}
.drawer::backdrop{background:rgb(28 31 27/.4);opacity:0;transition:opacity var(--dur-base)}
.drawer[open]::backdrop{opacity:1}
@starting-style{.drawer[open]::backdrop{opacity:0}}
.drawer__close{position:absolute;top:var(--space-4);right:var(--page-margin);width:var(--tap-min);height:var(--tap-min);border:0;background:none;font-size:28px;line-height:1;cursor:pointer;border-radius:var(--radius-pill);color:var(--color-ink)}
.drawer__close:hover{background:var(--color-pine-100)}
.drawer nav{margin-top:var(--space-16);display:grid}
.drawer nav a{display:flex;align-items:center;min-height:56px;border-bottom:var(--border-hairline);font:400 var(--fs-display-s)/1.2 var(--font-display);color:var(--color-ink);text-decoration:none}
.drawer__foot{margin-top:var(--space-10);display:grid;gap:var(--space-4)}

/* Frames / images */
.frame{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-placeholder);aspect-ratio:var(--ratio,4/5)}
.frame>img,.frame picture,.frame picture img{width:100%;height:100%;object-fit:cover}
.frame picture{display:contents}
.frame--1x1{--ratio:1/1}
.frame--4x5{--ratio:4/5}
.frame--5x4{--ratio:5/4}
.frame--3x2{--ratio:3/2}
.frame--16x9{--ratio:16/9}
.frame--21x9{--ratio:21/9}
.frame--4x3{--ratio:4/3}
@media (hover:hover){
  .tile:hover .frame img,.pcard:hover .frame img{transform:scale(1.02)}
  .frame img{transition:transform var(--dur-slow) var(--ease-out)}
}

/* Hero — photo has dog on LEFT; copy sits RIGHT on desktop; below image on mobile */
.hero{padding-block:var(--space-10) var(--section-y)}
.hero__grid{row-gap:var(--space-10);align-items:center}
.hero__copy,.hero__media{grid-column:1/-1}
.hero h1{margin:0 0 var(--space-6);max-width:12ch}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);margin:var(--space-10) 0 var(--space-4)}
.hero__notify{display:grid;gap:var(--space-3);width:100%;max-width:28rem}
@media (min-width:480px){
  .hero__notify{grid-template-columns:1fr auto}
  .hero__notify .meta{grid-column:1/-1}
}
.hero__notify input{
  min-height:var(--btn-h-lg);padding:0 var(--space-6);
  border:var(--border-control);border-radius:var(--radius-pill);
  background:var(--color-white);font:400 16px/1 var(--font-text);color:var(--color-ink)
}
.hero__notify input:hover{border-color:var(--color-ink)}
.hero__notify input:focus-visible{border-color:var(--color-ink)}
/* Mobile: image first (order), full-bleed 4:5, copy BELOW — never overlaid */
.hero__media{order:1}
.hero__copy{order:2}
@media (max-width:767.98px){
  .hero__actions .btn{width:100%}
  .hero .hero__media{margin-inline:calc(-1*var(--page-margin));border-radius:0;aspect-ratio:4/5}
}
@media (min-width:1024px){
  .hero{padding-top:var(--space-16)}
  .hero__media{order:0;grid-column:1/8}
  .hero__copy{order:0;grid-column:8/13}
}

/* Photo band */
.band{padding:0}
.band__media{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--surface-placeholder)}
.band__media img{width:100%;height:100%;object-fit:cover}
@media (min-width:768px){.band__media{aspect-ratio:21/9}}

/* About / story */
.story{align-items:center}
.story__copy,.story__media{grid-column:1/-1}
@media (min-width:1024px){
  .story__copy{grid-column:1/6}
  .story__media{grid-column:7/13}
}

/* Mood tiles */
.tiles{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
@media (min-width:768px){.tiles{grid-template-columns:repeat(3,1fr);gap:var(--gutter)}}
.tile{display:grid;gap:var(--space-4);color:inherit;text-decoration:none}
.tile__label{font:600 15px/1.3 var(--font-text)}
.tile__meta{font-size:var(--fs-body-sm);color:var(--color-muted)}

/* Values */
.values{border-block:var(--border-hairline)}
.values__grid{list-style:none;margin:0;display:grid;grid-template-columns:1fr;gap:var(--space-8)}
@media (min-width:768px){.values__grid{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}}
.values__grid li{display:grid;gap:var(--space-3);align-content:start}
.values__grid svg{width:24px;height:24px;color:var(--color-pine)}
.values__grid b{font:600 15px/1.3 var(--font-text)}

/* FAQ */
.faq__item{border-bottom:var(--border-hairline)}
.faq__item:first-child{border-top:var(--border-hairline)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  min-height:64px;padding-block:var(--space-5);
  font:500 var(--fs-title)/var(--lh-title) var(--font-text);
  cursor:pointer;list-style:none;
  transition:color var(--dur-fast) var(--ease-standard)
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--color-pine)}
.faq__item summary i{position:relative;width:16px;height:16px;flex:none;transition:transform var(--dur-base) var(--ease-standard)}
.faq__item summary i::before,.faq__item summary i::after{content:"";position:absolute;inset:7.25px 0;height:1.5px;background:currentColor}
.faq__item summary i::after{transform:rotate(90deg)}
.faq__item[open] summary i{transform:rotate(45deg)}
.faq__a{padding-bottom:var(--space-6);color:var(--color-ink-2);max-width:60ch}
.faq__a p{margin:0}
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}
  .faq__item::details-content{block-size:0;overflow:clip;transition:block-size var(--dur-slow) var(--ease-in-out),content-visibility var(--dur-slow) allow-discrete}
  .faq__item[open]::details-content{block-size:auto}
}

/* Notify / signup band */
.notify-band .notify{display:grid;gap:var(--space-3);align-self:end}
.notify input{
  min-height:var(--btn-h-lg);padding:0 var(--space-6);
  border:var(--border-control);border-radius:var(--radius-pill);
  background:var(--color-white);font:400 16px/1 var(--font-text);color:var(--color-ink)
}
.notify input:hover{border-color:var(--color-ink)}
.notify input:focus-visible{border-color:var(--color-ink)}
@media (min-width:480px){
  .notify{grid-template-columns:1fr auto}
  .notify .meta{grid-column:1/-1}
}
@media (min-width:1024px){
  .notify-band__copy{grid-column:1/6}
  .notify-band__form{grid-column:7/13;align-self:end}
}

/* Interior pages */
.page-hero{padding-block:var(--space-16) var(--space-10)}
.page-hero h1{margin-bottom:var(--space-6)}
.prose{max-width:var(--container-text);display:grid;gap:var(--space-6)}
.prose p{color:var(--color-ink-2);font-size:var(--fs-body-lg);line-height:var(--lh-body)}
.prose a{color:var(--color-clay);font-weight:500}
.contact-card{
  display:grid;gap:var(--space-4);padding:var(--space-8);
  background:var(--surface-raised);border:var(--border-hairline);border-radius:var(--radius-md);
  max-width:28rem
}
.contact-card a{color:var(--color-clay);font-weight:600;text-decoration:none}
.contact-card a:hover{text-decoration:underline;text-underline-offset:4px}

/* Footer */
.ftr{background:var(--surface-footer);color:var(--color-on-dark);padding:var(--space-16) 0 var(--space-8)}
.ftr a{color:inherit;text-decoration:none}
.ftr a:hover{color:var(--color-white);text-decoration:underline;text-underline-offset:4px}
.ftr .eyebrow{color:var(--color-on-dark-muted);margin-bottom:var(--space-3)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid}
.ftr li a{display:inline-flex;align-items:center;min-height:var(--tap-min);font-size:15px}
.ftr__brand{grid-column:1/-1;display:grid;gap:var(--space-4);margin-bottom:var(--space-8)}
.ftr__brand .wordmark{color:var(--color-on-dark);height:28px}
.ftr__brand p{max-width:26em;color:var(--color-on-dark-muted);font-size:var(--fs-body-sm)}
.ftr__col{grid-column:span 2}
.ftr__legal{
  grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);
  margin-top:var(--space-16);padding-top:var(--space-6);border-top:var(--border-on-dark);
  font-size:var(--fs-body-sm);color:var(--color-on-dark-muted)
}
@media (min-width:1024px){
  .ftr{padding-top:var(--space-20)}
  .ftr__brand{grid-column:1/5;margin-bottom:0}
  .ftr__col{grid-column:span 2}
  .ftr__col:nth-of-type(1){grid-column:5/7}
  .ftr li a{min-height:36px}
}

/* Reveal */
.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-distance));transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);transition-delay:calc(var(--i,0)*var(--stagger))}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* First-drop soft page */
.drop-card{
  display:grid;gap:var(--space-6);padding:var(--space-10);
  background:var(--surface-raised);border:var(--border-hairline);border-radius:var(--radius-md);
  max-width:36rem
}

/* ===== ybace v4 design layer (PREVIEW only) =====
   Bolder hero, deeper colour blocks, stronger type, confident rhythm, tasteful motion. */
:root{
  --fs-display-xl: clamp(2.875rem, 1.55rem + 4.6vw, 6.25rem);   /* 46 → 100 */
  --fs-display-l:  clamp(2.25rem, 1.45rem + 3.2vw, 4.5rem);      /* 36 → 72 */
  --fs-display-m:  clamp(1.875rem, 1.5rem + 1.5vw, 2.875rem);    /* 30 → 46 */
  --lh-display: .98;
  --ls-display: -0.028em;
  --ls-heading: -0.02em;
  --ink-deep:#131714;
  --pine-900:#132219;
  --pine-800:#1A2D24;
  --clay-600:#8E4423;
  --reveal-distance: 28px;
  --dur-reveal: 900ms;
}
@media (prefers-reduced-motion: reduce){:root{--reveal-distance:0px;--dur-reveal:0ms}}

/* Type */
.h-xl,.h-l,.h-m{font-weight:420;font-variation-settings:"opsz" 72}
.h-xl em,.h-l em{font-style:italic;font-weight:380}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--color-clay);letter-spacing:.16em}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.8}
.on-dark .eyebrow,.v4-dark .eyebrow{color:var(--color-clay-300)}
.lead{color:var(--color-ink-2)}

/* Buttons: clay primary, arrow micro-motion */
.btn{border-radius:var(--radius-pill);letter-spacing:.01em}
.btn--primary{background:var(--color-clay);color:#fff}
.btn--primary:hover{background:var(--clay-600)}
.btn--ghost-light{background:transparent;color:var(--color-on-dark);box-shadow:inset 0 0 0 1.5px rgb(244 240 231/.55)}
.btn--ghost-light:hover{background:var(--color-on-dark);color:var(--color-ink)}
.btn--secondary:hover{background:var(--color-ink);color:var(--color-paper)}
.btn .arr{display:inline-block;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.link .arr{display:inline-block;transition:transform var(--dur-base) var(--ease-out)}
.link:hover .arr{transform:translateX(4px)}
.tag{background:var(--color-clay);color:#fff}
.v4-dark .tag{background:rgb(217 162 126/.16);color:var(--color-clay-300);box-shadow:inset 0 0 0 1px rgb(217 162 126/.4)}

/* Announce + header */
.announce{background:var(--pine-900);font:500 12.5px/1.3 var(--font-text);letter-spacing:.06em}
.hdr{background:rgb(246 243 236/.92)}
.hdr__nav a{font-weight:500;letter-spacing:.01em}
.hdr__cta{gap:6px}

/* Frames: rounder, image hover zoom everywhere */
.frame{border-radius:6px}
@media (hover:hover){
  .frame img{transition:transform 1.1s var(--ease-out)}
  .frame:hover img,.tile:hover .frame img{transform:scale(1.045)}
}

/* ---------- HERO (full-bleed, dark) ---------- */
.hero4{position:relative;background:var(--ink-deep);color:var(--color-on-dark);overflow:hidden;isolation:isolate}
.hero4__media{margin:0;position:relative;height:46svh;min-height:300px;max-height:560px}
.hero4__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;animation:hero4-in 2.2s var(--ease-out) both}
.hero4__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(19 23 20/.0) 45%,var(--ink-deep) 100%)}
@keyframes hero4-in{from{transform:scale(1.07);opacity:.4}to{transform:none;opacity:1}}
.hero4__copy{position:relative;z-index:1;padding:0 var(--page-margin) var(--space-12);margin-top:-72px}
.hero4 h1{margin:var(--space-3) 0 var(--space-5);max-width:11ch;color:#FBF8F1}
.hero4 h1 em{color:var(--color-clay-300)}
.hero4 .lead{color:#C9CFC6;max-width:30em}
.hero4__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-8) 0 var(--space-5)}
.hero4__facts{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 13.5px/1.4 var(--font-text);color:#AEB8AE;list-style:none}
.hero4__facts li{display:inline-flex;align-items:center;gap:8px}
.hero4__facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-clay-300)}
@media (max-width:767.98px){
  .hero4 .lead{font-size:16.5px}
  .hero4__actions .btn{flex:1 1 100%}
}
@media (min-width:1024px){
  .hero4{min-height:min(88vh,880px);display:grid;align-items:center}
  .hero4__media{position:absolute;inset:0 26% 0 0;height:auto;max-height:none}
  .hero4__media img{object-position:42% 40%;-webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 100%);mask-image:linear-gradient(90deg,#000 58%,transparent 100%)}
  .hero4__media::after{background:linear-gradient(90deg,transparent 55%,rgb(19 23 20/.55) 85%),linear-gradient(0deg,rgb(19 23 20/.5),transparent 30%)}
  .hero4__copy{margin:0;padding:var(--space-24) 0;width:100%}
  .hero4__copy>.container>div{margin-left:auto;width:min(40%,560px)}
}

/* ---------- PROMISE STRIP ---------- */
.promise{background:var(--color-paper);border-bottom:var(--border-hairline)}
.promise__grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8) var(--gutter);padding-block:var(--space-12)}
.promise__grid li{display:grid;gap:6px;align-content:start;padding-left:var(--space-5);border-left:1px solid var(--color-line-strong)}
.promise__grid b{font:400 clamp(1.75rem,1.4rem + 1.4vw,2.75rem)/1 var(--font-display);letter-spacing:-.02em;color:var(--color-ink)}
.promise__grid b small{font:600 12px/1 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--color-clay);margin-left:8px;vertical-align:middle}
.promise__grid span{font-size:var(--fs-body-sm);color:var(--color-muted);max-width:24em}
@media (min-width:1024px){.promise__grid{grid-template-columns:repeat(4,1fr);padding-block:var(--space-16)}}

/* ---------- SPOTLIGHT (pine block, drawing + photo pairing) ---------- */
.spot4{background:var(--color-pine);color:var(--color-on-dark);padding-block:var(--section-y);overflow:hidden}
.spot4__grid{align-items:center;row-gap:var(--space-16)}
.spot4__art,.spot4__copy{grid-column:1/-1}
.spot4__art{position:relative;padding-bottom:12%}
.frame.spot4__draw{background:var(--pine-800);border:1px solid rgb(244 240 231/.10);aspect-ratio:4/5;width:66%}
.spot4__draw svg{width:86%;height:auto}
.spot4__photo{position:absolute;right:0;bottom:0;width:48%;aspect-ratio:4/5;box-shadow:0 30px 60px -30px rgb(0 0 0/.6);border:6px solid var(--color-pine)}
.spot4__photo figcaption{position:absolute;left:10px;bottom:8px;font:500 11px/1.2 var(--font-text);color:rgb(255 255 255/.85);letter-spacing:.04em;text-shadow:0 1px 6px rgb(0 0 0/.5)}
.spot4__copy{display:grid;gap:var(--space-6);justify-items:start}
.spot4__copy h2{color:#FBF8F1}
.spot4 .lead{color:#C4CEC5}
.checks{list-style:none;display:grid;gap:12px;margin:var(--space-2) 0}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body)}
.checks svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--color-clay-300)}
.spot4__price{font:400 var(--fs-display-s)/1.2 var(--font-display);color:#FBF8F1}
.spot4__price span{font:500 15px/1.3 var(--font-text);color:#AEB8AE;margin-left:6px}
.spot4__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6)}
.spot4 .link{color:#FBF8F1}
@media (min-width:1024px){.spot4__art{grid-column:1/8}.spot4__copy{grid-column:9/13}}

/* ---------- EDITORIAL PHOTO BAND (text on photo) ---------- */
.ed{position:relative;color:#FBF8F1;background:var(--ink-deep);overflow:hidden}
.ed__media{margin:0;position:absolute;inset:0}
.ed__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease-out)}
.ed:has(.is-in) .ed__media img{transform:none}
.ed__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(14 17 15/.82) 0%,rgb(14 17 15/.35) 42%,rgb(14 17 15/0) 70%)}
.ed__copy{position:relative;min-height:min(92vh,820px);display:grid;align-content:end;padding-block:var(--section-y) var(--space-16)}
.ed__copy>div{max-width:36rem;display:grid;gap:var(--space-5)}
.ed .lead{color:#D9DDD5}
.ed .link{color:#FBF8F1}
@media (max-width:767.98px){.ed__copy{min-height:88svh}}

/* ---------- EXPLORE TILES (overlay labels) ---------- */
.tiles4{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--page-margin));padding-inline:var(--page-margin);scrollbar-width:none}
.tiles4::-webkit-scrollbar{display:none}
.tile4{position:relative;scroll-snap-align:start;color:#FBF8F1;text-decoration:none}
.tile4 .frame{aspect-ratio:3/4}
.tile4 .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(14 17 15/.72),rgb(14 17 15/0) 55%);pointer-events:none}
.tile4__txt{position:absolute;left:var(--space-6);right:var(--space-6);bottom:var(--space-6);z-index:1;display:grid;gap:6px}
.tile4__txt h3{font:400 clamp(1.75rem,1.3rem + 1.6vw,2.75rem)/1 var(--font-display);letter-spacing:-.02em}
.tile4__txt p{font-size:var(--fs-body-sm);color:#E2E5DE}
@media (min-width:768px){.tiles4{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin-inline:0;padding-inline:0;gap:var(--gutter)}}
.sec-head4{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-12)}
.sec-head4>div{display:grid;gap:var(--space-3);max-width:40rem}

/* ---------- FAQ (two column) ---------- */
.faq4{align-items:start}
.faq4__head,.faq4__list{grid-column:1/-1}
.faq4__head{display:grid;gap:var(--space-4);align-content:start}
@media (min-width:1024px){.faq4__head{grid-column:1/5;position:sticky;top:120px}.faq4__list{grid-column:6/13}}
.faq__item summary{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}

/* ---------- CLOSING CTA BAND ---------- */
.close4{position:relative;color:#FBF8F1;background:var(--ink-deep);overflow:hidden;text-align:center}
.close4 .ed__media::after{background:rgb(14 17 15/.58)}
.close4__copy{position:relative;padding-block:clamp(6rem,4rem + 8vw,12rem);display:grid;justify-items:center;gap:var(--space-6)}
.close4__copy .lead{color:#D9DDD5;margin-inline:auto}
.close4__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-4)}
.close4 .eyebrow::before{display:none}

/* ---------- FOOTER v4 ---------- */
.ftr4{background:var(--ink-deep);color:var(--color-on-dark);padding:var(--space-20) 0 var(--space-8);overflow:hidden}
.ftr4 a{color:inherit;text-decoration:none}
.ftr4 a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ftr4__top{row-gap:var(--space-16);padding-bottom:var(--space-16);border-bottom:var(--border-on-dark)}
.ftr4__news,.ftr4__cols{grid-column:1/-1}
.ftr4__news{display:grid;gap:var(--space-5);align-content:start}
.ftr4__news h2{font:400 var(--fs-display-m)/1.08 var(--font-display);letter-spacing:-.02em;max-width:16ch;color:#FBF8F1}
.ftr4__news .meta{color:#9AA59B}
.ftr4 .notify{display:grid;gap:var(--space-3);max-width:30rem}
.ftr4 .notify input{background:transparent;color:#FBF8F1;border:1px solid rgb(244 240 231/.38)}
.ftr4 .notify input::placeholder{color:#9AA59B}
.ftr4 .notify input:hover,.ftr4 .notify input:focus-visible{border-color:#FBF8F1}
.ftr4 .notify .meta{color:#9AA59B}
.ftr4__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-10) var(--gutter)}
.ftr4__cols h3{font:600 12px/1 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--color-clay-300);margin-bottom:var(--space-4)}
.ftr4__cols ul{list-style:none;display:grid;gap:2px}
.ftr4__cols li a{display:inline-flex;align-items:center;min-height:40px;font-size:15.5px;color:#D7DCD3}
@media (min-width:768px){.ftr4__cols{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.ftr4__news{grid-column:1/6}.ftr4__cols{grid-column:7/13}}
.ftr4__mark{display:flex;align-items:baseline;font:400 clamp(5.5rem,2rem + 15vw,17rem)/.82 var(--font-display);letter-spacing:-.045em;color:#2B342D;margin:var(--space-12) 0 var(--space-8);user-select:none}
.ftr4__mark i{display:inline-block;width:.12em;height:.12em;border-radius:50%;background:var(--color-clay);margin-left:.04em}
.ftr4__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:var(--fs-body-sm);color:#8F9A90}

/* ---------- PDP polish ---------- */
.frame.is-dark{background:var(--color-pine);border:0;display:grid;place-items:center}
.frame.is-dark svg{width:100%;height:100%}
.gallery__main{border-radius:6px}
.gallery__grid{gap:var(--space-3);margin-top:var(--space-3)}
.buybox .price{font-family:var(--font-display);font-weight:420;letter-spacing:-.02em}
.pdp .gallery__note{font-size:13px}

@media (max-width:767.98px){.announce__mail{display:none}.hero4 .eyebrow{font-size:11px;letter-spacing:.14em}}

/* ===== ybace shop grid (first batch, four products) ===== */
.shop4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-4);row-gap:var(--space-10)}
@media (min-width:1024px){.shop4{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter)}}
.shop4__item{min-width:0}
.shop4__card{display:grid;gap:var(--space-2);color:inherit;text-decoration:none}
.shop4__media{margin-bottom:var(--space-3)}
.shop4__media img{object-fit:cover}
.shop4__name{font:400 var(--fs-display-s)/1.15 var(--font-display);letter-spacing:-.015em;text-wrap:balance}
.shop4__card:hover .shop4__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.shop4__line{font-size:var(--fs-body-sm);color:var(--color-muted);text-wrap:pretty}
.shop4__price{font:600 16px/1.3 var(--font-text);color:var(--color-ink);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:2px}
.shop4__sub{font-weight:500;font-size:var(--fs-body-sm);color:var(--color-muted)}
@media (max-width:639.98px){.shop4__line{display:none}.shop4__name{font-size:1.2rem}}
.shop4-sec .sec-head4 .lead{margin-top:var(--space-2)}
.shop4-sec + .spot4{margin-top:0}