/*
Theme Name: Oryvera
Theme URI: https://oryvera.example
Author: Oryvera
Author URI: https://oryvera.example
Description: A modern, conversion-focused custom WordPress theme for Oryvera. Sharp editorial typography, refined geometry, no widgets, fully reactive.
Version: 2.4.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oryvera
Tags: custom-logo, custom-menu, featured-images, full-width-template, one-column, two-columns
*/

/* ===========================================================
   Tokens
   Fonts (Instrument Serif + Inter Tight) are enqueued via
   functions.php for performance. JetBrains Mono for accents.
   =========================================================== */

:root{
  /* Brand */
  --o-blue:#1e74d8;
  --o-blue-2:#0f5cb8;
  --o-navy:#0a1f4d;
  --o-cyan:#23b9f2;
  --o-green:#22b357;
  --o-leaf:#4fcf4a;
  --o-lime:#b4df14;

  /* Editorial monochrome — the foundation */
  --o-ink:#0c0e12;
  --o-ink-2:#1a1d24;
  --o-graphite:#2d3138;
  --o-slate:#5a6068;
  --o-mute:#7a808a;
  --o-soft:#a8aeb8;
  --o-line:#e6e8ec;
  --o-line-2:#eef0f3;
  --o-paper:#f7f7f5;
  --o-paper-warm:#f5f3ee;
  --o-card:#ffffff;

  /* Accent gradient — used precisely, never as a wash */
  --o-accent: linear-gradient(135deg, #1e74d8 0%, #23b9f2 50%, #4fcf4a 100%);
  --o-accent-warm: linear-gradient(135deg, #1e74d8 0%, #4fcf4a 100%);

  /* Geometry — mostly sharp, occasionally soft */
  --o-r-0: 0;
  --o-r-1: 4px;
  --o-r-2: 8px;
  --o-r-3: 14px;
  --o-r-pill: 999px;

  /* Shadows — restrained, layered */
  --o-sh-1: 0 1px 0 rgba(12,14,18,.04), 0 1px 2px rgba(12,14,18,.05);
  --o-sh-2: 0 1px 0 rgba(12,14,18,.04), 0 4px 12px rgba(12,14,18,.06);
  --o-sh-3: 0 8px 24px rgba(12,14,18,.08), 0 2px 6px rgba(12,14,18,.06);
  --o-sh-lift: 0 18px 50px rgba(12,14,18,.10), 0 4px 12px rgba(12,14,18,.06);

  /* Layout */
  --o-container: min(1240px, calc(100vw - 2.5rem));
  --o-gutter: clamp(1rem, 2vw, 1.5rem);

  /* Type */
  --o-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --o-body: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --o-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  /* Motion */
  --o-ease: cubic-bezier(.22,.61,.36,1);
  --o-ease-out: cubic-bezier(.16,1,.3,1);
}

/* ===========================================================
   Reset / base
   =========================================================== */
*,
*::before,
*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--o-body);
  color:var(--o-ink);
  background:var(--o-paper);
  font-size:16.5px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .2s var(--o-ease)}
button{font:inherit;color:inherit}

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

.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px;height:1px;overflow:hidden;
}

/* ===========================================================
   Accessibility — focus rings, skip link
   =========================================================== */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--o-blue);
  outline-offset:2px;
  border-radius:var(--o-r-1);
}
.o-btn:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible{
  outline:2px solid var(--o-blue);
  outline-offset:3px;
}

.o-skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:9999;
  background:var(--o-ink);
  color:#fff;
  padding:.85rem 1.25rem;
  font-weight:500;
  font-size:.94rem;
  border-radius:0 0 var(--o-r-1) 0;
  text-decoration:none;
}
.o-skip-link:focus{
  left:0;
}
.o-skip-link:focus-visible{
  outline:2px solid var(--o-cyan);
  outline-offset:-4px;
}

/* ===========================================================
   Accessibility modes — applied as classes on <html>
   =========================================================== */

/* Text size */
html.o-a11y-text-lg{font-size:18px}
html.o-a11y-text-xl{font-size:20px}

