/* Arcaio AI Brandbook v1.0: Bebas Neue headings in capitals, Nunito Sans text, Deep Fjord as the action colour.
   Colours and tokens follow the brandbook (parts 2, 3, 8, 9). Dark mode follows the visitor's system setting. */
:root {
  /* Palette */
  --aurora-teal: #34AFC2; --fjord-green: #48A395; --norway-spruce: #4F8C82; --deep-fjord: #027368;
  --night-forest: #1B2929; --glacier-fog: #F0F5F4; --aurora-apricot: #FFBF9C; --sunset-coral: #FF997A;

  /* Roles, light mode */
  --ink: #1B2929;            /* text */
  --muted: #4A5C5A;          /* muted text */
  --line: #E5E5E5;
  --surface: #FFFFFF;
  --bg: #F0F5F4;
  --primary: #027368;        /* buttons and filled elements */
  --primary-hover: #015C53;
  --on-primary: #FFFFFF;
  --accent: #027368;         /* links, small labels, focus and hover borders (never Fjord Green on light) */
  --tint: rgba(2, 115, 104, .08);
  --ring: rgba(2, 115, 104, .22);
  --hover-soft: rgba(27, 41, 41, .06);
  --case-bg: #1B2929; --case-fg: #F0F5F4; --case-muted: #A9BDBA; --case-eyebrow: #34AFC2;
  --error: #B3261E;
  --placeholder-a: #F0F5F4; --placeholder-b: #E5E5E5;
  --shadow-card: 0 1px 2px rgba(27, 41, 41, .06), 0 8px 24px rgba(27, 41, 41, .08);
  --shadow-pop: 0 10px 28px rgba(27, 41, 41, .14);

  /* Type */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", Arial, sans-serif;
  --font: "Nunito Sans", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F0F5F4;
    --muted: #A9BDBA;
    --line: #33494A;
    --surface: #243636;
    --bg: #1B2929;
    --primary: #48A395;
    --primary-hover: #34AFC2;
    --on-primary: #1B2929;
    --accent: #34AFC2;
    --tint: rgba(72, 163, 149, .16);
    --ring: rgba(52, 175, 194, .35);
    --hover-soft: rgba(240, 245, 244, .08);
    --case-bg: #243636; --case-fg: #F0F5F4; --case-muted: #A9BDBA; --case-eyebrow: #34AFC2;
    --error: #FF997A;
    --placeholder-a: #243636; --placeholder-b: #2C4141;
    --shadow-card: none;
    --shadow-pop: 0 10px 28px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { color: inherit; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.site-header nav { flex: 1; }
html:not(.js) .js-only { display: none; }
.brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.brand img, .footer-logo { display: block; height: 60px; width: auto; }
nav a { margin-left: 20px; text-decoration: none; color: var(--muted); font-size: .95rem; font-weight: 600; }
nav a:hover { color: var(--accent); }
nav a[aria-current="page"] { color: var(--ink); }
.hero, .page-hero { padding: 64px 0 40px; }
.eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: 1rem; line-height: 1.15; color: var(--muted); font-weight: 400; margin: 0 0 12px; }
h1 { font-size: clamp(2.75rem, 7vw, 4rem); line-height: 1; margin: 0 0 16px; }
h2 { font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1.05; margin: 0 0 8px; }
.hero-lead, .section-lead { color: var(--muted); font-size: 1.15rem; line-height: 1.6; max-width: 62ch; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 8px; text-decoration: none; font: 600 15px/20px var(--font); transition: background .15s ease, border-color .15s ease; }
.btn-accent { background: var(--primary); color: var(--on-primary); }
.btn-accent:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); cursor: pointer; }
.btn-ghost:hover { background: var(--hover-soft); }
.section { padding: 40px 0; }
.proof-grid, .service-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 24px; }
.proof-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.proof-card h3 { margin: 0 0 8px; font-size: 1.7rem; line-height: 1.1; }
.proof-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.site-footer { border-top: 1px solid var(--line); padding: 24px 0; color: var(--muted); font-size: .9rem; margin-top: 40px; }
.site-footer .container { display: grid; gap: 4px; justify-items: start; }
.site-footer p { margin: 0; }
/* Seal: Bebas Neue, capitals, +0.2 em, after the logo and at most a quarter of its height */
.site-footer .seal { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: 1rem; line-height: 1.2; color: var(--ink); }

