/*
   Wedding Films Society
   Palette taken from the logo: oxblood #290302 / cream #EFEDE2
*/

/* Zaslia, the hero display face. Unicase, so it sets everything in caps */
@font-face{
  font-family:"Zaslia";
  src:url("assets/fonts/Zaslia.woff2") format("woff2"),
      url("assets/fonts/Zaslia.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --ox:        #290302;   /* logo background */
  --ox-soft:   #3A100E;
  --wine:      #5A0105;   /* mid accent */
  --cream:     #EFEDE2;   /* logo mark */
  --cream-dim: #DCD8CA;
  --ink:       #1C0201;

  --serif: "Playfair Display", "Times New Roman", serif;
  --sans:  "Jost", -apple-system, "Helvetica Neue", sans-serif;

  --gut: clamp(1.25rem, 5vw, 5rem);
  --max: 1440px;

  --t: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--cream);
  color:var(--ox);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; width:100%; height:auto }
/* <picture> only exists to offer WebP; it must not create a box of its own,
   or the object-fit and absolute positioning on the images below would break */
picture{ display:contents }
a{ color:inherit; text-decoration:none }
ol,ul{ list-style:none }

::selection{ background:var(--ox); color:var(--cream) }
:focus-visible{ outline:1px solid currentColor; outline-offset:5px }

.u-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip{
  position:absolute; left:-999px; top:0; z-index:99; padding:.75rem 1rem;
  background:var(--ox); color:var(--cream);
}
.skip:focus{ left:0 }

/* type */

.is-italic{ font-style:italic }

.eyebrow{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(.95rem,1.6vw,1.2rem);
  letter-spacing:.02em; opacity:.75;
}

.h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,5.2vw,4.25rem);
  line-height:1.02; letter-spacing:-.015em;
}



/* buttons */

/* --fill is the wipe colour and stays put; only the text colour flips,
   otherwise fill + border + text would all land on the same value and the
   button would read as a blank block. */
.btn{
  --fill:var(--cream);
  display:inline-block;
  /* a <button> brings its own UA background and does not inherit the font */
  background:none; font-family:var(--sans); font-weight:300; cursor:pointer;
  font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase;
  padding:1.05rem 2.1rem; border:1px solid var(--fill);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .5s var(--t);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--fill); transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--t);
}
.btn:hover::after,
.btn:focus-visible::after{ transform:scaleY(1) }
.btn--ghost{ --fill:var(--cream); color:var(--cream) }
.btn--ghost:hover,
.btn--ghost:focus-visible{ color:var(--ox) }
.btn--outline{ --fill:var(--ox); color:var(--ox) }
.btn--outline:hover,
.btn--outline:focus-visible{ color:var(--cream) }

.link-underline{
  font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase;
  padding-bottom:.35rem; background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s var(--t);
}
.link-underline:hover{ background-size:0% 1px; background-position:100% 100% }

/* nav */

.nav{
  position:fixed; inset:0 0 auto; z-index:40;
  color:var(--cream);
  transition:background .6s var(--t), color .6s var(--t), border-color .6s var(--t);
  border-bottom:1px solid transparent;
}
.nav__in{
  max-width:var(--max); margin-inline:auto;
  padding:1.05rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
/* full lockup, figures and all; it tightens up once the bar goes solid */
.nav__brand{
  display:block; width:clamp(148px,15vw,196px); position:relative;
  transition:width .6s var(--t);
}
.nav.is-solid .nav__brand{ width:clamp(130px,12vw,162px) }
.nav__logo{ transition:opacity .6s var(--t) }
.nav__logo--ox{ position:absolute; inset:0; opacity:0 }

.nav__links{ display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem) }
.nav__links a{
  font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase;
  opacity:.8; transition:opacity .35s var(--t);
}
.nav__links a:hover{ opacity:1 }
.nav__cta{
  border:1px solid currentColor; padding:.6rem 1.15rem; opacity:1 !important;
  transition:background .4s var(--t), color .4s var(--t), border-color .4s var(--t);
}
/* fill with the opposite of whatever the nav is sitting on */
.nav:not(.is-solid) .nav__cta:hover,
.nav:not(.is-solid) .nav__cta:focus-visible{
  background:var(--cream); border-color:var(--cream); color:var(--ox);
}
.nav.is-solid .nav__cta:hover,
.nav.is-solid .nav__cta:focus-visible{
  background:var(--ox); border-color:var(--ox); color:var(--cream);
}

