/* ============================================================
   Jolie Julie — jolie-julie.art
   ============================================================ */

:root{
  --white:#FFFDFC;
  --cream:#F6F2EB;
  --soft:#FAF7F1;
  --blush:#FADADD;
  --lav:#D8C5E2;
  --ink:#363438;
  --ink-hover:#4A474D;
  --grey:#71767C;
  --gold:#B99A5A;
  --gold-line:rgba(185,154,90,.45);
  --line:#E9E3DF;
  --green:#25D366;

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter:clamp(20px, 4vw, 56px);
  --section-y:clamp(80px, 10vw, 144px);
  --shell:1440px;
}

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

html{scroll-behavior:smooth;scroll-padding-top:96px}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
::selection{background:var(--blush)}

a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold)}

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

.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}

.skip{
  position:absolute;left:16px;top:-100px;z-index:200;
  background:var(--ink);color:var(--white);
  padding:12px 20px;border-radius:999px;font-size:14px;font-weight:700;
  transition:top .2s ease;
}
.skip:focus{top:16px;color:var(--white)}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* ── Typography ────────────────────────────────────────────── */

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.03em;margin:0}

/* Leading is looser than the source design's 0.98 / 1.02. Romanian sets a
   comma-below (ș, ț) under the baseline and a circumflex (î, â) above the
   cap line; at 0.98 the two collide between lines and a stray comma appears
   to float over the line beneath. */
h1{
  font-size:clamp(54px, 7.4vw, 116px);
  line-height:1.06;
  margin:26px 0 30px;
  max-width:12ch;
  text-wrap:balance;
}

h2{
  font-size:clamp(42px, 5vw, 82px);
  line-height:1.08;
  margin:20px 0 0;
  text-wrap:balance;
}

.section h3{font-size:30px;letter-spacing:-.01em}

.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin:0;
  display:flex;align-items:center;gap:14px;
}
.eyebrow.centered{justify-content:center;text-align:center}
.rule{display:inline-block;width:36px;height:1px;background:var(--gold);flex:none}

.display{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(30px, 3vw, 48px);line-height:1.15;letter-spacing:-.01em;
  margin:0;
}

.lede{font-size:clamp(17px, 1.6vw, 21px);color:var(--grey);max-width:46ch;margin:0;text-wrap:pretty}
.muted{color:var(--grey);text-wrap:pretty}
.muted.small,.small{font-size:13.5px}
.narrow{max-width:40ch}
.narrow-wide{max-width:48ch}

.signature{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--gold);margin:40px 0 0}
.signature.sm{font-size:15px;margin:0}

.link-underline{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.04em;
  border-bottom:1px solid var(--gold-line);padding-bottom:4px;
}
.arrow-icon{color:var(--gold);flex:none;transition:transform .25s ease}
.link-underline:hover .arrow-icon{transform:translateX(4px)}
.link-underline.arrow{margin-top:36px}

/* ── Buttons ───────────────────────────────────────────────── */

/* The transparent border keeps a solid button exactly as wide as an outlined
   one — the consent banner's Accept and Refuse must be the same size. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;min-height:44px;border-radius:999px;
  border:1px solid transparent;
  font-size:13px;font-weight:700;white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.btn-lg{padding:17px 34px;font-size:15px;gap:10px}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--ink-hover);color:var(--white)}
.btn-ghost{border:1px solid var(--gold-line);background:rgba(255,253,252,.6);color:var(--ink)}
.btn-ghost:hover{background:var(--white);color:var(--ink)}

.dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}

/* ── Announcement + header ─────────────────────────────────── */

.announce{
  background:var(--cream);border-bottom:1px solid var(--line);
  text-align:center;padding:9px 20px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:600;
}

