/* =========================================================
   Rotar Atelier
   Black / cream / gold. Bodoni Moda (matches the Didone letterforms
   of the RT mark) over Hanken Grotesk. Flat colour, hairline rules,
   photography doing the heavy lifting.
   ========================================================= */

:root{
  --black: #14120f;
  --black-2: #1d1a16;
  --cream: #f6f1e7;
  --cream-2: #ece5d6;
  --gold: #c8a15c;
  --gold-light: #e2c78c;
  --gold-ink: #7a5c22;          /* gold that passes AA as small text on cream */

  --display: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --header: 72px;
  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 1240px;
  --ease: cubic-bezier(.22, .7, .2, 1);

  --fs-hero: clamp(2.75rem, 6.6vw, 5.75rem);
  --fs-h2: clamp(2.25rem, 4.6vw, 4rem);
}

*, *::before, *::after{ box-sizing: border-box; }
*{ margin: 0; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body{
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--cream);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.nav-open{ overflow: hidden; }

/* Browser chrome we didn't draw still carries the brand: selection and the
   scrollbar get the gold treatment instead of the OS/browser default. */
::selection{ background: var(--gold); color: var(--black); }
::-moz-selection{ background: var(--gold); color: var(--black); }
html{ scrollbar-width: thin; scrollbar-color: var(--gold) var(--black); }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: var(--black); }
::-webkit-scrollbar-thumb{ background: var(--gold); border-radius: 999px; border: 2px solid var(--black); }
::-webkit-scrollbar-thumb:hover{ background: var(--gold-light); }

/* Scroll progress: a direct 1:1 read of scroll position, not a decorative
   loop, so it stays exempt from the reduced-motion transition reset below. */
.scroll-progress{
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 3px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
}

img, svg{ display: block; max-width: 100%; }
img{ height: auto; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; padding: 0; }
h1, h2, h3{ text-wrap: balance; font-weight: 400; }
/* Bodoni Moda's optical-size axis runs 6-96. Auto-sizing pushes every size toward
   the thinnest hairlines, which vanish over photography and at text sizes.
   Headlines get a sturdier cut; text-sized Bodoni gets a sturdier one still. */
.display, .hero h1, .cater-name, .step-num{
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 34;
}
.principle h3, .step h3, .calm-statement, .calm-list dt, .slide h3, .slide-cta-body h3,
.quick strong, .quote p, .footer-name, .brand-word{
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 16;
}
p{ text-wrap: pretty; }

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.on-cream :focus-visible, .on-gold :focus-visible{ outline-color: var(--black); }

