/*
Theme Name:   DataProFirst
Theme URI:    https://dataprofirst.com/
Author:       Datenschutz Campuzano Miranda
Author URI:   https://dataprofirst.com/
Description:  Classic WordPress theme for DataProFirst — external Data Protection Officers (GDPR, NIS2, EU AI Act). Ported 1:1 from the approved "Modern Privacy Authority" prototype.
Version:      0.4.3
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  dataprofirst
Tags:         business, one-column, custom-menu, translation-ready, blog
*/

/* ==========================================================================
   SELF-HOSTED FONTS
   The privacy policy promises that no visitor data reaches a third-party font
   CDN, so the fonts are served from this theme, never from Google Fonts.
   The .woff2 files live in assets/fonts/ — see assets/fonts/README.md.
   ========================================================================== */
@font-face {
  font-family: 'DM Serif Display';
  src: url('assets/fonts/dm-serif-display-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('assets/fonts/dm-serif-display-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ==========================================================================
   DataProFirst — "Modern Privacy Authority" design system.
   Built from the approved design-system board (design-system-modern-privacy.html)
   and the real site content (services.html, team.html, about.html, i18n.js).

   Structure mirrors how this would ship as WordPress components:
   global (header/footer/buttons), reusable (service-row, faq-item, tier-card,
   team-card, regulatory-item), and editable CMS content (headings, copy).
   ========================================================================== */

:root {
  --soft-white: #F5F3EF;
  --white: #FFFFFF;
  --deep-blue: #102A56;
  --blue: #1E5FA8;
  --blue-hover: #102A56;
  --blue-bright: #6DB9FF;
  --blue-soft: #EAF1FB;
  --blue-soft-strong: #C9D9EF;
  --border-soft: #D9E2F0;
  --border-input: #7085A2;
  --border-blue: #7398C7;
  --mist: #ADC0DB;
  --ink: #14233B;
  --ink-muted: #4C617D;
  --ink-faint: #60728B;
  --success: #2563AB;
  --warning: #8A6608;
  --risk: #B0432F;
  --shadow-xs: 0 1px 2px rgba(16,42,86,0.05);
  --shadow-card: 0 1px 2px rgba(16,42,86,0.04), 0 10px 28px rgba(16,42,86,0.05);
  --shadow-hover: 0 4px 10px rgba(16,42,86,0.07), 0 16px 32px rgba(16,42,86,0.08);
  --shadow-raised: 0 2px 6px rgba(16,42,86,0.06), 0 18px 44px rgba(16,42,86,0.09);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --container: 1240px;
}

/* Fonts are self-hosted from assets/fonts/ (see the @font-face block above).
   No request ever leaves the visitor's browser for a font CDN. */

* { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
/* Anything the scripts hide with the hidden attribute stays hidden, even where
   its own display rule (flex, grid, inline-flex) would otherwise win. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--soft-white);
  color: var(--ink);
  font-family: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

h1, h2, h3, h4 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; color: var(--ink); }
h1 em, h2 em { font-style: italic; color: var(--blue); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; }
.skip-link:focus { left: 16px; top: 16px; background: var(--deep-blue); color: var(--soft-white); padding: 12px 20px; border-radius: var(--radius-sm); }

/* --- eyebrow / kicker / pill --------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue-soft); color: var(--blue);
  border-radius: 999px; padding: 7px 16px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-soft); color: var(--blue);
  border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.6px; white-space: nowrap;
}

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: 'Manrope', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600;
  text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn svg { flex: none; }
.btn-primary { background: var(--blue); color: var(--soft-white); border-color: var(--blue); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-soft { background: var(--blue-soft-strong); color: var(--blue-hover); border-color: var(--blue-soft-strong); }
.btn-soft:hover { background: #B7CEEA; color: var(--deep-blue); border-color: #B7CEEA; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-input); }
.btn-outline:hover { background: var(--white); color: var(--ink); border-color: var(--blue); }
.btn-light { background: var(--soft-white); color: var(--deep-blue); border-color: var(--soft-white); }
.btn-light:hover { background: var(--white); }
.btn-ghost-d { background: transparent; color: var(--soft-white); border-color: #7398C7; }
.btn-ghost-d:hover { background: rgba(251,252,251,0.08); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn-ghost-d:focus-visible, .btn-light:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.lnk { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--blue); text-decoration: none; }
.lnk:hover { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.lnk svg { transition: transform 0.2s ease; }
.lnk:hover svg { transform: translateX(3px); }
.lnk-d { color: var(--blue-bright); }

/* --- header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,243,239,0.92); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
/* Vertical padding only: a `padding: 18px 0` shorthand here used to wipe out the
   .container side padding, so the logo touched the window edge below 1280px. */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
/* The bar stays in the 1240px column, lined up with the page content below it.
   That column holds 1176px, and with the language switcher and a second
   language in the bar the brand, links and *two* buttons need more — measured
   against the real fonts, 1226px in English, 1313px in German, 1356px in
   Spanish. So the header carries one button, not two: the second one is hidden
   just below, and still appears in the hero and in the menu panel. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--deep-blue); display: grid; place-items: center; flex: none; }
.wm { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
.wm b { font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; font-weight: 400; letter-spacing: -0.2px; color: var(--ink); }
/* "Pro" keeps its slightly larger size, but the same colour as the rest of the
   wordmark — the two-tone version was dropped at the client's request. */
.wm b .pro { color: inherit; font-style: normal; font-size: 1.1em; }

.main-nav { display: flex; align-items: center; gap: 24px; }
/* Keep each label on one line: "Services & Pricing" breaking in two made
   the header 30px taller once the language switcher took its space. */
.main-nav > a { white-space: nowrap; }
.main-nav > a { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink-muted); padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.main-nav > a:hover, .main-nav > a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .btn { min-height: 44px; padding: 11px 20px; white-space: nowrap; }
/* --- language switcher ---------------------------------------------------- */
/* Three short codes rather than flags: flags stand for countries, not
   languages, and Spanish and German are each spoken in many. */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch-link {
  display: inline-grid; place-items: center; min-width: 34px; min-height: 34px;
  padding: 0 8px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--ink-muted); text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switch-link:hover { background: var(--blue-soft); color: var(--blue); }
.lang-switch-link.is-current { background: var(--blue-soft); color: var(--blue); }
.lang-switch-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lang-switch-desktop { margin-right: 4px; }
/* "Book a conversation" leaves the top bar — see the widths above. It is the
   secondary of the two, and the hero offers it directly under the headline. */
.btn-secondary-desktop { display: none; }
/* In the mobile menu the switcher sits with the links, not in the top bar. */
.main-nav .lang-switch { display: none; }
/* The bar has to fit the widest language, not English. Measured against the
   real stylesheet and fonts, with one button in the bar it needs:
       English 1025px, German 1101px, Spanish 1164px of content,
   so Spanish stops fitting below a 1228px viewport and the menu button takes
   over at 1240px. (It was 1264px, measured on English with two buttons, which
   clipped the right-hand one in German and Spanish on a 1400px screen.) */
@media (max-width: 1240px) {
  .lang-switch-desktop { display: none; }
  .main-nav .lang-switch { display: flex; margin: 14px 0 4px; }
  .main-nav .lang-switch-link { min-width: 44px; min-height: 44px; }
}

.nav-toggle { display: none; }
.nav-cta { display: none; }

/* Header only: below 1240px the links no longer fit on one line in Spanish —
   see the measurements above. The menu panel carries the links, both buttons
   and the language switcher, so nothing is lost.
   Page layout keeps its own 980px breakpoints further down. */
@media (max-width: 1240px) {
  /* The panel hangs off the bottom of the (sticky) header — top: 100% — so it
     sits flush under it whatever height the header has. It used to be pinned at
     a guessed 68px, which left a see-through strip under the 45px phone header.
     --dpf-header-h is set by assets/js/main.js; 68px is only a fallback. */
  .main-nav { position: absolute; top: 100%; right: 0; left: 0; border-top: 1px solid var(--border-soft); height: calc(100vh - var(--dpf-header-h, 68px)); height: calc(100dvh - var(--dpf-header-h, 68px)); background: var(--soft-white); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 24px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; overflow-y: auto; }
  .main-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .main-nav > a { padding: 14px 4px; border-bottom: 1px solid var(--border-soft); }
  .nav-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  /* Just the bars, blending into the header: no border, no background. The
     button stays 44px so it's easy to tap, and is pulled right so the bars line
     up with the page edge rather than floating 13px in. */
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm);
    border: 0; background: transparent; flex: none; margin-right: -13px;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 1px; position: relative; transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle span::before { position: absolute; top: -6px; }
  .nav-toggle span::after { position: absolute; top: 6px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  .header-actions .btn-secondary-desktop,
  .header-actions .btn-primary-desktop { display: none; }
}

/* --- section scaffolding --------------------------------------------------- */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-dark { background: var(--deep-blue); color: var(--soft-white); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--soft-white); }
.section-dark h1 em, .section-dark h2 em { color: var(--blue-bright); }
.section-dark .ink-muted-d { color: var(--mist); }
.section-soft { background: var(--blue-soft); }

.engagement-photo {
  position: relative;
  background-image: url('assets/images/consulting-bg2.webp');
  background-size: cover;
  background-position: center 30%;
}
.engagement-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(234,241,251,0.68);
}
.engagement-photo > .container { position: relative; z-index: 1; }
.engagement-photo .sec-head p, .engagement-photo .tiers-note { color: var(--ink); }

.sec-head { margin-bottom: 44px; }
.sec-head h2 { font-size: 40px; line-height: 1.15; letter-spacing: -0.4px; }
.sec-head p { font-size: 16px; color: var(--ink-muted); margin-top: 10px; max-width: 60ch; }
.section-dark .sec-head p { color: var(--mist); }

.sub-label { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; display: block; }

/* Deliberately unequal grids. */
.split-60-40 { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 64px; align-items: center; }
.split-40-60 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 64px; align-items: start; }
.split-55-45 { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 56px; align-items: start; }

