/* --------------------------------------------------------------------------
   Self-hosted webfonts. Inter and Outfit, SIL Open Font License 1.1.
   Served from this origin on purpose: no Google Fonts CDN request means no
   third-party supply-chain surface and no EU data-transfer question.
   Both files are variable, so one file covers weights 400-600.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/outfit-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/outfit-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   Buusti Akatemia - site styles
   Brand tokens extracted from the previous Webflow build:
     --orange #ff2500 | --teal #001f24 | --alice-blue #f5fbfc | --slate #7e828f
   Radius system (locked): panels 16px, small elements 10px, buttons full pill.
   Accent system (locked): one hue. #ff2500 for marks/large display,
   #d11c00 for fills and small text (WCAG AA 5.4:1 against white).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --accent:        #ff2500;   /* brand red, marks + large display only */
  --accent-ink:    #d11c00;   /* accent as TEXT on this mode's background */
  --accent-fill:   #d11c00;   /* accent as a FILL under white text, 5.41:1 */
  --accent-wash:   #fff1ee;

  --bg:            #ffffff;
  --bg-soft:       #f5fbfc;   /* brand alice-blue */
  --bg-sink:       #e9f4f7;

  --ink:           #001f24;   /* brand teal, primary text */
  --ink-2:         #3c5a60;
  --ink-3:         #5a7278;   /* 5.11:1 on white, was #6d878d at 3.82:1 */
  --line:          #d8e8ec;
  --line-soft:     #e8f2f4;

  --on-accent:     #ffffff;

  /* dark band used once per page (CTA + footer, contiguous) */
  --band-bg:       #001f24;
  --band-ink:      #eaf6f8;
  --band-ink-2:    #9dbcc2;
  --band-line:     #10383f;

  --r-lg: 16px;
  --r-sm: 10px;

  --shadow: 0 1px 2px rgba(0, 31, 36, .04),
            0 12px 32px -12px rgba(0, 31, 36, .14);
  --shadow-lift: 0 2px 4px rgba(0, 31, 36, .05),
                 0 24px 48px -16px rgba(0, 31, 36, .22);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --shell: 1220px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);

  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Brand red survives on a dark ground: #ff2500 on #001417 is 5.0:1, so the
       identity stays exact instead of drifting to salmon. The fill stays the
       deep variant because white text on it must still clear 4.5:1. */
    --accent:      #ff2500;
    --accent-ink:  #ff2500;
    --accent-fill: #d11c00;
    --accent-wash: #2a1410;

    --bg:          #001417;
    --bg-soft:     #00191d;
    --bg-sink:     #002026;

    --ink:         #e9f6f8;
    --ink-2:       #a8c6cb;
    --ink-3:       #7e9ba1;
    --line:        #0e3138;
    --line-soft:   #0a262c;

    --band-bg:     #000f12;
    --band-ink:    #e9f6f8;
    --band-ink-2:  #93b3b9;
    --band-line:   #11353c;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4),
              0 12px 32px -12px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45),
                   0 24px 48px -16px rgba(0, 0, 0, .7);

    color-scheme: dark;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  /* Long Finnish and Swedish compounds must be allowed to break. hyphens:auto
     needs a locale dictionary the browser may not ship, so anywhere is the
     guarantee and hyphens is the nicety on top. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

p { margin: 0; text-wrap: pretty; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: #fff; }

/* Grid and flex children default to min-width:auto, so one long word can push
   a track wider than its container. Opt every layout child out of that. */
.split > *, .facts > *, .svc-strip > *, .people > *,
.footer__grid > *, .contact-grid > *, .detail-list > *,
.hero__grid > *, .band-cta__grid > *, .svc-block__head > *,
.person > *, .checks > * { min-width: 0; }

/* ---------- Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--soft { background: var(--bg-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Type scale ---------- */
.display {
  font-size: clamp(2.5rem, 6.2vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 600;
}

.h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  letter-spacing: -.03em;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 48ch;
}

