/* =========================================================
   ANNA — Children's Activities & Outdoor Recreation Specialist
   Design tokens: deep forest green / cream / muted gold
   Type: Playfair Display (display) + DM Sans (body)
   ========================================================= */

:root{
    --cream:#f6f2e9;
    --white:#ffffff;
    --green:#233b31;
    --green-deep:#182a23;
    --green-soft:#4c6559;
    --gold:#af8c56;
    --gold-soft:#c9ab7c;
    --charcoal:#1c231f;
    --text:#28332e;
    --muted:#6c7570;
    --line:rgba(28,35,31,.13);
    --line-dark:rgba(255,255,255,.14);

    --serif:"Playfair Display",Georgia,serif;
    --sans:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;

    --container:1360px;
    --gutter:7vw;
    --ease:cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

body{
    font-family:var(--sans);
    color:var(--text);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

img{width:100%;display:block;object-fit:cover}
img{content-visibility:auto}
.hero-media img{content-visibility:visible}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer;background:none;border:0}
ul{list-style:none}

/* Focus visibility — accessibility floor */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
    border-radius:2px;
}

.visually-hidden{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
    position:absolute;left:16px;top:-60px;z-index:2000;
    background:var(--green);color:#fff;padding:12px 20px;border-radius:3px;
    transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}

/* Anchor targets sit below the fixed nav (78px) with breathing room */
[id]{scroll-margin-top:100px}

/* ---------- Scroll reveal (single subtle entrance per section title) ----------
   Hidden only when JS has actually run (.js class added synchronously in <head>).
   Without JS, [data-reveal] elements are never hidden — content stays visible. */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* ---------- Layout helpers ---------- */
.section{padding:130px var(--gutter)}
.section-tight{padding-top:60px}
.section-dark{background:var(--green);color:#fff}
.section-dark .muted{color:rgba(255,255,255,.68)}

.eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;
    color:var(--gold);margin-bottom:22px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold)}

.section-title{max-width:820px;margin-bottom:64px}
.section-title h2{font:500 clamp(38px,4.6vw,64px)/1.08 var(--serif)}
.section-title p{margin-top:22px;max-width:640px;color:var(--muted);font-size:18px}
.section-dark .section-title p{color:rgba(255,255,255,.7)}
.eyebrow--center{justify-content:center}
.press-title{font:500 clamp(34px,4vw,52px)/1.1 var(--serif)}

/* ---------- Navigation ---------- */
.nav{
    position:fixed;z-index:1000;top:0;left:0;right:0;height:78px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 var(--gutter);
    background:rgba(246,242,233,.9);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transition:background .3s var(--ease);
}
.nav-logo{font:600 22px var(--serif);letter-spacing:.05em}
.nav-right{display:flex;align-items:center;gap:36px}
.nav-links{display:flex;gap:30px;font-size:14px;font-weight:500}
.nav-links a{position:relative;padding:4px 0;opacity:.75;transition:opacity .2s}
.nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
    background:var(--green);transform:scaleX(0);transform-origin:left;
    transition:transform .25s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible{opacity:1}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}

.lang-switch{display:flex;border:1px solid var(--line);border-radius:30px;padding:3px}
.lang-switch button{
    border:0;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;
    color:var(--muted);letter-spacing:.03em;transition:.2s;
}
.lang-switch button[aria-pressed="true"]{background:var(--green);color:#fff}

.nav-toggle{
    display:none;width:40px;height:40px;position:relative;
    align-items:center;justify-content:center;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:"";display:block;width:22px;height:2px;background:var(--text);
    transition:transform .25s var(--ease),opacity .2s;
}
.nav-toggle span::before{position:absolute;transform:translateY(-7px)}
.nav-toggle span::after{position:absolute;transform:translateY(7px)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}

.mobile-menu{
    display:none;
}

/* ---------- Hero ---------- */
.hero{
    min-height:100svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;
}
.hero::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(15,22,18,.42) 0%,rgba(15,22,18,.56) 55%,rgba(13,19,16,.76) 100%);
}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--green-deep)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-content{position:relative;z-index:2;width:100%;padding:170px var(--gutter) 90px;color:#fff;max-width:var(--container);margin:0 auto}

/* Legibility safeguard: invisible over dark frames, but keeps the small hero
   text readable if a bright video frame (snow, blown-out sky) comes up. */
.hero-kicker,.hero-statement,.hero-fact strong,.hero-fact span{
    text-shadow:0 1px 3px rgba(10,16,12,.55);
}
.hero-kicker{
    text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;font-weight:700;
    margin-bottom:24px;opacity:.85;
}
.hero h1{font-weight:500}
.hero-name{
    display:block;font:500 clamp(64px,11vw,148px)/.92 var(--serif);
    margin-bottom:18px;letter-spacing:-.01em;
}
.hero-role{
    display:block;font:400 clamp(17px,2vw,23px)/1.4 var(--sans);
    max-width:640px;opacity:.92;margin-top:6px;
}
.hero-statement{
    font:italic 500 clamp(20px,2.4vw,30px)/1.35 var(--serif);
    max-width:760px;border-left:2px solid var(--gold);padding-left:22px;
    margin:34px 0 46px;
}
.hero-facts{display:flex;gap:48px;flex-wrap:wrap;margin-bottom:52px}
.hero-fact{display:flex;flex-direction:column}
.hero-fact strong{font:500 28px var(--serif)}
.hero-fact span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.72;margin-top:4px}

