/* Fonts: Playfair Display & Inter – SIL OFL 1.1, self-hosted (licences in /fonts) */
@font-face{font-family:'Playfair Display';src:url(../fonts/playfair-display-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(../fonts/playfair-display-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(../fonts/playfair-display-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(../fonts/playfair-display-latin-500-italic.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --blush:#F9E8E8;--blush-deep:#F0D0D0;--warm-white:#FDFAF7;
  --gold:#C9A96E;--gold-light:#E8D5B0;--gold-text:#7A5C2C;
  --charcoal:#2C2C2C;--mid:#5E5E5E;
  --serif:'Playfair Display',Georgia,serif;--sans:'Inter',Helvetica,Arial,sans-serif;
  --pad:clamp(72px,9vw,128px);--max:1160px;--gutter:clamp(20px,5vw,60px);--ease:.3s ease
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--sans);background:var(--warm-white);color:var(--charcoal);line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--charcoal);color:#fff;padding:8px 14px;z-index:200}
.skip:focus{left:8px}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* Loader */
#loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--warm-white);transition:opacity .4s ease,visibility .4s;animation:loader-failsafe 0s 2s forwards}
#loader img{width:min(160px,40vw);height:auto;mix-blend-mode:multiply;animation:loader-in .6s ease both}
@media(min-width:769px){#loader img{width:220px}}
#loader.hide,.no-loader #loader{opacity:0;visibility:hidden}
.no-loader #loader{display:none}
@keyframes loader-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden}}

/* Type */
.rule{display:block;width:48px;height:1px;background:var(--gold);margin:0 auto 20px}
.label{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);text-align:center;margin-bottom:12px}
.title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.6vw,48px);line-height:1.18;text-align:center;margin-bottom:16px}
.title em{font-style:italic;color:var(--gold-text)}
.intro{color:var(--mid);text-align:center;max-width:540px;margin:0 auto 56px;font-size:16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-radius:4px;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease),transform var(--ease)}
.btn-gold{background:var(--gold);color:var(--charcoal);border:1.5px solid var(--gold)}
.btn-gold:hover{background:var(--charcoal);border-color:var(--charcoal);color:#fff;transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal)}
.btn-outline:hover{background:var(--charcoal);color:#fff;transform:translateY(-1px)}
.btn-sm{padding:11px 22px;font-size:11px}

/* Header */
#header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(253,250,247,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,169,110,.18);transition:box-shadow var(--ease)}
#header.scrolled{box-shadow:0 2px 24px rgba(44,44,44,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:32px}
.nav-logo img{height:64px;width:auto}
.nav-links{display:flex;gap:36px}
.nav-links a{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width var(--ease)}
.nav-links a:hover::after{width:100%}
.hamburger{display:none;flex-direction:column;gap:5px;padding:10px;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--charcoal);transition:transform var(--ease),opacity var(--ease)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;background:var(--warm-white);border-top:1px solid var(--blush-deep);padding:8px 0 24px}
.mobile-menu.open{display:flex}
.mobile-menu a:not(.btn){padding:14px var(--gutter);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--blush)}
.mobile-menu .btn{margin:16px var(--gutter) 0}
@media(max-width:768px){
  .nav-links,.nav-book{display:none}
  .hamburger{display:flex}
  .nav-logo img{height:44px}
}

/* Hero */
#hero{min-height:100svh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#fff;padding:72px 0 64px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(249,232,232,.9) 0%,transparent 70%),radial-gradient(ellipse 50% 40% at 20% 80%,rgba(201,169,110,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 50% 10%,rgba(249,232,232,.5) 0%,transparent 70%)}
.petal{position:absolute;pointer-events:none}
.petal-1{width:380px;height:380px;top:-80px;right:-60px;background:var(--blush-deep);opacity:.6;border-radius:60% 40% 70% 30%/50% 60% 40% 50%}
.petal-2{width:220px;height:220px;bottom:10%;right:12%;background:var(--gold-light);opacity:.35;border-radius:40% 60% 30% 70%/60% 40% 60% 40%}
.petal-3{width:160px;height:160px;top:20%;left:4%;background:var(--blush);opacity:.5;border-radius:70% 30% 50% 50%/30% 70% 30% 70%}
.hero-content{position:relative;text-align:center;max-width:720px;padding:0 var(--gutter)}
.hero-logo{width:clamp(260px,48vw,540px);height:auto;margin:0 auto;mix-blend-mode:multiply}
h1.hero-h1{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(20px,2.2vw,26px);line-height:1.4;margin:8px auto 14px;max-width:520px}
.hero-sub{color:var(--mid);font-size:clamp(15px,1.5vw,17px);max-width:460px;margin:0 auto 36px}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:1px;height:36px;background:linear-gradient(to bottom,var(--gold),transparent);animation:drift 2s ease-in-out infinite}
@keyframes drift{50%{transform:translate(-50%,6px)}}