.container{
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip{
  position: fixed; left: 12px; top: -80px; z-index: 100;
  padding: 12px 18px; background: var(--gold); color: var(--black);
  font-weight: 600; transition: top .2s;
}
.skip:focus{ top: 12px; }

/* ---------- shared type ---------- */
.display{
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -.015em;
}
.display em, .hero h1 em{ font-style: italic; }
.lead{ font-size: 1.1875rem; line-height: 1.55; max-width: 34rem; margin-top: 24px; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 2px;
  font: 600 .8125rem/1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.btn-sm{ min-height: 40px; padding: 0 18px; font-size: .75rem; }
.btn-lg{ min-height: 56px; padding: 0 34px; }
.btn-block{ width: 100%; }
.btn-gold{ background: var(--gold); color: var(--black); }
.btn-gold:hover{ background: var(--gold-light); }
.btn-line{ border-color: rgba(246,241,231,.55); color: var(--cream); }
.btn-line:hover{ border-color: var(--gold); color: var(--gold-light); }
.btn-dark{ background: var(--black); color: var(--cream); }
.btn-dark:hover{ background: #2b2722; }
.icon{ width: 18px; height: 18px; flex: none; }

/* ---------- header ---------- */
/* Transparent over the hero photo; solidifies and the wordmark folds away
   to just the RT mark once the visitor scrolls past it (is-scrolled, set
   from the #top-sentinel observer in script.js). */
#top-sentinel{ position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header);
  display: flex; align-items: center;
  color: var(--cream);
  background: linear-gradient(180deg, rgba(14,12,9,.7) 0%, rgba(14,12,9,0) 100%);
  transition: background-color .4s var(--ease), height .4s var(--ease), box-shadow .4s;
}
.site-header.is-scrolled, body.nav-open .site-header{
  background: var(--black);
  height: 64px;
  box-shadow: 0 1px 0 rgba(246,241,231,.09);
}
.header-inner{ display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.header-inner > *{ position: relative; z-index: 2; }
.brand{ display: flex; align-items: center; gap: 13px; margin-right: auto; }
.brand-mark{ width: 42px; height: 42px; flex: none; transition: width .4s var(--ease), height .4s var(--ease); }
.is-scrolled .brand-mark{ width: 34px; height: 34px; }
.brand-word{
  display: inline-block;
  font-family: var(--display); font-size: 1.0625rem;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  max-width: 200px; opacity: 1;
  transition: max-width .4s var(--ease), opacity .25s, margin .4s var(--ease);
}
.is-scrolled .brand-word{ max-width: 0; opacity: 0; overflow: hidden; }

.nav{ display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.nav a:not(.btn){
  font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid transparent;
  opacity: .88; transition: opacity .2s, border-color .2s;
}
.nav a:not(.btn):hover{ opacity: 1; border-color: var(--gold); }

.lang{ display: flex; gap: 6px; }
.lang button{
  width: 30px; height: 20px; padding: 0; overflow: hidden;
  border: 1px solid rgba(246,241,231,.4); border-radius: 2px;
  background: none; cursor: pointer; opacity: .6;
  transition: opacity .2s, border-color .2s;
}
.lang button:hover{ opacity: 1; }
.lang button[aria-pressed="true"]{ opacity: 1; border-color: var(--gold); }
.lang svg{ width: 100%; height: 100%; }

.nav-toggle{
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav-toggle span{ width: 24px; height: 1.5px; background: var(--cream); transition: transform .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child{ transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform: translateY(-4.25px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--black); color: var(--cream);
}
.hero-media{ position: absolute; inset: 0; z-index: -2; }
.hero-media img{
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 38%;
  transform-origin: 62% 35%;
  animation: hero-zoom 22s var(--ease) both;
}
@keyframes hero-zoom{ from{ transform: scale(1.14); } to{ transform: scale(1); } }
.hero::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(14,12,9,.94) 0%, rgba(14,12,9,.55) 40%, rgba(14,12,9,.12) 62%, rgba(14,12,9,.4) 100%),
    linear-gradient(100deg, rgba(14,12,9,.55) 0%, rgba(14,12,9,0) 46%);
}

/* the seal: the one recurring brand mark, turning like a wax stamp catching light */
.hero-seal{
  position: absolute; z-index: 1;
  top: clamp(88px, 15vh, 168px); right: clamp(18px, 4.4vw, 64px);
  width: clamp(96px, 11vw, 176px); height: auto;
  opacity: .92;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.4));
  animation: seal-turn 50s linear infinite;
}
@keyframes seal-turn{ to{ transform: rotate(360deg); } }

.hero-inner{ position: relative; z-index: 1; width: 100%; padding-block: 0 clamp(64px, 11vh, 116px); }
.hero h1{
  font-family: var(--display);
  font-size: clamp(2.75rem, 6.2vw, 5.5rem);
  line-height: 1.03; letter-spacing: -.02em;
  max-width: 14em;
}
.hero h1 em{ display: block; color: var(--gold-light); text-wrap: balance; }
.hero-sub{
  max-width: 32rem; margin: 26px 0 40px;
  font-size: 1.1875rem; color: rgba(246,241,231,.9);
}
.hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; }

/* cascading entrance: a page-load animation, not a scroll-gated one, so it
   always resolves to visible even if the browser skips keyframes entirely. */
.hero-line{ opacity: 0; transform: translateY(26px); animation: hero-line-in .9s var(--ease) both; }
h1.hero-line{ animation-delay: .2s; }
.hero-sub.hero-line{ animation-delay: .42s; }
.hero-actions.hero-line{ animation-delay: .62s; }
@keyframes hero-line-in{ to{ opacity: 1; transform: none; } }

.hero-scroll{
  position: absolute; z-index: 1; left: 50%; bottom: clamp(20px, 4vh, 32px);
  transform: translateX(-50%);
  width: 1px; height: 52px; overflow: hidden;
}
.hero-scroll span{
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(246,241,231,0), var(--gold-light) 55%, rgba(246,241,231,0));
  animation: scroll-cue 2s ease-in-out infinite;
}
@keyframes scroll-cue{
  0%{ transform: translateY(-100%); } 100%{ transform: translateY(100%); }
}

