/* V12 — Petro Land editorial system */
:root{
  --petro-ink:#020813;
  --petro-panel:#061624;
  --petro-panel-2:#0a2030;
  --petro-line:rgba(109,224,255,.18);
  --petro-cyan:#58e7ff;
  --petro-mint:#58efb6;
  --petro-text:#f5f9ff;
  --petro-muted:#9eb2c2
}

.petro-proof,
.petro-practices-v12{
  position:relative;
  overflow:hidden;
  background:var(--petro-ink)
}
.petro-proof::before,
.petro-practices-v12::before{
  content:"";
  position:absolute;
  width:680px;
  height:680px;
  border-radius:50%;
  background:rgba(44,202,255,.08);
  filter:blur(140px);
  pointer-events:none
}
.petro-proof::before{top:-360px;right:-180px}
.petro-practices-v12::before{top:520px;left:-440px}
.petro-proof{padding:clamp(5rem,8vw,9rem) 0}
.petro-practices-v12{padding:clamp(5rem,9vw,10rem) 0}

.petro-proof-head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.7fr);
  gap:clamp(2rem,6vw,7rem);
  align-items:end;
  margin-bottom:clamp(2rem,4vw,4rem)
}
.petro-proof-head h2,
.petro-practices-intro h2{
  max-width:980px;
  margin:.8rem 0 0;
  font-size:clamp(2.7rem,5.4vw,6rem);
  line-height:.92;
  letter-spacing:-.055em
}
.petro-proof-head>p,
.petro-practices-intro>p:last-child{
  max-width:690px;
  margin:0;
  color:var(--petro-muted);
  font-size:clamp(1rem,1.4vw,1.3rem);
  line-height:1.65
}
.petro-storydeck{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.65fr);
  gap:12px
}
.petro-storydeck figure,
.petro-mission-media figure,
.petro-interface-grid figure{
  position:relative;
  margin:0;
  overflow:hidden;
  background:#07131f
}
.petro-storydeck-main{min-height:680px}
.petro-storydeck-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:12px
}
.petro-storydeck-side figure{min-height:334px}
.petro-storydeck img,
.petro-mission-media img,
.petro-interface-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .6s ease
}
.petro-storydeck figure:hover img,
.petro-mission-media figure:hover img,
.petro-interface-grid figure:hover img{
  transform:scale(1.025);
  filter:saturate(1.08)
}
.petro-storydeck figcaption{
  position:absolute;
  inset:auto 0 0;
  display:grid;
  gap:.65rem;
  padding:clamp(1.3rem,3vw,2.5rem);
  background:linear-gradient(0deg,rgba(1,7,15,.98),rgba(1,7,15,.08))
}
.petro-storydeck figcaption span,
.petro-mission-media figcaption,
.petro-interface-grid figcaption{
  color:var(--petro-cyan);
  font:700 .65rem/1.2 var(--font-mono,monospace);
  letter-spacing:.13em
}
.petro-storydeck figcaption strong{
  max-width:680px;
  color:#fff;
  font-size:clamp(1.15rem,2vw,2rem);
  line-height:1.12
}