@media (max-width: 980px) {
  .split-60-40, .split-40-60, .split-55-45 { grid-template-columns: 1fr; gap: 40px; }
}

.card { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 30px; box-shadow: var(--shadow-card); }
.card-soft { background: var(--blue-soft); border-radius: var(--radius-md); padding: 30px; }
.card-dark { background: var(--deep-blue); color: var(--soft-white); border-radius: var(--radius-md); padding: 30px; }

/* --- trust strip ------------------------------------------------------------ */
.trust-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-strip span { display: inline-flex; align-items: center; gap: 9px; background: var(--white); border: 1px solid var(--border-soft); border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--ink-muted); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.trust-strip span:hover { background: var(--blue-soft); border-color: var(--blue-soft-strong); color: var(--ink); transform: translateY(-2px); }
.trust-strip span i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }

/* --- quick facts strip ------------------------------------------------------ */
.facts-strip { border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.facts-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.facts-track {
  display: flex; align-items: flex-start; width: max-content;
  animation: facts-scroll 26s linear infinite;
}
.facts-marquee:hover .facts-track { animation-play-state: paused; }
.fact-item { flex: 0 0 auto; width: 260px; text-align: center; padding: 0 12px; }
/* The numbers read as body text, so they take --ink like the rest of it. The
   accent blue is reserved for the one the reader is on — hovering also pauses
   the marquee, so that is the "selected" item. It used to be the other way
   round, with every number in the accent and the hover going dark. */
.fact-num { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; color: var(--ink); line-height: 1; margin-bottom: 10px; display: inline-block; transition: transform 0.2s ease, color 0.2s ease; }
.fact-item:hover .fact-num { transform: scale(1.08); color: var(--blue); }
.fact-label { font-size: 13px; color: var(--ink-muted); line-height: 1.5; max-width: 22ch; margin: 0 auto; }

@keyframes facts-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 700px) { .fact-item { width: 200px; } }

@media (prefers-reduced-motion: reduce) {
  .facts-track { animation: none; }
}

