/* Self-hosted fonts (was: Google Fonts @import — removed to cut the cross-origin request chain that was blocking render) */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('https://ohanawebstudio.com/wp-content/themes/ohana-child/assets/fonts/playfair-400-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('https://ohanawebstudio.com/wp-content/themes/ohana-child/assets/fonts/playfair-400-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('https://ohanawebstudio.com/wp-content/themes/ohana-child/assets/fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://ohanawebstudio.com/wp-content/themes/ohana-child/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('https://ohanawebstudio.com/wp-content/themes/ohana-child/assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('https://ohanawebstudio.com/wp-content/themes/ohana-child/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://ohanawebstudio.com/wp-content/themes/ohana-child/assets/fonts/poppins-700.woff2') format('woff2'); }

:root{
  --navy-950:#10172a;
  --navy-900:#0a2347;
  --navy-800:#07356f;
  --navy-700:#0e4585;
  --navy-600:#2f5f9e;
  --teal-700:#437c88;
  --teal-600:#5b8e95;
  --teal-500:#78a3a9;
  --teal-400:#9abcc1;
  --periwinkle-400:#8bacdd;
  --periwinkle-200:#c7d5ef;
  --cream-100:#f8f7f2;
  --cream-50:#fdfcfa;
  --mist-100:#e4ecf0;
  --mist-200:#d5e2e8;
  --ink-700:#3c4650;
  --ink-500:#5f6b74;
  --white:#ffffff;
  --success:#4c8c6a;
  --error:#b0503f;

  --color-bg-page:var(--cream-100);
  --color-bg-section-alt:var(--mist-100);
  --color-bg-surface:var(--white);
  --color-bg-footer:var(--navy-950);
  --color-bg-inverse:var(--navy-900);
  --color-text-heading:var(--navy-800);
  --color-text-body:var(--ink-700);
  --color-text-muted:var(--ink-500);
  --color-text-on-dark:var(--cream-50);
  --color-text-on-dark-muted:rgba(248,247,242,0.72);
  --color-accent-teal:var(--teal-700);
  --color-accent-periwinkle:var(--periwinkle-400);
  --color-border-subtle:rgba(7,53,111,0.12);
  --color-border-strong:rgba(7,53,111,0.28);
  --color-brand-primary:var(--navy-800);
  --color-brand-primary-hover:var(--navy-900);
  --color-brand-primary-active:var(--navy-950);
  --color-link:var(--navy-700);
  --color-link-hover:var(--teal-700);

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(7,53,111,0.06),0 8px 24px rgba(7,53,111,0.08);
  --shadow-card-hover:0 4px 10px rgba(7,53,111,0.08),0 16px 36px rgba(7,53,111,0.14);
  --shadow-button:0 1px 2px rgba(7,53,111,0.15);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --duration-fast:120ms;
  --duration-normal:200ms;

  --font-display:'Playfair Display',ui-serif,Georgia,serif;
  --font-body:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --text-eyebrow-size:0.75rem;
  --text-eyebrow-tracking:0.18em;
  --text-h1-size:clamp(2.25rem,4vw,3.4rem);
  --text-h2-size:clamp(1.75rem,2.6vw,2.4rem);
  --text-h3-size:1.375rem;
  --text-body-size:1rem;
  --text-small-size:0.875rem;
  --leading-tight:1.15;
  --leading-snug:1.35;
  --leading-normal:1.6;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --container-max:1120px;
  --container-pad:24px;
}

.oh-home, .oh-home *, .oh-home *::before, .oh-home *::after{ box-sizing:border-box; }
body.oh-home{ margin:0; background:var(--color-bg-page); font-family:var(--font-body); color:var(--color-text-body); -webkit-font-smoothing:antialiased; }
.oh-home img{ max-width:100%; display:block; }

/* Header */
.oh-header{ position:sticky; top:0; z-index:100; background:var(--color-bg-page); border-bottom:1px solid var(--color-border-subtle); }
.oh-header-inner{ max-width:var(--container-max); margin:0 auto; padding:14px var(--container-pad); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.oh-logo-link{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.oh-logo-img{ height:36px; width:36px; object-fit:contain; }
.oh-logo-text{ font-family:var(--font-display); font-size:1.3rem; font-weight:var(--weight-regular); color:var(--color-text-heading); }
.oh-nav{ display:flex; align-items:center; gap:30px; margin-left:auto; margin-right:30px; }
.oh-nav a{ font-family:var(--font-body); font-size:0.92rem; font-weight:var(--weight-medium); text-decoration:none; color:var(--color-text-heading); transition:color 150ms ease; }
.oh-nav a:hover, .oh-nav a.is-active{ color:var(--color-accent-teal); }
.oh-hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; position:relative; z-index:101; }
.oh-hamburger span{ width:24px; height:2px; background:var(--color-text-heading); display:block; transition:transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard); }
.oh-header.is-open .oh-hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.oh-header.is-open .oh-hamburger span:nth-child(2){ opacity:0; }
.oh-header.is-open .oh-hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.oh-mobile-overlay{ position:fixed; inset:0; top:65px; z-index:98; background:rgba(10,35,71,0.4); display:none; }
.oh-header.is-open .oh-mobile-overlay{ display:block; }
.oh-mobile-panel{ position:fixed; top:65px; right:0; bottom:0; width:min(78vw,320px); z-index:99; background:var(--color-bg-page); box-shadow:-8px 0 30px rgba(7,53,111,0.15); transform:translateX(100%); transition:transform var(--duration-normal) var(--ease-standard); display:flex; flex-direction:column; padding:28px 8px; }
.oh-header.is-open .oh-mobile-panel{ transform:translateX(0); }
.oh-mobile-panel a{ font-family:var(--font-display); font-size:1.3rem; font-weight:var(--weight-regular); text-decoration:none; color:var(--color-text-heading); padding:16px 24px; border-bottom:1px solid var(--color-border-subtle); }
@media (max-width:880px){
  .oh-nav{ display:none; }
  .oh-hamburger{ display:flex; }
}

/* Hero */
.oh-hero{ position:relative; min-height:640px; display:flex; align-items:center; background:linear-gradient(100deg,rgba(10,35,71,0.82) 0%,rgba(10,35,71,0.58) 55%,rgba(10,35,71,0.34) 100%), url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=1800&auto=format&fit=crop') center/cover no-repeat; }
.oh-hero-inner{ max-width:var(--container-max); margin:0 auto; padding:110px var(--container-pad) 90px; width:100%; box-sizing:border-box; }
.oh-hero-content{ max-width:600px; }
.oh-eyebrow{ font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:var(--weight-semibold); color:var(--periwinkle-400); }
.oh-hero h1{ font-family:var(--font-display); font-size:clamp(2.6rem,5vw,4rem); line-height:0.98; color:var(--color-text-on-dark); margin:18px 0 22px; font-weight:var(--weight-medium); }
.oh-hero h1 span{ color:var(--teal-400); }
.oh-hero p{ font-family:var(--font-body); font-size:1.1rem; line-height:var(--leading-normal); color:var(--color-text-on-dark-muted); margin:0 0 34px; max-width:480px; }
.oh-hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

/* Buttons */
.oh-btn{ font-family:var(--font-body); font-weight:var(--weight-medium); font-size:0.95rem; text-decoration:none; border-radius:var(--radius-pill); padding:15px 32px; display:inline-block; transition:background 150ms ease, color 150ms ease; }
.oh-btn-primary-on-dark{ color:var(--navy-900); background:var(--color-text-on-dark); box-shadow:var(--shadow-button); }
.oh-btn-primary-on-dark:hover{ background:var(--periwinkle-400); color:var(--navy-900); }
.oh-btn-outline-on-dark{ color:var(--color-text-on-dark); box-shadow:inset 0 0 0 1.5px rgba(248,247,242,0.5); }
.oh-btn-outline-on-dark:hover{ background:rgba(248,247,242,0.12); }
.oh-btn-navy{ font-family:var(--font-body); font-weight:var(--weight-medium); font-size:0.95rem; text-decoration:none; color:var(--color-text-on-dark); background:var(--color-brand-primary); border-radius:var(--radius-pill); padding:14px 30px; box-shadow:var(--shadow-button); display:inline-block; transition:background 150ms ease; }
.oh-btn-navy:hover{ background:var(--navy-700); }

/* Services preview */
.oh-section-services{ background:var(--color-bg-page); }
.oh-section-inner{ max-width:var(--container-max); margin:0 auto; padding:var(--space-9) var(--container-pad); }
.oh-section-head{ max-width:560px; margin-bottom:var(--space-7); }
.oh-badge{ font-family:var(--font-body); font-size:var(--text-eyebrow-size); letter-spacing:var(--text-eyebrow-tracking); text-transform:uppercase; font-weight:var(--weight-semibold); color:var(--color-accent-teal); display:inline-block; }
.oh-section-head h2{ font-family:var(--font-display); font-size:var(--text-h2-size); color:var(--color-text-heading); margin:10px 0 0; font-weight:var(--weight-regular); }
.oh-services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-bottom:var(--space-7); }
.oh-service-card{ background:var(--color-bg-section-alt); border-radius:var(--radius-lg); padding:32px; transition:transform 180ms ease, box-shadow 180ms ease; }
.oh-service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.oh-service-card .oh-card-title{ font-family:var(--font-display); font-size:1.15rem; color:var(--color-text-heading); margin-bottom:10px; }
.oh-service-card p{ font-family:var(--font-body); font-size:0.9rem; line-height:var(--leading-normal); color:var(--color-text-muted); margin:0; }
@media (max-width:900px){ .oh-services-grid{ grid-template-columns:1fr; } }

/* About preview */
.oh-section-about{ background:var(--color-bg-inverse); position:relative; overflow:hidden; }
.oh-about-bg{ position:absolute; inset:0; background:radial-gradient(circle at 20% 30%,rgba(120,163,169,0.85),transparent 70%), radial-gradient(circle at 88% 82%,rgba(139,172,221,0.4),transparent 55%); }
.oh-about-ring-a{ position:absolute; width:220px; height:220px; border:1.5px solid rgba(120,163,169,0.4); border-radius:50%; top:-90px; left:-90px; }
.oh-about-ring-b{ position:absolute; width:140px; height:140px; border:1.5px solid rgba(139,172,221,0.3); border-radius:50%; bottom:-60px; right:6%; }
.oh-about-inner{ max-width:700px; margin:0 auto; padding:var(--space-9) var(--container-pad); text-align:center; position:relative; z-index:1; }
.oh-quote-mark{ font-family:var(--font-display); font-size:3.5rem; line-height:1; color:var(--color-accent-teal); margin-bottom:6px; }
.oh-quote{ font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:var(--leading-snug); color:var(--color-text-on-dark); }
.oh-quote-attr{ font-family:var(--font-body); font-size:0.85rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--color-accent-periwinkle); margin:22px 0 20px; }
.oh-about-link{ font-family:var(--font-body); font-weight:var(--weight-medium); font-size:0.95rem; color:var(--color-accent-periwinkle); text-decoration:none; transition:letter-spacing 180ms ease; display:inline-block; }
.oh-about-link:hover{ letter-spacing:0.5px; }