/* High contrast — strong, monochromatic, no gradient washes */
html.o-a11y-contrast{
  --o-graphite:#000;
  --o-slate:#000;
  --o-mute:#000;
  --o-soft:#444;
  --o-line:#000;
  --o-line-2:#444;
  --o-paper:#fff;
  --o-paper-warm:#fff;
  --o-card:#fff;
}
html.o-a11y-contrast body{
  color:#000;
  background:#fff;
}
html.o-a11y-contrast a{text-decoration:underline;text-underline-offset:3px}
html.o-a11y-contrast .o-card,
html.o-a11y-contrast .o-form,
html.o-a11y-contrast .o-section--card{
  border:2px solid #000;
}
html.o-a11y-contrast .o-empathy,
html.o-a11y-contrast .o-cta,
html.o-a11y-contrast .site-footer{
  background:#000;
  color:#fff;
}
html.o-a11y-contrast .o-empathy::before,
html.o-a11y-contrast .o-cta::before,
html.o-a11y-contrast .site-footer::before{display:none}
html.o-a11y-contrast .o-empathy h2,
html.o-a11y-contrast .o-cta h2,
html.o-a11y-contrast .o-empathy h2 em,
html.o-a11y-contrast .o-cta h2 em{color:#fff}
html.o-a11y-contrast .o-empathy .o-lead,
html.o-a11y-contrast .o-cta p,
html.o-a11y-contrast .o-empathy-quote p,
html.o-a11y-contrast .o-empathy-quote span{color:#fff}
html.o-a11y-contrast .o-empathy-quote{
  border:2px solid #fff;
  background:transparent;
}
html.o-a11y-contrast .o-empathy-quote::before{
  background:#fff;
  height:3px;
}
html.o-a11y-contrast .o-hero h1 .o-underline::after{
  background:#000;
  height:.16em;
}
html.o-a11y-contrast .footer-col a,
html.o-a11y-contrast .footer-bottom,
html.o-a11y-contrast .footer-bottom a,
html.o-a11y-contrast .footer-brand-tag{color:#fff}
html.o-a11y-contrast .footer-col h3{color:#fff}
html.o-a11y-contrast .o-btn{
  --btn-bg:#000;
  --btn-fg:#fff;
  --btn-bd:#000;
}
html.o-a11y-contrast .o-btn--ghost{
  --btn-bg:#fff;
  --btn-fg:#000;
  --btn-bd:#000;
}
html.o-a11y-contrast .o-btn--inverse{
  --btn-bg:#fff;
  --btn-fg:#000;
  --btn-bd:#fff;
}
html.o-a11y-contrast .o-eyebrow{color:#000}
html.o-a11y-contrast .o-empathy .o-eyebrow{color:#fff}
html.o-a11y-contrast .o-empathy .o-eyebrow::before{background:#fff}
html.o-a11y-contrast .o-marquee{
  border-color:#000;
}
html.o-a11y-contrast .o-marquee-track{color:#000}

/* Reduced motion — user-controlled override */
html.o-a11y-reduce-motion *,
html.o-a11y-reduce-motion *::before,
html.o-a11y-reduce-motion *::after{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
  scroll-behavior:auto !important;
}
html.o-a11y-reduce-motion .o-reveal{opacity:1;transform:none}
html.o-a11y-reduce-motion .o-marquee-track{animation:none;transform:none}
html.o-a11y-reduce-motion .o-floating-cta-dot{animation:none}

/* Underline all links — readability aid */
html.o-a11y-underline a:not(.o-btn):not(.wp-block-button__link):not(.footer-cta):not(.o-floating-cta):not(.custom-logo-link):not(.o-skip-link){
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}

.o-container{
  width:var(--o-container);
  margin-inline:auto;
}

.site{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:clip;
}
.site-main{flex:1;position:relative;z-index:1}

/* ===========================================================
   Reactive: scroll progress bar at top of viewport
   =========================================================== */
.o-scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:2px;
  width:0;
  background:var(--o-accent);
  z-index:1100;
  transition:width .08s linear;
  pointer-events:none;
}

/* ===========================================================
   Header
   =========================================================== */
.o-announce{
  background:var(--o-ink);
  color:#fff;
  font-size:.84rem;
  letter-spacing:-.005em;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.o-announce .o-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.55rem 0;
}
.o-announce-text{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:rgba(255,255,255,.85);
}
.o-announce-text::before{
  content:"";
  width:6px;height:6px;
  border-radius:var(--o-r-pill);
  background:var(--o-leaf);
  box-shadow:0 0 0 3px rgba(79,207,74,.18);
  flex:none;
}
.o-announce a{
  color:#fff;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.o-announce a:hover{color:var(--o-cyan)}
.o-announce a::after{content:"→";transition:transform .2s var(--o-ease)}
.o-announce a:hover::after{transform:translateX(2px)}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(247,247,245,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--o-ease), background .25s var(--o-ease), padding .25s var(--o-ease);
}
.site-header.is-scrolled{
  background:rgba(247,247,245,.92);
  border-bottom-color:var(--o-line);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.05rem 0;
  transition:padding .25s var(--o-ease);
}
.site-header.is-scrolled .header-inner{padding:.7rem 0}

.header-lead{
  display:flex;
  align-items:center;
  gap:clamp(1.25rem, 3vw, 2.75rem);
  min-width:0;
  flex:1;
}

.site-branding{display:flex;align-items:center;min-width:0}
.site-branding a{display:block}
.site-branding img,
.site-branding .custom-logo{
  display:block;
  max-height:84px;
  width:auto;
  transition:max-height .25s var(--o-ease);
}
.site-header.is-scrolled .site-branding img,
.site-header.is-scrolled .site-branding .custom-logo{max-height:64px}

.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--o-line);
  background:#fff;
  border-radius:var(--o-r-1);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .2s var(--o-ease), background .2s var(--o-ease);
  padding:0;
}
.nav-toggle:hover{border-color:var(--o-ink);background:#fff}
.nav-toggle svg{display:block}
.nav-toggle span{
  display:block;
  width:18px;height:1.5px;
  background:var(--o-ink);
  position:relative;
  transition:transform .25s var(--o-ease), opacity .25s var(--o-ease);
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  position:absolute;
  left:0;width:18px;height:1.5px;
  background:var(--o-ink);
  transition:transform .25s var(--o-ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{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)}

.main-navigation{
  display:flex;
  align-items:center;
  gap:.25rem;
}
.main-navigation ul{
  list-style:none;
  padding:0;margin:0;
  display:flex;
  align-items:center;
  gap:.1rem;
}
.main-navigation a{
  color:var(--o-graphite);
  font-weight:500;
  font-size:.94rem;
  letter-spacing:-.01em;
  padding:.55rem .8rem;
  border-radius:var(--o-r-1);
  position:relative;
  transition:color .2s var(--o-ease);
}
.main-navigation a::after{
  content:"";
  position:absolute;
  left:.8rem;right:.8rem;
  bottom:.35rem;
  height:1.5px;
  background:var(--o-ink);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s var(--o-ease);
}
.main-navigation a:hover{color:var(--o-ink)}
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after{transform:scaleX(1)}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a{color:var(--o-ink)}

.header-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-left:auto;
  flex:none;
}

/* ===========================================================
   Buttons — sharp by default, capsule reserved for primary CTAs
   =========================================================== */
.o-btn{
  --btn-bg:var(--o-ink);
  --btn-fg:#fff;
  --btn-bd:var(--o-ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--o-r-1);
  padding:.85rem 1.25rem;
  font-family:var(--o-body);
  font-weight:500;
  font-size:.94rem;
  letter-spacing:-.005em;
  line-height:1;
  cursor:pointer;
  position:relative;
  transition:transform .25s var(--o-ease), background .25s var(--o-ease), color .25s var(--o-ease), border-color .25s var(--o-ease), box-shadow .25s var(--o-ease);
  overflow:hidden;
}
.o-btn::after{
  content:"→";
  display:inline-block;
  font-family:var(--o-body);
  transition:transform .3s var(--o-ease-out);
  margin-left:.15rem;
}
.o-btn:hover::after{transform:translateX(3px)}
.o-btn:hover{
  --btn-bg:#000;
  --btn-bd:#000;
  color:#fff;
  box-shadow:var(--o-sh-2);
}
.o-btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--o-ink);
  --btn-bd:var(--o-line);
}
.o-btn--ghost:hover{
  --btn-bg:#fff;
  --btn-fg:var(--o-ink);
  --btn-bd:var(--o-ink);
  color:var(--o-ink);
  box-shadow:var(--o-sh-2);
}
.o-btn--inverse{
  --btn-bg:#fff;
  --btn-fg:var(--o-ink);
  --btn-bd:#fff;
}
.o-btn--inverse:hover{
  --btn-bg:#fff;
  --btn-fg:var(--o-ink);
  color:var(--o-ink);
}
.o-btn--no-arrow::after{display:none}
.o-btn--lg{padding:1rem 1.5rem;font-size:1rem}

/* WP block button + native submit -> map to ink button look */
.wp-block-button__link,
input[type=submit]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background:var(--o-ink);
  color:#fff;
  border:1px solid var(--o-ink);
  border-radius:var(--o-r-1);
  padding:.85rem 1.25rem;
  font-family:var(--o-body);
  font-weight:500;
  font-size:.94rem;
  letter-spacing:-.005em;
  line-height:1;
  cursor:pointer;
  transition:background .25s var(--o-ease), border-color .25s var(--o-ease), box-shadow .25s var(--o-ease);
}
.wp-block-button__link:hover,
input[type=submit]:hover{
  background:#000;
  border-color:#000;
  color:#fff;
  box-shadow:var(--o-sh-2);
}

/* ===========================================================
   Accessibility control button + panel
   =========================================================== */
.o-a11y-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:#fff;
  color:var(--o-ink);
  border:1px solid var(--o-line);
  border-radius:var(--o-r-1);
  cursor:pointer;
  padding:0;
  transition:border-color .2s var(--o-ease), background .2s var(--o-ease);
  flex:none;
}
.o-a11y-toggle:hover{
  border-color:var(--o-ink);
  background:#fff;
}
.o-a11y-toggle svg{
  width:20px;
  height:20px;
  display:block;
}
.o-a11y-toggle[aria-expanded="true"]{
  background:var(--o-ink);
  color:#fff;
  border-color:var(--o-ink);
}

.o-a11y-backdrop{
  position:fixed;
  inset:0;
  background:rgba(12,14,18,.32);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:1199;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--o-ease);
}
.o-a11y-backdrop.is-visible{
  opacity:1;
  pointer-events:auto;
}

.o-a11y-panel{
  position:fixed;
  top:1rem;
  right:1rem;
  width:340px;
  max-width:calc(100vw - 2rem);
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--o-line);
  border-radius:var(--o-r-2);
  box-shadow:0 24px 60px rgba(12,14,18,.18), 0 4px 12px rgba(12,14,18,.08);
  z-index:1200;
  padding:1.5rem;
  opacity:0;
  transform:translateY(-12px) scale(.97);
  pointer-events:none;
  transition:opacity .2s var(--o-ease), transform .25s var(--o-ease-out);
}
.o-a11y-panel.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.o-a11y-panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--o-line);
}
.o-a11y-panel-header h2{
  font-family:var(--o-display);
  font-size:1.4rem;
  line-height:1.1;
  font-weight:400;
  letter-spacing:-.015em;
  color:var(--o-ink);
  margin:0;
}
.o-a11y-panel-header p{
  font-size:.82rem;
  color:var(--o-slate);
  margin:.25rem 0 0;
  line-height:1.4;
}
.o-a11y-close{
  flex:none;
  width:32px;
  height:32px;
  border:1px solid var(--o-line);
  border-radius:var(--o-r-1);
  background:#fff;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--o-ink);
  transition:border-color .2s var(--o-ease), background .2s var(--o-ease);
}
.o-a11y-close:hover{
  border-color:var(--o-ink);
  background:var(--o-paper);
}
.o-a11y-close svg{width:14px;height:14px}