.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,253,252,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  padding-block:16px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.brand-name{display:block;font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:.05em;line-height:1}
.brand-name.lg{font-size:28px}
.brand-tag{display:block;font-size:8.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.brand:hover .brand-name{color:var(--gold)}

.site-nav{display:flex;gap:clamp(16px,2.5vw,34px);font-size:13px;font-weight:600}
.site-nav a{color:var(--grey)}
.site-nav a:hover{color:var(--gold)}

@media (max-width:1100px){ .site-nav{display:none} }
/* Scoped to the header — an unscoped .btn rule here would also shrink the
   large CTA buttons below a 44px tap target. */
@media (max-width:520px){
  .header-inner{gap:12px}
  .site-header .btn{padding:10px 14px;font-size:12px}
}

/* ── Header actions + mobile menu ──────────────────────────── */

.header-actions{display:flex;align-items:center;gap:10px}

/* Below 480px the pill collapses to just "WhatsApp" so it and the hamburger
   fit side by side. display:none also removes the hidden label from the
   accessibility tree, so the link's name is always exactly one of the two. */
.cta-short{display:none}
@media (max-width:480px){
  .header-cta .cta-full{display:none}
  .header-cta .cta-short{display:inline}
}

.nav-toggle{
  display:none;                    /* desktop shows the full nav instead */
  position:relative;flex:none;
  width:44px;height:44px;padding:0;
  align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--ink);
}
.nav-toggle span{
  position:absolute;left:11px;right:11px;top:50%;height:1.5px;
  background:currentColor;transition:transform .3s ease;
}
.nav-toggle span:nth-child(1){transform:translateY(-3.5px)}
.nav-toggle span:nth-child(2){transform:translateY(3.5px)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}
/* Same breakpoint at which .site-nav hides. */
@media (max-width:1100px){ .nav-toggle{display:inline-flex} }

.mobile-menu{
  position:fixed;inset:0;z-index:100;
  background:rgba(255,253,252,.98);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-menu[hidden]{display:none}
.mobile-menu-inner{
  min-height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;
  padding:calc(88px + env(safe-area-inset-top)) var(--gutter) calc(40px + env(safe-area-inset-bottom));
}
.mobile-menu-links{
  list-style:none;margin:0;padding:0;
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;
}
.mobile-menu-links a{
  display:block;padding:12px 0;
  font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(30px,8vw,46px);color:var(--ink);
}
.mobile-menu-links a:hover{color:var(--gold)}
.mobile-menu-cta{width:100%;margin-top:24px}

/* Keep the header (brand, hamburger-as-X, WhatsApp pill) above the overlay,
   and lock the page behind it. */
body.nav-open{overflow:hidden}
body.nav-open .site-header{z-index:110}
body.nav-open .wa-fab{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  .mobile-menu-links li,.mobile-menu-cta{opacity:0;animation:menuIn .4s ease forwards}
  .mobile-menu-links li:nth-child(1){animation-delay:.04s}
  .mobile-menu-links li:nth-child(2){animation-delay:.12s}
  .mobile-menu-links li:nth-child(3){animation-delay:.20s}
  .mobile-menu-links li:nth-child(4){animation-delay:.28s}
  .mobile-menu-links li:nth-child(5){animation-delay:.36s}
  .mobile-menu-cta{animation-delay:.44s}
}
@keyframes menuIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Image slots ───────────────────────────────────────────── */

.slot{position:relative;overflow:hidden;background:var(--cream)}
.slot[data-ratio="3/4"]{aspect-ratio:3/4}
.slot[data-ratio="4/5"]{aspect-ratio:4/5}
.slot[data-ratio="1/1"]{aspect-ratio:1/1}
.slot[data-ratio="16/10"]{aspect-ratio:16/10}
.slot[data-ratio="21/9"]{aspect-ratio:21/9}
.slot[data-ratio="21/8"]{aspect-ratio:21/8}

.slot img{width:100%;height:100%;object-fit:cover}
.slot-hint{display:none}

/* Shown only when the photograph is missing (main.js flags it).
   Reads as a deliberate brand tile, not a broken image: the visitor sees the
   monogram and what the photograph will be, never a dashed developer box. */
/* place-content, not place-items: the latter centres the monogram and the
   caption inside their own stretched rows, pushing them to opposite ends. */
.slot.is-empty{
  display:grid;place-content:center;justify-items:center;
  background:linear-gradient(160deg,#FBF8F3,var(--cream));
}
.slot.is-empty img{display:none}
.slot.is-empty::before{
  content:"";
  width:clamp(46px,18%,72px);aspect-ratio:8/7;
  background:url('/images/mark.png') center/contain no-repeat;
  opacity:.5;
  margin-bottom:14px;
}
.slot.is-empty .slot-hint{
  display:block;max-width:30ch;padding:0 18px;text-align:center;
  font-family:var(--serif);font-size:clamp(15px,1.4vw,19px);font-weight:500;
  letter-spacing:.01em;color:var(--ink);line-height:1.3;
}
.slot.is-empty .slot-hint::after{
  content:"Fotografie în pregătire";
  display:block;margin-top:8px;
  font-family:var(--sans);font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
/* Tiny slots (the 21:8 panorama on a phone) would clip the monogram. */
.slot.is-empty[data-ratio="21/8"]::before,
.slot.is-empty[data-ratio="21/9"]::before{width:clamp(38px,9%,56px);margin-bottom:10px}

/* ── Hero ──────────────────────────────────────────────────── */

.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 84% 30%, rgba(250,218,221,.5), transparent 32%),
    radial-gradient(circle at 72% 78%, rgba(216,197,226,.32), transparent 26%),
    var(--white);
}
.hero-inner{
  padding-block:clamp(56px,8vh,110px) clamp(48px,7vh,90px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(36px,5vw,80px);
  align-items:center;min-height:86vh;
}

/* Hero action row — replaces the old lone "Descoperă" scroll cue.
   Primary is the filled pill; secondary keeps the quiet letterspaced style the
   scroll cue used, padded to a 44px tap target. */
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(36px,5vh,56px)}
.hero-secondary{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);
}
.hero-secondary:hover{color:var(--gold)}