/* ---------- Service cards (card + enquiry pattern, ported from the Arcaio Solutions concept-card UX) ---------- */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  transition: border-color .2s ease, box-shadow .25s ease;
}
.service-card:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.service-card .tag { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin: 0 0 8px; }
.service-card h2, .service-card h3 { margin: 0 0 8px; font-size: 1.7rem; line-height: 1.1; }
.service-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.service-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.btn-small { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; font-size: .88rem; border-radius: 8px; border: 0; cursor: pointer; background: var(--primary); color: var(--on-primary); font-family: var(--font); font-weight: 600; text-decoration: none; transition: background .15s ease; }
.btn-small:hover { background: var(--primary-hover); }
.btn-small.is-added { background: var(--primary-hover); }
.btn-small.is-added::before { content: "\2713\00a0"; }
.link-small { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px; font-size: .88rem; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.link-small:hover { text-decoration-thickness: 2px; }

/* ---------- Homepage map: clickable sub-items under each entry path ---------- */
.service-card[id], .benefit-row[id] { scroll-margin-top: 20px; }
.pill-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { margin: 0; max-width: none; }
.pill-list a {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--bg);
  transition: border-color .15s ease, color .15s ease;
}
.pill-list a:hover { border-color: var(--accent); color: var(--accent); }
.map-card { display: flex; flex-direction: column; }
.map-card .btn-small { margin-top: auto; align-self: flex-start; }

/* ---------- Header: enquiry button ---------- */
.header-inner { gap: 12px; flex-wrap: wrap; }
.enquiry-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 700 .9rem var(--font);
  cursor: pointer;
}
.enquiry-toggle:hover { border-color: var(--accent); }
.enquiry-toggle svg { width: 18px; height: 18px; }
.enquiry-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--ink); font-size: .78rem; }
.enquiry-toggle.has-items .enquiry-count { background: var(--primary); color: var(--on-primary); }

/* ---------- Feedback when a service is added to the enquiry ---------- */
.btn-small.is-added::before { display: inline-block; animation: check-in .35s cubic-bezier(.3, 1.6, .5, 1); }
.btn-small.pop, .btn.pop { animation: btn-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.btn-small.pop-out, .btn.pop-out { animation: btn-out .3s ease; }
@keyframes btn-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes btn-out { 0% { transform: scale(1); } 40% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes check-in { from { transform: scale(0) rotate(-35deg); opacity: 0; } to { transform: none; opacity: 1; } }
.service-card.just-added, .benefit-row.just-added { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.service-card, .benefit-row { transition: border-color .2s ease, box-shadow .35s ease; }
.fly-chip {
  position: fixed; left: 0; top: 0; z-index: 1000; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary); color: var(--on-primary);
  font: 700 12px/1 var(--font); box-shadow: var(--shadow-pop); pointer-events: none; will-change: transform;
}
.enquiry-toggle.bump, .enquiry-fab.bump { animation: bump .55s cubic-bezier(.3, 1.6, .5, 1); }
.enquiry-count.count-pop { animation: count-pop .55s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes count-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.enquiry-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--primary); color: var(--on-primary); font: 700 .92rem var(--font); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.enquiry-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.enquiry-fab:hover { background: var(--primary-hover); }
.enquiry-fab svg { width: 18px; height: 18px; }
.enquiry-fab .enquiry-count { background: var(--on-primary); color: var(--primary); }
html:not(.js) .enquiry-fab { display: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-small.pop, .btn.pop, .btn-small.pop-out, .btn.pop-out, .btn-small.is-added::before,
  .enquiry-toggle.bump, .enquiry-fab.bump, .enquiry-count.count-pop { animation: none; }
  .enquiry-fab { transition: none; }
  .fly-chip { display: none; }
}

/* ---------- Header: language dropdown (works without JS, via details) ---------- */
.lang-switch { position: relative; }
.lang-switch summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
  font: 700 .9rem var(--font); cursor: pointer; list-style: none;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.lang-switch summary:hover, .lang-switch[open] summary { border-color: var(--accent); }
.lang-switch summary svg { width: 18px; height: 18px; }
.lang-switch ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 140px; margin: 0; padding: 6px;
  list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-pop);
}
.lang-switch li { margin: 0; }
.lang-switch ul a { display: block; margin: 0; padding: 8px 10px; border-radius: 6px; color: var(--ink); font-size: .92rem; font-weight: 600; text-decoration: none; }
.lang-switch ul a:hover { background: var(--bg); }
.lang-switch ul a.is-current { font-weight: 700; color: var(--accent); }
.lang-switch ul a.is-current::after { content: "\00a0\2713"; }

