:root {
  --green-950: #061d17;
  --green-900: #08251d;
  --green-850: #0a2d23;
  --green-800: #103b2e;
  --green-700: #18523f;
  --green-500: #2d7b5f;
  --cream: #f5f0e7;
  --cream-deep: #e8dfd0;
  --paper: #fffdf9;
  --ink: #15211c;
  --muted: #617068;
  --gold: #d9bc78;
  --gold-light: #f0d994;
  --line: rgba(14, 52, 41, .15);
  --shadow: 0 28px 80px rgba(3, 24, 18, .16);
  --radius-lg: 28px;
  --radius-md: 18px;
  --container: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.modal-open { overflow: hidden; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select { font: inherit; }

button { color: inherit; }

h1, h2, h3, p { margin-top: 0; }
/* Danish compounds ("servicevirksomheder", "annonceforbrug") can be wider than
   a phone screen at display sizes. Let them break rather than push the layout. */
h1, h2, h3 { overflow-wrap: break-word; }

h1, h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.04;
}

h1 { font-size: clamp(3.25rem, 6.8vw, 6.6rem); }

h2 { font-size: clamp(2.5rem, 4.7vw, 4.8rem); }

h3 { font-size: 1.35rem; line-height: 1.25; }

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section { padding: 76px 0; }

.section-dark { color: #fff; background: var(--green-950); }
.section-cream { background: var(--cream); }
.section-white { background: var(--paper); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--gold-light);
  color: var(--green-950);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  color: #fff;
  background: rgba(6, 29, 23, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px);
}

.nav-wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }

.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }

.brand-logo {
  width: 190px;
  height: auto;
  display: block;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  letter-spacing: -.06em;
}

.brand-copy { display: grid; line-height: 1; text-transform: uppercase; letter-spacing: .12em; }
.brand-copy strong { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 500; }
.brand-copy span { margin-top: 6px; color: rgba(255, 255, 255, .58); font-size: .62rem; letter-spacing: .2em; }

.desktop-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.desktop-nav a { position: relative; color: rgba(255, 255, 255, .7); font-size: .9rem; font-weight: 600; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--gold); transition: right .25s ease; }
.desktop-nav a:hover { color: #fff; }
.desktop-nav a:hover::after { right: 0; }

.nav-actions { display: flex; align-items: center; gap: 18px; }

.language-switch { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .35); font-size: .74rem; }
.language-option { padding: 4px 1px; border: 0; background: none; color: rgba(255, 255, 255, .45); cursor: pointer; font-size: .74rem; font-weight: 800; }
.language-option.is-active { color: var(--gold-light); }