.body-muted { color: var(--ink-2); max-width: 65ch; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1.25rem;
}

.rule-accent {
  width: 56px;
  height: 3px;
  background: var(--accent);
  border: 0;
  margin: 0 0 1.75rem;
  border-radius: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: .875rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s var(--ease),
              border-color .25s var(--ease),
              color .25s var(--ease),
              transform .15s var(--ease),
              box-shadow .25s var(--ease);
}
.btn i { font-size: 1.05em; }

.btn--primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 8px 20px -8px rgba(209, 28, 0, .55);
}
.btn--primary:hover {
  background: #b81800;
  box-shadow: 0 12px 26px -8px rgba(209, 28, 0, .6);
}
.btn--primary:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink-3); background: var(--bg-soft); }
.btn--ghost:active { transform: translateY(1px); }

.btn--on-band {
  background: var(--accent-fill);
  color: var(--on-accent);
}
.btn--on-band:hover { background: #b81800; }

.btn--band-ghost {
  background: transparent;
  color: var(--band-ink);
  border-color: var(--band-line);
}
.btn--band-ghost:hover { border-color: var(--band-ink-2); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--accent-ink);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.textlink:hover { border-color: currentColor; gap: .6rem; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

@supports not (backdrop-filter: blur(1px)) {
  .header { background: var(--bg); }
}

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

.brand { display: flex; align-items: center; gap: .625rem; }
.brand img { width: 34px; height: 34px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.nav { display: flex; align-items: center; gap: .25rem; }

.nav__link {
  position: relative;
  padding: .5rem .875rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--bg-soft); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .875rem;
  right: .875rem;
  bottom: .125rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.header__cta { display: inline-flex; }

/* The in-drawer CTA is for the mobile menu only; the desktop one lives
   outside .nav. Exactly one is visible at any width. */
.nav > .btn { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-size: 1.25rem;
  cursor: pointer;
}

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__link { padding: .875rem .25rem; font-size: 1.0625rem; }
  .nav__link[aria-current="page"]::after { left: .25rem; right: auto; width: 20px; }
  .nav > .btn { display: inline-flex; margin-top: .75rem; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 8vw, 6.5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero__title { max-width: 14ch; }
.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__lede { margin-top: 1.5rem; }

/* Offset duo composition built from the two real founder portraits. */
.duo {
  position: relative;
  padding-bottom: 3.5rem;
  padding-right: 2.5rem;
}
.duo__frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sink);
  box-shadow: var(--shadow-lift);
}
.duo__frame picture { display: block; }
.duo__frame img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; }
.duo__frame--back {
  width: 78%;
  margin-left: auto;
}
.duo__frame--front {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54%;
  border: 6px solid var(--bg);
  border-radius: calc(var(--r-lg) + 4px);
}
.duo__badge {
  position: absolute;
  right: 0;
  top: 8%;
  background: var(--accent-fill);  /* not --accent: white text needs 4.5:1 */
  color: #fff;
  border-radius: var(--r-sm);
  padding: .875rem 1rem;
  max-width: 170px;
  box-shadow: var(--shadow-lift);
}
.duo__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -.03em;
}
.duo__badge span {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .92);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { max-width: none; }

  /* The offset overlap is a desktop composition. Below 900px there is not
     enough width for it: the frames shrink to ~200px and the badge lands on
     top of a face. Two equal portraits with the badge underneath instead. */
  .duo {
    max-width: 560px;
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .duo__frame--back,
  .duo__frame--front {
    position: static;
    width: auto;
    margin: 0;
    border: 0;
    border-radius: var(--r-lg);
  }
  .duo__frame img { aspect-ratio: 4 / 5; }

  .duo__badge {
    position: static;
    grid-column: 1 / -1;
    max-width: none;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.125rem;
    box-shadow: none;
  }
  .duo__badge strong { font-size: 1.5rem; }
  .duo__badge span { margin-top: 0; }
}

