/* Barrett Addison Executive Search: "Subsurface"
   One idea, done properly: the page is a cross-section of the earth. A wellbore drills down as you scroll,
   a lateral turns out at each section, and a depth gauge reads measured depth. Everything else stays quiet. */

/* fonts are served from this site (SIL Open Font License; see assets/fonts) */
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo-latin-wdth.woff2) format('woff2-variations'), url(fonts/archivo-latin-wdth.woff2) format('woff2'); }

:root {
  --night: #06111a;
  --deep: #081723;
  --bone: #ece4d6;
  --fog: #9aa8b2;
  --dim: #8a99a4;
  --gold: #e2b45f;
  --gold-ink: #0a1520;
  --gold-soft: rgba(226, 180, 95, .16);
  --red: #c8102e;
  --red-text: #f06b7f;
  --line: rgba(236, 228, 214, .12);
  --line-strong: rgba(236, 228, 214, .24);
  --panel: rgba(6, 17, 26, .72);
  --display: 'Marcellus', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --text: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bore-x: clamp(18px, 6.2vw, 112px);
  --content-left: calc(var(--bore-x) + clamp(30px, 6vw, 104px));
  --pad-r: max(16px, env(safe-area-inset-right, 0px), 5vw);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--night); color: var(--bone);
  font: 400 17px/1.62 var(--text); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; position: relative;
}
body::before { /* keeps the notch area painted under the fixed header */
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--night); z-index: 40;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
html { scroll-padding-top: 90px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--gold-ink); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--gold); color: var(--gold-ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }

/* the earth (drawn by earth.js) sits behind everything */
#earth { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none; display: block; }
#bore-probe { position: absolute; left: var(--bore-x); top: 0; width: 1px; height: 1px; pointer-events: none; }
main, .site-foot { position: relative; z-index: 1; }

/* header */
.site-head { position: fixed; inset: 0 0 auto; top: env(safe-area-inset-top, 0px); z-index: 30; transition: background-color .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; }
.site-head.solid { background: rgba(6, 17, 26, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.head-in { display: flex; align-items: center; gap: 20px; height: 72px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 1480px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bone); flex: none; }
.brand img { height: 40px; width: auto; }
.brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--display); font-size: 19px; letter-spacing: .07em; text-transform: uppercase; }
.brand-sub { font-size: 9.5px; letter-spacing: .34em; color: var(--red-text); margin-top: 5px; font-weight: 600; text-transform: uppercase; }
@media (max-width: 380px) { .brand-name { font-size: 16px; } .brand-sub { letter-spacing: .26em; } .brand img { height: 34px; } }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.nav a { color: var(--fog); text-decoration: none; font-size: 15px; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 13px 24px; font: 600 15.5px/1 var(--text); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .2s ease, background-color .2s, color .2s, border-color .2s; }
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { background: #ecc277; }
.btn-line { border-color: var(--line-strong); color: var(--bone); background: transparent; }
.btn-line:hover { border-color: var(--gold); }
.btn:active { transform: translateY(1px); }
.head-cta { padding: 11px 20px; font-size: 14.5px; }
.menu-btn { display: none; margin-left: auto; background: transparent; border: 1px solid var(--line-strong); color: var(--bone); border-radius: 999px; padding: 10px 16px; font: 600 14px/1 var(--text); cursor: pointer; }
.drawer { position: fixed; inset: 0; z-index: 45; background: rgba(5, 13, 20, .97); display: flex; flex-direction: column; padding: calc(88px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 32px max(24px, env(safe-area-inset-left, 0px)); gap: 6px; }
.drawer[hidden] { display: none; }
.drawer a { font-family: var(--display); font-size: 32px; color: var(--bone); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 24px; font-family: var(--text); font-size: 17px; border-bottom: 0; padding: 16px 24px; }
.drawer-close { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
@media (max-width: 980px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .head-cta { display: none; }
}

/* the surface (hero) */
.surface { position: relative; z-index: 1; min-height: calc(100svh - clamp(36px, 7svh, 90px)); display: flex; align-items: center; padding: clamp(100px, 13svh, 128px) var(--pad-r) clamp(150px, 18svh, 184px) var(--content-left); }
.surface.short { min-height: min(72svh, 640px); align-items: flex-end; padding-bottom: 88px; }
.surface-in { max-width: 1100px; }
.surface h1 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, min(6.8vw, 10.6svh), 104px); line-height: 1.01; letter-spacing: -.012em; margin: 0 0 30px; max-width: 8.4em; text-wrap: balance; }
.surface.short h1 { font-size: clamp(42px, 6vw, 88px); max-width: 11em; }
.lede { font-size: clamp(17.5px, 1.35vw, 20.5px); color: var(--fog); max-width: 60ch; margin: 0 0 34px; }
.lede strong { color: var(--bone); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.textlink { color: var(--bone); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 6px; font-weight: 500; }
.textlink:hover { color: #fff; text-decoration-thickness: 2px; }
.callnote { margin: 26px 0 0; color: var(--fog); font-size: 15px; }
.callnote a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.cue { position: absolute; left: calc(var(--bore-x) + clamp(36px, 5.6vw, 84px)); bottom: clamp(56px, 8svh, 74px); font-size: 13px; color: var(--fog); display: flex; align-items: center; gap: 10px; }
.cue::before { content: ""; width: 1px; height: 26px; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%, 100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cue::before { animation: none; } }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(6, 17, 26, .55) 45%, rgba(6, 17, 26, .2) 100%); }

/* zones (each one gets a lateral) */
.zone { position: relative; padding: clamp(116px, 17vh, 200px) var(--pad-r) clamp(36px, 7vh, 88px) var(--content-left); max-width: calc(var(--content-left) + 1180px); }
.lz { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 13.5px; color: var(--fog); margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.lz b { color: var(--gold); font-weight: 600; letter-spacing: .01em; }
.zone h2, .page h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -.008em; margin: 0 0 22px; max-width: 12em; text-wrap: balance; }
.intro { color: var(--fog); font-size: clamp(17px, 1.22vw, 19.5px); max-width: 62ch; margin: 0 0 52px; }
.intro a { color: var(--bone); }
h3 { font-family: var(--display); font-weight: 400; }

/* who we place: formations */
.formations { border-top: 1px solid var(--line-strong); }
.formation { display: grid; grid-template-columns: minmax(200px, .85fr) 2fr; gap: 12px 40px; padding: 30px 0 32px; border-bottom: 1px solid var(--line); }
.formation h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; margin: 0; }
.formation h3 small { display: block; font-family: var(--text); font-size: 13.5px; color: var(--gold); margin-top: 8px; letter-spacing: .01em; }
.formation ul { list-style: none; margin: 4px 0 0; padding: 0; columns: 2 220px; column-gap: 36px; color: var(--fog); }
.formation li { padding: 3px 0; break-inside: avoid; }
.formation:hover li { color: var(--bone); }
.formation li { transition: color .25s; }
@media (max-width: 720px) { .formation { grid-template-columns: 1fr; } }

