/* === Design tokens (must be defined before use) === */
:root{
    /* palette from the shop */
    --bg:#f6f7f8;
    --surface: rgba(232, 224, 224, 0.45);
    --ink: #22242a;
    --muted:#6b7280;
    --frame:#2f3237;
    --accent: #3d3f42;
    --accent-2:#3a3f45;
    --border:#e5e7eb;

    /* layout widths (missing before) */
    --max: 1200px;
    --max-wide: 1400px;

    /* shape & shadow */
    --radius:18px;
    --radius-sm:12px;
    --shadow:0 10px 30px rgba(17,18,23,.06);

    /* spacing & breakpoints */
    --space-1:8px;
    --space-2:12px;
    --space-3:18px;
    --space-4:22px;
    --space-5:26px;
    --section-pad:72px;

    --bp-lg:1100px;
    --bp-md:820px;
    --bp-sm:560px;
}

*{ box-sizing:border-box }
html,body{ height:100%; width:100%; overflow-x:hidden; }
html{ scroll-behavior:smooth }

body{
    margin:0; /* was 0 5px → caused side gaps on mobile */
    background: var(--bg);
    color: var(--ink);
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height:1.6;
}

img{ max-width:100%; display:block; border-radius:var(--radius-sm) }
a{ color:inherit; text-decoration:none }
a:hover{ opacity:.9 }

.container{ max-width:var(--max); margin-inline:auto; padding:0 28px }
.container--wide{ max-width:var(--max-wide) }
@media (max-width: 560px){
    .container{ padding:0 16px; } /* tighter gutters on phones */
}

.muted{ color:var(--muted) }
.lead{ color:var(--muted); max-width:62ch }
.divider{ border:none; border-top:1px solid var(--border); margin:14px 0 }

/* Graphite top/bottom lines like the desk trim */
.frame{ border-top:4px solid var(--frame); border-bottom:4px solid var(--frame); background:var(--surface) }

