/*
 * OCMB Digital 2027 PRO 2.8.0
 * Final public-facing layer. It is deliberately additive: existing WordPress
 * modules, images and links stay editable, while the page reads faster on a
 * phone and keeps the free quotation within reach.
 */
:root{
  --ocmb-radius:12px;
  --ocmb-radius-lg:18px;
  --ocmb-focus:#0b78bd;
}

html{scroll-padding-top:78px}
body{background:#fff;color:var(--ink);text-rendering:optimizeLegibility}
body::selection{background:#ccecff;color:#071b30}
.ocmb-front .site-header{box-shadow:0 1px 0 rgba(9,37,67,.08)}

/* Give the first viewport a clear action, then reduce the visual noise. */
.hero{min-height:560px}
.hero-grid{grid-template-columns:minmax(0,1fr) 286px;gap:32px;padding:64px 0 58px}
.hero h1{max-width:680px;font-size:clamp(44px,4.65vw,67px);line-height:.97}
.hero-lead{max-width:600px;font-size:15px;line-height:1.62}
.hero-panel{border:1px solid rgba(255,255,255,.84);border-radius:var(--ocmb-radius-lg)}
.hero-panel h2{font-size:23px}
.hero-actions .btn{min-height:48px}

.quick-actions-section{margin-top:-23px}
.quick-actions{gap:8px}
.quick-action{min-height:124px;padding:18px;border-radius:var(--ocmb-radius)}
.quick-action strong{margin:10px 0 6px;font-size:18px}
.quick-action:hover{transform:translateY(-2px)}

/* A compact page rhythm helps people find an answer without endless scrolling. */
.ocmb-section{padding:60px 0}
.section-head{margin-bottom:23px}
.section-head h2,.quote-section h2,.ready-section h2,.local-section h2{font-size:clamp(32px,3.45vw,51px);max-width:700px}
.section-head>p,.section-lead{font-size:14px;line-height:1.6}
.path-grid,.material-grid,.trust-grid,.offer-preview,.faq-grid{gap:8px}
.path-card{min-height:180px;padding:19px;border-radius:var(--ocmb-radius)}
.path-card h3{margin:25px 0 7px;font-size:20px}
.material-card{min-height:184px;padding:19px;border-radius:var(--ocmb-radius)}
.material-card.featured{min-height:222px}
.material-card__image{height:104px;margin:-19px -19px 13px}
.material-card.featured .material-card__image{height:118px;margin:-19px -19px 14px}
.material-card h3{font-size:21px}
.material-card p,.path-card p,.trust-grid p,.offer-card p{font-size:11px;line-height:1.52}
.quote-grid{gap:30px}
.quote-box{padding:19px;border-radius:var(--ocmb-radius-lg)}
.ready-section,.ribbon-section,.trust-section,.realization-section,.local-section,.faq-section,.four-d-section{padding:60px 0}
.offer-card{min-height:160px;padding:16px;border-radius:var(--ocmb-radius)}
.offer-card__image{height:90px;margin:-16px -16px 11px}
.trust-grid article{min-height:154px;padding:18px;border-radius:var(--ocmb-radius)}
.trust-grid .module-number+h3,.trust-grid h3{margin:22px 0 7px;font-size:18px}
.realization-grid{gap:9px}
.realization-card{border-radius:var(--ocmb-radius)}
.realization-card__body{padding:15px}
.realization-card__body h3{font-size:19px}
.realization-card--lead .realization-card__body h3{font-size:24px}
.local-map{height:310px;border-radius:var(--ocmb-radius-lg)}
.faq-grid details{padding:15px;border-radius:var(--ocmb-radius)}
.four-d-mark{border-radius:var(--ocmb-radius-lg)}

/* A compact social proof module. It does not embed a heavy external feed;
 * each card is a direct, editable link so the homepage stays quick on mobile. */
.social-section{background:linear-gradient(135deg,#f3f8fc 0%,#fff 67%)}
.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.social-card{display:flex;min-height:185px;flex-direction:column;padding:20px;border:1px solid rgba(9,37,67,.12);border-radius:var(--ocmb-radius);background:#fff;color:var(--ink);box-shadow:0 8px 20px rgba(14,43,74,.05);transition:transform .18s ease,box-shadow .18s ease}
.social-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,43,74,.1)}
.social-card>span{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.12em}
.social-card h3{margin:17px 0 8px;font-size:21px;line-height:1.1}
.social-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.social-card b{margin-top:auto;padding-top:16px;color:var(--red);font-size:13px}

/* No automatic dark variant: the same high-contrast interface is shown on
 * every phone, so a browser's colour preference cannot make the site look
 * like a different theme. */
.site-footer,.four-d-section{color:inherit}

/* Visible controls for keyboard, touch and assistive-tech users. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid color-mix(in srgb,var(--ocmb-focus) 62%,white);
  outline-offset:3px;
}
.btn,.quick-action,.path-card,.material-card,.offer-card,.realization-card__link{touch-action:manipulation}

/* Quote form: contrast and target size stay intact when the page is displayed
 * in a narrow mobile browser or at large text settings. */
.ocmb-quote-form button,.ocmb-quote-form input,.ocmb-quote-form select,.ocmb-quote-form textarea{min-height:46px}
.ocmb-quote-form textarea{min-height:112px}
.form-choices label{min-height:48px}

@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:22px}
  .hero-panel{max-width:520px}
  .quote-grid{gap:24px}
  .material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:680px){
  html{scroll-padding-top:70px}
  .header-inner{height:68px}
  .hero{min-height:0}
  .hero-grid{padding:47px 0 38px;gap:18px}
  .hero h1{font-size:clamp(39px,11.2vw,52px);letter-spacing:-.058em}
  .hero-lead{font-size:14px}
  .hero-panel{padding:17px}
  .hero-panel h2{font-size:21px}
  .quick-actions-section{margin-top:0;padding:8px 0 4px}
  .quick-action{min-height:110px;padding:16px}
  .quick-action strong{font-size:17px}
  .ocmb-section{padding:47px 0}
  .section-head{margin-bottom:19px}
  .section-head h2,.quote-section h2,.ready-section h2,.local-section h2{font-size:clamp(29px,8.7vw,40px)}
  .section-head>p,.section-lead{font-size:13px}
  .path-card,.material-card,.material-card.featured{min-height:0;padding:17px}
  .path-card h3{margin-top:21px;font-size:19px}
  .material-card__image,.material-card.featured .material-card__image{height:136px;margin:-17px -17px 13px}
  .quote-box{padding:15px}
  .ready-section,.ribbon-section,.trust-section,.realization-section,.local-section,.faq-section,.four-d-section{padding:47px 0}
  .ticker-logo{width:126px;min-height:72px}
  .local-map{height:255px}
  .social-grid{grid-template-columns:1fr}
  .social-card{min-height:0;padding:18px}
}

@media(prefers-reduced-motion:reduce){
  .quick-action:hover,.btn:hover{transform:none}
}