/* SaddleUp minimal overrides and tokens */
:root{
  --su-copper:#B87333;
  --su-saddle:#8B5A2B;
  --su-bg:#ffffff;
  --su-text:#111111;
  --su-muted:#4b5563; /* gray-600 */
  --su-border:rgba(0,0,0,0.12);
  /* Service area tokens */
  --accent-amber:#C47B2A;
  --text:#101010;
  --muted:#6b7280;
  --panel:#ffffff;
  --card:#f6f6f7;
  --shadow-sm:0 6px 18px rgba(0,0,0,.08);
  --shadow-md:0 18px 40px rgba(0,0,0,.12);
  --radius:18px;
}

/* Dark base */
html{color-scheme:light;}
body{background:var(--su-bg); color:var(--su-text);} 

/* Respect hidden attribute even if components set display */
[hidden]{display:none !important}

/* Focus ring */
:where(a,button,input,select,textarea,[tabindex]){
  outline-offset:2px;
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--su-copper);
}

/* Skip link */
.skip-to-content{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-to-content:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;padding:.5rem .75rem;border-radius:.5rem;z-index:10000;}

/* Cards */
.card{border:1px solid var(--su-border);background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); border-radius:0.75rem;}
.card-hover{transition:transform .25s ease, box-shadow .25s ease;}
@media (prefers-reduced-motion: reduce){.card-hover{transition:none}}
.card-hover:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.5rem;font-weight:600}
.btn-primary{background:var(--su-copper);color:#111;padding:.75rem 1rem}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{border:1px solid var(--su-saddle);color:#fff;padding:.75rem 1rem}
.btn-secondary:hover{background:rgba(139,90,43,0.15)}
.btn-primary.is-white{color:#fff !important}
.btn-secondary.is-black{color:#111 !important}
.btn-ghost{color:#111;padding:.5rem .75rem}
.btn-ghost:hover{background:rgba(0,0,0,.06)}

/* Splash button */
.btn-enter{--c:#B87333; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.25rem; border-radius:999px; background:var(--c); color:#111; font-weight:600; transition:filter .2s ease, box-shadow .25s ease, transform .2s ease}
.btn-enter:hover{filter:brightness(1.05); box-shadow:0 0 0 6px rgba(184,115,51,.20), 0 12px 30px rgba(0,0,0,.35); transform:translateY(-1px)}
.btn-enter:focus-visible{outline:3px solid var(--c); outline-offset:3px}

/* Splash transitions */
.splash-fade{position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .6s ease-in-out}
.splash-fade.in{opacity:1}
.slide-up{will-change:transform, opacity; animation:splashSlideUp .85s ease-in-out both}
@keyframes splashSlideUp{from{transform:translateY(0); opacity:1} to{transform:translateY(-12%); opacity:.98}}

/* Badges (store buttons) */
.badge{border:1px solid var(--su-border);border-radius:.5rem;padding:.5rem .75rem;display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.03)}
.badge img,.badge-invert img{width:22px;height:22px;filter:brightness(0) invert(1);vertical-align:middle}

/* Reveal */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Toast */
.toast-container{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:10000}
.toast{background:#fff;border:1px solid var(--su-border);color:#111;border-radius:.5rem;padding:.75rem 1rem;box-shadow:0 6px 20px rgba(0,0,0,.1)}

/* Header */
.header-blur{backdrop-filter:saturate(180%) blur(10px); background:rgba(255,255,255,0.75)}
.header-slide{will-change:transform;transition:transform .36s cubic-bezier(0.22, 1, 0.36, 1)}
@media (prefers-reduced-motion: reduce){.header-slide{transition:none}}
.header-hidden{transform:translateY(-100%)}
.header-before{transform:translateY(-12px);}
.header-animate-in{animation:headerSlideDown .48s cubic-bezier(0.22, 1, 0.36, 1) both}
@keyframes headerSlideDown{from{transform:translateY(-14px)} to{transform:translateY(0)}}
.header-pinned{position:fixed;top:0;left:0;right:0;width:100%;box-shadow:0 8px 24px rgba(0,0,0,.06)}

/* Premium header (scoped) */
.su-header{position:fixed;top:0;left:0;right:0;z-index:60;color:#fff;backdrop-filter:none;background:transparent;transition:background .28s ease, backdrop-filter .28s ease, box-shadow .28s ease}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.su-header{background:rgba(12,14,16,.35)}}
.su-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg, rgba(184,115,51,0), rgba(184,115,51,.7), rgba(184,115,51,0));opacity:0;transform:scaleX(.9);transition:opacity .25s ease, transform .25s ease}
.su-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.su-header .brand{font-weight:600;letter-spacing:-0.01em}
.su-logo{display:inline-flex;align-items:center;gap:.5rem;transition:transform .2s ease}
.su-logo:hover{transform:scale(1.03)}
/* Themed logo mark (tints external SVG via CSS mask) */
.logo-mark{display:inline-block; width:28px; height:28px; background:#fff; -webkit-mask:url('/assets/img/logo.svg') no-repeat center / contain; mask:url('/assets/img/logo.svg') no-repeat center / contain}
.logo-mark--sm{width:24px; height:24px}
/* Large footer variant */
.logo-mark--lg{width:65px; height:65px}
/* Outline variant for light backgrounds (uses a scaled masked layer behind) */
.logo-mark--outline{position:relative}
.logo-mark--outline::before{content:""; position:absolute; inset:0; background:var(--su-copper); -webkit-mask:url('/assets/img/logo.svg') no-repeat center / contain; mask:url('/assets/img/logo.svg') no-repeat center / contain; transform:scale(1.12); /* ~1-2px outer stroke */ z-index:-1}
.su-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.5rem;color:#fff}
.su-burger:hover{background:rgba(255,255,255,.08)}
.su-nav{display:none;gap:1.25rem;align-items:center}
.su-nav a{position:relative;color:rgba(255,255,255,.9);font-weight:500}
.su-nav a::after{content:"";position:absolute;left:50%;bottom:-8px;height:2px;width:0;background:linear-gradient(90deg, rgba(184,115,51,.85), rgba(255,198,110,.95));border-radius:2px;transform:translateX(-50%);transition:width .22s ease}
.su-nav a:hover::after,.su-nav a[aria-current="page"]::after,.su-nav a.is-active::after{width:100%}
@media (min-width:768px){.su-nav{display:flex}.su-burger{display:none}}

/* Simple header mode: show envelope on mobile, hide hamburger */
.su-header--simple .su-nav{display:flex}
.su-header--simple .su-burger{display:none}
@media (max-width:767px){
  .su-header--simple .su-nav{gap:.5rem}
  .su-header--simple .su-nav .nav-label{display:none}
  .su-header--simple .su-nav .nav-icon{min-height:auto;padding:0;width:40px;height:40px;justify-content:center;border-radius:.5rem}
  .su-header--simple .su-nav .nav-icon svg{width:24px;height:24px}
}

.su-header--scrolled{background:rgba(12,14,16,.6);backdrop-filter:saturate(180%) blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.su-header--scrolled::after{opacity:1;transform:none}
.su-header--scrolled .su-header__inner{height:56px}

/* Nav contact icon */
.su-nav .nav-icon{position:relative;display:inline-flex;align-items:center;gap:.5rem;min-height:52px;padding:0 14px;border-radius:.75rem;color:#fff}
.su-nav .nav-icon::after{content:none}
.su-nav .nav-icon svg{display:block;width:24px;height:24px}
.su-nav .nav-icon:hover{animation:navPulse 1.2s ease-out infinite}
@keyframes navPulse{0%{box-shadow:0 0 0 0 rgba(184,115,51,.35)}70%{box-shadow:0 0 0 12px rgba(184,115,51,0)}100%{box-shadow:0 0 0 0 rgba(184,115,51,0)}}

/* Mobile menu overlay + drawer */
.su-mm__overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s ease}
.su-mm{position:fixed;inset:0;z-index:70;display:block}
.su-mm.hidden{display:none}
.su-mm .su-mm__panel{position:fixed;top:0;right:0;height:100vh;width:min(88vw, 360px);background:#111;color:#e5e7eb;box-shadow:-18px 0 60px rgba(0,0,0,.35);transform:translateX(8px);opacity:0;transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease;display:flex;flex-direction:column;padding:16px;overscroll-behavior:contain}
.su-mm__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.su-mm__close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.5rem;color:#e5e7eb}
.su-mm__close:hover{background:rgba(255,255,255,.08)}
.su-mm__nav{display:flex;flex-direction:column;font-size:1.125rem;gap:.5rem;padding-top:.5rem}
.su-mm__nav a{padding:.6rem 0;color:#e5e7eb}

/* lifecycle states */
.su-mm.is-opening .su-mm__overlay{opacity:1;pointer-events:auto}
.su-mm.is-opening .su-mm__panel{opacity:1;transform:translateX(0)}
.su-mm.is-open .su-mm__overlay{opacity:1;pointer-events:auto}
.su-mm.is-open .su-mm__panel{opacity:1;transform:translateX(0)}
.su-mm.is-closing .su-mm__overlay{opacity:0;pointer-events:none}
.su-mm.is-closing .su-mm__panel{opacity:0;transform:translateX(8px)}

/* Prevent background scroll when menu is open */
html.su-lock, body.su-lock{height:100%; overflow:hidden}
body.su-lock{position:fixed; width:100%}
html.su-lock{overscroll-behavior:none}

@media (prefers-reduced-motion: reduce){
  .su-header{transition:none}
  .su-header::after{transition:none}
  .su-logo{transition:none}
  .su-nav a::after{transition:none}
  .su-mm__overlay,.su-mm .su-mm__panel{transition:none}
}

/* Utility */
.container{max-width:1200px;margin-inline:auto;padding-inline:1rem}

/* Image ratios */
.img-cover{object-fit:cover}

/* Mobile menu overlay */
.mobile-overlay{background:rgba(0,0,0,.65)}

/* --- Concierge modern section helpers --- */
/* --- Hero polish --- */
.hero{position:relative;overflow:hidden;color:#fff}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.94)}
.hero__overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.66) 100%)}
.hero__content{position:relative;z-index:1;padding-top:7rem;padding-bottom:6rem}
.hero__content::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, rgba(184,115,51,.3), rgba(184,115,51,0));opacity:.7}

/* Cinematic entry */
.hero{--zStart:.96}
.hero .hero__bg{transform:scale(var(--zStart)); opacity:0; transition:transform .9s ease-out, opacity .9s ease-out; will-change:transform,opacity}
.hero .hero-lead{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.hero .hero-sub{opacity:0; transform:translateY(10px); transition:opacity .6s ease .1s, transform .6s ease .1s}
.hero .hero-cta{opacity:0; transform:translateY(10px); transition:opacity .6s ease .2s, transform .6s ease .2s}
.hero .hero-card{opacity:0; transform:translateY(10px); transition:opacity .6s ease .3s, transform .6s ease .3s}
.hero.hero--ready .hero__bg{opacity:1; transform:scale(1)}
.hero.hero--ready .hero-lead,
.hero.hero--ready .hero-sub,
.hero.hero--ready .hero-cta,
.hero.hero--ready .hero-card{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .hero .hero__bg,.hero .hero-lead,.hero .hero-sub,.hero .hero-cta,.hero .hero-card{transition:none; opacity:1; transform:none}
}

/* Buttons in hero: lift + glow */
.hero .btn{min-height:48px}
.hero .btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.28)}
.hero .btn:hover{outline:0}
.hero .btn{transition:transform .2s ease, box-shadow .25s ease, filter .2s ease}
.hero .btn.btn-secondary{border-color:rgba(184,115,51,.55); box-shadow:0 0 0 0 rgba(184,115,51,.18)}
.hero .btn.btn-secondary:hover{box-shadow:0 0 0 3px rgba(184,115,51,.18), 0 14px 34px rgba(0,0,0,.35)}
.hero .btn:active{transform:none; box-shadow:0 6px 16px rgba(0,0,0,.25)}

/* Frosted card tweak */
.hero .hero-card{background:rgba(0,0,0,.36); border:1px solid rgba(255,255,255,.24); backdrop-filter:saturate(160%) blur(16px); border-radius:1rem}

/* Scroll cue */
.hero__cue{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);opacity:.9;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);backdrop-filter:blur(6px);transition:opacity .25s ease, transform .25s ease}
.hero__cue:hover{transform:translateX(-50%) translateY(-2px)}
.hero__cue svg{color:#fff}
.hero__cue.is-hidden{opacity:0; pointer-events:none}
@keyframes cuePulse{0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-3px)}}
.hero__cue{animation:cuePulse 2.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.hero__cue{animation:none}}