.hero-art{justify-self:center;width:min(100%,470px);will-change:transform}
.hero-float{animation:jjFloat 7s ease-in-out infinite}
.hero-frame{
  position:relative;padding:14px;
  border:1px solid var(--gold-line);
  border-radius:220px 220px 32px 32px;
  background:linear-gradient(160deg,#FFFFFF,var(--cream));
}
.hero-photo{border-radius:210px 210px 24px 24px}
.hero-stem{position:absolute;left:50%;bottom:-40px;width:1px;height:40px;background:var(--gold)}
.hero-caption{
  text-align:center;margin:56px 0 0;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-weight:600;
}

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

/* ── Mobile hero: bring the product above the fold ─────────────
   On a phone the copy alone filled the first screen and the balloon sat
   entirely below it. Reclaim height (drop the announce bar, tighten the copy,
   smaller H1) and cap the visual so its top edge peeks into the first viewport
   with the bottom bleeding off as a scroll cue. Desktop is untouched. */
@media (max-width:640px){
  .announce{display:none}

  h1{font-size:clamp(2.3rem,9.4vw,3.1rem);max-width:18ch;margin:18px 0 22px}
  .lede-more{display:none}

  .hero-inner{min-height:auto;padding-block:22px 0;gap:22px}
  .hero-actions{margin-top:26px}

  .hero-art{width:min(100%,320px);max-height:44vh;max-height:44svh;overflow:hidden}
  .hero-float{animation:none}   /* a clipped frame that also floats reads as broken */
  .hero-caption{display:none}   /* sits below the bleed line */
}

/* ── Sections ──────────────────────────────────────────────── */

.section{border-top:1px solid var(--line);padding-block:var(--section-y)}
.section.tinted{background:var(--cream)}
.section.soft{background:var(--soft);padding-block:clamp(80px,10vw,130px)}

.section-head{max-width:900px}
.section-head.centered{text-align:center;max-width:760px;margin-inline:auto}
.section-head.centered .eyebrow{justify-content:center}

.split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(40px,6vw,110px);
}
.split-center{align-items:center;gap:clamp(40px,6vw,100px)}
.split-start{align-items:start;gap:clamp(40px,6vw,100px)}

/* ── Story ─────────────────────────────────────────────────── */

