/* ==========================================================================
   Sparky ehf - marketing site
   Aesthetic: Nordic technical. Native CSS, no framework, no build step.
   Radius system (locked): interactive = 10px, containers/media = 16px.
   Accent (locked): --accent is the Sparky logo blue (#021E71), sampled from the
   logo watermark on their own work photos. Used identically on every page.
   Theme: light-locked with a prefers-color-scheme dark variant.
   ========================================================================== */

/* --- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg { display: block; max-width: 100%; }
/* The width/height attributes are there to reserve space and keep CLS down.
   Without this, that height attribute beats every CSS aspect-ratio below. */
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

/* --- tokens ------------------------------------------------------------ */
:root {
  /* Cool neutrals, because the accent is cool. One temperature per palette. */
  --bg:            #FBFBFC;
  --bg-2:          #EFF1F6;
  --card:          #FFFFFF;
  --text:          #131722;
  --text-2:        #565E6E;
  --line:          #E2E5EC;
  --line-strong:   #C7CCD8;

  --accent:        #021E71;   /* the logo blue */
  --accent-hover:  #0A2A8C;
  --accent-strong: #2A4BAE;   /* icons and links on light ground, 7.5:1 */
  --accent-soft:   #EAEEF9;
  --on-accent:     #FFFFFF;
  /* The dark band is itself navy, so the CTA there uses a lifted tint of the
     same hue instead of disappearing into the background. */
  --accent-lift:   #5C86E8;
  --on-accent-lift:#04102E;

  --inverse-bg:    #0B1226;
  --inverse-bg-2:  #141C33;
  --inverse-text:  #F2F4F8;
  --inverse-text-2:#A6AFC4;
  --inverse-line:  #222C46;

  --r-ui:    10px;
  --r-box:   16px;
  --shadow:  0 1px 2px rgba(20, 24, 29, .04), 0 12px 32px -12px rgba(20, 24, 29, .12);
  --shadow-lift: 0 2px 4px rgba(20, 24, 29, .05), 0 20px 44px -16px rgba(20, 24, 29, .20);

  --wrap: 1200px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* One family, contrast carried by weight and size. Schibsted Grotesk was
     drawn for Nordic newsrooms, so it sets Icelandic properly and reads at
     body size, and it is not one of the faces every other site is using. */
  --font-display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0F1319;
    --bg-2:          #151A22;
    --card:          #181E27;
    --text:          #EFF1F4;
    --text-2:        #A4ACBA;
    --line:          #242B36;
    --line-strong:   #323B48;

    --accent:        #5C86E8;
    --accent-hover:  #7A9CEE;
    --accent-strong: #8FA9F2;
    --accent-soft:   #141C33;
    --on-accent:     #04102E;
    --accent-lift:   #6E93EC;
    --on-accent-lift:#04102E;

    --inverse-bg:    #070A14;
    --inverse-bg-2:  #10162A;
    --inverse-text:  #F2F4F8;
    --inverse-text-2:#A0A9BE;
    --inverse-line:  #1B2338;

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -12px rgba(0, 0, 0, .7);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 20px 44px -16px rgba(0, 0, 0, .8);
  }
}

/* --- base -------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* 800 against 400 body: one family, real contrast. */
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 1.35rem + 2.9vw, 3.85rem); }
h2 { font-size: clamp(1.8rem, 1.25rem + 1.9vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.2; }

p { text-wrap: pretty; }
p, li { max-width: 68ch; }

.lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); color: var(--text-2); line-height: 1.6; }
.muted { color: var(--text-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--accent); flex-shrink: 0;
}

/* --- layout ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(3.75rem, 2rem + 6.5vw, 7rem); }
.section--tint { background: var(--bg-2); }
.section-head { max-width: 60ch; display: grid; gap: 1rem; margin-bottom: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: .7rem 1.1rem; border-radius: var(--r-ui); font-weight: 600;
}
.skip-link:focus-visible { top: 16px; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  letter-spacing: -.01em;
  padding: .85rem 1.5rem;
  border-radius: var(--r-ui);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              transform .18s var(--ease), color .25s var(--ease);
}
.btn i { font-size: 1.15em; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); background: var(--card); }
.btn--ghost:hover { border-color: var(--text); }

.base .btn--primary { background: var(--accent-lift); color: var(--on-accent-lift); }
.base .btn--primary:hover { background: #7FA1EE; }

.btn--on-dark { border-color: rgba(255,255,255,.3); color: var(--inverse-text); }
.btn--on-dark:hover { border-color: var(--inverse-text); background: rgba(255,255,255,.07); }

.btn--sm { padding: .6rem 1.1rem; font-size: .94rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.textlink {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.textlink:hover { gap: .65rem; border-color: var(--text); }

/* --- header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(2px)) { .site-header { background: var(--bg); } }

.nav {
  height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; flex-shrink: 0;
}
.brand__mark {
  /* Sized up against the 800-weight wordmark: the mark is a fine glyph, not a
     solid block, so it needs a little more room to carry equal weight. */
  width: 38px; height: 38px; flex: 0 0 38px;
  background: var(--accent);
  -webkit-mask: url(../img/logo.svg) center / contain no-repeat;
  mask: url(../img/logo.svg) center / contain no-repeat;
}
/* On the dark CTA and footer block the brand blue would vanish. */
.base .brand__mark { background: var(--inverse-text); }