.hero-cta{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 30px;font-size:14.5px;font-weight:600;
    border-radius:2px;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn-primary{background:var(--gold);color:var(--charcoal)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--gold-soft);transform:translateY(-2px)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(255,255,255,.1);border-color:#fff}

.email-badge{width:auto;height:16px;display:block}

/* ---------- About / intro ---------- */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
.intro-highlight{font:500 34px/1.28 var(--serif);color:var(--green);margin-bottom:30px}
.intro-text{font-size:17.5px;color:#3f4a44}
.intro-text p+p{margin-top:22px}
.intro-image{width:100%;border-radius:2px;overflow:hidden;position:relative}
.intro-image img{display:block;width:100%;height:auto;transition:transform .7s var(--ease)}
.intro-image:hover img{transform:scale(1.03)}

/* ---------- Why hotels ---------- */
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw;align-items:start}
.why-lead{font:500 30px/1.3 var(--serif);color:var(--green)}
.why-list{margin-top:0;display:grid;gap:0}
.why-item{
    padding:26px 0;border-top:1px solid var(--line);
    display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
}
.why-list .why-item:last-child{border-bottom:1px solid var(--line)}
.why-mark{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:9px}
.why-item p{font-size:17px;color:var(--text)}

/* ---------- Activities ---------- */
/* Editorial activity cards: the photograph stays clean and typography lives
   in its own calm space. This avoids covering faces and keeps the composition
   consistent on desktop and mobile. */
.activities-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px 18px;
}
.activity{
    position:relative;
    overflow:hidden;
    margin:0;
    background:transparent;
}
.activity img{
    display:block;
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    object-fit:contain;
    transition:transform .7s var(--ease);
}
.activity:hover img,.activity:focus-within img{transform:scale(1.035)}
.activity-overlay{
    position:relative;
    inset:auto;
    display:block;
    padding:20px 4px 4px;
    background:none;
    color:var(--text);
}
.activity h3{
    font:500 clamp(25px,2.1vw,30px)/1.12 var(--serif);
    margin:0 0 8px;
    max-width:430px;
    color:var(--green);
    position:relative;
    padding-top:14px;
}
.activity h3::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:28px;
    height:1px;
    background:var(--gold);
}
.activity p{
    margin:0;
    font-size:14px;
    line-height:1.55;
    color:var(--muted);
    max-width:430px;
}

@media(max-width:900px){
    .activities-grid{
        grid-template-columns:1fr;
        gap:42px;
    }
    .activity{
        background:transparent;
    }
    .activity-overlay,
    .activity--caption-top .activity-overlay{
        position:relative;
        inset:auto;
        padding:18px 4px 0;
        background:none;
        border:0;
        border-radius:0;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }
    .activity h3{font-size:29px;margin-bottom:7px}
    .activity p{font-size:14px;line-height:1.5}
}

@media(max-width:520px){
    .activities-grid{gap:38px}
    .activity-overlay,
    .activity--caption-top .activity-overlay{padding-top:16px}
    .activity h3{font-size:27px}
    .activity p{font-size:14px;max-width:34em}
}

/* ---------- Seasons ---------- */
.seasons{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark)}
.season{background:var(--green);padding:38px 32px;min-height:300px;display:flex;flex-direction:column}
.season-index{font-size:12px;letter-spacing:.1em;color:var(--gold-soft);font-weight:700;margin-bottom:auto;padding-bottom:24px}
.season h3{font:28px var(--serif);margin-bottom:14px}
.season p{color:rgba(255,255,255,.72);font-size:15px}