/* ---------- sections ---------- */
.section{ padding-block: clamp(72px, 11vw, 148px); }
.on-cream{ background: var(--cream); color: var(--black); }
.on-dark{ background: var(--black); color: var(--cream); }
.on-gold{ background: var(--gold); color: var(--black); }
.on-dark .lead{ color: rgba(246,241,231,.82); }
.on-cream .lead{ color: rgba(20,18,15,.8); }

/* ---------- what we cater ---------- */
.cater-grid{
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.cater-head{ position: sticky; top: 112px; }
.cater-figure{ margin: clamp(28px, 4vw, 48px) 0 0; max-width: 330px; aspect-ratio: 3 / 4; overflow: hidden; }
.cater-figure img{ width: 100%; height: 100%; object-fit: cover; }
.cater-list{ border-top: 1px solid rgba(20,18,15,.3); }
.cater-row{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
  gap: 24px; align-items: baseline;
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid rgba(20,18,15,.3);
}
.cater-name{ font-family: var(--display); font-size: clamp(1.5rem, 2.5vw, 2.125rem); line-height: 1.3; transition: color .25s; }
.cater-desc{ font-size: 1rem; color: rgba(20,18,15,.8); }
.cater-go{ width: 24px; height: 24px; justify-self: end; align-self: center; color: var(--gold-ink); transition: transform .3s var(--ease); }
.cater-row:hover .cater-name{ color: var(--gold-ink); }
.cater-row:hover .cater-go{ transform: translateX(6px); }

/* ---------- how we cater ---------- */
.how-grid{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px); align-items: stretch;
}
.how-figure{ position: relative; min-height: 560px; overflow: hidden; }
.how-figure img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 26% 50%; }
.principles{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.6vw, 48px) clamp(24px, 3vw, 44px);
  margin-top: clamp(36px, 5vw, 60px);
}
.principle{ border-top: 1px solid rgba(246,241,231,.24); padding-top: 20px; }
.principle-major{ grid-column: 1 / -1; }
.principle h3{ font-family: var(--display); font-size: 1.5rem; line-height: 1.3; margin-bottom: 10px; }
.principle-major h3{ font-size: clamp(1.75rem, 2.8vw, 2.375rem); color: var(--gold-light); }
.principle p{ color: rgba(246,241,231,.82); max-width: 36rem; }

/* ---------- we come to you ---------- */
.steps{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px); margin-top: clamp(44px, 6vw, 84px);
}
.step{ border-top: 1px solid rgba(20,18,15,.35); padding-top: 22px; }
.step-num{
  display: block; margin-bottom: 18px;
  font-family: var(--display); font-style: italic; font-size: 3.25rem; line-height: 1;
  color: var(--gold-ink);
}
.step h3{ font-family: var(--display); font-size: 1.5rem; line-height: 1.3; margin-bottom: 10px; }
.step p{ color: rgba(20,18,15,.8); font-size: 1rem; }

/* ---------- calm service ---------- */
.calm-grid{
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 96px); align-items: end;
}
.calm .display{ font-size: clamp(3rem, 7.4vw, 6rem); line-height: .98; }
.calm-statement{
  margin-top: 32px; max-width: 28em;
  font-family: var(--display); font-size: clamp(1.375rem, 2.3vw, 1.875rem); line-height: 1.3;
}
.calm-list > div{ border-top: 1px solid rgba(20,18,15,.4); padding-block: 20px; }
.calm-list > div:last-child{ border-bottom: 1px solid rgba(20,18,15,.4); }
.calm-list dt{ font-family: var(--display); font-size: 1.375rem; line-height: 1.3; margin-bottom: 6px; }
.calm-list dd{ color: rgba(20,18,15,.86); }