@media (max-width: 340px) {
  .duo { grid-template-columns: 1fr; max-width: 260px; }
  .duo__frame img { aspect-ratio: 5 / 4; object-position: center 25%; }
}

/* ---------- Facts strip ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(2rem, 4vw, 2.75rem);
}
.fact__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
}
.fact__label {
  margin-top: .625rem;
  font-size: 1rem;
  color: var(--ink-2);
  max-width: 26ch;
}

@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- Services strip (4-up, hairline separated, no card boxes) ---------- */
.svc-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.svc-strip > * + * { border-left: 1px solid var(--line); }

.svc {
  display: block;
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  transition: transform .3s var(--ease);
}
.svc:first-child { padding-left: 0; }
.svc:last-child { padding-right: 0; }
.svc:hover { transform: translateY(-4px); }

.svc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 1.375rem;
  margin-bottom: 1.125rem;
}
.svc__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.svc__desc {
  display: block;
  margin-top: .5rem;
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.55;
}

@media (max-width: 940px) {
  .svc-strip { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 0; }
  .svc-strip > * + * { border-left: 0; }
  .svc-strip > :nth-child(even) {
    border-left: 1px solid var(--line);
    padding-left: clamp(1rem, 4vw, 2rem);
  }
  .svc { padding-inline: 0; }
  .svc:last-child { padding-left: clamp(1rem, 4vw, 2rem); }
}
@media (max-width: 560px) {
  .svc-strip { grid-template-columns: 1fr; gap: 2rem; }
  .svc-strip > :nth-child(even) { border-left: 0; padding-left: 0; }
  .svc:last-child { padding-left: 0; }
}

/* ---------- Testimonials ----------
   Two quotes side by side, separated by a hairline rather than boxed into
   cards, so the page keeps one card system instead of inventing another. */
.quotes__heading { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.quotes > * + * {
  border-left: 1px solid var(--line);
  padding-left: clamp(2rem, 5vw, 4rem);
}

.quote-card { margin: 0; }

.quote__mark {
  font-size: 2rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1rem;
}
.quote__body {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--ink);
}
.quote__by {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .125rem;
}
.quote__name { font-weight: 600; font-size: 1rem; }
.quote__role { font-size: .9375rem; color: var(--ink-3); }

@media (max-width: 820px) {
  .quotes { grid-template-columns: 1fr; gap: 2.5rem; }
  .quotes > * + * {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 2.5rem;
  }
}

/* ---------- People ---------- */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.person {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: start;
}
.person__photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sink);
}
.person__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person__name { font-size: 1.25rem; }
.person__role {
  margin-top: .4rem;
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.person__mail {
  display: inline-block;
  margin-top: .875rem;
  font-size: .875rem;
  color: var(--accent-ink);
  font-weight: 500;
  word-break: break-word;
  border-bottom: 1px solid transparent;
}
.person__mail:hover { border-color: currentColor; }

@media (max-width: 820px) { .people { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .person { grid-template-columns: 1fr; }
  .person__photo { max-width: 180px; }
}

/* ---------- Split section (text + panel) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

.media-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-sink);
}
.media-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Service detail blocks (palvelut) ---------- */
.svc-block { border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.svc-block + .svc-block { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

.svc-block__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
/* Sits beside a 52px icon inside a half-width column, so it gets its own
   ceiling: at the full .h2 size a long compound breaks to an orphan letter. */
.svc-block__head .h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.svc-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--accent-fill);
  color: #fff;
  font-size: 1.5rem;
}

/* Grouped 2-column list, avoids one long bulleted run */
.checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .875rem clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1.75rem;
}
.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .75rem;
  align-items: start;
  font-size: 1rem;
  color: var(--ink);
}
.checks i {
  color: var(--accent-ink);
  font-size: 1rem;
  margin-top: .3rem;
}
@media (max-width: 640px) { .checks { grid-template-columns: 1fr; } }