.nav.is-solid{
  background:rgba(239,237,226,.88); backdrop-filter:blur(14px);
  color:var(--ox); border-color:rgba(41,3,2,.12);
}
.nav.is-solid .nav__logo--cream{ opacity:0 }
.nav.is-solid .nav__logo--ox{ opacity:1 }
.nav.is-hidden{ transform:translateY(-100%) }
.nav{ transition:transform .5s var(--t), background .6s var(--t), color .6s var(--t), border-color .6s var(--t) }

.nav__toggle{
  display:none; background:none; border:0; color:inherit; cursor:pointer;
  width:34px; padding:.5rem 0;
}
.nav__toggle span{ display:block; height:1px; background:currentColor; transition:transform .4s var(--t), opacity .3s }
.nav__toggle span+span{ margin-top:7px; width:60%; margin-left:auto }

@media (max-width:760px){
  .nav__toggle{ display:block }
  .nav__links{
    position:fixed; inset:0; background:var(--ox); color:var(--cream);
    flex-direction:column; justify-content:center; gap:2rem;
    clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--t);
  }
  .nav__links a{ font-size:.8rem }
  .nav.is-open{ background:transparent; border-color:transparent }
  .nav.is-open .nav__links{ clip-path:inset(0 0 0 0) }
  .nav.is-open .nav__brand{ position:relative; z-index:2 }
  .nav.is-open .nav__logo--cream{ opacity:1 }
  .nav.is-open .nav__logo--ox{ opacity:0 }
  .nav.is-open .nav__toggle{ position:relative; z-index:2; color:var(--cream) }
  .nav.is-open .nav__toggle span:first-child{ transform:translateY(4px) rotate(12deg) }
  .nav.is-open .nav__toggle span+span{ width:100%; transform:translateY(-4px) rotate(-12deg) }
}

/* hero (the oxblood to cream break, as in the reference) */

.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(to bottom, var(--ox) 0 78%, var(--cream) 78% 100%);
  padding:clamp(8rem,17vh,12rem) var(--gut) 0;
  text-align:center; color:var(--cream);
}

/* the laid table, on the left. the artwork sits on black, so screen blending
   drops the black out against the oxblood and leaves the glow */
/* the laid table, centred behind the copy. no blend, no mask, no motion */
.hero__art{
  position:absolute; left:50%; transform:translateX(-50%);
  top:6%; width:min(76%,940px); opacity:.2;
  pointer-events:none; user-select:none;
}
.hero__art img{ width:100%; height:auto }

/* the artwork runs under the copy, so lay an oxblood scrim between the two.
   it reads as depth rather than as a panel */
.hero__head::before{
  content:""; position:absolute; inset:-6% -10%; z-index:-1;
  background:radial-gradient(70% 56% at 50% 44%,
    rgba(41,3,2,.94) 0%, rgba(41,3,2,.8) 46%, rgba(41,3,2,0) 100%);
}

/* on a narrow screen the table spans the whole hero, centred behind the text
   and bleeding off both edges, dropped back so the copy stays legible.
   this has to sit after the base rule above, not up in the nav media block */
@media (max-width:760px){
  .hero__art{ top:8%; width:122%; opacity:.2 }
}

.hero__head{ position:relative; z-index:1; max-width:52rem; margin-inline:auto }

/* seasonal button, above the eyebrow. borrows the wipe from .btn so it reads
   as part of the same button family rather than a bolt-on badge */