/* Get started CTA */
.oh-section-cta{ background:var(--color-bg-page); padding:var(--space-8) var(--container-pad) var(--space-9); }
.oh-cta-box{ max-width:var(--container-max); margin:0 auto; background:var(--navy-900); border-radius:var(--radius-lg); overflow:hidden; position:relative; display:flex; align-items:center; min-height:280px; }
.oh-cta-bg{ position:absolute; inset:0; background:radial-gradient(circle at 85% 30%,rgba(139,172,221,0.35),transparent 60%); }
.oh-cta-content{ position:relative; z-index:1; padding:var(--space-8); max-width:560px; margin:0 auto; text-align:center; }
.oh-cta-content h2{ font-family:var(--font-display); font-size:var(--text-h2-size); color:var(--color-text-on-dark); margin:0 0 16px; font-weight:var(--weight-regular); }
.oh-cta-content p{ font-family:var(--font-body); font-size:1.05rem; color:var(--color-text-on-dark-muted); margin:0 0 32px; }

/* Footer */
.oh-footer{ background:var(--navy-900); color:var(--color-text-on-dark-muted); }
.oh-footer-grid{ max-width:var(--container-max); margin:0 auto; padding:var(--space-8) var(--container-pad) var(--space-6); display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-7); }
.oh-footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.oh-footer-logo{ height:34px; width:34px; object-fit:contain; filter:brightness(0) invert(1); }
.oh-footer-brand span{ font-family:var(--font-display); font-size:1.15rem; color:var(--color-text-on-dark); }
.oh-footer p{ font-family:var(--font-body); font-size:0.9rem; line-height:var(--leading-normal); max-width:280px; margin:0; }
.oh-footer-heading{ font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-accent-teal); font-weight:var(--weight-semibold); margin-bottom:16px; }
.oh-footer-links{ display:flex; flex-direction:column; gap:11px; }
.oh-footer-links a, .oh-footer-contact a{ font-family:var(--font-body); font-size:0.9rem; color:var(--color-text-on-dark-muted); text-decoration:none; transition:color 150ms ease; }
.oh-footer-links a:hover, .oh-footer-contact a:hover{ color:var(--color-text-on-dark); }
.oh-footer-contact{ display:flex; flex-direction:column; gap:11px; font-family:var(--font-body); font-size:0.9rem; color:var(--color-text-on-dark-muted); }
.oh-social-row{ display:flex; gap:10px; margin-top:16px; }
.oh-social-btn{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid rgba(248,247,242,0.28); color:var(--color-text-on-dark); text-decoration:none; transition:background 150ms ease, border-color 150ms ease; }
.oh-social-btn:hover{ background:var(--color-accent-teal); border-color:var(--color-accent-teal); }
.oh-footer-bottom{ border-top:1px solid rgba(248,247,242,0.14); }
.oh-footer-bottom-inner{ max-width:var(--container-max); margin:0 auto; padding:18px var(--container-pad); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-family:var(--font-body); font-size:0.8rem; }
@media (max-width:700px){ .oh-footer-grid{ grid-template-columns:1fr; gap:var(--space-6); } }
/* Shared page hero (Services / Work) */
.oh-page-hero{ background:var(--color-bg-section-alt); }
.oh-page-hero-grid{ max-width:var(--container-max); margin:0 auto; padding:var(--space-9) var(--container-pad); display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-8); align-items:end; }
.oh-page-hero-grid h1{ font-family:var(--font-display); font-size:var(--text-h1-size); line-height:var(--leading-tight); color:var(--color-text-heading); margin:16px 0 0; font-weight:var(--weight-regular); }
.oh-page-hero-support{ border-top:1px solid var(--color-border-subtle); padding-top:20px; }
.oh-page-hero-support p{ font-family:var(--font-body); font-size:1rem; line-height:var(--leading-normal); color:var(--color-text-muted); margin:0; }
@media (max-width:900px){ .oh-page-hero-grid{ grid-template-columns:1fr; } }

