:root{--red:#b90d19;--ink:#202020;--paper:#f8f7f3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:5px}header{height:105px;display:flex;align-items:center;gap:42px;padding:15px 6%;border-bottom:1px solid #dedbd5;background:white}header>a{margin-right:auto}.logo{width:210px;display:block}nav{display:flex;gap:28px;font-size:13px}nav a:hover,.text-link:hover{color:var(--red)}.langs{display:flex;align-items:center;gap:8px;font-size:12px}.langs button{padding:5px 2px;border:0;background:transparent;cursor:pointer;color:#777}.langs button[aria-pressed=true]{color:var(--red);font-weight:bold}.hero{display:grid;grid-template-columns:1.15fr 1fr;min-height:660px}.hero-copy{padding:90px 7% 85px 10.5%}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:bold;text-transform:uppercase;margin:0 0 25px;color:var(--red)}h1{font-size:clamp(42px,4.6vw,76px);letter-spacing:-3px;line-height:1.06;font-weight:500;margin:0 0 32px}em{font-style:normal;color:var(--red)}.intro{max-width:490px;font-size:17px;color:#666;margin-bottom:36px}.button{display:inline-block;background:var(--red);color:white;padding:15px 23px;font-size:13px}.button:after{content:' ↗';margin-left:25px}.graphic{position:relative;overflow:hidden;background:#eae8e1;min-height:500px}.orbit{position:absolute;border:1px solid #b6b3ab;border-radius:50%;width:580px;height:580px;top:-70px;left:20%;transform:rotate(-30deg)}.o2{width:390px;height:650px;top:-90px;left:33%;border-color:var(--red)}.o3{width:650px;height:300px;top:70px;left:-15%;border-color:#c4c0b7}.cross{position:absolute;top:45%;left:30%;color:var(--red);font-size:80px;font-weight:200}.vertical{position:absolute;right:28px;top:55px;writing-mode:vertical-rl;font-size:9px;letter-spacing:3px}.graphic-caption{position:absolute;bottom:45px;left:45px;font-size:40px;letter-spacing:-2px}.graphic-caption b{font-weight:400;color:var(--red)}.graphic-caption small{display:block;letter-spacing:0;font-size:11px;margin-top:10px}.services,.about{padding:95px 6%}.section-head{display:grid;grid-template-columns:1fr 2fr 1.5fr;gap:35px;margin-bottom:65px}h2{font-size:clamp(32px,3.1vw,49px);line-height:1.12;letter-spacing:-1.5px;font-weight:400;margin:0}.section-head>p:last-child,.about-intro>p{color:#666;margin:0;max-width:480px}.service{display:grid;grid-template-columns:.35fr 1.4fr 1.7fr 30px;gap:40px;border-top:1px solid #ccc8c0;padding:30px 0;align-items:start}.service>span{color:var(--red);font-size:12px}.service h3{font-size:22px;line-height:1.2;font-weight:400;margin:0}.service p{margin:0;color:#666;font-size:14px;max-width:440px}.service>a{font-size:24px}.project{display:grid;grid-template-columns:1fr 1fr;background:#202321;color:white}.project-art{min-height:490px;position:relative;overflow:hidden;background:#2b302d;display:flex;align-items:center;justify-content:center;gap:13px}.energy-line{width:45px;height:250px;border:1px solid #76887d;transform:skewY(-25deg);background:linear-gradient(140deg,#3a4940,#242b27)}.energy-line:nth-child(2){height:290px}.energy-line:nth-child(3){height:330px}.energy-line:nth-child(4){height:370px}.energy-line:nth-child(5){height:410px}.project-word{position:absolute;bottom:28px;left:35px;font-size:36px;font-weight:bold;letter-spacing:-2px}.project-word span{font-weight:400;color:#bdcdb9}.project-word small{display:block;font-weight:400;font-size:9px;letter-spacing:3px}.project-copy{padding:70px 12%}.project-copy .eyebrow{color:#c3c9c2}.project h2{font-size:70px}.large{font-size:22px;line-height:1.5}.status{font-size:12px;border-left:2px solid #a7c0a0;padding-left:15px;color:#c6cfc6;margin:28px 0}.text-link{font-size:12px;display:inline-block;border-bottom:1px solid;padding-bottom:5px}.about-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;margin-bottom:75px}.about>h3{font-size:14px;font-weight:400;border-bottom:1px solid #ccc8c0;padding-bottom:20px}#team{display:grid;grid-template-columns:1fr 1fr;gap:70px}.person{position:relative;padding:25px 0}.person-initial{float:right;width:60px;height:60px;border:1px solid #c9c5bd;border-radius:50%;display:grid;place-items:center;color:#a59e93;font-size:19px}.person .eyebrow{margin-bottom:12px}.person h4{font-size:25px;font-weight:400;max-width:350px;line-height:1.25;margin:0 0 22px}.person>p:not(.eyebrow){font-size:14px;color:#666;max-width:480px}.contact{background:var(--red);color:white;padding:75px 6%;position:relative}.contact .eyebrow,.contact em{color:#edb5b6}.contact p:not(.eyebrow){max-width:550px;font-size:15px;margin:26px 0}.light{background:white;color:var(--red)}footer{padding:40px 6%;display:grid;grid-template-columns:1fr 1.7fr;gap:15px;font-size:11px;color:#666}footer strong{color:var(--ink);font-size:13px}footer p{margin:0}footer small{grid-column:1/-1;font-size:10px}@media(max-width:850px){header{gap:20px;height:auto;min-height:85px;flex-wrap:wrap}.logo{width:160px}nav{order:3;justify-content:space-between;width:100%;font-size:12px;padding-bottom:10px}.hero{grid-template-columns:1fr}.hero-copy{padding:65px 6%}h1{letter-spacing:-2px}.graphic{min-height:320px}.section-head{grid-template-columns:1fr;gap:20px;margin-bottom:35px}.services,.about{padding:60px 6%}.service{grid-template-columns:24px 1fr 20px;gap:14px}.service p{grid-column:2}.service>a{grid-column:3;grid-row:1}.service h3{font-size:20px}.project{grid-template-columns:1fr}.project-art{min-height:320px}.project-copy{padding:45px 6%}.about-intro{grid-template-columns:1fr;gap:25px;margin-bottom:45px}#team{grid-template-columns:1fr;gap:20px}.contact{padding:60px 6%}footer{grid-template-columns:1fr}footer small{grid-column:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Updated brand and light BESSCo presentation */
.logo-crop{display:block;width:210px;height:57px;overflow:hidden}.brand-motto{display:block;font-size:11px;font-weight:600;margin-top:2px}.project{background:#f0f2ed;color:var(--ink)}.project-art{background:#fff;padding:25px;min-height:380px}.bessco-logo{display:block;width:100%;height:auto}.project-copy .eyebrow{color:#536954}.status{color:#536954;border-color:#7c9577}.brand .logo{width:210px}@media(max-width:850px){.logo-crop{width:160px;height:43px}.brand .logo{width:160px}.brand-motto{font-size:10px}.project-art{min-height:240px;padding:12px}}

/* Brand lockup: original artwork, clear space, centered motto. */
:root{--heading-font:Arial,Helvetica,sans-serif}h1,h2,h3,h4{font-family:var(--heading-font);font-weight:700;letter-spacing:-.035em}h1{line-height:1.09}header{min-height:115px;height:auto}.brand{width:235px;flex-shrink:0}.logo-crop{position:relative;display:block;width:100%;height:auto;aspect-ratio:900/245;overflow:hidden}.brand .logo,.graphic-caption .logo{position:absolute;width:111.111%;max-width:none;height:auto;left:-2.444%;top:-8.163%;mix-blend-mode:multiply}.brand-motto{display:block;text-align:center;width:72%;margin:10px 0 0 28%;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.25}.graphic-caption{z-index:2;left:8%;right:8%;bottom:55px;font-size:inherit;letter-spacing:0}.graphic-caption small.brand-motto{font-size:clamp(18px,1.7vw,28px);font-weight:600;letter-spacing:0;margin:20px 0 0 28%}.graphic .orbit,.graphic .cross{opacity:.35}.graphic .orbit{top:-160px}.graphic .o3{top:-100px}.graphic .cross{top:10%}.graphic-caption .logo-crop{isolation:isolate}.graphic{background:#eeece6}.person h4{font-size:24px}@media(max-width:850px){.brand{width:190px}.brand .logo{width:111.111%}.logo-crop{width:100%;height:auto}.brand-motto{font-size:11px}.graphic-caption{bottom:35px;left:9%;right:9%;max-width:500px}.graphic-caption small.brand-motto{font-size:clamp(17px,4vw,25px);margin-top:15px}h1{font-size:clamp(38px,7vw,60px)}}

/* Clean brand presentation with a restrained, aligned tagline. */
.graphic{background:#fff;display:flex;align-items:center;justify-content:center;padding:55px 8%}.graphic .orbit,.graphic .cross,.graphic .vertical{display:none}.graphic-caption{position:relative;inset:auto;width:100%;max-width:520px;padding:0}.graphic-caption .logo-crop{background:#fff}.graphic-caption small.brand-motto{font-size:clamp(14px,1.35vw,20px);font-weight:400;letter-spacing:.065em;line-height:1.4;margin:18px 0 0 28%;width:72%;color:#555}.brand-motto{font-weight:400;letter-spacing:.035em;color:#555;font-size:11px;margin-top:7px}.section-head{grid-template-columns:.65fr 2fr 1.5fr;gap:35px}.section-head h2{font-size:clamp(28px,2.6vw,43px)}@media(max-width:850px){.graphic{min-height:280px;padding:45px 9%}.graphic-caption{max-width:480px}.graphic-caption small.brand-motto{font-size:clamp(13px,3vw,18px);font-weight:400;margin-top:14px}.section-head{grid-template-columns:1fr;gap:20px}.brand-motto{font-size:10px}}
/* One proportional lockup at every size, based on the header reference. */
.brand,.graphic-caption{container-type:inline-size}
.brand .brand-motto,.graphic-caption small.brand-motto{font-size:4.68cqw;font-weight:400;letter-spacing:.035em;line-height:1.4;width:72%;margin:2.98cqw 0 0 28%;text-align:center;color:#555}

/* Brand type hierarchy: display, section, subheading, body and utility. */
:root{--type-display:clamp(40px,4.6vw,68px);--type-section:clamp(30px,3.1vw,44px);--type-subheading:24px;--type-body:16px;--type-utility:12px}
body{font-size:var(--type-body);line-height:1.6}h1{font-size:var(--type-display)}h2,.section-head h2,.project h2{font-size:var(--type-section);line-height:1.16}.service h3,.person h4{font-size:var(--type-subheading);line-height:1.3}.intro,.section-head>p:last-child,.service p,.about-intro>p,.person>p:not(.eyebrow),.project .large,.project-vision,.contact p:not(.eyebrow){font-size:var(--type-body);line-height:1.65}.eyebrow,nav,.button,.text-link,.about>h3,.service>span,footer,footer strong,footer small{font-size:var(--type-utility)}.project-copy{padding:65px 10%}.project .large{margin:25px 0 18px}.project-vision{margin:0 0 30px}.project .status{font-size:var(--type-body);line-height:1.55;font-weight:600;color:#304a36;background:#e2e9df;border:0;border-left:3px solid #6e8866;padding:18px 20px;margin:28px 0}.project .text-link{font-size:var(--type-body)}@media(max-width:850px){h1{font-size:var(--type-display)}.service h3{font-size:var(--type-subheading)}.project-copy{padding:45px 6%}}
/* Motto spans the wordmark, from the first O to the O in Co. */
.brand .brand-motto,.graphic-caption small.brand-motto{width:72%;margin-left:28%;font-size:6cqw;letter-spacing:0;white-space:nowrap;line-height:1.25}
.brand .brand-motto,.graphic-caption small.brand-motto{width:70%;margin-left:28%;font-size:7.5cqw}

.director-contacts{display:flex;flex-wrap:wrap;gap:24px;margin-top:30px}.director-contacts a{display:flex;flex-direction:column;gap:8px;padding:20px 24px;border:1px solid #e69399;font-size:16px}.director-contacts a:hover{background:#ffffff15}.director-contacts strong{font-weight:600}
/* Refined motto size, aligned with the O-to-o wordmark span. */
.brand .brand-motto,.graphic-caption small.brand-motto{width:68%;margin-left:29%;font-size:6.9cqw;letter-spacing:0}

.person h4{max-width:none}.person:first-child h4{white-space:nowrap;font-size:clamp(20px,2vw,24px)}@media(max-width:380px){.person:first-child h4{font-size:19px}}

.contact{container-type:inline-size}.contact h2{white-space:nowrap;font-size:min(44px,5.05cqw);letter-spacing:-.035em;line-height:1.2}

/* Text-led opening section. */
.hero{display:block;min-height:0}.hero-copy{padding:80px 6% 85px;max-width:1440px;margin:0 auto}.hero h1{max-width:1100px}.hero .intro{max-width:760px;margin-top:28px;margin-bottom:32px}@media(max-width:850px){.hero-copy{padding:55px 6% 60px}}

/* Full director name remains on one line at every viewport width. */
.person{container-type:inline-size}.person:first-child h4{white-space:nowrap;font-size:min(24px,5.1cqw);letter-spacing:-.035em}.person:first-child .person-initial{float:none;margin:0 0 20px auto}
/* Shared profile structure: initials do not displace either biography. */
#team{align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.person{display:flex;flex-direction:column;min-width:0;padding-top:25px}
.person .person-initial,.person:first-child .person-initial{position:absolute;top:25px;right:0;float:none;margin:0;width:48px;height:48px;font-size:17px}
.person .eyebrow{margin:0 60px 14px 0;min-height:19px}
.person h4,.person:first-child h4{margin:0 0 24px;min-height:32px;line-height:1.3;font-size:min(24px,5.1cqw);white-space:nowrap}
.person>p:not(.eyebrow){margin:0 0 24px;max-width:none}
.person>.text-link{margin-top:auto;align-self:flex-start}
@media(max-width:850px){#team{grid-template-columns:minmax(0,1fr)}}