/* ==========================================================================
   Jay Details 530 — stylesheet
   Mobile-first. No external fonts or CDNs; everything loads from this folder.
   ========================================================================== */

:root{
  --bg:#0B0E11;
  --surface:#12161B;
  --surface-2:#191F26;
  --line:#252D37;
  --text:#E9EDF2;
  --muted:#98A4B3;
  --accent:#22D3EE;
  --accent-2:#38BDF8;
  --accent-ink:#04212A;

  --wrap:1160px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 50px -22px rgba(0,0,0,.85);

  --header-h:68px;
  --bar-h:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top:calc(var(--header-h) + 12px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* room for the sticky mobile bar */
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));
}

img,svg{max-width:100%}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em;font-weight:750}
h1{font-size:clamp(2.1rem,7vw,4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,4.6vw,2.7rem);letter-spacing:-.03em}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.center{text-align:center}
.grad{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:700;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.eyebrow{
  font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .85rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:14px 24px;border-radius:999px;
  font-weight:700;font-size:.98rem;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
  /* comfortable thumb target on phones */
  min-height:48px;
}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn-accent{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);
  box-shadow:0 10px 28px -12px rgba(34,211,238,.75);
}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--text)}
.btn-lg{padding:16px 30px;font-size:1.03rem;min-height:54px}
.btn-sm{padding:10px 18px;font-size:.9rem;min-height:42px}

@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn-accent:hover{box-shadow:0 16px 34px -12px rgba(34,211,238,.85)}
  .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#39434f}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,14,17,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.site-header.scrolled{border-bottom-color:var(--line);background:rgba(11,14,17,.94)}

.header-inner{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{
  width:40px;height:40px;flex:none;border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);font-weight:900;font-size:.92rem;letter-spacing:-.03em;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-weight:800;font-size:1.02rem;letter-spacing:-.02em}
.brand-sub{font-size:.68rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:600}

.nav-desktop{display:none;align-items:center;gap:26px}
.nav-desktop a{
  text-decoration:none;font-size:.94rem;font-weight:600;color:var(--muted);
  transition:color .18s ease;
}
.nav-desktop a:hover{color:var(--text)}
.nav-desktop .btn{color:var(--accent-ink)}

.nav-toggle{
  width:46px;height:46px;flex:none;
  display:grid;place-content:center;gap:5px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:12px;cursor:pointer;
}
.nav-toggle .bar{
  display:block;width:19px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-mobile{
  display:grid;overflow:hidden;
  max-height:0;transition:max-height .32s ease;
  background:var(--surface);border-top:1px solid transparent;
}
.nav-mobile.open{max-height:400px;border-top-color:var(--line)}
.nav-mobile a{
  padding:16px 20px;text-decoration:none;font-weight:650;
  border-bottom:1px solid var(--line);
}
.nav-mobile a:last-child{border-bottom:0;color:var(--accent)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 64px}
.hero-glow{
  position:absolute;inset:-30% -20% auto -20%;height:640px;pointer-events:none;
  background:
    radial-gradient(58% 52% at 22% 32%,rgba(34,211,238,.20),transparent 70%),
    radial-gradient(48% 46% at 82% 12%,rgba(56,189,248,.14),transparent 70%);
  filter:blur(8px);
}
.hero-inner{position:relative}
.hero h1{margin-bottom:.55em;max-width:16ch}
.hero-lead{color:var(--muted);font-size:1.06rem;max-width:56ch;margin-bottom:2rem}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:3rem}
.hero-cta .btn{flex:1 1 100%}

.trust{
  display:grid;grid-template-columns:1fr;gap:2px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--line);
}
.trust li{
  background:var(--surface);padding:20px;
  display:flex;flex-direction:column;gap:4px;
}
.trust strong{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--accent)}
.trust span{font-size:.88rem;color:var(--muted)}

