/* Cipher Event — delat designsystem för undersidor (ljus palett; vinrött endast som accent) */
:root{
  --wine:      #5E2938;
  --wine-deep: #2E1219;
  --wine-ink:  #1D0B10;
  --wine-30:   rgba(94,41,56,.30);
  --wine-55:   rgba(94,41,56,.55);
  --cream:     #F4EEE1;
  --cream-hi:  #FAF5EA;
  --cream-lo:  #EDE3D0;
  --ink-92:    rgba(46,18,25,.92);
  --ink-72:    rgba(46,18,25,.72);
  --ink-58:    rgba(46,18,25,.58);
  --gold-lo:   #6E4E2A;
  --gold:      #A87C45;
  --gold-hi:   #C9A065;
  --bronze-grad: linear-gradient(100deg, #8A6336 0%, #C9A065 42%, #A87C45 68%, #6E4E2A 100%);
  --frame-inset: 22px;
  --ease-lux: cubic-bezier(.16, 1, .3, 1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-snap-type: y proximity; }
body{
  background:
    radial-gradient(140% 100% at 50% 0%, var(--cream-hi) 0%, var(--cream) 55%, var(--cream-lo) 100%);
  color: var(--ink-92);
  font-family: 'Cormorant Garamond', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a{ color: inherit; text-decoration: none; }
img{ display:block; max-width:100%; }

/* Filmkorn — diskret även på ljust */
body::after{
  content:'';
  position: fixed; inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

/* ---------- Sidhuvud (sticky, diskret) ---------- */
.top{
  position: sticky;
  top: 0;
  z-index: 32;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2.2rem;
  padding: 1.5rem calc(var(--frame-inset) + 26px) 1.4rem;
  background: rgba(250,245,234,0);
  transition: background .45s ease, box-shadow .45s ease, padding .45s ease;
}
body.scrolled .top{
  background: rgba(250,245,234,.92);
  box-shadow: 0 1px 0 var(--wine-30), 0 8px 30px rgba(46,18,25,.06);
  padding: .9rem calc(var(--frame-inset) + 26px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav{
  display: flex;
  gap: 2.7rem;
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .30em;
  color: var(--ink-58);
  white-space: nowrap;
}
.nav--left{ justify-content: flex-end; }
.nav--right{ justify-content: flex-start; }
.nav a{ position: relative; padding: .35rem 0; transition: color .35s ease; }
.nav a::after{
  content:'';
  position:absolute; left:50%; right:50%; bottom:0;
  height:1px;
  background: var(--wine);
  transition: left .35s ease, right .35s ease;
}
.nav a:hover{ color: var(--wine); }
.nav a:hover::after{ left:0; right:0; }
.nav a[aria-current="page"]{ color: var(--wine); }
.nav a[aria-current="page"]::after{ left:0; right:0; }
.brand img{
  width: clamp(150px, 15vw, 210px);
  height: auto;
}

/* ---------- Sidhero ---------- */
.page-hero{
  text-align: center;
  padding: clamp(3.4rem, 7vh, 5.5rem) calc(var(--frame-inset) + 26px) clamp(2.2rem, 5vh, 3.6rem);
  max-width: 980px;
  margin: 0 auto;
}
.page-hero .ornament{
  width: 44px;
  margin: 0 auto 1.4rem;
}
.eyebrow{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .46em;
  text-indent: .46em;
  color: var(--wine);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
h1{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  text-wrap: balance;
  color: var(--wine-deep);
}
h1 em, .goldtext{
  font-style: italic;
  font-weight: 300;
  background: var(--bronze-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding-right: .06em;
}
.page-hero .sub{
  margin-top: 1.2rem;
  font-style: italic;
  font-size: clamp(1.04rem, 1.6vw, 1.26rem);
  color: var(--ink-58);
  max-width: 56ch;
  margin-left: auto; margin-right: auto;
}

/* ---------- Innehåll ---------- */
main{ display:block; }
.section{
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(1.6rem, 4vh, 3rem) calc(var(--frame-inset) + 26px);
}
.measure{
  max-width: 62ch;
  margin: 0 auto;
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--ink-72);
}
.measure + .measure{ margin-top: 1.4rem; }
.measure strong{ color: var(--wine-deep); font-weight: 400; }

.rule{
  width: 64px; height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border: 0;
}

.pullquote{
  text-align: center;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.35;
  max-width: 30ch;
  margin: 0 auto;
  color: var(--wine-deep);
}

/* Tjänstekort — välvd "arch"-form från pitchdecken */
.service{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.8rem, 4.5vh, 3.4rem) 0;
}
.service:nth-child(even) .service-media{ order: 2; }
.service-media{
  position: relative;
  border: 1px solid var(--wine-30);
  border-radius: 999px 999px 0 0;
  padding: 9px;
}
.service-media img{
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
}
.service-body .overline{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .58rem;
  letter-spacing: .42em;
  color: var(--wine);
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.service-body h2{
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  margin-bottom: 1rem;
  color: var(--wine-deep);
}
.service-body p{
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink-72);
  max-width: 46ch;
}
.service-body .enquire{
  display: inline-block;
  margin-top: 1.4rem;
  font-family: 'Cinzel', serif;
  font-size: .64rem;
  letter-spacing: .3em;
  color: var(--wine);
  border-bottom: 1px solid rgba(94,41,56,.4);
  padding-bottom: .35rem;
  transition: color .3s ease, border-color .3s ease;
}
.service-body .enquire:hover{ color: var(--wine-ink); border-color: var(--wine-ink); }

/* Galleri */
.masonry{
  columns: 3;
  column-gap: 14px;
}
.masonry a{
  display: block;
  margin-bottom: 14px;
  position: relative;
  border: 1px solid var(--wine-30);
  overflow: hidden;
}
.masonry img{
  width: 100%;
  transition: transform .8s var(--ease-lux), opacity .4s ease;
}
.masonry a:hover img{ transform: scale(1.045); }
.masonry a::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(29,11,16,.32), transparent 45%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.masonry a:hover::after{ opacity: 1; }

.lightbox{
  position: fixed; inset: 0;
  z-index: 60;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(29,11,16,.95);
  padding: 4vmin;
}
.lightbox.open{ display: flex; }
.lightbox img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border: 1px solid rgba(214,176,119,.4);
  box-shadow: 0 30px 120px rgba(0,0,0,.6);
}
.lightbox button{
  position: absolute;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: .3em;
  color: rgba(242,235,220,.72);
  background: none; border: none; cursor: pointer;
  padding: .6rem;
  transition: color .3s ease;
}
.lightbox button:hover{ color: #F3E2BD; }
.lightbox .lb-close{ top: 26px; right: 34px; }
.lightbox .lb-prev{ left: 22px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; }
.lightbox .lb-next{ right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; }

/* Kort */
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
}
.card{
  text-align: center;
  border: 1px solid var(--wine-30);
  padding: clamp(1.8rem, 3.5vw, 2.8rem) 1.6rem;
  position: relative;
  background: rgba(255,253,247,.55);
}
.card::after{
  content:'';
  position:absolute; inset: 7px;
  border: 1px solid rgba(168,124,69,.22);
  pointer-events:none;
}
.card .role{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .56rem;
  letter-spacing: .42em;
  color: var(--wine);
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.card h3{
  font-weight: 400;
  font-size: 1.9rem;
  margin-bottom: 1.1rem;
  color: var(--wine-deep);
}
.card a{
  display: block;
  font-size: 1.08rem;
  color: var(--ink-72);
  padding: .18rem 0;
  transition: color .3s ease;
}
.card a:hover{ color: var(--wine); }
.card .addr{
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-72);
}
.card p.body{
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink-72);
}

/* CTA-band + knapp */
.cta-band{
  text-align: center;
  padding: clamp(2.4rem, 6vh, 4.2rem) calc(var(--frame-inset) + 26px) clamp(3rem, 7vh, 5rem);
}
.cta-band h2{
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  margin-bottom: 1.8rem;
  color: var(--wine-deep);
}
.cta-band .smallprint{
  margin-top: 1.4rem;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-58);
}
.btn-gold{
  display: inline-block;
  position: relative;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: .67rem;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--wine);
  background: rgba(255,253,247,.4);
  border: 1px solid var(--wine-55);
  border-radius: 999px;
  padding: 1.02rem 2.9rem .94rem;
  cursor: pointer;
  transition: color .45s ease, border-color .45s ease, box-shadow .45s ease;
  isolation: isolate;
  overflow: hidden;
}
.btn-gold::before{
  content:'';
  position:absolute; inset:-7px;
  border:1px solid rgba(94,41,56,.22);
  border-radius:999px;
  transition: inset .45s var(--ease-lux), border-color .45s ease;
}
.btn-gold::after{
  content:'';
  position:absolute; inset:0;
  background: var(--wine);
  opacity:0;
  z-index:-1;
  transition: opacity .45s ease;
}
.btn-gold:hover{
  color: #F2EBDC;
  border-color: var(--wine);
  box-shadow: 0 10px 38px rgba(94,41,56,.28);
}
.btn-gold:hover::before{ inset:-4px; border-color: var(--wine-55); }
.btn-gold:hover::after{ opacity:1; }

/* Platsband (Stockholm) */
.place{
  text-align: center;
  padding: clamp(1.4rem, 3.5vh, 2.6rem) calc(var(--frame-inset) + 26px);
}
.place .place-media{
  width: min(300px, 70vw);
  margin: 0 auto 1.6rem;
  border: 1px solid var(--wine-30);
  border-radius: 999px 999px 0 0;
  padding: 8px;
}
.place .place-media img{
  border-radius: 999px 999px 0 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}
.place .place-line{
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .38em;
  color: var(--wine);
  text-transform: uppercase;
}

/* ---------- Sidfot ---------- */
footer{
  text-align: center;
  padding: clamp(2rem, 5vh, 3.4rem) calc(var(--frame-inset) + 26px) calc(var(--frame-inset) + 34px);
}
footer .rule{ margin-bottom: 2rem; }
footer .f-logo{
  width: 150px;
  margin: 0 auto 1.2rem;
}
footer .f-tagline{
  font-style: italic;
  font-size: 1.06rem;
  color: var(--ink-58);
  margin-bottom: 1.2rem;
}
footer .f-line{
  font-size: 1.05rem;
  color: var(--ink-72);
  line-height: 1.9;
}
footer .f-line a{ transition: color .3s ease; }
footer .f-line a:hover{ color: var(--wine); }
footer .f-copy{
  margin-top: 1.6rem;
  font-family: 'Cinzel', serif;
  font-size: .56rem;
  letter-spacing: .34em;
  color: rgba(94,41,56,.5);
}

/* ---------- Reveal (scroll-triggat via .in, se site.js) ---------- */
.rise{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease-lux), transform 1s var(--ease-lux);
}
.rise.in{ opacity: 1; transform: none; }

/* ---------- Responsivt ---------- */
@media (max-width: 880px){
  :root{ --frame-inset: 12px; }
  .top{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.1rem;
    padding: 1.1rem calc(var(--frame-inset) + 16px);
  }
  body.scrolled .top{ padding: .8rem calc(var(--frame-inset) + 16px); }
  .brand{ order: 1; }
  .nav{ gap: 1.4rem; font-size: .6rem; letter-spacing: .24em; }
  .nav--left{ order: 2; justify-content: center; }
  .nav--right{ order: 3; justify-content: center; margin-top: -0.4rem; }
  .nav--left, .nav--right{ width: 100%; }
  .service{ grid-template-columns: 1fr; gap: 1.2rem; }
  .service:nth-child(even) .service-media{ order: 0; }
  .service-media{ max-width: 420px; margin: 0 auto; }
  .masonry{ columns: 2; }
}
@media (max-width: 560px){
  .masonry{ columns: 1; }
}
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1 !important; transform:none !important; transition:none !important; }
  .masonry img{ transition: none; }
}