/* ---------- Enquiry drawer ---------- */
.drawer { width: min(420px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--surface); color: var(--ink); box-shadow: -12px 0 40px rgba(27, 41, 41, .25); }
.drawer::backdrop { background: rgba(27, 41, 41, .55); }
.drawer-inner { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 1.9rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 22px; }
.drawer-foot { padding: 18px 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-foot .muted { font-size: .85rem; margin: 0; text-align: center; color: var(--muted); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--bg); }
.icon-btn svg { width: 18px; height: 18px; }
.enquiry-items { list-style: none; margin: 0; padding: 0; }
.enquiry-items li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.enquiry-items .thumb { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; background: var(--bg); color: var(--accent); display: grid; place-items: center; font-weight: 700; }
.enquiry-items .meta { flex: 1; line-height: 1.3; }
.enquiry-items .meta strong { display: block; }
.enquiry-items .meta span { font-size: .85rem; color: var(--muted); }
.empty-state { padding: 20px 0; color: var(--muted); font-size: .95rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Service template: hero, benefit rows, case study, form ---------- */
.breadcrumb { font-size: .85rem; color: var(--muted); margin: 0 0 16px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.service-hero { padding: 48px 0 32px; border-bottom: 1px solid var(--line); }
.service-hero .btn-row { margin-top: 20px; }

.benefit-rows { display: grid; gap: 24px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.benefit-rows.rows-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.benefit-row { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.benefit-row .num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sunset-coral); color: var(--night-forest); font-family: var(--font-display); font-size: 1.15rem; line-height: 1; margin-bottom: 12px; }
.benefit-row h3 { margin: 0 0 6px; font-size: 1.6rem; line-height: 1.1; }
.benefit-row p { margin: 0; color: var(--muted); font-size: .95rem; }

.case-study { background: var(--case-bg); color: var(--case-fg); border-radius: 24px; padding: 32px; margin-top: 8px; border: 1px solid var(--case-bg); }
.case-study .eyebrow { color: var(--case-eyebrow); }
.case-study h2, .case-study h3 { color: var(--case-fg); }
.case-study p { color: var(--case-muted); }
.case-study .case-fact { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(240, 245, 244, .1); border-radius: 999px; padding: 6px 14px; font-size: .85rem; margin: 4px 8px 0 0; }
.case-study .case-fact strong { color: var(--case-fg); }
.case-study.case-pending { background: var(--surface); color: var(--ink); border: 1px dashed var(--line); }
.case-study.case-pending .eyebrow { color: var(--accent); }
.case-study.case-pending h2, .case-study.case-pending h3 { color: var(--ink); }
.case-study.case-pending p { color: var(--muted); }

/* Website brief form: checkbox / radio option cards */
.option-group { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.option-group legend { padding: 0; font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.option-hint { margin: 0 0 12px; color: var(--muted); font-size: .88rem; }
.option-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.option {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 48px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); cursor: pointer; font-size: .93rem; line-height: 1.3;
  transition: border-color .15s ease, background .15s ease;
}
.option:hover { border-color: var(--accent); }
.option input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--primary); }
.option:has(input:checked) { border-color: var(--accent); background: var(--tint); font-weight: 600; }
.option:focus-within { box-shadow: 0 0 0 3px var(--ring); }
.file-field { margin-top: 18px; display: grid; gap: 6px; }
.file-field label { font-weight: 600; font-size: .92rem; }
.file-field input[type=file] { font: inherit; font-size: .9rem; max-width: 100%; }
.form-error { display: none; margin: 10px 0 0; color: var(--error); font-size: .88rem; font-weight: 600; }
.form-error.is-visible { display: block; }

/* Animated enquiry form */
.enquiry-form { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 32px; margin-top: 8px; }
.enquiry-form h2 { font-size: clamp(1.9rem, 4vw, 2.4rem); }
.form-grid { display: grid; gap: 18px; margin-top: 20px; }
@media (min-width: 640px) { .form-grid.two-col { grid-template-columns: 1fr 1fr; } }
.field-float { position: relative; }
.field-float input, .field-float textarea {
  width: 100%; padding: 18px 14px 8px; min-height: 52px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease; appearance: none;
}
.field-float textarea { min-height: 100px; resize: vertical; }
.field-float label {
  position: absolute; left: 14px; top: 16px; color: var(--muted); font-size: .95rem;
  pointer-events: none; transform-origin: left top;
  transition: transform .18s ease, color .18s ease, top .18s ease;
}
.field-float input:focus, .field-float textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label,
.field-float textarea:focus + label,
.field-float textarea:not(:placeholder-shown) + label {
  top: 6px; transform: scale(.78); color: var(--accent);
}
.form-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.form-submit {
  min-height: 48px; padding: 12px 28px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--primary); color: var(--on-primary); font: 600 15px/20px var(--font);
  transition: background .15s ease;
}
.form-submit:hover { background: var(--primary-hover); }
.form-note { font-size: .85rem; color: var(--muted); margin: 0; }
.form-success {
  display: none; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 16px;
  background: var(--tint); border: 1px solid var(--accent); border-radius: 8px;
  color: var(--accent); font-weight: 600; font-size: .92rem;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.form-success.is-visible { display: flex; opacity: 1; transform: translateY(0); }
.form-success svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .field-float label, .form-submit, .form-success, .btn, .btn-small { transition: none; }
}

