/* =============================================================================
 * 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; }
.opg-head.center .opg-lead{ margin-inline:auto; }
/* About Us section heads. This page's markup lives in post 31's Gutenberg content,
   where only the "Designed & made in India" block carries .center — the other three
   heads (Our story, Stewardship, What guides us) do not. Centre them all here rather
   than editing post content, so the fix ships with the theme.
   The inner .opg-lead / .opg-vision need their own auto margins because each has its
   own max-width (66ch / 22ch) and would otherwise stay flush left inside the
   centred block.  Rollback: delete this rule. */
.opg-about .opg-head{ margin-inline:auto; text-align:center; }
.opg-about .opg-head .opg-lead{ margin-inline:auto; }
.opg-about .opg-vision{ margin-inline:auto; text-align: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; }