/*
Theme Name: Tractor Shed Cafe
Theme URI: https://tractorshedcafe.co.uk
Author: navayu.digital
Description: Bespoke one-page theme for The Tractor Shed cafe and events venue at AMIA House, Bow, Devon. Premium coffee. Fresh food. Big machines. Home of Digger Dan.
Version: 1.4.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: tractorshedcafe
*/

/* Admin bar offset for the fixed header */
body.admin-bar header{top:32px}
@media (max-width:782px){body.admin-bar header{top:46px}}

/* ============ Fonts (self-hosted) ============ */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/fredoka-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/fredoka-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/fredoka-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/nunito-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/nunito-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/nunito-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/caveat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/caveat-latin-600-normal.woff2') format('woff2')}

/* ============ Tokens ============ */
:root{
  --navy:#0c1326;          /* page dark base */
  --navy-2:#111c3c;        /* panel */
  --navy-3:#1625522;
  --violet:#322da0;
  --cyan:#00e3ff;
  --cyan-soft:#7deeff;
  --cream:#f7f4ec;
  --cream-2:#efeadd;
  --ink:#131320;
  --ink-soft:#4a4a63;
  --white:#fff;
  --line:rgba(255,255,255,.14);
  --font-head:'Fredoka',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-hand:'Caveat','Segoe Script',cursive;
  --r-lg:26px;--r-md:18px;
  --shadow:0 18px 50px rgba(12,19,38,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--navy);line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.1}
