/* Stilla Rum skin (fictional concept, SilverMoose). Calm: warm sand and sage, Cormorant Garamond + Nunito Sans,
   soft round shapes, a centred hero with a wide rounded film and a slow breathing ring. Light is the house look. */
:root,:root[data-theme=light]{
  --bg:#f1ece4; --surface:#fbf8f3; --surface-2:#e8e1d5; --ink:#2b2a26; --muted:#6c675c; --line:rgba(43,42,38,.12);
  --accent:#5f7a5c; --accent-ink:#fbf8f3; --dark:#2f3a2f; --dark-ink:#f1ece4; --gold:#a88a57; --ok:#4f7f56; --closed:#a8584b;
  --glow:rgba(95,122,92,.16); --shadow:rgba(60,55,40,.22);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#1a201b; --surface:#222a24; --surface-2:#2b342d; --ink:#ece6db; --muted:#b3ac9e; --line:rgba(236,230,219,.12);
  --accent:#a3bd9e; --accent-ink:#1a201b; --dark:#ece6db; --dark-ink:#1a201b; --gold:#d2b682; --ok:#8fcf98; --closed:#e58d7c;
  --glow:rgba(163,189,158,.14); --shadow:rgba(0,0,0,.55);
  color-scheme:dark;
}
:root{ --display:"Cormorant Garamond",Georgia,serif; --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif; }
body{font-family:var(--body);font-weight:400}
h1,h2,h3{font-variation-settings:normal}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.005em}
h1{font-size:clamp(52px,7.6vw,112px);line-height:.95}
h2{font-size:clamp(38px,5vw,66px);line-height:1}
h1 em,h2 em{font-style:italic;color:var(--accent)}
.eyebrow{color:var(--accent);letter-spacing:.26em}
.btn{border-radius:999px}
.mark{font:400 30px/1 var(--display);letter-spacing:.02em}
.mark i{color:var(--accent)}
.top{background:color-mix(in srgb,var(--bg) 90%,transparent)}

/* Centred hero + wide film with a breathing ring */
.s-hero{max-width:1280px;margin:0 auto;padding:clamp(46px,7vw,96px) var(--gut-r) 0 var(--gut);text-align:center}
.s-hero .lead{margin-inline:auto;max-width:52ch}
.s-hero .cta{justify-content:center}
.s-film{position:relative;margin:clamp(36px,5vw,60px) auto 0;max-width:1180px;aspect-ratio:21/9;border-radius:40px;overflow:hidden;background:#2f3a2f;box-shadow:0 40px 90px -50px var(--shadow)}
.s-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-film::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 50%,transparent,rgba(20,25,20,.45))}
.breath{position:absolute;z-index:1;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);display:grid;place-items:center;animation:breathe 10s ease-in-out infinite}
.breath::before{content:"";position:absolute;inset:14px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(4px)}
.breath span{position:absolute;color:#fff;font:italic 400 20px/1 var(--display);letter-spacing:.02em}
.breath .in{animation:breathIn 10s ease-in-out infinite}.breath .out{animation:breathOut 10s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.78)}45%,55%{transform:scale(1.12)}}
@keyframes breathIn{0%,40%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes breathOut{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.reel-toggle{position:absolute;z-index:2;right:22px;bottom:20px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:12px;letter-spacing:-1px;cursor:pointer;backdrop-filter:blur(6px)}
.s-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 40px;margin:34px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14.5px}
.s-trust b{color:var(--ink);font:500 22px/1 var(--display);margin-right:6px}

/* Treatment cards */
.s-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.s-card{display:grid;align-content:start;gap:10px;padding:16px 16px 22px;border-radius:30px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:inherit;transition:transform .4s var(--ease),box-shadow .4s}
.s-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--accent),0 30px 60px -40px var(--shadow)}
.s-card img{border-radius:22px;aspect-ratio:4/5;object-fit:cover;width:100%}
.s-card b{font:500 26px/1.1 var(--display);padding:0 6px}
.s-card span{padding:0 6px;color:var(--muted);font-size:14.5px}
.s-card .chips-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 6px}
.s-card .chips-row i{font-style:normal;font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink)}