/* where we work: survey plot */
.survey { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 40px; align-items: start; }
.plot { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(6, 17, 26, .55); overflow: hidden; }
.plot svg { display: block; width: 100%; height: auto; }
.plot .note { font-size: 12.5px; color: var(--dim); margin: 0; padding: 0 16px 14px; }
.pin-ring { transform-box: fill-box; transform-origin: center; animation: ring 3.4s ease-out infinite; }
.pin-ring.d2 { animation-delay: .7s; } .pin-ring.d3 { animation-delay: 1.4s; } .pin-ring.d4 { animation-delay: 2.1s; } .pin-ring.d5 { animation-delay: 2.8s; }
@keyframes ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin-ring { animation: none; opacity: .35; } }
.basins { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.basins li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.basins b { font-family: var(--display); font-weight: 400; font-size: 22px; }
.basins span { color: var(--fog); font-size: 14.5px; }
.basins code { font-family: var(--text); font-variant-numeric: tabular-nums; color: var(--dim); font-size: 13px; }
@media (max-width: 900px) { .survey { grid-template-columns: 1fr; } .plot-labels { display: none; } }

/* how a search works: the well plan */
.well-plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 2px solid rgba(226, 180, 95, .55); counter-reset: stage; }
.stage { position: relative; padding: 30px 28px 34px 0; counter-increment: stage; }
.stage::before { content: ""; position: absolute; left: 0; top: -9px; width: 2px; height: 16px; background: var(--gold); }
.stage .n { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 13.5px; }
.stage .term { display: block; color: var(--gold); font-size: 14px; margin: 10px 0 2px; font-weight: 600; letter-spacing: .02em; }
.stage h3 { font-size: 24px; line-height: 1.2; margin: 0 0 10px; }
.stage p { margin: 0; color: var(--fog); font-size: 16px; }