.wrap{width:min(1200px,92%);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--cyan);color:var(--navy);font-weight:800;padding:.7rem 1.2rem;border-radius:0 0 12px 0;text-decoration:none}
.skip:focus{left:0}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:.24em;font-size:.7rem;text-transform:uppercase}
.eyebrow.on-dark{color:var(--cyan)}
.eyebrow.on-light{color:#207b8c}
.h2{font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:-.01em;margin:.55rem 0 1rem}
.h2 .cy{color:var(--cyan)}
.h2 .vi{color:var(--violet)}
.lead{font-size:1.06rem;max-width:60ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;white-space:nowrap;font-family:var(--font-head);font-weight:600;font-size:1rem;padding:.85rem 1.7rem;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s,color .25s}
.btn:active{transform:scale(.97)}
.btn-cyan{background:var(--cyan);color:var(--navy);box-shadow:0 10px 26px rgba(0,227,255,.32)}
.btn-cyan:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,227,255,.45)}
.btn-line{border-color:rgba(255,255,255,.45);color:#fff}
.btn-line:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-sm{font-size:.9rem;padding:.55rem 1.25rem}
.arrow-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;color:#fff;text-decoration:none;border-bottom:2px solid var(--cyan);padding-bottom:.15rem}
.arrow-link:hover{color:var(--cyan)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* ============ Header ============ */
header{position:fixed;inset:0 0 auto 0;z-index:90;padding:16px 0;transition:background .35s,box-shadow .35s,padding .35s}
header.scrolled{background:rgba(12,19,38,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.35);padding:9px 0}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand .gearwrap{width:62px;height:62px;border-radius:16px;background:#fff;display:grid;place-items:center;flex:none;transition:width .35s,height .35s}
.brand .gearwrap img{width:50px;height:50px;transition:width .35s,height .35s}
header.scrolled .brand .gearwrap{width:48px;height:48px}
header.scrolled .brand .gearwrap img{width:38px;height:38px}
.brand .t{font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:#fff;line-height:1.05;letter-spacing:.02em}
.brand .t small{display:block;font-family:var(--font-body);font-weight:800;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}
nav.primary{display:flex;align-items:center;gap:1.5rem}
nav.primary a{font-weight:800;font-size:.9rem;text-decoration:none;color:rgba(255,255,255,.85);transition:color .3s}
nav.primary a:hover{color:var(--cyan)}
.header-cta{display:flex;gap:.55rem;align-items:center}
.header-cta .btn svg{width:15px;height:15px;fill:currentColor;flex:none}
.only-mobile{display:none}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;z-index:99;position:relative}
.hamburger span{display:block;width:26px;height:3px;border-radius:2px;background:#fff;margin:5px 0;transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============ Hero ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero video,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .fallback{background:url('assets/still_3.jpg') center/cover no-repeat}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,19,38,.94) 0%,rgba(12,19,38,.72) 38%,rgba(12,19,38,.25) 75%,rgba(12,19,38,.45) 100%)}
.hero .shade::after{content:"";position:absolute;inset:auto 0 0 0;height:32%;background:linear-gradient(180deg,transparent,rgba(12,19,38,.92))}
.hero .inner{position:relative;z-index:2;padding:130px 0 90px;width:min(1200px,92%);margin-inline:auto}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:700;letter-spacing:-.01em;line-height:1.04;margin:.9rem 0 1.2rem}
.hero h1 span{display:block}
.hero h1 .l3{color:var(--cyan)}
.hero h1 .l4{display:inline-block;width:max-content;font-family:var(--font-hand);font-weight:600;font-size:.62em;letter-spacing:.01em;color:var(--navy);background:var(--cyan);padding:.02em .5em .12em;border-radius:.18em;margin-top:.3em;transform:rotate(-2deg);box-shadow:6px 8px 0 rgba(0,227,255,.25)}
.hero p.tag{max-width:46ch;font-size:1.08rem;color:rgba(255,255,255,.88);margin-bottom:1.9rem}
.hero .cta{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.press-inline{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);border-radius:999px;padding:.45rem 1.05rem;font-size:.8rem;font-weight:800;color:rgba(255,255,255,.9);text-decoration:none}
.press-inline:hover{border-color:var(--cyan);color:var(--cyan)}

/* ============ Marquee ============ */
.marquee{background:#fff;color:var(--navy);overflow:hidden;padding:.8rem 0;position:relative;z-index:3}
.marquee .track{display:flex;gap:2.6rem;white-space:nowrap;width:max-content;animation:scroll 32s linear infinite}
.marquee span{font-family:var(--font-head);font-weight:600;font-size:.94rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:2.6rem}
.marquee i{font-style:normal;font-weight:700}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ Built differently ============ */
.built{background:var(--cyan);padding:110px 0 100px;position:relative}
.built .eyebrow{color:var(--navy)}
.built .h2{color:var(--navy)}
.built .h2 .vi{color:var(--violet-deep,#1a1656)}
.built .feat b{color:var(--navy)}
.built .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:4.5rem;align-items:center}
.built .copy p{color:rgba(12,19,38,.85);margin-bottom:1rem}
.feat{display:flex;gap:1rem;align-items:flex-start;margin-top:1.5rem}
.feat .fic{width:52px;height:52px;border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(12,19,38,.1);display:grid;place-items:center;flex:none}
.feat .fic svg{width:26px;height:26px;fill:var(--violet)}
.feat b{font-family:var(--font-head);font-weight:600;font-size:1.05rem;letter-spacing:.02em}
.feat small{display:block;color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.built .feat small{color:rgba(12,19,38,.78)}
.photostack{position:relative}
.photostack .main{border-radius:var(--r-lg);box-shadow:var(--shadow);border:6px solid #fff}
.photostack .snap{position:absolute;bottom:-46px;left:-34px;width:200px;background:#fff;padding:.6rem .6rem 2.4rem;border-radius:10px;box-shadow:0 20px 44px rgba(12,19,38,.28);transform:rotate(-6deg)}
.photostack .snap img{border-radius:6px}
.photostack .snap span{position:absolute;bottom:.5rem;left:0;right:0;text-align:center;font-family:var(--font-hand);font-weight:600;font-size:1.15rem;color:var(--ink-soft)}
.photostack .press{position:absolute;top:-20px;right:-12px;background:var(--navy);color:#fff;border-radius:999px;padding:.6rem 1.2rem;font-weight:800;font-size:.8rem;box-shadow:0 12px 30px rgba(12,19,38,.35);text-decoration:none;transform:rotate(3deg)}
.photostack .press i{font-style:normal;color:var(--cyan)}
.photostack .press:hover{background:var(--violet)}
.photostack .press.hygiene{display:inline-flex;align-items:center;gap:.45rem;background:#0a6e37}
.photostack .press.hygiene:hover{background:#0a6e37}
.photostack .press.hygiene svg{width:17px;height:17px;fill:#fff;flex:none}
.photostack .press.hygiene .ht{display:block;line-height:1.3;white-space:nowrap}
.photostack .press.hygiene small{display:block;font-size:.6rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.03em;text-transform:uppercase}

/* ============ Experience mosaic ============ */
.exp{background:#f6f2e7;padding:96px 0 120px}
.exp .head{margin-bottom:2.4rem}
.exp .head .lead,.events .head .lead{margin-top:.9rem;max-width:62ch;color:var(--ink-soft)}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:150px;gap:1.1rem}
.tile{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:0 12px 30px rgba(96,80,40,.18)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.06)}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,19,38,.18) 0%,rgba(12,19,38,0) 40%,rgba(12,19,38,.82) 100%)}
.tile .lab{position:absolute;top:.95rem;left:1.05rem;font-weight:800;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);text-shadow:0 1px 10px rgba(12,19,38,.85)}
.tile .cap{position:absolute;left:1.05rem;right:1rem;bottom:.9rem;color:#fff;font-family:var(--font-head);font-weight:600;font-size:1.12rem;line-height:1.25;text-shadow:0 1px 12px rgba(12,19,38,.7)}
.tile.solid{display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem 1.15rem;box-shadow:none}
.tile.solid .lab{position:static}
.tile.solid .cap{position:static;margin-top:auto}
.tile.navy{background:var(--navy-2)}
.tile.navy .cap{color:#fff}
.tile.cyanb{background:var(--cyan)}
.tile.cyanb .lab{color:var(--navy)}
.tile.cyanb .cap{color:var(--navy)}
.tile.solid svg{width:34px;height:34px;margin-top:.4rem}
.tile.navy svg{fill:var(--cyan)}
.tile.cyanb svg{fill:var(--navy)}
.t-a{grid-column:span 4;grid-row:span 3}
.t-b{grid-column:span 5;grid-row:span 2}
.t-c{grid-column:span 3;grid-row:span 2}
.t-d{grid-column:span 4;grid-row:span 1}
.t-e{grid-column:span 4;grid-row:span 1}
.t-f{grid-column:span 4;grid-row:span 2}
.t-g{grid-column:span 4;grid-row:span 2}
.t-h{grid-column:span 4;grid-row:span 2}

/* ============ Press band (parallax) ============ */
.band{position:relative;min-height:56vh;display:flex;align-items:center;background:url('assets/photos/cafe1.jpg') center/cover fixed;color:#fff;text-align:center;padding:90px 0}
.band .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,19,38,.78),rgba(12,19,38,.66))}
.band .inner{position:relative;width:min(860px,90%);margin-inline:auto}
.band .quote{font-family:var(--font-head);font-weight:700;font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.18}
.band .quote em{font-style:normal;color:var(--cyan)}
.band .by{margin:1.1rem 0 1.7rem;font-weight:700;color:rgba(255,255,255,.8)}

/* ============ Digger Dan ============ */
.dan{background:var(--navy);padding:120px 0 70px;position:relative;overflow:hidden}
.dan::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(50,45,160,.4),transparent 70%);top:-180px;left:-160px}
.dan .grid{display:grid;grid-template-columns:.92fr 1.08fr;column-gap:3.4rem;row-gap:1.6rem;grid-template-areas:"text video" "poster video";align-items:start;position:relative}
.dan .g-text{grid-area:text}
.dan .g-video{grid-area:video;align-self:center}
.dan .g-poster{grid-area:poster}
.dan .h2{color:#fff}
.dan p{color:rgba(255,255,255,.82)}
.dan .kicker{font-family:var(--font-body);font-weight:800;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan)}
.player{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);border:4px solid rgba(0,227,255,.3)}
.player video{width:100%;display:block}
.polaroid{position:relative;background:#fff;padding:.8rem .8rem 2.6rem;border-radius:8px;box-shadow:0 22px 50px rgba(0,0,0,.45);transform:rotate(4deg)}
.polaroid img{border-radius:5px}
.polaroid .tape{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-4deg);width:110px;height:30px;background:rgba(0,227,255,.55);border-radius:3px}
.polaroid figcaption{position:absolute;bottom:.55rem;left:0;right:0;text-align:center;font-family:var(--font-hand);font-weight:600;font-size:1.25rem;color:var(--ink-soft)}
.approved{position:absolute;top:-26px;right:-10px;font-family:var(--font-hand);font-weight:600;font-size:1.3rem;color:var(--cyan);transform:rotate(6deg)}
.postercard{display:flex;align-items:center;gap:1.1rem;margin-top:.2rem;background:rgba(255,255,255,.05);border:1.5px dashed rgba(0,227,255,.45);border-radius:16px;padding:1rem 1.2rem;max-width:480px}
.postercard .sheet{flex:none;width:84px;background:#fff;padding:4px;border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.45);transform:rotate(-4deg)}
.postercard b{display:block;font-family:var(--font-head);font-weight:600;font-size:1.02rem;color:#fff}
.postercard small{display:block;color:rgba(255,255,255,.72);font-size:.85rem;line-height:1.45;margin:.15rem 0 .55rem}
.player iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.ytrow{display:flex;justify-content:flex-end;margin-top:.7rem}
.ytlink{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.85rem;color:rgba(255,255,255,.6);text-decoration:none;transition:color .25s}
.ytlink:hover{color:#fff}
.ytlink svg{width:17px;height:17px;fill:#c4302b;flex:none}

/* ============ Shop ============ */
.shop{background:var(--navy);padding:30px 0 120px;position:relative;overflow:hidden}
.shop .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:center}
.shop .photo{position:relative;justify-self:center}
.shop .approved{position:absolute;top:-30px;right:-6px;font-family:var(--font-hand);font-weight:600;font-size:1.3rem;color:var(--cyan);transform:rotate(6deg);z-index:2}
.shop .polaroid{transform:rotate(-3deg);max-width:440px}
.shop .h2{color:#fff}
.shop p.body{color:rgba(255,255,255,.82);margin-top:.2rem;max-width:54ch}
.shop .swatch{color:rgba(255,255,255,.85)}
.swatches{display:flex;gap:1.4rem;margin:1.5rem 0 1.8rem}
.swatch{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:.92rem;color:var(--ink-soft)}
.swatch i{width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 10px rgba(12,19,38,.25)}
.swatch .pink{background:#f0447e}
.swatch .blue{background:#29b7e6}
.shop .cta-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.shop .tillnote{font-family:var(--font-hand);font-weight:600;font-size:1.25rem;color:var(--cyan);transform:rotate(-1deg)}
.shop-social{display:flex;align-items:center;gap:.55rem;margin-top:1.9rem}
.shop-social span{font-weight:800;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-right:.3rem}
.shop-social a{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.07);display:grid;place-items:center;transition:.25s}
.shop-social a svg{width:15px;height:15px;fill:rgba(255,255,255,.7);transition:.25s}
.shop-social a:hover{background:var(--cyan)}
.shop-social a:hover svg{fill:var(--navy)}

/* ============ Upcoming events & offers ============ */
.loyal{background:var(--cream);padding:0 0 110px}
.loyal .head{margin-bottom:2.2rem}
.offergrid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:stretch}
.offergrid.single{grid-template-columns:1fr;max-width:840px}
.ocard{position:relative;background:linear-gradient(135deg,#17224a 0%,#0c1326 70%);border-radius:28px;padding:2.6rem 2.4rem;color:#fff;overflow:hidden;box-shadow:0 24px 55px rgba(12,19,38,.28)}
.ocard::before{content:"";position:absolute;width:320px;height:320px;border:3px dashed rgba(0,227,255,.25);border-radius:50%;top:-130px;right:-110px}
.ocard .okick{display:block;font-weight:800;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin-bottom:.6rem}
.ocard h3{font-size:clamp(1.5rem,2.4vw,2rem);color:#fff;margin-bottom:.7rem;position:relative}
.ocard p{color:rgba(255,255,255,.82);font-weight:700;position:relative}
.ocard .inner2{display:grid;grid-template-columns:1.2fr .8fr;gap:1.8rem;align-items:center;position:relative}
.eventposter{width:min(230px,100%);margin-inline:auto;border-radius:10px;border:5px solid #fff;transform:rotate(3deg);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.ocard .actions2{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem;position:relative}
.ocard .actions2 .linky{font-family:var(--font-head);font-weight:600;font-size:.92rem;color:rgba(255,255,255,.8);text-decoration:none;border-bottom:2px solid rgba(0,227,255,.5);padding-bottom:.1rem}
.ocard .actions2 .linky:hover{color:var(--cyan)}
.fivebadge{position:absolute;top:22px;right:26px;background:var(--cyan);color:var(--navy);font-family:var(--font-head);font-weight:700;font-size:1.3rem;line-height:1;padding:.45rem .8rem;border-radius:13px;transform:rotate(7deg);box-shadow:0 10px 26px rgba(0,227,255,.35);z-index:1}
.stamps{display:flex;gap:.7rem;margin-top:1.7rem;flex-wrap:wrap;position:relative}
.stamp{width:54px;height:54px;border-radius:50%;border:2.5px dashed rgba(0,227,255,.6);display:grid;place-items:center}
.stamp svg{width:24px;height:24px;fill:var(--cyan)}
.stamp.free{background:var(--cyan);border:2.5px solid var(--cyan)}
.stamp.free span{font-family:var(--font-head);font-weight:700;font-size:.68rem;color:var(--navy);letter-spacing:.04em}
.stampnote{margin-top:1rem;font-family:var(--font-hand);font-weight:600;font-size:1.3rem;color:var(--cyan);transform:rotate(-1deg)}
.cardphoto{background:#fff;padding:.6rem .6rem 2rem;border-radius:10px;box-shadow:0 20px 46px rgba(12,19,38,.4);transform:rotate(4deg);width:min(215px,60vw);margin-inline:auto}
.cardphoto img{border-radius:6px}
.cardphoto span{display:block;text-align:center;font-family:var(--font-hand);font-weight:600;font-size:1.2rem;color:var(--ink-soft);margin-top:.5rem;position:absolute;bottom:.4rem;left:0;right:0}
.cardphoto{position:relative}

/* ============ Events ============ */
.events{background:var(--cream);padding:120px 0}
.events .head{margin-bottom:2.6rem}
.events .head p{color:var(--ink-soft)}
.evgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ev{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:0 12px 32px rgba(12,19,38,.12);aspect-ratio:4/4.6;display:flex}
.ev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ev:hover img{transform:scale(1.06)}
.ev .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,19,38,0) 30%,rgba(12,19,38,.9) 100%)}
.ev .txt{position:relative;margin-top:auto;padding:1.4rem;color:#fff;width:100%}
.ev .txt .lab{font-weight:800;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.ev .txt h3{font-size:1.3rem;margin:.3rem 0 .35rem}
.ev .txt p{font-size:.92rem;color:rgba(255,255,255,.85)}
.events .foot{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;margin-top:2.4rem;flex-wrap:wrap}
.events .foot p{color:var(--ink-soft);font-weight:700;max-width:52ch}

/* ============ Plan your visit ============ */
.plan{background:var(--navy);color:#fff;padding:120px 0 90px;position:relative;overflow:hidden}
.plan::before{content:"";position:absolute;width:680px;height:680px;border:56px solid rgba(50,45,160,.3);border-radius:50%;right:-280px;top:-300px}
.plan .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.6rem;position:relative;align-items:start}
.plan .h2{color:#fff}
.plan .sub{color:rgba(255,255,255,.8);margin-bottom:2rem;max-width:48ch}
.hours{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.hours .row{display:flex;justify-content:space-between;align-items:center;padding:.95rem 1.3rem;background:rgba(255,255,255,.05);font-weight:700;font-size:.97rem}
.hours .row+.row{border-top:1px solid rgba(255,255,255,.09)}
.hours .row .h{font-family:var(--font-head);font-weight:600;color:var(--cyan)}
.hours .row.dim{color:rgba(255,255,255,.55)}
.hours .row.dim .h{color:rgba(255,255,255,.55)}
.hours .row.today{background:rgba(0,227,255,.1)}
.hours .row.today::before{content:"›";margin-right:.5rem;color:var(--cyan);font-weight:800}
.findrow{display:flex;gap:.85rem;align-items:flex-start;margin-top:1.5rem}
.findrow .fic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.07);display:grid;place-items:center;flex:none}
.findrow .fic svg{width:19px;height:19px;fill:var(--cyan)}
.findrow b{display:block;font-family:var(--font-head);font-weight:600;font-size:1rem}
.findrow span,.findrow a{color:rgba(255,255,255,.75);font-size:.93rem}
.findrow a{color:var(--cyan);font-weight:700;text-decoration:none}
.findrow a:hover{text-decoration:underline}
.plan .socials{display:flex;gap:.7rem;margin-top:1.6rem}
.plan .socials a,.foot-socials a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.3s}
.plan .socials a:hover,.foot-socials a:hover{background:var(--cyan)}
.plan .socials svg,.foot-socials svg{width:19px;height:19px;fill:#fff;transition:.3s}
.plan .socials a:hover svg,.foot-socials a:hover svg{fill:var(--navy)}
/* form */
.form-card{background:#fff;border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(0,0,0,.4);padding:2.3rem;color:var(--ink)}
.form-card .fhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.4rem}
.form-card h3{font-size:1.45rem}
.form-card .fhead .tag{font-family:var(--font-hand);font-weight:600;font-size:1.25rem;color:var(--violet);transform:rotate(-2deg)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}
.field label .req{color:#e5484d}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:1rem;padding:.78rem .95rem;border:2px solid #e8e4d8;border-radius:12px;background:var(--cream);color:var(--ink);transition:border .25s,box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(50,45,160,.13);background:#fff}
.field textarea{min-height:100px;resize:vertical}
.form-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.2rem}
.btn-violet{background:var(--violet);color:#fff;box-shadow:0 10px 26px rgba(50,45,160,.35)}
.btn-violet:hover{transform:translateY(-2px);background:#282381}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{transform:translateY(-2px);background:#1fb959}
.btn-wa svg,.btn-violet svg{width:19px;height:19px;fill:currentColor}
.form-note{margin-top:1rem;font-size:.87rem;color:var(--ink-soft)}
.form-note a{color:var(--violet);font-weight:800}
.form-ok{display:none;margin-top:1rem;background:#e7f9ef;border:1.5px solid #2fbf71;color:#1c7c4b;border-radius:12px;padding:.85rem 1rem;font-weight:700}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;pointer-events:none}

/* ============ Network ============ */
.network{background:var(--navy);color:#fff;padding:52px 0 58px;border-top:1px solid rgba(255,255,255,.08);text-align:center}
.network .nt{font-family:var(--font-head);font-weight:600;font-size:1.3rem;color:#fff}
.network .nsub{color:rgba(255,255,255,.62);font-size:.92rem;margin-top:.25rem}
.netgrid{display:flex;justify-content:center;align-items:stretch;gap:1rem;margin-top:1.7rem;flex-wrap:wrap}
.netcard{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:min(250px,86vw);background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.1rem 1.1rem 1rem;text-decoration:none;transition:transform .3s ease,border-color .3s ease}
.netcard:hover{transform:translateY(-4px);border-color:rgba(0,227,255,.45)}
.netcard img{width:min(175px,80%);border-radius:6px}
.netcard .ndesc{margin-top:.6rem;color:rgba(255,255,255,.6);font-size:.76rem;font-weight:700}
.netcard .nvisit{margin-top:.25rem;font-family:var(--font-head);font-weight:600;font-size:.84rem;color:var(--cyan)}
.netcard:hover .nvisit{text-decoration:underline}

/* ============ Footer ============ */
footer{background:#f6f2e7;color:var(--ink);padding:76px 0 28px}
.foot-script{font-family:var(--font-hand);font-weight:600;font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--violet);text-align:center;transform:rotate(-1.2deg);margin-bottom:3rem}
.foot-script i{font-style:normal;color:var(--cyan-deep,#00b8d4)}
.footgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:3.8rem;align-items:center}
.foot-logo{width:175px}
.footcard{background:rgba(50,45,160,.055);border:1.5px dashed rgba(50,45,160,.3);border-radius:26px;padding:2.3rem 2.6rem;display:grid;grid-template-columns:.85fr 1.15fr;gap:2.6rem}
footer h4{font-size:1rem;margin-bottom:1rem;color:var(--violet)}
footer p,footer a,footer li{color:var(--ink-soft);font-size:.94rem}
footer ul{list-style:none;display:grid;gap:.5rem}
footer a{text-decoration:none}
footer a:hover{color:var(--violet)}
.foot-tag{font-family:var(--font-head);font-weight:600;color:var(--ink);font-size:1.06rem;margin:1.1rem 0 .4rem}
.foot-socials{display:flex;gap:.7rem;margin-top:1.2rem}
.foot-socials a{background:rgba(12,19,38,.08)}
.foot-socials svg{fill:var(--navy)}
.foot-socials a:hover{background:var(--violet)}
.foot-socials a:hover svg{fill:#fff}
.foot-bottom{border-top:1px solid rgba(12,19,38,.14);margin-top:3rem;padding-top:1.3rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:rgba(12,19,38,.55)}
.foot-bottom a{color:rgba(12,19,38,.75)}

/* ============ Event popup ============ */
.pop-ov{position:fixed;inset:0;z-index:200;background:rgba(8,13,29,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.pop-ov.show{display:flex;animation:popfade .35s ease}
@keyframes popfade{from{opacity:0}to{opacity:1}}
.pop{position:relative;background:#fff;border-radius:20px;overflow:hidden;max-width:min(480px,94vw);max-height:92svh;box-shadow:0 40px 90px rgba(0,0,0,.6);animation:poprise .4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
@keyframes poprise{from{transform:translateY(26px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.pop img{width:100%;height:auto;flex:1;min-height:0;object-fit:contain}
.pop .pbar{display:flex;gap:.7rem;justify-content:center;padding:.9rem 1rem;background:var(--navy);flex-wrap:wrap}
.pop .pbar .btn{font-size:.9rem;padding:.6rem 1.3rem}
.pop-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;background:rgba(12,19,38,.85);color:#fff;border:0;font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.25s}
.pop-x:hover{background:var(--violet)}
.eventpill{position:fixed;right:16px;bottom:16px;z-index:90;display:none;align-items:center;gap:.5rem;background:var(--cyan);color:var(--navy);font-family:var(--font-head);font-weight:600;font-size:.86rem;padding:.6rem 1.1rem;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.35);border:0;cursor:pointer;transition:transform .25s}
.eventpill:hover{transform:translateY(-2px)}
.eventpill.show{display:inline-flex}

/* ============ Responsive ============ */
@media (max-width:1020px){
  .dan .grid{grid-template-columns:1fr;grid-template-areas:"text" "video" "poster";row-gap:2rem}
  .postercard{max-width:none;width:100%}
  .built .grid,.plan .grid,.shop .grid{grid-template-columns:1fr;gap:3rem}
  .footgrid{grid-template-columns:1fr;gap:2.8rem}
  .mosaic{grid-auto-rows:140px}
  .t-a{grid-column:span 6;grid-row:span 3}
  .t-b{grid-column:span 6;grid-row:span 2}
  .t-c{grid-column:span 6;grid-row:span 1}
  .t-d{grid-column:span 6;grid-row:span 1}
  .t-e{grid-column:span 6;grid-row:span 1}
  .t-f,.t-g,.t-h{grid-column:span 6;grid-row:span 2}
  .evgrid{grid-template-columns:1fr 1fr}
  .offergrid{grid-template-columns:1fr}
  .ocard .inner2{grid-template-columns:1fr}
  .eventposter{width:min(260px,86%)}
  .cardphoto{transform:rotate(3deg)}
}
@media (max-width:1160px){
  nav.primary{position:fixed;inset:0 0 auto 0;background:#0a1122;flex-direction:column;padding:100px 8% 44px;gap:1.5rem;transform:translateY(-105%);transition:transform .4s cubic-bezier(.2,.7,.2,1);box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:95}
  nav.primary.open{transform:none}
  nav.primary a{font-size:1.25rem}
  .only-mobile{display:block}
  .hamburger{display:block}
}
@media (max-width:700px){
  .header-cta{display:none}
}
@media (max-width:680px){
  .frow,.evgrid{grid-template-columns:1fr}
  .footcard{grid-template-columns:1fr;padding:1.9rem 1.7rem;gap:1.9rem}
  .mosaic{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-4vw;padding:0 4vw 1.2rem}
  .mosaic::-webkit-scrollbar{display:none}
  .mosaic .tile{flex:0 0 78vw;height:380px;scroll-snap-align:center}
  .mosaic .tile.solid{height:380px}
  .exp .head::after{content:"swipe to explore \2192";display:block;margin-top:.9rem;font-family:var(--font-hand);font-weight:600;font-size:1.25rem;color:#207b8c;transform:rotate(-1deg)}
  .band{background-attachment:scroll}
  .photostack .snap{left:6px;bottom:-40px;width:160px}
  .ev{aspect-ratio:4/3.4}
}
@media (hover:none){
  .band{background-attachment:scroll}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .marquee .track{animation:none}
  .band{background-attachment:scroll}
  .tile img,.ev img{transition:none}
  .pop-ov.show,.pop{animation:none}
}