.hero__note{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:.8rem;
  margin-bottom:2rem; padding:.78rem 1.5rem;
  border:1px solid rgba(239,237,226,.45); border-radius:100px;
  background:rgba(239,237,226,.07); backdrop-filter:blur(6px);
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream); white-space:nowrap;
  transition:color .45s var(--t), border-color .45s var(--t),
             transform .45s var(--t), box-shadow .45s var(--t);
}
.hero__note::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cream); transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--t);
}
.hero__note:hover,
.hero__note:focus-visible{
  color:var(--ox); border-color:var(--cream);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(41,3,2,.35);
}
.hero__note:hover::after,
.hero__note:focus-visible::after{ transform:scaleY(1) }

.hero__note-dot{
  width:6px; height:6px; flex:none; border-radius:50%;
  background:currentColor; animation:blip 2.6s ease-in-out infinite;
}
.hero__note-tag{ opacity:.85 }
.hero__note-cta{
  padding-left:.9rem; border-left:1px solid currentColor;
  opacity:1;
}
@keyframes blip{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

@media (max-width:480px){
  .hero__note{
    gap:.6rem; padding:.68rem 1.1rem;
    font-size:.55rem; letter-spacing:.16em;
  }
  .hero__note-cta{ padding-left:.65rem }
}
@media (prefers-reduced-motion:reduce){
  .hero__note-dot{ animation:none; opacity:.8 }
  .hero__note:hover, .hero__note:focus-visible{ transform:none }
}

.hero__title{
  font-family:"Zaslia", var(--serif); font-weight:400;
  font-size:clamp(1.85rem,6vw,5.5rem);
  line-height:.95; letter-spacing:.015em;
  margin:1.25rem 0 1.8rem;
}
/* one line per direct child, always three, never a wrapped fourth.
   must not catch the .w word wrappers the script injects inside them */
.hero__title > span{ display:block; white-space:nowrap }
.hero__title .w{ display:inline-block }
/* Zaslia ships no italic; a synthetic slant on a display face looks wrong */
.hero__title .is-italic{ font-style:normal }

.hero__lede{
  max-width:34rem; margin-inline:auto; opacity:.78;
  font-size:clamp(.9rem,.85rem + .2vw,1rem); line-height:1.85;
}
.hero__actions{
  margin-top:2.6rem; display:flex; gap:2rem; justify-content:center;
  align-items:center; flex-wrap:wrap;
}

.hero__frames{
  max-width:min(var(--max), 68rem); margin:clamp(4rem,9vw,7.5rem) auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,2.75rem);
  align-items:start;
}
.hero__frames .frame--b{ margin-top:clamp(2rem,6vw,5.5rem) }

/* frames */

.frame{ overflow:hidden; background:var(--ox-soft) }
.frame img{ transition:transform 1.2s var(--t) }
.frame[data-parallax] img{ transform:scale(1.12) }
.frame--a img{ aspect-ratio:3/4; object-fit:cover }
.frame--b img{ aspect-ratio:3/4; object-fit:cover }

/* generic section */

.section{
  position:relative;
  padding:clamp(5.5rem,13vw,10rem) var(--gut);
  max-width:var(--max); margin-inline:auto;
}
.section__head{ margin-bottom:clamp(3rem,6vw,5rem) }

/* approach */

.approach{ padding-top:clamp(6rem,12vw,9rem) }
.approach__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,7vw,7rem); align-items:center;
}
.approach__visual{ position:relative; padding-left:clamp(2.75rem,6vw,5rem) }
.approach__visual .frame img{ aspect-ratio:4/5; object-fit:cover }

.vertical-note{
  position:absolute; left:0; top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(.85rem,1.4vw,1.05rem);
  opacity:.5; white-space:nowrap;
}