/* ============================================================
   TUTERA-STRUKTUR — startsidans sektioner + nya mönster
   ============================================================ */

/* Språkväxlare */
.lang-toggle{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .22em;
  margin-left: 1.4rem;
}
.lang-toggle a{ opacity: .55; transition: opacity .3s ease, color .3s ease; padding: .35rem 0; }
.lang-toggle a.on{ opacity: 1; border-bottom: 1px solid currentColor; }
.lang-toggle .sep{ opacity: .35; }
/* Desktop: språkväxlaren lyfts ut till övre högra hörnet (utility),
   så About/Gallery och Services/Contact balanseras 2+2 kring den centrerade loggan */
@media (min-width: 881px){
  .nav--right .lang-toggle{
    position: absolute;
    right: calc(var(--frame-inset) + 26px);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }
}

/* Startsidans ljusa del under heron */
.home-below{
  background: radial-gradient(140% 100% at 50% 0%, var(--cream-hi) 0%, var(--cream) 55%, var(--cream-lo) 100%);
  color: var(--ink-92);
}

/* Statement-sektion (ingress + jättetypografi + svävande ornament) */
.statement{
  position: relative;
  text-align: center;
  padding: clamp(4rem, 10vh, 7rem) calc(var(--frame-inset) + 26px) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.statement-intro{
  max-width: 58ch;
  margin: 0 auto;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.75;
  color: var(--ink-72);
}
.statement .rule{ margin: clamp(2rem, 5vh, 3.4rem) auto; }
.statement-display{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 6.6vw, 6rem);
  line-height: 1.04;
  color: var(--wine-deep);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 auto;
}
.statement-display em{
  font-style: italic;
  background: var(--bronze-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-right: .05em;
}

/* Fullskärms-showcase (bild, kategori, titel, plats) */
.showcase{
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.showcase > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.showcase::before{
  content:'';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(29,11,16,.28) 0%, rgba(29,11,16,.06) 32%, rgba(29,11,16,.10) 52%, rgba(29,11,16,.55) 76%, rgba(29,11,16,.86) 100%);
  z-index: 1;
}
.sc-body{
  position: absolute;
  z-index: 2;
  left: clamp(1.6rem, 6vw, 5.5rem);
  right: clamp(1.6rem, 6vw, 5.5rem);
  bottom: clamp(2.2rem, 7vh, 4.6rem);
  text-align: left;
  padding: 0;
}
.sc-eyebrow{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .46em;
  color: #D6B077;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  text-shadow: 0 1px 14px rgba(29,11,16,.7);
}
.sc-title{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.85rem, 6vw, 6.4rem);
  line-height: .96;
  white-space: nowrap;
  color: #F2EBDC;
  text-shadow: 0 3px 30px rgba(29,11,16,.45);
}
.sc-title em{ font-style: italic; }
.sc-loc{
  position: absolute;
  right: clamp(1.6rem, 6vw, 5.5rem);
  bottom: clamp(2.4rem, 7.4vh, 4.9rem);
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .4em;
  color: rgba(242,235,220,.85);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 14px rgba(29,11,16,.8);
  border-bottom: 1px solid rgba(214,176,119,.45);
  padding-bottom: .5rem;
}
.sc-loc .dia{ font-size: .6em; vertical-align: .25em; padding: 0 .5em; opacity: .7; }