/* About hero (photo + offset panel) */
.oh-about-hero{ background:var(--color-bg-section-alt); }
.oh-about-hero-grid{ max-width:var(--container-max); margin:0 auto; padding:var(--space-9) var(--container-pad); display:grid; grid-template-columns:1.4fr 0.6fr; gap:var(--space-8); align-items:center; }
.oh-about-hero-grid h1{ font-family:var(--font-display); font-size:var(--text-h1-size); line-height:var(--leading-tight); color:var(--color-text-heading); margin:14px 0 20px; font-weight:var(--weight-regular); }
.oh-about-hero-grid p{ font-family:var(--font-body); font-size:1.05rem; line-height:var(--leading-normal); color:var(--color-text-body); margin:0; }
.oh-about-photo-wrap{ position:relative; justify-self:center; }
.oh-about-photo-offset{ position:absolute; inset:14px -14px -14px 14px; background:var(--color-accent-teal); border-radius:var(--radius-lg); }
.oh-about-photo{ position:relative; width:240px; height:280px; object-fit:cover; object-position:top; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); display:block; }
.oh-founder-placeholder{ position:relative; width:240px; height:280px; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); background:linear-gradient(160deg,var(--navy-800),var(--teal-600) 65%,var(--periwinkle-400)); display:flex; align-items:center; justify-content:center; }
.oh-founder-placeholder img{ width:56px; height:56px; filter:brightness(0) invert(1); opacity:0.9; }
@media (max-width:900px){
  .oh-about-hero-grid{ grid-template-columns:1fr; }
  .oh-about-photo, .oh-founder-placeholder{ width:180px; height:210px; }
}