/* ---------- gallery: a swipeable reel, not a mosaic ---------- */
.gallery-head .lead{ margin-top: 18px; }

.reel{
  position: relative;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  margin-top: clamp(36px, 5vw, 56px);
  cursor: grab;
}
.reel.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.reel::-webkit-scrollbar{ display: none; }
.reel-track{ display: flex; }

.slide{
  position: relative; flex: 0 0 auto;
  width: min(62vw, 420px); aspect-ratio: 3 / 4;
  margin-right: 16px; overflow: hidden;
  background: var(--black-2);
  scroll-snap-align: start;
}
.reel-track .slide:first-child{ margin-left: var(--gutter); }
.reel-track .slide:last-child{ margin-right: var(--gutter); }
.slide img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.reel:not(.is-dragging) .slide:hover img{ transform: scale(1.04); }
.slide figcaption{
  position: absolute; inset: auto 0 0 0;
  padding: clamp(18px, 2.4vw, 26px);
  background: linear-gradient(0deg, rgba(14,12,9,.94) 0%, rgba(14,12,9,.6) 50%, rgba(14,12,9,0) 100%);
}
.slide h3{ font-family: var(--display); font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.3; color: var(--cream); }
.slide figcaption p{ margin-top: 5px; font-size: .875rem; color: rgba(246,241,231,.82); }

.slide-cta{ display: block; color: inherit; }
.slide-cta img{ filter: brightness(.42) saturate(.75); }
.slide-cta-body{
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: clamp(22px, 3vw, 34px);
}
.slide-cta-body h3{ font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.3; color: var(--gold-light); }
.slide-cta-body p{ font-size: .9375rem; color: rgba(246,241,231,.85); max-width: 20rem; }
.link-arrow{ display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
.link-arrow svg{ width: 18px; height: 18px; transition: transform .3s var(--ease); }
.slide-cta:hover .link-arrow svg{ transform: translateX(6px); }

.reel-controls{ display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.reel-dots{ display: flex; gap: 8px; }
.reel-dots span{ width: 6px; height: 6px; border-radius: 50%; background: rgba(246,241,231,.32); transition: background .25s, transform .25s; }
.reel-dots span.is-active{ background: var(--gold-light); transform: scale(1.5); }
.reel-arrows{ display: flex; gap: 10px; }
.reel-arrow{
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(246,241,231,.32); background: none; color: var(--cream);
  cursor: pointer; transition: border-color .2s, background-color .2s;
}
.reel-arrow:hover{ border-color: var(--gold); background: rgba(200,161,92,.12); }
.reel-arrow:disabled{ opacity: .3; cursor: default; }
.reel-arrow:disabled:hover{ border-color: rgba(246,241,231,.32); background: none; }
.reel-arrow svg{ width: 17px; height: 17px; }

/* social proof: hidden until script.js has real quotes to show */
.proof{ margin-top: clamp(64px, 9vw, 128px); border-top: 1px solid rgba(246,241,231,.24); padding-top: clamp(28px, 4vw, 48px); }
.proof-title{ font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }
.proof-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: 28px; }
.quote p{ font-family: var(--display); font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.3; }
.quote footer{ margin-top: 16px; font-size: .9375rem; color: rgba(246,241,231,.78); }

/* ---------- FAQ: real questions, native <details> — no JS needed ---------- */
.faq-list{ margin-top: clamp(32px, 4vw, 48px); max-width: 46rem; border-top: 1px solid rgba(20,18,15,.3); }
.faq-item{ border-bottom: 1px solid rgba(20,18,15,.3); }
.faq-item summary{
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 22px;
  font-family: var(--display); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.3;
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold-ink); border-bottom: 1.5px solid var(--gold-ink);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(-135deg); }
.faq-item summary:hover{ color: var(--gold-ink); }
.faq-item p{ max-width: 40rem; padding-bottom: 24px; color: rgba(20,18,15,.8); }