.story{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(28px,4vw,72px);
  align-items:center;
  margin-top:clamp(64px,7vw,110px);
}
.story-img{border-radius:24px;max-width:480px;width:100%}
.story-reverse .story-img{justify-self:end}
.story-copy .muted{max-width:44ch;margin:18px 0 0}

.story-wide{margin-top:clamp(64px,7vw,110px)}
.story-wide .slot{border-radius:28px}
.story-wide-copy{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  align-items:baseline;margin-top:26px;
}
.story-wide-copy .muted{max-width:40ch;margin:0}

/* ── Gallery ───────────────────────────────────────────────── */

.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.gallery-head .narrow{max-width:36ch;margin:0}
.gallery-intro{max-width:36ch}
/* Quiet "de la" price anchor — a deliberate premium signal, not per-model pricing. */
.price-note{margin:14px 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin:clamp(36px,4vw,56px) 0 clamp(28px,3vw,44px)}
.chip{
  cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:600;
  padding:10px 18px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,253,252,.7);color:var(--grey);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chip:hover{border-color:var(--gold-line);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}

.filter-status{margin:0 0 clamp(20px,2vw,28px);font-size:12.5px;color:var(--grey);min-height:1em}

.gallery{display:grid;gap:clamp(14px,1.8vw,24px);grid-template-columns:1fr}

.card{transition:transform .35s ease}
.card:hover{transform:translateY(-6px)}
.card[hidden]{display:none}
.card .slot{border-radius:22px;background:#EFE9E0}
.card-foot{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:16px}
.card-foot h3{font-size:26px;margin:6px 0 4px}
.card-foot .muted{max-width:38ch;margin:0}
.card-foot .link-underline{white-space:nowrap;font-size:12px;letter-spacing:.06em}
.occasion{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0}

@media (min-width:900px){
  .gallery{grid-template-columns:repeat(12,1fr);grid-auto-flow:dense}
  .span-4{grid-column:span 4}
  .span-5{grid-column:span 5}
  .span-7{grid-column:span 7}
  .span-12{grid-column:span 12}

  /* A filtered view has too few cards to fill a 12-column mosaic,
     so it falls back to an even track instead of leaving dead space. */
  .gallery:not([data-filter="Toate"]){grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .gallery:not([data-filter="Toate"]) .card{grid-column:auto}
}

@media (max-width:640px){
  .card-foot{flex-direction:column;align-items:flex-start;gap:12px}
  /* Lift the filter chips to the 44px touch floor on phones. Scoped to mobile
     so desktop chip sizing stays unchanged. */
  .chip{min-height:44px;display:inline-flex;align-items:center}
}

/* ── Interior list ─────────────────────────────────────────── */

.contents-list{margin:0}
.contents-list > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:22px 6px;border-bottom:1px solid var(--line);
  transition:padding-left .25s ease;
}
.contents-list > div:hover{padding-left:18px}
.contents-list dt{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(26px,2.4vw,38px);letter-spacing:-.01em;
}
.contents-list dd{margin:0;color:var(--grey);font-size:13px;text-align:right;max-width:34ch}

@media (max-width:520px){
  .contents-list > div{flex-direction:column;gap:6px}
  .contents-list dd{text-align:left}
}

/* ── Steps ─────────────────────────────────────────────────── */

.steps{
  list-style:none;margin:clamp(48px,6vw,88px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,48px);
}
.steps li{border-top:1px solid var(--gold-line);padding-top:26px}
.step-num{font-family:var(--serif);font-size:52px;font-weight:500;color:var(--gold);line-height:1;margin:0}
.steps h3{margin:16px 0 10px}
.steps .muted{margin:0;max-width:36ch}

/* ── Atelier ───────────────────────────────────────────────── */

.atelier-imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px)}
.atelier-imgs .slot{border-radius:22px}
.atelier-imgs .slot.offset{margin-top:44px}

/* ── Testimonials ──────────────────────────────────────────── */