/* screened and verified: the core sample */
.verified { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.stat { border-left: 2px solid var(--gold); padding: 6px 0 6px 22px; margin: 0 0 30px; }
.stat p { font-family: var(--display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.22; margin: 0 0 12px; }
.stat cite { font-style: normal; color: var(--fog); font-size: 14px; }
.stat cite a { color: var(--fog); }
.core { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 58px 1fr; }
.core li { display: contents; }
.core .seg { border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); background: var(--seg, #13232f); position: relative; }
.core li:first-child .seg { border-top: 1px solid var(--line-strong); border-radius: 29px 29px 0 0; }
.core li:last-child .seg { border-bottom: 1px solid var(--line-strong); border-radius: 0 0 29px 29px; }
.core .seg::after { content: ""; position: absolute; inset: 0; background-image: var(--lith, none); opacity: .55; border-radius: inherit; }
.core .item { padding: 18px 0 18px 22px; border-bottom: 1px solid var(--line); }
.core .item b { display: block; font-weight: 600; font-size: 17px; }
.core .item span { color: var(--fog); font-size: 15px; }
.core-foot { margin: 22px 0 0 80px; color: var(--bone); font-family: var(--display); font-size: 21px; }
@media (max-width: 860px) { .verified { grid-template-columns: 1fr; } .core { grid-template-columns: 34px 1fr; } .core li:first-child .seg { border-radius: 17px 17px 0 0; } .core li:last-child .seg { border-radius: 0 0 17px 17px; } .core-foot { margin-left: 56px; } }

/* open roles teaser */
.live { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--fog); margin: 0 0 18px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(200, 16, 46, .6); animation: live 2s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .55); } 70% { box-shadow: 0 0 0 10px rgba(200, 16, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } }
.roles { list-style: none; margin: 0 0 34px; padding: 0; border-top: 1px solid var(--line-strong); max-width: 860px; }
.roles li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.roles li b { font-family: var(--display); font-weight: 400; font-size: 23px; }
.roles li span { color: var(--fog); font-size: 15px; }

/* two columns of prose */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px 56px; max-width: 1060px; }
.cols h3 { font-size: 26px; margin: 0 0 10px; line-height: 1.2; }
.cols p { color: var(--fog); margin: 0 0 14px; }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.facts li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts li span { color: var(--dim); font-size: 14px; }
@media (max-width: 520px) { .facts li { grid-template-columns: 1fr; gap: 2px; } }