/* Pill-länk centrerad */
.pill-row{ text-align: center; padding: clamp(2.6rem, 7vh, 4.6rem) 1rem; }

/* Marquee-CTA */
.marquee-cta{
  display: block;
  padding: clamp(3rem, 8vh, 5rem) 0 clamp(3.4rem, 9vh, 5.6rem);
  text-align: center;
  overflow: hidden;
}
.mq-line{
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--ink-58);
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.mq-track{ overflow: hidden; width: 100%; }
.mq-inner{
  display: inline-flex;
  gap: 5rem;
  white-space: nowrap;
  animation: mq 26.4s linear infinite;
  will-change: transform;
}
.marquee-cta:hover .mq-inner{ animation-play-state: paused; }
.mq-inner span{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.7rem, 7.2vw, 6.4rem);
  line-height: 1.25;
  padding-bottom: .12em;
  color: var(--wine-deep);
}
.mq-inner span em{
  font-style: italic;
  background: var(--bronze-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@keyframes mq{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* Stor startsidesfooter à la förlagan */
.bigfoot{
  border-top: 1px solid var(--wine-30);
  padding: clamp(2.6rem, 7vh, 4.4rem) calc(var(--frame-inset) + 26px) clamp(1.8rem, 5vh, 3rem);
}
.bigfoot-locs{
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .44em;
  color: var(--wine);
  text-transform: uppercase;
  margin-bottom: clamp(2.2rem, 6vh, 3.6rem);
}
.bigfoot-locs .x{ opacity: .45; padding: 0 .7em; }
.bigfoot-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2.5rem;
  align-items: center;
}
.bf-nav a{
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.32;
  color: var(--wine-deep);
  transition: color .3s ease, transform .3s var(--ease-lux);
}
.bf-nav a:hover{ color: var(--wine); transform: translateX(6px); }
.bf-contact{
  font-size: 1.04rem;
  line-height: 2;
  color: var(--ink-72);
  text-align: right;
}
.bf-contact a:hover{ color: var(--wine); }
.bf-brand{ text-align: center; }
.bf-brand img{ width: 190px; margin: 0 auto; }
.bf-tagline{
  margin-top: 1rem;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-58);
  text-align: center;
}
.bf-legal{
  margin-top: clamp(2rem, 5vh, 3rem);
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: .56rem;
  letter-spacing: .34em;
  color: rgba(94,41,56,.5);
}

/* Gallerifilter (kategoripiller) */
.filters{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.filters .pill{
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--wine);
  border: 1px solid var(--wine-30);
  border-radius: 999px;
  background: rgba(255,253,247,.4);
  padding: .62rem 1.35rem .56rem;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.filters .pill:hover{ border-color: var(--wine-55); }
.filters .pill.active{ background: var(--wine); color: #F2EBDC; border-color: var(--wine); }
.masonry a.hidden{ display: none; }

/* Tjänstebanners i fullbredd (förlagans services-mönster) */
.svc-banner{
  position: relative;
  min-height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--wine-30);
  margin: clamp(1.6rem, 4vh, 2.6rem) 0;
}
.svc-banner > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.svc-banner::before{
  content:'';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(29,11,16,.5), rgba(29,11,16,.28) 45%, rgba(29,11,16,.6));
  z-index: 1;
}
.svc-inner{
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: clamp(2.5rem, 7vh, 4rem) 1.6rem;
}
.svc-inner .overline{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .6rem;
  letter-spacing: .44em;
  text-indent: .44em;
  color: rgba(242,235,220,.85);
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-shadow: 0 1px 12px rgba(29,11,16,.8);
}
.svc-inner h2{
  font-weight: 300;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1;
  color: #F2EBDC;
  margin-bottom: 1.1rem;
  text-shadow: 0 4px 36px rgba(29,11,16,.6);
}
.svc-inner h2 em{ font-style: italic; }
.svc-inner p{
  font-size: 1.12rem;
  line-height: 1.7;
  color: rgba(242,235,220,.8);
  text-shadow: 0 1px 14px rgba(29,11,16,.7);
}
.svc-inner .btn-light{
  display: inline-block;
  margin-top: 1.8rem;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: .64rem;
  letter-spacing: .32em;
  text-indent: .32em;
  color: #F2EBDC;
  border: 1px solid rgba(242,235,220,.55);
  border-radius: 999px;
  padding: .95rem 2.5rem .88rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .4s ease, color .4s ease;
}
.svc-inner .btn-light:hover{ background: #F2EBDC; color: var(--wine); }

/* Galleristrip (rad med små bilder) */
.strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.strip img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--wine-30);
}