.note-card {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.6;
}
.note-card strong { color: var(--ink); font-weight: 600; }
.section--soft .note-card { background: var(--bg); }

/* ---------- Contact actions ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 2.75rem;
}
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  display: block;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  transition: border-color .25s var(--ease),
              transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.contact-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.contact-card:active { transform: translateY(0); }
.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}
.contact-card__label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.025em;
  margin-top: .375rem;
  line-height: 1.2;
  word-break: break-word;
}
.contact-card__hint { display: block; margin-top: .625rem; font-size: 1rem; color: var(--ink-2); }

/* ---------- Detail list (address / business id) ---------- */
.detail-list {
  display: grid;
  gap: 1.5rem;
  /* An email is ~262px at this size; a narrower track forces an ugly
     mid-word break like buustiakatemi/a.fi. */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.detail__key {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.detail__val {
  margin-top: .5rem;
  font-size: 1.0625rem;
  color: var(--ink);
  /* Email addresses are long unbreakable strings and will push a grid track
     wider than the viewport otherwise. */
  overflow-wrap: anywhere;
}
.detail__val a { border-bottom: 1px solid var(--line); }
.detail__val a:hover { border-color: var(--accent); }

/* ---------- Prose (meista) ---------- */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.25rem; }
.prose p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.75; }
.prose p:first-of-type { color: var(--ink); font-size: 1.1875rem; }

/* ---------- Dark band: CTA + footer ---------- */
.band {
  background: var(--band-bg);
  color: var(--band-ink);
}
.band-cta { padding-block: clamp(4rem, 8vw, 6rem); }
.band-cta__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.band-cta h2 { color: var(--band-ink); }
.band-cta p { color: var(--band-ink-2); margin-top: 1rem; max-width: 46ch; }
.band-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.band-cta__actions .btn { flex: 1 1 auto; }

@media (max-width: 900px) {
  .band-cta__grid { grid-template-columns: 1fr; }
}

.footer { border-top: 1px solid var(--band-line); padding-block: clamp(3rem, 6vw, 4rem) 2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer .brand__name { color: var(--band-ink); }
.footer__about {
  margin-top: 1rem;
  color: var(--band-ink-2);
  font-size: 1rem;
  max-width: 34ch;
  line-height: 1.65;
}
.footer__title {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--band-ink-2);
  margin-bottom: 1rem;
}
.footer__list { display: grid; gap: .625rem; }
.footer__list a {
  color: var(--band-ink);
  font-size: 1rem;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.footer__list a:hover { border-color: var(--accent); }

.social { display: flex; gap: .5rem; margin-top: 1.5rem; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--band-line);
  border-radius: var(--r-sm);
  color: var(--band-ink);
  font-size: 1.125rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.social a:hover { border-color: var(--accent); background: rgba(255, 37, 0, .1); }

.footer__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--band-line);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  color: var(--band-ink-2);
  font-size: .875rem;
}