/* ---------- Sections ---------- */
.section{padding:64px 0;position:relative}
.section-alt{background:var(--surface);border-block:1px solid var(--line)}
.section-head{max-width:62ch;margin-bottom:2.5rem}
.section-lead{color:var(--muted);font-size:1.04rem;margin:0}
.note{
  margin-top:1.75rem;color:var(--muted);font-size:.94rem;
  padding:16px 18px;border:1px dashed var(--line);border-radius:var(--radius-sm);
}
.note-sm{color:var(--muted);font-size:.86rem;margin:.75rem 0 0}

/* ---------- Service cards ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:18px}
.card{
  position:relative;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px 28px;
  display:flex;flex-direction:column;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);border-color:#33404e;box-shadow:var(--shadow)}
}
.section-alt .card{background:var(--surface-2)}
.card-featured{
  border-color:rgba(34,211,238,.4);
  background:linear-gradient(180deg,rgba(34,211,238,.07),transparent 45%),var(--surface);
}
.ribbon{
  position:absolute;top:-1px;right:20px;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:0 0 8px 8px;
}
.card-icon{
  width:46px;height:46px;border-radius:12px;margin-bottom:16px;
  display:grid;place-items:center;
  background:rgba(34,211,238,.11);border:1px solid rgba(34,211,238,.22);
}
.card-icon svg{width:24px;height:24px;fill:var(--accent)}
.card p{color:var(--muted);font-size:.96rem}

.feature-list{margin:.5rem 0 1.4rem;display:grid;gap:.55rem}
.feature-list li{
  position:relative;padding-left:26px;font-size:.93rem;color:var(--text);
}
.feature-list li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:13px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.card-price{
  margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:.4rem;
  font-weight:750;color:var(--accent) !important;font-size:.95rem;
}
/* The figure itself carries the weight; "From" stays quiet beside it. */
.card-price strong{font-size:1.4rem;font-weight:800;letter-spacing:-.03em}

/* ---------- Reels ---------- */
.reels{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:2.5rem}
.reel{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  position:relative;
  /* Instagram's embed sets its own height from its width, and we can't read it
     back across origins. Pinning the card to the width we measured keeps the
     embed flush with the card edges at every breakpoint. */
  width:100%;
  max-width:335px;
  height:640px;
  margin-inline:auto;
}
/* The iframe sits above the fallback. If Instagram's embed is blocked the
   iframe stays transparent and the fallback shows through underneath. */
.reel iframe{
  position:relative;z-index:2;
  width:100%;height:100%;border:0;display:block;
}
.reel-fallback{
  position:absolute;inset:0;z-index:1;
  display:grid;place-content:center;gap:10px;
  text-align:center;padding:24px;color:var(--muted);font-size:.92rem;
}
.reel-fallback a{color:var(--accent);font-weight:700}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:18px;counter-reset:step}
.step{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;
}
.section-alt .step{background:var(--surface-2)}
.step-num{
  display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;
  border-radius:50%;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);
}
.step p{color:var(--muted);font-size:.96rem;margin:0}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr;gap:36px}
.about-grid p{color:var(--muted)}
.about-grid .btn{margin-top:.5rem}
.badges{display:grid;gap:14px;align-content:start}
.badges li{
  background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);padding:18px 20px;
  color:var(--muted);font-size:.94rem;
}
.badges strong{display:block;color:var(--text);font-size:1rem;margin-bottom:4px}

/* ---------- Service area ---------- */
.area-list{display:flex;flex-wrap:wrap;gap:10px}
.area-list li{
  background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:10px 18px;font-size:.92rem;font-weight:600;
}

/* ---------- FAQ ----------
   Native <details>/<summary> so the answers are in the HTML for crawlers and
   work with no JavaScript. */
.faq{display:grid;gap:12px;max-width:80ch}
.faq-item{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;
  transition:border-color .2s ease;
}
.faq-item[open]{border-color:rgba(34,211,238,.35)}
.faq-item summary{
  display:flex;align-items:flex-start;gap:14px;justify-content:space-between;
  padding:18px 20px;cursor:pointer;list-style:none;
  min-height:56px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{
  margin:0;font-size:1rem;font-weight:700;line-height:1.4;letter-spacing:-.01em;
}
/* Chevron */
.faq-item summary::after{
  content:"";flex:none;margin-top:.35em;
  width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
  transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg)}