.petro-practices-intro{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.7fr);
  column-gap:clamp(2rem,7vw,8rem);
  align-items:end;
  margin-bottom:clamp(4rem,8vw,8rem)
}
.petro-practices-intro .eyebrow{grid-column:1/-1}
.petro-mission{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);
  min-height:900px;
  margin-bottom:clamp(5rem,9vw,10rem);
  border-top:1px solid var(--petro-line);
  border-bottom:1px solid var(--petro-line);
  background:
    radial-gradient(circle at 10% 0,rgba(54,213,255,.08),transparent 30%),
    rgba(7,22,35,.56)
}
.petro-mission-refinery .petro-mission-media{order:2}
.petro-mission-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(500px,1fr) 260px;
  gap:8px;
  padding:8px
}
.petro-mission-hero{grid-column:1/-1}
.petro-mission-media figcaption{
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:1rem;
  width:max-content;
  max-width:calc(100% - 2rem);
  padding:.65rem .8rem;
  border:1px solid rgba(101,232,255,.22);
  background:rgba(1,8,16,.82);
  backdrop-filter:blur(12px)
}
.petro-mission-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(1.4rem,2vw,2rem);
  padding:clamp(2.2rem,5vw,6rem)
}
.petro-mission-title{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.4rem;
  align-items:start
}
.petro-mission-title>span{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(88,231,255,.45);
  border-radius:50%;
  color:var(--petro-cyan);
  font:700 .76rem var(--font-mono,monospace)
}
.petro-mission-title h3{
  max-width:680px;
  margin:.55rem 0 0;
  color:var(--petro-text);
  font-size:clamp(2.2rem,4.3vw,5rem);
  line-height:.94;
  letter-spacing:-.05em
}
.petro-mission-lead{
  max-width:740px;
  margin:0;
  color:#c2d1dc;
  font-size:clamp(1rem,1.35vw,1.24rem);
  line-height:1.65
}
.petro-mission-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0;
  border-top:1px solid var(--petro-line);
  border-bottom:1px solid var(--petro-line)
}
.petro-mission-facts div{padding:1rem 1.15rem;border-right:1px solid var(--petro-line)}
.petro-mission-facts div:last-child{border-right:0}
.petro-mission-facts dt{
  margin-bottom:.4rem;
  color:#6f92a8;
  font:700 .59rem var(--font-mono,monospace);
  letter-spacing:.12em;
  text-transform:uppercase
}
.petro-mission-facts dd{margin:0;color:#fff;font-weight:750}
.petro-mission-flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border:1px solid var(--petro-line)
}
.petro-mission-flow li{
  position:relative;
  min-height:140px;
  padding:1.15rem;
  border-right:1px solid var(--petro-line)
}
.petro-mission-flow li:last-child{border-right:0}
.petro-mission-flow span{
  display:block;
  margin-bottom:1.2rem;
  color:var(--petro-cyan);
  font:700 .62rem var(--font-mono,monospace)
}
.petro-mission-flow strong{display:block;margin-bottom:.4rem;color:#fff}
.petro-mission-flow small{display:block;color:#7994a8;line-height:1.45}
.petro-mission-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem
}
.petro-mission-columns>div{
  padding-left:1rem;
  border-left:2px solid rgba(88,231,255,.42)
}
.petro-mission-columns p{margin:.4rem 0 0;color:#aac0ce;line-height:1.55}
.petro-label{
  color:var(--petro-cyan)!important;
  font:700 .62rem var(--font-mono,monospace);
  letter-spacing:.12em
}
.petro-mission-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:.4rem;
  padding:1.1rem 1.2rem;
  border:1px solid rgba(88,231,255,.42);
  color:#fff;
  text-decoration:none;
  font-weight:750;
  transition:background .25s ease,color .25s ease
}
.petro-mission-link:hover,
.petro-mission-link:focus-visible{
  background:var(--petro-cyan);
  color:#01101a
}
.petro-mission-link b{font-size:1.2rem}

.petro-interface-atlas{
  display:grid;
  grid-template-columns:minmax(320px,.68fr) minmax(0,1.32fr);
  gap:clamp(2rem,6vw,7rem);
  align-items:start;
  padding:clamp(2rem,5vw,5rem) 0
}
.petro-interface-copy{
  position:sticky;
  top:130px;
  padding-top:1rem
}
.petro-interface-copy h3{
  margin:1rem 0 1.5rem;
  font-size:clamp(2.3rem,4vw,4.4rem);
  line-height:.96;
  letter-spacing:-.05em
}
.petro-interface-copy>p:last-child{
  color:var(--petro-muted);
  font-size:1.06rem;
  line-height:1.7
}
.petro-interface-grid{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  grid-auto-rows:260px;
  gap:10px
}
.petro-interface-grid figure:first-child,
.petro-interface-grid figure:nth-child(4){grid-row:span 2}
.petro-interface-grid figcaption{
  position:absolute;
  inset:auto 0 0;
  padding:1rem 1.1rem;
  background:linear-gradient(0deg,rgba(2,8,16,.95),transparent)
}

/* Premium practice detail */
.practice-page .practice-hero{
  min-height:72vh;
  display:flex;
  align-items:flex-end;
  background:
    radial-gradient(circle at 82% 12%,rgba(42,211,255,.18),transparent 32%),
    linear-gradient(120deg,#020914,#071b2b)
}
.practice-page .practice-hero .container{width:100%}
.practice-page .practice-hero h1{max-width:1180px}
.practice-visual-section{padding:0 0 clamp(5rem,8vw,9rem);background:#020813}
.practice-visual-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  grid-template-rows:310px 310px;
  gap:10px
}
.practice-visual-grid figure{position:relative;margin:0;overflow:hidden;background:#061624}
.practice-visual-grid figure:first-child{grid-row:1/3}
.practice-visual-grid img{width:100%;height:100%;display:block;object-fit:cover}
.practice-visual-grid figcaption{
  position:absolute;
  inset:auto 0 0;
  padding:1rem 1.2rem;
  color:var(--petro-cyan);
  background:linear-gradient(0deg,rgba(1,8,16,.96),transparent);
  font:700 .66rem var(--font-mono,monospace);
  letter-spacing:.1em
}
.practice-operating-brief{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--petro-line);
  border-top:0
}
.practice-operating-brief article{padding:1.5rem;border-right:1px solid var(--petro-line)}
.practice-operating-brief article:last-child{border-right:0}
.practice-operating-brief small{
  color:var(--petro-cyan);
  font:700 .62rem var(--font-mono,monospace);
  letter-spacing:.11em
}
.practice-operating-brief h3{margin:.65rem 0;font-size:1.15rem}
.practice-operating-brief p{margin:0;color:var(--petro-muted);line-height:1.55}

@media(max-width:1200px){
  .petro-storydeck{grid-template-columns:1.25fr .75fr}
  .petro-storydeck-main{min-height:600px}
  .petro-mission{grid-template-columns:1fr;min-height:0}
  .petro-mission-refinery .petro-mission-media{order:initial}
  .petro-mission-media{grid-template-rows:minmax(480px,62vw) 240px}
}
@media(max-width:900px){
  .petro-proof-head,
  .petro-practices-intro,
  .petro-interface-atlas{grid-template-columns:1fr}
  .petro-storydeck{grid-template-columns:1fr}
  .petro-storydeck-main{min-height:64vw}
  .petro-storydeck-side{grid-template-columns:1fr 1fr;grid-template-rows:280px}
  .petro-interface-copy{position:static}
  .petro-mission-flow{grid-template-columns:1fr 1fr}
  .petro-mission-flow li:nth-child(2){border-right:0}
  .petro-mission-flow li:nth-child(-n+2){border-bottom:1px solid var(--petro-line)}
  .practice-visual-grid{grid-template-columns:1fr;grid-template-rows:55vw 38vw 38vw}
  .practice-visual-grid figure:first-child{grid-row:auto}
}
@media(max-width:640px){
  .petro-proof,
  .petro-practices-v12{padding:4.5rem 0}
  .petro-storydeck-side{display:grid;grid-template-columns:1fr;grid-template-rows:260px 260px}
  .petro-mission{margin-inline:-1rem}
  .petro-mission-media{grid-template-columns:1fr;grid-template-rows:72vw 54vw 54vw}
  .petro-mission-hero{grid-column:auto}
  .petro-mission-body{padding:2rem 1.25rem 2.5rem}
  .petro-mission-title{grid-template-columns:1fr}
  .petro-mission-title>span{width:44px;height:44px}
  .petro-mission-facts,
  .petro-mission-columns,
  .practice-operating-brief{grid-template-columns:1fr}
  .petro-mission-facts div,
  .practice-operating-brief article{border-right:0;border-bottom:1px solid var(--petro-line)}
  .petro-mission-facts div:last-child,
  .practice-operating-brief article:last-child{border-bottom:0}
  .petro-mission-flow{grid-template-columns:1fr}
  .petro-mission-flow li{min-height:0;border-right:0;border-bottom:1px solid var(--petro-line)!important}
  .petro-mission-flow li:last-child{border-bottom:0!important}
  .petro-interface-grid{grid-template-columns:1fr;grid-auto-rows:250px}
  .petro-interface-grid figure:first-child,
  .petro-interface-grid figure:nth-child(4){grid-row:auto}
}