/* ---------- Page header (inner pages) ---------- */
.page-head { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.page-head .lede { margin-top: 1.5rem; }

/* ---------- Motion: scroll reveal ----------
   Content is visible by default. The hidden start state is scoped to
   html.reveal-ready, a class set by an inline head script only when the
   browser can actually run the reveal. If the script never runs, fails, or
   the user prefers reduced motion, every section simply renders as-is. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
.reveal-ready [data-reveal].reveal-instant { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .svc:hover, .contact-card:hover { transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Tinted panel (service detail right column) ---------- */
.panel {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.section--soft .panel { background: var(--bg); }
.panel__title {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
}
.panel .checks { grid-template-columns: 1fr; margin-top: 0; }

/* ---------- Accent feature block ---------- */
.feature-accent {
  background: var(--accent-fill);  /* not --accent: white text needs 4.5:1 */
  border-radius: var(--r-lg);
  color: #fff;
  padding: clamp(2.25rem, 5vw, 3.5rem);
}
.feature-accent h2, .feature-accent h3 { color: #fff; }
.feature-accent p { color: rgba(255, 255, 255, .92); }

.statements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.statements p {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: #fff;
}
@media (max-width: 640px) { .statements { grid-template-columns: 1fr; } }

.feature-accent .textlink {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .5);
}
.feature-accent .textlink:hover { border-bottom-color: #fff; }

/* ---------- Icons ----------
   Official Phosphor Icons (MIT) inlined as an SVG sprite in each page.
   Sized in em so the existing font-size rules on icon containers still drive
   them. No icon webfont, no CDN request, works from file:// too. */
.icon-sprite { display: none; }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.135em;
  fill: currentColor;
  flex: none;
}

.btn .icon { font-size: 1.05em; }
.checks .icon { color: var(--accent-ink); font-size: 1rem; margin-top: .34rem; }

/* ---------- <picture> wrappers ----------
   picture is an inline box by default; make it behave like the img it wraps. */
picture { display: block; }
.duo__frame picture img,
.media-frame picture img,
.person__photo picture img,
.svc-block__banner picture img { width: 100%; }

/* ---------- Language switcher ---------- */
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
}
.langswitch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 32px;
  padding: 0 .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-3);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.langswitch__item:hover { color: var(--ink); background: var(--bg-soft); }
.langswitch__item[aria-current="true"] { color: var(--on-accent); background: var(--accent-fill); }

.langswitch--mobile { display: none; }
@media (max-width: 880px) {
  .langswitch--desktop { display: none; }
  .langswitch--mobile { display: inline-flex; align-self: flex-start; margin-top: 1rem; }
}

/* ---------- People: stacked (home) vs card (about) ---------- */
.people--stack { grid-template-columns: 1fr; }

.person--card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.person--card .person__photo { border-radius: 0; max-width: none; }
.person--card .person__photo img { aspect-ratio: 4 / 5; object-position: center 22%; }
.person--card .person__meta { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.person--card .person__name { font-size: clamp(1.25rem, 2vw, 1.5rem); }

/* ---------- Media frames ---------- */
.media-frame--wide img { aspect-ratio: 4 / 3; object-position: center 40%; }

.svc-block__banner {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sink);
  box-shadow: var(--shadow);
}
.svc-block__banner img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.checks--single { grid-template-columns: 1fr; }

.svc-block__icon--onaccent { background: rgba(255, 255, 255, .18); }

/* Narrow phones: a 20-character Finnish compound at 1.9rem cannot fit 350px. */
@media (max-width: 480px) {
  .h2 { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  .svc-block__head { gap: .75rem; }
  .svc-block__icon { width: 44px; height: 44px; font-size: 1.25rem; }
}

.person__bio {
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ---------- Utilities ----------
   These exist so no element needs an inline style attribute, which lets
   the Content-Security-Policy keep style-src 'self' with no unsafe-inline. */
.u-delay-a { --reveal-delay: 100ms; }
.u-delay-b { --reveal-delay: 120ms; }
.u-mt-sm { margin-top: 1.25rem; }
.u-mt-md { margin-top: 1.5rem; }
.u-mt-lg { margin-top: 1.75rem; }
.u-mt-xl { margin-top: 2rem; }
.u-mt-section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.u-pt-0 { padding-top: 0; }
.u-measure-52 { max-width: 52ch; }
.u-measure-17 { max-width: 17ch; }
.u-measure-16 { max-width: 16ch; }
.u-measure-14 { max-width: 14ch; }
.u-gap-sm { gap: .875rem; }
.u-no-border-top { border-top: 0; }

/* The services photo is 3:2, which keeps the full 960px of the source. */
.media-frame--photo img { aspect-ratio: 3 / 2; }

/* Company name in an attribution stays quiet until hovered. */
.quote__link {
  color: inherit;
  border-bottom: 1px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.quote__link:hover { color: var(--accent-ink); border-bottom-color: currentColor; }