@media (max-width: 880px){
  .statement-display{ max-width: 14ch; }
  .showcase{ min-height: 70svh; height: 78svh; }
  .sc-body{ bottom: 4.6rem; }
  .sc-loc{ right: auto; left: 1.6rem; bottom: 1.7rem; border-bottom: none; padding-bottom: 0; }
  .bigfoot-grid{ grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .bf-brand, .bf-tagline, .bf-contact{ text-align: center; }
  .bf-brand{ order: -1; }
  .bf-brand img{ margin: 0 auto; }
  .bf-nav a:hover{ transform: none; }
  .strip{ grid-template-columns: repeat(2, 1fr); }
  .svc-banner{ min-height: 64vh; }
  .lang-toggle{ margin-left: 0; }
}
@media (prefers-reduced-motion: reduce){
  .mq-inner{ animation: none; }
}

/* ============================================================
   SERVICES-KORT + FORMULÄR + NYA SEKTIONER
   ============================================================ */

/* Tjänstekort: bild överst, text under på ljus botten (läsbarhet) */
.svc-card{
  border: 1px solid var(--wine-30);
  background: rgba(255,253,247,.55);
  margin: clamp(1.6rem, 4vh, 2.6rem) 0;
}
.svc-card > img{
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-bottom: 1px solid var(--wine-30);
}
.svc-body{
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(1.8rem, 4vh, 2.8rem) 1.6rem clamp(2.2rem, 5vh, 3.2rem);
}
.svc-body .overline{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .58rem;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--wine);
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.svc-body h2{
  font-weight: 300;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: 1.04;
  color: var(--wine-deep);
  margin-bottom: .9rem;
}
.svc-body p{
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink-72);
}
.svc-body .enquire{
  display: inline-block;
  margin-top: 1.5rem;
  font-family: 'Cinzel', serif;
  font-size: .64rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--wine);
  border: 1px solid var(--wine-55);
  border-radius: 999px;
  padding: .85rem 2.2rem .78rem;
  transition: background .4s ease, color .4s ease;
}
.svc-body .enquire:hover{ background: var(--wine); color: #F2EBDC; }

/* Kontaktformulär */
.form{
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 1.6rem;
  border: 1px solid var(--wine-30);
  background: rgba(255,253,247,.55);
  padding: clamp(1.8rem, 4.5vw, 3rem);
  position: relative;
}
.form::after{
  content:'';
  position:absolute; inset: 8px;
  border: 1px solid rgba(168,124,69,.2);
  pointer-events: none;
}
.form-title{
  grid-column: 1 / -1;
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 300;
  color: var(--wine-deep);
  margin-bottom: .4rem;
}
.field{ display: flex; flex-direction: column; }
.field--full{ grid-column: 1 / -1; }
.field label{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .54rem;
  letter-spacing: .32em;
  color: var(--wine);
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.field input,
.field select,
.field textarea{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem;
  color: var(--wine-deep);
  background: rgba(255,253,247,.7);
  border: 1px solid var(--wine-30);
  border-radius: 0;
  padding: .85rem 1rem .75rem;
  outline: none;
  transition: border-color .3s ease, background .3s ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--wine-55);
  background: #FFFDF7;
}
.field select{
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235E2938' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
.field textarea{ resize: vertical; min-height: 120px; }
.field input[type="date"]{ min-height: 47px; }
.form .btn-gold{ border-radius: 999px; }
.form-note{
  text-align: center;
  margin-top: 1.6rem;
  font-size: 1.05rem;
  color: var(--ink-58);
}
.form-note a{ color: var(--wine); }
.form-note a:hover{ border-bottom: 1px solid var(--wine); }

@media (max-width: 720px){
  .form{ grid-template-columns: 1fr; }
  .sc-body{ padding: 2rem 1.6rem; border-radius: 28px; }
}

/* Formulärstatus (tack/fel-besked) */
.form-status{
  grid-column: 1 / -1;
  text-align: center;
  font-size: 1.15rem;
  font-style: italic;
  padding: 1rem 0 .4rem;
}
.form-status .fs-ok, .form-status .fs-err{ display: none; }
.form-status.ok .fs-ok{ display: inline; color: var(--wine-deep); }
.form-status.err .fs-err{ display: inline; color: #8A3030; }

/* Jordgloben — arch-fönster; iframe renderas på fast logisk bredd (560)
   och skalas ned proportionellt för mindre skärmar (mobil/iPad). JS sätter
   --globe-s (skala) och .globe-window-höjden. */
.globe-embed{
  margin: clamp(2.2rem, 5.5vh, 3.8rem) auto 0;
  width: min(560px, 100%); /* aldrig bredare än förälderns innehållsyta → margin:auto centrerar */
}
/* Mindre glob på surfplatta/mobil än på laptop */
@media (max-width: 1024px){
  .globe-embed{ width: min(460px, 100%); }
}
.globe-window{
  position: relative;
  border: 1px solid var(--wine-30);
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  height: 916px; /* JS skriver över exakt (918 * skala) */
}
.globe-window::after{
  content:'';
  position: absolute; inset: 5px;
  border: 1px solid rgba(168,124,69,.22);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  z-index: 2;
}
.globe-window iframe{
  display: block;
  width: 560px;
  height: 918px;
  border: 0;
  border-radius: 999px 999px 0 0;
  background: #190D0F;
  transform-origin: top left;
  transform: scale(var(--globe-s, 1));
}

/* ============================================================
   SCROLL-REVEAL + APPROACH-TIDSLINJE + FAQ  (research-tillägg)
   ============================================================ */

/* Mjuk reveal när sektion rullar in i vyn */
.reveal-up{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.05s var(--ease-lux), transform 1.05s var(--ease-lux);
}
.reveal-up.in{ opacity: 1; transform: none; }
.reveal-up.d1{ transition-delay: .10s; }
.reveal-up.d2{ transition-delay: .20s; }
.reveal-up.d3{ transition-delay: .30s; }
.reveal-up.d4{ transition-delay: .40s; }

/* The Cipher Approach — editorial process */
.approach{
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(3.4rem, 9vh, 6.5rem) calc(var(--frame-inset) + 26px);
}
.approach-head{ text-align: center; margin-bottom: clamp(2.4rem, 6vh, 4rem); }
/* Skydda mot hemsidans inline-eyebrow (ljus guld för mörk hero) */
.approach .eyebrow{ color: var(--wine); text-shadow: none; }
.approach-head h2{
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.02;
  color: var(--wine-deep);
  text-wrap: balance;
}
.approach-head h2 em{
  font-style: italic;
  background: var(--bronze-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.approach-step{
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.4rem 2.2rem;
  align-items: baseline;
  padding: clamp(1.5rem, 4vh, 2.5rem) 0;
  border-top: 1px solid var(--wine-30);
}
.approach-step:last-child{ border-bottom: 1px solid var(--wine-30); }
.ap-num{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .26em;
  color: var(--gold-lo);
  padding-top: .55rem;
}
.ap-title{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.05;
  color: var(--wine-deep);
  margin-bottom: .6rem;
}
.ap-text{
  font-size: 1.14rem;
  line-height: 1.72;
  color: var(--ink-72);
  max-width: 54ch;
}
@media (max-width: 620px){
  .approach-step{ grid-template-columns: 1fr; gap: .5rem; }
  .ap-num{ padding-top: 0; }
}

/* FAQ — native details/summary, mjuk grid-rows-animering */
.faq{
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(1.6rem, 4vh, 2.6rem) calc(var(--frame-inset) + 26px);
}
.faq details{ border-top: 1px solid var(--wine-30); }
.faq details:last-of-type{ border-bottom: 1px solid var(--wine-30); }
.faq summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
  padding: 1.4rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  color: var(--wine-deep);
  transition: color .3s ease;
}
.faq summary:hover{ color: var(--wine); }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: '+';
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: var(--gold);
  flex: none;
  transition: transform .3s var(--ease-lux);
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq-body{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease-lux);
}
.faq details[open] .faq-body{ grid-template-rows: 1fr; }
.faq-body > div{ overflow: hidden; }
.faq-body p{
  padding: 0 0 1.4rem;
  font-size: 1.08rem;
  line-height: 1.72;
  color: var(--ink-72);
  max-width: 64ch;
}
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity: 1 !important; transform: none !important; transition: none; }
  .faq-body{ transition: none; }
}