@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Poppins:wght@300;400;500;600;700&display=swap');

: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); } }