/* --- hero -------------------------------------------------------------- */
.hero { padding: 88px 0 64px; }
.hero-eyebrow { margin-bottom: 24px; }
.hero h1 { font-size: 64px; line-height: 1.08; letter-spacing: -0.8px; }
.hero .lead { font-size: 19px; line-height: 1.65; color: var(--ink-muted); margin: 24px 0 32px; max-width: 52ch; }
.hero-photo .lead { color: var(--ink); }
.hero-trust { padding: 40px 0 56px; }

.hero-photo {
  position: relative;
  background-image: url('assets/images/consulting-bg.webp');
  background-size: cover;
  background-position: center 25%;
}
/* The blog, the articles and the tool pages all share one photo. Every photo
   hero gets the same veil below, because each of them carries a title and a
   lead over it — an earlier narrower version here left the text unreadable on
   articles, search and plain pages. */
.hero-photo-blog,
.hero-photo-tool { background-image: url('assets/images/consulting-bg5.webp'); }
.hero-photo::before {
  content: "";
  position: absolute; inset: 0;
  /* Keeps the headline, the lead and the badges legible over the photo. It
     reaches further than it used to because the hero photo now carries fine
     detail — a screen full of text — rather than a soft background. */
  background: linear-gradient(100deg,
    var(--soft-white) 0%, var(--soft-white) 36%,
    rgba(245,243,239,0.90) 52%, rgba(245,243,239,0.62) 66%,
    rgba(245,243,239,0.20) 76%, rgba(245,243,239,0) 86%);
}
/* Articles, pages, search, archives and the tool pages set their text in a wide
   centred column rather than the home page's left-hand block, so a gradient
   that fades to the right leaves the end of every line on bare photo. They take
   an even wash instead. Only the title and lead sit directly on the photo (the
   eyebrow carries its own pill), and both are --ink, which holds 7:1 at 0.70
   even over the darkest part of the photo — so the wash stays light enough to
   leave the picture visible. */
.hero-photo-blog::before,
.hero-photo-tool::before {
  background: linear-gradient(100deg,
    rgba(245,243,239,0.86) 0%, rgba(245,243,239,0.80) 58%,
    rgba(245,243,239,0.74) 82%, rgba(245,243,239,0.70) 100%);
}
.hero-photo .container { position: relative; z-index: 1; }

/* The home photo is the background of a section whose height comes from its
   own text, and `cover` scales and crops to that height — so the German lead
   wrapping to three lines where the English one takes two moved and resized the
   picture when you switched language.
   These floors make the section the same height in all three languages at any
   given width. Each is the tallest of the three in that band, measured against
   the real fonts (636 / 705 / 774px), so German is unchanged and the other two
   simply stop being shorter. The content is centred, so the slack is shared top
   and bottom rather than left under the badges.
   Only the home hero: the blog and tool heroes are separate elements. Below
   981px the veil is a flat 94% wash and the photo barely reads, so the crop
   there is not worth pinning. */
@media (min-width: 981px) {
  .hero.hero-photo { display: flex; flex-direction: column; justify-content: center; min-height: 780px; }
}
@media (min-width: 1024px) { .hero.hero-photo { min-height: 710px; } }
@media (min-width: 1200px) { .hero.hero-photo { min-height: 640px; } }

/* The same thing on the three tool pages: their hero is eyebrow, title and a
   lead, and the Spanish intro on the website-scan page wraps one line more than
   the English and German ones, which moved that photo by 32px. The floor is the
   tallest of the three pages in the three languages, so all nine now crop the
   photo the same way. Again only where the photo reads: below 981px the veil is
   a flat 94% wash. */
@media (min-width: 981px) {
  .hero-photo-tool { min-height: 454px; display: flex; flex-direction: column; justify-content: center; }
}
.blog-intro-wrap .blog-card { background: rgba(255,255,255,0.94); backdrop-filter: blur(2px); }

@media (max-width: 980px) {
  .hero { padding: 40px 0 32px; }
  .hero h1 { font-size: 42px; letter-spacing: -0.4px; }
  .hero-photo::before { background: rgba(245,243,239,0.94); }
  .hero-trust { padding: 24px 0 40px; }
}

/* --- positioning ------------------------------------------------------------ */
.positioning h2 { font-size: 40px; line-height: 1.18; letter-spacing: -0.4px; }
.positioning-copy p { color: var(--ink-muted); margin: 0; }
.positioning-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.positioning-icon { width: 32px; height: 32px; color: var(--blue); display: grid; place-items: center; flex: none; margin-top: 2px; }