.testimonials{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,64px);
}
.testimonials figure{margin:0;display:flex;flex-direction:column;gap:18px}
.testimonials blockquote{
  margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,2vw,30px);line-height:1.3;letter-spacing:-.01em;
}
.testimonials figcaption{font-size:12.5px;color:var(--grey)}
.testimonials .who{font-weight:700;color:var(--ink)}
.testimonial-note{
  margin:clamp(36px,4vw,52px) 0 0;text-align:center;
  font-size:11.5px;color:var(--grey);letter-spacing:.02em;
}

/* ── FAQ ───────────────────────────────────────────────────── */

.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0;font-family:var(--sans);font-size:inherit;letter-spacing:normal}

.faq-q{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  width:100%;padding:22px 4px;min-height:44px;
  font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);
}
.faq-q:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.faq-q:hover{color:var(--gold)}
.faq-icon{
  font-family:var(--serif);font-size:26px;font-weight:500;color:var(--gold);
  line-height:1;flex:none;transition:transform .3s ease;
}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}

.faq-a p{margin:0;padding:0 4px 24px;color:var(--grey);max-width:60ch;text-wrap:pretty}

/* Collapse by animating the row from 0fr to 1fr. The browser resolves the
   open height from the content itself, so an answer of any length is safe —
   a measured max-height would go stale as soon as the text reflows.
   Without JS the :has() rule never applies and every answer stays open. */
.js .faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
/* The padding must sit inside the clipped element, not on it — otherwise it
   survives the collapse and leaves every closed answer 24px tall. */
.js .faq-a > .faq-a-inner{overflow:hidden;min-height:0}
.js .faq-item:has(.faq-q[aria-expanded="true"]) .faq-a{grid-template-rows:1fr}

/* ── CTA ───────────────────────────────────────────────────── */

.cta{
  border-top:1px solid var(--line);
  background:linear-gradient(160deg,var(--cream),#F3E9E4);
  padding-block:clamp(96px,12vw,170px);
  text-align:center;
}
.cta .eyebrow{justify-content:center}
.cta h2{font-size:clamp(44px,5.6vw,92px);line-height:1.08;margin:22px auto 24px;max-width:18ch}
.cta .muted{max-width:52ch;margin-inline:auto}
.cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:44px}

/* ── Footer ────────────────────────────────────────────────── */

.site-footer{
  border-top:1px solid var(--line);background:var(--white);
  padding-block:clamp(48px,6vw,80px);
  padding-bottom:calc(clamp(48px,6vw,80px) + 72px); /* clears the WhatsApp button */
}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:start}
.footer-top .muted{margin:18px 0 0;max-width:32ch}
.footer-navs{display:flex;gap:clamp(32px,5vw,80px);flex-wrap:wrap}
.footer-navs nav{display:flex;flex-direction:column;gap:10px;font-size:13px;font-weight:600}
.col-title{
  font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--grey);margin:0 0 4px;
}
.footer-bottom{
  border-top:1px solid var(--line);margin-top:clamp(36px,4vw,56px);padding-top:24px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12px;color:var(--grey);
}
.footer-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* ── Legal pages ───────────────────────────────────────────── */

.legal{max-width:780px;margin-inline:auto;padding-block:clamp(48px,6vw,88px)}
.legal h1{font-size:clamp(38px,4.6vw,64px);line-height:1.1;max-width:none;margin:14px 0 10px}
/* Cormorant defaults to oldstyle figures, which render "1." at x-height and
   read as a lowercase letter in a numbered heading. */