.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.24rem;
  letter-spacing: -.03em;
}
.brand__suffix { font-weight: 500; color: var(--text-2); }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
  text-decoration: none; font-size: .98rem; font-weight: 500; color: var(--text-2);
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); }

.nav__actions { display: flex; align-items: center; gap: .85rem; }
.nav__phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 500;
  text-decoration: none; font-size: .98rem; white-space: nowrap;
}
.nav__phone i { color: var(--accent-strong); }

.nav__toggle {
  display: none; width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-ui);
  font-size: 1.3rem;
}

.nav__panel { display: none; }

@media (max-width: 940px) {
  .nav__links, .nav__phone { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__panel {
    display: block;
    border-top: 1px solid var(--line);
    padding: .75rem 0 1.5rem;
  }
  .nav__panel[hidden] { display: none; }
  .nav__panel ul { display: grid; }
  /* Scoped to the list so it never leaks onto a .btn inside the panel. */
  .nav__panel ul a {
    display: block; padding: .8rem 0; text-decoration: none;
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
    border-bottom: 1px solid var(--line);
  }
  .nav__panel ul li:last-child a { border-bottom: 0; }
}
@media (max-width: 420px) {
  .nav { gap: .75rem; }
  .nav__actions { gap: .5rem; }
  .nav__actions .btn { padding-inline: 1rem; font-size: .92rem; }
  .brand__suffix { display: none; }
}
/* Small Android widths: the lockup, the CTA and the toggle all have to fit
   on one row, so the brand gives up the most. */
@media (max-width: 360px) {
  .nav__actions .btn { padding-inline: .8rem; font-size: .88rem; }
  .brand { gap: .45rem; }
  .brand__name { font-size: 1.08rem; }
  .brand__mark { width: 30px; height: 30px; flex: 0 0 30px; }
}

/* --- hero -------------------------------------------------------------- */
.hero { padding-top: clamp(2.25rem, 1rem + 3.5vw, 4rem); padding-bottom: clamp(3rem, 1.5rem + 5vw, 5.5rem); }
.hero__grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
.hero__copy { display: grid; gap: 1.35rem; justify-items: start; }
/* The grid column already sets the measure. A ch cap on top of it costs a
   line, since the wrapper's ch is the 17px body font, not the headline's. */
.hero__copy h1 { max-width: none; }
.hero__copy .lede { max-width: 44ch; }
.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  /* Cap the height so the hero, CTAs included, clears the fold on laptops. */
  max-height: min(620px, 66vh);
  border-radius: var(--r-box);
  background: var(--bg-2);
}
.hero__badge {
  position: absolute; left: -20px; bottom: 30px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  box-shadow: var(--shadow-lift);
  padding: 1rem 1.15rem;
  display: flex; align-items: center; gap: .8rem;
  max-width: 304px;
}
.hero__badge i { font-size: 1.5rem; color: var(--accent-strong); flex-shrink: 0; }
.hero__badge span { font-size: .9rem; line-height: 1.35; color: var(--text-2); }
.hero__badge strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--text); }

@media (max-width: 940px) {
  /* Copy leads on small screens so the promise and CTA sit above the fold. */
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__copy h1, .hero__copy .lede { max-width: none; }
  .hero__media img { aspect-ratio: 16 / 10; }
  .hero__badge { left: auto; right: 14px; bottom: -22px; max-width: 244px; padding: .85rem 1rem; }
}
@media (max-width: 560px) {
  .hero__badge { position: static; max-width: none; margin-top: 1rem; box-shadow: none; }
  .hero__copy { gap: 1.15rem; }
  .hero .btn-row { width: 100%; }
  .hero .btn-row .btn { flex: 1 1 auto; }
}