/* Mobile adjustments */
@media (max-width:768px){
  .hero__content{padding-top:6.5rem; padding-bottom:4.75rem}
  .hero__bg{object-position:60% center}
  .hero .btn{width:100%}
  .hero .hero-card{padding:1rem}
}
/* Glass-like card */
.glass-card{background:rgba(255,255,255,.66);border:1px solid rgba(0,0,0,.08);backdrop-filter:saturate(160%) blur(14px);border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.10)}

/* Animated gradient blob */
.gradient-blob{background:radial-gradient(35% 35% at 30% 30%, rgba(184,115,51,.55), transparent 60%),
               radial-gradient(40% 40% at 70% 70%, rgba(139,90,43,.45), transparent 65%);
  filter: blur(24px); opacity:.7; border-radius:9999px; will-change:transform; animation:blobFloat 18s ease-in-out infinite alternate}
@keyframes blobFloat{from{transform:translate(0,0) scale(1)} to{transform:translate(-14px,-10px) scale(1.06)}}
@media (prefers-reduced-motion: reduce){.gradient-blob{animation:none}}

/* Feature chip list */
.feature-chip{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1px solid var(--su-border);background:#fff;border-radius:.75rem;box-shadow:0 1px 0 rgba(0,0,0,.03);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.feature-chip:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.08);border-color:rgba(0,0,0,.18)}
.feature-chip .icon{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:.5rem;background:#fff;border:1px solid rgba(0,0,0,.10);color:var(--su-copper);box-shadow:0 1px 0 rgba(0,0,0,.06)}

/* Floating motion for preview card */
.float-y{animation:floatY 9s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){.float-y{animation:none}}

/* Stagger delay helpers for .reveal */
.reveal-delay-1{transition-delay:.06s}
.reveal-delay-2{transition-delay:.12s}
.reveal-delay-3{transition-delay:.18s}
.reveal-delay-4{transition-delay:.24s}
.reveal-delay-5{transition-delay:.30s}
.reveal-delay-6{transition-delay:.36s}

/* Progress ring using conic-gradient */
.ring-progress{--p:72%; position:relative; width:104px; height:104px; border-radius:9999px; background:
  conic-gradient(var(--su-copper) var(--p), rgba(0,0,0,.08) 0);
  -webkit-mask:radial-gradient(circle 44px at 50% 50%, transparent 43px, #000 44px);
          mask:radial-gradient(circle 44px at 50% 50%, transparent 43px, #000 44px);
}
.ring-progress::after{content:attr(aria-label); position:absolute; inset:0; display:grid; place-items:center; font-weight:600; font-variant-numeric:tabular-nums;}

/* --- App teaser helpers --- */
.device-frame{position:relative;border-radius:1.25rem;background:linear-gradient(180deg,#f6f7f9,#fbfbfc);border:1px solid rgba(0,0,0,.10);box-shadow:0 20px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5);padding:10px}
.device-screen{overflow:hidden;border-radius:1rem;}
.device-screen img{display:block;width:100%;height:auto}
.tilt-hover{will-change:transform;transition:transform .35s ease}
.tilt-hover:hover{transform:translateY(-4px) rotateX(2deg) rotateY(-2deg)}
@media (prefers-reduced-motion: reduce){.tilt-hover{transition:none}.tilt-hover:hover{transform:none}}

.pulse-tag{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .55rem;border-radius:999px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.85);backdrop-filter:blur(6px);font-size:.75rem;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.pulse-tag .dot{width:8px;height:8px;border-radius:999px;background:var(--su-copper);box-shadow:0 0 0 0 rgba(184,115,51,.6);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{to{box-shadow:0 0 0 10px rgba(184,115,51,0)}}
@media (prefers-reduced-motion: reduce){.pulse-tag .dot{animation:none}}

.progress-striped{height:8px;border-radius:999px;overflow:hidden;position:relative;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.12)}
.progress-striped::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg, rgba(184,115,51,.35) 0 10px, rgba(184,115,51,.15) 10px 20px);transform:translateX(-20px);animation:stripeMove 1s linear infinite}
@keyframes stripeMove{to{transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){.progress-striped::before{animation:none}}

/* Dark section variant for App teaser */
.section-dark{background:radial-gradient(900px 500px at 10% 10%, rgba(184,115,51,.10), transparent 60%), linear-gradient(180deg,#0d0f12,#0a0c0f); color:#f3f4f6}
.section-dark .text-muted{color:#cbd5e1}

.device-frame.dark{background:linear-gradient(180deg,#161a1f,#0f1216);border-color:rgba(255,255,255,.08);box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06)}
.pulse-tag.dark{background:rgba(12,14,16,.65);color:#e5e7eb;border-color:rgba(255,255,255,.12)}

.badge-invert{border:1px solid rgba(255,255,255,.22);border-radius:.5rem;padding:.5rem .75rem;display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);color:#e5e7eb}
.badge-invert:hover{background:rgba(255,255,255,.1)}

.progress-striped.is-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.progress-striped.is-dark::before{background-image:repeating-linear-gradient(45deg, rgba(184,115,51,.65) 0 10px, rgba(184,115,51,.28) 10px 20px)}

/* --- Contact form modern styles --- */
.card-form{background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); border:1px solid var(--su-border); border-radius:1rem; box-shadow:0 12px 34px rgba(0,0,0,.08)}
.field{position:relative}
.field-input{width:100%; border:1px solid var(--su-border); background:#fff; color:var(--su-text); border-radius:.75rem; padding:1rem .875rem .875rem; transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease}
.field-input::placeholder{color:transparent}
.field-input:focus{outline:none; border-color:var(--su-copper); box-shadow:0 0 0 4px rgba(184,115,51,.18)}
.field-label{position:absolute; left:.8rem; top:.9rem; color:var(--su-muted); background:#fff; padding:0 .25rem; border-radius:.25rem; pointer-events:none; transition:transform .18s ease, color .18s ease, top .18s ease, font-size .18s ease}
.field-input:focus + .field-label,
.field-input:not(:placeholder-shown) + .field-label{top:-.55rem; font-size:.75rem; color:#111}
.field-hint{font-size:.75rem; color:#6b7280}

.btn .icon{transition:transform .18s ease}
.btn:hover .icon{transform:translateX(2px)}

/* --- Media card (for photos/illustrations) --- */
.media-card{border:1px solid var(--su-border); border-radius:1rem; overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.08); transition:transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .35s cubic-bezier(0.22,1,0.36,1)}
.media-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.12)}
.media-card img{display:block; width:100%; height:auto; object-fit:contain}
@media (prefers-reduced-motion: reduce){.media-card{transition:none}.media-card:hover{transform:none}}

/* Feature list variant for service area */
.feature-chip.small{padding:.6rem .8rem}
.feature-chip.small .icon{width:24px;height:24px}

/* Service area: keep image no taller than content */
#service-area{align-items:stretch}
#service-area .media-card{display:inline-block; vertical-align:top; align-self:start; height:auto; max-height:none}
#service-area .media-card img{display:block; width:auto; height:auto; max-width:100%; max-height:100%}
@media (min-width:768px){
  #service-area .media-card{width:auto; max-width:100%; max-height:80vh}
  #service-area .media-card img{max-height:80vh; width:auto; height:auto}
}

/* Pointer cursor on Service area feature list hover */
#service-area .feature-chip{cursor:default}
#service-area .feature-chip:hover{cursor:pointer; background:#fff}

/* --- Testimonials (dark cinematic) --- */
.no-scrollbar{-ms-overflow-style:none; scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

.testimonials-track{scroll-snap-type:x mandatory}
.testimonial-card{position:relative; border-radius:1rem; border:1px solid rgba(184,115,51,.25); background:linear-gradient(180deg, rgba(17,17,17,.88), rgba(10,10,10,.92)); box-shadow:0 10px 30px rgba(0,0,0,.35); min-height:160px; transition:transform .6s ease, box-shadow .6s ease, border-color .6s ease}
.testimonial-card:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(0,0,0,.5); border-color:rgba(184,115,51,.45)}
.testimonial-card:focus-within{outline:3px solid #B87333; outline-offset:3px}
.testimonial-reveal{transition-duration:.7s; transition-timing-function:cubic-bezier(.22,1,.36,1)}
.testimonial-card .quote-accent{position:absolute; top:.9rem; left:.9rem; color:#B87333; opacity:.9}

/* Service area */
.serviceArea{position:relative; z-index:1; isolation:isolate; padding-block:clamp(48px, 8vw, 96px)}
.serviceArea__inner{display:grid; gap:24px; align-items:start}
@media (min-width:768px){.serviceArea__inner{gap:32px}}
@media (min-width:1024px){.serviceArea__inner{gap:48px}}
@media (min-width:960px){
  .serviceArea__inner{grid-template-columns:1fr 1.1fr}
}

/* Image card */
.serviceArea__image{position:relative; border:1px solid var(--su-border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); background:var(--panel); will-change:transform; aspect-ratio:1 / 1; max-height:720px}
.serviceArea__image img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 68%}

/* Decorative campfire glow overlay (only when .flicker-on present) */
.serviceArea.flicker-on .serviceArea__image::after{content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(160px 110px at 24% 86%, rgba(196,123,42,.26), rgba(196,123,42,0) 70%),
  radial-gradient(220px 140px at 34% 96%, rgba(255,160,64,.18), rgba(255,160,64,0) 72%);
  mix-blend-mode:screen; opacity:.18; animation:saFlicker 3s ease-in-out infinite alternate
}
@keyframes saFlicker{0%{opacity:.15} 50%{opacity:.28} 100%{opacity:.2}}

/* Content */
.serviceArea__content h2{font-size:clamp(22px, 2.2vw, 30px); font-weight:700; letter-spacing:-0.01em; margin-bottom:14px}
.serviceArea__content h3{font-size:1.25rem; font-weight:600}
.serviceArea__content p{color:var(--muted)}
.serviceArea__list + h3{margin-top:28px}
.serviceArea__content p + h3{margin-top:20px}
.serviceArea__content h3 + p{margin-top:8px}
.serviceArea__content p{margin-top:16px}
.serviceArea__disclaimer{margin-top:16px; padding:14px 16px; border:1px solid var(--su-border); border-radius:.75rem; color:#6b7280; background:#fff; box-shadow:var(--shadow-sm)}

/* List */
.serviceArea__list{margin-top:12px; display:grid; gap:8px}
.serviceArea__item{position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid rgba(16,16,16,.08); transition:background .2s ease, box-shadow .2s ease}
.serviceArea__item .icon{display:inline-flex; width:20px; height:20px; color:var(--accent-amber); background:currentColor; border-radius:4px; transition:transform .18s ease, box-shadow .18s ease}
.serviceArea__item::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background:linear-gradient(90deg, rgba(196,123,42,.9), rgba(255,160,64,.9)); transform:scaleX(0); transform-origin:left; transition:transform .22s ease}
.serviceArea__item:hover,.serviceArea__item:focus-within{background:rgba(196,123,42,.08)}
.serviceArea__item:hover::after,.serviceArea__item:focus-within::after{transform:scaleX(1)}
.serviceArea__item:hover .icon,.serviceArea__item:focus-within .icon{transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,.12)}

/* Scroll reveal initial */
.serviceArea .serviceArea__image,
.serviceArea .serviceArea__content > *{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1)}

/* Stagger when visible */
.serviceArea.is-visible .serviceArea__image{opacity:1; transform:none; transition-delay:0ms}
.serviceArea.is-visible .serviceArea__content > h2{opacity:1; transform:none; transition-delay:80ms}
.serviceArea.is-visible .serviceArea__content > .serviceArea__list{opacity:1; transform:none; transition-delay:160ms}
.serviceArea.is-visible .serviceArea__content > h3:nth-of-type(1),
.serviceArea.is-visible .serviceArea__content > p:nth-of-type(1){opacity:1; transform:none; transition-delay:240ms}
.serviceArea.is-visible .serviceArea__content > h3:nth-of-type(2),
.serviceArea.is-visible .serviceArea__content > p:nth-of-type(2){opacity:1; transform:none; transition-delay:300ms}
.serviceArea.is-visible .serviceArea__content > .serviceArea__disclaimer{opacity:1; transform:none; transition-delay:320ms}

/* Parallax holder (JS applies translateY) */
.serviceArea__image{will-change:transform}

/* Reduced motion guards */
@media (prefers-reduced-motion: reduce){
  .serviceArea .serviceArea__image,
  .serviceArea .serviceArea__content > *{opacity:1; transform:none; transition:none}
  .serviceArea.flicker-on .serviceArea__image::after{animation:none}
}

/* --- Premium Footer (mobile-first) --- */
.siteFooter{position:relative; z-index:0; border-top:1px solid var(--su-border); background:linear-gradient(180deg,#fdfdfd,#fbfbfb); color:#374151}
.siteFooter::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, rgba(184,115,51,0), rgba(184,115,51,.55), rgba(184,115,51,0));}
.siteFooter__inner{position:relative; z-index:1; display:grid; gap:20px; padding-block:20px}
.siteFooter::after{content:""; position:absolute; inset:0; pointer-events:none; background-image:url('/assets/img/cow-skull.svg'); background-repeat:no-repeat; background-size:min(52vw, 560px) auto; background-position:center; opacity:.04; filter:grayscale(1) contrast(.9) brightness(.9)}
/* Rider variant hook (uses same translucent outlined style). Use logo.svg as rider mark */
.siteFooter--rider::after{background-image:url('/assets/img/logo.svg'); opacity:.1; background-size:min(40vw, 420px) auto; background-position:center center}
.siteFooter__brand{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.siteFooter__brandText{display:flex; flex-direction:column; gap:6px}
.siteFooter__name{font-weight:700; color:#111; line-height:1}
.siteFooter__homeLink{color:inherit; text-decoration:none}
.siteFooter__homeLink:hover{opacity:.9}
.siteFooter__tagline{margin-top:8px; font-size:.85rem; color:#6b7280}
.siteFooter__addr{font-style:normal; line-height:1.6}
.siteFooter__addr a{color:inherit; text-decoration:none; border-bottom:1px dashed rgba(0,0,0,.15)}
.siteFooter__addr a:hover{color:#111; border-bottom-color: rgba(0,0,0,.35)}
.siteFooter__nav{display:flex; flex-direction:column; gap:10px}
.siteFooter__nav .siteFooter__heading{font-weight:700; color:#111}
.siteFooter__nav ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.siteFooter__nav a{color:inherit; text-decoration:none; position:relative; display:inline-block; padding:.3rem 0}
.siteFooter__nav a::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:linear-gradient(90deg, rgba(184,115,51,.85), rgba(255,198,110,.95)); border-radius:2px; transition:width .2s ease}
.siteFooter__nav a:hover::after, .siteFooter__nav a:focus-visible::after{width:100%}
.siteFooter__social{display:flex; flex-direction:column; gap:10px}
.siteFooter__heading{font-weight:700; color:#111}
.siteFooter__icons{display:flex; gap:14px; color:#111; margin-top:4px; flex-wrap:wrap}
.siteFooter__icon{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; border:1px solid rgba(0,0,0,.18); background:#fff; transition:transform .18s ease, box-shadow .18s ease, color .18s ease}
  .siteFooter__icon{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; border:1px solid rgba(0,0,0,.18); background:#fff; color:#111; transition:transform .18s ease, box-shadow .18s ease, color .18s ease}
  .siteFooter__icon[data-icon]::before{content:""; display:block; width:20px; height:20px; background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain}
  .siteFooter__icon[data-icon="facebook"]::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 9h3V6h-3c-2.2 0-4 1.8-4 4v2H8v3h2v6h3v-6h3l1-3h-4V10c0-.55.45-1 1-1Z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M14 9h3V6h-3c-2.2 0-4 1.8-4 4v2H8v3h2v6h3v-6h3l1-3h-4V10c0-.55.45-1 1-1Z"/></svg>'); }
  .siteFooter__icon[data-icon="tiktok"]::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M16 8.3c1.2.8 2.6 1.3 4 1.4V12c-1.6 0-3.1-.4-4.4-1.1v5.1c0 3.4-2.8 6-6.2 6S3.2 19.4 3.2 16s2.8-6.2 6.2-6.2c.5 0 1 .1 1.5.2v3.1c-.5-.2-1-.3-1.5-.3-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3V2h3v.1c.5 2.3 2.3 4.2 4.6 4.7v1.5c-1.4-.1-2.8-.6-4-1.4z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M16 8.3c1.2.8 2.6 1.3 4 1.4V12c-1.6 0-3.1-.4-4.4-1.1v5.1c0 3.4-2.8 6-6.2 6S3.2 19.4 3.2 16s2.8-6.2 6.2-6.2c.5 0 1 .1 1.5.2v3.1c-.5-.2-1-.3-1.5-.3-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3V2h3v.1c.5 2.3 2.3 4.2 4.6 4.7v1.5c-1.4-.1-2.8-.6-4-1.4z"/></svg>'); }
  .siteFooter__icon[data-icon="instagram"]::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5" fill="%23000"/><circle cx="12" cy="12" r="4" fill="%23000"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5" fill="%23000"/><circle cx="12" cy="12" r="4" fill="%23000"/></svg>'); }
.siteFooter__icon:hover, .siteFooter__icon:focus-visible{color:#111; transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.08)}
.siteFooter__icon svg{display:block; width:20px; height:20px; fill:currentColor; stroke:currentColor}
.siteFooter__icon img{display:block; width:20px; height:20px; filter:brightness(0) saturate(100%)}
.siteFooter__sub{border-top:1px solid var(--su-border); padding-block:12px; font-size:.8rem; color:#6b7280; text-align:center}

/* Footer contact list */
.siteFooter .contactList{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.siteFooter .contactItem{display:flex; align-items:flex-start; gap:10px}
.siteFooter .contactIcon{display:inline-flex; width:18px; height:18px; color:var(--su-copper); flex:0 0 18px; margin-top:2px}
.siteFooter .contactText{line-height:1.5}
.siteFooter .contactLink{display:inline-block; color:inherit !important; text-decoration:none; border-bottom:1px dashed rgba(0,0,0,.15)}
.siteFooter .contactLink:hover{color:#111; border-bottom-color:rgba(0,0,0,.35)}

/* Footer reveal */
.siteFooter{opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease}
.siteFooter.is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .siteFooter{opacity:1; transform:none; transition:none}
}

/* Footer responsive */
@media (min-width:640px){
  .siteFooter__inner{grid-template-columns:1.2fr 1fr; gap:24px; padding-block:28px}
  /* Balance two-column layout when social is removed */
  .siteFooter--no-social .siteFooter__inner{grid-template-columns:1fr 1fr; align-items:start}
}
@media (min-width:960px){
  .siteFooter__inner{grid-template-columns:1.2fr 1fr 1fr; gap:32px; padding-block:36px}
  /* Two-column layout when social is removed */
  .siteFooter--no-social .siteFooter__inner{grid-template-columns:1fr 1fr; align-items:start}
}
/* Dark theme modifier */
.siteFooter--dark{border-top-color:rgba(255,255,255,.12); background:linear-gradient(180deg,#0d0f12,#0a0c0f); color:#e5e7eb}
.siteFooter--dark .siteFooter__heading,.siteFooter--dark .siteFooter__name{color:#fff}
.siteFooter--dark .siteFooter__tagline{color:#cbd5e1}
.siteFooter--dark .siteFooter__addr a,.siteFooter--dark .contactLink{border-bottom-color:rgba(255,255,255,.22)}
.siteFooter--dark .contactLink{color:#fff !important}
.siteFooter--dark .siteFooter__addr a:hover,.siteFooter--dark .contactLink:hover{color:#fff; border-bottom-color:rgba(255,255,255,.38)}
.siteFooter--dark .siteFooter__icon{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#e5e7eb}
.siteFooter--dark .siteFooter__icon:hover,.siteFooter--dark .siteFooter__icon:focus-visible{color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.35)}
.siteFooter--dark .siteFooter__icon img{filter:brightness(0) invert(1)}
.siteFooter--dark .siteFooter__sub{border-top-color:rgba(255,255,255,.18); color:#9ca3af}
.siteFooter--dark::after{opacity:.06; filter:invert(1) grayscale(1) contrast(.65) brightness(.55)}
/* Boost rider visibility on dark footer */
.siteFooter--rider.siteFooter--dark::after{opacity:.12; filter:invert(1) grayscale(1) contrast(1.05) brightness(.98)}
/* Mobile touch targets */
@media (max-width:639px){
  .siteFooter__icon{width:44px; height:44px}
  .siteFooter__nav a{padding:.5rem 0}
  .siteFooter__brand{gap:14px}
  /* Center footer content on mobile */
  .siteFooter__inner{justify-items:center; text-align:center}
  .siteFooter__brand{align-items:center}
  .siteFooter__nav,.siteFooter__social{align-items:center}
  .siteFooter__icons{justify-content:center}
  .siteFooter .contactList{place-items:center}
  .siteFooter .contactItem{justify-content:center}
  /* Replace skull with rider on mobile, remove skull when not in rider mode */
  .siteFooter::after{background-image:none}
  .siteFooter--rider::after{background-image:url('/assets/img/logo.svg'); background-size:min(62vw, 420px) auto; background-position:center center; opacity:.18; filter:invert(1) grayscale(1) contrast(1.05) brightness(1.02)}
  /* Center contact list and items */
  .siteFooter .contactList{justify-items:center}
  .siteFooter .contactItem{justify-content:center}
  /* Address controlled break after Ste E-290, */
  .addr-br{display:inline}
}

/* Global: add a bit more breathing room between sections on mobile */
@media (max-width:767px){
  main > section + section{margin-top:24px}
  /* Seam fix: let Concierge background cover the top gap on mobile */
  #concierge{margin-top:0 !important; padding-top:24px}
}

/* ---------------- Legal pages (dark, minimal, readable) ---------------- */
.legalPage{background:linear-gradient(180deg,#0d0f12,#0a0c0f); color:#e5e7eb; min-height:60vh}
.legalPage__inner{max-width:min(100%, 900px); margin-inline:auto; padding:clamp(44px,6vw,84px) 1rem}
.legalPage a{color:var(--su-copper)}
.legalPage__header{margin-bottom:18px}
.legalPage__title{font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:-0.01em; margin:0}
.legalPage__title::after{content:""; display:block; margin-top:.6rem; height:2px; background:linear-gradient(90deg, rgba(255,192,106,.9), rgba(255,192,106,0)); opacity:.65}
.legalPage__meta{color:#9ca3af; margin-top:.35rem; font-size:.925rem}
.legalPage h2{font-size:clamp(20px,2.2vw,26px); font-weight:600; margin-top:28px; margin-bottom:10px}
.legalPage p{line-height:1.75; margin:12px 0; color:#d1d5db}
.legalPage ul{margin:10px 0 10px 1.2rem; display:grid; gap:.4rem}
.legalPage li{list-style:disc}
.legalPage strong{color:#e5e7eb}
.legalPage .container{max-width:inherit}