@font-face {
  font-family: "Manrope";
  src: url("assets/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/cormorant-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f2f2ef;
  --graphite: #30383d;
  --graphite-mid: #252c31;
  --graphite-dark: #1c2226;
  --petrol: #004f59;
  --petrol-dark: #003a42;
  --petrol-light: #00636f;
  --muted: #657075;
  --hairline: rgba(48, 56, 61, .16);
  --gutter: clamp(32px, 5.4vw, 104px);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--graphite-mid); font-family: "Manrope", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
::selection { color: var(--paper); background: var(--petrol); }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--petrol-light); outline-offset: 7px; }
.page { display: grid; grid-template-columns: 54% 46%; grid-template-rows: auto 1fr auto; min-height: max(700px, 100svh); }
.header { grid-area: 1 / 1; display: flex; align-items: center; padding: 49px var(--gutter) 0; }
.brand { display: inline-block; line-height: 0; }
.brand img { display: block; width: clamp(195px, 17vw, 272px); height: auto; }
.intro { grid-area: 2 / 1; display: flex; align-items: center; padding: 64px var(--gutter); }
.intro-content { width: 100%; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 34px; color: var(--petrol); font-size: 9px; font-weight: 600; line-height: 1.5; letter-spacing: .22em; text-transform: uppercase; }
.construction-mark { display: flex; align-items: center; gap: 4px; height: 16px; }
.construction-mark i { display: block; width: 2px; height: 8px; background: var(--petrol); }
.construction-mark i:nth-child(2) { height: 13px; }
.construction-mark i:nth-child(3) { height: 10px; }
h1 { margin: 0; font-size: clamp(51px, 5.45vw, 104px); font-weight: 400; line-height: 1.15; letter-spacing: -.064em; }
h1 em { display: inline-block; margin-left: -.018em; color: var(--petrol); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.19em; font-weight: 400; line-height: 1.04; letter-spacing: -.045em; }
.description { margin: 32px 0 0; color: var(--muted); font-size: clamp(14px, 1.05vw, 16px); font-weight: 400; line-height: 1.95; }
.contact { display: flex; align-items: center; flex-wrap: wrap; column-gap: 26px; row-gap: 14px; margin-top: 38px; }
.contact-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid rgba(0, 79, 89, .45); color: var(--petrol); font-size: 12px; font-weight: 600; text-decoration: none; transition: border-color .25s; }
.contact-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .3s; }
.contact-link:hover { border-color: var(--petrol); }
.contact-link:hover svg { transform: translate(2px, -2px); }
.contact-number { color: var(--muted); font-size: 10px; letter-spacing: .035em; }
.architecture { grid-area: 1 / 2 / 4 / 3; position: relative; margin: 0; overflow: hidden; isolation: isolate; background: var(--graphite-dark); color: #eef2f2; }
.architecture-image, .architecture-shade, .light-pass { position: absolute; inset: 0; pointer-events: none; }
.architecture-image { inset: -1.5%; background: url("assets/mechanical-study.webp") center center / cover no-repeat; transform: scale(1.03); }
.architecture-shade { background: linear-gradient(180deg, rgba(13, 22, 26, .38) 0%, transparent 30%, transparent 62%, rgba(13, 22, 26, .76) 100%); }
.light-pass {
  inset: -30%;
  opacity: 0;
  background: linear-gradient(112deg,
    transparent 37%,
    rgba(124, 188, 199, .06) 43%,
    rgba(215, 238, 242, .24) 48%,
    rgba(245, 252, 253, .48) 50%,
    rgba(207, 235, 240, .18) 54%,
    transparent 63%);
  mix-blend-mode: screen;
  transform: translate3d(-38%, 0, 0);
}
.art-heading { position: absolute; top: 57px; left: 44px; right: 44px; display: flex; align-items: center; gap: 15px; color: #ccd7d9; font-size: 9px; font-weight: 500; line-height: 1.5; letter-spacing: .22em; text-transform: uppercase; }
.small-rule { display: block; width: 27px; height: 1px; background: rgba(214, 228, 230, .55); }
.art-caption { position: absolute; left: 44px; right: 44px; bottom: 42px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.art-caption > span { font-size: 17px; font-weight: 400; line-height: 1.7; letter-spacing: -.02em; }
.art-caption em { font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; font-weight: 400; letter-spacing: -.01em; }
.motion-toggle { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; color: #e2ecee; border: 1px solid rgba(217, 232, 235, .35); background: rgba(28, 34, 38, .14); border-radius: 50%; cursor: pointer; transition: background .25s, border-color .25s; }
.motion-toggle:hover { background: rgba(217, 232, 235, .13); border-color: rgba(217, 232, 235, .7); }
.motion-toggle:focus-visible { outline-color: #e2ecee; }
.motion-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.icon-play { display: none; }
.is-paused .icon-pause { display: none; }
.is-paused .icon-play { display: block; }
.footer { grid-area: 3 / 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 var(--gutter); padding: 25px 0 36px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.6; letter-spacing: .015em; }
.footer p { margin: 0; }
.footer a { text-decoration: none; padding-block: 8px; }
.footer a:hover { color: var(--petrol); }
/* Motion begins only when the pause control is available. */
.motion-ready .architecture-image { animation: architectural-drift 28s ease-in-out infinite alternate; }
.motion-ready .light-pass { animation: light-travel 10s -2s ease-in-out infinite; }
.motion-ready .construction-mark i { animation: construction-cadence 4.8s ease-in-out infinite; }
.motion-ready .construction-mark i:nth-child(2) { animation-delay: .6s; }
.motion-ready .construction-mark i:nth-child(3) { animation-delay: 1.2s; }
.is-paused *, .is-away * { animation-play-state: paused !important; }
@keyframes architectural-drift { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-.6%, .6%, 0); } }
@keyframes light-travel {
  0%, 8% { opacity: 0; transform: translate3d(-38%, 0, 0); }
  25% { opacity: .65; }
  50% { opacity: 1; }
  72% { opacity: .55; }
  92%, 100% { opacity: 0; transform: translate3d(38%, 0, 0); }
}
@keyframes construction-cadence { 0%, 70%, 100% { opacity: 1; } 35% { opacity: .32; } }
@media (min-width: 1800px) {
  .intro { justify-content: center; }
  .intro-content { max-width: 720px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  :root { --gutter: 36px; }
  .page { grid-template-columns: 55% 45%; }
  h1 { font-size: clamp(48px, 5.7vw, 63px); }
  .description { font-size: 13px; }
  .desktop-break { display: none; }
  .art-heading, .art-caption { left: 28px; right: 28px; }
  .footer { gap: 14px; font-size: 9px; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  :root { --gutter: 28px; }
  .page { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; min-height: 100svh; }
  .header { grid-area: 1 / 1; padding-top: 30px; }
  .brand img { width: 195px; }
  .intro { grid-area: 2 / 1; padding: 64px var(--gutter) 46px; }
  .eyebrow { margin-bottom: 25px; font-size: 8px; }
  h1 { font-size: clamp(46px, 10.5vw, 72px); }
  .description { max-width: 340px; margin-top: 25px; font-size: 14px; line-height: 1.9; }
  .desktop-break { display: none; }
  .contact { margin-top: 25px; column-gap: 24px; }
  .contact-link { font-size: 12px; gap: 20px; }
  .contact-number { font-size: 10px; }
  .architecture { grid-area: 3 / 1; height: clamp(360px, 105vw, 540px); }
  .architecture-image { background-position: 50% 47%; }
  .art-heading { top: 29px; left: var(--gutter); right: var(--gutter); font-size: 8px; }
  .art-caption { bottom: 29px; left: var(--gutter); right: var(--gutter); }
  .art-caption > span { font-size: 15px; }
  .art-caption em { font-size: 23px; }
  .footer { grid-area: 4 / 1; margin: 0; padding: 22px var(--gutter); border: 0; font-size: 9px; gap: 12px; flex-wrap: wrap; }
}
@media (max-width: 360px) {
  :root { --gutter: 22px; }
  .brand img { width: 180px; }
  h1 { font-size: 43px; }
  .footer { flex-wrap: wrap; row-gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-toggle { display: none !important; }
}