.o-a11y-group{
  margin-bottom:1.25rem;
}
.o-a11y-group:last-of-type{margin-bottom:0}
.o-a11y-group-label{
  display:block;
  font-family:var(--o-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--o-slate);
  margin-bottom:.55rem;
}
.o-a11y-segments{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
  border:1px solid var(--o-line);
  border-radius:var(--o-r-1);
  overflow:hidden;
  background:#fff;
}
.o-a11y-segments button{
  background:#fff;
  border:none;
  padding:.7rem .25rem;
  font-family:var(--o-body);
  font-weight:500;
  font-size:.88rem;
  color:var(--o-graphite);
  cursor:pointer;
  transition:background .2s var(--o-ease), color .2s var(--o-ease);
  border-radius:0;
}
.o-a11y-segments button + button{border-left:1px solid var(--o-line)}
.o-a11y-segments button:hover{background:var(--o-paper)}
.o-a11y-segments button[aria-pressed="true"]{
  background:var(--o-ink);
  color:#fff;
}

.o-a11y-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--o-line-2);
}
.o-a11y-row:last-child{border-bottom:none}
.o-a11y-row-label{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  flex:1;
  min-width:0;
}
.o-a11y-row-label strong{
  font-weight:500;
  font-size:.95rem;
  color:var(--o-ink);
  letter-spacing:-.005em;
}
.o-a11y-row-label span{
  font-size:.78rem;
  color:var(--o-slate);
  line-height:1.3;
}

