/* =========================================================
   CIACRI — landing page styles
   Palette: #483d37 brown · #120e0d ink · #f39435 orange · #ffbf00 amber
   Bg paper: #f8f3e8
   ========================================================= */

@font-face {
  font-family: "Clash Grotesk";
  src: url("assets/fonts/clash-grotesk-variable.ttf") format("truetype-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Rockwell";
  src: url("assets/fonts/rockwell.ttc") format("truetype-collection"),
       url("assets/fonts/rockwell.ttc") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
:root{
  --brown: #483d37;
  --ink:   #120e0d;
  --orange:#f39435;
  --amber: #ffbf00;
  --paper: #f8f3e8;
  --paper-2:#efe7d4;
  --white: #fff;

  --grad-brown: linear-gradient(90deg, #2a221d 0%, #483d37 50%, #2a221d 100%);
  --grad-orange:linear-gradient(90deg, #f39435 0%, #ffbf00 100%);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;

  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 64px);

  --font-body: "Clash Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Rockwell", "Roboto Slab", "Georgia", serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--brown);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
ul{list-style:none; padding:0; margin:0}
h1,h2,h3,h4,h5{font-family: var(--font-head); font-weight:700; color:var(--brown); letter-spacing:-.01em; line-height:1.05; margin:0}

.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--orange);
  margin: 0 0 18px;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing:.01em;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn--primary{
  background: var(--brown);
  color: var(--paper);
  box-shadow: 0 6px 0 -2px var(--orange), 0 14px 30px -12px rgba(72,61,55,.45);
}
.btn--primary:hover{
  background: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 -2px var(--amber), 0 18px 40px -14px rgba(72,61,55,.6);
}
.btn--ghost{
  border: 1.5px solid var(--brown);
  color: var(--brown);
}
.btn--ghost:hover{ background: var(--brown); color: var(--paper) }

sup{ font-size: .55em; vertical-align: super }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--pad);
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  background: rgba(248,243,232,.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(72,61,55,.08);
}
.nav__logo img{ height: 28px; width: auto; display: block }
.nav__links{ display:flex; gap: 28px }
.nav__links a{
  font-size: 14px; font-weight: 500; letter-spacing:.02em;
  position: relative; padding: 4px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--orange); transition: right .3s var(--ease);
}
.nav__links a:hover::after{ right: 0 }

/* Desktop refinement: bigger logo and menu links */
@media (min-width: 1024px){
  .nav__logo img{ width: 125px; height: auto }
  .nav__links{ gap: 36px }
  .nav__links a{ font-size: 20px }
}

@media (max-width: 760px){
  .nav__links{ display:none }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  padding: 250px var(--pad) 80px;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}
.hero__pattern{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 110%, rgba(243,148,53,.18), transparent 50%),
    radial-gradient(circle at 95% 0%, rgba(255,191,0,.12), transparent 45%);
  z-index:-1;
}
.hero__inner{
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  z-index: 2;
}

.hero__title{
  font-size: clamp(60px, 12vw, 180px);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 36px;
  padding-top: .08em;
  color: var(--brown);
}
.hero__title-line{ display:block }
.hero__title strong{
  font-weight: 700;
  color: var(--orange);
  font-style: italic;
  position: relative;
}

.hero__lead{
  max-width: 540px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--brown);
  margin: 0 0 40px;
}
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap }

.hero__dog{
  position: absolute;
  right: -2vw; bottom: -4vh;
  width: clamp(380px, 48vw, 760px);
  z-index: 1;
  animation: float 8s ease-in-out infinite;
  filter: drop-shadow(0 30px 40px rgba(72,61,55,.25));
}
.hero__dog img{ width: 100%; height:auto }

@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%   { transform: translateY(-12px) }
}

@media (max-width: 900px){
  .hero{ padding-top: 140px; padding-bottom: 380px; }
  .hero__dog{
    left: 0;
    right: 0;
    width: 100vw;
    bottom: -10px;
  }
  .hero__dog img{ width: 100%; height: auto; display: block; margin: 0 auto }
  .hero__title{ font-size: clamp(56px, 18vw, 120px) }
}