/* Story */
#story{padding:var(--pad) 0;background:var(--warm-white)}
.story{max-width:680px;margin:0 auto;text-align:center}
.story p{color:var(--mid);font-size:16px;line-height:1.85;margin-bottom:18px}
.story-stat{display:inline-flex;align-items:baseline;gap:14px;margin-top:22px;padding-top:28px;border-top:1px solid var(--blush-deep)}
.story-stat strong{font-family:var(--serif);font-style:italic;font-weight:400;font-size:44px;line-height:1;color:var(--gold-text)}
.story-stat span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.story-places{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:28px}
.story-places li{font-size:12px;letter-spacing:.08em;padding:8px 14px;border:1px solid var(--gold-light);border-radius:999px;background:#fff}

/* Work / gallery */
#work{padding:var(--pad) 0;background:var(--blush)}
#work .intro{color:var(--charcoal)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,22vw);grid-auto-flow:dense;gap:12px}
.gallery figure{overflow:hidden;border-radius:2px;background:var(--blush-deep)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.gallery figure:nth-child(5),.gallery figure:nth-child(8),.gallery figure:nth-child(10){grid-column:span 2}
@media(min-width:1160px){.gallery{grid-auto-rows:255px}}
.work-cta{text-align:center;margin-top:44px}
@media(max-width:768px){
  .gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:0 20px;margin:0 -20px;scroll-padding:0 20px;scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery figure{flex:0 0 82%;scroll-snap-align:start}
  .gallery img{aspect-ratio:4/5;height:auto}
  .dots{display:flex;justify-content:center;gap:6px;margin-top:18px}
  .dots i{width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.3;transition:opacity var(--ease)}
  .dots i.on{opacity:1}
}
@media(min-width:769px){.dots{display:none}}

/* Book */
#book{padding:var(--pad) 0;background:var(--warm-white)}
.hours{max-width:420px;margin:0 auto 52px;text-align:center}
.hours h3{font-family:var(--serif);font-weight:500;font-size:20px;margin-bottom:14px}
.hours table{width:100%;border-collapse:collapse}
.hours tr{border-bottom:1px solid var(--blush-deep)}
.hours td{padding:10px 0;font-size:14px}
.hours td:first-child{text-align:right;padding-right:22px;font-weight:500}
.hours td:last-child{text-align:left;color:var(--gold-text);font-weight:500}
.hours small{display:block;margin-top:12px;font-size:13px;color:var(--mid)}
.locations{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.loc{background:#fff;border:1px solid rgba(201,169,110,.22);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:transform var(--ease),box-shadow var(--ease)}
.loc:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(44,44,44,.08)}
.loc-map{aspect-ratio:4/3;background:var(--blush);position:relative}
.loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);background-image:repeating-linear-gradient(-45deg,rgba(201,169,110,.08) 0,rgba(201,169,110,.08) 1px,transparent 1px,transparent 8px)}
.map-fallback svg{width:30px;height:30px;stroke:var(--gold-text);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.map-fallback:hover span{text-decoration:underline}
.loc-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.loc-tag{align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);background:var(--blush);padding:5px 10px;border-radius:999px;margin-bottom:12px}
.loc h3{font-family:var(--serif);font-weight:500;font-size:20px;margin-bottom:12px}
.row{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--mid);margin-bottom:8px;line-height:1.5}
.row svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;stroke:var(--gold-text);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.row a:hover{color:var(--charcoal);text-decoration:underline}
.loc .btn{margin-top:auto;align-self:stretch}
.loc .row:last-of-type{margin-bottom:22px}