.positioning-photo {
  background-image: url('assets/images/consulting-bg3.webp');
  background-size: cover;
  background-position: center 35%;
}
.positioning-box {
  background: rgba(245,243,239,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 56px 52px;
}

@media (max-width: 700px) {
  .positioning-box { padding: 36px 24px; }
}

/* --- service rows ------------------------------------------------------------ */
.container-full { max-width: none; }

.services-layout { display: grid; grid-template-columns: minmax(0,260px) minmax(0,360px) minmax(0,1fr); gap: 48px; align-items: start; }
.services-title, .services-desc { position: sticky; top: 132px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.services-desc { padding-top: 14px; }
.services-desc p { font-size: 16px; color: var(--ink-muted); max-width: 40ch; margin: 0 auto; }

@media (max-width: 1200px) {
  .services-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .services-layout .srows { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .services-layout { grid-template-columns: 1fr; gap: 32px; }
  .services-title, .services-desc { position: static; }
}

/* --- sticky stacking cards ------------------------------------------------- */
.srows { position: relative; }
/* How far you scroll before the next card slides over this one is this padding
   plus the card's own height. A fixed wrapper height (it was 62vh, capped at
   460px) made short cards sit in a lot of empty space and the whole section
   read as slow; the padding keeps the gap the same for every card.
   80px -> 48px on her note that the blocks sat too far apart and made the page
   long: that takes about 190px of scrolling out of the section. The fade is
   paced separately, in assets/js/main.js. */
.srow-wrap { position: relative; padding-bottom: 48px; }
.srow-wrap:last-child { padding-bottom: 0; }
.srow-wrap:last-child .srow { position: relative; top: auto; }

.srow {
  position: sticky;
  top: calc(132px + var(--i, 0) * 14px);
  z-index: calc(var(--i, 0) + 1);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 34px 28px 28px;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  transform-origin: top center;
  transition: box-shadow 0.2s ease;
  will-change: transform, opacity;
}
.srow:hover, .srow:focus-within { box-shadow: var(--shadow-hover); }
.srow-bignum {
  position: absolute; top: -0.22em; left: 6px;
  font-family: 'DM Serif Display', Georgia, serif; font-size: 112px; line-height: 1;
  color: rgba(16,42,86,0.07); z-index: 0; pointer-events: none; user-select: none;
  transition: color 0.2s ease;
}
.srow:hover .srow-bignum { color: rgba(30,95,168,0.12); }
.srow-title { position: relative; z-index: 1; font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; line-height: 1.25; margin-top: 30px; padding-right: 46px; }
.srow-desc { position: relative; z-index: 1; font-size: 15px; color: var(--ink-muted); line-height: 1.6; }
.srow-arrow {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--soft-white); border: 1px solid var(--border-soft); color: var(--blue);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.srow:hover .srow-arrow { background: var(--blue); border-color: var(--blue); color: var(--soft-white); }
.srow-ref { position: absolute; top: 24px; right: 24px; z-index: 2; }

@media (max-width: 900px) {
  .srow-wrap { padding-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .srow-wrap { padding-bottom: 0; margin-bottom: 20px; }
  .srow { position: relative; top: auto; transform: none !important; opacity: 1 !important; }
}

/* --- engagement / pricing tiers ---------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.tier-card { display: flex; flex-direction: column; gap: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.tier-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--blue-soft-strong); }
.tier-card.is-highlight { background: var(--deep-blue); color: var(--soft-white); border-color: var(--deep-blue); box-shadow: var(--shadow-raised); }
.tier-card.is-highlight:hover { box-shadow: var(--shadow-raised), var(--shadow-hover); border-color: var(--blue-bright); }
.tier-num { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.tier-card:hover .tier-num { transform: scale(1.08); }
.tier-card.is-highlight h3 { color: var(--soft-white); }
.tier-card.is-highlight .tier-num { background: rgba(251,252,251,0.1); color: var(--blue-bright); }
.tier-card.is-highlight p { color: var(--mist); }
.tier-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-family: 'DM Serif Display', Georgia, serif; font-size: 16px; }
.tier-card h3 { font-size: 22px; }
.tier-price { font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; color: var(--blue); }
.tier-card.is-highlight .tier-price { color: var(--blue-bright); }
.tier-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.6; flex: 1; }
.tier-addons { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.tier-addons li { font-size: 13px; color: var(--ink-muted); padding-left: 16px; position: relative; line-height: 1.5; }
.tier-addons li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.tiers-note { font-size: 14px; color: var(--ink-faint); margin-top: 24px; }

@media (max-width: 1080px) { .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .tiers { grid-template-columns: 1fr; } }

/* --- shared 3-part section layout (title / description / content) ------------- */
.trio-layout { display: grid; grid-template-columns: minmax(0,260px) minmax(0,360px) minmax(0,1fr); gap: 48px; align-items: start; }
.trio-title, .trio-desc { display: flex; flex-direction: column; align-items: center; text-align: center; }
.trio-desc { padding-top: 14px; }
.trio-desc p { font-size: 16px; color: var(--ink-muted); max-width: 40ch; margin: 0 auto; }
.section-dark .trio-desc p { color: var(--mist); }

@media (max-width: 1200px) {
  .trio-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .trio-layout > .process, .trio-layout > .reg-grid, .trio-layout > .faq { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .trio-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* --- process ------------------------------------------------------------------ */
.process { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; }
.trio-layout .process { grid-template-columns: repeat(2, minmax(0,1fr)); }
.process-step { padding: 16px; margin: -16px; border-radius: var(--radius-md); transition: background 0.2s ease, transform 0.2s ease; }
.process-step:hover { background: var(--blue-soft); transform: translateY(-3px); }
/* Step number as a rounded tile (design board, "section anchor"). The board's
   #EAF1FB is invisible on the #F5F3EF page (1.03:1), so the tile uses the
   stronger surface: visible on the page and on the hover card, and the numeral
   keeps 4.5:1. */
.process-step .step-num {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
  background: var(--blue-soft-strong);
  font-family: 'DM Serif Display', Georgia, serif; font-size: 28px; line-height: 1;
  color: var(--blue); margin-bottom: 18px; transition: transform 0.2s ease;
}
.process-step:hover .step-num { transform: scale(1.1); }
.process-step h3 { font-size: 20px; margin-bottom: 8px; }
.process-step p { font-size: 14.5px; color: var(--ink-muted); line-height: 1.6; }

@media (max-width: 900px) { .process { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 24px; } }
@media (max-width: 560px) { .process, .trio-layout .process { grid-template-columns: 1fr; } }

/* --- regulatory expertise ------------------------------------------------------ */
.reg-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.trio-layout .reg-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.reg-item { background: rgba(251,252,251,0.05); border: 1px solid #7398C7; border-radius: var(--radius-md); padding: 26px; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.reg-item:hover { background: rgba(109,185,255,0.1); border-color: var(--blue-bright); transform: translateY(-4px); }
.reg-item .pill { background: rgba(109,185,255,0.14); color: var(--blue-bright); margin-bottom: 14px; transition: background 0.2s ease, color 0.2s ease; }
.reg-item:hover .pill { background: var(--blue-bright); color: var(--deep-blue); }
.reg-item h3 { font-size: 20px; color: var(--soft-white); margin-bottom: 8px; }
.reg-item p { font-size: 14.5px; color: var(--mist); line-height: 1.6; }

@media (max-width: 900px) { .reg-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .reg-grid, .trio-layout .reg-grid { grid-template-columns: 1fr; } }

/* --- assessment preview ---------------------------------------------------------- */
.assess-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: 24px; align-items: stretch; }
.assess-card { display: flex; flex-direction: column; }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.q-count { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mist); }
/* Progress bar: off-white fill on a translucent track, so it reads as a light
   bar on the navy card rather than a blue one. */
.bar-track { height: 8px; border-radius: 999px; background: rgba(245,243,239,0.2); margin: 18px 0 28px; overflow: hidden; }
.bar-fill { height: 8px; border-radius: 999px; background: #F3F3F3; width: 20%; }
.q-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 27px; line-height: 1.2; letter-spacing: -0.2px; margin-bottom: 26px; }
.answers { display: flex; flex-direction: column; gap: 12px; }
.ans { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 15px 20px; background: rgba(251,252,251,0.05); border: 1px solid #7398C7; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--soft-white); }
.ans .dot { width: 18px; height: 18px; border: 2px solid #7398C7; border-radius: 50%; flex: none; }
.ans-on { background: var(--blue-soft-strong); border-color: var(--blue-bright); color: var(--deep-blue); }
.ans-on .dot { border: 5px solid var(--deep-blue); background: var(--soft-white); }

/* Keyboard shortcut chip, right-aligned inside the answer button. */
.ans-key {
  margin-left: auto; flex: none;
  min-width: 26px; padding: 2px 7px;
  border: 1px solid rgba(251,252,251,0.35); border-radius: 6px;
  font-family: 'Manrope', Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center;
  color: var(--mist);
}
.ans-on .ans-key { border-color: rgba(16,42,86,0.3); color: var(--blue-hover); background: rgba(251,252,251,0.5); }
/* A key hint means nothing on a touch screen. */
@media (hover: none), (pointer: coarse) { .ans-key { display: none; } }
.assess-side { display: flex; flex-direction: column; gap: 20px; }
.assess-tools { display: flex; flex-direction: column; gap: 16px; }
.tool-card { background: var(--soft-white); border-radius: var(--radius-md); padding: 22px 24px; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.tool-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.tool-card.is-primary { background: var(--white); box-shadow: var(--shadow-raised); }
.tool-card .tool-label { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; display: block; }
.tool-card h3 { font-size: 20px; margin-bottom: 6px; color: var(--ink); }
.tool-card p { font-size: 14px; color: var(--ink-muted); margin-bottom: 16px; }
.tool-meta { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-top: 12px; }

@media (max-width: 980px) { .assess-grid { grid-template-columns: 1fr; } }

/* --- why us ------------------------------------------------------------------ */
.why-list { display: flex; flex-direction: column; }
.why-item { position: relative; padding: 0 0 30px 30px; }
.why-item:last-child { padding-bottom: 0; }
.why-item::before {
  content: ""; position: absolute; left: 6px; top: 20px; bottom: -6px; width: 1px; background: var(--border-soft);
}
.why-item:last-child::before { display: none; }
.why-item::after {
  content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--soft-white); border: 2px solid var(--blue); transition: background 0.2s ease, transform 0.2s ease;
}
.why-item:hover::after { background: var(--blue); transform: scale(1.15); }
.why-item h3 { font-size: 17px; font-weight: 700; font-family: 'Manrope', sans-serif; margin-bottom: 4px; color: var(--ink); }
.why-item p { font-size: 14.5px; color: var(--ink-muted); line-height: 1.6; }
.why-section { padding: 0; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 640px; }
.why-content { display: flex; align-items: center; padding: 96px 48px; }
.why-content .why-list { max-width: 480px; margin: 0 auto; width: 100%; }

.why-statement {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  background: url('assets/images/consulting-bg4.webp') center 35% / cover;
  padding: 64px 56px;
}
.why-statement-inner {
  background: rgba(245,243,239,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 36px 34px;
  max-width: 420px;
}
.why-statement h2 { font-size: 44px; line-height: 1.15; letter-spacing: -0.4px; }
.why-statement p { color: var(--ink-muted); margin-top: 18px; max-width: 46ch; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; min-height: 0; }
  .why-statement { padding: 56px 32px; min-height: 360px; }
  .why-content { padding: 56px 32px; }
}
@media (max-width: 700px) {
  .why-statement { padding: 40px 26px; }
  .why-content { padding: 48px 26px; }
  .why-statement-inner { padding: 28px 24px; max-width: none; }
}

/* --- FAQ -------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--white); border: 1px solid var(--border-soft); border-radius: 14px; padding: 4px 22px; transition: background 0.2s ease, border-color 0.2s ease; }
.faq-item[open] { background: var(--blue-soft); border-color: var(--blue-soft-strong); }
.faq-item summary { list-style: none; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 20px 0; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q-text { font-family: 'DM Serif Display', Georgia, serif; font-size: 19px; line-height: 1.3; }
.faq-sign { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); justify-self: end; flex: none; }
.faq-item[open] .faq-sign { background: var(--blue); }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; background: var(--blue); border-radius: 1px; }
.faq-sign::before { top: 13px; left: 8px; width: 12px; height: 2px; }
.faq-sign::after { top: 8px; left: 13px; width: 2px; height: 12px; transition: opacity 0.15s ease; }
.faq-item[open] .faq-sign::before { background: var(--soft-white); }
.faq-item[open] .faq-sign::after { opacity: 0; }
.faq-a { font-size: 15px; color: var(--ink-muted); line-height: 1.7; padding: 0 40px 20px 0; }
.faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }

/* --- final CTA ---------------------------------------------------------------- */
.final-cta { text-align: center; padding: 100px 0; }
.final-cta h2 { font-size: 48px; line-height: 1.15; max-width: 18ch; margin: 0 auto; }
.final-cta p { color: var(--mist); font-size: 17px; margin: 20px auto 36px; max-width: 52ch; }
.final-cta .btn-row { justify-content: center; }

/* --- footer -------------------------------------------------------------------- */
.site-footer { background: var(--deep-blue); color: var(--mist); padding: 72px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(173,192,219,0.2); }
.footer-brand p { font-size: 14px; color: var(--mist); margin-top: 14px; line-height: 1.65; max-width: 32ch; }
.footer-col h4 { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--soft-white); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--mist); text-decoration: none; }
.footer-col a:hover { color: var(--blue-bright); }
.footer-address { font-size: 14px; color: var(--mist); line-height: 1.65; display: block; }
/* padding-right keeps the last footer line out from under the floating tools
   button (56px, 24px from the edge; 16px on phones) — otherwise it sits on
   "Privacy Policy" at the bottom of the page on most screens below ~1340px. */
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; padding-right: 64px; font-size: 13px; color: var(--mist); }
.footer-bottom a { color: var(--mist); text-decoration: underline; text-decoration-color: rgba(173,192,219,0.4); text-underline-offset: 3px; }

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* --- responsive typography ------------------------------------------------------ */
@media (max-width: 980px) {
  .sec-head h2, .positioning h2 { font-size: 32px; }
  .why-statement h2 { font-size: 34px; }
  .final-cta h2 { font-size: 34px; }
  .section { padding: 64px 0; }
  .assess-grid { gap: 20px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { padding: 0 20px; }
  .hero h1 { font-size: 36px; }
}

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- floating tools launcher --------------------------------------------------- */
.tools-fab { position: fixed; right: 24px; bottom: 24px; z-index: 150; }
.tools-fab-btn {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--blue);
  background: var(--blue); color: var(--soft-white); display: grid; place-items: center;
  box-shadow: var(--shadow-hover); transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tools-fab-btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.tools-fab-btn:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
.tools-fab-btn[aria-expanded="true"] { background: var(--blue-hover); border-color: var(--blue-hover); }

.tools-fab-badge { position: absolute; top: -1px; right: -1px; width: 15px; height: 15px; border-radius: 50%; background: var(--blue-bright); border: 2px solid var(--soft-white); }
.tools-fab-badge::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--blue-bright);
  animation: tools-fab-ping 2.2s cubic-bezier(0,0,0.2,1) infinite;
}
.tools-fab-badge[hidden] { display: none; }

@keyframes tools-fab-ping {
  0% { transform: scale(1); opacity: 0.8; }
  75%, 100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tools-fab-badge::after { animation: none; }
}
.tools-fab-menu {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: 300px; max-width: calc(100vw - 48px);
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised); padding: 10px; display: flex; flex-direction: column; gap: 4px;
}
.tools-fab-menu[hidden] { display: none; }
.tools-fab-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.15s ease; }
.tools-fab-item:hover, .tools-fab-item:focus-visible { background: var(--blue-soft); outline: none; }
.tools-fab-item-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.tools-fab-item-meta { font-size: 12.5px; color: var(--ink-muted); }

@media (max-width: 480px) {
  .tools-fab { right: 16px; bottom: 16px; }
  .footer-bottom { padding-right: 60px; }
  .tools-fab-menu { right: -8px; }
}

/* --- tools modal ----------------------------------------------------------------- */
.tools-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,42,86,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: tools-modal-fade 0.2s ease;
}
.tools-modal-overlay[hidden] { display: none; }
.tools-modal {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--soft-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
  padding: 40px 36px 32px;
  animation: tools-modal-in 0.28s cubic-bezier(0.16,1,0.3,1);
}
.tools-modal-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border-soft); color: var(--ink-muted);
  display: grid; place-items: center; transition: background 0.15s ease, color 0.15s ease;
}
.tools-modal-close:hover { background: var(--blue-soft); color: var(--ink); }

