:root{--ink:#0d0d0c;--paper:#f3f0ea;--muted:#8a857c;--line:rgba(243,240,234,.12);--accent:#ff6633;--accent-ink:#c2410c;--serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--ease:cubic-bezier(.7,0,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.layout{display:grid;grid-template-columns:minmax(340px,32%) 1fr;height:100vh;min-height:620px}
.intro{display:flex;flex-direction:column;justify-content:space-between;padding:40px 48px;background:var(--paper);color:var(--ink)}
.brand{display:block}
.brand img{display:block;height:auto;width:clamp(170px,16vw,230px)}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:#6b665d;margin-bottom:20px}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.6vw,60px);line-height:1.04;text-wrap:balance;letter-spacing:-.02em}
h1 em{font-style:italic;color:var(--accent-ink)}
.lede{margin:28px 0 36px;font-size:17px;line-height:1.6;max-width:30em;color:#3b3833}
.foot{font-size:12px;color:#6b665d}
.ventures{display:flex;height:100%;overflow:hidden}
.panel{position:relative;flex:1 1 0;min-width:0;border-left:1px solid var(--line);transition:flex .7s var(--ease),background .5s;overflow:hidden}
.panel:hover{background:#151513}
.panel:hover .name{color:var(--accent)}
.name{transition:color .3s}
.panel.open{flex:7 1 0}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;filter:saturate(.95) brightness(1);transform:scale(1.12);transition:transform 1.1s var(--ease),filter .6s}
.shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(13,13,12,.34);transition:background .6s}
.panel:hover .bg{filter:saturate(1.05) brightness(1.05)}
.panel:hover .shade{background:rgba(13,13,12,.21)}
.panel.open .bg{transform:scale(1);filter:saturate(1) brightness(1)}
.panel.open .shade{background:linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
.panel.open:hover .shade{background:linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
.panel:hover,.panel.open{background:var(--ink)}
.tab{all:unset;z-index:2;cursor:pointer;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:40px 0;transition:opacity .4s}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.num{font-size:12px;color:#b3aea4;letter-spacing:.1em}
.name{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--serif);font-size:clamp(22px,2vw,32px);font-weight:300;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.6)}
.panel.open .tab{opacity:0;pointer-events:none}
.content{z-index:2;position:absolute;inset:0;padding:48px clamp(28px,3.4vw,72px);display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transform:translateY(24px);transition:opacity .4s,transform .6s var(--ease);pointer-events:none;min-width:380px}
.panel.open .content{opacity:1;transform:none;transition-delay:.3s;pointer-events:auto}
.num.big{font-family:var(--serif);font-size:120px;line-height:1;color:var(--accent);opacity:.9;margin-bottom:auto;letter-spacing:-.04em}
.content h3{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4vw,64px);letter-spacing:-.02em;margin-bottom:18px}
.content p{font-size:18px;line-height:1.6;max-width:34em;color:#ebe7de;margin-bottom:30px;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.45)}
.out{align-self:flex-start;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:4px;font-weight:500;transition:color .3s}
.links{display:flex;flex-wrap:wrap;gap:14px 32px}
.out.plain{border-bottom-color:transparent;color:inherit;opacity:.85;cursor:default}
.out:hover,.out:focus-visible{color:var(--accent)}
.panel.open .content{cursor:default}
.panel.open::after{z-index:3;content:"×";position:absolute;top:24px;right:28px;font-size:28px;color:var(--muted);pointer-events:none}
.panel.open .tab{pointer-events:auto;opacity:0;inset:0 auto auto 0;width:100%;height:80px}
/* Legal (panel 08): bright, warm photo -> extra scrim under the collapsed/hover tab text (number at top, name at bottom) */
@media (min-width:861px){
.panel[data-i="3"]:not(.open) .shade{background:linear-gradient(to bottom,rgba(13,13,12,.8) 0,rgba(13,13,12,.7) 90px,rgba(13,13,12,0) 190px),linear-gradient(to top,rgba(13,13,12,.8) 0,rgba(13,13,12,.8) 190px,rgba(13,13,12,0) 360px),rgba(13,13,12,.34)}
.panel[data-i="3"]:not(.open):hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.8) 0,rgba(13,13,12,.7) 90px,rgba(13,13,12,0) 190px),linear-gradient(to top,rgba(13,13,12,.8) 0,rgba(13,13,12,.78) 190px,rgba(13,13,12,0) 360px),rgba(13,13,12,.21)}
}
/* Energy (03) + Geothermal (04): separate desktop/mobile images. Desktop: the picture is drawn in a box that stops --cut px above the panel bottom and fades into the ink,
   so the subject (drill head / solar field) stays above the title + body block that sits at the bottom of the open panel. */