/* Gift */
#gift{padding:var(--pad) 0;background:var(--charcoal);color:var(--warm-white);text-align:center;position:relative;overflow:hidden}
#gift .label{color:var(--gold)}
#gift .title{color:var(--warm-white)}
#gift .title em{color:var(--gold)}
#gift .intro{color:rgba(253,250,247,.75)}
#gift .btn-gold:hover{background:#fff;border-color:#fff;color:var(--charcoal)}
.gift-card{width:min(340px,80vw);aspect-ratio:1.6;margin:0 auto 44px;border-radius:14px;background:linear-gradient(135deg,#F9E8E8 0%,#F0D0D0 55%,#E8D5B0 100%);box-shadow:0 30px 60px rgba(0,0,0,.35);display:grid;place-items:center;position:relative;transform:rotate(-3deg)}
.gift-card img{width:64%;mix-blend-mode:multiply}
.gift-card span{position:absolute;bottom:14px;right:18px;font:600 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.gift-points{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin:-24px 0 40px;font-size:13px;color:rgba(253,250,247,.75)}
.gift-points li::before{content:'✦';color:var(--gold);margin-right:8px}

/* Footer */
footer{background:var(--blush);color:var(--charcoal);padding:52px 0 30px}
.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding-bottom:30px;margin-bottom:26px;border-bottom:1px solid rgba(122,92,44,.2)}
.foot-logo img{height:72px;width:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:26px}
.foot nav a{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.foot nav a:hover,.foot-contact a:hover{color:var(--gold-text)}
.foot-contact{display:flex;flex-direction:column;gap:6px;font-size:13px}
.foot-contact a{display:inline-flex;align-items:center;gap:8px}
.foot-contact svg{width:15px;height:15px;fill:currentColor}
.copy{text-align:center;font-size:12px;color:var(--mid)}
@media(max-width:700px){.foot{flex-direction:column;text-align:center}.foot nav{justify-content:center}.foot-contact{align-items:center}}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.no-js .reveal{opacity:1;transform:none}

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

/* ===== Scroll movement =====
   Uses CSS scroll-driven animations (no JS, no scroll listeners).
   Browsers without support get the simple fade-up reveal above. */
.gift-title{max-width:640px;margin:0 auto 48px}
.gift-pick{font-size:13px;letter-spacing:.08em;color:rgba(253,250,247,.75);margin-bottom:16px}
.gift-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
@media(max-width:600px){.gift-links{flex-direction:column;max-width:300px;margin:0 auto}}
.gift-card{transform:rotate(-3deg)}
.gift-points{display:none}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Hero: content drifts up and fades, petals move at different speeds */
    .hero-move{animation:hero-out linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .petal-1{animation:float-a linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .petal-2{animation:float-b linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .petal-3{animation:float-c linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    @keyframes hero-out{to{transform:translateY(-90px) scale(.96);opacity:0}}
    @keyframes float-a{to{transform:translate(40px,180px) rotate(25deg)}}
    @keyframes float-b{to{transform:translate(-30px,-160px) rotate(-20deg)}}
    @keyframes float-c{to{transform:translate(20px,120px) rotate(30deg)}}

    /* Section rules grow in */
    .rule{animation:rule-in linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    @keyframes rule-in{from{width:0}to{width:48px}}

    /* Story stat counts up visually */
    .story-stat strong{animation:pop linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    @keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

    /* Gallery (desktop): photos rise and un-zoom as they enter */
    @media (min-width:769px){
      .gallery figure{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
      .gallery figure img{animation:unzoom linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
      .gallery figure:nth-child(3n+2){animation-range:entry 10% cover 42%}
      .gallery figure:nth-child(3n){animation-range:entry 20% cover 50%}
    }
    @keyframes rise{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
    @keyframes unzoom{from{transform:scale(1.18)}to{transform:scale(1)}}

    /* Gallery (mobile swipe row): cards scale as they slide into the row */
    @media (max-width:768px){
      .gallery figure{animation:swipe-in linear both;animation-timeline:view(inline);animation-range:entry 0% cover 45%}
      @keyframes swipe-in{from{transform:scale(.9);opacity:.5}to{transform:none;opacity:1}}
    }

    /* Location cards: staggered slide-up */
    @media (min-width:769px){
      .stagger > .loc{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
      .stagger > .loc:nth-child(2){animation-range:entry 8% cover 38%}
      .stagger > .loc:nth-child(3){animation-range:entry 16% cover 46%}
    }

    /* Mobile booking carousel: continuous 3D coverflow tied to the swipe */
    @media (max-width:768px){
      .locations > .loc{transition:box-shadow .3s ease;animation:coverflow linear both;animation-timeline:view(inline)}
      @keyframes coverflow{
        0%  {transform:translateZ(-160px) rotateY(-28deg) scale(.9);opacity:.55;z-index:1;filter:brightness(.94)}
        50% {transform:none;opacity:1;z-index:5;filter:none}
        100%{transform:translateZ(-160px) rotateY(28deg) scale(.9);opacity:.55;z-index:1;filter:brightness(.94)}
      }
    }

    /* Mobile hero fan sinks away as you scroll */
    .hero-fan{animation:fan-out linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    @keyframes fan-out{to{transform:translateY(90px);opacity:.2}}

    /* Gift card swings straight as it scrolls into view */
    .gift-card{animation:card-swing linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    @keyframes card-swing{from{transform:rotate(-14deg) translateY(80px) scale(.85);opacity:0}to{transform:rotate(-3deg);opacity:1}}
  }
}

/* ===== Mobile homepage ===== */
.hero-fan{display:none}
@media (max-width:768px){
  #hero{align-items:flex-start;padding:104px 0 230px;min-height:100svh}
  .hero-content{padding:0 24px}
  .hero-logo{width:min(310px,80vw)}
  h1.hero-h1{font-size:23px;margin:6px auto 10px}
  .hero-sub{font-size:15px;margin-bottom:26px;max-width:320px}
  .hero-ctas{flex-direction:column;align-items:center;gap:10px}
  .hero-ctas .btn{width:min(300px,100%);padding:16px 24px}
  .petal-1{width:240px;height:240px;top:-70px;right:-90px}
  .petal-2{width:150px;height:150px;bottom:auto;top:46%;right:-60px}
  .petal-3{width:110px;height:110px;top:30%;left:-50px}
  .hero-scroll{display:none}
  .hero-fan{display:block;position:absolute;left:0;right:0;bottom:0;height:230px;pointer-events:none}
  .hero-fan img{position:absolute;left:50%;bottom:-54px;width:158px;height:auto;aspect-ratio:3/4;object-fit:cover;border:5px solid #fff;border-radius:12px;box-shadow:0 18px 40px rgba(44,44,44,.22)}
  .hero-fan img:nth-child(1){--r:-13deg;--x:-128%;--y:18px}
  .hero-fan img:nth-child(2){--r:0deg;--x:-50%;--y:0px;z-index:2;width:172px}
  .hero-fan img:nth-child(3){--r:13deg;--x:28%;--y:18px}
  .hero-fan img{transform:translate(var(--x),var(--y)) rotate(var(--r))}
}
@media (max-width:768px){.hero-fan img{animation:fan-in .9s cubic-bezier(.2,.8,.2,1) both .7s}.no-loader .hero-fan img{animation-delay:.15s}}
@media (max-width:768px) and (max-height:740px){#hero{padding:88px 0 190px}.hero-logo{width:min(250px,66vw)}h1.hero-h1{font-size:21px}.hero-sub{margin-bottom:20px}.hero-fan{height:170px}.hero-fan img{width:118px;bottom:-40px}.hero-fan img:nth-child(2){width:128px}}
@keyframes fan-in{from{transform:translate(-50%,120px) rotate(0)}to{transform:translate(var(--x),var(--y)) rotate(var(--r))}}

/* ===== Mobile booking carousel ===== */
@media (max-width:768px){
  .locations{display:flex;max-width:none;margin:0 calc(var(--gutter) * -1);padding:16px 15vw 28px;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;perspective:1100px;perspective-origin:50% 40%}
  .locations::-webkit-scrollbar{display:none}
  .locations > .loc{flex:0 0 70vw;margin-right:-9vw;scroll-snap-align:center;scroll-snap-stop:always;position:relative;transform-style:preserve-3d;will-change:transform}
  .locations > .loc:last-child{margin-right:0}
  .locations > .loc:hover{transform:none;box-shadow:none}
  .locations > .loc.active{box-shadow:0 22px 50px rgba(44,44,44,.14)}
  /* maps don't steal the swipe; tapping opens Google Maps */
  .loc-map iframe{pointer-events:none}
  .loc-dots{margin-top:6px}
}
/* Fallback for browsers without scroll-driven animations (e.g. Firefox) */
@supports not (animation-timeline: view()){
  @media (max-width:768px){
    .locations > .loc{transition:transform .45s ease,opacity .45s ease,box-shadow .3s ease;transform:translateZ(-160px) scale(.9);opacity:.55;z-index:1}
    .locations > .loc.active{transform:none;opacity:1;z-index:5}
    .locations > .loc.left{transform:translateZ(-160px) rotateY(28deg) scale(.9)}
    .locations > .loc.right{transform:translateZ(-160px) rotateY(-28deg) scale(.9)}
  }
}
@media (prefers-reduced-motion:reduce){
  .locations > .loc{animation:none!important;transform:none!important;opacity:1!important}
  .hero-fan img{animation:none!important}
}
@media (min-width:769px) and (max-width:900px){.locations{grid-template-columns:1fr;max-width:480px;margin:0 auto}}