.approach__text .h2{ font-size:clamp(1.9rem,3.7vw,3.4rem); margin-bottom:2rem }
.approach__text p{ max-width:34rem; opacity:.8 }
.approach__text p + p{ margin-top:1.25rem }
.approach__text .btn{ margin-top:2.5rem }

@media (max-width:860px){
  .approach__grid{ grid-template-columns:1fr }
  .approach__visual{ padding-left:2.5rem }
}

/* films */

.films{ padding-bottom:clamp(4rem,9vw,7rem) }
.films__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(2rem,5vw,4.5rem) clamp(1.5rem,4vw,3.5rem);
}
.film--offset{ margin-top:clamp(2rem,7vw,6rem) }
.film .frame{ position:relative }
.film .frame img{ aspect-ratio:3/2; object-fit:cover; transition:transform 1.2s var(--t), filter .8s var(--t) }
.film:hover .frame img{ transform:scale(1.045); filter:brightness(.78) }

/* hover: a quiet play cue, since these are films */
.film .frame::after{
  content:"Play"; position:absolute; left:50%; top:50%;
  width:clamp(5rem,7vw,7rem); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(239,237,226,.9); color:var(--cream);
  background:rgba(41,3,2,.15); backdrop-filter:blur(2px);
  display:grid; place-items:center;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  opacity:0; transform:translate(-50%,-50%) scale(.88);
  transition:opacity .5s var(--t), transform .7s var(--t);
}
.film:hover .frame::after,
.film:focus-visible .frame::after{ opacity:1; transform:translate(-50%,-50%) scale(1) }


@media (max-width:700px){
  .films__grid{ grid-template-columns:1fr }
  .film--offset{ margin-top:0 }
}

/* marquee */

.marquee{
  background:var(--ox); color:var(--cream);
  padding:clamp(1.4rem,2.6vw,2.1rem) 0;
  overflow:hidden; white-space:nowrap;
}
.marquee__track{ display:flex; width:max-content; animation:slide 46s linear infinite }
.marquee span{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.3rem,3.4vw,2.6rem); padding-right:.6em;
}
.marquee i{
  font-style:normal; font-size:.45em; vertical-align:.35em;
  padding:0 .9em; opacity:.45;
}
@keyframes slide{ to{ transform:translateX(-50%) } }

/* collections */

.packages{ position:relative; background:var(--cream) }
.packages__in{ position:relative }
.packages__lead{
  max-width:38rem; margin-top:1.75rem;
  font-size:.95rem; line-height:1.8; opacity:.78;
}
.packages /* the closing line needs its own ground, the texture runs under it */


/* the collections, as an editorial list. one cream panel over the engraved
   background, four rows, each row a link that wipes oxblood on hover */
.packages__list{ border-top:1px solid rgba(41,3,2,.22) }

.pkg{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:1fr auto auto;
  align-items:center; gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.25rem,2.6vw,2.25rem);
  color:var(--ox);
  transition:color .55s var(--t);
}
.pkg{ border-bottom:1px solid rgba(41,3,2,.16) }
.pkg::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ox); transform:scaleX(0); transform-origin:left;
  transition:transform .65s var(--t);
}
.pkg:hover,
.pkg:focus-visible{ color:var(--cream) }
.pkg:hover::after,
.pkg:focus-visible::after{ transform:scaleX(1) }

.pkg__head{ min-width:0 }
.pkg__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.65rem,3.4vw,2.9rem); line-height:1.05;
  transition:transform .55s var(--t);
}
.pkg:hover .pkg__name{ transform:translateX(.35rem) }


.pkg__price{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(.95rem,1.5vw,1.15rem); opacity:.75; white-space:nowrap;
}

.pkg__go{
  font-size:.6875rem; letter-spacing:.26em; text-transform:uppercase;
  white-space:nowrap; padding-bottom:.3rem;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--t);
}
.pkg:hover .pkg__go{ background-size:0% 1px; background-position:100% 100% }