.legal h2{font-size:clamp(23px,2.2vw,30px);line-height:1.25;margin:52px 0 14px;font-variant-numeric:lining-nums}
.legal h3{font-size:19px;font-family:var(--sans);font-weight:700;letter-spacing:normal;margin:28px 0 8px}
.legal p,.legal li{color:var(--grey);text-wrap:pretty;margin:0 0 14px}
.legal li{margin-bottom:8px}
.legal ul{padding-left:1.15em;margin:0 0 14px}
.legal strong{color:var(--ink);font-weight:600}
.legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-line)}
.legal .updated{font-size:12.5px;color:var(--grey);margin-bottom:40px}
.legal .back{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.legal .lead{font-size:18px;color:var(--ink)}

/* Remove together with the "not yet active" sentences when GA is switched on. */
.legal .note{
  background:var(--soft);border-left:2px solid var(--gold);
  padding:14px 18px;border-radius:0 8px 8px 0;
  font-size:14px;margin:0 0 14px;
}

.legal dl{margin:0;border-top:1px solid var(--line)}
.legal dl > div{display:flex;gap:20px;flex-wrap:wrap;padding:12px 2px;border-bottom:1px solid var(--line)}
.legal dt{min-width:190px;font-size:13px;font-weight:700;color:var(--ink)}
.legal dd{margin:0;color:var(--grey);font-size:14px}

/* Deliberately loud: these pages must not go live with the company
   identification data unfilled. */
.todo{
  background:#FBEFC9;box-shadow:0 0 0 1px var(--gold);border-radius:3px;
  padding:1px 6px;color:#6B5320;font-weight:700;font-size:.92em;
}

/* ── Floating WhatsApp ─────────────────────────────────────── */

.wa-fab{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--gold-line);color:var(--ink);
  padding:13px 22px;border-radius:999px;font-size:13px;font-weight:700;
  box-shadow:0 12px 40px rgba(66,53,48,.12);
  transition:background .2s ease;
}
.wa-fab:hover{background:var(--cream);color:var(--ink)}
@media (max-width:520px){ .wa-fab{right:16px;bottom:16px;padding:12px 18px} }

/* ── Cookie consent ────────────────────────────────────────────
   "Refuz" and "Accept" are the same size, weight and prominence. A reject
   button that is smaller, greyer or buried one level down is a dark pattern
   and defeats the purpose of asking. */

.cc{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:120;
  max-width:540px;margin-inline:auto;
  background:var(--white);border:1px solid var(--gold-line);border-radius:20px;
  padding:24px 26px;
  box-shadow:0 20px 60px rgba(66,53,48,.18);
  animation:ccIn .4s cubic-bezier(.2,.6,.2,1);
}
.cc[hidden]{display:none}
.cc:focus{outline:none}
.cc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.cc-title{
  font-family:var(--serif);font-size:26px;font-weight:500;
  letter-spacing:-.01em;line-height:1.2;margin:0 0 8px;
}
.cc-text{margin:0;color:var(--grey);font-size:14px;line-height:1.55;text-wrap:pretty}

.cc-actions{display:flex;gap:10px;margin-top:20px}
.cc-actions .btn{flex:1 1 0;min-width:0;font-size:14px}
/* Full-strength border so "Refuz" carries the same visual weight as the
   filled "Accept". A faint reject button is the asymmetry regulators object to. */
.cc-actions .btn-ghost{border-color:var(--ink);background:var(--white)}
.cc-actions .btn-ghost:hover{background:var(--cream)}

.cc-more{margin:14px 0 0;text-align:center}
.cc-more a{
  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--grey);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-line);
}

/* The floating WhatsApp button would sit under the banner on a phone. */
body.cc-open .wa-fab{opacity:0;pointer-events:none}

.cc-settings{
  all:unset;cursor:pointer;
  font-size:12px;color:var(--grey);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-line);
}
.cc-settings:hover{color:var(--gold)}
.cc-settings:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cc-settings[hidden]{display:none}

@keyframes ccIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:520px){
  .cc{left:10px;right:10px;bottom:10px;padding:20px}
  /* column, never column-reverse: reversing puts Accept above Refuz visually
     while the DOM keeps them the other way round, so keyboard and screen-reader
     order stops matching what is on screen (WCAG 1.3.2 / 2.4.3). */
  .cc-actions{flex-direction:column}
}

/* ── Reveal on scroll ──────────────────────────────────────── */

.reveal-init{opacity:0;transform:translateY(26px)}
.reveal-in{
  opacity:1;transform:none;
  transition:opacity .85s cubic-bezier(.2,.6,.2,1), transform .85s cubic-bezier(.2,.6,.2,1);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .reveal-init{opacity:1;transform:none}
}