/* Toggle switch (sharp, on-brand) */
.o-a11y-switch{
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
  flex:none;
}
.o-a11y-switch input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  cursor:pointer;
  z-index:2;
  margin:0;
}
.o-a11y-switch-track{
  position:absolute;
  inset:0;
  background:var(--o-line);
  border-radius:var(--o-r-pill);
  transition:background .2s var(--o-ease);
}
.o-a11y-switch-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  background:#fff;
  border-radius:var(--o-r-pill);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s var(--o-ease-out);
}
.o-a11y-switch input:checked ~ .o-a11y-switch-track{background:var(--o-ink)}
.o-a11y-switch input:checked ~ .o-a11y-switch-thumb{transform:translateX(20px)}
.o-a11y-switch input:focus-visible ~ .o-a11y-switch-track{
  outline:2px solid var(--o-blue);
  outline-offset:2px;
}

.o-a11y-reset{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:none;
  border:none;
  padding:.6rem 0 0;
  font-family:var(--o-mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--o-slate);
  cursor:pointer;
  transition:color .2s var(--o-ease);
}
.o-a11y-reset:hover{color:var(--o-ink)}
.o-a11y-reset::before{
  content:"↻";
  font-size:1rem;
  letter-spacing:0;
}

@media (max-width: 640px){
  .o-a11y-panel{
    top:auto;
    bottom:0;
    right:0;
    left:0;
    width:auto;
    max-width:none;
    max-height:85vh;
    border-radius:var(--o-r-2) var(--o-r-2) 0 0;
    transform:translateY(20px);
  }
  .o-a11y-panel.is-open{transform:translateY(0)}
}

/* ===========================================================
   Reactive: floating "Talk to us" CTA — appears after hero
   =========================================================== */
.o-floating-cta{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  z-index:900;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background:var(--o-ink);
  color:#fff;
  padding:.85rem 1.25rem .85rem 1rem;
  border-radius:var(--o-r-pill);
  font-weight:500;
  font-size:.93rem;
  letter-spacing:-.005em;
  box-shadow:0 12px 30px rgba(12,14,18,.25), 0 2px 6px rgba(12,14,18,.18);
  opacity:0;
  transform:translateY(16px) scale(.96);
  pointer-events:none;
  transition:opacity .35s var(--o-ease), transform .35s var(--o-ease-out), background .25s var(--o-ease);
}
.o-floating-cta.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.o-floating-cta:hover{background:#000;color:#fff}
.o-floating-cta-dot{
  width:9px;height:9px;
  border-radius:var(--o-r-pill);
  background:var(--o-leaf);
  box-shadow:0 0 0 3px rgba(79,207,74,.25);
  flex:none;
  animation:o-pulse 2.4s ease-in-out infinite;
}
@keyframes o-pulse{
  0%, 100%{box-shadow:0 0 0 3px rgba(79,207,74,.25)}
  50%{box-shadow:0 0 0 6px rgba(79,207,74,.12)}
}

/* ===========================================================
   Reactive: scroll-reveal
   =========================================================== */
.o-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--o-ease-out), transform .8s var(--o-ease-out);
  will-change:opacity, transform;
}
.o-reveal.is-in{
  opacity:1;
  transform:translateY(0);
}
.o-reveal:nth-child(2){transition-delay:.05s}
.o-reveal:nth-child(3){transition-delay:.10s}
.o-reveal:nth-child(4){transition-delay:.15s}
.o-reveal:nth-child(5){transition-delay:.20s}
.o-reveal:nth-child(6){transition-delay:.25s}

/* ===========================================================
   Page wrapper
   =========================================================== */
.o-page{
  padding:clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 6rem);
}
.o-page--narrow .entry-content{max-width:760px}

.entry-header{margin-bottom:1.5rem}
.entry-title{
  font-family:var(--o-display);
  color:var(--o-ink);
  font-size:clamp(2.5rem, 5vw, 4rem);
  line-height:1;
  letter-spacing:-.025em;
  font-weight:400;
  margin:0;
}
.entry-content > * + *{margin-top:1.4rem}
.entry-content p{
  margin:0;
  color:var(--o-graphite);
  font-size:1.05rem;
  line-height:1.65;
}

/* ===========================================================
   Section primitive — sharp edges, generous whitespace
   =========================================================== */
.o-section{
  position:relative;
  padding:clamp(2.25rem, 5vw, 4.5rem) 0;
}
.o-section + .o-section{
  border-top:1px solid var(--o-line);
}
.o-section--card{
  background:var(--o-card);
  border:1px solid var(--o-line);
  border-radius:var(--o-r-2);
  padding:clamp(1.5rem, 3.5vw, 3rem);
  margin-top:1.5rem;
}
.o-section--card + .o-section--card{margin-top:1rem;border-top:none}

.o-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--o-mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--o-slate);
  margin-bottom:1.25rem;
}
.o-eyebrow::before{
  content:"";
  width:18px;
  height:1.5px;
  background:var(--o-ink);
  flex:none;
}

/* ===========================================================
   Typography scale
   =========================================================== */