/* Bento grids: About "what makes us different" (2 rows) + Services "service grid" (3 rows) */
.oh-bento-section{ background:var(--color-bg-page); }
.oh-bento-head{ margin-bottom:var(--space-7); max-width:560px; }
.oh-bento-head h2{ font-family:var(--font-display); font-size:var(--text-h2-size); color:var(--color-text-heading); margin:10px 0 0; font-weight:var(--weight-regular); }
.oh-bento{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--space-5); }
.oh-bento-2rows{ grid-template-rows:auto auto; }
.oh-bento-3rows{ grid-template-rows:auto auto auto; }
.oh-bento-feature{ grid-row:1 / 3; background:var(--color-bg-inverse); border-radius:var(--radius-lg); padding:36px; display:flex; flex-direction:column; justify-content:space-between; gap:16px; transition:transform 180ms ease, box-shadow 180ms ease; }
.oh-bento-feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.oh-bento-num{ font-family:var(--font-display); font-size:3rem; color:var(--color-accent-teal); }
.oh-bento-num-sm{ font-family:var(--font-display); font-size:2rem; color:var(--color-accent-teal); margin-bottom:14px; }
.oh-bento-feature-title{ font-family:var(--font-display); font-size:1.4rem; color:var(--color-text-on-dark); margin-bottom:10px; }
.oh-bento-feature-text{ font-family:var(--font-body); font-size:0.95rem; line-height:var(--leading-normal); color:var(--color-text-on-dark-muted); margin:0; }
.oh-bento-icon{ transition:transform 180ms ease; }
.oh-bento-cell:hover .oh-bento-icon, .oh-bento-wide:hover .oh-bento-wide-icon{ transform:scale(1.1); }
.oh-bento-wide:hover .oh-bento-wide-icon{ transform:scale(1.1) rotate(8deg); }
.oh-bento-cell{ border-radius:var(--radius-lg); padding:28px 22px; transition:transform 180ms ease, box-shadow 180ms ease; }
.oh-bento-cell:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.oh-bento-alt{ background:var(--color-bg-section-alt); }
.oh-bento-white{ background:var(--white); border:1px solid var(--color-border-subtle); }
.oh-bento-cell-title{ font-family:var(--font-display); font-size:1.15rem; color:var(--color-text-heading); margin-bottom:8px; }
.oh-bento-cell-title-sm{ font-family:var(--font-display); font-size:1.1rem; color:var(--color-text-heading); margin-bottom:6px; }
.oh-bento-cell-text{ font-family:var(--font-body); font-size:0.9rem; line-height:var(--leading-normal); color:var(--color-text-muted); margin:0; }
.oh-bento-cell-text-sm{ font-family:var(--font-body); font-size:0.875rem; line-height:var(--leading-normal); color:var(--color-text-muted); margin:0; }
.oh-bento-wide{ grid-column:2 / 4; background:var(--color-accent-teal); border-radius:var(--radius-lg); padding:28px 30px; display:flex; align-items:center; gap:24px; transition:transform 180ms ease, box-shadow 180ms ease; }
.oh-bento-wide:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.oh-bento-wide-icon{ flex-shrink:0; transition:transform 180ms ease; }
.oh-bento-wide-num{ font-family:var(--font-display); font-size:2rem; color:var(--color-text-on-dark); }
.oh-bento-wide-title{ font-family:var(--font-display); font-size:1.15rem; color:var(--color-text-on-dark); margin-bottom:4px; }
.oh-bento-wide-title-sm{ font-family:var(--font-display); font-size:1.1rem; color:var(--color-text-on-dark); margin-bottom:4px; }
.oh-bento-wide-text{ font-family:var(--font-body); font-size:0.9rem; line-height:var(--leading-normal); color:rgba(248,247,242,0.9); margin:0; }
@media (max-width:900px){
  .oh-bento{ grid-template-columns:1fr; }
  .oh-bento-feature, .oh-bento-wide{ grid-column:auto; grid-row:auto; }
}

