/* OBI Advisory refinement layer */
body{font-size:17px}
.primary-nav a,.submenu-toggle{font-size:13px}
.submenu li a{font-size:12px}
.header-cta,.btn{font-size:11px}
.eyebrow{font-size:11px}
.hero__content p{font-size:15px;line-height:1.75}
.about-copy p{font-size:13.5px;line-height:1.78}
.why-grid h3{font-size:12.5px}
.why-grid p{font-size:10.5px;line-height:1.6}
.section-heading>p{font-size:12.5px}
.section-heading--dark>p{font-size:13px}
.service-card h3{font-size:13px}
.service-card__more{font-size:10px}
.industry-card h3{font-size:12.5px}
.industry-card p{font-size:9.7px}
.impact-copy p,.contact-copy>p{font-size:13px}
.stats-card p{font-size:10px}
.contact-list strong{font-size:11.5px}
.footer-brand p,.footer-cta p{font-size:10.8px}
.footer-col li a,.footer-contact>a,.footer-contact>div{font-size:10.2px}

/* exact brand logo */
.site-brand{width:118px;height:54px;background:url('../images/obi-logo.webp') left center/contain no-repeat;transform:none}
.site-brand__mark,.site-brand__text{display:none!important}
.about-image-wrap{position:relative;overflow:hidden}
.about-image-wrap::after{content:"";position:absolute;left:18px;top:18px;width:112px;height:70px;background:url('../images/obi-logo.webp') left top/contain no-repeat;filter:drop-shadow(0 2px 4px rgba(255,255,255,.45));z-index:2;pointer-events:none}
.footer-wordmark{display:block;width:170px;height:80px;background:url('https://obiadvisory.com/wp-content/uploads/2026/09/OBI-Advisory-White-Logo-–-Business-Consulting-and-Advisory-Services-Pakistan.png') left center/contain no-repeat}
.footer-wordmark>*{display:none!important}