@media (min-width:861px){
.panel[data-i="1"]{--cut:210px}
.panel[data-i="5"]{--cut:190px}
.panel[data-i="1"] .bg,.panel[data-i="5"] .bg{inset:0 0 auto 0;height:calc(100% - var(--cut));-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent)}
.panel[data-i="1"] .bg{inset:-90px 0 auto 0;height:calc(100% - var(--cut) + 90px);object-position:50% 0}
.panel[data-i="5"] .bg{object-position:72% 0}
.panel.open[data-i="5"] .shade{background:linear-gradient(to bottom,rgba(13,13,12,.74) 0,rgba(13,13,12,.58) 130px,rgba(13,13,12,0) 270px),linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
.panel.open[data-i="5"]:hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.74) 0,rgba(13,13,12,.58) 130px,rgba(13,13,12,0) 270px),linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
.panel[data-i="5"]:not(.open) .shade{background:linear-gradient(to bottom,rgba(13,13,12,.62) 0,rgba(13,13,12,.5) 80px,rgba(13,13,12,0) 170px),rgba(13,13,12,.34)}
.panel[data-i="5"]:not(.open):hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.7) 0,rgba(13,13,12,.58) 80px,rgba(13,13,12,0) 170px),rgba(13,13,12,.21)}
.panel.open[data-i="1"] .shade{background:linear-gradient(to bottom,rgba(13,13,12,.74) 0,rgba(13,13,12,.58) 130px,rgba(13,13,12,0) 270px),linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
.panel.open[data-i="1"]:hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.74) 0,rgba(13,13,12,.58) 130px,rgba(13,13,12,0) 270px),linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
.panel[data-i="1"]:not(.open) .shade{background:linear-gradient(to bottom,rgba(13,13,12,.82) 0,rgba(13,13,12,.72) 90px,rgba(13,13,12,0) 210px),rgba(13,13,12,.34)}
.panel[data-i="1"]:not(.open):hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.85) 0,rgba(13,13,12,.76) 90px,rgba(13,13,12,0) 210px),rgba(13,13,12,.21)}
}
/* Real Estate (06): bright sunset sky + lit house -> extra top/bottom scrims in collapsed/hover, stronger top scrim when open */
@media (min-width:861px){
.panel[data-i="4"]:not(.open) .shade{background:linear-gradient(to bottom,rgba(13,13,12,.8) 0,rgba(13,13,12,.7) 90px,rgba(13,13,12,0) 190px),linear-gradient(to top,rgba(13,13,12,.8) 0,rgba(13,13,12,.8) 190px,rgba(13,13,12,0) 360px),rgba(13,13,12,.34)}
.panel[data-i="4"]:not(.open):hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.8) 0,rgba(13,13,12,.7) 90px,rgba(13,13,12,0) 190px),linear-gradient(to top,rgba(13,13,12,.8) 0,rgba(13,13,12,.78) 190px,rgba(13,13,12,0) 360px),rgba(13,13,12,.21)}
.panel.open[data-i="4"] .shade{background:linear-gradient(to bottom,rgba(13,13,12,.84) 0,rgba(13,13,12,.7) 140px,rgba(13,13,12,0) 300px),linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
.panel.open[data-i="4"]:hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.84) 0,rgba(13,13,12,.7) 140px,rgba(13,13,12,0) 300px),linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
}
/* Agriculture (05): bright dusk sky -> extra top/bottom scrims in collapsed/hover, stronger top scrim when open */
@media (min-width:861px){
.panel[data-i="7"]:not(.open) .shade{background:linear-gradient(to bottom,rgba(13,13,12,.8) 0,rgba(13,13,12,.7) 90px,rgba(13,13,12,0) 190px),linear-gradient(to top,rgba(13,13,12,.8) 0,rgba(13,13,12,.8) 190px,rgba(13,13,12,0) 360px),rgba(13,13,12,.34)}
.panel[data-i="7"]:not(.open):hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.8) 0,rgba(13,13,12,.7) 90px,rgba(13,13,12,0) 190px),linear-gradient(to top,rgba(13,13,12,.8) 0,rgba(13,13,12,.78) 190px,rgba(13,13,12,0) 360px),rgba(13,13,12,.21)}
.panel.open[data-i="7"] .shade{background:linear-gradient(to bottom,rgba(13,13,12,.84) 0,rgba(13,13,12,.7) 140px,rgba(13,13,12,0) 300px),linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
.panel.open[data-i="7"]:hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.84) 0,rgba(13,13,12,.7) 140px,rgba(13,13,12,0) 300px),linear-gradient(to top,rgba(13,13,12,.7) 0%,rgba(13,13,12,.66) 28%,rgba(13,13,12,.34) 42%,rgba(13,13,12,.075) 62%,rgba(13,13,12,.03) 100%),linear-gradient(to right,rgba(13,13,12,.22),rgba(13,13,12,0) 55%)}
}
@media (max-width:860px){
  .layout{display:block;height:auto}
  .intro{min-height:auto;padding:28px 24px 40px;gap:48px}
  .ventures{flex-direction:column}
  .panel,.panel.open{border-left:0;border-top:1px solid var(--line);flex:none}
  .tab{position:relative;flex-direction:row;padding:22px 24px;justify-content:flex-start;gap:16px;width:100%}
  .name{writing-mode:horizontal-tb;transform:none;font-size:26px}
  .panel.open .tab{opacity:1;position:relative;height:auto}
  .tab,.content{z-index:2}
  .content{position:relative;min-width:0;max-height:0;padding:0 24px;transform:none;transition:max-height .6s var(--ease),opacity .4s,padding .4s}
  .panel.open .content{max-height:600px;padding:0 24px 32px}
  .num.big{display:none}
  .content h3{display:none}
  .panel.open::after{top:20px;right:24px}
  .brand img{width:190px}
  .tab{background:linear-gradient(to right,rgba(13,13,12,.42),rgba(13,13,12,0) 75%)}
  .name{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.7)}
  .panel.open .shade,.panel.open:hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.26) 0%,rgba(13,13,12,.72) 45%,rgba(13,13,12,.82) 100%)}
  /* Energy + Geothermal on mobile: taller open panel, picture in its own box above the text block, text pinned to the bottom */
  .panel[data-i="1"] .bg{object-position:50% 42%}
  .panel[data-i="5"] .bg{object-position:50% 8%}
  .panel.open[data-i="1"],.panel.open[data-i="5"]{min-height:560px;display:flex;flex-direction:column}
  .panel.open[data-i="1"] .content,.panel.open[data-i="5"] .content{margin-top:auto}
  .panel.open[data-i="1"] .bg,.panel.open[data-i="5"] .bg{inset:auto 0 auto 0;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 90px),transparent)}
  .panel.open[data-i="5"] .bg{top:76px;height:340px;object-position:40% 0}
  .panel.open[data-i="1"] .bg{top:0;height:430px;object-position:50% 62%}
  .panel.open[data-i="5"] .shade,.panel.open[data-i="5"]:hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,0) 0,rgba(13,13,12,0) 48%,rgba(13,13,12,.62) 58%,rgba(13,13,12,.86) 70%,rgba(13,13,12,.9) 100%)}
  .panel.open[data-i="1"] .shade,.panel.open[data-i="1"]:hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.6) 0,rgba(13,13,12,.3) 14%,rgba(13,13,12,.08) 40%,rgba(13,13,12,.6) 58%,rgba(13,13,12,.86) 70%,rgba(13,13,12,.9) 100%)}
  /* Real Estate on mobile: taller open panel, picture in a box above the text block */
  .panel[data-i="4"] .bg{object-position:50% 40%}
  .panel.open[data-i="4"]{min-height:560px;display:flex;flex-direction:column}
  .panel.open[data-i="4"] .content{margin-top:auto}
  .panel.open[data-i="4"] .bg{inset:0 0 auto 0;height:450px;object-position:50% 14%;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 100px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 100px),transparent)}
  .panel.open[data-i="4"] .shade,.panel.open[data-i="4"]:hover .shade{background:linear-gradient(to bottom,rgba(13,13,12,.78) 0,rgba(13,13,12,.55) 70px,rgba(13,13,12,.12) 160px,rgba(13,13,12,0) 48%,rgba(13,13,12,.62) 60%,rgba(13,13,12,.86) 72%,rgba(13,13,12,.9) 100%)}
  }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}