/* ---------- Skip link, honeypot, mobile menu ---------- */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--primary); color: var(--on-primary); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nav-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 700 .9rem var(--font); cursor: pointer; }
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
  .js .nav-toggle { display: inline-flex; margin-left: auto; }
  .js .site-header nav { display: none; flex-basis: 100%; order: 10; }
  .js .site-header nav.is-open { display: block; }
  .js .site-header nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-header nav a { display: block; padding: 12px 4px; }
}
@media (max-width: 520px) {
  .site-header .brand img { height: 40px; }
  .header-inner { gap: 4px; }
  .site-header .brand img { height: 36px; }
  .nav-toggle, .enquiry-toggle, .lang-switch summary { padding: 8px 10px; gap: 6px; }
  .js .enquiry-label { display: none; }
  .js .nav-toggle { margin-left: 0; }
  .js .lang-switch { margin-left: auto; }
  .lang-switch summary { font-size: .82rem; }
  .site-header .brand img { height: 32px; }
}

/* ---------- Cookie banner, legal pages, footer links ---------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 640px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); }
.consent-text { margin: 0; flex: 1 1 280px; font-size: .9rem; line-height: 1.5; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-btn { background: var(--primary); color: var(--on-primary); }
.consent-btn[data-choice="reject"] { background: var(--primary); }
.consent-open .enquiry-fab { display: none; }
.privacy-note { margin: 12px 0 0; font-size: .85rem; color: var(--muted); }
.legal h2 { margin: 32px 0 8px; font-size: 1.6rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { max-width: 68ch; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 10px; }
.footer-links { margin-top: 4px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--accent); }

/* ---------- Homepage: service and package cards with icons ---------- */
.card-icon { width: 56px; height: 56px; margin-bottom: 14px; }
.section-more { margin-top: 24px; }