.o-h1,
.o-section h1{
  font-family:var(--o-display);
  color:var(--o-ink);
  font-size:clamp(2.6rem, 6vw, 5.2rem);
  line-height:.96;
  letter-spacing:-.025em;
  font-weight:400;
  margin:0 0 1rem;
}
.o-h2,
.o-section h2{
  font-family:var(--o-display);
  color:var(--o-ink);
  font-size:clamp(2rem, 3.6vw, 3.2rem);
  line-height:1.04;
  letter-spacing:-.022em;
  font-weight:400;
  margin:0 0 .9rem;
}
.o-h3,
.o-section h3{
  font-family:var(--o-body);
  color:var(--o-ink);
  font-size:1.15rem;
  line-height:1.3;
  letter-spacing:-.012em;
  font-weight:600;
  margin:0 0 .55rem;
}
.o-section h2 em,
.o-h1 em,
.o-h2 em{
  font-style:italic;
  color:var(--o-slate);
  font-weight:400;
}
.o-lead{
  font-size:clamp(1.1rem, 1.7vw, 1.3rem);
  color:var(--o-graphite);
  max-width:62ch;
  font-weight:400;
  line-height:1.5;
  margin:0;
}

.o-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.75rem;
  align-items:center;
}

/* ===========================================================
   HERO — editorial, oversized, with reactive marquee
   =========================================================== */
.o-hero{
  position:relative;
  padding:clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow:hidden;
}
.o-hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:end;
}
.o-hero h1{
  font-size:clamp(3rem, 7.6vw, 6.4rem);
  line-height:.94;
  letter-spacing:-.03em;
  margin:0 0 1.25rem;
}
.o-hero h1 .o-underline{
  position:relative;
  display:inline-block;
  font-style:italic;
  color:var(--o-ink);
  white-space:nowrap;
}
.o-hero h1 .o-underline::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:.05em;
  height:.18em;
  background:var(--o-accent);
  z-index:-1;
  transform:skewX(-6deg);
  border-radius:1px;
}
.o-hero-meta{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding-bottom:.5rem;
}
.o-hero-pull{
  border-left:2px solid var(--o-ink);
  padding:.15rem 0 .15rem 1rem;
  font-size:.95rem;
  color:var(--o-graphite);
  line-height:1.5;
}
.o-hero-pull strong{
  display:block;
  font-family:var(--o-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--o-slate);
  margin-bottom:.4rem;
}
.o-hero-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--o-line);
  border-bottom:1px solid var(--o-line);
}
.o-hero-stats > div{
  padding:1rem 0;
  position:relative;
}
.o-hero-stats > div + div{
  padding-left:1rem;
  border-left:1px solid var(--o-line);
}
.o-hero-stats strong{
  display:block;
  font-family:var(--o-display);
  font-size:2rem;
  line-height:1;
  letter-spacing:-.02em;
  font-weight:400;
  color:var(--o-ink);
  margin-bottom:.25rem;
}
.o-hero-stats span{
  font-family:var(--o-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--o-slate);
}

/* Marquee — quiet, slow, reinforces what we build */
.o-marquee{
  margin:clamp(2rem, 4vw, 3rem) 0 0;
  border-top:1px solid var(--o-line);
  border-bottom:1px solid var(--o-line);
  padding:1.1rem 0;
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.o-marquee-track{
  display:inline-flex;
  gap:3rem;
  animation:o-marquee 38s linear infinite;
  white-space:nowrap;
  font-family:var(--o-mono);
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--o-slate);
}
.o-marquee-track > span{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
}
.o-marquee-track > span::after{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  border-radius:var(--o-r-pill);
  background:var(--o-leaf);
}
.o-marquee:hover .o-marquee-track{animation-play-state:paused}
@keyframes o-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ===========================================================
   "We hear you" empathy section — crucial for the brief
   =========================================================== */
