/* GEO page: only the components no other page already has.
   Everything else (surfaces, heads, cards, columns, panels, accordion, CTA band, author box,
   type scale) comes from bhp-csp.css and the sibling page sheets, which is why the page carries
   every bhp-* scope class. */

/* ---------- 1. hero ---------- */
/* His eyebrow is a full sentence, far longer than the two or three words every other page puts
   there, and it was painting straight across the column and under the device. The paragraph
   computes to white-space:nowrap with no rule in any stylesheet setting it and no inline style,
   so it is forced back to wrapping here rather than chased further. Scoped to this page, so no
   other eyebrow changes. */
.bhp-geo.chero-el .eyebrow,
.bhp-geo.chero-el .eyebrow p{white-space:normal!important;text-wrap:wrap!important;
  max-width:46ch}

/* the argument sits under the device, at reading width */
.bhp-geo .herobelow{max-width:900px}
.bhp-geo .herobelow .badges{margin-top:4px}

/* ---------- 6. the six moves, as a numbered list rather than six boxes ----------
   Long copy, so it is an editorial run with a rule down the side, not a card grid.
   (BHP law: boxes are for short content.) */
.bhp-geo .steplist{display:flex;flex-direction:column;width:100%}
.bhp-geo .stepitem{display:flex;align-items:flex-start;gap:clamp(18px,2.2vw,28px);
  padding:clamp(22px,2.4vw,30px) 0;border-top:1px solid var(--bhp-line,#E6E0D2);width:100%}
.bhp-geo .stepitem:first-child{border-top:0;padding-top:4px}
.bhp-geo .stepn{flex:0 0 auto;width:62px;min-width:0}
.bhp-geo .stepc{flex:1 1 auto;min-width:0}
.bhp-geo .stepnum{display:block;opacity:.9}

/* ---------- 10. the ninety days ---------- */
.bhp-geo .tlgrid{align-items:start}
.bhp-geo .tlitem{position:relative;padding-top:26px}
.bhp-geo .tldot{position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--bhp-gold,#FFB000);min-height:12px}
.bhp-geo .tlitem::before{content:"";position:absolute;top:5px;left:20px;right:0;height:1px;
  background:var(--bhp-line,#E6E0D2)}
.bhp-geo .tlitem:last-child::before{right:auto;width:40px}

/* ---------- 12. SEO / AEO / GEO ---------- */
.bhp-geo .termkey{display:block;letter-spacing:.02em}

/* ---------- a section's closing line is a conclusion, not another card ---------- */
.bhp-geo .secoutro{max-width:860px}
.bhp-geo.sec-deep .secoutro,.bhp-geo.sec-navy .secoutro{max-width:900px}

/* ---------- the hero device: an AI answer being written ---------- */
.geochat{border:1px solid rgba(247,242,231,.14);border-radius:16px;overflow:hidden;
  background:rgba(8,14,28,.62);box-shadow:0 34px 90px rgba(5,10,22,.45);width:100%;
  font-family:var(--bhp-body,Geist),system-ui,sans-serif}
.geochat-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid rgba(247,242,231,.1);background:rgba(247,242,231,.04)}
.geochat-dots{display:flex;gap:6px}
.geochat-dots span{width:9px;height:9px;border-radius:50%;background:rgba(247,242,231,.22)}
.geochat-brand{font-size:12.5px;font-weight:600;color:#F7F2E7}

/* ---- the three engines (client 2026-09-28: "make it more match to ChatGPT and AI Google
   search and Claude, all of them") ----
   The rail is the chrome AND the control: it says which engine is speaking and a click takes the
   cycle over. Each engine then tints the device, so the reader sees three engines rather than one
   device wearing three labels. */
.geochat-engines{display:flex;gap:4px}
.geochat-eng{appearance:none;border:1px solid transparent;background:none;cursor:pointer;
  font:600 11.5px/1 var(--bhp-body,Geist),system-ui,sans-serif;letter-spacing:.01em;
  color:rgba(184,192,212,.72);padding:5px 9px;border-radius:999px;
  transition:color .2s ease,background .2s ease,border-color .2s ease}
.geochat-eng:hover{color:#F7F2E7;background:rgba(247,242,231,.07)}
.geochat-eng.on{color:#0B1220;background:var(--bhp-gold,#FFB000);border-color:transparent}
.geochat-eng:focus-visible{outline:2px solid var(--bhp-gold,#FFB000);outline-offset:2px}

/* Google's AI Overview is a light card with its sources on show; Claude answers on warm paper.
   Only the answer pane changes, so the window around it stays one device. */
.geochat-pane{position:relative}
.geochat-goo .geochat-intro{color:#E8ECF6}
.geochat-goo .geochat-rec{background:rgba(120,160,255,.07);border-color:rgba(140,175,255,.18)}
.geochat-goo .geochat-n{background:#8AB4F8;color:#0B1220}
.geochat-cla .geochat-rec{background:rgba(217,119,87,.09);border-color:rgba(217,119,87,.24)}
.geochat-cla .geochat-n{background:#D97757;color:#fff}

/* AI Overview cites, so the pane that imitates it cites too */
.geochat-src{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 10px}
.geochat-src span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(184,192,212,.6)}
.geochat-src i{font-style:normal;font-size:11px;padding:3px 8px;border-radius:999px;
  background:rgba(138,180,248,.12);border:1px solid rgba(138,180,248,.22);color:#B9CEF7}

/* ---- the second state (client: "here show my BHP result and info, not the competitor ones") ----
   His state plays first, because the paragraph beside the device is about that state. Then the
   answer flips and our client is in it. */
.geochat-flip{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.geochat-flip::before,.geochat-flip::after{content:"";height:1px;flex:1 1 auto;
  background:rgba(255,176,0,.3)}
.geochat-flip span{flex:0 0 auto;font:600 10.5px/1 var(--bhp-body,Geist),system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bhp-gold,#FFB000)}
.geochat-rec.mine{background:rgba(255,176,0,.1);border-color:rgba(255,176,0,.42)}
.geochat-rec.mine .geochat-n{background:var(--bhp-gold,#FFB000);color:#0B1220}
.geochat-rec.mine .geochat-name{color:#FFD98A}
.geochat-yours.good{border-style:solid;border-color:rgba(255,176,0,.5);
  background:rgba(255,176,0,.08)}
.geochat-tag{margin-left:auto;font-size:11.5px;font-weight:500;color:rgba(184,192,212,.85)}
.geochat-body{padding:18px 16px 16px}

.geochat-u{display:flex;justify-content:flex-end;margin-bottom:16px}
.geochat-bubble{max-width:86%;padding:11px 14px;border-radius:14px 14px 4px 14px;
  background:rgba(255,176,0,.14);border:1px solid rgba(255,176,0,.28);
  font-size:14.5px;line-height:1.5;color:#F7F2E7;min-height:1.5em}
/* the full question is in the DOM for search and screen readers; the typing reveals a copy */
.geochat-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
.geochat-cursor{display:inline-block;width:2px;height:1em;vertical-align:-2px;margin-left:1px;
  background:var(--bhp-gold,#FFB000);animation:geoblink 1s steps(2,start) infinite}
@keyframes geoblink{to{visibility:hidden}}

.geochat-a{display:flex;gap:12px;align-items:flex-start}
.geochat-avatar{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;
  place-items:center;font-size:11px;font-weight:600;color:#0B1220;
  background:var(--bhp-gold,#FFB000)}
.geochat-answer{flex:1 1 auto;min-width:0}
.geochat-think{display:flex;align-items:center;gap:7px;font-size:13px;
  color:rgba(184,192,212,.9)}
.geochat-think i{width:5px;height:5px;border-radius:50%;background:rgba(184,192,212,.6);
  animation:geopulse 1.1s ease-in-out infinite}
.geochat-think i:nth-child(2){animation-delay:.15s}
.geochat-think i:nth-child(3){animation-delay:.3s}
@keyframes geopulse{0%,100%{opacity:.3}50%{opacity:1}}
.geochat-intro{margin:0 0 12px;font-size:14px;line-height:1.6;color:rgba(220,225,238,.92)}

.geochat-rec{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;margin-bottom:8px;
  border-radius:11px;background:rgba(247,242,231,.05);
  border:1px solid rgba(247,242,231,.08);
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.geochat-rec.on{opacity:1;transform:none}
.geochat-n{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:600;color:#0B1220;background:rgba(247,242,231,.8)}
.geochat-name{display:block;font-family:var(--bhp-disp,Fraunces),Georgia,serif;font-weight:600;
  font-size:14.5px;color:#fff;line-height:1.3}
.geochat-why{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;
  color:rgba(184,192,212,.88)}

/* No competitor is ever named on this site (Satyam, 2026-09-28). Every centre that is not ours
   renders as a redacted bar: same height as the name it replaces, so the row rhythm is unchanged,
   and three different widths so the three answers do not look like one repeated element. */
.geochat-redact{position:relative;width:var(--rw,164px);max-width:100%;height:1.3em;
  border-radius:4px;background:rgba(247,242,231,.26);
  background-image:linear-gradient(100deg,
    rgba(247,242,231,.2) 0%,rgba(247,242,231,.34) 45%,rgba(247,242,231,.2) 100%)}
/* data-i, not nth-child: the intro paragraph and the "After GEO" flag are siblings of the recs. */
.geochat-rec[data-i="0"] .geochat-redact{--rw:172px}
.geochat-rec[data-i="1"] .geochat-redact{--rw:148px}
.geochat-rec[data-i="2"] .geochat-redact{--rw:188px}
.geochat-goo .geochat-redact{background-color:rgba(160,190,255,.26)}
.geochat-cla .geochat-redact{background-color:rgba(226,160,132,.26)}

/* the point of the whole device */
.geochat-yours{margin-top:12px;padding:11px 13px;border-radius:11px;font-size:13.5px;
  color:#FFD574;background:rgba(255,176,0,.09);border:1px dashed rgba(255,176,0,.45);
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.geochat-yours.on{opacity:1;transform:none}

.geochat-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid rgba(247,242,231,.1);
  font-size:12px;color:rgba(184,192,212,.8);background:rgba(247,242,231,.03)}
.geochat-replay{margin-left:auto;border:1px solid rgba(247,242,231,.22);background:none;
  color:#F7F2E7;font:500 12px/1 var(--bhp-body,Geist),system-ui,sans-serif;
  padding:7px 13px;border-radius:999px;cursor:pointer;transition:background .18s,border-color .18s}
.geochat-replay:hover{background:rgba(247,242,231,.08);border-color:rgba(247,242,231,.4)}
.geochat-replay:focus-visible{outline:2px solid var(--bhp-gold,#FFB000);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .geochat-cursor{animation:none;display:none}
  .geochat-think i{animation:none}
  .geochat-rec,.geochat-yours{opacity:1;transform:none;transition:none}
}

@media (max-width:1024px){
  .bhp-geo .stepitem{flex-direction:column;gap:6px}
  .bhp-geo .stepn{width:auto}
  .bhp-geo .tlitem::before{display:none}
}
@media (max-width:767px){
  .geochat-bubble{max-width:100%}
  .geochat-foot{font-size:11.5px}
}

/* The device bar on a phone. Measured at 390: the window dots, three engine pills and the
   "Live example" tag want more than the 350px the column has, so the tag wrapped onto two lines
   and sat on top of the pills. The dots are decoration imitating a window chrome; the engine
   names are the control. So the dots go first, and the pills tighten. */
@media (max-width:560px){
  .geochat-dots{display:none}
  .geochat-bar{gap:8px;padding:10px 12px}
  .geochat-eng{padding:5px 7px;font-size:11px}
  .geochat-engines{gap:2px}
  .geochat-tag{font-size:10.5px;white-space:nowrap}
}
@media (max-width:400px){
  .geochat-tag{display:none}
  .geochat-eng{font-size:11.5px;padding:6px 9px}
}

/* the hero eyebrow spans the row rather than folding inside the copy column (client 2026-09-28) */
.bhp-geo .herotop{width:100%}
/* the shared eyebrow carries a measure cap (computed 371px here), which is right inside a
   column and wrong above the row. Only this one opts out. */
.bhp-geo .eyebrow-wide .elementor-heading-title{max-width:none!important;width:100%}
/* the accent half of the H1, in the site's gold italic */
.bhp-geo .tag em{font-style:italic;color:var(--bhp-gold,#FFB000);font-weight:600}

/* ---------- the right rail: research card, then the film under it ----------------------------
   Client 2026-09-28, images 435 and 436: "this entire thing make it go and move this to be
   coming under this card on the right side, here in this space like other pages properly."
   The film had its own cream band while this column ended after the research card and left two
   thirds of the section empty. The band is gone and its contents live here now.
   Client 2026-09-28, images 423 and 427, on the same card: "this is still not stick when I
   scroll." It sticks now, but the rail sticks as a whole rather than the card alone: with the
   film sitting directly below it, pinning the card by itself would slide it over the player. */
.bhp-geo .rrail.e-con{display:flex;flex-direction:column;align-items:stretch;gap:0}
@media (min-width:901px){
  .bhp-geo .rrail.e-con{position:sticky!important;top:104px;align-self:flex-start}
  /* the card no longer sticks on its own; the rail it rides in does */
  .bhp-geo .rrail .moat.e-con{position:static!important;align-self:stretch}
}
/* the card is the first thing in the rail, so it does not need the callout's own top margin */
.bhp-geo .rrail > .moat.e-con{margin-top:0}
.bhp-geo .rrail .moat p{max-width:none}
/* the film's heading at rail scale: the gold rule and the Fraunces line, sized for a 42% column
   rather than for a full-width section head */
.bhp-geo .railcap.e-con{padding:0}
.bhp-geo .railcap .elementor-heading-title{text-wrap:balance}
/* the film's own YouTube title, kept as the credit line under the player */
.bhp-geo .vtitle p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted,#5B6472)}