/* ---------- Requested services shown in the contact form ---------- */
.requested { margin: 0 0 20px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.requested-title { margin: 0 0 8px; font-size: 1rem; }
.requested-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.requested-list li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; font-weight: 600; }
.requested-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.requested-x:hover { background: var(--bg); color: var(--accent); }
.requested-empty { margin: 0; color: var(--muted); font-size: .9rem; }
.requested-empty a { color: var(--accent); }

/* Spacing helpers that replace inline styles on the packages pages */
.section-lead.lead-gap { margin-top: 28px; }
.section-lead.lead-gap-s { margin-top: 24px; }

/* ---------- Contact details: footer line and the Contact page list ---------- */
.footer-contact a { color: inherit; text-underline-offset: 3px; }
.contact-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.contact-list li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.contact-list strong { min-width: 5.5em; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.contact-list a { color: var(--accent); font-weight: 600; }

/* Link to the sister company in the footer keeps the footer colour */
.footer-sisters a { color: inherit; text-underline-offset: 3px; }

/* Newsletter sign-up in the footer (assets/newsletter.js) */
.newsletter { margin: 20px 0 8px; padding: 18px 20px; max-width: 520px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; }
.site-footer .newsletter-title { margin: 0 0 4px; font-size: 1.1rem; letter-spacing: 0; text-transform: none; }
.newsletter-lead { margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
.newsletter-label { display: block; margin-bottom: 4px; font-size: .85rem; font-weight: 600; }
.newsletter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter-row input[type=email] { flex: 1 1 220px; min-width: 0; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.newsletter-btn { background: var(--primary); color: var(--on-primary); }
/* Wide screens: the newsletter box sits on the right, on the same rows as the company details */
@media (min-width: 900px) {
  .site-footer .container { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); column-gap: 48px; align-items: start; }
  .site-footer .container > * { grid-column: 1; }
  .site-footer .container > .newsletter { grid-column: 2; grid-row: 1 / span 6; justify-self: end; align-self: start; width: 100%; margin: 0; }
}
.newsletter-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: .85rem; }
.newsletter-msg { min-height: 1.2em; margin: 8px 0 0; font-size: .88rem; }
.newsletter-msg.is-error { color: #b23a2c; }

/* 16.10: cookie-banner som smal stripe nederst */
.consent {
  left: 0; right: 0; bottom: 0;
  max-width: none;
  border-radius: 0;
  border-width: 1px 0 0;
  padding: 10px max(16px, calc((100vw - 1200px) / 2));
  gap: 8px 16px;
  box-shadow: 0 -4px 16px rgba(27, 41, 41, .08);
}
.consent-text { flex: 1 1 320px; font-size: .875rem; line-height: 1.4; }
.consent-btn { padding: 8px 14px; }
.consent-btn[data-choice="reject"] { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* 16.10: lange ord brytes inne i kortet */
.service-card h2, .service-card h3, .proof-card h3, .benefit-row h3 {
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}

/* 17.10: kort bevislinje under knappen i forsidetoppen */
.hero-proof { margin: 16px 0 0; color: var(--muted); font-size: .95rem; }

/* 17.10: avsluttende oppfordring nederst på forsiden */
.cta-band .container { margin: 0 max(20px, calc((100% - 1160px) / 2)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px, 4vw, 48px); }
.cta-band .btn-row { margin-top: 20px; }

/* 17.10: del lange ord bare der vi har satt myk bindestrek (­), ikke på tilfeldige steder */
.service-card h2, .service-card h3, .proof-card h3, .benefit-row h3 { hyphens: manual; -webkit-hyphens: manual; }

/* 17.10: ingenting blir bredere enn skjermen på smale mobiler (320 px) */
.benefit-rows.rows-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.file-field { grid-template-columns: minmax(0, 1fr); }
.file-field input[type=file] { min-width: 0; width: 100%; }

/* ===== 17.10: ny forside etter skissen «forslag ny forside» ===== */
:root {
  --band-bg: #1B2929; --band-surface: #243636; --band-fg: #F0F5F4; --band-muted: #C3D3D0; --band-line: #33494A;
  --coral: #FF997A; --on-coral: #1B2929; --coral-ink: #B5512F; --tint-coral: #FFE9E1; --tint-fjord: #E3F1EE;
  --live: #2E7D5B; --live-bg: #DDF0E6; --track: #E3ECEA;
}
@media (prefers-color-scheme: dark) {
  :root {
    --band-bg: #142020; --band-surface: #1F302F; --band-fg: #F0F5F4; --band-muted: #A9BDBA; --band-line: #33494A;
    --coral-ink: #FFBF9C; --tint-coral: rgba(255, 153, 122, .16); --tint-fjord: rgba(72, 163, 149, .18);
    --live: #7FD3A6; --live-bg: rgba(127, 211, 166, .14); --track: #33494A;
  }
}
.kicker { margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.kicker-coral { color: var(--coral); }
.link-arrow { font-weight: 700; color: var(--accent); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-coral { background: var(--coral); color: var(--on-coral); }
.btn-coral:hover { background: var(--aurora-apricot); }

/* Toppen */
.home-hero { position: relative; overflow: hidden; padding: 64px 0 56px; }
.home-hero::before, .home-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.home-hero::before { right: -120px; top: -80px; width: 560px; height: 560px; background: var(--coral); opacity: .16; }
.home-hero::after { right: 26%; top: 300px; width: 220px; height: 220px; background: var(--fjord-green); opacity: .12; }
.home-hero-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.home-hero-copy { flex: 1 1 480px; min-width: 0; }
.home-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.home-eyebrow svg { color: var(--accent); flex: none; }
.home-hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.1rem); line-height: .95; text-wrap: balance; }
.h1-accent { text-wrap: balance; }
.h1-accent { color: var(--accent); }
.home-hero .btn-row { align-items: center; gap: 12px 24px; }
.hero-checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .92rem; color: var(--muted); }
.hero-checks li { display: inline-flex; align-items: center; gap: 6px; }
.hero-checks svg { width: 16px; height: 16px; color: var(--accent); }

/* Systemkortet */
.flow-card { flex: 1 1 360px; max-width: 460px; min-width: 0; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-pop); padding: 24px; display: grid; gap: 16px; }
.flow-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flow-live { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--live); background: var(--live-bg); padding: 4px 10px; border-radius: 999px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: home-blink 1.4s ease-in-out infinite; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.flow-step { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid transparent; transition: background .4s ease, border-color .4s ease; }
.flow-step.is-active { background: var(--tint-fjord); border-color: var(--fjord-green); }
.flow-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: background .4s ease, color .4s ease; }
.flow-icon svg { width: 18px; height: 18px; }
.flow-step.is-active .flow-icon { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.flow-text { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.35; }
.flow-text strong { font-size: .95rem; }
.flow-text span { font-size: .82rem; color: var(--muted); }
.flow-tag { flex: none; font-size: .75rem; font-weight: 700; color: var(--accent); min-width: 4.5em; text-align: right; }
.flow-bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.flow-bar span { display: block; height: 100%; width: 33.333%; border-radius: 99px; background: var(--primary); transition: width 1.6s linear; }
.flow-feed { border-top: 1px solid var(--line); padding-top: 12px; }
.flow-feed-label { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.flow-feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flow-feed li { display: flex; align-items: center; gap: 10px; font-size: .85rem; line-height: 1.3; }
.feed-text { flex: 1; min-width: 0; }
.feed-time { flex: none; font-size: .75rem; color: var(--muted); }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot-coral { background: var(--coral); } .dot-fjord { background: var(--primary); } .dot-teal { background: var(--aurora-teal); } .dot-green { background: var(--fjord-green); }
.flow-note { margin: 0; font-size: .75rem; color: var(--muted); }
@keyframes home-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Bevisstripe */
.proof-band { background: var(--surface); border-block: 1px solid var(--line); }
.proof-band-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 40px; padding-block: 20px; }
.proof-band-label { font-size: .9rem; font-weight: 600; color: var(--muted); }
.proof-band-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 36px; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .05em; text-transform: uppercase; }
.proof-band-names a { color: var(--ink); text-decoration: none; }
.proof-band-names a:hover { color: var(--accent); }