/* --- benefits bento ---------------------------------------------------- */
.bento {
  display: grid; gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bento__cell {
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--card);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  display: flex; flex-direction: column; gap: .7rem;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bento__cell:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.bento__cell h3 { max-width: 22ch; }
.bento__cell p { color: var(--text-2); font-size: 1rem; }
.icon-chip,
.bento__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.4rem;
  background: var(--accent-soft); color: var(--accent-strong);
  margin-bottom: .35rem;
}

/* cell 1: tall, spans both rows, carries the photograph */
.bento__cell--feature {
  grid-row: span 2;
  padding: 0; overflow: hidden; justify-content: flex-end;
  position: relative; min-height: 460px;
  border-color: transparent;
}
.bento__cell--feature img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* The source is a two-up; this keeps the finished install in frame. */
  object-position: 26% center;
}
.bento__body {
  position: relative; z-index: 1;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  display: grid; gap: .6rem;
  background: linear-gradient(to top, rgba(9,12,15,.95) 14%, rgba(9,12,15,.74) 56%, rgba(9,12,15,0) 100%);
}
.bento__cell--feature h3 { color: #FFFFFF; }
.bento__cell--feature p { color: rgba(246,245,242,.88); }
.bento__cell--feature .bento__icon { background: rgba(255,255,255,.16); color: #FFFFFF; }
.bento__cell--feature:hover { transform: none; }

@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--feature { grid-row: auto; min-height: 380px; }
}

/* --- proof ------------------------------------------------------------- */
.proof__grid {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 940px) { .proof__grid { grid-template-columns: 1fr; } }

.credentials { display: grid; gap: 1.35rem; }
.credential { display: flex; gap: .85rem; align-items: flex-start; }
.credential i { font-size: 1.35rem; color: var(--accent-strong); flex-shrink: 0; line-height: 1.3; }
.credential strong { display: block; font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -.01em; }
.credential span { font-size: .95rem; color: var(--text-2); line-height: 1.5; }

.quotes { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quote {
  border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--card); padding: 1.6rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.quote--lead { grid-column: 1 / -1; }
.quote blockquote { font-size: 1.02rem; line-height: 1.5; letter-spacing: -.01em; max-width: none; }
.quote--lead blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.35;
}
.quote figcaption { font-size: .9rem; color: var(--text-2); margin-top: auto; }
.quote figcaption b { display: block; color: var(--text); font-weight: 600; font-size: .95rem; }
@media (max-width: 640px) { .quotes { grid-template-columns: 1fr; } }

.review-card {
  border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--card); padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  display: grid; gap: 1.5rem;
}
.review-card__figure { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.review-card__figure b {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 2rem + 4vw, 4.75rem); line-height: .9;
  letter-spacing: -.04em;
}
.review-card__figure span { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); }
.review-card p { color: var(--text-2); max-width: 46ch; }
.review-card__foot {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center;
  border-top: 1px solid var(--line); padding-top: 1.35rem;
}
.review-card__foot i { color: var(--accent-strong); font-size: 1.15rem; }
.review-card__foot a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; text-decoration: none; }
.review-card__foot a:hover { color: var(--accent-strong); }

.areas {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  display: grid; gap: 1rem;
}
.areas h3 { font-size: 1.05rem; }
.area-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.area-pills li {
  font-size: .92rem; padding: .35rem .8rem; max-width: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-ui);
  color: var(--text-2); background: var(--card);
}

/* --- faq --------------------------------------------------------------- */
/* Two columns: the aside holds the heading, the right column holds the real
   interactive content. Collapses to one column below 940px. */
.faq__layout {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem);
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
}
.faq__aside { display: grid; gap: 1rem; position: sticky; top: 104px; }
.faq__aside p { color: var(--text-2); font-size: 1rem; }
@media (max-width: 940px) {
  .faq__layout { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
}
.faq { max-width: 100%; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-strong); }
.faq__item summary i { font-size: 1.25rem; color: var(--text-2); flex-shrink: 0; transition: transform .3s var(--ease); }
.faq__item[open] summary i { transform: rotate(45deg); }
.faq__answer { padding: 0 0 1.5rem; color: var(--text-2); max-width: 66ch; }
.faq__answer p + p { margin-top: .75rem; }

/* --- dark base: closing CTA + footer ----------------------------------- */
.base { background: var(--inverse-bg); color: var(--inverse-text); }