/* Visit steps */
.s-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:st}
.s-steps li{position:relative;padding:28px 26px;border-radius:30px;background:var(--surface-2)}
.s-steps li::before{counter-increment:st;content:counter(st);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:16px;background:var(--accent);color:var(--accent-ink);font:500 22px/1 var(--display)}
.s-steps b{display:block;font:500 26px/1.15 var(--display)}
.s-steps p{margin:8px 0 0;color:var(--muted)}

/* Gallery ("Rummet") */
.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ig-grid button{border-radius:28px;aspect-ratio:4/3}
.ig-grid.room button:nth-child(4n+1){aspect-ratio:auto;grid-row:span 2}

/* Team */
.s-team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.s-team li{display:grid;justify-items:center;text-align:center;gap:6px;padding:30px 22px;border-radius:30px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.s-team .ini{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;margin-bottom:8px;background:radial-gradient(circle at 35% 30%,var(--glow),transparent 70%),var(--surface-2);font:italic 400 34px/1 var(--display);color:var(--accent)}
.s-team b{font:500 28px/1 var(--display)}
.s-team span{color:var(--muted);font-size:14px}
.s-team p{margin:8px 0 0;font-size:15px;max-width:32ch}

/* Gift cards */
.s-gift{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(30px,4vw,56px);border-radius:40px;background:var(--dark);color:var(--dark-ink)}
.s-gift h2{color:var(--dark-ink)}
.s-gift p{opacity:.8;max-width:44ch}
.s-gift .btn-accent{background:var(--dark-ink);color:var(--dark)}
.gift-cards{position:relative;height:280px}
.gcard{position:absolute;width:min(78%,340px);aspect-ratio:1.6;border-radius:22px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);font-family:var(--display)}
.gcard b{font:400 22px/1 var(--display)}
.gcard span{font:500 38px/1 var(--display)}
.gcard:nth-child(1){left:0;top:20px;transform:rotate(-7deg);background:linear-gradient(135deg,#a3bd9e,#5f7a5c);color:#fbf8f3}
.gcard:nth-child(2){left:16%;top:0;transform:rotate(3deg);background:linear-gradient(135deg,#efe6d6,#cbb48a);color:#2b2a26}
.gcard:nth-child(3){left:32%;top:60px;transform:rotate(10deg);background:linear-gradient(135deg,#3d4a3d,#1f271f);color:#ece6db}

.reviews{gap:18px}
.rev{border-radius:30px}
.example-tag{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--surface-2);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.visit-img{border-radius:30px}
.post,.cat,.trainee{border-radius:28px}

/* Footer CTA */
.s-cta{max-width:1180px;margin:clamp(80px,10vw,130px) auto 0;padding:clamp(36px,5vw,64px);border-radius:40px;background:var(--surface-2);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.s-cta p{margin:12px 0 0;color:var(--muted);max-width:52ch}
.social-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);cursor:default}
.social-pill svg{width:16px;height:16px;fill:currentColor}

@media (max-width:980px){
  .s-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-steps,.s-team{grid-template-columns:minmax(0,1fr)}
  .s-gift{grid-template-columns:minmax(0,1fr)}
  .s-film{aspect-ratio:16/10}
}
@media (max-width:620px){
  .s-film{aspect-ratio:4/5;border-radius:28px}
  .breath{width:120px;height:120px;margin:-60px 0 0 -60px}
  .ig-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ig-grid.room button:nth-child(4n+1){grid-row:auto;aspect-ratio:4/3}
  .s-cards{gap:10px}.s-card b{font-size:21px}
  .gift-cards{height:220px}
  .s-cta{grid-template-columns:minmax(0,1fr);margin-inline:var(--gut)}
}
@media (prefers-reduced-motion:reduce){ .breath,.breath span{animation:none} .breath .out{opacity:0} }