/* --- contact form -------------------------------------------------------- */
/* Same shell as the tools dialog, so the two feel like one thing. */
.contact-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,42,86,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: tools-modal-fade 0.2s ease;
}
.contact-modal-overlay[hidden] { display: none; }
.contact-modal {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--soft-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
  padding: 40px 36px 32px;
  animation: tools-modal-in 0.28s cubic-bezier(0.16,1,0.3,1);
}
.contact-modal h2 { font-size: 26px; }
.contact-modal-intro { font-size: 15px; color: var(--ink-muted); margin: 8px 0 22px; }

.contact-field { margin-bottom: 16px; }
.contact-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.contact-field input, .contact-field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 11px 13px; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-field textarea { resize: vertical; min-height: 110px; }
.contact-field input:focus, .contact-field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}

/* Off-screen rather than display:none — a bot reading the markup still finds
   it, a screen reader skips it, and nobody sees it. */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 22px; }
.contact-consent input { margin-top: 3px; flex: none; }
.contact-consent label { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.contact-consent a { color: var(--blue); }

.contact-direct { font-size: 13px; color: var(--ink-muted); margin-top: 18px; }
.contact-direct a { color: var(--blue); }

.contact-note { font-size: 14px; line-height: 1.55; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 20px; }
.contact-note-ok { background: #E8F3EC; color: #1B5E34; }
.contact-note-error { background: #FBEAEA; color: #8A2525; }

@media (max-width: 600px) {
  .contact-modal { padding: 32px 22px 24px; }
}
.tools-modal-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tools-modal-head { margin-bottom: 24px; padding-right: 32px; }
.tools-modal-head h2 { font-size: 28px; margin: 10px 0 6px; }
.tools-modal-head p:last-child { color: var(--ink-muted); font-size: 15px; }
.tools-modal-grid { display: flex; flex-direction: column; gap: 12px; }
.tools-modal-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; text-decoration: none;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  opacity: 0; animation: tools-modal-card-in 0.35s ease forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}
.tools-modal-card:hover, .tools-modal-card:focus-visible { border-color: var(--blue-soft-strong); box-shadow: var(--shadow-hover); transform: translateY(-2px); outline: none; }
.tools-modal-icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-soft); color: var(--blue);
  display: grid; place-items: center; transition: background 0.2s ease, color 0.2s ease;
}
.tools-modal-card:hover .tools-modal-icon { background: var(--blue); color: var(--soft-white); }
.tools-modal-card-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tools-modal-card-title { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.tools-modal-card-desc { font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; }
.tools-modal-card-meta { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-top: 2px; }
.tools-modal-arrow {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--soft-white); border: 1px solid var(--border-soft); color: var(--blue);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tools-modal-card:hover .tools-modal-arrow { background: var(--blue); border-color: var(--blue); color: var(--soft-white); }

@keyframes tools-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tools-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tools-modal-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .tools-modal-overlay, .tools-modal, .tools-modal-card { animation: none; opacity: 1; }
}

