/* =============================================================================
 * Orpat premium content-page system  (About Us flagship + reusable components).
 * Consumes the brand tokens from orpat-premium.css (:root). EVERY corner uses the
 * shared radius scale (--o-radius-sm / --o-radius / --o-radius-lg / --o-radius-pill)
 * — no one-off values — so it stays consistent with the rest of the site.
 * Scope: everything lives under .opg-page so it never leaks into other templates.
 * ========================================================================== */
.opg-page{ --opg-max:1180px; color:var(--o-text,#2b2621); background:var(--o-cream,#fbf9f4);
  font-family:'Jost','Inter',-apple-system,Segoe UI,Roboto,sans-serif; overflow-x:clip; }
.opg-page *,.opg-page *::before,.opg-page *::after{ box-sizing:border-box; }
.opg-wrap{ max-width:var(--opg-max); margin:0 auto; padding:0 clamp(18px,5vw,40px); }
.opg-page section{ position:relative; }
.opg-serif{ font-family:var(--o-serif); font-weight:560; letter-spacing:-.01em; line-height:1.12; }
.opg-eyebrow{ font:700 .72rem/1 'Jost',sans-serif; letter-spacing:.24em; text-transform:uppercase;
  color:var(--o-brass-deep); display:inline-flex; align-items:center; gap:.7em; }
.opg-eyebrow::before{ content:""; width:26px; height:1px; background:var(--o-brass); }
.opg-eyebrow.is-light{ color:var(--o-brass-soft); }
.opg-eyebrow.is-light::before{ background:var(--o-brass-soft); }
.opg-lead{ font-size:clamp(1.02rem,1.35vw,1.18rem); line-height:1.7; color:var(--o-muted); max-width:66ch; }

/* Reveal-on-scroll (JS adds .is-in) */
.opg-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--o-ease),transform .8s var(--o-ease); }
.opg-reveal.is-in{ opacity:1; transform:none; }
.opg-reveal.d1{ transition-delay:.08s } .opg-reveal.d2{ transition-delay:.16s }
.opg-reveal.d3{ transition-delay:.24s } .opg-reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){ .opg-reveal{ opacity:1; transform:none; transition:none } }

/* Buttons — reuse the site's pill button language */
.opg-btn{ display:inline-flex; align-items:center; gap:.6em; border-radius:var(--o-radius-pill);
  padding:.9em 1.9em; font:600 .95rem/1 'Jost',sans-serif; letter-spacing:.01em; cursor:pointer;
  border:1px solid var(--o-ink); transition:transform .35s var(--o-ease),box-shadow .35s var(--o-ease),background .35s var(--o-ease),color .35s var(--o-ease); }