/* Seksjonshoder */
.home-section { padding: 72px 0 8px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.section-head > div, .section-head-stack { max-width: 720px; }
.section-head-stack { display: block; }
.section-head h2 { margin: 0; text-wrap: balance; }
.section-head .section-lead { margin: 10px 0 0; }

/* Fire tjenestegrupper */
.group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.group-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; min-width: 0; }
.group-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.group-icon svg { width: 22px; height: 22px; }
.group-icon-fjord { background: var(--tint-fjord); color: var(--accent); }
.group-icon-coral { background: var(--tint-coral); color: var(--coral-ink); }
.group-card h3 { font-family: var(--font); text-transform: none; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; margin: 0 0 8px; }
.group-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.group-card a { display: inline-block; padding: 4px 0; font-size: .95rem; line-height: 1.45; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; overflow-wrap: break-word; }
.group-card a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* Sommerfuglreisen */
.journey-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.journey-step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.journey-num { display: block; font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--fjord-green); margin-bottom: 8px; }
.journey-step h3 { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
.journey-step p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.journey-step-last { background: var(--band-bg); border-color: var(--band-bg); color: var(--band-fg); }
.journey-step-last .journey-num { color: var(--coral); }
.journey-step-last p { color: var(--band-muted); }

/* Pakker */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; align-items: stretch; }
.pack-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pack-card-featured { border: 2px solid var(--primary); }
.pack-badge { position: absolute; top: 20px; right: 20px; font-size: .75rem; font-weight: 700; color: var(--on-coral); background: var(--coral); padding: 3px 10px; border-radius: 999px; }
.pack-card .card-icon { margin-bottom: 8px; }
.pack-who { margin: 0; font-size: .85rem; font-weight: 700; color: var(--muted); }
.pack-card h3 { margin: 0; font-size: clamp(2rem, 9vw, 2.4rem); line-height: 1; hyphens: manual; }
.pack-card p { margin: 0; font-size: .95rem; line-height: 1.55; }
.pack-card .link-small { margin-top: auto; padding-top: 12px; align-self: flex-start; }
.pack-note { margin: 18px 0 0; font-size: .92rem; color: var(--muted); }