@media (max-width: 560px) {
  .tools-modal { padding: 32px 22px 24px; }
  .tools-modal-card { padding: 16px; gap: 12px; }
  .tools-modal-card-desc { display: none; }
}

/* --- blog page --------------------------------------------------------------- */
.page-title { font-size: 48px; line-height: 1.12; letter-spacing: -0.5px; margin: 24px 0 16px; }
.page-lead { max-width: 62ch; }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.blog-more { margin-top: 32px; }
.blog-card {
  display: flex; flex-direction: column; gap: 14px; padding: 28px;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  text-decoration: none; color: inherit;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover { background: var(--blue-soft); border-color: var(--blue-soft-strong); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.blog-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; flex: none; transition: background 0.2s ease, color 0.2s ease; }
.blog-card:hover .blog-card-icon { background: var(--blue); color: var(--soft-white); }
.blog-card-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--blue); }
.blog-card-title { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.32; color: var(--ink); margin: 0; }
.blog-card-excerpt { font-size: 14.5px; color: var(--ink-muted); line-height: 1.6; flex: 1; margin: 0; }
.blog-card-link { font-size: 14px; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
.blog-card-link svg { transition: transform 0.2s ease; }
.blog-card:hover .blog-card-link svg { transform: translateX(3px); }

.blog-tools { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.blog-tool-card { background: var(--white); border-radius: var(--radius-md); padding: 28px; }
.blog-tool-card .tool-label { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; display: block; }
.blog-tool-card h3 { font-family: 'DM Serif Display', Georgia, serif; font-size: 21px; margin-bottom: 8px; color: var(--ink); }
.blog-tool-card p { font-size: 14.5px; color: var(--ink-muted); margin-bottom: 20px; line-height: 1.6; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .blog-tools { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 32px; }
}

/* ==========================================================================
   WORDPRESS CORE STYLES
   Everything below this line is not in the prototype — it covers the markup
   WordPress itself outputs (editor blocks, captions, galleries, pagination,
   comments, the admin bar) so posts and pages inherit the design system.
   ========================================================================== */

/* --- accessibility helpers ------------------------------------------------ */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--deep-blue); color: var(--soft-white);
  clip: auto; clip-path: none; height: auto; width: auto;
  padding: 12px 20px; border-radius: var(--radius-sm);
  left: 16px; top: 16px; z-index: 200; text-decoration: none;
}
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* --- entry (post / page) typography -------------------------------------- */
.entry-wrap { max-width: 760px; margin: 0 auto; }
.entry-header { margin-bottom: 40px; }
.entry-header .entry-title { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.12; }
.entry-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 18px; color: var(--ink-muted);
  font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
}
.entry-meta a { color: var(--blue); text-decoration: none; }
.entry-meta a:hover { text-decoration: underline; }
.entry-thumb { margin: 0 0 40px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }

.entry-content > * + * { margin-top: 22px; }
.entry-content h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 48px; line-height: 1.25; }
.entry-content h3 { font-size: clamp(21px, 2.2vw, 25px); margin-top: 36px; line-height: 1.3; }
.entry-content h4 { font-size: 19px; margin-top: 28px; }
.entry-content p { color: var(--ink-muted); }
.entry-content a { color: var(--blue); text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 22px; color: var(--ink-muted); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 8px; }
.entry-content blockquote {
  border-left: 3px solid var(--blue); background: var(--blue-soft);
  padding: 20px 26px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 19px; color: var(--ink);
}
.entry-content blockquote p + p { margin-top: 14px; }
.entry-content code {
  background: var(--blue-soft); border-radius: 6px; padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em;
}
.entry-content pre {
  background: var(--deep-blue); color: var(--soft-white);
  padding: 22px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 14px;
}
.entry-content pre code { background: none; color: inherit; padding: 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content th, .entry-content td { border: 1px solid var(--border-soft); padding: 10px 14px; text-align: left; }
.entry-content th { background: var(--blue-soft); font-weight: 600; }
.entry-content hr { border: 0; border-top: 1px solid var(--border-soft); margin: 48px 0; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content .article-byline {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-soft);
  font-size: 14px; font-weight: 600; color: var(--ink-faint);
}
.entry-footer { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- core block / caption / alignment support ---------------------------- */
.alignwide { width: min(1100px, 100vw - 64px); margin-left: 50%; transform: translateX(-50%); }
.alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: 100vw; }
.alignleft { float: left; margin: 6px 28px 20px 0; }
.alignright { float: right; margin: 6px 0 20px 28px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption, figure { margin: 0; }
.wp-caption-text, figcaption {
  margin-top: 10px; font-size: 14px; color: var(--ink-faint); text-align: center;
}
.wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue); color: var(--soft-white);
  border-radius: 999px; padding: 13px 26px;
  font-weight: 600; font-size: 15px; text-decoration: none;
}
.wp-block-button__link:hover { background: var(--blue-hover); }
.sticky .blog-card { outline: 2px solid var(--blue); outline-offset: 4px; }

/* --- pagination ----------------------------------------------------------- */
.pagination { margin-top: 56px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--border-soft); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.pagination .page-numbers:hover { border-color: var(--blue); color: var(--blue); }
.pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: var(--soft-white); }
.pagination .page-numbers.dots { border-color: transparent; background: none; }

.post-nav { margin-top: 56px; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.post-nav a {
  display: block; padding: 20px 24px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs); text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.post-nav a:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.post-nav .post-nav-label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--blue); margin-bottom: 6px;
}
.post-nav .post-nav-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 19px; line-height: 1.3; }
.post-nav-next { text-align: right; }
@media (max-width: 720px) { .post-nav { grid-template-columns: 1fr; } .post-nav-next { text-align: left; } }

/* --- search form ---------------------------------------------------------- */
.search-form { display: flex; gap: 10px; max-width: 460px; }
.search-form .search-field {
  flex: 1; border: 1px solid var(--border-input); border-radius: 999px;
  padding: 12px 20px; font: inherit; font-size: 15px; background: var(--white); color: var(--ink);
}
.search-form .search-field:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