.cta {
  padding-block: clamp(3.75rem, 2rem + 6vw, 6.5rem);
  border-bottom: 1px solid var(--inverse-line);
}
.cta__grid {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.cta h2 { max-width: 17ch; }
.cta p { color: var(--inverse-text-2); max-width: 46ch; margin-top: 1rem; }
@media (max-width: 880px) { .cta__grid { grid-template-columns: 1fr; } }

.footer { padding-block: 3.5rem 2.5rem; }
.footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
}
.footer h4 {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--inverse-text-2); font-weight: 500; margin-bottom: 1rem;
  font-family: var(--font-body);
}
.footer ul { display: grid; gap: .6rem; }
.footer li { max-width: none; }
.footer a { text-decoration: none; color: var(--inverse-text-2); transition: color .2s var(--ease); }
.footer a:hover { color: var(--inverse-text); }
.footer .brand__name { color: var(--inverse-text); }
.footer .brand__suffix { color: var(--inverse-text-2); display: inline; }
.footer__about { color: var(--inverse-text-2); font-size: .96rem; margin-top: 1rem; max-width: 36ch; }
.footer__meta {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--inverse-line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .9rem; color: var(--inverse-text-2);
}
.footer__meta p { max-width: none; }
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* --- page head (inner pages) ------------------------------------------- */
.page-head { padding-block: clamp(2.75rem, 1.5rem + 4.5vw, 5rem) clamp(1.75rem, 1rem + 2.5vw, 3rem); }
/* Cap the headline in its own em-based measure, not the container's. A `ch`
   set on the wrapper is sized by the 17px body font and squeezes the h1. */
.page-head__inner { display: grid; gap: 1.1rem; max-width: 880px; justify-items: start; }
.page-head__inner h1 { max-width: 24ch; }
.page-head__inner .lede { max-width: 54ch; }

/* --- services page ----------------------------------------------------- */
.svc-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc {
  border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.svc img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg-2); }
.svc__body { padding: 1.6rem; display: grid; gap: .6rem; align-content: center; }
/* The media half fills whatever height the text half needs, and contributes
   nothing to grid row sizing. Without this the image's intrinsic height
   inflates every sibling card in the row. */
.svc__media {
  position: relative; width: 42%; flex-shrink: 0;
  align-self: stretch; background: var(--bg-2); overflow: hidden;
}
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
/* For the before/after collages, which lose their point when cropped. */
.svc__media--contain img { object-fit: contain; padding: .75rem; }
.svc__body p { color: var(--text-2); font-size: .98rem; }
.svc__list { display: grid; gap: .4rem; margin-top: .35rem; }
.svc__list li { font-size: .94rem; color: var(--text-2); display: flex; gap: .5rem; align-items: flex-start; max-width: none; }
.svc__list i { color: var(--accent-strong); font-size: 1rem; line-height: 1.5; flex-shrink: 0; }
.svc--wide { grid-column: span 2; flex-direction: row; }
.svc--wide-rev { flex-direction: row-reverse; }
.svc--wide .svc__body { padding: clamp(1.6rem, 1rem + 1.5vw, 2.25rem); flex: 1; }
@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc--wide { grid-column: span 2; }
}
@media (max-width: 700px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc--wide, .svc--wide-rev { grid-column: auto; flex-direction: column; }
  .svc__media { width: 100%; aspect-ratio: 16 / 10; }
}

/* --- verkefni (case studies) ------------------------------------------- */
/* The work photos are before/after collages with the Sparky logo set into a
   corner. Cropping them cuts panels off and clips the logo, so they are shown
   whole with object-fit: contain on a tinted plate. */
.cases { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case {
  border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.case:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.case__media {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.case__media img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: contain;
}
.case__body { padding: 1.6rem; display: grid; gap: .7rem; align-content: start; }
.case__body p { color: var(--text-2); font-size: .98rem; }
.case__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.case__tags li {
  max-width: none; font-size: .8rem; font-weight: 500;
  padding: .2rem .6rem; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-strong);
}

.case--featured { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.case--featured .case__media {
  width: 56%; border-bottom: 0; border-right: 1px solid var(--line);
  display: grid; place-items: center;
}
.case--featured .case__media img { aspect-ratio: auto; max-height: 460px; }
.case--featured .case__body { padding: clamp(1.6rem, 1rem + 1.8vw, 2.5rem); align-content: center; flex: 1; gap: .9rem; }
.case--featured h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem); }
.case--featured .case__body p { font-size: 1.04rem; }
.case--featured:hover { transform: none; }

