/* ============================================================
   Platschefen · site.css
   Publika sidans stilar. Spegelbild av mockupen.
   ============================================================ */

:root{
  --bg: #f5f0e4;
  --bg-2: #ede6d4;
  --bg-3: #e3dcc7;
  --ink: #1c2418;
  --ink-2: #3d4434;
  --muted: #6b7062;
  --rule: #1c241822;
  --green: #4f6b3a;
  --green-2: #3d5a2c;
  --green-3: #2c4220;
  --green-soft: #c5cdb4;
  --green-pale: #e3e8d6;
  --warm: #b8542a;
  --white: #faf7ef;
  --shadow: 0 30px 60px -30px #1c241844, 0 8px 20px -10px #1c241822;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Source Sans 3', system-ui, sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%; display:block}

/* === NAV === */
.nav{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 56px; color:#fff;
}
.nav .logo{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:28px; letter-spacing:.01em;
  text-decoration:none; color:#fff;
}
.nav .logo em{font-style:italic; font-weight:400; opacity:.8; font-size:14px; margin-left:6px; letter-spacing:.18em; text-transform:uppercase}
.nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.nav ul a{color:#fff; text-decoration:none; opacity:.92}
.nav ul a:hover{opacity:1}
.nav .cta{
  background:transparent; color:#fff; border:1px solid #ffffff88;
  padding:9px 20px; border-radius:999px; font-size:13px; font-weight:500;
  letter-spacing:.04em; text-decoration:none;
}
.nav .cta:hover{background:#ffffff18}

/* === HERO === */
.hero{
  position:relative; height:760px; overflow:hidden;
  background:#1c2418;
}
.hero .media{position:absolute; inset:0}
.hero .media img{width:100%; height:100%; object-fit:cover}
.hero-slides{position:absolute; inset:0}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease-in-out}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%; height:100%; object-fit:cover}
.hero-slides.zoom-fade .hero-slide.active img{
  animation:heroZoom var(--slide-dur, 10s) ease-out both;
}
@keyframes heroZoom{from{transform:scale(1.06)} to{transform:scale(1)}}
.hero .media-placeholder{
  position:absolute; inset:0;
  background:linear-gradient(135deg, #4f6b3a 0%, #3d5a2c 50%, #2c4220 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg, #00000077 0%, #00000022 35%, #00000088 100%),
    linear-gradient(90deg, #1c241899 0%, #1c241833 50%, transparent 100%);
}
.hero-inner{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
  padding:0 56px;
}
.hero-text{ max-width:620px; color:#fff }
.eyebrow{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; padding-bottom:6px; position:relative;
}
.eyebrow::after{
  content:""; position:absolute; left:0; bottom:0; width:42px; height:1px; background:currentColor; opacity:.6;
}
.hero h1{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:120px; line-height:.93; letter-spacing:-.01em;
  margin:18px 0 0;
}
.hero h1 em{font-style:italic; font-weight:400}
.hero .rule{height:1px; width:160px; background:#ffffffaa; margin:24px 0 16px}
.hero .sub{font-size:13px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; opacity:.92}
.hero .slogan{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
  font-size:28px; line-height:1.3; margin:28px 0 0; max-width:480px; opacity:.95;
}
.hero-actions{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}

/* === Buttons === */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:.04em;
  cursor:pointer; border:1px solid transparent; transition:.2s;
  text-decoration:none; font-family:inherit;
}
.btn.primary{background:var(--green); color:#fff; border-color:var(--green-2)}
.btn.primary:hover{background:var(--green-2)}
.btn.ghost{background:transparent; color:#fff; border-color:#ffffffaa}
.btn.ghost:hover{background:#ffffff18}
.btn.dark{background:var(--ink); color:#fff}
.btn.dark:hover{background:#000}
.btn.light{background:#fff; color:var(--ink); border-color:var(--ink)}

/* === Service strip (overlapping) === */
.services-wrap{
  position:relative; margin:-72px 56px 0; z-index:6;
}
.services{
  background:var(--white);
  border-radius:6px;
  padding:36px 8px;
  display:grid; grid-template-columns:repeat(5, 1fr);
  box-shadow: var(--shadow);
  border:1px solid #1c241810;
}
.service{
  text-align:center; padding:6px 20px;
  border-right:1px solid #1c241818;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.service:last-child{border-right:none}
.service .icon{
  width:64px; height:64px; border-radius:50%;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:.25s;
}
.service:hover .icon{background:var(--green-2); transform:translateY(-2px)}
.service .icon svg{width:30px; height:30px}
.service h3{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:22px; margin:0}
.service p{font-size:13px; line-height:1.55; color:var(--ink-2); margin:0; max-width:200px}

/* === Quote === */
.quote{
  background:var(--green); color:#fff;
  padding:120px 56px; position:relative; overflow:hidden; margin-top:140px;
}
.quote::before{
  content:"\201C"; position:absolute; left:48px; top:-30px;
  font-family:'Cormorant Garamond', serif; font-size:340px; line-height:1; opacity:.12;
}
.quote-inner{position:relative; max-width:900px; margin:0 auto; text-align:center}
.quote q{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400; font-size:48px; line-height:1.25; quotes:none}
.quote .who{margin-top:36px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; opacity:.85}
.quote .who strong{display:block; font-size:14px; letter-spacing:.16em; opacity:1; margin-bottom:2px; font-weight:600}

/* === Cases === */
.cases{padding:120px 56px 100px}
.section-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:48px; gap:32px; flex-wrap:wrap}
.section-head h2{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:56px; line-height:1; margin:14px 0 0; letter-spacing:-.01em}
.section-head h2 em{font-style:italic}
.cases-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.case img{width:100%; height:300px; object-fit:cover; border-radius:4px}
.case .meta{margin-top:14px}
.case .meta .tag{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); font-weight:600}
.case .meta h3{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:22px; margin:6px 0 0; line-height:1.2}
.case .meta p{font-size:13px; color:var(--muted); margin:6px 0 0; line-height:1.5}

/* === Pricing === */
.pricing{padding:0 56px 100px}
.pricing-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.price{
  background:var(--white); padding:38px 32px 32px;
  border:1px solid #1c241815; border-radius:6px; position:relative;
}
.price.featured{background:var(--green); color:#fff; border-color:var(--green-2)}
.price.featured .num{color:#fff}
.price.featured ul li::before{background:#fff}
.price .tag{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-2); font-weight:600}
.price.featured .tag{color:#ffffff; opacity:.9}
.price h3{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:36px; margin:10px 0 4px}
.price .desc{font-size:14px; color:var(--ink-2); margin:0 0 24px; line-height:1.5}
.price.featured .desc{color:#ffffffcc}
.price .num{font-family:'Cormorant Garamond', serif; font-size:48px; font-weight:500; line-height:1; color:var(--green-2)}
.price .num small{font-size:14px; font-family:'Source Sans 3', sans-serif; color:var(--muted); margin-left:6px; font-weight:400}
.price.featured .num small{color:#ffffffaa}
.price ul{list-style:none; padding:0; margin:24px 0; display:flex; flex-direction:column; gap:10px}
.price ul li{position:relative; padding-left:22px; font-size:14px; line-height:1.5}
.price ul li::before{content:""; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:50%; background:var(--green); opacity:.4}
.price.featured ul li{color:#ffffffee}
.price .btn{width:100%; justify-content:center}
.price .badge{position:absolute; top:-12px; right:24px; background:var(--warm); color:#fff; font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:5px 12px; border-radius:999px; font-weight:600}

/* === FAQ === */
.faq{padding:0 56px 120px; display:grid; grid-template-columns:1fr 1.4fr; gap:80px}
.faq h2{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:48px; line-height:1; margin:14px 0 18px}
.faq .intro p{font-size:15px; color:var(--ink-2); line-height:1.7; margin:0 0 16px}
.faq-list{display:flex; flex-direction:column; border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule); padding:22px 0; cursor:pointer}
.qa summary{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:'Cormorant Garamond', serif; font-size:24px; font-weight:500;
  cursor:pointer; list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; font-weight:300; font-size:28px; color:var(--green-2); line-height:1}
.qa[open] summary::after{content:"−"}
.qa p{font-size:15px; color:var(--ink-2); line-height:1.7; margin:14px 0 0; max-width:560px}

/* === Footer area === */
.footer-area{background:var(--ink); color:#e8e3d5; padding:100px 56px 40px}
.contact-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:80px; padding-bottom:80px; border-bottom:1px solid #ffffff20}
.contact h2{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:56px; line-height:1; margin:14px 0 18px; color:#fff}
.contact h2 em{font-style:italic}
.contact p{font-size:15px; line-height:1.7; opacity:.8; margin:0 0 22px; max-width:480px}
.contact form{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:560px}
.contact .full{grid-column:1/-1}
.contact input, .contact textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid #ffffff44;
  color:#fff; font-family:inherit; font-size:15px; padding:14px 2px; outline:none;
}
.contact input::placeholder, .contact textarea::placeholder{color:#ffffff80}
.contact input:focus, .contact textarea:focus{border-color:#fff}
.contact textarea{resize:vertical; min-height:90px}
.contact .submit-row{display:flex; align-items:center; justify-content:space-between; margin-top:8px}
.contact .check{font-size:13px; opacity:.7; display:flex; align-items:center; gap:8px}
.contact .check input{width:auto; margin:0}

.links-col h3{font-family:'Cormorant Garamond', serif; font-size:18px; font-weight:600; color:#fff; margin:0 0 14px}
.links-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.links-col a{color:#e8e3d5; text-decoration:none; font-size:14px; opacity:.85}
.links-col a:hover{opacity:1; color:#fff}
.links-col .info{font-size:14px; line-height:1.7; opacity:.8}
.links-col .info a{text-decoration:underline}

.footbar{
  margin-top:40px; padding-top:24px; border-top:1px solid #ffffff10;
  display:flex; justify-content:space-between; align-items:center; font-size:12px; opacity:.6;
  flex-wrap:wrap; gap:14px;
}
.footbar .motto{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:18px; opacity:.85}

/* About section (not yet wired up; för framtida sektion) */
.about{padding:140px 56px 100px; display:grid; grid-template-columns:1fr 1.05fr; gap:80px; align-items:center}

/* ============================================
   Responsivt
   ============================================ */
@media (max-width: 960px){
  .nav{padding:18px 22px; flex-wrap:wrap}
  .nav ul{display:none}
  .hero{height:620px}
  .hero-inner{padding:0 22px}
  .hero h1{font-size:72px}
  .hero .slogan{font-size:22px}
  .services-wrap{margin:-40px 16px 0}
  .services{grid-template-columns:1fr; padding:18px 8px}
  .service{border-right:none; border-bottom:1px solid #1c241818; padding:18px}
  .service:last-child{border-bottom:none}
  .quote{padding:60px 22px; margin-top:60px}
  .quote q{font-size:30px}
  .cases, .pricing{padding:60px 22px}
  .cases-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .section-head h2{font-size:38px}
  .faq{padding:0 22px 60px; grid-template-columns:1fr; gap:24px}
  .footer-area{padding:60px 22px 30px}
  .contact-grid{grid-template-columns:1fr; gap:40px; padding-bottom:40px}
  .contact h2{font-size:38px}
  .contact form{grid-template-columns:1fr}
}
@media (max-width: 480px){
  .cases-grid{grid-template-columns:1fr}
}

/* === OM MAGNUS === */
.about-section{background:var(--bg-2); padding:100px 48px}
.about-inner{max-width:820px; margin:0 auto}
.about-text .eyebrow{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--green); font-weight:600}
.about-text h2{
  font-family:'Cormorant Garamond',serif; font-size:56px; font-weight:500;
  line-height:1.05; margin:12px 0 0; color:var(--ink);
}
.about-text h2 em{font-style:italic; color:var(--green-2)}
.about-tagline{
  font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic;
  color:var(--muted); margin:14px 0 32px; font-weight:400;
}
.about-body{border-left:3px solid var(--green-soft); padding-left:28px; margin-top:28px}
.about-body p{font-size:17px; line-height:1.75; color:var(--ink-2); margin:0 0 20px}
.about-body p:last-child{margin-bottom:0}
@media(max-width:960px){
  .about-section{padding:60px 22px}
  .about-text h2{font-size:40px}
}

/* === STATISKA SIDOR (integritetspolicy, cookies) === */
.static-page{min-height:100vh; display:flex; flex-direction:column; background:var(--bg)}
.static-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px; background:var(--ink); position:sticky; top:0; z-index:5;
}
.static-nav .logo{
  font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600;
  color:var(--white); text-decoration:none; line-height:1;
}
.static-nav .logo em{
  display:block; font-style:normal; font-family:'Source Sans 3',sans-serif;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green-soft); margin-top:2px; font-weight:400;
}
.static-content{
  flex:1; max-width:740px; margin:0 auto; padding:64px 24px 80px; width:100%;
}
.static-content h2{
  font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:500;
  margin:0 0 24px; color:var(--ink);
}
.static-content h3{
  font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:500;
  margin:36px 0 10px;
}
.static-content p{line-height:1.7; color:var(--ink-2); margin:0 0 16px}
.static-footer{
  border-top:1px solid var(--rule); padding:20px 48px;
  font-size:13px; color:var(--muted); display:flex; gap:12px;
}
.static-footer a{color:var(--green); text-decoration:none}
.static-footer a:hover{text-decoration:underline}
@media(max-width:600px){
  .static-nav{padding:16px 20px}
  .static-content{padding:36px 20px 60px}
  .static-footer{padding:16px 20px}
}