.hero__scroll{
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex; align-items:center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .25em;
  color: var(--orange);
  z-index: 4;
}
.hero__scroll svg{ animation: bounce 2.2s var(--ease) infinite }
@keyframes bounce{
  0%,100%{ transform: translateY(0) }
  50%   { transform: translateY(6px) }
}

/* =========================================================
   STORY
   ========================================================= */
.story{
  padding: clamp(80px, 12vw, 140px) var(--pad);
  background: var(--paper);
  position: relative;
}
.story::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(72,61,55,.15), transparent);
}
.story__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.story__copy h2{
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 24px;
}
.story__copy p{ margin: 0 0 16px; max-width: 56ch }

.story__stats{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(72,61,55,.15);
}
.story__stats li{ display:flex; flex-direction:column; gap:4px }
.story__stats b{
  font-family: var(--font-head); font-size: clamp(36px, 5vw, 56px); color: var(--orange); font-weight: 800;
  line-height: 1;
}
.story__stats span{ font-size: 13px; color: var(--brown); opacity:.78 }

.story__photo{
  position: relative; margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #efe6d2, #d9caa6);
  aspect-ratio: 4/5;
}
.story__photo img{
  width:100%; height:100%; object-fit: cover; object-position: center 30%;
  transition: transform 1.2s var(--ease);
}
.story__photo:hover img{ transform: scale(1.05) }
.story__photo figcaption{
  position:absolute; left:20px; bottom:20px;
  background: rgba(18,14,13,.7);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px; letter-spacing:.06em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (max-width: 880px){
  .story__grid{ grid-template-columns: 1fr }
}

/* =========================================================
   PRODUCTS
   ========================================================= */
.products{
  padding: clamp(80px, 12vw, 140px) var(--pad);
  background: var(--brown);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.products::before{
  /* pattern - tiny brand-mark repeated, very faint */
  content:""; position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><path fill='%235a4d45' d='M14 8c.1-.7.4-1.9 1.3-2.4.1-.1.3 0 .4.1l.9 3.5c.2.2.5.5.7.9 2.5 3.2 4 9.5 4 15.2h2.3v4.4h-6.6v-2.7h-.4c-.2.9-1.1 2-1.7 2.4-.4.2-.9.3-1.3.3h-6.3c-1.1 0-2-.9-2-1.9 0-3.1.5-8.7 7.4-11.2.1-.9-.7-1.2-1.2-1.3-.2 0-.3 0-.5 0-3.1.7-4.3-.4-5.1-1.4-.4-.4-.6-1-.7-1.5l-.1-.5c-.1-.3.1-.5.3-.6l4.3-1.2.2-.7c.2-.6.7-1 1.3-1.2.4-.1.8-.2 1.2-.3.4 0 .7 0 1.1 0z'/></svg>");
  opacity:.08; pointer-events:none;
}
.products__head{
  max-width: var(--maxw); margin: 0 auto clamp(40px, 6vw, 80px);
  position: relative; z-index: 1;
}
.products__head .eyebrow{ color: var(--amber) }
.products__head h2{
  color: var(--paper);
  font-size: clamp(40px, 6vw, 80px);
  max-width: 14ch;
}
.products__head h2 span{ color: var(--orange); font-style: italic; font-weight: 400 }
.products__head .lead{
  max-width: 56ch;
  margin-top: 24px;
  color: rgba(248,243,232,.78);
}

.products__grid{
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px){ .products__grid{ grid-template-columns: 1fr } }

.product{
  background: var(--paper);
  color: var(--brown);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.product:hover{ transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5) }

.product__media{
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, #f8f3e8, #e8dcc1);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.product__media--accent{ background: linear-gradient(135deg, #f39435, #ffbf00) }
.product__media img{
  width: 86%; height:auto; max-height: 86%; object-fit: contain;
  transition: transform .8s var(--ease) ;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.18));
}
.product:hover .product__media img{ transform: scale(1.06) rotate(-2deg) }

.product__badge{
  position:absolute; top: 14px; left: 14px;
  background: var(--brown); color: var(--paper);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing:.16em; text-transform: uppercase;
  z-index:2;
}
.product__badge--alt{ background: var(--ink) }

.product__body{ padding: 28px 28px 32px; flex:1; display:flex; flex-direction:column }
.product__line{ font-size: 12px; letter-spacing:.2em; text-transform: uppercase; color: var(--orange); margin: 0 0 6px; font-weight: 700 }
.product h3{ font-size: 32px; margin-bottom: 12px }
.product p{ font-size: 14.5px; line-height: 1.55; color: var(--brown); opacity:.85; margin: 0 0 18px }
.product__tags{ margin-top: auto; display:flex; gap: 8px; flex-wrap: wrap }
.product__tags li{
  font-size: 11px; padding: 5px 10px;
  border: 1px solid rgba(72,61,55,.25); border-radius: 999px;
  letter-spacing:.05em;
}

/* slide-demo (kinoslide effect) */
.slide-demo{
  margin-top: clamp(60px, 8vw, 110px);
  max-width: var(--maxw);
  margin-left: auto; margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
  background: linear-gradient(135deg, rgba(255,191,0,.95), rgba(243,148,53,.95));
  border-radius: var(--r-lg);
  padding: clamp(30px, 5vw, 60px);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.slide-demo__copy h3{
  color: var(--ink);
  font-size: clamp(28px, 4vw, 48px);
  max-width: 14ch; margin-bottom: 18px;
}
.slide-demo__copy p{ color: var(--ink); max-width: 42ch; opacity: .85 }
.slide-demo__copy .eyebrow{ color: var(--ink) }

.slide-demo__stage{
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-demo__base{
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 22px rgba(18,14,13,.28));
  pointer-events: none;
}

@media (max-width: 880px){
  .slide-demo{ grid-template-columns: 1fr }
}

/* =========================================================
   COLORS
   ========================================================= */
.colors{
  padding: clamp(80px, 12vw, 140px) var(--pad);
  background: var(--paper);
}
.colors__head{ max-width: var(--maxw); margin: 0 auto clamp(40px, 5vw, 70px) }
.colors__head h2{
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
}
.colors__head h2 em{ color: var(--orange); font-style: italic; font-weight: 400 }

.colors__stage{
  max-width: var(--maxw); margin: 0 auto;
  background: var(--brown);
  border-radius: var(--r-lg);
  padding: clamp(30px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  text-align:center;
  position: relative;
  overflow: hidden;
}
.colors__display{
  width: 100%; aspect-ratio: 16/8;
  display:flex; align-items:center; justify-content:center;
  position: relative;
}
.colors__display img{
  max-width: 80%; max-height: 100%; width:auto; height:auto;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.35));
  transition: opacity .35s var(--ease), transform .6s var(--ease);
}
.colors__display.is-changing img{ opacity: 0; transform: translateY(8px) }

.colors__picker{
  display:flex; gap: 14px; justify-content:center; flex-wrap:wrap;
  margin: 30px 0 16px;
  position: relative; z-index: 2;
}
.dot{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c, var(--orange));
  border: 3px solid rgba(255,255,255,.18);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.dot--green     { --c:#3a7a3a }
.dot--bluette   { --c:#1c6fb6 }
.dot--fuchsia   { --c:#c8267d }
.dot--strawberry{ --c:#d52f2f }
.dot--bordeaux  { --c:#7a1a1a }
.dot--rust      { --c:#a85a2c }

.dot:hover{ transform: scale(1.1) }
.dot[aria-selected="true"]{
  border-color: var(--paper);
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
  transform: scale(1.1);
}

/* Bridge image between Color Stage and Color Leather */
.colors__bridge{
  max-width: var(--maxw);
  margin: clamp(60px, 8vw, 100px) auto clamp(20px, 4vw, 40px);
  display: flex;
  justify-content: center;
}
.colors__bridge img{
  width: 100%;
  max-width: 720px;
  height: auto;
}
.colors__name{
  color: var(--paper); font-family: var(--font-head); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: .02em;
  margin: 0;
}
.colors__name span{ color: var(--orange) }

.colors__leather{
  max-width: var(--maxw); margin: clamp(60px, 8vw, 100px) auto 0;
}
.colors__leather .eyebrow{ text-align:center; }
.colors__leather-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.colors__leather-grid figure{
  margin:0;
  background: linear-gradient(180deg, #efe6d2, #d9caa6);
  border-radius: var(--r-md);
  padding: 16px;
  aspect-ratio: 1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 10px;
  transition: transform .4s var(--ease);
}
.colors__leather-grid figure:hover{ transform: translateY(-6px) }
.colors__leather-grid img{
  width:80%; height:auto; max-height: 70%; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(72,61,55,.3));
}
.colors__leather-grid figcaption{
  font-size: 12px; font-weight: 600; letter-spacing:.08em; text-transform: uppercase; color: var(--brown);
}
@media (max-width: 760px){
  .colors__leather-grid{ grid-template-columns: repeat(2, 1fr) }
}

/* =========================================================
   HERITAGE / TIMELINE
   ========================================================= */
.heritage{
  padding: clamp(80px, 12vw, 140px) var(--pad);
  background: var(--paper);
  position: relative;
}
.heritage__head{
  max-width: var(--maxw); margin: 0 auto clamp(40px, 6vw, 80px);
}
.heritage__head h2{
  font-size: clamp(40px, 6vw, 80px); max-width: 14ch;
}

.timeline{
  max-width: var(--maxw); margin: 0 auto;
  position: relative;
  padding-left: clamp(40px, 6vw, 80px);
}
.timeline::before{
  content:""; position:absolute;
  left: clamp(8px, 1.5vw, 18px);
  top: 12px; bottom: 12px;
  width: 4px;
  background: linear-gradient(180deg, var(--brown), var(--orange) 40%, var(--amber));
  border-radius: 4px;
}
.timeline__item{
  position: relative;
  padding: 28px 0 50px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas:
    "year  img"
    "title img"
    "desc  img";
  column-gap: clamp(20px, 3vw, 50px);
  row-gap: 4px;
  align-items: center;
}
.timeline__item h4{ grid-area: title }
.timeline__item p{ grid-area: desc }

.timeline__year{
  grid-area: year;
  position: relative;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(56px, 10vw, 140px);
  line-height: .9;
  color: var(--orange);
  display: block;
  letter-spacing: -.03em;
}
/* Bullet pinned to the rail and vertically centered on the year's own box */
.timeline__year::before{
  content:"";
  position: absolute;
  top: 50%;
  left: calc(-1 * clamp(40px, 6vw, 80px) + clamp(8px, 1.5vw, 18px) - 8px);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px rgba(243,148,53,.3);
  transform: translateY(-50%);
}
.timeline__item h4{
  font-family: var(--font-head); font-size: clamp(20px, 2vw, 28px); margin: 6px 0 8px;
}
.timeline__item p{
  margin: 0; max-width: 50ch; color: var(--brown); opacity: .82;
}
.timeline__item img{
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  grid-column: 2;
  grid-row: 1 / span 4;
}

.timeline__item--final .timeline__year{ color: var(--ink) }
.timeline__item--final .timeline__year::before{
  background: var(--ink);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px rgba(18,14,13,.3);
}

@media (max-width: 760px){
  .timeline__item{ grid-template-columns: 1fr }
  .timeline__item img{ grid-column: 1; grid-row: auto; max-height: 220px; margin-top: 16px }
}

/* =========================================================
   OUTRO
   ========================================================= */
.outro{
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 12vw, 140px) var(--pad);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.outro__inner{ max-width: 800px; margin: 0 auto; position: relative; z-index:1 }
.outro h2{
  color: var(--paper);
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1;
  margin-bottom: 36px;
}
.outro h2 em{ color: var(--orange); font-style: italic; font-weight: 400 }
.outro .eyebrow{ color: var(--amber); margin-bottom: 24px }
.outro__stripes{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap: 0; opacity: .9;
}
.outro__stripes span{ display:block; height: 8px }
.outro__stripes span:nth-child(1){ background: var(--brown) }
.outro__stripes span:nth-child(2){ background: var(--amber) }
.outro__stripes span:nth-child(3){ background: var(--orange) }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: var(--brown);
  color: var(--paper);
  padding: clamp(60px, 8vw, 100px) var(--pad) 30px;
}
.footer__top{
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(248,243,232,.14);
}
.footer__brand p{ margin-top: 18px; max-width: 30ch; opacity: .8; font-size: 14px; line-height: 1.6 }
.footer__logo{ width: 125px; height: auto; display: block; filter: brightness(0) invert(1) }

.footer__col h5{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px; letter-spacing:.18em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 16px;
}
.footer__col ul li{ font-size: 14px; line-height: 1.85; opacity: .85 }
.footer__col a:hover{ color: var(--orange) }

.footer__bottom{
  max-width: var(--maxw); margin: 30px auto 0;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12px; opacity: .8;
}
.footer__bottom a{
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(243,148,53,.4);
  transition: border-color .25s var(--ease);
}
.footer__bottom a:hover{ border-bottom-color: var(--orange) }
@media (max-width: 760px){
  .footer__top{ grid-template-columns: 1fr 1fr }
  .footer__brand{ grid-column: 1 / -1 }
}

/* =========================================================
   COOKIE BANNER
   ========================================================= */
.cookie-banner{
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
  padding: 18px 22px;
  animation: slide-up .4s var(--ease) both;
}
@keyframes slide-up{
  from{ transform: translateY(20px); opacity: 0 }
  to  { transform: translateY(0); opacity: 1 }
}
.cookie-banner__inner{
  display:flex; gap: 18px; align-items:center; justify-content: space-between; flex-wrap: wrap;
  max-width: var(--maxw); margin: 0 auto;
}
.cookie-banner p{ margin:0; font-size: 14px; max-width: 70ch }
.cookie-banner a{ color: var(--orange); text-decoration: underline }
.cookie-banner__actions{ display:flex; gap: 10px; flex-wrap: wrap }
.cookie-banner .btn{ padding: 10px 18px }
.cookie-banner .btn--ghost{ border-color: var(--paper); color: var(--paper) }
.cookie-banner .btn--ghost:hover{ background: var(--paper); color: var(--ink) }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0) }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important }
  .reveal{ opacity: 1; transform: none }
}

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal{
  padding: 140px var(--pad) 80px;
  max-width: 880px;
  margin: 0 auto;
}
.legal h1{
  font-size: clamp(40px, 6vw, 64px);
  margin-bottom: 16px;
}
.legal h2{
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 48px 0 14px;
  color: var(--orange);
}
.legal p, .legal li{
  font-size: 16px; line-height: 1.7; margin: 0 0 12px;
}
.legal ul{
  list-style: disc; padding-left: 22px; margin: 0 0 16px;
}
.legal a{ color: var(--orange); text-decoration: underline }
.legal__updated{
  font-size: 13px; opacity: .65; margin-top: 8px;
}
.btn--inline{ padding: 6px 14px; font-size: 13px }
.legal__footer-bottom{ border: 0 }
.legal table{
  width: 100%; border-collapse: collapse; margin: 16px 0 24px;
  font-size: 14px;
}
.legal th, .legal td{
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid rgba(72,61,55,.15);
  vertical-align: top;
}
.legal th{
  background: var(--paper-2); font-weight: 700;
  font-size: 12px; letter-spacing:.06em; text-transform: uppercase; color: var(--brown);
}