/* ---------- lead form ---------- */
.start-grid{
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.start-side{ position: sticky; top: 112px; }
.quick{ margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(20,18,15,.3); }
.quick li{ border-bottom: 1px solid rgba(20,18,15,.3); }
.quick a{ display: flex; align-items: center; gap: 16px; padding-block: 18px; transition: color .2s; }
.quick a:hover{ color: var(--gold-ink); }
.quick .icon{ width: 22px; height: 22px; color: var(--gold-ink); }
.quick strong{ display: block; font-family: var(--display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; }
.quick small{ display: block; font-size: .9375rem; color: rgba(20,18,15,.78); }

.form{
  display: grid; gap: 20px;
  padding: clamp(24px, 3.4vw, 44px);
  background: #fbf8f2; border: 1px solid rgba(20,18,15,.16);
}
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label{ display: block; margin-bottom: 8px; font-size: .8125rem; font-weight: 500; color: rgba(20,18,15,.88); }
.field input, .field select, .field textarea{
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; color: var(--black);
  background: #fff; border: 1px solid rgba(20,18,15,.4); border-radius: 2px;
}
.field textarea{ min-height: 120px; resize: vertical; }
.field select{
  appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314120f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field ::placeholder{ color: rgba(20,18,15,.62); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--black); }
.field .is-invalid{ border-color: #a3261b; }
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-meta{ font-size: .8125rem; color: rgba(20,18,15,.74); }
.form-meta span{ display: block; }
.form-status{ min-height: 1.5em; font-weight: 500; }
.form-status.is-error{ color: #a3261b; }

/* confirmation panel: replaces the fields once the request has gone out */
.form-confirm{ text-align: center; padding: clamp(12px, 2vw, 24px) 8px; }
.form-confirm-icon{ width: 52px; height: 52px; margin: 0 auto 20px; color: var(--gold-ink); }
.form-confirm h3{ font-family: var(--display); font-size: 1.75rem; line-height: 1.2; }
.form-confirm > p{ margin-top: 10px; color: rgba(20,18,15,.8); }
.form-confirm-wa{ margin-top: 18px; font-size: .9375rem; color: rgba(20,18,15,.74); }
.form-confirm-wa a{ color: var(--gold-ink); font-weight: 600; }
.form-confirm-wa a:hover{ color: var(--black); }
.text-reset{
  display: inline-block; margin-top: 26px;
  background: none; border: 0; padding: 0;
  font: 600 .8125rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--black); border-bottom: 1px solid var(--gold); cursor: pointer;
}
.text-reset:hover{ color: var(--gold-ink); }

/* ---------- footer ---------- */
.site-footer{ background: var(--black); color: var(--cream); padding-top: clamp(48px, 7vw, 88px); }
.footer-inner{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(246,241,231,.16); }
.footer-brand{ display: flex; align-items: center; gap: 16px; }
.footer-name{ display: block; font-family: var(--display); font-size: 1.375rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-sub{ display: block; margin-top: 2px; font-size: .9375rem; color: rgba(246,241,231,.78); }
.footer-contact{ display: flex; flex-wrap: wrap; gap: 8px 32px; align-content: center; color: rgba(246,241,231,.86); }
.footer-contact a:hover{ color: var(--gold-light); }
.footer-base{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-block: 24px 32px; font-size: .875rem; color: rgba(246,241,231,.72); }
.footer-base p{ margin: 0; }
.footer-holy a{ color: var(--gold-light); }
.footer-holy a:hover{ color: var(--cream); }
.footer-mark{ font-family: var(--display); font-style: italic; letter-spacing: .04em; margin-left: auto; }

/* ---------- WhatsApp floating button: always one tap away ---------- */
.wa-fab{
  position: fixed; z-index: 45; right: clamp(18px, 3vw, 32px); bottom: clamp(20px, 3vw, 32px);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--black); color: var(--gold-light);
  box-shadow: 0 10px 28px -10px rgba(20,18,15,.5);
  transition: background-color .25s, transform .25s;
}
.wa-fab:hover{ background: var(--black-2); transform: translateY(-2px); }
.wa-fab svg{ width: 27px; height: 27px; position: relative; z-index: 1; }
.wa-fab-ring{
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--gold);
  animation: wa-pulse 2.4s ease-out 1s 3;
}
@keyframes wa-pulse{
  0%{ transform: scale(1); opacity: .9; }
  100%{ transform: scale(1.55); opacity: 0; }
}

/* ---------- mobile sticky bar ---------- */
.mobile-cta{ display: none; }

/* ---------- responsive ---------- */
/* Down from 1100px the nav becomes a full-screen sheet; down from 980px is
   where the desktop grids stack; below 720px mobile gets its own tuning,
   not a squeezed copy of the wide layout: a taller hero, a story-width
   reel, a bottom action bar that's always in thumb reach. */
@media (max-width: 1100px){
  .nav-toggle{ display: flex; }
  .nav{
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
    padding: 96px var(--gutter) 48px;
    background: var(--black);
    transform: translateY(-101%); visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s .45s;
  }
  .nav.is-open{ transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
  .nav a:not(.btn){
    font-family: var(--display); font-size: clamp(1.75rem, 7vw, 2.5rem);
    letter-spacing: 0; text-transform: none; padding: 8px 0; border: 0; opacity: 1;
  }
  .nav .nav-cta{ margin-top: 24px; min-height: 52px; padding: 0 28px; font-size: .8125rem; }
  .lang{ margin-left: auto; }
  .brand{ margin-right: 0; }
}

@media (max-width: 980px){
  .cater-figure{ max-width: none; aspect-ratio: 16 / 10; }
  .cater-figure img{ object-position: 50% 24%; }
  .cater-grid, .how-grid, .calm-grid, .start-grid{ grid-template-columns: 1fr; }
  .cater-head, .start-side{ position: static; }
  .how-figure{ min-height: 0; aspect-ratio: 4 / 3; }
  .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .calm-grid{ align-items: start; }
}

@media (max-width: 720px){
  :root{ --header: 64px; }

  /* Hero: full-height, seal tucked smaller so it never crowds the type,
     the cascade keeps its rhythm but the type sits closer to the type scale
     that actually fits a phone. */
  .hero{ min-height: 100svh; align-items: flex-end; }
  .hero-media img{ object-position: 66% 36%; }
  .hero-seal{ top: clamp(76px, 11vh, 110px); right: 16px; width: clamp(64px, 20vw, 92px); opacity: .85; }
  .hero-inner{ padding-bottom: clamp(120px, 20vh, 160px); }
  .hero h1{ font-size: clamp(2.35rem, 9.5vw, 3rem); max-width: 11em; }
  .hero-sub{ font-size: 1.0625rem; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; }

  /* What we cater */
  .cater-row{ grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 16px; }
  .cater-name{ grid-column: 1; }
  .cater-desc{ grid-column: 1; grid-row: 2; }
  .cater-go{ grid-column: 2; grid-row: 1 / 3; }

  .principles{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .field-row{ grid-template-columns: 1fr; }

  /* Gallery reel: each slide reads like a full story frame */
  .gallery{ padding-inline: 0; }
  .slide{ width: 80vw; aspect-ratio: 3 / 4.3; }
  .reel-arrows{ display: none; }
  .reel-controls{ justify-content: center; }

  .footer-base{ padding-bottom: 96px; flex-direction: column; align-items: flex-start; }
  .footer-mark{ margin-left: 0; }

  /* WhatsApp FAB sits just above the sticky bar instead of on top of it */
  .wa-fab{ width: 50px; height: 50px; right: 16px; bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 16px); }
  .wa-fab svg{ width: 24px; height: 24px; }

  /* Sticky action bar: call + quote, always one thumb-reach away */
  .mobile-cta{
    position: fixed; inset: auto 0 0 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1.5fr;
    background: var(--black); border-top: 1px solid rgba(200,161,92,.35);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-cta a{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 58px; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  }
  .mobile-cta-call{ color: var(--cream); }
  .mobile-cta-quote{ background: var(--gold); color: var(--black); }
}

@media (max-width: 480px){
  .brand-word{ font-size: .875rem; letter-spacing: .1em; }
  .brand{ gap: 10px; }
  .header-inner{ gap: 12px; }
  .slide{ width: 86vw; }
}

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