.button {
  min-height: 56px;
  padding: 15px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.button:hover { transform: translateY(-2px); }
.button-small { min-height: 43px; padding: 10px 16px; font-size: .78rem; }
.button-gold { background: var(--gold-light); color: var(--green-950); }
.button-gold:hover { background: #ffe9a9; }
.button-dark { background: var(--green-950); color: #fff; }
.button-outline-dark { border-color: rgba(6, 29, 23, .35); color: var(--green-950); background: transparent; }
.button-outline-light { border-color: rgba(255, 255, 255, .4); color: #fff; background: transparent; }
.button-full { width: 100%; }

.menu-toggle { width: 42px; height: 42px; display: none; place-content: center; gap: 7px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { width: 24px; height: 1px; display: block; background: #fff; transition: transform .2s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-nav { padding: 8px 24px 25px; background: var(--green-950); border-top: 1px solid rgba(255, 255, 255, .08); }
.mobile-nav a { padding: 12px 0; display: block; border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* No forced viewport height: on tall screens it padded the hero with dead space
   below the footnote. .hero-grid's own min-height already gives it presence. */
.hero { position: relative; overflow: hidden; }
.hero-grid { position: relative; z-index: 2; min-height: 760px; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 50px; padding-top: 58px; }
.hero-glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(1px); }
.hero-glow-one { top: -400px; right: -280px; width: 940px; height: 940px; background: radial-gradient(circle, rgba(37, 118, 88, .32), transparent 68%); }
.hero-glow-two { bottom: -480px; left: -340px; width: 900px; height: 900px; border: 1px solid rgba(217, 188, 120, .11); box-shadow: 0 0 0 90px rgba(255, 255, 255, .012), 0 0 0 180px rgba(255, 255, 255, .012); }

.eyebrow { margin-bottom: 22px; color: var(--green-700); font-size: .72rem; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow.light { color: var(--gold-light); }
.hero h1 { max-width: 780px; margin-bottom: 28px; }
.hero-intro { max-width: 660px; margin-bottom: 34px; color: rgba(255, 255, 255, .68); font-size: clamp(1rem, 1.4vw, 1.18rem); }
.hero-actions { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.text-link { display: inline-block; color: var(--green-800); font-weight: 800; border-bottom: 1px solid currentColor; }
.text-link-light { color: rgba(255, 255, 255, .78); }
.hero-trust { margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 21px; list-style: none; color: rgba(255, 255, 255, .58); font-size: .78rem; }
.hero-trust li { display: flex; gap: 8px; align-items: center; }
.hero-trust li > span:first-child { color: var(--gold-light); }

.portrait-stage { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; min-height: 650px; }
.portrait-frame { position: relative; width: min(100%, 540px); height: 660px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01)); border-radius: 280px 280px 16px 16px; }
.portrait-frame::before { content: ""; position: absolute; z-index: 0; inset: 80px 35px auto; aspect-ratio: 1; border-radius: 50%; background: rgba(217, 188, 120, .07); border: 1px solid rgba(217, 188, 120, .16); }
.portrait-frame img { position: absolute; z-index: 2; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: saturate(.8) contrast(1.05); }
.portrait-gradient { position: absolute; z-index: 3; inset: 45% 0 0; background: linear-gradient(to bottom, transparent, rgba(6, 29, 23, .5) 72%, var(--green-950)); }
.portrait-ring { position: absolute; z-index: 1; inset: 16% 7% auto; aspect-ratio: 1; border: 1px solid rgba(217, 188, 120, .14); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.012), 0 0 0 100px rgba(255,255,255,.012); }
.portrait-name { position: absolute; z-index: 4; left: 30px; right: 30px; bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.portrait-name strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 500; }
.portrait-name span { color: rgba(255, 255, 255, .55); font-size: .74rem; }
.metric-float { position: absolute; z-index: 5; min-width: 150px; padding: 14px 17px; display: flex; align-items: center; gap: 12px; background: rgba(250, 247, 239, .96); color: var(--green-950); box-shadow: 0 18px 50px rgba(0, 0, 0, .24); border-radius: 8px; }
.metric-float strong, .metric-float span { display: block; line-height: 1.25; }
.metric-float strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; }
.metric-float div > span { color: var(--muted); font-size: .69rem; }
.metric-dot { width: 10px; height: 10px; border-radius: 50%; background: #1e9e68; box-shadow: 0 0 0 5px rgba(30, 158, 104, .14); }
.metric-icon { width: 30px; height: 30px; display: grid !important; place-items: center; border-radius: 50%; color: #fff; background: var(--green-800); }
.metric-float-top { top: 31%; left: -20px; }
.metric-float-bottom { right: -18px; bottom: 23%; }
.hero-guarantee-seal { position: absolute; z-index: 7; top: 58px; right: -18px; width: 142px; aspect-ratio: 1; display: grid; place-items: center; color: var(--gold-light); background: rgba(6,29,23,.76); border: 1px solid rgba(217,188,120,.38); border-radius: 50%; box-shadow: 0 18px 45px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.hero-guarantee-seal > span { font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; }
.hero-guarantee-seal svg { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); animation: seal-spin 28s linear infinite; }
.hero-guarantee-seal text { fill: var(--gold); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.hero-footnote { position: relative; z-index: 3; padding: 20px 0 28px; color: rgba(255, 255, 255, .34); font-size: .68rem; border-top: 1px solid rgba(255, 255, 255, .08); }

.proof-bar { padding: 44px 0; background: var(--cream); border-bottom: 1px solid var(--cream-deep); }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr); align-items: center; }
.proof-divider { width: 1px; height: 66px; background: rgba(6, 29, 23, .15); }
/* Number on its own line, label beneath it — the figure is the thing that sells. */
.proof-item { min-width: 0; padding: 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.proof-item strong { font-family: Georgia, "Times New Roman", serif; color: var(--green-900); font-size: clamp(1.6rem, 2.5vw, 2.25rem); font-weight: 500; line-height: 1; }
.proof-item strong, .proof-item span { white-space: nowrap; }
.proof-item:last-child { padding-inline: 4px; }
.proof-item span { color: var(--muted); font-size: .72rem; }

.roas-section { padding: 50px 0 40px; background: var(--cream); }
#services { padding: 64px 0 60px; }
.roas-card { padding: 52px 58px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 75px; background: var(--paper); border: 1px solid rgba(6,29,23,.1); border-radius: var(--radius-lg); box-shadow: 0 18px 55px rgba(6,29,23,.08); }
.roas-copy h2 { margin-bottom: 22px; color: var(--green-950); font-size: clamp(2.25rem, 3.7vw, 3.8rem); }
.roas-copy > p:not(.eyebrow) { color: var(--muted); }
.roas-copy .roas-note { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: .78rem; }
.roas-equation { position: relative; min-height: 270px; padding: 42px 34px 32px; display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; gap: 18px; overflow: hidden; color: #fff; background: var(--green-900); border-radius: var(--radius-md); }
.roas-equation::before { content: ""; position: absolute; inset: -100px -80px auto auto; width: 250px; aspect-ratio: 1; border: 1px solid rgba(217,188,120,.16); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.015), 0 0 0 84px rgba(255,255,255,.015); }
.equation-value { position: relative; z-index: 1; text-align: center; }
.equation-value strong, .equation-value span { display: block; }
.equation-value strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 500; line-height: 1; }
.equation-value span { margin-top: 10px; color: rgba(255,255,255,.5); font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.equation-return strong { color: var(--gold-light); }
.equation-arrow { position: relative; z-index: 1; color: var(--gold); font-size: 1.5rem; }
.roas-equation small { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 18px; padding-top: 12px; display: flex; justify-content: center; gap: 7px; color: rgba(255,255,255,.46); border-top: 1px solid rgba(255,255,255,.1); font-size: .6rem; }
.roas-equation small > span:first-child { color: var(--gold); }

.section-heading { margin-bottom: 56px; }
.section-heading h2 { margin-bottom: 0; color: var(--green-950); }
.split-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 110px; align-items: end; }
.split-heading > p { margin-bottom: 5px; color: var(--muted); }
.centered { max-width: 780px; margin-inline: auto; text-align: center; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { position: relative; min-height: 480px; padding: 38px 32px; overflow: hidden; background: rgba(255, 253, 249, .75); border: 1px solid rgba(6, 29, 23, .11); border-radius: var(--radius-md); transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.service-card-featured { color: #fff; background: var(--green-900); }
.service-card h3 { margin: 32px 0 15px; font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 500; }
.service-card > p { color: var(--muted); }
.service-card-featured > p { color: rgba(255,255,255,.63); }
.card-number { position: absolute; top: 28px; right: 28px; color: rgba(6, 29, 23, .36); font-family: Georgia, "Times New Roman", serif; font-size: .82rem; }
.service-card-featured .card-number { color: rgba(255, 255, 255, .38); }
.service-icon { width: 58px; height: 58px; display: grid; place-items: center; color: var(--green-800); background: rgba(24, 82, 63, .08); border-radius: 50%; }
.service-card-featured .service-icon { color: var(--gold-light); background: rgba(255,255,255,.07); }
.service-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.check-list { margin: 30px 0 0; padding: 22px 0 0; display: grid; gap: 10px; border-top: 1px solid rgba(6, 29, 23, .1); list-style: none; }
.service-card-featured .check-list { border-top-color: rgba(255,255,255,.12); }
.check-list li { position: relative; padding-left: 20px; color: var(--green-800); font-size: .78rem; font-weight: 700; }
.service-card-featured .check-list li { color: rgba(255, 255, 255, .74); }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); }

.niche-section { padding-block: 76px; color: #fff; background: var(--green-900); }
/* minmax(0, …) rather than a bare fr: an fr track cannot shrink below its
   content's min-content width, so one long word blew the grid past the
   viewport and forced a horizontal scrollbar. */
.niche-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 85px; }
.niche-copy { position: sticky; top: 140px; }
.niche-copy h2 { margin-bottom: 28px; }
.niche-copy > p:not(.eyebrow) { color: rgba(255, 255, 255, .62); }
.niche-copy .button { margin-top: 18px; }
.niche-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.niche-card { min-height: 260px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-md); }
.niche-card-wide { grid-column: 1 / -1; min-height: 220px; }
.niche-symbol { width: 40px; height: 40px; display: grid; place-items: center; color: var(--gold-light); border: 1px solid rgba(217, 188, 120, .35); border-radius: 50%; }
.niche-label { margin-bottom: 6px; color: var(--gold); font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.niche-card h3 { margin-bottom: 10px; font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 500; }
.niche-card p:last-child { margin: 0; color: rgba(255, 255, 255, .52); font-size: .82rem; }

.process-section { padding-block: 76px 90px; position: relative; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.process-line { width: calc(66.666% - 40px); height: 1px; margin: 0 auto -23px; background: var(--line); }
.process-step { text-align: center; }
.process-step > span { position: relative; width: 48px; height: 48px; margin: 0 auto 27px; display: grid; place-items: center; color: var(--gold-light); background: var(--green-900); border-radius: 50%; font-family: Georgia, "Times New Roman", serif; font-size: .72rem; }
.process-step h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 500; }
.process-step p { color: var(--muted); font-size: .88rem; }

.guarantee-section { padding: 0 0 76px; background: var(--paper); }
.guarantee-card { min-height: 330px; padding: 55px 65px; display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 55px; color: #fff; background: var(--green-950); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.guarantee-seal { position: relative; width: 150px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(217, 188, 120, .45); }
.guarantee-seal > span { font-family: Georgia, "Times New Roman", serif; color: var(--gold-light); font-size: 2.1rem; }
.guarantee-seal svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); animation: seal-spin 28s linear infinite; }
.guarantee-seal text { fill: var(--gold); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.guarantee-copy h2 { margin-bottom: 16px; font-size: clamp(2rem, 3.2vw, 3.45rem); }
.guarantee-copy p:last-child { margin: 0; color: rgba(255, 255, 255, .58); }

.posting-section { padding-block: 60px 72px; background: var(--cream); overflow: hidden; }
.posting-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 105px; }
.posting-visual { position: relative; min-height: 600px; display: grid; place-items: center; }
.ai-orbit { position: absolute; width: 550px; aspect-ratio: 1; border: 1px solid rgba(16, 59, 46, .14); border-radius: 50%; box-shadow: 0 0 0 60px rgba(16, 59, 46, .03), 0 0 0 120px rgba(16, 59, 46, .02); }
.phone-mockup { position: relative; z-index: 2; width: 320px; padding: 19px; color: #fff; background: var(--green-950); border: 8px solid #174438; border-radius: 36px; box-shadow: 0 35px 80px rgba(6,29,23,.28); transform: rotate(-3deg); }
.phone-top { padding: 2px 2px 17px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.65); font-size: .64rem; }
.phone-top span:first-child { width: 26px; height: 8px; background: rgba(255,255,255,.15); border-radius: 10px; }
.upload-card { min-height: 170px; padding: 22px; display: grid; place-items: center; text-align: center; background: rgba(255,255,255,.06); border: 1px dashed rgba(217,188,120,.45); border-radius: 18px; }
.upload-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-light); color: var(--green-950); font-size: 1.4rem; }
.upload-card strong { margin-top: 6px; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; }
.upload-card span { color: rgba(255,255,255,.43); font-size: .65rem; }
.ai-status { margin: 15px 0; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.55); font-size: .62rem; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #52d49a; box-shadow: 0 0 0 0 rgba(82,212,154,.5); animation: pulse 2s infinite; }
.post-preview { padding: 10px; display: grid; grid-template-columns: 72px 1fr; gap: 13px; background: rgba(255,255,255,.055); border-radius: 13px; }
.post-thumb { aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(145deg, #4a765f, #162d26); border-radius: 9px; color: var(--gold-light); }
.post-lines { padding-top: 9px; display: grid; align-content: start; gap: 9px; }
.post-lines i { height: 5px; background: rgba(255,255,255,.14); border-radius: 6px; }
.post-lines i:nth-child(2) { width: 80%; }.post-lines i:nth-child(3) { width: 55%; }
.scheduled-row { margin-top: 11px; display: flex; align-items: center; gap: 8px; color: #9fe6c2; font-size: .61rem; }
.scheduled-row span:first-child { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: rgba(82,212,154,.13); }
.ai-badge { position: absolute; z-index: 3; width: 96px; height: 96px; display: grid; place-items: center; align-content: center; color: var(--green-950); background: rgba(255,253,249,.97); border: 1px solid rgba(6,29,23,.12); border-radius: 50%; box-shadow: 0 18px 45px rgba(6,29,23,.16); }
.ai-badge span { font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; }
.ai-badge small { color: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; }
.ai-badge-one { top: 55px; left: 35px; }
.ai-badge-two { top: 210px; right: 15px; }
.ai-badge-three { bottom: 60px; left: 25px; }
.posting-copy h2 { color: var(--green-950); }
.trial-pill { width: fit-content; margin: -5px 0 22px; padding: 7px 12px; display: flex; align-items: center; gap: 8px; color: var(--green-900); background: rgba(217,188,120,.24); border: 1px solid rgba(16,59,46,.14); border-radius: 999px; font-size: .68rem; font-weight: 850; letter-spacing: .02em; }
.trial-pill > span:first-child { color: #a47c27; }
.platform-chips { margin: -10px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.platform-chips > span { padding: 7px 11px; display: inline-flex; align-items: center; gap: 7px; color: var(--green-800); background: rgba(255,253,249,.7); border: 1px solid var(--line); border-radius: 999px; font-size: .69rem; font-weight: 800; }
.platform-chips i { width: 18px; height: 18px; display: grid; place-items: center; color: var(--paper); background: var(--green-800); border-radius: 50%; font-family: Georgia, "Times New Roman", serif; font-size: .7rem; font-style: normal; }
.posting-lead { color: var(--muted); font-size: 1.04rem; }
.posting-steps { margin: 32px 0; border-top: 1px solid var(--line); }
.posting-steps div { padding: 14px 0; display: grid; grid-template-columns: 50px 1fr; border-bottom: 1px solid var(--line); }
.posting-steps span { color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: .72rem; }
.posting-steps p { margin: 0; color: var(--green-900); font-weight: 700; }
.posting-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.posting-actions .button { min-height: 52px; }

.about-section { padding-block: 76px; color: #fff; background: var(--green-850); }
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 100px; }
.about-photo { position: relative; max-width: 480px; }
.about-photo-inner { height: 600px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 240px 240px 14px 14px; }
.about-photo-inner img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.78) contrast(1.05); }
.about-photo-inner::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(8,37,29,.6)); }
.about-signature { position: absolute; right: -40px; bottom: 45px; color: var(--gold-light); font-family: "Segoe Script", cursive; font-size: 2.2rem; transform: rotate(-8deg); }
.about-copy h2 { margin-bottom: 30px; }
.about-copy > p:not(.eyebrow) { color: rgba(255,255,255,.6); }
.about-detail { margin-top: 35px; padding-top: 28px; display: flex; gap: 15px; border-top: 1px solid rgba(255,255,255,.12); }
.about-detail > span { color: var(--gold); }
.about-detail strong, .about-detail small { display: block; }
.about-detail small { color: rgba(255,255,255,.5); }

/* Closing band: the form sits high on the page, so the end of the page needs
   its own way back to it for readers who scrolled the whole argument. */
.closing-cta { padding-block: 86px; }
.closing-cta-inner { max-width: 730px; margin-inline: auto; text-align: center; }
.closing-cta-inner h2 { margin-bottom: 20px; }
.closing-cta-inner > p:not(.eyebrow) { margin-bottom: 34px; color: rgba(255, 255, 255, .6); }
.closing-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.contact-section { padding-block: 76px; background: var(--paper); }
.contact-card { padding: 70px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 95px; color: #fff; background: var(--green-950); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.contact-copy h2 { margin-bottom: 23px; }
.contact-copy > p:not(.eyebrow) { color: rgba(255,255,255,.58); }
.contact-direct { margin-top: 38px; display: grid; gap: 17px; }
.contact-direct a { display: block; }
.contact-direct small, .contact-direct strong { display: block; }
.contact-direct small { color: var(--gold); font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; }
.contact-direct strong { font-size: .88rem; }

.lead-form { padding: 34px; background: #fff; color: var(--ink); border-radius: var(--radius-md); }
.lead-form.is-highlighted { animation: form-highlight 1.15s ease; }
.lead-form label { margin-bottom: 15px; display: block; color: var(--green-950); font-size: .72rem; font-weight: 800; }
.lead-form label > span { display: block; margin-bottom: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-form input, .lead-form select { width: 100%; height: 50px; padding: 0 14px; border: 1px solid rgba(6,29,23,.17); border-radius: 6px; outline: none; background: #fff; color: var(--ink); }
.lead-form input:focus, .lead-form select:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(45,123,95,.11); }
.form-note { margin: 10px 0 0; color: var(--muted); font-size: .64rem; text-align: center; }
.form-status { margin: 10px 0 0; color: var(--green-700); font-size: .75rem; font-weight: 700; text-align: center; }

.site-footer { padding: 65px 0 25px; color: #fff; background: #041510; }
.footer-top { display: grid; grid-template-columns: .75fr 1.15fr .7fr; gap: 80px; align-items: start; }
.footer-top > p { color: rgba(255,255,255,.46); font-size: .83rem; }
.footer-links { display: grid; gap: 8px; justify-items: end; color: rgba(255,255,255,.62); font-size: .78rem; }
.footer-bottom { margin-top: 45px; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.3); border-top: 1px solid rgba(255,255,255,.08); font-size: .68rem; }
.footer-bottom div { display: flex; gap: 20px; }

.booking-modal { width: min(calc(100% - 30px), 560px); padding: 0; color: var(--ink); border: 0; border-radius: var(--radius-md); box-shadow: 0 40px 120px rgba(0,0,0,.38); }
.booking-modal::backdrop { background: rgba(2,16,12,.78); backdrop-filter: blur(7px); }
.modal-content { padding: 55px; }
.modal-content h2 { color: var(--green-950); font-size: clamp(2.2rem, 5vw, 3.4rem); }
.modal-content > p:not(.eyebrow) { color: var(--muted); }
.modal-content > small { display: block; margin-top: 16px; color: var(--muted); }
.modal-close { position: absolute; top: 13px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--cream); cursor: pointer; font-size: 1.6rem; }
.booking-options { margin-top: 28px; display: grid; gap: 10px; }

.toast { position: fixed; z-index: 300; right: 24px; bottom: 24px; max-width: 340px; padding: 15px 18px; color: #fff; background: var(--green-800); border-radius: 8px; box-shadow: var(--shadow); font-size: .8rem; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .13s; }

@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(82,212,154,0); } 100% { box-shadow: 0 0 0 0 rgba(82,212,154,0); } }
@keyframes seal-spin { to { transform: rotate(360deg); } }
@keyframes form-highlight { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 7px rgba(240,217,148,.45); } }

@media (max-width: 1040px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; }
  .proof-item { padding-inline: 0; gap: 6px; }
  .proof-item span { font-size: .66rem; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .metric-float-top { left: -5px; }.metric-float-bottom { right: -5px; }
  .hero-guarantee-seal { right: 0; width: 126px; }
  .split-heading { gap: 55px; }
  .guarantee-card { grid-template-columns: 130px 1fr; }
  .guarantee-card > .button { grid-column: 2; justify-self: start; }
  .guarantee-seal { width: 130px; }
  .posting-grid, .about-grid { gap: 50px; }
  .contact-card { gap: 50px; padding: 55px; }
}

@media (max-width: 800px) {
  .section { padding: 68px 0; }
  #services { padding: 60px 0 52px; }
  .posting-section { padding: 52px 0 64px; }
  .niche-section, .about-section, .contact-section { padding-block: 68px; }
  .process-section { padding: 68px 0 76px; }
  .guarantee-section { padding: 0 0 68px; }
  .nav-wrap { height: 74px; }
  .nav-actions > .button { display: none; }
  .hero-grid { min-height: auto; grid-template-columns: 1fr; padding-top: 80px; }
  .hero-guarantee-seal { display: none; }
  .hero h1 { font-size: clamp(3.2rem, 14vw, 5.3rem); }
  .portrait-stage { min-height: 590px; margin-top: 15px; }
  .portrait-frame { height: 600px; }
  .hero-footnote { margin-top: 25px; }
  /* Two-by-two on phones: four stacked rows with rules read as a long list. */
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .proof-divider { display: none; }
  .proof-item { padding-inline: 0; }
  .proof-item strong, .proof-item span { white-space: normal; }
  /* Words, not a figure — size it down so it stays on one line like the rest. */
  .proof-item:last-child { padding-left: 0; }
  .proof-item:last-child strong { font-size: 1.2rem; }
  .roas-card { grid-template-columns: 1fr; gap: 38px; padding: 42px 34px; }
  .split-heading, .posting-grid, .about-grid, .contact-card { grid-template-columns: 1fr; gap: 45px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; }
  .niche-grid { grid-template-columns: minmax(0, 1fr); gap: 55px; }
  .niche-copy { position: static; }
  .process-grid { grid-template-columns: 1fr; gap: 35px; }
  .process-line { display: none; }
  .process-step { text-align: left; display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; }
  .process-step > span { grid-row: 1 / 3; }
  .process-step h3, .process-step p { grid-column: 2; }
  .guarantee-card { padding: 45px 35px; grid-template-columns: 1fr; text-align: center; }
  .guarantee-card > * { margin-inline: auto; }
  .guarantee-card > .button { grid-column: 1; justify-self: center; }
  .posting-visual { order: 2; }
  .posting-copy { order: 1; }
  .about-photo { margin-inline: auto; }
  .contact-card { padding: 42px 30px; }
  .footer-top { grid-template-columns: 1fr; gap: 35px; }
  .footer-links { justify-items: start; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .container { width: min(calc(100% - 30px), var(--container)); }
  .section { padding: 58px 0; }
  #services { padding: 54px 0 46px; }
  .posting-section { padding: 46px 0 58px; }
  .niche-section, .about-section, .contact-section { padding-block: 58px; }
  .process-section { padding: 58px 0 66px; }
  .guarantee-section { padding: 0 0 58px; }
  h2 { font-size: 2.65rem; }
  .brand-logo { width: 154px; }
  .nav-actions { gap: 10px; }
  .hero-grid { padding-top: 58px; }
  .hero h1 { font-size: 3.45rem; }
  .roas-section { padding: 35px 0 60px; }
  .roas-card { padding: 34px 24px; }
  .roas-equation { min-height: 235px; padding-inline: 20px; }
  .hero-actions, .hero-actions .button { width: 100%; }
  .hero-trust { display: grid; gap: 8px; }
  .portrait-stage { min-height: 510px; }
  .portrait-frame { height: 515px; }
  .portrait-name { display: grid; }
  .metric-float { min-width: 132px; padding: 11px 13px; }
  .metric-float-top { top: 27%; }.metric-float-bottom { bottom: 28%; }
  .niche-cards { grid-template-columns: 1fr; }
  .niche-card-wide { grid-column: auto; }
  .ai-orbit { width: 410px; }
  .posting-visual { min-height: 550px; }
  .phone-mockup { width: 280px; }
  .ai-badge { width: 78px; height: 78px; }
  .ai-badge-one { left: -3px; }.ai-badge-two { right: -3px; }.ai-badge-three { left: 0; }
  .about-photo-inner { height: 510px; }
  .about-signature { right: 5px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .lead-form { padding: 24px; }
  .footer-bottom { display: grid; }
  .modal-content { padding: 48px 25px 30px; }
}

/* "1 kr. -> 12 kr." side by side needs more width than the equation panel gets
   once .roas-card is narrow. The three columns were squeezed until
   overflow:hidden clipped "OMSÆTNING" — visible on phones AND on tablets,
   where the card is still two-column. Stack it and point the arrow down.
   The 1040px bound matches where the card stops having room, not a device. */
@media (max-width: 1040px) {
  .roas-equation { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 34px 22px 62px; }
  .equation-arrow { transform: rotate(90deg); }
}

/* ===========================================================================
   Touch and legibility pass for phones.
   The layout above already reflows correctly; this block fixes the things
   that only show up on a real device: iOS zooming the page on input focus,
   tap targets smaller than a fingertip, and type set too small to read at
   arm's length. Placed last so it wins on equal specificity.
   =========================================================================== */
@media (max-width: 800px) {
  /* iOS Safari zooms the whole page when a focused field is under 16px.
     Mid-form zoom is disorienting and costs leads, so pin the fields to 16px. */
  .lead-form input,
  .lead-form select { font-size: 16px; }

  /* Tap targets: Apple's guidance is 44px minimum. */
  .menu-toggle { min-height: 44px; min-width: 44px; }
  .language-option { padding: 13px 7px; }
  .footer-links a { padding: 12px 0; }
  .footer-bottom a { padding: 13px 0; }
  .contact-direct a { padding: 4px 0; }

  /* .text-link draws its own underline, so padding would detach the rule from
     the text. Grow the hit area with an invisible overlay instead. */
  .text-link { position: relative; }
  .text-link::after { content: ""; position: absolute; inset: -11px -8px; }

  /* Type that was legible on a desktop monitor but not in the hand. */
  .eyebrow { font-size: .75rem; }
  .hero-footnote { font-size: .75rem; }
  .proof-item span { font-size: .75rem; }
  .form-note { font-size: .72rem; }
  .form-status { font-size: .82rem; }
  .niche-label { font-size: .72rem; }
  .contact-direct small { font-size: .7rem; }
  .contact-direct strong { font-size: .95rem; }
  .roas-equation small { font-size: .75rem; }
  .equation-value span { font-size: .72rem; }
  .trial-pill { font-size: .75rem; }

  /* min-height + space-between exist to level two columns on desktop. Once the
     cards stack, they only force a gap between the symbol and the copy. */
  .niche-card,
  .niche-card-wide { min-height: 0; justify-content: flex-start; gap: 20px; padding: 26px 24px; }
  /* Text inside .phone-mockup and .ai-badge stays small on purpose — it is a
     drawing of a phone screen, and scaling it up breaks the illusion. */
  .footer-bottom { font-size: .75rem; }
  .footer-links { font-size: .85rem; }
}

/* Touch devices of any size — an iPad in portrait is 834px wide and still
   gets fingers, not a mouse. Keyed on the input type rather than the width so
   tablets are covered without changing anything for mouse users. */
@media (pointer: coarse) {
  .lead-form input,
  .lead-form select { font-size: 16px; }
  .menu-toggle { min-height: 44px; min-width: 44px; }
  .language-option { padding: 13px 7px; }
  .footer-links a { padding: 12px 0; }
  .footer-bottom a { padding: 13px 0; }
  .contact-direct a { padding: 4px 0; }
  .text-link { position: relative; }
  .text-link::after { content: ""; position: absolute; inset: -11px -8px; }
}

/* Narrowest phones still in use (iPhone SE 1st gen, 320px). The 44px tap
   targets above make the header row wider than the screen here, so give the
   logo and the gaps a little back. */
@media (max-width: 360px) {
  .brand-logo { width: 126px; }
  .nav-actions { gap: 6px; }
  .language-switch { gap: 3px; }
  .language-option { padding: 13px 4px; }
}

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