.opg-btn--solid{ background:var(--o-ink); color:var(--o-white); box-shadow:var(--o-shadow-sm); }
.opg-btn--solid:hover{ transform:translateY(-2px); box-shadow:var(--o-shadow); color:#fff; }
.opg-btn--ghost{ background:transparent; color:var(--o-ink); border-color:rgba(23,19,15,.28); }
.opg-btn--ghost:hover{ transform:translateY(-2px); border-color:var(--o-ink); }
.opg-btn--brass{ background:var(--o-brass); border-color:var(--o-brass); color:var(--o-ink); }
.opg-btn--brass:hover{ transform:translateY(-2px); background:var(--o-brass-deep); color:#fff; }
.opg-btn--on-ink{ background:transparent; color:var(--o-cream); border-color:rgba(216,195,156,.5); }
.opg-btn--on-ink:hover{ background:var(--o-brass); border-color:var(--o-brass); color:var(--o-ink); }

/* ---- HERO ---------------------------------------------------------------- */
.opg-hero{ background:radial-gradient(120% 130% at 78% 8%,var(--o-ink-2,#2a2320) 0%,var(--o-ink,#17130f) 52%,#0d0a07 100%);
  color:var(--o-cream,#fbf9f4); padding:clamp(70px,10vw,120px) 0 0; text-align:center; overflow:hidden; }
.opg-hero .opg-eyebrow{ justify-content:center; margin-bottom:22px; }
.opg-hero h1{ font-size:clamp(2.4rem,6vw,4.6rem); color:var(--o-cream,#fbf9f4); margin:.1em 0 .28em; }
.opg-hero h1 em{ font-style:italic; color:var(--o-brass-soft,#d8c39c); }
.opg-hero .opg-hero-deck{ font-size:clamp(1.05rem,1.7vw,1.35rem); color:#cfc4b2; max-width:44ch; margin:0 auto; }
.opg-clock{ width:min(320px,64vw); aspect-ratio:1; margin:38px auto 0; display:block; filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)); }
.opg-clock .opg-sec{ transform-origin:150px 150px; animation:opg-tick 60s steps(60) infinite; }
.opg-clock .opg-pend{ transform-origin:150px 150px; animation:opg-swing 2.4s var(--o-ease) infinite alternate; }
@keyframes opg-tick{ to{ transform:rotate(360deg) } }
@keyframes opg-swing{ from{ transform:rotate(-7deg) } to{ transform:rotate(7deg) } }
@media (prefers-reduced-motion:reduce){ .opg-clock .opg-sec,.opg-clock .opg-pend{ animation:none } }
.opg-hero-band{ margin-top:clamp(40px,6vw,70px); background:var(--o-cream); color:var(--o-text);
  border-radius:var(--o-radius-lg) var(--o-radius-lg) 0 0; padding:clamp(30px,5vw,52px) 0; }
.opg-hero-band .opg-wrap{ display:flex; gap:clamp(20px,4vw,50px); align-items:center; flex-wrap:wrap; justify-content:space-between; }
.opg-hero-band p{ font-family:var(--o-serif); font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.4; color:var(--o-ink); max-width:30ch; margin:0; }
.opg-hero-band .opg-cta{ display:flex; gap:12px; flex-wrap:wrap; }
/* About page: hero band is a single centred statement (CTAs removed). Scoped so global stays intact. */
.opg-about .opg-hero-band .opg-wrap{ justify-content:center; }
.opg-about .opg-hero-band p{ text-align:center; margin-inline:auto; }

/* ---- STAT BAND ----------------------------------------------------------- */
.opg-stats{ background:var(--o-cream); padding:clamp(20px,4vw,40px) 0 clamp(50px,7vw,80px); }
.opg-stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.opg-stat{ background:var(--o-white); border:1px solid var(--o-line); border-radius:var(--o-radius);
  padding:26px 18px; text-align:center; box-shadow:var(--o-shadow-sm); }
.opg-stat .n{ font-family:var(--o-serif); font-weight:600; color:var(--o-brass-deep); font-size:clamp(1.7rem,3vw,2.5rem); line-height:1; }
.opg-stat .l{ margin-top:9px; font-size:.82rem; letter-spacing:.02em; color:var(--o-muted); line-height:1.35; }
.opg-stat svg{ width:26px; height:26px; margin:0 auto 12px; display:block; color:var(--o-brass); }

/* ---- SECTION HEADS ------------------------------------------------------- */
.opg-sec-pad{ padding:clamp(58px,8vw,104px) 0; }
.opg-head{ max-width:64ch; }
.opg-head h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); color:var(--o-ink); margin:.35em 0 .4em; }
.opg-head.center{ margin-inline:auto; text-align:center; }
.opg-head.center .opg-eyebrow{ justify-content:center; }

/* ---- TIMELINE ------------------------------------------------------------ */
.opg-timeline{ position:relative; margin-top:48px; }
.opg-timeline .track{ position:absolute; left:0; right:0; top:26px; height:2px; background:var(--o-line); }
.opg-timeline .track i{ position:absolute; inset:0; width:var(--p,0%); background:linear-gradient(90deg,var(--o-brass),var(--o-brass-deep)); transition:width 1.4s var(--o-ease); }
.opg-tl-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.opg-tl{ text-align:center; }
.opg-tl .dot{ width:16px; height:16px; border-radius:var(--o-radius-pill); background:var(--o-cream);
  border:3px solid var(--o-brass); margin:18px auto 16px; position:relative; z-index:1; }
.opg-tl .yr{ font-family:var(--o-serif); font-weight:600; color:var(--o-ink); font-size:1.1rem; }
.opg-tl .t{ font-size:.9rem; color:var(--o-muted); margin-top:4px; line-height:1.4; }

/* ---- DIVISIONS ----------------------------------------------------------- */
.opg-divs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.opg-div{ background:var(--o-white); border:1px solid var(--o-line); border-radius:var(--o-radius-lg);
  padding:34px 30px; box-shadow:var(--o-shadow-sm); text-align:center;
  transition:transform .4s var(--o-ease),box-shadow .4s var(--o-ease); }
.opg-div:hover{ transform:translateY(-6px); box-shadow:var(--o-shadow); }
.opg-div .ic{ width:56px; height:56px; border-radius:var(--o-radius); background:var(--o-ivory);
  display:grid; place-items:center; color:var(--o-brass-deep); margin:0 auto 20px; }
.opg-div .ic svg{ width:30px; height:30px; }
.opg-div h3{ font-family:var(--o-serif); font-weight:600; font-size:1.3rem; color:var(--o-ink); margin:0 0 10px; }
.opg-div p{ font-size:.95rem; line-height:1.6; color:var(--o-muted); margin:0 0 14px; }
.opg-div .tags{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.opg-div .tags span{ font-size:.74rem; letter-spacing:.02em; color:var(--o-brass-deep);
  background:var(--o-ivory); border-radius:var(--o-radius-pill); padding:5px 12px; }

/* ---- INFOGRAPHIC (BLDC energy) ------------------------------------------- */
.opg-info{ background:var(--o-ivory); border-radius:var(--o-radius-lg); overflow:hidden;
  display:grid; grid-template-columns:1.05fr .95fr; gap:0; margin-top:44px; border:1px solid var(--o-line); }
.opg-info .txt{ padding:clamp(30px,4vw,52px); }
.opg-info .viz{ background:var(--o-ink); color:var(--o-cream); padding:clamp(30px,4vw,48px); display:flex; flex-direction:column; justify-content:center; }
.opg-bars{ display:flex; gap:28px; align-items:flex-end; height:230px; margin:46px 0 18px; }
.opg-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.opg-bar .col{ width:100%; max-width:96px; border-radius:var(--o-radius) var(--o-radius) 0 0; height:0; transition:height 1.3s var(--o-ease); position:relative; }
.opg-bar.a .col{ background:linear-gradient(180deg,#5b524a,#3a332d); }
.opg-bar.b .col{ background:linear-gradient(180deg,var(--o-brass-soft),var(--o-brass)); }
.opg-bar .w{ position:absolute; top:-26px; left:0; right:0; text-align:center; font-family:var(--o-serif); font-size:1.15rem; color:#fff; }
.opg-bar .cap{ margin-top:12px; font-size:.82rem; color:#cfc4b2; text-align:center; }
.opg-info .save{ font-family:var(--o-serif); font-size:clamp(1.2rem,2vw,1.6rem); color:var(--o-brass-soft); }
.opg-info ul{ list-style:none; margin:16px 0 0; padding:0; }
.opg-info li{ position:relative; padding:8px 0 8px 26px; font-size:.95rem; line-height:1.5; color:var(--o-muted); border-top:1px solid var(--o-line); }
.opg-info li:first-child{ border-top:0; }
.opg-info li::before{ content:""; position:absolute; left:0; top:14px; width:12px; height:12px; border-radius:var(--o-radius-pill); border:2px solid var(--o-brass); }

/* ---- MAKE-IN-INDIA RIBBON ------------------------------------------------ */
.opg-ribbon{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:40px; }
.opg-step{ background:var(--o-white); border:1px solid var(--o-line); border-radius:var(--o-radius); padding:22px 16px; text-align:center; position:relative; }
.opg-step .s{ font:700 .72rem/1 'Jost'; letter-spacing:.16em; color:var(--o-brass); }
.opg-step .ic{ width:40px; height:40px; margin:12px auto 10px; color:var(--o-ink); }
.opg-step .ic svg{ width:100%; height:100%; }
.opg-step h4{ font-size:.92rem; color:var(--o-ink); margin:0; font-weight:600; }
.opg-step:not(:last-child)::after{ content:"›"; position:absolute; right:-11px; top:50%; transform:translateY(-50%); color:var(--o-brass); font-size:1.3rem; z-index:2; }

/* ---- LEADERSHIP / QUOTE -------------------------------------------------- */
.opg-lead-band{ background:var(--o-ink); color:var(--o-cream); border-radius:var(--o-radius-lg); padding:clamp(36px,5vw,64px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,48px); align-items:center; margin-top:12px; }
.opg-medallion{ width:112px; height:112px; border-radius:var(--o-radius-pill); background:radial-gradient(circle at 32% 28%,var(--o-brass-soft),var(--o-brass) 55%,var(--o-brass-deep));
  display:grid; place-items:center; font-family:var(--o-serif); font-weight:600; font-size:2.2rem; color:var(--o-ink); box-shadow:0 16px 40px -12px rgba(0,0,0,.6); }
.opg-lead-band blockquote{ margin:0; font-family:var(--o-serif); font-size:clamp(1.2rem,2vw,1.7rem); line-height:1.4; color:#f2e9d8; }
.opg-lead-band .who{ margin-top:16px; font:600 .95rem/1 'Jost'; letter-spacing:.02em; color:var(--o-brass-soft); }
.opg-lead-band .who span{ display:block; color:#a89f92; font-weight:400; margin-top:4px; letter-spacing:0; }

/* ---- VISION + VALUES ----------------------------------------------------- */
.opg-vision{ font-family:var(--o-serif); font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.3; color:var(--o-ink); max-width:22ch; }
.opg-values{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:40px; }
.opg-val{ text-align:center; padding:26px 12px; border-radius:var(--o-radius); background:var(--o-white); border:1px solid var(--o-line); }
.opg-val .ic{ width:38px; height:38px; margin:0 auto 12px; color:var(--o-brass-deep); }
.opg-val .ic svg{ width:100%; height:100% }
.opg-val h4{ font-size:.98rem; color:var(--o-ink); margin:0 0 6px; font-weight:600; }
.opg-val p{ font-size:.8rem; color:var(--o-muted); margin:0; line-height:1.4; }

/* ---- SUSTAINABILITY ------------------------------------------------------ */
.opg-green{ background:linear-gradient(135deg,#14100b,#241d15); color:var(--o-cream); border-radius:var(--o-radius-lg);
  padding:clamp(40px,6vw,72px); display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,48px); align-items:center; }
.opg-green h2{ color:var(--o-cream); font-size:clamp(1.7rem,3vw,2.5rem); }
.opg-green p{ color:#cfc4b2; line-height:1.7; max-width:52ch; }
.opg-turbine{ width:140px; height:140px; color:var(--o-brass-soft); }
.opg-turbine .blades{ transform-origin:70px 62px; animation:opg-spin 8s linear infinite; }
@keyframes opg-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .opg-turbine .blades{ animation:none } }

/* ---- CTA ----------------------------------------------------------------- */
.opg-cta-band{ text-align:center; padding:clamp(56px,8vw,96px) 0; background:var(--o-cream); }
.opg-cta-band h2{ font-family:var(--o-serif); font-weight:600; font-size:clamp(1.9rem,3.6vw,3rem); color:var(--o-ink); max-width:18ch; margin:0 auto .3em; }
.opg-cta-band p{ color:var(--o-muted); max-width:52ch; margin:0 auto 28px; line-height:1.6; }
.opg-cta-band .row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---- RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1024px){
  .opg-stats-grid,.opg-values{ grid-template-columns:repeat(3,1fr); }
  .opg-tl-row,.opg-timeline .track{ grid-template-columns:repeat(5,1fr); }
  .opg-ribbon{ grid-template-columns:repeat(3,1fr); }
  .opg-step:nth-child(3)::after,.opg-step:last-child::after{ display:none; }
}
@media (max-width:820px){
  .opg-divs{ grid-template-columns:1fr; }
  .opg-info{ grid-template-columns:1fr; }
  .opg-green{ grid-template-columns:1fr; text-align:center; } .opg-turbine{ margin:0 auto; }
  .opg-lead-band{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .opg-hero-band .opg-wrap{ flex-direction:column; text-align:center; } .opg-hero-band .opg-cta{ justify-content:center; }
}
@media (max-width:560px){
  .opg-stats-grid,.opg-values{ grid-template-columns:repeat(2,1fr); }
  .opg-timeline .track{ display:none; } .opg-tl-row{ grid-template-columns:1fr 1fr; gap:24px; }
  .opg-ribbon{ grid-template-columns:1fr 1fr; } .opg-step::after{ display:none !important; }
}

/* =============================================================================
 * SINGLE ARTICLE — premium reading template (shared by all blog posts)
 * ========================================================================== */
.opg-article .opg-art-hero{ background:var(--o-cream); padding:clamp(48px,7vw,88px) 0 clamp(24px,4vw,40px); text-align:center; }
.opg-art-head{ max-width:60rem; }
.opg-art-head .opg-eyebrow{ justify-content:center; }
.opg-art-head h1{ font-size:clamp(1.9rem,4.4vw,3.2rem); color:var(--o-ink); margin:.5em auto .55em; max-width:22ch; }
.opg-art-meta{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--o-muted); font-size:.9rem; letter-spacing:.02em; }
.opg-art-meta .dot{ width:4px; height:4px; border-radius:var(--o-radius-pill); background:var(--o-brass); }
/* Full-bleed banner (edge to edge), image covered — never stretched/distorted */
.opg-art-figure{ width:100%; margin:clamp(22px,3.5vw,40px) 0 0; overflow:hidden; height:clamp(220px,36vw,440px); }
.opg-art-figure img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* No align-items:start — the TOC column stretches to full article height so its
   sticky inner tracks the scroll all the way to the end of the body text. */
.opg-art-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(28px,5vw,64px);
  padding:clamp(40px,6vw,72px) clamp(18px,5vw,40px); }
/* TOC */
.opg-toc-inner{ position:sticky; top:110px; }
.opg-toc-title{ font:700 .72rem/1 'Jost'; letter-spacing:.2em; text-transform:uppercase; color:var(--o-brass-deep); margin:0 0 14px; }
.opg-toc-nav{ display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--o-line); }
.opg-toc-nav a{ font-size:.9rem; line-height:1.4; color:var(--o-muted); text-decoration:none; padding:7px 0 7px 16px;
  margin-left:-2px; border-left:2px solid transparent; transition:color .25s var(--o-ease),border-color .25s var(--o-ease); }
.opg-toc-nav a:hover{ color:var(--o-ink); }
.opg-toc-nav a.is-active{ color:var(--o-brass-deep); border-left-color:var(--o-brass); font-weight:500; }
.opg-toc-nav a.lvl3{ padding-left:28px; font-size:.84rem; }
.opg-toc-cta{ display:inline-block; margin-top:20px; font:600 .85rem/1 'Jost'; color:var(--o-ink); text-decoration:none;
  border-bottom:1px solid var(--o-brass); padding-bottom:3px; }

/* Article body typography */
.opg-article-body{ max-width:70ch; font-size:clamp(1.02rem,1.25vw,1.14rem); line-height:1.85; color:var(--o-text); }
.opg-article-body > *:first-child{ margin-top:0; }
.opg-article-body p{ margin:0 0 1.35em; }
.opg-article-body h2{ font-family:var(--o-serif); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.05rem);
  color:var(--o-ink); line-height:1.2; margin:1.9em 0 .6em; scroll-margin-top:100px; }
.opg-article-body h3{ font-family:var(--o-serif); font-weight:600; font-size:clamp(1.22rem,2vw,1.5rem);
  color:var(--o-ink); margin:1.6em 0 .5em; scroll-margin-top:100px; }
.opg-article-body h4{ font-weight:600; font-size:1.1rem; color:var(--o-ink); margin:1.4em 0 .4em; }
.opg-article-body a{ color:var(--o-brass-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.opg-article-body a:hover{ color:var(--o-ink); }
.opg-article-body ul,.opg-article-body ol{ margin:0 0 1.4em; padding-left:1.4em; }
.opg-article-body li{ margin:0 0 .55em; padding-left:.3em; }
.opg-article-body ul li::marker{ color:var(--o-brass); }
.opg-article-body ol li::marker{ color:var(--o-brass-deep); font-family:var(--o-serif); }
.opg-article-body img,.opg-article-body figure img{ max-width:100%; height:auto; border-radius:var(--o-radius); box-shadow:var(--o-shadow-sm); margin:1.4em 0; }
.opg-article-body figure{ margin:1.6em 0; } .opg-article-body figcaption{ font-size:.85rem; color:var(--o-muted); text-align:center; margin-top:.6em; }
.opg-article-body blockquote{ margin:1.6em 0; padding:6px 0 6px 26px; border-left:3px solid var(--o-brass);
  font-family:var(--o-serif); font-size:1.2rem; line-height:1.5; color:var(--o-ink); font-style:italic; }
.opg-article-body strong{ color:var(--o-ink); font-weight:600; }
.opg-article-body hr{ border:0; height:1px; background:var(--o-line); margin:2.4em 0; }
.opg-article-body table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.95rem;
  border:1px solid var(--o-line); border-radius:var(--o-radius); overflow:hidden; }
.opg-article-body th{ background:var(--o-ink); color:var(--o-cream); font-weight:600; text-align:left; padding:12px 16px; }
.opg-article-body td{ padding:11px 16px; border-top:1px solid var(--o-line); }
.opg-article-body tr:nth-child(even) td{ background:var(--o-cream); }

/* Related */
.opg-related{ background:var(--o-ivory); }
.opg-rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.opg-rel{ display:flex; flex-direction:column; background:var(--o-white); border:1px solid var(--o-line);
  border-radius:var(--o-radius-lg); overflow:hidden; text-decoration:none; box-shadow:var(--o-shadow-sm);
  transition:transform .4s var(--o-ease),box-shadow .4s var(--o-ease); }
.opg-rel:hover{ transform:translateY(-6px); box-shadow:var(--o-shadow); }
.opg-rel-img{ display:block; aspect-ratio:16/10; background:var(--o-ivory) center/cover no-repeat; }
.opg-rel-cat{ font:700 .68rem/1 'Jost'; letter-spacing:.16em; text-transform:uppercase; color:var(--o-brass-deep); padding:20px 22px 0; }
.opg-rel-title{ font-size:1.12rem; color:var(--o-ink); line-height:1.3; padding:10px 22px 24px; }

@media (max-width:900px){
  .opg-art-layout{ grid-template-columns:1fr; }
  .opg-toc{ display:none; }
  .opg-article-body{ max-width:none; }
  .opg-rel-grid{ grid-template-columns:1fr; }
}

/* =============================================================================
 * BLOG LISTING / POST ARCHIVE
 * ========================================================================== */
.opg-blog-hero{ background:var(--o-cream); padding:clamp(52px,8vw,96px) 0 clamp(20px,3vw,34px); text-align:center; }
.opg-blog-hero .opg-eyebrow{ justify-content:center; }
.opg-blog-hero h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); color:var(--o-ink); margin:.4em auto .3em; }
.opg-blog-desc{ font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.6; color:var(--o-muted); max-width:56ch; margin:0 auto; }
.opg-post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.opg-post-card{ display:flex; flex-direction:column; background:var(--o-white); border:1px solid var(--o-line);
  border-radius:var(--o-radius-lg); overflow:hidden; text-decoration:none; box-shadow:var(--o-shadow-sm);
  transition:transform .4s var(--o-ease),box-shadow .4s var(--o-ease); }
.opg-post-card:hover{ transform:translateY(-6px); box-shadow:var(--o-shadow); }
.opg-pc-img{ aspect-ratio:16/10; background:var(--o-ivory) center/cover no-repeat; display:block; }
.opg-pc-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.opg-pc-cat{ font:700 .68rem/1 'Jost'; letter-spacing:.16em; text-transform:uppercase; color:var(--o-brass-deep); }
.opg-pc-title{ font-size:1.2rem; line-height:1.28; color:var(--o-ink); margin:11px 0 9px; }
.opg-pc-excerpt{ font-size:.94rem; line-height:1.55; color:var(--o-muted); flex:1; }
.opg-pc-meta{ display:flex; align-items:center; gap:9px; margin-top:16px; font-size:.82rem; color:var(--o-muted); }
.opg-pc-meta .dot{ width:4px; height:4px; border-radius:var(--o-radius-pill); background:var(--o-brass); }
.opg-pagination{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:clamp(36px,5vw,60px); }
.opg-pagination .page-numbers{ display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 12px;
  border-radius:var(--o-radius-pill); border:1px solid var(--o-line); background:var(--o-white); color:var(--o-ink);
  font:500 .95rem/1 'Jost'; text-decoration:none; transition:all .3s var(--o-ease); }
.opg-pagination .page-numbers:hover{ border-color:var(--o-brass); color:var(--o-brass-deep); }
.opg-pagination .page-numbers.current{ background:var(--o-ink); color:var(--o-white); border-color:var(--o-ink); }
.opg-pagination .page-numbers.dots{ border:0; background:transparent; }
@media (max-width:900px){ .opg-post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .opg-post-grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
 * About Us hero — GUARANTEED-legible override.
 * The heading was rendering invisible on staging even after token fallbacks.
 * This appended, high-specificity + !important rule wins the cascade over any
 * WoodMart/Elementor-kit heading colour AND pins a solid dark hero background
 * (literal hex, no token dependency) so cream text always shows. Documented
 * !important use per project CSS policy (overriding theme/generated CSS).
 * ------------------------------------------------------------------------- */
.opg-page.opg-about .opg-hero{ background-color:#17130f !important; }
/* Target the heading BY CLASS within the hero wrap — the a11y script relabels the hero <h1>
   to <h2>, which drops the tag-based .opg-hero h1 rule (size + colour). .opg-serif survives the
   relabel, so this stays legible whether the heading is h1 or h2. Also restore the hero size. */
.opg-page.opg-about .opg-hero > .opg-wrap > .opg-serif{ color:#fbf9f4 !important; font-size:clamp(2.4rem,6vw,4.6rem) !important; }
.opg-page.opg-about .opg-hero > .opg-wrap > .opg-serif em{ color:#d8c39c !important; }
.opg-page.opg-about .opg-hero .opg-eyebrow.is-light{ color:#d8c39c !important; }
.opg-page.opg-about .opg-hero .opg-hero-deck{ color:#cfc4b2 !important; }