@media (max-width:720px){
  .pkg{
    grid-template-columns:1fr auto;
    gap:.5rem 1.25rem;
  }
  .pkg__head{ grid-column:1 / -1 }
  .pkg__price{ justify-self:start }
  .pkg__go{ justify-self:end }
}

/* add-ons, on top of any collection */
.addons{
  margin-top:clamp(2.5rem,5vw,4rem);
  /* the list above already closes with its own rule; a second one here
     produced two hairlines with a dead band between them */
  padding:clamp(2rem,4vw,3rem) 0 0;
}
.addons__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem,2.2vw,1.75rem); margin-bottom:.5rem;
}
.addons__lead{ font-size:.88rem; opacity:.72; margin-bottom:1.75rem }
.addons__list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0 clamp(1.5rem,3vw,2.5rem);
}
.addons__list li{
  font-size:.85rem; padding:.7rem 0;
  border-top:1px solid rgba(41,3,2,.14); opacity:.85;
}

.note{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.5rem;
  border-top:1px solid rgba(41,3,2,.28);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; opacity:.55;
}


/* faq */

.faq__list{ border-top:1px solid rgba(41,3,2,.16); max-width:62rem }
.faq details{ border-bottom:1px solid rgba(41,3,2,.16) }
.faq summary{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding:1.55rem 0; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.4rem); line-height:1.3;
  transition:opacity .35s var(--t);
}
.faq summary:hover h3{ opacity:.6 }
.faq summary::after{
  content:"+"; flex:none; font-family:var(--sans); font-size:1.15rem;
  line-height:1; opacity:.5; transition:transform .45s var(--t);
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq__a{
  padding:0 3rem 1.85rem 0; max-width:52rem;
  font-size:.92rem; line-height:1.85; opacity:.75;
}

/* quote */

.quote{ text-align:center; padding-block:clamp(4rem,10vw,8rem) }
.quote blockquote{ max-width:44rem; margin-inline:auto }
.quote p{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.4rem,3.4vw,2.55rem); line-height:1.28;
  letter-spacing:-.01em;
}
.quote cite{
  display:block; margin-top:2.25rem; font-style:normal;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; opacity:.45;
}

/* contact */

.contact{
  max-width:none; background:var(--ox); color:var(--cream);
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(6rem,14vw,11rem);
}
.contact__bg{ position:absolute; inset:0; opacity:.5 }
.contact__bg img{ width:100%; height:100%; object-fit:cover }
.contact__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(125% 105% at 50% 48%, transparent 8%, var(--ox) 88%);
}
.contact__in{ position:relative; max-width:var(--max); margin-inline:auto }

.contact__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,8vw,6rem); line-height:1; letter-spacing:-.02em;
  margin:1rem 0 2.5rem;
}
.contact__mail{
  display:inline-block;
  font-size:clamp(.8rem,1.6vw,1rem); letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:.5rem;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--t);
}
.contact__mail:hover{ background-size:0% 1px; background-position:100% 100% }

/* set by the collection CTAs: which package the visitor picked */
.contact__picked{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:1.4rem; opacity:.75;
}
.contact__picked strong{ font-weight:400; opacity:1 }

/* the enquiry form; nothing is sent until these are filled in */
.enquiry{
  max-width:38rem; margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  text-align:left;
}
.enquiry__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.6rem clamp(1.25rem,3vw,2rem);
}
.enquiry__field--full{ grid-column:1 / -1 }
.enquiry__field--select{ position:relative }
.enquiry__field--select::after{
  content:"⌄"; position:absolute; right:.25rem; bottom:.85rem;
  font-size:1rem; line-height:0; opacity:.5; pointer-events:none;
}
.enquiry label{
  display:block; margin-bottom:.55rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; opacity:.55;
}
.enquiry input,
.enquiry select{
  width:100%; padding:.55rem 0; border:0; border-radius:0;
  background:none; color:var(--cream); color-scheme:dark;
  border-bottom:1px solid rgba(239,237,226,.3);
  font-family:var(--sans); font-weight:300; font-size:.95rem;
  appearance:none; -webkit-appearance:none;
  transition:border-color .4s var(--t);
}
.enquiry input:focus,
.enquiry select:focus{ outline:none; border-bottom-color:var(--cream) }
.enquiry select option{ background:var(--ox); color:var(--cream) }
/* only scold a field once it has been touched and left empty */
.enquiry input.is-missing,
.enquiry select.is-missing{ border-bottom-color:rgba(239,237,226,.85) }