/* --- 404 / empty states --------------------------------------------------- */
.state-block { text-align: center; max-width: 620px; margin: 0 auto; }
.state-block h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.1; }
.state-block p { color: var(--ink-muted); margin: 16px 0 28px; }
.state-block .btn-row { justify-content: center; }
.state-code {
  font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(76px, 14vw, 150px);
  line-height: 1; color: var(--blue-soft-strong);
}

/* --- free tools (assessment, DPO check, website scan) --------------------- */
/* The working questionnaire reuses the home page's preview card: .card-dark,
   .q-head, .bar-track, .q-title and .ans come from the assessment section. */
.quiz-card { max-width: 760px; margin: 0 auto; padding: 40px; }
.quiz-start { text-align: center; }
.quiz-note { font-size: 17px; color: var(--soft-white); margin: 0 auto 24px; max-width: 48ch; }
.quiz-meta { font-size: 13px; font-weight: 600; color: var(--mist); margin-top: 16px; }
.quiz-soon { background: rgba(109,185,255,0.14); color: var(--blue-bright); margin-bottom: 18px; }
.quiz-question { border: 0; min-width: 0; }
.quiz-question .q-title { padding: 0; }
.quiz-question .q-title:focus { outline: none; }
.quiz .ans { width: 100%; text-align: left; cursor: pointer; font-family: inherit; transition: background .15s ease, border-color .15s ease; }
.quiz .ans:hover { border-color: var(--blue-bright); background: rgba(109,185,255,0.1); }
.quiz .ans:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.quiz .ans:hover .ans-key { border-color: var(--blue-bright); color: var(--soft-white); }
.quiz .ans-on:hover { background: var(--blue-soft-strong); }
.quiz .bar-fill { transition: width .25s ease; }
.quiz-back {
  background: none; border: 0; padding: 4px 0; color: var(--mist);
  font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.quiz-back:hover { color: var(--soft-white); }
.quiz-back:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.quiz-result { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }
.quiz-result .tool-label { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--blue); display: block; }
/* Result: score ring and verdict side by side, then the summary list. */
.quiz-verdict-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 16px 0 20px; }
.quiz-score-wrap { position: relative; flex: none; width: 176px; height: 176px; display: grid; place-items: center; }
.quiz-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.quiz-ring circle { fill: none; stroke-width: 12; }
.quiz-ring .ring-track { stroke: var(--blue-soft); }
.quiz-ring .ring-fill {
  stroke: var(--blue); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.quiz-score { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(40px, 6vw, 52px); line-height: 1; color: var(--ink); }
.quiz-verdict { min-width: 0; }
.verdict {
  display: inline-flex; align-items: center; margin: 0;
  border-radius: 999px; padding: 9px 18px;
  font-family: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.6px; line-height: 1.3;
}
.verdict:focus { outline: none; }
.v-ok { background: var(--blue-soft); color: var(--success); }
.v-warn { background: #F6EFDC; color: var(--warning); }
.v-risk { background: #F8E7E2; color: var(--risk); }
.quiz-points { font-size: 14px; color: var(--ink-muted); margin-top: 12px; }
.quiz-result-desc { color: var(--ink-muted); margin-bottom: 28px; }

/* Summary list: the short name of each question, grouped by the answer given. */
.findings { display: flex; flex-direction: column; gap: 22px; margin-bottom: 30px; }
.findings h3 { font-family: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
/* Two columns once there is room: fifteen rows in one column is a wall. */
.finding-list { list-style: none; display: grid; gap: 10px; }
@media (min-width: 700px) { .finding-list { grid-template-columns: 1fr 1fr; } }
.finding {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start;
  background: #FBFCFF; border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 13px 16px; font-size: 15px; line-height: 1.5; color: var(--ink-muted);
}
.finding svg { margin-top: 3px; }
.f-ok svg { color: var(--success); }
.f-gap svg { color: var(--risk); }
@media (max-width: 560px) {
  .quiz-card { padding: 26px 22px; }
  .quiz-question .q-title { font-size: 23px; }
  .quiz-verdict-row { gap: 20px; }
  .quiz-score-wrap { width: 140px; height: 140px; }
}

/* --- back to top ---------------------------------------------------------- */
/* The blog prototype had this button in the markup but no styles or script;
   both are added here so it is a working control rather than a dead one. */
.back-to-top {
  position: fixed; left: 24px; bottom: 24px; z-index: 90;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border-soft); border-radius: 50%;
  background: var(--white); color: var(--ink);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--blue); color: var(--blue); }
.back-to-top:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 720px) { .back-to-top { left: 16px; bottom: 16px; } }

/* --- WordPress menu markup ------------------------------------------------ */
/* Footer columns render wp_nav_menu lists; strip the default list chrome so
   the prototype's .footer-col rules apply unchanged. */
.footer-col ul, .footer-col li { list-style: none; margin: 0; padding: 0; }

/* --- inverted wordmark (footer) ------------------------------------------- */
.wm-inverted b { color: var(--soft-white); }

/* --- blog card featured image -------------------------------------------- */
/* The prototype used a category glyph on every card. Cards fall back to that
   glyph, and use the featured image when one is set. */
.blog-card-thumb {
  display: block; margin: -28px -28px 20px; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden;
}
.blog-card-thumb img { width: 100%; height: 200px; object-fit: cover; }

/* --- comments (only if ever enabled) -------------------------------------- */
.comments-area { margin-top: 56px; }
.comments-title { font-size: 24px; margin-bottom: 24px; }
.comment-list, .comment-list ol { list-style: none; padding: 0; }
.comment-list ol { padding-left: 28px; }
.comment-list li { padding: 20px 0; border-bottom: 1px solid var(--border-soft); }
.comment-list .comment-meta { font-size: 13px; color: var(--ink-faint); margin-bottom: 8px; }
.comment-form { display: grid; gap: 14px; margin-top: 28px; }
.comment-form input[type="text"], .comment-form input[type="email"],
.comment-form input[type="url"], .comment-form textarea {
  width: 100%; border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  padding: 12px 16px; font: inherit; font-size: 15px; background: var(--white); color: var(--ink);
}
.comment-form textarea { min-height: 160px; resize: vertical; }

/* --- paginated single posts ---------------------------------------------- */
.page-links { margin-top: 32px; display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; }
.page-links a { color: var(--blue); }