@media (hover:hover){
  .faq-item summary:hover h3{color:var(--accent)}
}
.faq-item > p{
  margin:0;padding:0 20px 20px;
  color:var(--muted);font-size:.95rem;max-width:70ch;
}
.faq-item > p a{color:var(--accent);font-weight:650}

/* ---------- Booking / contact ---------- */
.section-book{
  background:
    radial-gradient(70% 60% at 50% 0%,rgba(34,211,238,.11),transparent 70%),
    var(--surface);
  border-top:1px solid var(--line);
}
.contact-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:2.5rem}
.contact-card{
  display:flex;flex-direction:column;gap:5px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;text-decoration:none;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
@media (hover:hover){
  .contact-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.45);box-shadow:var(--shadow)}
}
.contact-primary{
  border-color:rgba(34,211,238,.45);
  background:linear-gradient(180deg,rgba(34,211,238,.10),transparent 50%),var(--surface-2);
}
.contact-icon{
  width:44px;height:44px;border-radius:12px;margin-bottom:10px;
  display:grid;place-items:center;
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.25);
}
.contact-icon svg{width:22px;height:22px;fill:var(--accent)}
.contact-label{font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.contact-label em{font-style:normal;color:var(--accent)}
.contact-value{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.contact-hint{font-size:.88rem;color:var(--muted)}

.book-info{
  display:grid;grid-template-columns:1fr;gap:28px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 24px;
}
.book-info h3{font-size:1.02rem;margin-bottom:.9rem}
.check-list{display:grid;gap:.6rem}
.check-list li{position:relative;padding-left:26px;color:var(--muted);font-size:.94rem}
.check-list li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:13px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.hours{margin:0;display:grid;gap:.5rem}
.hours>div{display:flex;justify-content:space-between;gap:16px;font-size:.94rem;border-bottom:1px dashed var(--line);padding-bottom:.5rem}
.hours dt{color:var(--muted)}
.hours dd{margin:0;font-weight:650}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg);border-top:1px solid var(--line);padding-top:48px}
.footer-inner{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:36px}
.footer-blurb{color:var(--muted);font-size:.92rem;margin-top:14px;max-width:42ch}
.site-footer h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.footer-nav,.footer-contact{display:grid;gap:.6rem;align-content:start}
.footer-nav a,.footer-contact a{text-decoration:none;color:var(--muted);font-size:.94rem;transition:color .18s ease}
.footer-nav a:hover,.footer-contact a:hover{color:var(--accent)}
.footer-area{color:var(--muted);font-size:.86rem;margin:.5rem 0 0}
.footer-bottom{
  border-top:1px solid var(--line);padding-block:20px;
}
.footer-bottom p{margin:0;color:var(--muted);font-size:.84rem}

/* ---------- Sticky mobile bar ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  display:grid;grid-template-columns:1fr 1.5fr 1fr;
  gap:1px;background:var(--line);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bar a{
  background:rgba(18,22,27,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--bar-h);
  text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.01em;
}
.mobile-bar a svg{width:20px;height:20px;fill:currentColor}
.mobile-bar .bar-primary{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width:600px){
  .hero-cta .btn{flex:0 1 auto}
  .trust{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .reels{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .book-info{grid-template-columns:1fr 1fr;padding:32px}
  .footer-inner{grid-template-columns:1.4fr 1fr 1fr}
}

@media (min-width:900px){
  :root{--header-h:78px}
  body{padding-bottom:0}          /* mobile bar is hidden at this width */
  .mobile-bar{display:none}
  .nav-desktop{display:flex}
  .nav-toggle,.nav-mobile{display:none}

  .hero{padding:96px 0 104px}
  .section{padding:100px 0}
  .cards{grid-template-columns:repeat(4,1fr)}
  .reels{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
  .section-head{margin-bottom:3.25rem}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}