/* contact (total depth) */
.contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr); gap: clamp(32px, 5vw, 72px); align-items: start; max-width: 1120px; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.contact.solo { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
form.ask { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 34px); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
form.ask label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--fog); min-width: 0; }
form.ask .w { grid-column: 1 / -1; }
form.ask input, form.ask select, form.ask textarea { font: 400 16px/1.4 var(--text); color: var(--bone); background: rgba(236, 228, 214, .04); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; width: 100%; }
form.ask select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fog) 50%), linear-gradient(135deg, var(--fog) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
form.ask textarea { min-height: 140px; resize: vertical; }
form.ask input:focus, form.ask select:focus, form.ask textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226, 180, 95, .45); }
form.ask [aria-invalid="true"] { border-color: #ff9aa8; }
form.ask .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.ask .send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
form.ask .status { margin: 0; font-size: 15px; }
form.ask .status.good { color: #8fd3a6; }
form.ask .status.bad { color: #ff9aa8; }
form.ask .fine { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--dim); }
form.ask .fine a { color: var(--fog); }
@media (max-width: 640px) { form.ask { grid-template-columns: 1fr; } }
.direct { display: grid; gap: 22px; }
.direct div span { display: block; color: var(--dim); font-size: 13.5px; margin-bottom: 2px; }
.direct a, .direct p { font-family: var(--display); font-size: clamp(19px, 5vw, 24px); color: var(--bone); text-decoration: none; margin: 0; overflow-wrap: anywhere; }
.direct a:hover { color: var(--gold); }
.td-note { margin: 34px 0 0; color: var(--dim); font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* simple pages */
.page { position: relative; padding: 24px var(--pad-r) 40px var(--content-left); max-width: calc(var(--content-left) + 1120px); }
.prose { max-width: 70ch; color: var(--fog); }
.prose h2 { margin-top: 56px; }
.prose h3, .prose h2 { color: var(--bone); font-size: 25px; margin: 36px 0 10px; max-width: none; line-height: 1.2; }
.prose p, .prose li { font-size: 17.5px; }
.prose strong { color: var(--bone); font-weight: 500; }
.prose a { color: var(--bone); }
.board-wrap { max-width: 920px; color: var(--bone); font-size: 17px; }
.board-wrap [data-rp-board] { min-height: 120px; }

/* depth gauge */
.gauge { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 25; background: var(--panel); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 11px; min-width: 176px; font-variant-numeric: tabular-nums; pointer-events: none; transition: opacity .3s; }
.gauge .g-l { display: block; font-size: 11.5px; color: var(--dim); }
.gauge .g-v { display: block; font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--bone); font-stretch: 92%; }
.gauge .g-z { display: block; font-size: 12px; color: var(--gold); margin-top: 2px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .gauge { display: none; } }
.gauge.hide { opacity: 0; }

/* footer */
.site-foot { border-top: 1px solid var(--line); background: rgba(5, 12, 18, .92); padding: 56px max(16px, env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.foot-in { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 1.2fr) repeat(auto-fit, minmax(160px, 1fr)); gap: 32px 48px; }
.foot-in img { width: 240px; }
.foot-in .fh { margin: 0 0 12px; font: 600 13px/1.4 var(--text); color: var(--dim); }
@media (max-width: 640px) { .foot-in { grid-template-columns: 1fr; } }
.foot-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-in a { color: var(--fog); text-decoration: none; overflow-wrap: anywhere; }
.foot-in a:hover { color: var(--bone); }
.foot-legal { max-width: 1480px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--dim); font-size: 13.5px; }

/* 404 */
.dry { min-height: 100svh; display: flex; align-items: center; padding: 120px var(--pad-r) 120px var(--content-left); position: relative; z-index: 1; }

/* core sample segments: rock tones with their lithology symbol */
.seg.s1 { --seg: #102331; --lith: radial-gradient(rgba(236,228,214,.28) 1px, transparent 1.3px) 0 0 / 9px 9px; }
.seg.s2 { --seg: #142836; --lith: repeating-linear-gradient(0deg, transparent 0 7px, rgba(236,228,214,.18) 7px 8px); }
.seg.s3 { --seg: #1a2a31; --lith: linear-gradient(90deg, rgba(236,228,214,.16) 1px, transparent 1px) 0 0 / 18px 9px, repeating-linear-gradient(0deg, transparent 0 8px, rgba(236,228,214,.16) 8px 9px); }
.seg.s4 { --seg: #1f2a2b; --lith: radial-gradient(rgba(236,228,214,.22) 1px, transparent 1.3px) 0 0 / 7px 7px; }
.seg.s5 { --seg: #252520; --lith: repeating-linear-gradient(0deg, transparent 0 5px, rgba(236,228,214,.15) 5px 6px); }
.seg.s6 { --seg: #282019; --lith: linear-gradient(90deg, rgba(236,228,214,.14) 1px, transparent 1px) 0 0 / 16px 8px, repeating-linear-gradient(0deg, transparent 0 7px, rgba(236,228,214,.14) 7px 8px); }
.seg.s7 { --seg: #2f1d16; --lith: radial-gradient(rgba(226,180,95,.45) 1px, transparent 1.4px) 0 0 / 8px 8px; }

/* the survey plot (inline SVG) */
.plot .grid { stroke: rgba(236, 228, 214, .07); stroke-width: 1; }
.plot .survey-line { stroke: rgba(236, 228, 214, .22); stroke-width: 1.2; stroke-dasharray: 5 4; fill: none; }
.plot .tick { fill: var(--dim); font: 400 12px var(--text); font-variant-numeric: tabular-nums; }
.plot .pin { fill: var(--gold); }
.plot .pin-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.plot .pl-name { fill: var(--bone); font: 400 19px var(--display); }
.plot .pl-at { fill: var(--fog); font: 400 12.5px var(--text); font-variant-numeric: tabular-nums; }

/* a quiet notice (deals page) */
.notice { border: 1px solid rgba(226, 180, 95, .35); background: rgba(226, 180, 95, .07); border-radius: 14px; padding: 16px 20px; max-width: 920px; margin: 0 0 34px; color: var(--bone); }
.notice b { color: var(--gold); font-weight: 600; }
.zone .btn { margin-top: 6px; }
.more-link { margin: 26px 0 0; }

/* ---------------------------------------------------------------------------------------------
   the strike (strike.js): lightning lands on the horizon, gold rigs stand up, pumping units take
   the wells over, and the wells get connected. Timings are offsets from page start (--t0 per well).
   ------------------------------------------------------------------------------------------- */
.strike { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.strike-svg { position: absolute; left: 0; top: 0; display: block; }
.surface-in { position: relative; z-index: 1; }
.cue { z-index: 1; }

.strike .stars circle { fill: rgba(255, 240, 210, .72); }
.strike .stars { opacity: 0; animation: skFade 1.4s ease .45s both; }
.strike .stars .tw { animation: skTw var(--tw, 3s) ease-in-out var(--td, 0s) infinite; }
.strike .flash { fill: #fff3d6; opacity: 0; animation: skFlash .55s ease-out var(--t0) both; }
.strike .hz { stroke: #ffe5a8; stroke-width: 1.6; opacity: 0; transform-box: view-box; animation: skHz 1.5s cubic-bezier(.65, 0, .3, 1) .15s both; }

.strike .bolt { fill: none; stroke: #fff6de; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: skBolt .62s cubic-bezier(.3, 0, .2, 1) var(--t0) both; }
.strike .bolt.br { stroke-width: 1.2; animation-duration: .5s; }
.strike .hit { opacity: 0; transform-box: fill-box; transform-origin: center; animation: skHit .55s ease-out calc(var(--t0) + .07s) both; }
.strike .ring { fill: none; stroke: rgba(255, 235, 185, .9); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: skRing .95s cubic-bezier(.15, .7, .3, 1) calc(var(--t0) + .07s) both; }
.strike .pad { opacity: 0; transform-box: fill-box; transform-origin: center; animation: skPad .6s ease calc(var(--t0) + .12s) both; }

/* the rig */
.strike .art g { transform-box: fill-box; }
.strike .art .kin { transform-box: view-box; transform-origin: 0 0; }
.strike .rig .mast { fill: none; stroke: url(#sk-mv); stroke-width: 3.1; stroke-linecap: round; }
.strike .rig .mastb { fill: none; stroke: #e2b45f; stroke-width: 1.4; opacity: .38; }
.strike .rig .brace { fill: none; stroke: #f3cf84; stroke-width: 1.15; opacity: .85; }
.strike .rig .girt { fill: none; stroke: #ffe3a2; stroke-width: 1.5; }
.strike .rig .sb, .strike .rig .ramp, .strike .rig .pr { fill: none; stroke: #e9bd68; stroke-width: 1.7; stroke-linecap: round; }
.strike .rig .floor, .strike .rig .crown { fill: url(#sk-mv); stroke: #fff3d0; stroke-width: .7; }
.strike .rig .dh { fill: url(#sk-dark); stroke: #ffd98c; stroke-width: 1.1; }
.strike .rig .win { fill: #fff1c4; }
.strike .rig .mb { fill: none; stroke: #ffe3a2; stroke-width: 1.3; }
.strike .rig .sheave { fill: #4a3613; }
.strike .rig .dl { stroke: #fff1cc; stroke-width: .7; }
.strike .rig .blk, .strike .rig .td { fill: url(#sk-mv); stroke: #fff3d0; stroke-width: .6; }
.strike .rig .tdm { fill: url(#sk-dark); stroke: #ffd98c; stroke-width: .6; }
.strike .rig .str { stroke: #ffe5a8; stroke-width: 1.4; }
.strike .rig .rl { fill: #fffaf0; animation: skRl 2.6s ease-in-out var(--ld, 0s) infinite; }
.strike .art .bit { fill: #ffe5a8; stroke: none; }
/* the pumping unit */
.strike .pj .skid, .strike .pj .ped { fill: url(#sk-dark); stroke: url(#sk-mv); stroke-width: 1.3; }
.strike .pj .web { stroke: rgba(255, 229, 168, .4); stroke-width: .8; }
.strike .pj .fl { fill: none; stroke: #e2b45f; stroke-width: 1.7; opacity: .85; }
.strike .pj .whp, .strike .pj .arm { fill: url(#sk-mv); stroke: none; }
.strike .pj .whw { fill: none; stroke: #ffe5a8; stroke-width: 1.2; }
.strike .pj .leg { fill: none; stroke: url(#sk-mv); stroke-width: 3.2; stroke-linecap: round; }
.strike .pj .legb { fill: none; stroke: #c99a45; stroke-width: 2; opacity: .55; }
.strike .pj .br { fill: none; stroke: #f0c978; stroke-width: 1.3; opacity: .9; }
.strike .pj .gb, .strike .pj .guard, .strike .pj .cwt, .strike .pj .sad { fill: url(#sk-dark); stroke: #ffd98c; stroke-width: 1.2; }
.strike .pj .fin { stroke: rgba(255, 229, 168, .5); stroke-width: .8; }
.strike .pj .hub, .strike .pj .pivot { fill: #fff3d0; }
.strike .pj .pin { fill: #fff8e4; }
.strike .pj .pit { stroke: url(#sk-mv); stroke-width: 2.6; stroke-linecap: round; }
.strike .pj .wb { fill: url(#sk-beam); stroke: #fff0c8; stroke-width: .7; }
.strike .pj .hh { fill: url(#sk-hh); stroke: #fff0c8; stroke-width: .7; }
.strike .pj .hhs { stroke: rgba(74, 52, 14, .55); stroke-width: .9; }
.strike .pj .riv { fill: rgba(74, 52, 14, .75); }
.strike .pj .wbh { fill: none; stroke: #fffbea; stroke-width: .9; opacity: .9; }
.strike .pj .eq { fill: url(#sk-dark); stroke: #ffd98c; stroke-width: .9; }
.strike .pj .shine { opacity: .8; }
.strike .pj .bri { fill: none; stroke: #fff1cc; stroke-width: .8; }
.strike .pj .car { fill: #ffe5a8; }
.strike .pj .prod { stroke: #fffbea; stroke-width: 1.4; }
.strike .art.far { opacity: 0; animation: skFar .9s ease var(--t0) both; }
.strike .drill { transform-origin: 50% 100%; opacity: 0; animation: skRigUp .34s cubic-bezier(.2, 1.5, .4, 1) calc(var(--t0) + .07s) both, skRigOut .34s ease-in calc(var(--t0) + 1.1s) forwards; }
.strike .art.main .drill { animation: skRigUp .4s cubic-bezier(.2, 1.4, .4, 1) calc(var(--t0) + .07s) both; }
.strike .tblock { animation: skTrip .46s ease-in-out calc(var(--t0) + .35s) 2; }
.strike .art.main .tblock { animation: skTrip 3.6s ease-in-out calc(var(--t0) + .6s) infinite; }
.strike .bit { opacity: 0; transform-origin: center; animation: skBit .8s ease-out calc(var(--t0) + .4s) both; }
.strike .beacon { fill: #ff4d5e; opacity: 0; animation: skBeacon 1.5s ease-in-out calc(var(--t0) + .6s) infinite; }
.strike .beacon-glow { fill: rgba(255, 77, 94, .35); opacity: 0; animation: skBeacon 1.5s ease-in-out calc(var(--t0) + .6s) infinite; }
.strike .pump { transform-origin: 50% 100%; opacity: 0; animation: skPumpIn .32s cubic-bezier(.2, 1.4, .4, 1) calc(var(--t0) + 1.25s) both; }
.strike .holo { fill: none; stroke: rgba(255, 229, 168, .7); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: skHolo 3.8s ease-out calc(var(--t0) + 1.6s + var(--hd, 0s)) infinite; }
/* the basin readouts */
.strike .rlab-g { opacity: 0; animation: skFade .6s ease calc(var(--t0) + 1.45s) both; }
.strike .rlab { fill: var(--bone); font: 600 10.5px var(--text); letter-spacing: .16em; text-transform: uppercase; transition: opacity .38s ease; }
.strike .rlab.sw { opacity: 0; }
.strike .lead { fill: none; stroke: rgba(255, 229, 168, .55); stroke-width: 1; }
.strike .live { fill: #ffe5a8; animation: skLive 1.8s ease-in-out infinite; }
.strike .arc-draw { fill: none; stroke: rgba(247, 212, 136, .75); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: skArc .8s cubic-bezier(.4, 0, .3, 1) calc(4.2s + var(--d, 0s)) both, skOut .45s ease calc(5.05s + var(--d, 0s)) forwards; }
.strike .arc-dots { fill: none; stroke: rgba(247, 212, 136, .55); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: .1 7; opacity: 0; animation: skFade .5s ease calc(4.85s + var(--d, 0s)) both, skMarch 1.1s linear calc(4.85s + var(--d, 0s)) infinite; }
.strike .spark { fill: #fff6de; opacity: 0; }

/* the finished field: the intro is over (or never played), the pumps keep pumping */
.strike.done .zap, .strike.done .hit, .strike.done .ring, .strike.done .flash, .strike.done .hz, .strike.done .arc-draw, .strike.done .bit { display: none; }
.strike.done .stars, .strike.done .pad, .strike.done .rlab-g { animation: none; opacity: 1; }
.strike.done .art.far { animation: none; opacity: .42; }
.strike.done .art:not(.main) .drill { display: none; }
.strike.done .drill, .strike.done .pump { animation: none; opacity: 1; transform: none; }
.strike.done .art.main .tblock { animation-delay: 0s; }
.strike.done .beacon, .strike.done .beacon-glow { animation-delay: 0s; }
.strike.done .holo { animation-delay: var(--hd, 0s); }
.strike.done .arc-dots { animation: skMarch 1.1s linear infinite; opacity: 1; }
.strike.paused, .strike.paused * { animation-play-state: paused !important; }


@keyframes skFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes skOut { to { opacity: 0; } }
@keyframes skTw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes skFlash { 0% { opacity: 0; } 12% { opacity: .1; } 28% { opacity: .02; } 38% { opacity: .06; } 100% { opacity: 0; } }
@keyframes skHz { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; transform: scaleX(1); } 70% { opacity: .9; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes skBolt { 0% { stroke-dashoffset: 1; opacity: 1; } 16% { stroke-dashoffset: 0; opacity: 1; } 26% { opacity: .3; } 34% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes skHit { 0% { opacity: 0; transform: scale(.12); } 26% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes skRing { 0% { opacity: 0; transform: scale(.2); } 18% { opacity: .95; } 100% { opacity: 0; transform: scale(5.5); } }
@keyframes skPad { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes skRigUp { 0% { opacity: 0; transform: translateY(26px) scaleY(.2); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scaleY(1); } }
@keyframes skRigOut { 0% { opacity: 1; transform: translateY(0) scaleY(1); } 100% { opacity: 0; transform: translateY(10px) scaleY(.55); } }
@keyframes skTrip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(46px); } }
@keyframes skBit { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes skBeacon { 0%, 100% { opacity: .12; } 45%, 60% { opacity: 1; } }
@keyframes skPumpIn { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes skFar { from { opacity: 0; } to { opacity: .42; } }
@keyframes skHolo { 0% { opacity: 0; transform: scale(.35); } 12% { opacity: .85; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes skLive { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes skRl { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes skArc { to { stroke-dashoffset: 0; } }
@keyframes skMarch { to { stroke-dashoffset: -7.1; } }

@media (prefers-reduced-motion: reduce) {
  .strike * { animation: none !important; }
  .strike .beacon { opacity: 1; }
  .strike .beacon-glow, .strike .stars, .strike .pad, .strike .rlab-g, .strike .arc-dots, .strike .drill, .strike .pump { opacity: 1; }
  .strike .art.far { opacity: .42; }
  .strike .holo { opacity: 0; }
}

/* ---------------------------------------------------------------------------------------------
   v2: the opening film, the photo on the surface, the 3D volume below, the readings, the motion
   ------------------------------------------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.op-lock { overflow: hidden; }
.plot .survey-line.solid { stroke-dasharray: none; }

/* the opening film */
.opening { position: fixed; inset: 0; z-index: 60; background: #000; overflow: hidden; }
.opening video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opening .op-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .72) 100%); }
.op-brand { position: absolute; left: 50%; bottom: calc(16% + env(safe-area-inset-bottom, 0px)); width: min(360px, 66vw); margin-left: max(-180px, -33vw); text-align: center; opacity: 0; }
.op-brand img { width: 100%; height: auto; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .75)); }
.op-brand p { margin: 12px 0 0; color: var(--bone); font: 500 14px/1.3 var(--text); letter-spacing: .06em; text-shadow: 0 2px 12px rgba(0, 0, 0, .85); }
.opening.op-run .op-brand { animation: opBrand 9.4s ease .9s both; }
@keyframes opBrand { 0% { opacity: 0; transform: translateY(12px); } 13% { opacity: 1; transform: none; } 84% { opacity: 1; } 100% { opacity: 0; } }
.op-ctl { position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; }
.op-ctl button { background: rgba(6, 17, 26, .55); color: var(--bone); border: 1px solid rgba(236, 228, 214, .38); border-radius: 999px; padding: 11px 18px; font: 600 14px/1 var(--text); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.op-ctl button:hover { border-color: var(--gold); }
.op-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.opening.op-run .op-bar { animation: opBar 11.5s linear both; }
@keyframes opBar { to { transform: scaleX(1); } }
.opening.op-out { animation: opOut 1.15s ease both; pointer-events: none; }
.opening.op-out::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, #fff6dc, rgba(226, 180, 95, .6) 45%, rgba(226, 180, 95, 0)); animation: opFlash 1.15s ease both; }
@keyframes opOut { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes opFlash { 0% { opacity: 0; transform: scale(.6); } 22% { opacity: .9; transform: scale(1.5); } 100% { opacity: 0; transform: scale(2.4); } }

/* the photo on the surface: the last frame of the film, drifting, lit by the strikes */
.hero-media.still::before { content: ""; position: absolute; inset: -4%; background: center 40% / cover no-repeat; opacity: .6;
  transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -9px), 0); transition: transform .9s cubic-bezier(.2, .8, .2, 1);
  animation: skKen 26s ease-in-out infinite alternate; }
.hero-media.still-end::before { background-image: url(film/opening-end.jpg); }
.hero-media.still-start::before { background-image: url(film/opening-poster.jpg); }
.hero-media.still::after { background: linear-gradient(90deg, rgba(6, 17, 26, .92) 0%, rgba(6, 17, 26, .66) 42%, rgba(6, 17, 26, .18) 78%, rgba(6, 17, 26, .1) 100%), linear-gradient(180deg, rgba(6, 17, 26, .5) 0%, rgba(6, 17, 26, 0) 30%, rgba(6, 17, 26, 0) 70%, rgba(6, 17, 26, .85) 100%); }
.surface.sk-intro .hero-media.still::before { animation: skKen 26s ease-in-out infinite alternate, skLit 2.4s linear .9s 1 both; }
@keyframes skKen { from { scale: 1; } to { scale: 1.07; } }
@keyframes skLit { 0%, 6%, 25%, 31%, 42%, 48%, 58%, 64%, 75%, 81%, 100% { filter: none; } 2%, 27%, 44%, 60%, 77% { filter: brightness(1.9) contrast(1.05); } }

/* the 3D volume below the surface (descent.js) */
#depth3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
#depth3d.on { opacity: 1; }
.depth-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: linear-gradient(90deg, rgba(6, 17, 26, .92) 0%, rgba(6, 17, 26, .84) 38%, rgba(6, 17, 26, .58) 60%, rgba(6, 17, 26, .44) 100%); }
.depth-scrim.on { opacity: 1; }
@media (max-width: 1099px) { .depth-scrim { background: rgba(6, 17, 26, .6); } }
@media (max-width: 759px) { .depth-scrim { background: rgba(6, 17, 26, .74); } }
.has-3d .surface { background: linear-gradient(180deg, #040b11 0%, #091824 72%, #10283a 100%); }

/* the readings: oilfield pressure gauges */
.readings { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px 32px; max-width: 1080px; }
.dial { margin: 0; padding: 26px 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-align: center; }
.dial svg { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.dial .face { fill: rgba(236, 228, 214, .025); stroke: rgba(236, 228, 214, .2); stroke-width: 1.5; }
.dial .tk { stroke: rgba(236, 228, 214, .38); stroke-width: 1.2; }
.dial .tk.mj { stroke: rgba(236, 228, 214, .78); stroke-width: 2.2; }
.dial .band { fill: none; stroke: rgba(226, 180, 95, .55); stroke-width: 5; }
.dial .num { fill: var(--fog); font: 500 11px var(--text); }
.dial .unit { fill: var(--gold); font: 600 10px var(--text); letter-spacing: .08em; }
.dial .needle { transform-box: view-box; transform-origin: 120px 120px; transition: transform 1.9s cubic-bezier(.2, 1.35, .35, 1); }
.dial .needle path { fill: var(--gold); }
.dial .hub { fill: #e8d3a6; stroke: #0a1520; stroke-width: 2.5; }
.dial figcaption { margin-top: 4px; }
.dial-v { display: block; font: 400 48px/1 var(--display); color: var(--bone); font-variant-numeric: tabular-nums; }
.dial-c { display: block; color: var(--fog); font-size: 15.5px; margin-top: 12px; line-height: 1.45; }

/* headlines write themselves in; sections log in like a core coming out of the hole */
.js-reveal .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .16em; margin: 0 -.05em -.16em; }
.js-reveal .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js-reveal .in .w > span { transform: none; }
.js-reveal [data-rv] > * { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .85s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--k, 0) * 85ms); }
.js-reveal [data-rv].in > * { opacity: 1; transform: none; }
.js-reveal .core[data-rv] > li { opacity: 1; transform: none; }
.js-reveal .core .seg { clip-path: inset(0 0 100% 0); transition: clip-path .6s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--k, 0) * 120ms); }
.js-reveal .core .item { opacity: 0; transform: translateX(-12px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--k, 0) * 120ms + 140ms); }
.js-reveal .core.in .seg { clip-path: inset(0); }
.js-reveal .core.in .item { opacity: 1; transform: none; }
.formation { position: relative; }
.js-reveal .formations .formation::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--gold), rgba(226, 180, 95, 0) 70%); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--k, 0) * 85ms + 220ms); }
.js-reveal .formations.in .formation::after { transform: scaleX(1); }

/* a soft light that follows the cursor through the rock */
.cursor-glow { position: fixed; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(226, 180, 95, .14), rgba(226, 180, 95, .05) 45%, rgba(226, 180, 95, 0)); will-change: transform; }

/* "Pause motion" */
.motion-btn { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 1px solid var(--line-strong); color: var(--fog); border-radius: 999px; padding: 10px 14px; font: 600 13px/1 var(--text); cursor: pointer; flex: none; }
.motion-btn:hover { color: var(--bone); border-color: var(--gold); }
.motion-btn .mb-i { display: block; width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.motion-btn[aria-pressed="true"] .mb-i { width: 0; height: 0; border-right: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (max-width: 1240px) { .motion-btn .mb-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .motion-btn { padding: 11px 12px; } }
@media (max-width: 980px) { .motion-btn { margin-left: auto; } .menu-btn { margin-left: 10px; } }
.motion-off *, .motion-off *::before, .motion-off *::after { animation-play-state: paused !important; }
.motion-off .cursor-glow { display: none; }
@media (min-width: 900px) { .op-brand { left: max(6vw, env(safe-area-inset-left, 0px)); margin-left: 0; bottom: calc(11% + env(safe-area-inset-bottom, 0px)); width: min(330px, 30vw); text-align: left; } }
.has-3d main { text-shadow: 0 1px 14px rgba(6, 17, 26, .9), 0 0 2px rgba(6, 17, 26, .7); }
.has-3d main .btn-gold, .has-3d main form.ask, .has-3d main .dial { text-shadow: none; }
.hero-media.still::before { right: -40%; }
.drawer .motion-btn { align-self: flex-start; margin: 18px 0 0; font-size: 15px; padding: 12px 18px; }
.drawer .motion-btn .mb-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
@media (max-width: 640px) { .head-in > .motion-btn { display: none; } .menu-btn { margin-left: auto; } }
@media (min-width: 641px) { .drawer .motion-btn { display: none; } }