.page-hero{padding:82px 0;background:linear-gradient(135deg,#05283F 0%,#0B3C5D 100%);color:#fff;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.07);border-radius:50%;right:-130px;top:-250px}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{margin:8px 0 0;max-width:900px;font-size:46px;line-height:1.08;text-transform:uppercase}
.page-hero p{max-width:760px;margin:17px 0 0;color:rgba(255,255,255,.76);font-size:14px;line-height:1.8}
.content-section{padding:68px 0}
.content-prose{max-width:900px}
.content-prose--wide{max-width:980px}
.content-prose h2,.inner-split h2,.contact-page-info h2{color:#05283F;font-size:34px;line-height:1.15;text-transform:uppercase;margin:8px 0 18px}
.content-prose p,.inner-split p,.contact-page-info>p,.legal-copy p{color:#68737D;font-size:14px;line-height:1.85;margin:0 0 18px}
.inner-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:64px;align-items:center}
.image-card{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 14px 38px rgba(5,40,63,.09);min-height:390px}
.image-card>img{width:100%;height:390px;object-fit:cover;display:block}
.feature-grid,.timeline-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.expertise-grid,.insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feature-grid article,.timeline-grid article,.expertise-grid article,.insight-grid article{background:#fff;border:1px solid #E3E8EC;padding:28px 24px;border-radius:5px;min-height:185px;box-shadow:0 8px 24px rgba(5,40,63,.035)}
.feature-grid article>span,.timeline-grid article>span,.insight-grid article>span{display:inline-flex;color:#C8A24A;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:16px}
.feature-grid h3,.timeline-grid h3,.expertise-grid h3,.insight-grid h3{color:#05283F;font-size:17px;line-height:1.35;margin:0 0 10px}
.feature-grid p,.timeline-grid p,.expertise-grid p,.insight-grid p{color:#68737D;font-size:12.5px;line-height:1.7;margin:0}
.expertise-grid article{border-top:3px solid #C8A24A}
.faq-list{max-width:980px}
.faq-list details{background:#fff;border:1px solid #E3E8EC;border-radius:5px;margin-bottom:14px;box-shadow:0 8px 22px rgba(5,40,63,.03)}
.faq-list summary{cursor:pointer;list-style:none;color:#05283F;font-size:16px;font-weight:700;padding:20px 24px;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:24px;color:#C8A24A;font-size:22px;top:15px}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{padding:0 24px 22px;margin:0;color:#68737D;font-size:13px;line-height:1.8}
.service-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.service-detail-card{position:relative;display:block;text-decoration:none;background:#fff;border:1px solid #E3E8EC;padding:30px;border-radius:5px;transition:.25s;overflow:hidden}
.service-detail-card:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(5,40,63,.09);border-color:rgba(200,162,74,.5)}
.service-detail-card__line{position:absolute;left:0;top:0;width:5px;height:100%;background:#C8A24A}
.service-detail-card h2{margin:0 0 11px;color:#05283F;font-size:20px;line-height:1.35}
.service-detail-card p{margin:0 0 18px;color:#68737D;font-size:13px;line-height:1.7}
.service-detail-card strong{color:#C8A24A;font-size:11px;text-transform:uppercase}
.inner-split--service{align-items:start}
.service-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px}
.service-sidebar{background:#05283F;color:#fff;padding:30px;border-radius:5px;position:sticky;top:25px}
.service-sidebar h3{margin:0 0 10px;font-size:22px}
.service-sidebar p{color:rgba(255,255,255,.72);font-size:13px}
.service-sidebar a{display:block;color:#C8A24A;text-decoration:none;font-weight:600;margin-top:10px;font-size:13px}
.service-sidebar .btn{color:#fff!important;margin-top:24px;text-align:center}
.inner-cta{padding:0 0 68px}
.inner-cta__box{background:linear-gradient(135deg,#05283F,#0B3C5D);padding:38px 44px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#fff}
.inner-cta__box h2{font-size:28px;text-transform:uppercase;margin:6px 0}
.inner-cta__box p{margin:0;color:rgba(255,255,255,.7);font-size:13px}
.contact-page-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.contact-page-map{width:100%;height:280px;border:0;border-radius:5px;margin-top:26px}
.contact-form-card--page{background:#fff;border:1px solid #E3E8EC;border-radius:5px;box-shadow:0 14px 38px rgba(5,40,63,.09);padding:34px}
.contact-form-card select{width:100%;height:42px;border:1px solid #E0E5E9;background:#FAFBFC;border-radius:3px;color:#333;padding:0 12px;font-size:10.5px}
.form-note{color:#68737D;font-size:10px;line-height:1.5;margin:12px 0 0}
.form-notice{font-size:11px;line-height:1.6;margin:0 0 16px;padding:11px 13px;background:#F8F9FB;border:1px solid #E3E8EC;border-left:3px solid #C8A24A;border-radius:3px;color:#05283F}
.form-notice--error{border-left-color:#B3261E;color:#7A1F16}
.legal-copy{max-width:900px}
.legal-copy h2{color:#05283F;font-size:24px;margin:28px 0 10px}
.legal-copy a{color:#0B3C5D;font-weight:600}

@media(max-width:980px){.inner-split,.contact-page-grid{grid-template-columns:1fr}.feature-grid,.timeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.expertise-grid,.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-sidebar{position:static}.inner-cta__box{flex-direction:column;align-items:flex-start}.service-list-grid{grid-template-columns:1fr}.page-hero h1{font-size:38px}.site-brand{width:105px}}
@media(max-width:600px){body{font-size:16px}.hero__content p{font-size:13px}.about-copy p{font-size:13px}.feature-grid,.timeline-grid,.expertise-grid,.insight-grid,.service-feature-grid{grid-template-columns:1fr}.content-prose h2,.inner-split h2,.contact-page-info h2{font-size:26px}.content-prose p,.inner-split p,.contact-page-info>p{font-size:13px}.page-hero{padding:54px 0}.page-hero h1{font-size:30px}.page-hero p{font-size:13px}.service-detail-card{padding:24px}.inner-cta__box{padding:28px 22px}.inner-cta__box h2{font-size:23px}.about-image-wrap::after{width:86px;height:55px;left:12px;top:12px}.footer-wordmark{width:145px;height:70px}}
/* ============================================================
   READABILITY PASS — 2026-10-22 (typography scale-up)
   Raja's standing feedback: body/card/footer/form text rendered
   at 7.5–12.5px. This section raises every readable text size to
   a legible minimum WITHOUT touching the heading hierarchy,
   colours or layout structure. style.css is unchanged; this layer
   is the override, per the repo's refinements pattern (decision
   doc §5.4). Audit: rebuild_2026-10-22/typography_audit.md
   ============================================================ */

/* --- Body / paragraph text: floor ~15px --- */
.hero__content p{font-size:16px}
.about-copy p{font-size:15.5px}
.section-heading>p{font-size:15px}
.section-heading--dark>p{font-size:15px}
.impact-copy p,.contact-copy>p{font-size:15px}
.content-prose p,.inner-split p,.contact-page-info>p,.legal-copy p{font-size:15.5px}
.page-hero p{font-size:15.5px}

/* --- Card text: descriptions floor 14px, card headings 14.5px --- */
.why-grid h3{font-size:14px}
.why-grid p{font-size:14px}
.service-card h3{font-size:14.5px}
.service-card__more{font-size:13px}
.industry-card h3{font-size:14.5px}
.industry-card p{font-size:14px}
.stats-card p{font-size:13px}
.feature-grid p,.timeline-grid p,.expertise-grid p,.insight-grid p{font-size:14px}
.service-detail-card p{font-size:14.5px}
.service-sidebar p,.service-sidebar a{font-size:14px}
.faq-list details p{font-size:14.5px}
.inner-cta__box p{font-size:14px}

/* --- Buttons / nav / labels: tiny sizes up to 12–14px --- */
.primary-nav a,.submenu-toggle{font-size:14px}
.submenu li a{font-size:13px}
.header-cta,.btn{font-size:12.5px}
.eyebrow{font-size:12px}
.feature-grid article>span,.timeline-grid article>span,.insight-grid article>span{font-size:12px}

/* --- Forms: labels readable; fields 16px (also stops iOS focus-zoom) --- */
.contact-form-card label{font-size:12.5px}
.contact-form-card input,.contact-form-card textarea{font-size:16px}
.contact-form-card select{font-size:16px}
.form-note{font-size:12.5px}
.form-notice{font-size:13px}

/* --- Contact block captions / values --- */
.contact-list small{font-size:12px}
.contact-list strong{font-size:14px}

/* --- Footer: floor 12–13.5px --- */
.footer-brand p,.footer-cta p{font-size:13.5px}
.footer-col h3{font-size:14px}
.footer-col li a,.footer-contact>a,.footer-contact>div{font-size:13px}
.footer-contact small{font-size:11.5px}
.footer-more{font-size:12.5px}
.footer-bottom p,.footer-bottom a{font-size:12px}

/* --- Small screens: hold the same floors instead of shrinking back down --- */
@media(max-width:600px){
.hero__content p{font-size:15px}
.about-copy p{font-size:15px}
.content-prose p,.inner-split p,.contact-page-info>p{font-size:15px}
.page-hero p{font-size:15px}
.why-grid p,.industry-card p{font-size:13.5px}
.footer-col li a,.footer-contact>a,.footer-contact>div{font-size:12.5px}
}
@media(max-width:480px){
.hero__actions .btn{font-size:11px}
}

/* ============================================================
   FOOTER TABLET FIX — visual QA 2026-10-22
   Base .footer-grid keeps 4 columns (min widths sum ~970px)
   until the 767px breakpoint, so 768–1019px viewports overflowed
   horizontally (footer contact column reached 995px at 768px).
   Collapse to 2 columns in that band, mirroring the <=767px rule.
   ============================================================ */
@media (max-width: 1020px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-contact { grid-column: 1 / -1; }
}
.footer-contact > a, .footer-contact > div { min-width: 0; }
.footer-contact span, .footer-contact a { overflow-wrap: anywhere; }

/* ============================================================
   FIXES — 2026-10-22 (Raja's orders)
   1) Impact section: while SHOW_STATS is false the stats card is
      not rendered, so the base 2-column .impact-grid left a large
      empty right column. The .impact-grid--full variant (added by
      index.php only when stats are hidden) makes the section a
      single column with the copy at a comfortable reading width,
      left-aligned like the site's other sections. When stats are
      re-enabled the original 2-column layout is untouched.
   2) Sticky header: .site-header sticks to the top (base style.css
      has it position:relative with z-index:100; the .is-scrolled
      shadow already exists). Anchor targets get scroll-margin so
      in-page jumps are not hidden under the stuck header. The
      mobile nav panel is fixed at top:76px and the header is 76px
      tall at <=980px, so the panel still opens flush beneath it.
   3) Our Team page: originally a grid of large portrait cards;
      restyled later the same day (see TEAM RESTYLE block below).
   ============================================================ */
.impact-grid--full { grid-template-columns: 1fr; }
.impact-grid--full .impact-copy { max-width: 920px; }

.site-header { position: sticky; top: 0; }
section[id] { scroll-margin-top: 96px; }

/* ============================================================
   TEAM RESTYLE — 2026-10-22 (Raja's order)
   The original .team-grid/.team-card rules (large 3-col portrait
   cards) were removed: grep verified they were used only by the
   Our Team page, which no longer uses them. New layout per Raja:
   on desktop ALL six photos sit together on ONE side as a tight
   collage (2 cols x 3 rows, small captions); the other side is
   content — a team intro plus the full roster (name + designation).
   No alternating photo/content rows. At <=860px the layout stacks:
   photo block first, then content.
   Second restyle (Raja, later 2026-10-22): photos SMALLER and
   CIRCULAR — the collage is now 3 cols x 2 rows of round portraits
   (max 152px diameter, square centre-top crop so faces stay in
   frame, thin gold ring instead of the old top border), name
   caption centred under each circle. Circles shrink fluidly with
   the column on smaller screens (still 3 across when stacked).
   Third restyle (Raja, later still, with a reference image): the
   photo side becomes a ZIGZAG member wall — 2 columns of member
   items, each a small circular photo (~110px, gold ring) with the
   member's name + designation beside it; the SECOND column is
   dropped by 52px so the pairs stagger like an advisors wall.
   Names/designations now live with the photos, so the old roster
   list is gone from the content side — replaced by an extra intro
   paragraph (adapted from the verified About copy) and a small
   Call/Email/Visit contact strip (config values, same as footer).
   At <=860px the wall stacks to one column: stagger removed, even
   items get a slight 26px alternating indent instead.
   ============================================================ */
.team-layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.team-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; align-items: start; }
.team-member { display: flex; align-items: center; gap: 14px; min-width: 0; }
.team-member:nth-child(even) { margin-top: 52px; }
.team-member img { flex: 0 0 auto; display: block; width: 110px; height: 110px; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; background: #05283F; border-radius: 50%; border: 3px solid #C8A24A; }
.team-member__info { min-width: 0; }
.team-member__info strong { display: block; color: #05283F; font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.team-member__info span { display: block; color: #C8A24A; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; line-height: 1.45; margin-top: 4px; }
.team-content h3 { color: #05283F; font-size: 22px; line-height: 1.3; margin: 0 0 14px; }
.team-content p { color: #4E5860; font-size: 15px; line-height: 1.75; margin: 0 0 16px; }
.team-contact { margin-top: 26px; background: #F8F9FB; border: 1px solid #E3E8EC; border-radius: 5px; padding: 6px 20px; }
.team-contact a, .team-contact > div { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; text-decoration: none; border-bottom: 1px solid #E3E8EC; }
.team-contact a:last-child, .team-contact > div:last-child { border-bottom: 0; }
.team-contact small { flex: 0 0 62px; color: #68737D; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.team-contact strong { color: #05283F; font-size: 14.5px; line-height: 1.45; }
.team-contact a:hover strong { color: #C8A24A; }
@media (max-width: 860px) {
  .team-layout { grid-template-columns: 1fr; gap: 32px; }
  .team-members { grid-template-columns: 1fr; gap: 20px; }
  .team-member:nth-child(even) { margin-top: 0; margin-left: 26px; }
  .team-member img { width: 96px; height: 96px; }
}

/* ============================================================
   LOGO FIX — 2026-10-22 (Raja: "logo nazar nahi aa raha")
   The header brand is now the firm's REAL logo image (the old
   WP site's header logo, hosted in wp-content/uploads) as an
   <img class="site-brand__logo"> inside the .site-brand link.
   The earlier treatment — .site-brand as a 118x54 box with a
   background url('../images/obi-logo.webp') and the mark/text
   divs hidden — is neutralised below so nothing competes with
   or clips the image; the mark/text markup is also removed
   from header.php.
   ============================================================ */
.site-brand { width: auto; height: auto; background: none; }
.site-brand__logo { display: block; height: 46px; width: auto; max-width: 220px; object-fit: contain; }
@media (min-width: 641px) and (max-width: 1020px) { .site-brand__logo { height: 50px; } }
@media (max-width: 640px) { .site-brand__logo { height: 58px; max-width: 72vw; } }