/* Hallmark · genre: modern-minimal · nav: N5 floating-pill · footer: Ft1 mast-headed · design-system: design.md · designed-as-app
 * Shared chrome identity for all pages (2026-07). This file is the single,
 * SELF-CONTAINED source of truth for nav, footer, quote-box and paper — the
 * per-page embedded styles contain no chrome rules at all since the dead-CSS
 * cleanup. Loaded AFTER each page's embedded <style>. See /design.md. */

/* ===== Self-hosted brand fonts (downloaded from Google Fonts, OFL-licensed) ===== */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/Archivo-700-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: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/Archivo-700-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: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/Archivo-800-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: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/Archivo-800-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: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('../assets/fonts/Archivo-900-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: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('../assets/fonts/Archivo-900-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: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/DMSans-400i-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: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/DMSans-400i-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: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/DMSans-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: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/DMSans-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: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/DMSans-500-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: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/DMSans-500-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: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/DMSans-700-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: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/DMSans-700-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; }

/* Canonical values for every token the chrome uses — identical to the per-page
   :root blocks, re-declared here so a page missing one can never break the
   shared chrome. */
:root {
    --paper: #FDFCFE; --white: #FFFFFF;
    --primary: #7B4397; --primary-dark: #5E2E78;
    --accent: #A4D233; --accent-dark: #8AB920;
    --dark: #2D1B3D;
    --gray-100: #F5F3F7; --gray-200: #E5E0EB; --gray-400: #A89DB8;
    --gray-600: #675A7C; --gray-700: #5A4D6E; --gray-800: #2D2D44;
    --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
    --radius: 0.5rem;
    --shadow-lg: 0 10px 15px -3px rgba(45, 27, 61, 0.1), 0 4px 6px -4px rgba(45, 27, 61, 0.1);
    --transition: 200ms ease;
}
body { background: var(--paper); }
body.canvas-gray { background: var(--gray-100); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== N5 floating pill nav ===== */
.header {
    position: fixed; z-index: 1000;
    top: var(--space-4); left: 50%; right: auto; transform: translateX(-50%);
    max-width: min(760px, calc(100vw - 2rem)); width: max-content;
    border-radius: 999px;
    background: rgba(253, 252, 254, 0.82);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid var(--gray-200);
    box-shadow: 0 8px 24px -12px rgba(45, 27, 61, 0.25);
}
.header .container { width: auto; max-width: none; padding: 0 var(--space-4); }
.header .header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; gap: var(--space-6); }
.header .logo img { height: 34px; width: auto; display: block; }
.nav { display: none; }
.header .nav-list { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.header .nav-list li { margin: 0; padding: 0; line-height: 1.5; }
.header .nav-link { display: inline-block; font-size: 0.9rem; font-weight: 500; line-height: 1.5; color: var(--gray-700); padding: var(--space-2) 0; position: relative; white-space: nowrap; }
/* Headings laid out as flex (an icon beside the text) keep their text on one
   line, and the anonymous flex item holding it will not shrink. Let it wrap. */
h1, h2, h3, h4, h5, h6 { flex-wrap: wrap; }

/* `anywhere` rather than `break-word` for headings: only `anywhere` shrinks an
   element's intrinsic minimum, which is what lets a flex item holding one very
   long compound ("avainsanakannibalismista") narrow to its column at all. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }

/* A button is inline-flex and sizes to its label; Finnish call-to-action text
   ("Lue lisää sähköpostiturvallisuudesta") is longer than a phone is wide. */
.btn, button { max-width: 100%; }

/* Grid and flex items default to min-width:auto, so they refuse to shrink
   below their content. That is how a form, or a table that is supposed to
   scroll inside its own wrapper, ends up widening the whole page on a phone
   instead. Whether it happens depends on the font, which is why CI saw it and
   a local run did not. */
.contact-info,
.contact-form-wrapper,
[class*="table-wrapper"],
[class*="table-wrap"] { min-width: 0; max-width: 100%; }

/* A table cannot shrink below its content. Below the tablet breakpoint let it
   scroll in place rather than push the page sideways. */
@media (max-width: 640px) {
  table { display: block; max-width: 100%; overflow-x: auto; }
}

/* A form control's default intrinsic width is font-dependent and can exceed a
   narrow column; nothing on a page should be able to push it wider. */
input, select, textarea, button { max-width: 100%; }

/* Cloudflare Turnstile renders a fixed 300 px widget that no CSS on our side
   can talk it out of. The contact form sits inside 1rem of container padding
   and 2rem of card padding, so its column is the viewport less 96 px — 224 px
   on a 320 px phone. The widget therefore ended 28 px past the right edge and
   scrolled the whole page sideways.
   `zoom` and not `transform: scale()` because only zoom shrinks the box in
   layout; a transform would leave the original 65 px of height reserved and a
   gap under the widget. 0.72 puts it at 216 px, inside the column at the
   320 px floor, and still wider than Turnstile's own compact size. */
@media (max-width: 400px) {
  .cf-turnstile { zoom: 0.72; }
}

/* Finnish compounds ("Hakukoneoptimointiopas") and raw URLs are longer than a
   320 px column, and an unbreakable word pushes the whole page wider than the
   viewport. Breaking only happens when the word would otherwise overflow, so
   nothing else about the typography changes. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, figcaption, a,
blockquote, td, th, span, strong, em, div { overflow-wrap: break-word; }

/* The current page is marked with aria-current, applied by the CMS at publish.
   The second selector keeps the old behaviour for dropdown children: the page
   link lives inside .nav-dropdown, so the parent "Palvelut" item is what
   should light up in the visible menu. (.active elsewhere is JS open/closed
   state for the mobile menu and forms, and is unrelated.) */
.header .nav-link:hover,
.header .nav-link[aria-current="page"],
.header .nav-item:has(a[aria-current="page"]) > .nav-link { color: var(--primary); }
.header .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width var(--transition); }
.header .nav-link:hover::after,
.header .nav-link[aria-current="page"]::after,
.header .nav-item:has(a[aria-current="page"]) > .nav-link::after { width: 100%; }
.header .nav-cta { background: var(--accent); padding: var(--space-2) var(--space-4); border-radius: 999px; font-weight: 700; white-space: nowrap; }
.header .nav-cta:hover { background: var(--accent-dark); }
.header .nav-cta::after { display: none; }
.header .nav-link.nav-cta, .header .nav-link.nav-cta:hover { color: var(--dark); }