/* Erfaring og vinger */
.exp-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.exp-card { flex: 1 1 520px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px, 4vw, 36px); }
.exp-card h2 { text-wrap: balance; }
.exp-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.exp-list li { background: var(--bg); border-radius: 12px; padding: 18px; display: grid; gap: 6px; }
.exp-list strong { color: var(--accent); }
.exp-list span { font-size: .95rem; line-height: 1.5; }
.wings-card { flex: 1 1 360px; min-width: 0; background: var(--band-bg); color: var(--band-fg); border-radius: 16px; padding: 28px; display: grid; gap: 14px; align-content: start; }
.journey-svg { width: 100%; height: auto; font-family: var(--font); }
.journey-svg .j-h { font-size: 15px; font-weight: 700; fill: #FFFFFF; }
.journey-svg .j-s { font-size: 12.5px; fill: #A9BDBA; }
.wings-text { border-top: 1px solid var(--band-line); padding-top: 14px; }
.wings-text p { margin: 6px 0 0; font-size: .95rem; line-height: 1.55; color: var(--band-muted); }

/* Kontakt */
.contact-band { margin-top: 72px; background: var(--band-bg); color: var(--band-fg); }
.contact-band-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; padding-block: 64px; }
.contact-band-copy { flex: 1 1 420px; min-width: 0; }
.contact-band h2 { color: var(--band-fg); margin: 0 0 12px; }
.contact-band-copy p { margin: 0 0 22px; color: var(--band-muted); font-size: 1.05rem; max-width: 52ch; }
.contact-box { flex: 0 1 340px; min-width: 0; background: var(--band-surface); border-radius: 16px; padding: 22px; display: grid; gap: 8px; }
.contact-box-title { margin: 0 0 4px; font-weight: 700; }
.contact-box a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--coral); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.contact-box a:hover { text-decoration: underline; }
.contact-box svg { width: 20px; height: 20px; flex: none; }
.contact-box-note { margin: 4px 0 0; font-size: .88rem; color: var(--band-muted); }
.home-section + .contact-band, main > .contact-band:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .flow-step, .flow-icon, .flow-bar span { transition: none; }
}
@media (max-width: 720px) {
  .home-hero { padding: 40px 0 40px; }
  .home-hero::before { width: 280px; height: 280px; right: -140px; top: -110px; }
  .home-hero::after { display: none; }
}
.wings-sub { display: block; margin-top: 14px; }