/* Buttons */
.btn{ display:inline-flex; gap:.6rem; align-items:center; padding:14px 18px; border-radius:999px; font-weight:700; border:1px solid var(--border); box-shadow:var(--shadow) }
.btn--dark{ background:var(--accent); color:#fff }
.btn--dark:hover{ background:var(--accent-2) }
.btn--ghost{ background:#fff; color:var(--ink); border:1px solid var(--border) }

/* Topbar */
.topbar{ background:#fff; border-bottom:1px solid var(--border) }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:.95rem; color:var(--muted) }
.topbar__links{ display:flex; gap:1rem }

/* Header */
.site-header{ position:sticky; top:0; z-index:50 }
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px }
.brand{ display:flex; align-items:center; gap:.8rem }
.brand__name{ font-weight:600; letter-spacing:.2px; font-family:"Poppins",sans-serif }
.logo{ border-radius:10px }
.navlinks{ display:flex; gap:1.2rem }
.navlinks a{ font-weight:600; color:var(--muted) }
.navlinks a:hover{ color:var(--ink) }
.mobile-toggle{ display:none }

/* Mobile menu */
.mobile-menu{ border-bottom:1px solid var(--border); background:#fff }
.mobile-menu__inner{ padding:12px 0; display:grid; gap:10px }

/* Hero — color only (no textures) */
.hero{ position:relative; isolation:isolate; padding:76px 0 36px; background:linear-gradient(180deg,#ffffff, #f6f7f8) }
.hero__inner{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center }
.eyebrow{ color:var(--muted); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem }
.title{ font-size:clamp(36px,5.5vw,64px); line-height:1.05; margin:.4rem 0 1rem; font-family:"Poppins",sans-serif }
.subtitle{ color:var(--muted); font-size:1.1rem; max-width:60ch }
.actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap }
.trust{ display:flex; gap:18px; margin:16px 0 0; padding:0; list-style:none; color:var(--muted); font-weight:600 }
/* (Ceiling accent removed on color-only request) */
.ceiling{ display:none }

/* Cards */
.hero__cards{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.card{ padding:18px; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow) }
.card--light{ background:var(--surface) }
.price{ margin-top:.4rem; font-weight:800; color:var(--ink) }

/* Sections */
.section{ padding:72px 0 }
.section__head{ /* centered heads across the site */
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:8px; margin-bottom:26px; text-align:center;
}
.section__head h2{ font-size:clamp(26px,3.2vw,38px); margin:0; font-family:"Poppins",sans-serif }
.section__head .lead{ margin:8px auto 0; max-width:62ch }

/* Grids */
.grid{ display:grid; gap:18px }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }

/* Simple tiles */
.tile{ background:var(--surface); padding:5px; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow) }

/* Team */
.team{ text-align:center }
.team img{ aspect-ratio:1/1; object-fit:cover }
.team h3{ margin:.6rem 0 .2rem }
.team p{ margin:.1rem 0; color:var(--muted) }

/* Gallery (legacy grid rules kept harmlessly; slider styles below) */
.section--wide{ background:#fff }
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px }
.gallery--light img{ aspect-ratio:1/1; object-fit:cover; border:1px solid var(--border) }

/* Elegant gallery placeholders */
.ph{
    position:relative; display:grid; place-items:center;
    aspect-ratio:1 / 1; border:1px dashed var(--border); border-radius:var(--radius);
    background:linear-gradient(180deg,#fff,#f7f8f9); color:var(--muted); overflow:hidden;
}
.ph::before, .ph::after{ content:""; position:absolute; opacity:.35; }
.ph::before{ width:54px; height:38px; border:2px solid var(--border); border-radius:10px; top:50%; left:50%; transform:translate(-50%,-60%); }
.ph::after{ width:14px; height:14px; border:2px solid var(--border); border-radius:50%; top:calc(50% - 26px); left:calc(50% + 18px); }
.ph > span{ position:relative; margin-top:34px; font-size:.95rem; font-weight:600; color:var(--muted); text-align:center; padding:0 8px; }

/* Testimonials */
.testimonial{ background:var(--surface) }
.stars{ letter-spacing:2px; color:#111; margin:0 0 6px }

/* Booking */
.layout-2col{ display:grid; grid-template-columns:1.2fr .8fr; gap:18px }
.field{ display:grid; gap:8px; margin:8px 0 }
.field input,.field select,.field textarea{ background:#fff; border:1px solid var(--border); padding:12px 14px; border-radius:12px; color:var(--ink); font-size:1rem }

/* Hours & Location */
.layout-3col{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.hours{ width:100%; border-collapse:collapse }
.hours td{ padding:10px 6px; border-bottom:1px dashed var(--border) }
.hours td:first-child{ color:var(--muted) }
.map-embed{ aspect-ratio:16/9; background:#fafafa; border:1px solid var(--border); border-radius:12px; display:grid; place-items:center; color:var(--muted) }

/* Footer (polished) */
.site-footer{ padding:48px 0 18px; background:#fff; color:var(--muted) }
.footer-grid{
    display:grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:28px 24px; align-items:start;
}
.footer-brand{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center }
.footer__brand-name{ font-size:1.05rem; color:var(--ink) }
.footer__tagline{ margin:.25rem 0 0 }
.footer__title{ margin:0 0 .6rem; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem }
.footer__links a{ color:var(--ink) }
.footer__links a:hover{ color:var(--accent) }
.footer__addr{ margin:.3rem 0 .6rem; font-style:normal }
.footer__contact a{ color:var(--ink) }
.footer__contact a:hover{ color:var(--accent) }
.hours--compact{ width:auto; border-collapse:separate; border-spacing:0 .1rem; font-size:.95rem }
.hours--compact td{ padding:.1rem .25rem; border:0 }
.hours--compact td:first-child{ color:var(--muted); padding-right:.6rem }
.footer__social{ display:flex; gap:10px; margin-top:.6rem }
.social{
    width:36px; height:36px; display:grid; place-items:center;
    border-radius:999px; border:1px solid var(--border);
    background:#fff; color:var(--ink); box-shadow:var(--shadow);
}
.social:hover{ background:var(--accent); color:#fff }
.social svg{ width:18px; height:18px; fill: currentColor }
.footer-bottom{
    margin-top:22px; padding-top:12px; display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid var(--border); gap:12px; flex-wrap:wrap;
}
.legal a{ color:var(--muted) }
.legal a:hover{ color:var(--ink) }
.copyright{ margin:0; font-size:.95rem; color:var(--muted) }
.btn--sm{ padding:10px 12px; font-size:.95rem; box-shadow:none }

/* Slider shell */
.slider{
    position:relative; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow); padding-bottom:44px;
}
.slider__viewport{ overflow:hidden; border-radius:inherit }
.slider__track{ display:flex; will-change:transform; transition: transform 500ms ease }
.slider__slide{ flex:0 0 100%; display:grid }

/* Make media fill the slide */
.slider__slide picture,
.slider__slide img,
.slider__slide .ph{ display:block; width:100%; height:100% }
.slider__slide picture > img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover }

/* Controls */
.slider__btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; display:grid; place-items:center;
    border-radius:50%; border:1px solid var(--border);
    background:rgba(255,255,255,.92); color:var(--ink); box-shadow:var(--shadow);
    cursor:pointer; z-index:2;
}
.slider__btn--prev{ left:12px }
.slider__btn--next{ right:12px }
.slider__btn:hover{ background:var(--accent); color:#fff }

/* Dots */
.slider__dots{
    position:absolute; left:0; right:0; bottom:8px;
    display:flex; gap:8px; justify-content:center; align-items:center;
}
.slider__dots .dot{
    width:10px; height:10px; border-radius:50%;
    border:1px solid var(--border); background:#fff; display:inline-block; cursor:pointer;
}
.slider__dots .dot[aria-selected="true"]{ background:var(--accent); border-color:var(--accent) }

/* Compact gallery slider sizing */
#gallerySlider{
    --slide-h-min: 220px;
    --slide-h-ideal: 32vw;
    --slide-h-max: 380px;
}
#gallerySlider .slider__viewport{ height: clamp(var(--slide-h-min), var(--slide-h-ideal), var(--slide-h-max)) }
#gallerySlider .slider__slide picture > img,
#gallerySlider .slider__slide .ph{ aspect-ratio:auto; height:100%; width:100%; object-fit:cover }
#gallerySlider .slider__btn{ width:36px; height:36px }
#gallerySlider .slider__dots .dot{ width:8px; height:8px }

/* A11y utilities */
.visually-hidden-focusable:not(:focus):not(:active){
    position:absolute!important; height:1px; width:1px; overflow:hidden;
    clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* Hero media (circle) */
.hero__inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center }
.hero__media{
    --hero-d: clamp(180px, 32vw, 420px);
    width: var(--hero-d); height: var(--hero-d);
    border-radius:50%; overflow:hidden;
    border:1px solid var(--border); box-shadow:var(--shadow); background:#fff;
    justify-self:end; align-self:center;
}
.hero__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1 / 1 }
@media (max-width: 1100px){
    .hero__inner{ grid-template-columns:1fr }
    .hero__media{ order:-1; margin-bottom:8px; justify-self:center }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .slider__track{ transition:none !important; }
}

/* Responsive */
@media (max-width: 1100px){
    .hero__cards{ grid-template-columns:repeat(3,1fr) }
    .layout-2col{ grid-template-columns:1fr }
    .gallery{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width: 820px){
    .navlinks{ display:none }
    .mobile-toggle{ display:inline-flex }
    .grid--3{ grid-template-columns:repeat(2,1fr) }
    .grid--4{ grid-template-columns:repeat(2,1fr) }
    .layout-3col{ grid-template-columns:1fr }
}
@media (max-width: 560px){
    .grid--3,.grid--4{ grid-template-columns:1fr }
    .gallery{ grid-template-columns:repeat(2,1fr) }
}

/* Footer responsive tweaks last */
@media (max-width: 980px){
    .footer-grid{ grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (max-width: 720px){
    .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
    .footer-grid{ grid-template-columns: 1fr; }
}
.flip {
    display: inline-block;
    overflow: hidden;
    height: 1.2em; /* adjust so background fully shows */
    vertical-align: bottom;
    position: relative;
}

.flip span {
    display: block;
    line-height: 1.2em;
    padding: 0 8px; /* some breathing room left/right */
    color: #fff; /* white text */
    animation: flipWords 6s infinite;
}

/* Each background color */
.flip span:nth-child(1) {
    background: #7c8b91; /* light blue */
}
.flip span:nth-child(2) {
    background: #c598a9; /* green */
}
.flip span:nth-child(3) {
    background: #567c51; /* red */
}

/* Animate through each span */
@keyframes flipWords {
    0%   { transform: translateY(0%); }
    20%  { transform: translateY(0%); }

    25%  { transform: translateY(-100%); }
    45%  { transform: translateY(-100%); }

    50%  { transform: translateY(-200%); }
    70%  { transform: translateY(-200%); }

    75%  { transform: translateY(0%); }
    100% { transform: translateY(0%); }
}

/* Title styling */
.title {
    font-size: 2.5rem;
    font-weight: 700;
}
.topbar {
    overflow: hidden;
    white-space: nowrap;
    background: var(--accent); /* optional styling */
}

.topbar__inner {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: 0.5rem 1rem;
    color: #fff; /* example */
    animation: marqueeRight 12s linear infinite;
}

/* Continuous scroll from left to right */
@keyframes marqueeRight {
    0%   { transform: translateX(-100%); } /* start off-screen left */
    100% { transform: translateX(100%); }  /* move fully off-screen right */
}
/* ===== Mobile drawer & backdrop ===== */
.mobile-menu{
    position: fixed;
    inset: 0 0 0 auto;          /* right side */
    width: min(90vw, 380px);
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(17,18,23,.18);
    transform: translateX(100%); /* hidden off-screen */
    transition: transform .32s ease;
    z-index: 60;
       /* only 70% of screen height */

    align-items: center;/* scroll if content is longer */
}
.mobile-menu__inner{
    padding: 18px;
    display: grid;
    gap: 10px;
    align-items: center;
}
.mobile-menu__inner a{
    display:flex;
    align-items: center;
    justify-content: center; /* 🔥 centers horizontally */
    padding: 8px 12px;   /* smaller height */
    border: 1px solid var(--border);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;  /* slightly smaller text */
    color: #fff;
    background: var(--accent); /* darker background */

}

.mobile-menu__inner a:hover{ background: var(--surface) }

/* Backdrop (blurred) */
.mobile-backdrop{
    position: fixed; inset: 0;
    background: rgba(17,18,23,.18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 55;
    opacity: 0;
    transition: opacity .25s ease;
}

/* Open state (toggled by JS) */
.is-menu-open .mobile-menu{ transform: translateX(0) }
.is-menu-open .mobile-backdrop{ opacity: 1 }
.is-menu-open .mobile-backdrop[hidden]{ display:block } /* allow fade-in while removing [hidden] */

/* Mobile-only activation */
@media (max-width: 820px){
    .navlinks{ display:none }             /* hide desktop links */
    .mobile-toggle{ display:inline-flex } /* show toggle */
    .mobile-menu__inner a{
        background: var(--accent);
    }
}

/* Optional: style the existing 'Menu' button to be more tappable */
.mobile-toggle{
    border-radius: 12px;
    box-shadow: var(--shadow);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .mobile-menu, .mobile-backdrop{ transition: none !important; }
}