/* 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; }
}