@media (max-width: 1000px) {
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case--featured { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cases { grid-template-columns: 1fr; }
  .case--featured { flex-direction: column; }
  .case--featured .case__media {
    width: 100%; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .case--featured .case__media img { aspect-ratio: 4 / 3; max-height: none; }
}

/* --- credential row (shared) ------------------------------------------- */
/* Same .credential item as the home page, laid out three across. */
.credential-row {
  display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.credential-row .credential strong { font-size: 1.1rem; }
@media (max-width: 820px) { .credential-row { grid-template-columns: 1fr; gap: 1.5rem; } }

/* --- process ----------------------------------------------------------- */
.steps { display: grid; gap: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { display: grid; gap: .6rem; padding-top: 1.25rem; border-top: 2px solid var(--line-strong); align-content: start; }
.step:first-child { border-top-color: var(--accent); }
.step h3 { font-size: 1.1rem; }
.step p { font-size: .96rem; color: var(--text-2); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; gap: 1.5rem; } }

/* --- about page -------------------------------------------------------- */
.about__grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: start;
}
.about__copy { display: grid; gap: 1.15rem; }
.about__copy p { color: var(--text-2); }
.about__copy h2 { margin-top: .75rem; }
.about__media img {
  /* Square, to match the source collage exactly: no crop, so the panels and
     the logo watermark all survive. */
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  max-height: 580px;
  border-radius: var(--r-box); background: var(--bg-2);
}
.about__caption { margin-top: .85rem; font-size: .9rem; color: var(--text-2); }
@media (max-width: 940px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .about__media img { aspect-ratio: 16 / 10; }
}

.facts { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact { border-top: 1px solid var(--line-strong); padding-top: 1.25rem; display: grid; gap: .4rem; align-content: start; }
.fact b { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem); letter-spacing: -.02em; line-height: 1.1; }
.fact span { color: var(--text-2); font-size: .96rem; }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr; gap: 1.5rem; } }

.principles { display: grid; gap: clamp(2rem, 1rem + 2.5vw, 3rem) clamp(2rem, 1rem + 3vw, 4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.principle { display: grid; gap: .6rem; align-content: start; }
.principle h3 { display: flex; align-items: center; gap: .65rem; font-size: 1.15rem; }
.principle h3 i { color: var(--accent-strong); font-size: 1.3rem; }
.principle p { color: var(--text-2); font-size: 1rem; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; gap: 1.75rem; } }

/* --- contact page ------------------------------------------------------ */
.contact__grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: start;
}
@media (max-width: 940px) { .contact__grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.25rem; }
/* align-content: start stops a field with a hint from stretching the input
   of the field beside it in the same row. */
.field { display: grid; gap: .5rem; align-content: start; }
.field > label { font-weight: 600; font-size: .95rem; }
.field .hint { font-size: .87rem; color: var(--text-2); }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ui);
  padding: .8rem .95rem;
  font-size: 1rem;
  color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-2); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);
}
.field textarea { resize: vertical; min-height: 150px; }
.field .error { font-size: .87rem; color: #A32015; font-weight: 500; }
.field .error[hidden] { display: none; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: #A32015; }
@media (prefers-color-scheme: dark) {
  .field .error { color: #FFB4AB; }
  .field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: #FFB4AB; }
}
.field-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 580px) { .field-row { grid-template-columns: 1fr; } }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.form__submit .btn[data-busy="true"] { opacity: .65; pointer-events: none; }
.form__note { font-size: .89rem; color: var(--text-2); max-width: 32ch; }

.form__status {
  border-radius: var(--r-ui); padding: 1rem 1.15rem;
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: .96rem;
  border: 1px solid var(--line-strong); background: var(--bg-2);
}
.form__status[hidden] { display: none; }
.form__status i { font-size: 1.25rem; flex-shrink: 0; }
.form__status p { max-width: none; }
.form__status[data-tone="ok"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.form__status[data-tone="ok"] i { color: var(--accent-strong); }

.contact-card {
  border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--card); padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  display: grid; gap: 1.5rem;
}
.contact-line { display: flex; gap: .85rem; align-items: flex-start; }
.contact-line i { font-size: 1.3rem; color: var(--accent-strong); flex-shrink: 0; line-height: 1.35; }
.contact-line span { display: block; font-size: .87rem; color: var(--text-2); }
.contact-line a, .contact-line strong {
  font-family: var(--font-display); font-weight: 500; font-size: 1.06rem;
  letter-spacing: -.01em; text-decoration: none; overflow-wrap: anywhere;
}
.contact-line a:hover { color: var(--accent-strong); }

/* --- scroll reveal (MOTION_INTENSITY 4) -------------------------------- */
/* Content is visible by default. JS opts in, so no-JS never hides anything. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(20px); }
.js-reveal [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .js-reveal [data-reveal].is-in { transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}