/* =========================
   Edda Design - One Page (v6)
   Full-width hero image with left-to-right overlay
   ========================= */

:root{
  --bg: #000;
  --text: #f5f5f5;
  --muted: rgba(245,245,245,0.72);
  --muted2: rgba(245,245,245,0.58);
  --shadow: 0 16px 48px rgba(0,0,0,0.55);

  --accent: #ffd24a; /* warm gold */
  --accentText: #0b0b0b;

  --radius: 18px;
  --max: 1100px;

  --topbar-h: 44px;
  --header-h: 92px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

a{ color: var(--text); text-underline-offset:3px; }
a:hover{ opacity:0.92; }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.skip-link{
  position:absolute; left:-999px; top:12px;
  background:#fff; color:#000;
  padding:10px 14px; border-radius:12px; z-index:9999;
}
.skip-link:focus{ left:12px; }

.gold{ color: var(--accent); }

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  font-size:0.9rem;
  color: var(--muted);
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.topbar-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
}
.topbar-link .icon{ width:18px; display:inline-grid; place-items:center; }

/* Header */
.site-header{
  position:sticky;
  top:var(--topbar-h);
  z-index:55;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.header-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:14px 0;
}
.brand{ display:flex; justify-content:center; align-items:center; }
.logo{ display:block; height:auto; max-width: 260px; }

.site-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.nav-toggle{
  display:none;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  padding:10px 12px;
  border-radius:14px;
}
.nav-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.nav-links a{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  color: var(--text);
}
.nav-links a:hover,
.nav-links a:focus-visible{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}
.header-cta{ display:flex; justify-content:flex-end; }

.header-cta .icon-link {
  margin: 0 20px;
}

.icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#0A66C2;
  color:#fff;
}

.icon-link svg{
  width:18px;
  height:18px;
  fill: currentColor;
}

/* Typography */
h1,h2,h3{ line-height:1.15; margin:0 0 14px; }
h1{ font-size:clamp(30px, 4.2vw, 52px); letter-spacing:-0.02em; }
h2{ font-size:clamp(22px, 2.7vw, 32px); }
h3{ font-size:20px; }
.h3like{ font-size:20px; margin:0 0 10px; }

p{ margin:0 0 14px; }
.subhead{ color: var(--muted); max-width: 75ch; }
.small{ font-size:0.92rem; color: var(--muted2); }
.muted{ color: var(--muted); }

.kicker{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,210,74,0.35);
  background: rgba(255,210,74,0.08);
  color: rgba(255,210,74,0.92);
  font-weight:800;
  margin-bottom:14px;
}

/* Buttons */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.16);
  text-decoration:none;
  font-weight:800;
  letter-spacing:0.01em;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
}
.button-primary{
  background: var(--accent);
  color: var(--accentText);
  border-color: transparent;
}
.button-secondary{
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.button.full{ width:100%; margin-top: 8px; }
.button:hover{ transform: translateY(-1px); }
.button:active{ transform: translateY(0); }

/* Sections */
.section{
  padding:70px 0;
  scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 14px);
}
.section-alt{
  background: #050505;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* HERO: full-width image + overlay */
.hero.hero-bg{
  position: relative;
  /**min-height: 78vh;**/
  display:flex;
  align-items:center;
  padding: 70px 0 70px;

  background-image: url("assets/edda-design-rich-brown-hero-01.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Hero grid: text left, image visible on right */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Intentionally empty column */
.hero-spacer {
  pointer-events: none;
}

/* Mobile: collapse to single column */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-spacer {
    display: none;
  }
}

/* Overlay: 20% overall dark + horizontal gradient darker on left, clearer on right */
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.68) 36%,
      rgba(0,0,0,0.30) 68%,
      rgba(0,0,0,0.10) 100%
    ),
    rgba(0,0,0,0.20);
  pointer-events:none;
}

.hero-inner{
  position: relative;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 18px 0 18px;
}

/* Cards */
.card{
  background: rgba(0,0,0,0.38);
  border:1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.card.subtle{
  background: rgba(0,0,0,0.28);
  border-color: rgba(255,210,74,0.14);
}

.checklist{
  margin: 12px 0 14px 0;
  padding-left: 18px;
}
.checklist li{ margin: 6px 0; }
.checklist li::marker{ color: rgba(255,210,74,0.90); }

.trust-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.trust-pill{
  padding:10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,210,74,0.22);
  background: rgba(0,0,0,0.34);
  display:flex;
  flex-direction:column;
  min-width: 170px;
  backdrop-filter: blur(6px);
}
.trust-pill strong{ font-size: 1.05rem; }
.trust-pill span{ color: var(--muted2); font-size: 0.92rem; }

.split{
  display:grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap:18px;
  align-items:start;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin-top: 18px;
}
.fit {padding:30px 30px 10px 30px;}

/* Highlights (moved out of hero) */
.highlights-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin-top: 18px;
}

.mini{
  margin: 10px 0 0;
  padding-left: 18px;
}
.mini li{ margin: 6px 0; color: var(--muted); }

/* Inline content images (real screenshots) */
.inline-image{
  width: 180px;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,210,74,0.18);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  object-fit: cover;
  display: block;
}
.inline-image:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
}
.photo-inline{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:12px;
  align-items:center;
  margin-top: 12px;
}
.photo-note{ color: var(--muted2); font-size:0.95rem; }
.photo-note.left{ text-align:left; margin:0; }

/* Pills */
.pill-list{
  list-style:none;
  padding:0;
  margin:10px 0 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pill-list li{
  border:1px solid rgba(255,210,74,0.18);
  border-radius:999px;
  padding:8px 12px;
  background: rgba(255,210,74,0.06);
}

/* Process */
.process{
  margin-top: 14px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,210,74,0.18);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.process-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  margin-top: 10px;
}
.process-step{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.process-step strong{
  width: 28px; height: 28px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accentText);
}

/* Contact */
.contact-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin-top: 18px;
}
.contact-card{
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.backtotop{ margin-top: 18px; }
.link{ text-decoration:none; border-bottom:1px solid rgba(255,210,74,0.25); padding-bottom:2px; }

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 28px 0;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 980px){
  :root{ --header-h: 98px; }
  .header-inner{ grid-template-columns: 1fr; }
  .header-cta{ justify-content:center; }
  .hero-inner{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .highlights-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .process-grid{ grid-template-columns: 1fr; }

  /* Mobile: use vertical overlay so text stays readable over the full image */
  .hero-overlay{
    background:
      linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.78) 70%, rgba(0,0,0,0.86) 100%),
      rgba(0,0,0,0.18);
  }

  /* hero cards look better slightly less glassy on mobile */
  .card{ background: rgba(0,0,0,0.46); }
}

/* Mobile: compact header */
@media (max-width: 540px){
  :root{ --header-h: 72px; }

  .container{ width: min(var(--max), calc(100% - 28px)); }
  .topbar-left{ display:none; }

  .header-inner{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand cta"
      "nav nav";
    align-items:center;
    gap:10px;
    padding:10px 0;
  }
  .brand{ grid-area: brand; justify-content:flex-start; }
  .header-cta{ grid-area: cta; justify-content:flex-end; }

  .logo{ max-width: 140px; }
  .nav-toggle{ display:inline-flex; }
  .site-nav{ grid-area: nav; justify-content:flex-start; }

  .nav-links{ display:none; width:100%; }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ width:100%; text-align:left; }

  .photo-inline{ grid-template-columns: 120px 1fr; }
  .photo-placeholder.small{ width:120px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .button:hover{ transform:none; }
}