:root{--bg:#f8f6f2;--surface:#fff;--alt:#f1eee7;--text:#171918;--secondary:#4a4a4a;--muted:#666;--border:#dedbd4;--green:#2f5d50;--gold:#c89b3c;--brown:#8b6a4e;--deep:#12241f;--serif:"Cormorant Garamond",Georgia,serif;--sans:Inter,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}body.dark{--bg:#12140f;--surface:#1a1d17;--alt:#20241d;--text:#f1eee7;--secondary:#c9c2b4;--muted:#a9a393;--border:#34382e;--green:#8fc4aa}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}::selection{background:var(--gold);color:#171918}
.site-header{position:relative;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}.nav-wrap{height:100px;max-width:1220px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;flex-direction:column;line-height:1.05;white-space:nowrap}.brand strong{font:600 25px var(--serif)}.brand span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-top:5px;color:var(--muted)}.desktop-nav{display:flex;gap:20px;align-items:center}.desktop-nav a{font-size:12px;font-weight:500;white-space:nowrap;padding:8px 0;position:relative}.desktop-nav a:after{content:"";position:absolute;height:1px;background:var(--gold);left:0;right:100%;bottom:0;transition:.25s}.desktop-nav a:hover:after,.desktop-nav a.active:after{right:0}.nav-actions{display:flex;gap:8px}.icon-btn{background:transparent;border:0;color:var(--text);cursor:pointer;font-size:20px;padding:8px}.menu-toggle{display:none}.mobile-nav{display:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12}h2{font-size:clamp(36px,4vw,52px);margin:14px 0 24px}.hero{height:calc(100vh - 100px);min-height:630px;position:relative;background:var(--deep);overflow:hidden}.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}.hero-slide.current{opacity:1}.hero-shade{position:absolute;inset:0;background:linear-gradient(rgba(8,15,13,.55),rgba(8,15,13,.2) 42%,rgba(8,15,13,.8))}.hero-copy{position:absolute;inset:0;padding:40px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#f8f6f2}.kicker,.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--brown)}.kicker{color:var(--gold)}.hero h1{font-size:clamp(50px,7vw,94px);font-style:italic;margin:20px auto;max-width:1050px}.hero p{font-size:17px;color:#e1ddd4;max-width:610px;margin:0 auto 38px}.btn{display:inline-block;padding:15px 28px;margin:5px;border:1px solid transparent;border-radius:2px;text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:600;cursor:pointer}.btn.gold{background:var(--gold);color:#171918}.btn.ghost{border-color:#ffffff99;color:#fff}.btn.green{background:var(--green);color:#fff;margin:18px 0}.hero-location{position:absolute;left:40px;bottom:28px;color:#ffffffb0;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.hero-dots{position:absolute;z-index:3;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:9px}.hero-dots button{border:0;background:#ffffff66;border-radius:50%;width:7px;height:7px;padding:0;cursor:pointer}.hero-dots button.active{background:var(--gold);transform:scale(1.3)}
.section{max-width:1220px;margin:auto;padding:130px 40px}.section-wide{padding:120px max(40px,calc((100vw - 1140px)/2))}.split{display:grid;grid-template-columns:1fr 1.12fr;gap:80px;align-items:center}.lead{font-size:17px;line-height:1.9;color:var(--secondary)}.meta-line,.card-meta{color:var(--muted);font-size:12px}.text-link{color:var(--green);border-bottom:1px solid currentColor;padding-bottom:4px;text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:600}.feature-image{position:relative;aspect-ratio:4/5;overflow:hidden}.feature-image img{width:100%;height:100%;object-fit:cover}.play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:66px;height:66px;border:0;border-radius:50%;background:#f8f6f2e8;cursor:pointer}.dark-section{background:var(--deep);color:#f1eee7}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:50px}.section-head h2{margin-bottom:0}.section-head>a{font-size:12px;color:var(--green)}.section-head.light>a{color:#8fc4aa}.reel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.reel-grid article{position:relative}.reel-grid img{aspect-ratio:9/14;width:100%;object-fit:cover;opacity:.88}.reel-grid span{position:absolute;top:15px;right:15px;font-size:11px}.reel-grid h3{font-size:21px;margin:14px 0}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}.card-image{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--alt)}.card-image img{width:100%;height:100%;object-fit:cover;transition:.5s}.card:hover .card-image img{transform:scale(1.035)}.card-copy{padding-top:20px}.card h3{font-size:29px;margin:10px 0}.card h3 a:hover{color:var(--green)}.card p{color:var(--secondary);margin:0 0 15px}.card-meta{display:flex;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border)}.quote{padding:130px 25px;text-align:center;background:var(--deep);color:#f1eee7}.quote blockquote{font:italic 500 clamp(36px,5vw,64px)/1.2 var(--serif);max-width:900px;margin:0 auto 28px}.quote span{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.18em}.destination-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.destination-grid a{position:relative;overflow:hidden;min-height:340px;color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:end}.destination-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:.5s}.destination-grid a:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#000c);z-index:-1}.destination-grid a:hover img{transform:scale(1.04)}.destination-grid span{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--gold)}.destination-grid h3{font-size:32px;margin:8px 0}.destination-grid p{font-size:13px;color:#e5e2da}.surface-section{background:var(--alt)}.about-teaser{display:grid;grid-template-columns:.75fr 1fr;gap:90px;align-items:center}.portrait img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:saturate(.72)}
.page-hero{padding:120px 40px;text-align:center;max-width:900px;margin:auto}.page-hero h1{font-size:clamp(55px,8vw,92px);margin:18px 0}.page-hero p{font-size:18px;color:var(--secondary);max-width:650px;margin:auto}.page-hero.deep{max-width:none;background:var(--deep);color:#f1eee7}.page-hero.deep p{color:#c9c2b4}.listing{padding-top:30px}.filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:50px}.filters button{border:1px solid var(--border);background:transparent;color:var(--text);padding:9px 18px;cursor:pointer}.filters button.active{background:var(--green);border-color:var(--green);color:#fff}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.photo-item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden}.photo-item img{width:100%;height:100%;object-fit:cover;transition:.5s}.photo-item span{position:absolute;inset:auto 0 0;padding:45px 20px 18px;background:linear-gradient(transparent,#000c);color:#fff;display:flex;flex-direction:column;transform:translateY(100%);transition:.3s}.photo-item:hover img{transform:scale(1.04)}.photo-item:hover span{transform:none}.destination-grid.large a{min-height:430px}.detail-head{text-align:center;padding:110px 30px 70px;max-width:940px;margin:auto}.detail-head h1{font-size:clamp(52px,7vw,84px);margin:20px 0}.detail-head p{font:italic 400 23px/1.55 var(--serif);color:var(--secondary);max-width:700px;margin:0 auto 24px}.detail-head div{font-size:12px;color:var(--muted)}.detail>figure{max-width:1300px;margin:0 auto}.detail>figure img{width:100%;max-height:760px;object-fit:cover}.prose{max-width:720px;margin:90px auto 130px;padding:0 25px;font-family:Georgia,serif;font-size:18px;line-height:2;color:var(--secondary)}.prose h2{color:var(--text)}.prose blockquote{margin:50px -50px;padding:35px 50px;border-left:2px solid var(--gold);font:italic 28px/1.5 var(--serif);color:var(--text)}.drop:first-letter{font:600 72px/.75 var(--serif);float:left;margin:13px 10px 0 0;color:var(--green)}.about-main img{width:100%;aspect-ratio:4/5;object-fit:cover}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;padding-top:30px}.contact-grid dl{margin-top:40px}.contact-grid dt{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--brown);font-weight:600}.contact-grid dd{margin:2px 0 24px}.contact-form{display:grid;gap:17px}.contact-form label{font-size:12px;font-weight:600}.contact-form input,.contact-form textarea{width:100%;display:block;margin-top:7px;padding:14px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:0}.form-error{background:#f7ded8;color:#8a2820;padding:13px}.flash{position:fixed;z-index:90;right:25px;top:120px;background:var(--green);color:#fff;padding:16px 22px}
.footer{background:#0f1e1a;color:#c9c2b4;padding:80px max(40px,calc((100vw - 1140px)/2)) 30px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:60px}.footer h4{font:500 20px var(--serif);color:#f1eee7}.footer a:not(.brand){display:block;color:#c9c2b4;font-size:13px;margin:9px 0}.footer p{font-size:13px}.footer-brand strong{color:#f1eee7}.newsletter-form{display:flex;border-bottom:1px solid #54625d}.newsletter-form input{flex:1;min-width:0;background:none;border:0;color:#fff;padding:10px 0;outline:0}.newsletter-form button{border:0;background:none;color:var(--gold);cursor:pointer}.copyright{border-top:1px solid #ffffff1c;margin-top:60px;padding-top:25px;font-size:11px}.copyright a{float:right}
.agency-credit{width:min(620px,100%);margin:44px auto -34px;padding:13px 14px;border:1px solid #c9a24866;background:linear-gradient(135deg,#172f27,#10231d);color:#f1eee7;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;box-shadow:0 14px 35px #0002}.agency-credit-mark{width:42px;height:42px;border:1px solid #c9a24899;display:grid;place-items:center;color:#d9ad4c;font:600 18px Georgia,serif}.agency-credit-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.agency-credit-copy strong{color:#fff;font-size:12px;letter-spacing:.025em}.agency-credit-copy span{color:#9fb0aa;font-size:11px}.agency-credit-action{display:flex!important;align-items:center;gap:7px;margin:0!important;padding:10px 13px;border:1px solid #c9a24888;color:#e6bb58!important;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;transition:.2s}.agency-credit-action span{color:inherit;font-size:13px}.agency-credit-action:hover{background:#c9a248;color:#10231d!important}@media(max-width:600px){.agency-credit{margin-bottom:-30px;grid-template-columns:auto 1fr;padding:12px}.agency-credit-action{grid-column:1/-1;justify-content:center}.copyright a{float:none;display:inline!important}}
.comment-layout{display:grid;grid-template-columns:1fr 1fr;gap:42px}.public-comment{padding:18px 0;border-bottom:1px solid #ddd}.public-comment strong,.public-comment small{display:block}.public-comment small{color:#777;margin-top:5px}.public-comment p{line-height:1.7}.comment-form{background:#f4f1ea;padding:26px}.comment-form label{display:block;margin-bottom:15px}.comment-form input,.comment-form textarea{width:100%;margin-top:7px;padding:12px;border:1px solid #d5d0c5;background:#fff}.comment-form>small{display:block;margin-top:12px;color:#706b62}@media(max-width:750px){.comment-layout{grid-template-columns:1fr;gap:24px}}
.footer-connect a{display:flex!important;align-items:center;gap:9px}.social-icon{width:20px;height:20px;flex:0 0 20px;border:1px solid #51685f;border-radius:50%;display:inline-grid;place-items:center;color:#d7ad50;font:700 10px/1 Arial,sans-serif;transition:.2s}.footer-connect a:hover .social-icon{border-color:#d7ad50;background:#d7ad50;color:#10231d}.social-instagram{font-size:15px}.social-youtube{font-size:8px;padding-left:1px}.social-x{font-size:11px}.social-tiktok{font-size:13px}.social-linkedin{font-size:8px}.social-pinterest{font-family:Georgia,serif;font-size:11px}.social-contact{font-size:10px}
.footer-socials{display:flex;align-items:center;gap:8px;margin-top:22px;flex-wrap:nowrap}.footer .footer-socials a{display:block;margin:0}.footer-socials .social-icon{width:30px;height:30px;flex-basis:30px;background:#ffffff05;border-color:#ffffff24}.footer-socials a:hover .social-icon{border-color:#d7ad50;background:#d7ad50;color:#10231d}.footer-contact a{display:flex!important;align-items:flex-start;gap:9px;overflow-wrap:anywhere}.footer-contact a>span{width:15px;color:#d7ad50;flex:0 0 15px}.agency-credit{width:max-content;max-width:100%;margin:14px auto 0;padding:12px 0 0;border:0!important;border-top:1px solid #ffffff17!important;background:none!important;box-shadow:none!important;display:flex;align-items:center;justify-content:center;gap:9px;color:#b0beb8;font-size:11px;letter-spacing:.025em}.agency-credit:before{display:none!important}.agency-credit strong{color:#e0b650;font-size:12px;font-weight:700}.agency-credit>span{color:inherit!important;font-size:inherit!important;text-transform:none!important;letter-spacing:inherit!important}.agency-credit i{color:#71857d;font-style:normal}.agency-credit .agency-credit-action{display:inline-flex!important;align-items:center;justify-content:center;gap:4px;margin:0!important;padding:5px 9px;border:1px solid #c9a24866;border-radius:20px;color:#e0b650!important;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;line-height:1}.agency-credit .agency-credit-action span{display:inline!important;color:inherit!important;font-size:11px!important;line-height:1!important;text-transform:none!important;letter-spacing:0!important}.agency-credit .agency-credit-action:hover{background:#d7ad50;color:#10231d!important}.agency-credit-mark,.agency-credit-copy{display:none}@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr}.footer-identity{grid-column:1/-1}.footer-socials{margin-bottom:10px}.agency-credit{flex-wrap:wrap;text-align:center}.agency-credit .agency-credit-action{grid-column:auto}}@media(max-width:460px){.footer-grid{grid-template-columns:1fr}.footer-grid>div{grid-column:auto!important}.footer-socials{gap:7px}.footer-socials .social-icon{width:29px;height:29px;flex-basis:29px}.agency-credit i{display:none}.agency-credit{gap:6px 8px}}
.video-modal{position:fixed;inset:0;z-index:100;background:#000d;display:grid;place-items:center;padding:25px}.video-modal div{position:relative;width:min(900px,100%);aspect-ratio:16/9}.video-modal iframe{width:100%;height:100%;border:0}.video-modal button{position:absolute;right:0;top:-45px;border:0;background:none;color:white;font-size:30px;cursor:pointer}
.embed-section{max-width:1220px;margin:auto;padding:80px 40px}.embed-section iframe{width:100%;min-height:520px;border:0}
@media(max-width:1000px){.desktop-nav{display:none}.menu-toggle{display:block}.mobile-nav.open{display:grid;padding:10px 30px 30px}.mobile-nav a{padding:10px;border-bottom:1px solid var(--border)}.reel-grid{grid-template-columns:repeat(2,1fr)}.card-grid{grid-template-columns:repeat(2,1fr)}.destination-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.nav-wrap{height:82px;padding:0 20px}.brand span{display:none}.hero{height:calc(100vh - 82px)}.hero-copy{justify-content:flex-end;padding-bottom:110px}.hero h1{font-size:48px}.hero p{font-size:15px}.hero-location{left:20px}.section,.section-wide{padding:85px 22px}.split,.about-teaser,.contact-grid{grid-template-columns:1fr;gap:45px}.section-head{display:block}.section-head>a{display:inline-block;margin-top:20px}.card-grid,.destination-grid,.photo-grid{grid-template-columns:1fr}.reel-grid{grid-template-columns:repeat(2,1fr);gap:10px}.reel-grid h3{font-size:17px}.destination-grid a{min-height:390px}.page-hero{padding:80px 22px}.page-hero h1{font-size:54px}.prose{margin-top:60px}.prose blockquote{margin:35px 0;padding:25px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}.footer{padding-left:22px;padding-right:22px}}
.brand img{display:block;max-width:210px;max-height:58px;width:auto;height:auto;object-fit:contain}
.facebook-section{background:var(--deep);color:#f1eee7}.facebook-section .section-head p{color:#aeb8b3}.facebook-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.facebook-card{background:#173129;border:1px solid #315047;overflow:hidden}.facebook-embed{position:relative;aspect-ratio:9/12;background:#0b1d18;display:grid;place-items:center}.facebook-embed iframe{width:100%;height:100%;border:0;position:relative;z-index:2}.facebook-loader{position:absolute;color:#9eb2aa;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.facebook-embed:not(.is-loading) .facebook-loader{display:none}.facebook-copy{padding:22px}.facebook-copy>span{color:#c9a248;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.facebook-copy p{color:#d7dcd9;line-height:1.7;min-height:54px}.facebook-copy a{color:#fff;border-bottom:1px solid #c9a248;font-size:12px;padding-bottom:4px}.facebook-empty{border:1px solid #315047;padding:48px;text-align:center}.facebook-empty h3{margin-top:0}.facebook-empty p{color:#aeb8b3}.legal-page{max-width:860px;font-size:16px;line-height:1.9}.legal-page>div{white-space:normal}.legal-page a{color:var(--green);text-decoration:underline}
@media(max-width:1000px){.facebook-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.facebook-grid{grid-template-columns:1fr}.facebook-embed{aspect-ratio:9/11}}
.cookie-banner{position:fixed;left:22px;right:22px;bottom:22px;z-index:150;max-width:980px;margin:auto;background:#10241e;color:#f5f2eb;border:1px solid #c9a24866;box-shadow:0 18px 55px #0005;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:25px}.cookie-banner[hidden]{display:none}.cookie-banner strong{font:600 21px var(--serif)}.cookie-banner p{margin:6px 0 0;color:#c8d0cc;line-height:1.55}.cookie-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.cookie-actions button{border:1px solid #8b9b94;background:transparent;color:#fff;padding:10px 13px;cursor:pointer}.cookie-actions .cookie-accept{background:var(--gold);border-color:var(--gold);color:#10241e;font-weight:600}.cookie-actions a{color:#d4c187!important;font-size:11px}@media(max-width:760px){.cookie-banner{display:block;left:12px;right:12px;bottom:12px}.cookie-actions{margin-top:16px;flex-wrap:wrap}.cookie-actions a{width:100%}}


/* --------------------------------------------------------------------------
   Header fit + mobile menu.
   The brand was white-space:nowrap inside a flex row with no min-width, so a
   long site name or a 210px logo pushed the header wider than the viewport and
   dragged the ☰ button off the right edge with it.
   -------------------------------------------------------------------------- */
/* clip, not hidden: overflow-x:hidden on an ancestor silently kills the sticky
   header below, because it turns html/body into the nearest scrollport. */
html,body{max-width:100%;overflow-x:clip}
.site-header{width:100%}
.nav-wrap{width:100%;max-width:min(1220px,100%)}
.brand{min-width:0;flex:0 1 auto;overflow:hidden}
.brand strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.brand img{max-width:min(210px,42vw)}
.nav-actions{flex:0 0 auto}
@media(max-width:1000px){
  /* Overlay the page instead of pushing the hero down, so the panel always
     opens directly under the ☰ button that triggered it. */
  .mobile-nav{position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 18px 40px #0000001f;max-height:calc(100dvh - 100%);overflow:auto}
  .mobile-nav.open{padding:8px 22px 22px}
  .menu-toggle[aria-expanded="true"]{color:var(--green)}
}
.math-check{padding:14px;border:1px solid var(--border);background:var(--surface);font-weight:600}.math-check input{max-width:130px}.newsletter-form{align-items:flex-end;gap:10px}.newsletter-fields{display:grid;flex:1;min-width:0;gap:7px}.newsletter-math{display:flex;align-items:center;gap:8px;font-size:11px;color:#c9c2b4;white-space:nowrap}.newsletter-math input{width:72px!important;border:1px solid #54625d!important;padding:7px!important;text-align:center}@media(max-width:520px){.newsletter-form{align-items:stretch}.newsletter-math{white-space:normal}.newsletter-form button{align-self:flex-end;padding:8px 0}}
.spam-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
@media(max-width:700px){
  .nav-wrap{padding:0 16px;gap:10px}
  .brand strong{font-size:20px}
  .brand img{max-width:min(150px,46vw)}
  /* Square 44px targets: trimming the padding to save width had shrunk these
     to 29px wide, which is well under the size a thumb can reliably hit. */
  .nav-actions{gap:4px}
  .icon-btn{width:44px;height:44px;padding:0;display:grid;place-items:center;font-size:21px;border-radius:10px}
  .icon-btn:active{background:var(--alt)}
}

/* --------------------------------------------------------------------------
   Sticky header that shrinks once the page starts scrolling.
   app.js adds .scrolled past a small threshold; everything else is CSS so the
   header still behaves correctly with JavaScript disabled.
   -------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;transition:box-shadow .25s ease,background .25s ease}
.nav-wrap{transition:height .25s ease}
.brand strong,.brand img{transition:font-size .25s ease,max-height .25s ease}
.brand span{transition:opacity .2s ease,margin .25s ease}
.site-header.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);box-shadow:0 10px 30px #0000001a}
.site-header.scrolled .nav-wrap{height:66px}
.site-header.scrolled .brand strong{font-size:19px}
.site-header.scrolled .brand img{max-height:38px}
/* The tagline is the first thing to go: it is the least useful line when
   scrolling and buys the most height. */
.site-header.scrolled .brand span{opacity:0;margin-top:0;height:0;overflow:hidden}
@media(max-width:700px){
  .site-header.scrolled .nav-wrap{height:58px}
  .site-header.scrolled .brand strong{font-size:17px}
  .site-header.scrolled .brand img{max-height:32px}
}
@media(prefers-reduced-motion:reduce){
  .site-header,.nav-wrap,.brand strong,.brand img,.brand span{transition:none}
}

/* --------------------------------------------------------------------------
   Reel showcase: one Facebook video on the left, four reels 2x2 on the right.
   Tiles carry only a poster image until the pointer arrives — the player is
   built on hover and torn down on leave, so the homepage loads five images
   instead of five embedded players.
   -------------------------------------------------------------------------- */
/* The video is a strict square and sets the height of the whole block. The
   right half stretches to match it and splits into two equal rows, so the
   tiles are sized by the row they sit in rather than by an aspect ratio of
   their own — that is what keeps both columns ending on the same line. */
.reel-showcase .showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
/* Same label-then-content shape as the rows opposite, so both columns start
   on the same line instead of the video floating a label height higher. */
.reel-showcase .showcase-main{display:grid;grid-template-rows:auto minmax(0,1fr);gap:7px;min-height:0}
.reel-showcase .showcase-main .fb-tile{aspect-ratio:1/1;align-self:start;width:100%}
.reel-showcase .showcase-rows{display:grid;grid-template-rows:1fr 1fr;gap:14px;min-width:0;height:100%}
.reel-showcase .showcase-row{display:grid;grid-template-rows:auto minmax(0,1fr);gap:7px;min-height:0}
.reel-showcase .row-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-height:0}
.reel-showcase .row-tiles .fb-tile{aspect-ratio:auto;height:100%;min-height:0}
/* Waiting state for the video slot: it holds its square so the section keeps
   its shape whether or not a long clip is available. */
.fb-tile.is-soon{display:grid;place-content:center;justify-items:center;gap:8px;background:#16302a;cursor:default}
.fb-tile.is-soon .fb-tile-kind{opacity:.6}
.soon-mark{font:500 40px var(--serif);color:#8fc4aa}
.soon-note{max-width:24ch;color:#8ea69b;font-size:12px;line-height:1.6;text-align:center}
.reel-showcase .showcase-grid:not(:has(.showcase-rows)) .showcase-main{grid-column:1/-1;max-width:min(560px,100%)}
/* The tile itself lifts on hover. Scaling the poster inside a clipped box, as
   this did before, moves nothing the eye can see. The big video grows less
   than a reel does because it is three times the size — matched by how many
   pixels each gains, they read as the same gesture. */
.fb-tile{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:3px;background:#16302a;isolation:isolate;transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease}
.fb-tile:not(.is-soon):hover{transform:scale(1.06);z-index:6;box-shadow:0 26px 60px #00000073}
.fb-tile.is-reel:not(.is-soon):hover{transform:scale(1.14)}
.fb-tile-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
/* Too small to crop: fit the whole frame and fill the rest with a blurred
   copy, so nothing is enlarged past what Facebook actually sent. */
.fb-tile.is-lowres .fb-tile-poster{object-fit:contain;z-index:1}
.fb-tile.is-lowres:before{content:"";position:absolute;inset:-10%;background:var(--poster) center/cover no-repeat;filter:blur(28px) saturate(1.15) brightness(.72)}
/* Hover preview: muted, looping, and only revealed once it is really running,
   so the poster never blinks out for a clip that fails to load. */
.fb-tile-preview{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease;pointer-events:none}
.fb-tile.is-previewing .fb-tile-preview{opacity:1}
.fb-tile.is-previewing .fb-tile-poster{opacity:0}
.fb-tile.is-previewing .fb-tile-play{opacity:0}
@media(prefers-reduced-motion:reduce){.fb-tile,.fb-tile-poster,.fb-tile-preview{transition:none}.fb-tile:hover{transform:none}}
.fb-tile-kind{position:absolute;z-index:3;left:10px;top:10px;padding:4px 8px;border-radius:3px;background:#0d1a16cc;color:var(--gold);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.fb-tile-play{position:absolute;z-index:3;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#0d1a16b3;color:#f1eee7;font-size:17px;transition:opacity .25s ease,transform .25s ease}
.fb-tile.is-reel .fb-tile-play{width:38px;height:38px;font-size:13px}
/* The tile opens the clip on Facebook, so the play mark grows on hover
   rather than disappearing the way it would for an inline player. */
.fb-tile:hover .fb-tile-play{transform:translate(-50%,-50%) scale(1.12);background:#0d1a16e6}
.fb-tile:after{content:"";position:absolute;z-index:2;inset:0;background:#0b1a1500;transition:background .3s ease;pointer-events:none}
.fb-tile:hover:after{background:#0b1a1533}
/* Clip length, bottom-right, the way a video thumbnail shows it. */
.fb-tile-time{position:absolute;z-index:3;right:10px;bottom:10px;padding:3px 7px;border-radius:3px;background:#0d1a16cc;color:#e6ebe7;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}
.fb-tile.is-reel .fb-tile-time{right:8px;bottom:8px;font-size:9px}
/* View count, the way Facebook shows it on a reel. */
.fb-tile-views{position:absolute;z-index:3;right:10px;top:10px;padding:4px 9px;border-radius:20px;background:#0d1a16cc;color:#e6ebe7;font-size:10px;font-weight:600;letter-spacing:.03em;transition:opacity .25s ease}
.fb-tile-views span{font-size:8px;opacity:.85}
.fb-tile-caption{position:absolute;z-index:3;left:10px;right:62px;bottom:10px;color:#e6ebe7;font-size:12px;line-height:1.45;text-shadow:0 1px 6px #000a;transition:opacity .25s ease}
.fb-tile.is-reel .fb-tile-caption{font-size:11px;right:52px}
/* One full-size button is the whole click target, so the tile stays keyboard
   reachable without wrapping the player in a link. */
.fb-tile-hit{position:absolute;z-index:4;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.fb-tile-hit:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
/* Popup player. Reels are portrait and videos are landscape, so the frame is
   sized by the file rather than fixed to one aspect ratio. */
body.clip-open{overflow:hidden}
/* Nothing here fades in from transparent. An entrance that animates opacity
   leaves the player invisible if the animation never runs — a background tab,
   a throttled frame loop — so the arrival is a small scale instead, which is
   fully visible even at its first frame. */
.clip-modal{position:fixed;inset:0;z-index:120;background:#060d0bf2;display:grid;place-items:center;padding:28px}
.clip-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;animation:clip-rise .28s cubic-bezier(.22,.61,.36,1) both}
@keyframes clip-rise{from{transform:scale(.96)}to{transform:none}}
.clip-stage video{max-width:min(880px,92vw);max-height:78vh;width:auto;border-radius:4px;background:#000;box-shadow:0 30px 80px #000000a6}
.clip-close{position:absolute;right:-6px;top:-46px;border:0;background:none;color:#f1eee7;font-size:32px;line-height:1;cursor:pointer}
.clip-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:min(880px,92vw)}
.clip-meta p{margin:0;color:#cfd8d3;font-size:13px;line-height:1.5;max-width:60ch}
.clip-meta a{color:#8fc4aa;font-size:12px;white-space:nowrap}
@media(max-width:700px){.clip-modal{padding:18px}.clip-close{top:-40px;right:0}.clip-stage video{max-height:70vh}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:820px){
  .reel-showcase .showcase-grid{grid-template-columns:1fr;gap:16px}
  .reel-showcase .showcase-rows{grid-template-rows:auto auto;gap:16px}
  .reel-showcase .row-tiles{gap:8px}
  .reel-showcase .row-tiles .fb-tile{aspect-ratio:2/3;height:auto}
}
/* Lightbox for the clicked tile — the clip keeps playing at full size. */
.fb-lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;background:#050d0ae8}
.fb-lightbox-frame{position:relative;width:min(420px,100%);max-height:calc(100vh - 44px);aspect-ratio:9/16;background:#0b1a15;border-radius:6px;overflow:hidden}
.fb-lightbox-frame.is-video{width:min(760px,100%);aspect-ratio:16/9}
.fb-lightbox-frame iframe,.fb-lightbox-frame .fb-video,.fb-lightbox-frame span{width:100%!important;height:100%!important;display:block;border:0}
.fb-lightbox-close{position:absolute;z-index:2;right:10px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:#0d1a16cc;color:#f1eee7;font-size:20px;cursor:pointer}
.fb-lightbox-out{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:12px;background:#0d1a16e0;color:#e6ebe7;font-size:12px;text-align:center}
.fb-lightbox-out:hover{color:var(--gold)}
.fb-lightbox-close:hover{background:#0d1a16}

/* --------------------------------------------------------------------------
   Missing images.
   A deleted upload or a dead remote URL used to render as the browser's broken
   -image glyph with the alt text sprawling across the card. app.js swaps in a
   transparent pixel and paints a gradient derived from the item's title, so the
   slot keeps its shape and still looks deliberate.
   -------------------------------------------------------------------------- */
.image-missing{background-size:cover;background-position:center}
.image-missing-img{
  background-color:#8a9490;
  background-size:cover;
  background-position:center;
  min-height:60px;
  /* An img with no visible source still paints its alt text over the gradient;
     the attribute stays for screen readers, it is only hidden visually. */
  font-size:0;
  color:transparent;
}

/* --------------------------------------------------------------------------
   Footer.
   The agency badge used to sit above the copyright line, so a negative bottom
   margin pulled the copyright up to overlap it. Update 006 moved the badge to
   last, and that same negative margin then dragged it out through the bottom
   of the footer. It is the last element now, so it needs normal spacing.
   -------------------------------------------------------------------------- */
.footer{padding-bottom:34px}
/* The social links are block-level anchors like the rest of the footer column,
   so without an explicit row they stack one per line. wrap, not nowrap: seven
   networks would otherwise squash inside a narrow footer column. */
.footer-socials{display:flex!important;flex-wrap:wrap;align-items:center;gap:9px}
.footer-socials a{display:inline-grid;place-items:center;margin:0;flex:0 0 auto}
/* Real brand marks instead of stray letters, tinted with currentColor. */
.footer-socials .social-icon{display:grid;place-items:center;width:32px;height:32px;flex-basis:32px;padding:0;font-size:0;transition:background .2s ease,border-color .2s ease,color .2s ease}
.footer-socials .social-icon svg{width:15px;height:15px;fill:currentColor;display:block}
.footer-socials a:hover .social-icon{border-color:#d7ad50;background:#d7ad50;color:#10231d}
.footer-socials .social-facebook{background:#1877f2;border-color:#1877f2;color:#fff}.footer-socials .social-instagram{background:radial-gradient(circle at 32% 100%,#ffd600 0 23%,#ff7a00 24%,#ff0169 50%,#d300c5 72%,#7638fa 100%);border-color:#c13584;color:#fff}.footer-socials .social-youtube{background:#ff0000;border-color:#ff0000;color:#fff}.footer-socials .social-x{background:#fff;border-color:#fff;color:#000}.footer-socials .social-tiktok{background:#010101;border-color:#25f4ee;color:#fff;box-shadow:2px 0 0 #fe2c55}.footer-socials .social-linkedin{background:#0a66c2;border-color:#0a66c2;color:#fff}.footer-socials .social-pinterest{background:#e60023;border-color:#e60023;color:#fff}.footer-socials a:hover .social-icon{filter:brightness(1.12);transform:translateY(-2px);border-color:currentColor}.footer-socials a:hover .social-x{background:#fff;color:#000;border-color:#fff}.footer-socials a:hover .social-tiktok{background:#010101;color:#fff;border-color:#25f4ee}
.copyright{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px}
.copyright a{float:none!important;color:#d4c187}
.agency-credit{margin:26px auto 0!important;width:max-content;max-width:100%}
@media(max-width:600px){
  .copyright{justify-content:center;text-align:center}
  .agency-credit{margin-top:22px!important}
}

/* --------------------------------------------------------------------------
   Card grids: keep every row lined up across columns.
   A two-line title used to push that card's excerpt and meta line down on its
   own, so the three cards in a row no longer agreed on anything below the
   title. Subgrid hands each card the same row tracks, so the eyebrow, title,
   excerpt and meta line all sit on a shared baseline whatever the title length.
   -------------------------------------------------------------------------- */
/* Listing pages wrap each card in a [data-category] div for the filter buttons.
   That wrapper was the grid item, not the card, so the card could never line up
   with its neighbours. display:contents hands the grid the card itself, and the
   filter still works because it toggles inline display:none. */
.card-grid>[data-category]{display:contents}
.card{display:flex;flex-direction:column;height:100%}
.card-copy{display:flex;flex-direction:column;flex:1}
.card-meta{margin-top:auto}
@supports (grid-template-rows:subgrid){
  .card-grid{grid-auto-rows:auto}
  .card{display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:0;height:auto}
  .card-copy{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0}
  /* Margins would break out of the shared tracks, so spacing moves to padding. */
  .card h3{margin:0;padding:10px 0;align-self:start}
  .card-copy>.eyebrow{align-self:end}
  .card p{margin:0;padding-bottom:15px}
  .card-meta{margin-top:0;align-self:end}
}