.enquiry__opt{ opacity:.5; letter-spacing:.14em }

.enquiry__addons{ border:0; margin-top:2.4rem }
.enquiry__addons legend{
  padding:0; margin-bottom:1.1rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; opacity:.55;
}
.enquiry__checks{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.5rem }
/* these are <label>s too, so they need to outrank the .enquiry label rule
   above, which would otherwise force them block, uppercase and tracked out */
.enquiry .enquiry__check{
  display:flex; align-items:center; gap:.8rem; margin-bottom:0;
  font-size:.82rem; letter-spacing:.02em; text-transform:none;
  opacity:.85; cursor:pointer; transition:opacity .3s var(--t);
}
.enquiry .enquiry__check:hover{ opacity:1 }
.enquiry .enquiry__check input{
  width:15px; height:15px; flex:none; margin:0; padding:0; border-radius:0;
  border:1px solid rgba(239,237,226,.45); background:none;
  appearance:none; -webkit-appearance:none;
  transition:background .3s var(--t), border-color .3s var(--t);
}
.enquiry .enquiry__check input:checked{ background:var(--cream); border-color:var(--cream) }
.enquiry .enquiry__check input:focus-visible{ outline:1px solid var(--cream); outline-offset:3px }

.enquiry__send{ margin-top:2.6rem }
.enquiry__note{
  margin-top:1.1rem; min-height:1.4em;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; opacity:.65;
}

@media (max-width:620px){
  .enquiry__grid{ grid-template-columns:1fr }
  .enquiry__checks{ grid-template-columns:1fr }
}