.o-empathy{
  background:var(--o-ink);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.o-empathy::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 500px at 85% 0%, rgba(35,185,242,.18), transparent 60%),
    radial-gradient(700px 500px at 15% 100%, rgba(79,207,74,.12), transparent 60%);
  pointer-events:none;
}
.o-empathy .o-container{position:relative;z-index:1}
.o-empathy h2{color:#fff;font-size:clamp(2rem, 4.2vw, 3.6rem)}
.o-empathy h2 em{color:rgba(255,255,255,.55)}
.o-empathy .o-eyebrow{color:rgba(255,255,255,.7)}
.o-empathy .o-eyebrow::before{background:rgba(255,255,255,.7)}
.o-empathy .o-lead{color:rgba(255,255,255,.78);max-width:60ch}

.o-empathy-quotes{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.25rem;
  margin-top:2.25rem;
}
.o-empathy-quote{
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--o-r-2);
  padding:1.5rem;
  background:rgba(255,255,255,.03);
  position:relative;
  transition:border-color .3s var(--o-ease), background .3s var(--o-ease), transform .3s var(--o-ease-out);
}
.o-empathy-quote:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  transform:translateY(-3px);
}
.o-empathy-quote::before{
  content:"";
  display:block;
  width:24px;
  height:2px;
  background:var(--o-accent);
  margin-bottom:1rem;
}
.o-empathy-quote p{
  font-family:var(--o-display);
  font-size:1.2rem;
  line-height:1.4;
  color:#fff;
  margin:0;
  letter-spacing:-.01em;
}
.o-empathy-quote span{
  display:block;
  margin-top:1rem;
  font-family:var(--o-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* ===========================================================
   Grids
   =========================================================== */
.o-grid-2,.o-grid-3,.o-grid-4{
  display:grid;
  gap:1rem;
}
.o-grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.o-grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.o-grid-4{grid-template-columns:repeat(4, minmax(0,1fr))}

/* ===========================================================
   Card primitives — sharp, refined, magnetic on hover
   =========================================================== */
.o-card{
  position:relative;
  background:var(--o-card);
  border:1px solid var(--o-line);
  border-radius:var(--o-r-2);
  padding:1.6rem 1.5rem 1.5rem;
  height:100%;
  transition:border-color .3s var(--o-ease), transform .3s var(--o-ease-out), box-shadow .3s var(--o-ease);
}
.o-card:hover{
  border-color:var(--o-ink);
  transform:translateY(-2px);
  box-shadow:var(--o-sh-2);
}
.o-card p,
.o-card li{
  color:var(--o-graphite);
  font-size:.97rem;
  line-height:1.55;
}
.o-card p{margin:0}

.o-card--num{
  padding-top:3rem;
}
.o-card--num::before{
  content:attr(data-num);
  position:absolute;
  top:1.4rem;
  left:1.5rem;
  font-family:var(--o-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--o-slate);
  font-weight:500;
}
.o-card--num::after{
  content:"";
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  width:24px;height:1.5px;
  background:var(--o-line);
  transition:background .3s var(--o-ease), width .3s var(--o-ease-out);
}
.o-card--num:hover::after{
  background:var(--o-ink);
  width:32px;
}

.o-card--accent{
  border-color:transparent;
  background:
    linear-gradient(var(--o-card),var(--o-card)) padding-box,
    var(--o-accent) border-box;
  border:1.5px solid transparent;
}

/* ===========================================================
   Compare grid (before / after)
   =========================================================== */
.o-compare{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0;
  border:1px solid var(--o-line);
  border-radius:var(--o-r-2);
  overflow:hidden;
  background:var(--o-card);
}
.o-compare-col{
  padding:1.75rem;
  position:relative;
}
.o-compare-col + .o-compare-col{
  border-left:1px solid var(--o-line);
}
.o-compare-col h3{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.78rem;
  font-family:var(--o-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--o-slate);
  margin:0 0 1rem;
  font-weight:500;
}
.o-compare-col h3::before{
  content:"";
  width:8px;height:8px;
  border-radius:var(--o-r-pill);
  background:var(--o-mute);
  flex:none;
}
.o-compare-col--good h3::before{background:var(--o-leaf)}
.o-compare-col ul{
  list-style:none;
  margin:0;padding:0;
}
.o-compare-col li{
  padding:.65rem 0 .65rem 1.6rem;
  border-bottom:1px solid var(--o-line-2);
  position:relative;
  font-size:.98rem;
  line-height:1.45;
  color:var(--o-graphite);
}
.o-compare-col li:last-child{border-bottom:none}
.o-compare-col li::before{
  content:"";
  position:absolute;
  left:0;top:1rem;
  width:.7rem;
  height:1.5px;
  background:var(--o-mute);
}
.o-compare-col--good li{color:var(--o-ink)}
.o-compare-col--good li::before{
  width:.85rem;
  height:.85rem;
  top:.78rem;
  background:var(--o-ink);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* ===========================================================
   Cleanlist (plain checkmark list)
   =========================================================== */
.o-list{
  list-style:none;
  padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.4rem 1.5rem;
}
.o-list--single{grid-template-columns:1fr}
.o-list li{
  position:relative;
  padding:.5rem 0 .5rem 1.75rem;
  font-size:.99rem;
  color:var(--o-graphite);
  border-bottom:1px solid var(--o-line-2);
}
.o-list li:last-child{border-bottom:none}
.o-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78rem;
  width:.95rem;
  height:.95rem;
  background:var(--o-ink);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* ===========================================================
   FAQ — sharp edges, refined disclosure
   =========================================================== */
.o-faq{
  border-top:1px solid var(--o-line);
}
.o-faq details{
  border-bottom:1px solid var(--o-line);
  padding:0;
  background:transparent;
}
.o-faq summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 0;
  font-family:var(--o-display);
  font-size:1.25rem;
  letter-spacing:-.012em;
  color:var(--o-ink);
  font-weight:400;
  transition:color .2s var(--o-ease);
}
.o-faq summary:hover{color:var(--o-blue)}
.o-faq summary::-webkit-details-marker{display:none}
.o-faq summary::after{
  content:"";
  flex:none;
  width:30px;height:30px;
  border:1px solid var(--o-line);
  border-radius:var(--o-r-1);
  background:
    linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;
  color:var(--o-graphite);
  transition:transform .25s var(--o-ease), color .25s var(--o-ease), border-color .25s var(--o-ease), background-color .25s var(--o-ease);
}
.o-faq details:hover summary::after{
  border-color:var(--o-ink);
  color:var(--o-ink);
}
.o-faq details[open] summary::after{
  transform:rotate(45deg);
  background-color:var(--o-ink);
  color:#fff;
  border-color:var(--o-ink);
  background-image:
    linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor);
}
.o-faq .o-answer{
  padding:0 0 1.5rem;
  color:var(--o-graphite);
  font-size:1.02rem;
  line-height:1.65;
  max-width:72ch;
}

/* ===========================================================
   Forms — sharp, generous, zero noise
   =========================================================== */
.o-form{
  background:var(--o-card);
  border:1px solid var(--o-line);
  border-radius:var(--o-r-2);
  padding:1.75rem;
  position:relative;
}
.o-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
}
.o-field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.o-field--full{grid-column:1 / -1}
.o-form label{
  font-family:var(--o-mono);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--o-slate);
}
.o-form input[type=text],
.o-form input[type=email],
.o-form input[type=tel],
.o-form input[type=url],
.o-form textarea,
.o-form select{
  width:100%;
  border:1px solid var(--o-line);
  border-radius:var(--o-r-1);
  padding:.85rem 1rem;
  font:inherit;
  font-size:1rem;
  color:var(--o-ink);
  background:#fff;
  transition:border-color .2s var(--o-ease), box-shadow .2s var(--o-ease);
}
.o-form input:focus,
.o-form textarea:focus,
.o-form select:focus{
  outline:none;
  border-color:var(--o-ink);
  box-shadow:0 0 0 3px rgba(12,14,18,.08);
}
.o-form textarea{
  min-height:140px;
  resize:vertical;
  font-family:var(--o-body);
}
.o-form-note,
.o-form-success,
.o-form-error{
  border-radius:var(--o-r-1);
  padding:.95rem 1.1rem;
  margin-bottom:1.25rem;
  font-size:.95rem;
  border:1px solid;
}
.o-form-note{
  background:var(--o-paper);
  color:var(--o-ink);
  border-color:var(--o-line);
}
.o-form-note strong{
  display:block;
  font-family:var(--o-display);
  font-size:1.15rem;
  font-weight:400;
  letter-spacing:-.012em;
  margin-bottom:.2rem;
  color:var(--o-ink);
}
.o-form-success{
  background:#f0fbf3;
  color:#0c6d2a;
  border-color:#bce8c7;
}
.o-form-error{
  background:#fdf2f2;
  color:#a01818;
  border-color:#e8c1c1;
}
.o-form input[type=submit]{
  width:auto;
  margin-top:.4rem;
}