/* dropdown */
.nav-item { position: relative; }
.nav-dropdown { position: absolute; top: 100%; left: 50%; min-width: 220px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-2) 0; margin: 0; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(10px); transition: opacity var(--transition), visibility var(--transition), transform var(--transition); list-style: none; }
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown li { margin: 0; padding: 0; line-height: 1.5; }
.nav-dropdown a { display: block; padding: var(--space-2) var(--space-4); color: var(--gray-700); font-size: 0.9rem; }
.nav-dropdown a:hover { background: var(--gray-100); color: var(--primary); }

/* mobile */
.menu-toggle { display: flex; flex-direction: column; gap: 5px; padding: var(--space-2); background: none; border: none; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--dark); }
.mobile-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--white); padding: calc(34px + var(--space-8) + var(--space-6)) var(--space-4) var(--space-4); overflow-y: auto; z-index: 900; }
.mobile-nav.active { display: block; }
.mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.mobile-nav-list a { display: block; padding: var(--space-3) 0; font-size: 1.1rem; color: var(--dark); border-bottom: 1px solid var(--gray-200); }
.mobile-nav-list .submenu { padding-left: var(--space-4); list-style: none; }
.mobile-nav-list .submenu a { font-size: 1rem; color: var(--gray-700); }
.mobile-nav-cta { display: block; text-align: center; background: var(--accent); color: var(--dark); border-radius: var(--radius); border-bottom: none !important; margin: var(--space-2) 0 var(--space-4); font-weight: 700; }
@media (min-width: 1024px) { .nav { display: block; } .menu-toggle { display: none; } }

/* ===== quote-box: hairline + accent-square heading marker ===== */
.quote-box { border: 1px solid var(--gray-200); }
.quote-box h5 { display: flex; align-items: center; gap: var(--space-3); }
.quote-box h5::before { content: ''; width: 10px; height: 10px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }

/* ===== Ft1 mast-headed footer ===== */
.footer { background: var(--dark); color: var(--gray-400); padding: var(--space-12) 0 var(--space-8); }
.footer-mast { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-8); }
.footer-mast img { height: 44px; width: auto; display: block; filter: brightness(0) invert(1); }
.footer-tagline { font-size: 0.95rem; color: var(--gray-400); margin: 0; max-width: 52ch; }
.footer-links-row { font-size: 0.9rem; line-height: 2.1; color: var(--gray-400); margin-bottom: var(--space-8); }
.footer-links-row a { color: var(--gray-400); white-space: nowrap; }
.footer-links-row a:hover { color: var(--accent); }
.footer-meta { font-size: 0.85rem; color: var(--gray-400); margin-bottom: var(--space-2); }
.footer-meta a { color: var(--gray-400); text-decoration: underline; }
.footer-meta a:hover { color: var(--accent); }
p.footer-meta:nth-of-type(2) { border-top: 1px solid var(--gray-800); padding-top: var(--space-6); margin-top: var(--space-6); }