/* 17.10: konverteringsrettinger – pris og spørsmål */
.price-box { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.price-box h3 { margin: 0 0 10px; font-size: 1.6rem; }
.price-box ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 75ch; }
.price-box li { font-size: .95rem; line-height: 1.55; }
.price-box .link-small { margin-top: 6px; }
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; min-height: 44px; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--accent); }
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--accent); }
.faq-item p { margin: 0; padding: 0 20px 18px; color: var(--muted); max-width: 70ch; }

/* 17.10: Konseptpakken for nye bedrifter */
.pack-includes { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: .95rem; line-height: 1.5; }
.includes-title { margin: 24px 0 10px; font-size: 1.6rem; }
.includes-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.includes-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: .95rem; line-height: 1.5; }
.includes-list strong { color: var(--accent); }

/* 17.10: «Hele bedriften i system» */
.system-card { margin-top: 16px; background: var(--surface); border: 2px solid var(--primary); border-radius: 16px; padding: clamp(22px, 3vw, 32px); display: grid; gap: 20px; }
.system-card-head { display: flex; gap: 16px; align-items: flex-start; }
.system-card-head .group-icon { flex: none; margin: 0; }
.system-card h3 { margin: 0 0 6px; font-size: clamp(1.8rem, 3vw, 2.2rem); line-height: 1; }
.system-card-head p { margin: 0; max-width: 70ch; color: var(--muted); }
.system-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.system-list li { background: var(--bg); border-radius: 12px; padding: 16px; display: grid; gap: 4px; }
.system-list strong { color: var(--accent); }
.system-list span { font-size: .92rem; line-height: 1.5; }
@media (max-width: 520px) { .system-card-head { flex-direction: column; } }

/* 17.10: seks punkter i «Hele bedriften i system» – tre per rad */
.system-list { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* 17.10: sikkerhetsnett – lange ord i overskrifter går aldri ut av skjermen */
h1, h2 { overflow-wrap: break-word; hyphens: manual; }

/* 17.10: AI-landingsside */
.ai-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.ai-offer { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-offer .group-icon { margin-bottom: 6px; }
.ai-offer h3 { margin: 0; font-size: 2rem; line-height: 1; }
.ai-offer-who { margin: 0; font-weight: 700; color: var(--muted); font-size: .95rem; }
.ai-offer ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .95rem; line-height: 1.5; }
.ai-task-list { margin: 0; }
.ai-price { flex: 1 1 360px; min-width: 0; margin-top: 0; align-self: stretch; }
.site-header nav a[href$="ai-radgivning.html"] { font-weight: 700; }

/* 17.10: seks menypunkter – hamburgermeny opp til 1000 px så toppfeltet aldri går over to linjer */
@media (max-width: 1000px) {
  .js .nav-toggle { display: inline-flex; margin-left: auto; }
  .js .site-header nav { display: none; flex-basis: 100%; order: 10; }
  .js .site-header nav.is-open { display: block; }
  .js .site-header nav a { display: block; padding: 12px 4px; }
}
.ai-task-list li { background: var(--surface); border: 1px solid var(--line); }
.nowrap { white-space: nowrap; }