/* Mission / pull-quote (About) — same visual language as Home's about-preview */
.oh-mission{ background:var(--color-bg-inverse); position:relative; overflow:hidden; }
.oh-mission-bg{ position:absolute; inset:0; background:radial-gradient(circle at 20% 25%,rgba(120,163,169,0.85),transparent 70%), radial-gradient(circle at 90% 85%,rgba(139,172,221,0.4),transparent 55%); }
.oh-mission-ring-a{ position:absolute; width:260px; height:260px; border:1.5px solid rgba(120,163,169,0.4); border-radius:50%; top:-110px; right:-80px; }
.oh-mission-ring-b{ position:absolute; width:150px; height:150px; border:1.5px solid rgba(139,172,221,0.3); border-radius:50%; bottom:-60px; left:8%; }
.oh-mission-inner{ max-width:700px; margin:0 auto; padding:var(--space-9) var(--container-pad); text-align:center; position:relative; z-index:1; }
.oh-mission-mark{ font-family:var(--font-display); font-size:3.8rem; line-height:1; color:var(--color-accent-teal); margin-bottom:6px; }
.oh-mission-quote{ font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.1rem); line-height:var(--leading-snug); color:var(--color-text-on-dark); }
.oh-mission-attr{ font-family:var(--font-body); font-size:0.9rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--color-accent-periwinkle); margin-top:22px; }

