:root { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; margin: 0; }
body { background: #10191c; color: #f3f0e8; font-family: Manrope, Arial, sans-serif; }
.hero { isolation: isolate; min-height: 100svh; overflow: hidden; position: relative; padding: 34px clamp(25px, 7vw, 112px) 30px; display: flex; flex-direction: column; background: linear-gradient(116deg, #10191c 7%, #17292b 72%, #20383a); }
.grain { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .25; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.header { display: flex; justify-content: space-between; align-items: flex-start; }.header-left { display:flex; align-items:center; gap:27px; }
.brand { color: inherit; display: flex; align-items: center; gap: 11px; text-decoration: none; font-size: 12px; line-height: .95; letter-spacing: .13em; font-weight: 800; }
.brand-mark { display: flex; flex-direction: column; width: 27px; gap: 3px; }
.brand-mark i { display:block; height: 4px; background: #c9995b; transform: skewX(-30deg); }
.brand-mark i:nth-child(2) { width: 20px; }.brand-mark i:nth-child(3) { width: 13px; }
.status, footer, .eyebrow { font-family: "DM Mono", monospace; letter-spacing: .11em; font-size: 10px; }
.language { position:relative; display:inline-flex; align-items:center; padding:4px; border:1px solid rgba(201,153,91,.3); border-radius:999px; background:rgba(255,255,255,.04); font:13px "DM Mono", monospace; color:#86968f; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }.language-thumb { position:absolute; top:4px; left:4px; bottom:4px; width:calc(50% - 4px); border-radius:999px; background:linear-gradient(135deg, #d8b077, #c9995b); box-shadow:0 3px 10px rgba(201,153,91,.35); transition:transform .4s cubic-bezier(.65,0,.35,1); }.language:has(.language-button[data-language="en"].active) .language-thumb { transform:translateX(100%); }.language-button { position:relative; z-index:1; cursor:pointer; border:0; padding:6px 14px; min-width:46px; color:inherit; background:transparent; font:inherit; letter-spacing:.12em; border-radius:999px; transition:color .3s; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }.language-button:hover:not(.active) { color:#e1c28e; }.language-button.active { color:#15292b; font-weight:500; }.language-button:hover,.language-button.active { color:#e1c28e; }.status { color: #e6dac8; display: flex; gap: 9px; align-items: center; padding-top: 2px; font-size:12px; font-weight:500; letter-spacing:.13em; }.status b { background:#c9995b; width:7px; height:7px; border-radius:50%; box-shadow:0 0 0 4px rgba(201,153,91,.15); animation:pulse 2.6s infinite; }
.content { margin: auto 0; padding: 86px 0 72px; max-width: 750px; animation: reveal .9s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { color: #c9995b; margin: 0 0 25px; }
h1 { font-size: clamp(46px, 7.1vw, 105px); line-height: .98; letter-spacing: -.07em; margin: 0; font-weight: 700; }
h1 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.085em; color: #d5b17f; background: linear-gradient(105deg, #b6854d 18%, #f2d49c 45%, #b6854d 68%); background-size: 230% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation: metal-glint 7s ease-in-out infinite; }
.intro { font-size: clamp(14px, 1.3vw, 17px); line-height: 1.7; color: #bec8c3; max-width: 470px; margin: 31px 0; }
.contact { cursor:pointer; text-align:left; font-family:inherit; border:0; border-bottom: 1px solid rgba(231,222,207,.38); padding: 0 0 12px; background:transparent; color: inherit; display: inline-flex; flex-direction: column; gap: 6px; transition: color .2s, border .2s; }.contact:hover { color:#d5b17f; border-color:#d5b17f; }.contact > span { color:#aebbb5; font-size:12px; }.contact strong { font-size:15px; font-weight:600; }.contact strong span { color:inherit; font-size:17px; margin-left:6px; }.contact small { height:0; overflow:visible; color:#d5b17f; font:10px "DM Mono", monospace; letter-spacing:.08em; }
.recognition { display:flex; align-items:center; gap:12px; margin-top:38px; color:#acb6ae; font:10px "DM Mono", monospace; letter-spacing:.08em; line-height:1.45; }.recognition b { display:block; color:#d5b17f; font-size:11px; font-weight:500; }.recognition small { display:block; margin-top:2px; font-size:9px; }.medal { width:51px; height:51px; flex:none; object-fit:contain; }
footer { color: #8e9b97; }
.field-photo { position:absolute; z-index:-2; inset:0 0 0 auto; width:59%; overflow:hidden; mask-image:linear-gradient(90deg, transparent 0%, black 26%); }.field-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,25,28,.96) 0%, rgba(15,25,28,.32) 42%, rgba(10,18,18,.18) 100%), linear-gradient(0deg, rgba(12,22,24,.65), transparent 47%); }.field-photo img { width:100%; height:100%; object-fit:cover; object-position:57% center; filter:saturate(.63) contrast(1.08) brightness(.67); animation:photo-settle 14s ease-in-out infinite alternate; }
@keyframes reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } @keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(201,153,91,0); } } @keyframes photo-settle { to { transform:scale(1.035); } } @keyframes metal-glint { 0%, 100% { background-position:100% center; } 50% { background-position:0 center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }
@media (max-width: 600px) { .hero { padding:27px 23px 25px; }.header-left { gap:17px; }.language { font-size:11px; }.language-button { padding:5px 11px; min-width:38px; }.status { font-size:10px; }.content { padding:95px 0 65px; }.field-photo { width:100%; mask-image:none; opacity:.32; }.field-photo::after { background:linear-gradient(90deg, rgba(12,22,24,.9), rgba(12,22,24,.47)), linear-gradient(0deg, rgba(12,22,24,.7), transparent 55%); }.field-photo img { object-position:63% center; }.intro { max-width:330px; } }
@media (max-width: 600px) and (max-height: 700px) { .hero { padding-top:22px; padding-bottom:18px; }.content { padding:50px 0 26px; }.recognition { margin-top:25px; }.pipe-one { top:15%; } }