/* ---------- Drakosha ---------- */
.drakosha{position:relative;min-height:680px;display:grid;grid-template-columns:minmax(360px,.78fr) minmax(0,1.22fr);background:var(--green-deep);overflow:hidden}
.drakosha-image{grid-column:2;grid-row:1;min-height:680px;background:url("../images/drakosha.webp") center center/cover no-repeat;position:relative}
.drakosha-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,14,.20),transparent 24%),linear-gradient(180deg,rgba(7,18,14,0) 68%,rgba(7,18,14,.16))}
.drakosha-content{grid-column:1;grid-row:1;position:relative;z-index:2;display:flex;align-items:center;padding:72px clamp(28px,5vw,78px);background:var(--green-deep)}
.drakosha-copy{max-width:480px;color:#fff}
.drakosha-kicker{color:var(--gold-soft);font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:700}
.drakosha-rule{width:54px;height:1px;margin:20px 0 24px;background:var(--gold-soft)}
.drakosha h2{margin:0 0 22px;font:500 clamp(64px,7vw,104px)/.86 var(--serif);letter-spacing:-.045em;color:#fff}
.drakosha p{max-width:430px;margin:0;color:rgba(255,255,255,.82);font-size:16px;line-height:1.68}
.drakosha-note{margin-top:34px;padding-top:14px;border-top:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.58);font-size:10px;line-height:1.4;text-transform:uppercase;letter-spacing:.18em}
@media(max-width:900px){.drakosha{grid-template-columns:1fr;min-height:0}.drakosha-image{grid-column:1;grid-row:1;min-height:470px}.drakosha-content{grid-column:1;grid-row:2;padding:42px 22px 46px}.drakosha-copy{max-width:560px}.drakosha-rule{margin:16px 0 20px;width:42px}.drakosha h2{font-size:clamp(58px,18vw,82px);margin-bottom:18px}.drakosha p{font-size:15px;line-height:1.58}.drakosha-note{margin-top:26px}}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.review{background:#fff;padding:42px;border:1px solid var(--line)}
.review-mark{font:56px/.5 var(--serif);color:var(--gold);margin-bottom:28px;display:block}
.review-text{font:22px/1.42 var(--serif);margin-bottom:24px;color:var(--text)}
.review-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.review-author{color:var(--muted);font-size:13px}
.review-source-tag{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-top:4px;display:block}
.review-link{color:var(--green);font-size:13px;font-weight:700;white-space:nowrap}
.review-link:hover,.review-link:focus-visible{color:var(--gold)}

/* ---------- Press ---------- */
.press{display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw;align-items:center}
.press-card{background:#fff;color:var(--text);padding:52px;box-shadow:0 24px 64px rgba(0,0,0,.08)}
.press-name{font:34px var(--serif);margin-bottom:8px}
.press-date{color:var(--gold);text-transform:uppercase;font-size:12px;letter-spacing:.15em;margin-bottom:24px;font-weight:700}
.press-card p{color:var(--muted);margin-bottom:26px}
.press-link{color:var(--green);font-weight:700;font-size:14.5px}
.press-link:hover,.press-link:focus-visible{color:var(--gold)}

/* ---------- Gallery ---------- */
/* Masonry: each photo keeps its own natural aspect ratio (no cropping).
   Columns give a tidy, gallery-like alignment without forcing every photo
   into the same box — the right approach once real photos with mixed
   portrait/landscape ratios are in place. */
.gallery{columns:3;column-gap:8px}
.gallery-item{display:block;break-inside:avoid;margin-bottom:8px;border-radius:2px;overflow:hidden;position:relative}
.gallery-item img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.gallery-item:hover img,.gallery-item:focus-within img{transform:scale(1.045)}

/* ---------- Contact / final CTA ---------- */
.contact{text-align:center;padding:150px var(--gutter)}
.contact h2{font:500 clamp(42px,6.4vw,84px)/1.06 var(--serif);margin-bottom:28px}
.contact-sub{max-width:680px;margin:0 auto 44px;color:rgba(255,255,255,.72);font-size:18px}
.contact-actions{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}

footer{
    background:var(--green-deep);color:rgba(255,255,255,.55);
    padding:34px var(--gutter);display:flex;justify-content:space-between;
    gap:20px;font-size:12.5px;flex-wrap:wrap;
}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
    .intro-grid,.why-grid,.press{grid-template-columns:1fr}
    .intro-image{order:-1}
    .why-lead{max-width:520px}
}

@media(max-width:900px){
    .nav{padding:0 20px}
    .nav-links{display:none}
    .nav-toggle{display:inline-flex}

    .mobile-menu{
        display:block;position:fixed;top:78px;left:0;right:0;bottom:0;z-index:999;
        background:var(--cream);padding:20px 28px 40px;
        transform:translateY(-8px);opacity:0;pointer-events:none;
        transition:opacity .25s var(--ease),transform .25s var(--ease);
        overflow-y:auto;
    }
    .mobile-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
    .mobile-menu a{
        display:block;padding:18px 0;font:500 22px var(--serif);
        border-bottom:1px solid var(--line);
    }

    .hero-content{padding:130px 24px 60px}
    .hero-facts{gap:30px}
    .section{padding:84px 24px}
    .section-title{margin-bottom:48px}


    .activities-grid{grid-template-columns:1fr}
    .activity{min-height:320px}

    .seasons{grid-template-columns:1fr 1fr}

    .reviews{grid-template-columns:1fr}
    .review{padding:32px}


    .gallery{columns:2}

    .contact{padding:100px 24px}
    footer{flex-direction:column;text-align:center}
}

@media(max-width:520px){
    .hero-name{font-size:58px}
    .hero-statement{padding-left:16px}
    .seasons{grid-template-columns:1fr}

    .press-card{padding:34px 26px}
    .hero-cta{flex-direction:column;align-items:stretch;width:100%}
    .btn{width:100%;justify-content:center}
}