/* Featured work strip (Services) */
.oh-featured{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad) var(--space-9); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center; }
.oh-featured-img{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); background:var(--color-bg-section-alt); aspect-ratio:16/11; }
.oh-featured-img img{ width:100%; height:100%; object-fit:contain; }
.oh-featured-eyebrow{ font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-teal); font-weight:var(--weight-semibold); margin-bottom:10px; }
.oh-featured-title{ font-family:var(--font-display); font-size:1.5rem; color:var(--color-text-heading); margin-bottom:12px; }
.oh-featured-text{ font-family:var(--font-body); font-size:0.95rem; line-height:var(--leading-normal); color:var(--color-text-muted); margin:0 0 16px; }
.oh-featured-link{ font-family:var(--font-body); font-weight:var(--weight-medium); font-size:0.9rem; color:var(--color-accent-teal); text-decoration:none; transition:letter-spacing 180ms ease; display:inline-block; }
.oh-featured-link:hover{ letter-spacing:0.5px; }
@media (max-width:900px){ .oh-featured{ grid-template-columns:1fr; } }

/* How it works steps (Services) */
.oh-steps-section{ background:var(--color-bg-section-alt); }
.oh-steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); }
.oh-step-card{ background:var(--white); border-radius:var(--radius-md); padding:28px 22px; box-shadow:var(--shadow-card); transition:transform 180ms ease, box-shadow 180ms ease; }
.oh-step-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(7,53,111,0.18); }
.oh-step-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--color-accent-teal); margin-bottom:12px; }
.oh-step-title{ font-family:var(--font-display); font-size:1.05rem; color:var(--color-text-heading); margin-bottom:8px; }
.oh-step-text{ font-family:var(--font-body); font-size:0.875rem; line-height:var(--leading-normal); color:var(--color-text-muted); margin:0; }
@media (max-width:900px){ .oh-steps-grid{ grid-template-columns:1fr; } }

/* FAQ accordion (Services) */
.oh-faq-section{ background:var(--color-bg-page); }
.oh-faq-list{ display:flex; flex-direction:column; }
.oh-faq-item{ border-bottom:1px solid var(--color-border-subtle); }
.oh-faq-question{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; background:none; border:none; cursor:pointer; padding:20px 4px; text-align:left; font-family:var(--font-display); font-size:1.05rem; color:var(--color-text-heading); }
.oh-faq-symbol{ font-family:var(--font-body); font-size:1.3rem; color:var(--color-accent-teal); flex-shrink:0; }
.oh-faq-answer{ font-family:var(--font-body); font-size:0.925rem; line-height:var(--leading-normal); color:var(--color-text-muted); margin:0 0 20px; padding:0 4px; display:none; }
.oh-faq-item.is-open .oh-faq-answer{ display:block; }