/* ===========================================================
   Honeypot — hidden from real users (sighted + assistive tech),
   but visible to bots that scrape the DOM and fill all fields.
   We deliberately use multiple hiding strategies to be robust
   against bots that ignore display:none or visibility:hidden.
   =========================================================== */
.o-honeypot{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Captcha field — slightly compact since it's a quick numeric check */
.o-field--captcha label{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.o-field--captcha .o-field-hint{
  font-family:var(--o-body);
  font-size:.78rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--o-mute);
}
.o-field--captcha input{
  max-width:120px;
}

/* ===========================================================
   In-page secondary nav (sticky on long pages)
   =========================================================== */
.o-pagenav{
  position:sticky;
  top:80px;
  z-index:5;
  background:rgba(247,247,245,.92);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--o-line);
  border-bottom:1px solid var(--o-line);
  padding:.7rem 0;
  margin:1.5rem 0;
  font-family:var(--o-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.o-pagenav-inner{
  display:flex;
  gap:1.5rem;
  overflow-x:auto;
  scrollbar-width:none;
}
.o-pagenav-inner::-webkit-scrollbar{display:none}
.o-pagenav a{
  color:var(--o-mute);
  white-space:nowrap;
  position:relative;
  padding:.25rem 0;
}
.o-pagenav a:hover{color:var(--o-ink)}
.o-pagenav a.is-active{color:var(--o-ink)}
.o-pagenav a.is-active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-.7rem;
  height:1.5px;
  background:var(--o-ink);
}

/* ===========================================================
   CTA block — the main "let's talk" pull
   =========================================================== */
.o-cta{
  background:var(--o-ink);
  color:#fff;
  border-radius:var(--o-r-2);
  padding:clamp(2rem, 5vw, 4rem);
  position:relative;
  overflow:hidden;
  margin:clamp(2rem, 4vw, 3rem) 0 0;
}
.o-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 400px at 100% 0%, rgba(35,185,242,.22), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(79,207,74,.16), transparent 60%);
  pointer-events:none;
}
.o-cta-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.4fr .6fr;
  gap:2rem;
  align-items:end;
}
.o-cta h2,
.o-cta h3{color:#fff;margin:0}
.o-cta h2{font-size:clamp(1.8rem, 3.6vw, 2.8rem)}
.o-cta p{
  color:rgba(255,255,255,.78);
  margin:.75rem 0 0;
  max-width:54ch;
  font-size:1.05rem;
}
.o-cta .o-actions{margin-top:0;justify-content:flex-end}
.o-cta .o-btn{
  --btn-bg:#fff;
  --btn-fg:var(--o-ink);
  --btn-bd:#fff;
}
.o-cta .o-btn:hover{
  --btn-bg:#fff;
  --btn-fg:var(--o-ink);
  color:var(--o-ink);
}
.o-cta .o-btn--ghost{
  --btn-bg:transparent;
  --btn-fg:#fff;
  --btn-bd:rgba(255,255,255,.32);
}
.o-cta .o-btn--ghost:hover{
  --btn-bg:rgba(255,255,255,.08);
  --btn-fg:#fff;
  color:#fff;
  --btn-bd:rgba(255,255,255,.6);
}

/* ===========================================================
   Sitemap page — readable, scannable list of links
   =========================================================== */
.o-sitemap-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--o-line);
  border-left:1px solid var(--o-line);
}
.o-sitemap-list li{
  border-right:1px solid var(--o-line);
  border-bottom:1px solid var(--o-line);
  background:var(--o-card);
  transition:background .2s var(--o-ease);
}
.o-sitemap-list li:hover{background:var(--o-paper)}
.o-sitemap-list a{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:1.25rem 1.5rem;
  height:100%;
  color:var(--o-ink);
  position:relative;
}
.o-sitemap-list a::after{
  content:"→";
  position:absolute;
  top:1.25rem;
  right:1.25rem;
  color:var(--o-mute);
  transition:transform .25s var(--o-ease-out), color .2s var(--o-ease);
}
.o-sitemap-list a:hover::after{
  color:var(--o-ink);
  transform:translateX(3px);
}
.o-sitemap-list-title{
  font-family:var(--o-display);
  font-size:1.3rem;
  letter-spacing:-.012em;
  color:var(--o-ink);
  padding-right:1.5rem;
}
.o-sitemap-list-excerpt{
  font-size:.92rem;
  color:var(--o-graphite);
  line-height:1.45;
}

.o-sitemap-menu{
  list-style:none;
  padding:0;
  margin:0;
}
.o-sitemap-menu li{
  border-bottom:1px solid var(--o-line-2);
}
.o-sitemap-menu li:last-child{border-bottom:none}
.o-sitemap-menu a{
  display:block;
  padding:.6rem 0;
  color:var(--o-graphite);
  font-size:.96rem;
  transition:color .2s var(--o-ease);
}
.o-sitemap-menu a:hover{color:var(--o-ink)}
.o-sitemap-menu .sub-menu{
  list-style:none;
  padding:.25rem 0 .25rem 1rem;
  margin:0;
  border-left:1px solid var(--o-line);
}