.contact__list{
  margin:clamp(3.5rem,7vw,5.5rem) auto 0; max-width:38rem;
  border-top:1px solid rgba(239,237,226,.18);
}
.contact__list li{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:1.05rem .25rem; border-bottom:1px solid rgba(239,237,226,.18);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.contact__list span{ opacity:.45 }
.contact__list a{ opacity:.9; transition:opacity .3s var(--t) }
.contact__list a:hover{ opacity:.6 }

/* footer */

.foot{
  background:var(--ox); color:var(--cream);
  padding:clamp(3rem,6vw,4.5rem) var(--gut) 2.5rem;
  border-top:1px solid rgba(239,237,226,.12);
}
.foot__logo{ width:clamp(150px,20vw,240px); margin-inline:auto; opacity:.85 }
/* name, area and phone in one crawlable line */
.foot__nap{
  max-width:44rem; margin:2rem auto 0; text-align:center;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  line-height:2.2; opacity:.55;
}
.foot__nap a{ text-decoration:underline; text-underline-offset:4px }
.foot__row{
  max-width:var(--max); margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; flex-wrap:wrap;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; opacity:.55;
}
.foot__links{ display:flex; gap:clamp(1.25rem,3vw,2.5rem) }
.foot__links a{ transition:opacity .3s var(--t) }
.foot__links a:hover{ opacity:.6 }

/* WhatsApp, floating. kept in the house palette rather than WhatsApp green,
   which would be the one loud thing on an otherwise quiet page */
.wa{
  position:fixed; z-index:45;
  right:clamp(1rem,3vw,2.25rem); bottom:clamp(1rem,3vw,2.25rem);
  width:clamp(48px,5vw,56px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ox); color:var(--cream);
  border:1px solid rgba(239,237,226,.28);
  box-shadow:0 14px 34px rgba(41,3,2,.3);
  transition:transform .45s var(--t), background .45s var(--t),
             color .45s var(--t), box-shadow .45s var(--t);
}
.wa:hover,
.wa:focus-visible{
  transform:translateY(-4px);
  background:var(--cream); color:var(--ox);
  box-shadow:0 20px 44px rgba(41,3,2,.38);
}
.wa svg{ width:54%; height:54%; fill:currentColor; display:block }

@media (prefers-reduced-motion:reduce){
  .wa:hover, .wa:focus-visible{ transform:none }
}

/* mobile refinements: nothing here fires above 760px, so the desktop layout
   is untouched. two things needed fixing on a phone, legible type and
   tappable targets, since several controls sat under the 44px guideline */
@media (max-width:760px){
  .hero__note{ font-size:.66rem; letter-spacing:.16em; padding:.8rem 1.2rem }

  .enquiry label{ font-size:.68rem }

  /* a 15px checkbox is not a tap target; grow the box and the whole row */
  .enquiry .enquiry__check{
    min-height:44px; font-size:.88rem; gap:.9rem;
  }
  .enquiry .enquiry__check input{ width:19px; height:19px }
  .enquiry__checks{ gap:.35rem 1.5rem }

  .enquiry input,
  .enquiry select{ font-size:1rem; padding:.7rem 0 }   /* 16px stops iOS zooming on focus */

  /* give the small links room around them without moving them visually */
  .foot__links a,
  .contact__list a{ display:inline-block; padding:.75rem 0 }
  .foot__links{ gap:1.25rem 2rem; flex-wrap:wrap }

  .link-underline{ display:inline-block; padding-top:.85rem; padding-bottom:.85rem }
  .contact__mail{ display:inline-block; padding:.7rem 0 }

  /* the menu overlay links, which open at 22px */
  .nav__links a{ padding:.7rem 1rem }

  .nav__toggle{ width:44px; height:44px; display:grid; align-content:center }
  .nav__toggle span{ width:100% }
  .nav__toggle span+span{ width:60% }
}

/* film grain overlay */

.grain{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  opacity:.13; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* reveal */

/* text drifts in from the right and resolves out of a blur */
.reveal{
  opacity:0; transform:translate3d(46px,0,0); filter:blur(10px);
  transition:opacity .9s var(--t), transform 1.15s var(--t), filter .9s var(--t);
}
.reveal[data-delay="1"]{ transition-delay:.12s }
.reveal[data-delay="2"]{ transition-delay:.24s }
.reveal[data-delay="3"]{ transition-delay:.36s }

/* pictures and cards rise from underneath instead, and take their time.
   this has to sit ABOVE the .is-in rule: same specificity, so whichever
   comes last wins, and the resting state must be the one that wins. */
.frame.reveal,
.film.reveal,
.pkg.reveal{
  transform:translate3d(0,66px,0); filter:blur(8px);
  transition:opacity 1.25s var(--t), transform 1.45s var(--t), filter 1.1s var(--t);
}

.reveal.is-in{ opacity:1; transform:none; filter:blur(0) }

/* hero: every word swooshes up from the lower right */
.w{ display:inline-block }
.w i{
  display:inline-block; font-style:inherit; opacity:0;
  transform:translate3d(.75em,.45em,0) skewX(-8deg);
  filter:blur(12px);
  transition:opacity .8s ease, filter .9s ease,
             transform 1.05s cubic-bezier(.16,.86,.3,1);
}
.hero__title .w i{
  transform:translate3d(1.15em,.42em,0) skewX(-11deg);
  filter:blur(20px);
  transition-duration:.95s, 1.1s, 1.35s;
}
.is-in .w i{ opacity:1; transform:none; filter:blur(0) }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; filter:none; transition:none }
  .w i{ opacity:1; transform:none; filter:none; transition:none }
  .marquee__track{ animation:none }
  *{ transition-duration:.01ms !important }
}