/* Work page case studies */
.oh-case-list{ max-width:var(--container-max); margin:0 auto; padding:var(--space-8) var(--container-pad) var(--space-9); display:flex; flex-direction:column; gap:var(--space-8); }
.oh-case-study{ text-decoration:none; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:start; }
.oh-case-img{ border-radius:var(--radius-lg); overflow:hidden; background:var(--color-bg-section-alt); aspect-ratio:16/11; transition:transform 220ms ease, box-shadow 220ms ease; }
.oh-case-img img{ width:100%; height:100%; object-fit:contain; transition:transform 220ms ease; }
.oh-case-study:hover .oh-case-img{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.oh-case-study:hover .oh-case-img img{ transform:scale(1.03); }
.oh-case-eyebrow{ font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-teal); font-weight:var(--weight-semibold); margin-bottom:10px; }
.oh-case-title{ font-family:var(--font-display); font-size:1.6rem; color:var(--color-text-heading); margin-bottom:12px; }
.oh-case-text{ font-family:var(--font-body); font-size:0.95rem; line-height:var(--leading-normal); color:var(--color-text-muted); margin:0 0 16px; }
.oh-case-cta{ font-family:var(--font-body); font-weight:var(--weight-medium); font-size:0.9rem; color:var(--color-accent-teal); transition:letter-spacing 180ms ease; }
.oh-case-study:hover .oh-case-cta{ letter-spacing:0.5px; }
.oh-case-img-2{ grid-column:2; grid-row:1; }
.oh-case-text-1{ grid-column:1; grid-row:1; }
@media (max-width:900px){
  .oh-case-study{ grid-template-columns:1fr; gap:20px; }
  .oh-case-study > div{ grid-column:1; grid-row:auto; }
}