@media (max-width: 720px){
  .o-sitemap-list{grid-template-columns:1fr}
}

/* ===========================================================
   Footer — substantial, magazine-like
   =========================================================== */
.site-footer{
  margin-top:clamp(3rem, 6vw, 5rem);
  background:var(--o-ink);
  color:rgba(255,255,255,.72);
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(35,185,242,.5), rgba(79,207,74,.5), transparent);
}
.footer-top{
  padding:clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap:2.5rem;
}
.footer-top[data-columns="3"]{grid-template-columns:1.6fr 1fr 1fr}
.footer-top[data-columns="2"]{grid-template-columns:1.6fr 1fr}
.footer-top[data-columns="1"]{grid-template-columns:1fr;max-width:600px}
.footer-brand img,
.footer-brand .custom-logo{
  display:block;
  /* Use the same proportions as the header logo by constraining height,
     letting width follow naturally — preserves the original aspect ratio. */
  max-height:80px;
  width:auto;
  max-width:100%;
  height:auto;
  margin-bottom:1.5rem;
  /* Render the dark-text transparent logo as a clean white silhouette
     against the dark footer background. */
  filter:brightness(0) invert(1);
  opacity:.95;
}
.footer-brand-tag{
  font-family:var(--o-display);
  color:#fff;
  font-size:1.5rem;
  line-height:1.15;
  letter-spacing:-.018em;
  margin:0 0 1.25rem;
  max-width:24ch;
  font-weight:400;
}
.footer-cta{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--o-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.22);
  padding:.7rem 1rem;
  border-radius:var(--o-r-pill);
  transition:border-color .25s var(--o-ease), background .25s var(--o-ease);
}
.footer-cta:hover{
  color:#fff;
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.06);
}
.footer-cta::after{content:"→"}
.footer-col h3{
  font-family:var(--o-mono);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  font-weight:500;
  margin:0 0 1rem;
}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li + li{margin-top:.55rem}
.footer-col a{
  color:rgba(255,255,255,.78);
  font-size:.97rem;
  position:relative;
  transition:color .25s var(--o-ease);
}
.footer-col a:hover{color:#fff}
.footer-bottom{
  padding:1.5rem 0 2rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:.86rem;
  color:rgba(255,255,255,.45);
}
.footer-bottom a{color:rgba(255,255,255,.7)}
.footer-bottom a:hover{color:#fff}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1080px){
  .o-hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .o-hero-meta{flex-direction:row;gap:2rem;flex-wrap:wrap;align-items:flex-start}
  .o-hero-meta > *{flex:1 1 240px}
  .o-grid-4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .footer-top{grid-template-columns:1.6fr 1fr 1fr;gap:2rem}
  .footer-col:last-child{grid-column:1 / -1}
  .o-empathy-quotes{grid-template-columns:1fr 1fr}
  .o-empathy-quotes > *:nth-child(3){grid-column:1 / -1}
  .o-cta-grid{grid-template-columns:1fr;gap:1.5rem}
  .o-cta .o-actions{justify-content:flex-start}
}
@media (max-width: 860px){
  .nav-toggle{display:inline-flex}
  .header-lead{flex:1 1 auto;min-width:0;gap:.75rem}
  .main-navigation{
    position:absolute;
    top:100%;
    left:0;right:0;
    background:rgba(247,247,245,.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--o-line);
    padding:0 1.25rem 1.25rem;
    display:none;
    box-shadow:0 22px 50px rgba(12,14,18,.10);
  }
  .main-navigation.is-open{display:block}
  .main-navigation ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:1rem 0 .5rem;
  }
  .main-navigation li{border-bottom:1px solid var(--o-line)}
  .main-navigation li:last-child{border-bottom:none}
  .main-navigation a{
    width:100%;
    padding:.95rem .25rem;
    border-radius:0;
    font-size:1.02rem;
  }
  .main-navigation a::after{display:none}
  .header-actions{margin-left:auto;gap:.4rem}
  .header-actions .o-btn--ghost{display:none}
  .header-actions .o-btn:not(.o-a11y-toggle):not(.nav-toggle){display:none}
  .o-grid-3,.o-grid-4{grid-template-columns:1fr 1fr}
  .o-empathy-quotes{grid-template-columns:1fr;gap:.75rem}
  .o-empathy-quotes > *:nth-child(3){grid-column:auto}
  .o-form-grid{grid-template-columns:1fr}
  .o-list{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-brand{grid-column:1 / -1}
  .o-compare{grid-template-columns:1fr}
  .o-compare-col + .o-compare-col{
    border-left:none;
    border-top:1px solid var(--o-line);
  }
}
@media (max-width: 640px){
  .o-announce{font-size:.78rem}
  .o-announce .o-container{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.6rem 0}
  .header-inner{padding:.85rem 0}
  .site-branding img,
  .site-branding .custom-logo{max-height:48px}
  .o-grid-2,.o-grid-3,.o-grid-4{grid-template-columns:1fr}
  .o-hero-stats{grid-template-columns:1fr 1fr}
  .o-hero-stats > div + div{padding-left:1rem}
  .o-actions{flex-direction:column;align-items:stretch}
  .o-actions .o-btn,
  .o-actions .wp-block-button__link{width:100%}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .o-floating-cta{
    bottom:1rem;right:1rem;
    padding:.75rem 1rem .75rem .85rem;
    font-size:.86rem;
  }
  .o-form{padding:1.25rem}
  .entry-title{font-size:clamp(2rem, 9vw, 2.8rem)}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
  .o-reveal{opacity:1;transform:none}
}