/* Contact page */
.oh-contact-section{ background:var(--color-bg-page); }
.oh-contact-grid{ max-width:var(--container-max); margin:0 auto; padding:var(--space-9) var(--container-pad); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:stretch; }
.oh-contact-info h1{ font-family:var(--font-display); font-size:var(--text-h1-size); line-height:var(--leading-tight); color:var(--color-text-heading); margin:14px 0 18px; font-weight:var(--weight-regular); }
.oh-contact-info p{ font-family:var(--font-body); font-size:1rem; line-height:var(--leading-normal); color:var(--color-text-body); margin:0 0 36px; }
.oh-contact-details{ display:flex; flex-direction:column; gap:22px; margin-bottom:32px; }
.oh-contact-label{ font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-teal); font-weight:var(--weight-semibold); margin-bottom:6px; }
.oh-contact-value{ font-family:var(--font-body); font-size:1rem; color:var(--color-text-heading); text-decoration:none; display:inline-block; }
.oh-contact-social{ display:flex; gap:10px; }
.oh-contact-social a{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--color-border-strong); color:var(--color-text-heading); text-decoration:none; transition:background 150ms ease, border-color 150ms ease, color 150ms ease; }
.oh-contact-social a:hover{ background:var(--color-accent-teal); border-color:var(--color-accent-teal); color:var(--color-text-on-dark); }
.oh-contact-form-panel{ background:var(--color-bg-section-alt); border-radius:var(--radius-lg); padding:var(--space-7); box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
@media (max-width:900px){
  .oh-contact-grid{ grid-template-columns:1fr; }
}

/* WPForms visual override to match the design's form language */
.oh-contact-form-panel .wpforms-container{ margin:0 !important; display:flex !important; flex-direction:column !important; flex:1 !important; }
.oh-contact-form-panel .wpforms-form{ display:flex !important; flex-direction:column !important; flex:1 !important; }
.oh-contact-form-panel .wpforms-field-container{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto 1fr; gap:18px; flex:1; }
.oh-contact-form-panel .wpforms-field-textarea{ display:flex; flex-direction:column; }
.oh-contact-form-panel .wpforms-field-name,
.oh-contact-form-panel .wpforms-field-textarea{ grid-column:1 / -1; }
.oh-contact-form-panel .wpforms-field{ padding:0 !important; margin:0 !important; }
/* WPForms' honeypot anti-spam field: normally hidden by a JS-injected style, but this
   site delays script execution until user interaction, so it's hidden unconditionally
   here instead. The real Phone field also uses the generic "text" field type, so it's
   excluded via its own "oh-phone" css class (set on the field in the WPForms builder). */
.oh-contact-form-panel .wpforms-field-text:not(.oh-phone){
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important;
  border:0 !important; padding:0 !important; margin:-1px !important;
}
.oh-contact-form-panel .wpforms-field label.wpforms-field-label{ font-family:var(--font-body) !important; font-size:0.8rem !important; color:var(--color-text-body) !important; margin-bottom:6px !important; font-weight:400 !important; }
.oh-contact-form-panel .wpforms-field input[type=text],
.oh-contact-form-panel .wpforms-field input[type=email],
.oh-contact-form-panel .wpforms-field input[type=tel],
.oh-contact-form-panel .wpforms-field textarea{
  font-family:var(--font-body) !important; font-size:0.95rem !important; color:var(--color-text-body) !important;
  background:var(--white) !important; border:1px solid var(--color-border-subtle) !important; border-radius:var(--radius-sm) !important;
  padding:16px 18px !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; outline:none !important;
  transition:border-color 200ms ease, box-shadow 200ms ease !important;
}
.oh-contact-form-panel .wpforms-field input[type=text],
.oh-contact-form-panel .wpforms-field input[type=email],
.oh-contact-form-panel .wpforms-field input[type=tel]{
  min-height:54px !important;
}
.oh-contact-form-panel .wpforms-field input:focus,
.oh-contact-form-panel .wpforms-field textarea:focus{ border-color:var(--navy-700) !important; box-shadow:0 0 0 3px rgba(14,69,133,0.12) !important; }
.oh-contact-form-panel .wpforms-field textarea{ min-height:180px; flex:1; resize:vertical; }
.oh-contact-form-panel .wpforms-field-required-label{ color:var(--error) !important; }
.oh-contact-form-panel .wpforms-submit-container{ text-align:center !important; margin-top:18px !important; }
.oh-contact-form-panel .wpforms-submit{
  font-family:var(--font-body) !important; font-weight:500 !important; font-size:0.95rem !important; border:none !important; cursor:pointer !important;
  color:var(--color-text-on-dark) !important; background:var(--color-brand-primary) !important; border-radius:var(--radius-pill) !important;
  height:auto !important; min-height:54px !important; display:flex !important; align-items:center !important; justify-content:center !important;
  padding:14px 30px !important; width:100% !important; box-shadow:var(--shadow-button) !important; transition:background 200ms ease !important;
}
.oh-contact-form-panel .wpforms-submit:hover{ background:var(--navy-700) !important; }
.oh-contact-form-panel .wpforms-confirmation-container-full{
  font-family:var(--font-body) !important; color:var(--navy-800) !important; text-align:center;
  background:var(--mist-100) !important; border:1px solid var(--color-border-subtle) !important; border-radius:var(--radius-lg) !important;
  padding:44px 32px !important; margin:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:16px !important;
}
.oh-contact-form-panel .wpforms-confirmation-container-full::before{
  content:""; width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:var(--teal-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/24px no-repeat;
}
.oh-contact-form-panel .wpforms-confirmation-container-full p{
  font-family:var(--font-display) !important; font-size:1.2rem !important; font-weight:var(--weight-regular) !important;
  color:var(--navy-800) !important; line-height:var(--leading-snug) !important; margin:0 !important; max-width:360px;
}

@media (max-width:900px){
  .oh-contact-form-panel .wpforms-field-container{ grid-template-columns:1fr !important; grid-template-rows:auto auto auto 1fr !important; }
  .oh-contact-form-panel .wpforms-field-name,
  .oh-contact-form-panel .wpforms-field-textarea{ grid-column:1 !important; }
  .oh-contact-form-panel .wpforms-field textarea{ min-height:220px !important; }
  .oh-contact-form-panel{ padding:var(--space-5); }
}

/* Google reCAPTCHA renders a fixed 304x78px widget that won't resize on its own.
   pages.js scales .g-recaptcha to match this container's width (same width as
   the message textarea) at every viewport size; this is a pre-JS safety net so
   it can never push the page into horizontal scroll before that runs. */
.oh-contact-form-panel .wpforms-recaptcha-container{ max-width:100%; overflow:visible; height:auto !important; }
.oh-contact-form-panel .wpforms-recaptcha-container .wpforms-error{ display:block; margin-top:6px; }
.oh-contact-form-panel .g-recaptcha{ width:304px !important; transform-origin:0 0; }