@font-face {
  font-family: Atkinson;
  src: url('assets/atkinson.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --copy: #375462;
  --dark: #081f2d;
  --soft: #cde3e7;
  --gutter: clamp(20px, 5.7vw, 84px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 98px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.5 Atkinson, Arial, sans-serif; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: .98; letter-spacing: -.053em; text-wrap: balance; }
em { font-style: normal; }
:focus-visible { outline: 3px solid #00768c; outline-offset: 4px; }
.header :focus-visible, .hero :focus-visible, .company :focus-visible { outline-color: var(--wake); }
.wrap { width: min(1440px, 100%); padding-inline: var(--gutter); margin-inline: auto; }
.skip { position: fixed; z-index: 10; top: 10px; left: 12px; padding: 10px 16px; color: var(--ink); background: white; transform: translateY(-160%); }
.skip:focus { transform: translateY(0); }

.header { position: sticky; z-index: 5; top: 0; background: #081f2df5; color: white; border-bottom: 1px solid #a7d6e32c; }
.header-inner { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1rem, 1.9vw, 1.25rem); font-weight: 700; letter-spacing: -.03em; text-decoration: none; line-height: 1.02; }
.brand img { flex: 0 0 auto; }
.header nav { display: flex; gap: clamp(13px, 3.5vw, 38px); align-items: center; }
.header nav a { text-decoration: none; color: #d1e7e9; padding-block: 9px; }
.header nav a:hover { color: white; text-decoration: underline; text-underline-offset: .25em; }

.hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 77% 37%, #0b5062 0, #092b3a 37%, var(--dark) 76%); color: #fff; }
.hero-inner { min-height: min(710px, calc(100svh - 75px)); display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; padding-block: 90px 126px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(3.6rem, 7.3vw, 7.05rem); max-width: 750px; }
.hero h1 em { color: var(--wake); }
.hero-copy p { font-size: clamp(1.1rem, 1.9vw, 1.4rem); max-width: 37ch; color: #d1e7e9; margin-block: 24px 30px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 48px; padding: 11px 19px; font-weight: 700; text-decoration: none; white-space: nowrap; border-radius: 100px; transition: background-color 180ms ease, transform 180ms var(--ease); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button-light { color: var(--ink); background: #f3fcfd; }
.button-light:hover { background: var(--wake); }

.hero-art { position: relative; isolation: isolate; align-self: center; min-width: 0; aspect-ratio: 1.03; width: min(106%, 620px); margin: -12px 0 0 -3%; perspective: 850px; }
.art-grid { position: absolute; inset: -8%; background-image: linear-gradient(90deg, #a2e4eb20 1px, transparent 1px), linear-gradient(#a2e4eb20 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse at center, black 4%, transparent 69%); }
.orbit { position: absolute; inset: 15% 6%; border: 1px solid #8be4ea37; border-radius: 50%; transform: rotate(-23deg); }
.orbit-inner { inset: 23% 13%; opacity: .55; transform: rotate(-32deg); }
.orbit-outer::after { content: ''; position: absolute; width: 7px; height: 7px; left: 10%; top: 21%; border-radius: 50%; background: var(--wake); box-shadow: 0 0 18px 4px #8be4ea50; }
.scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 180ms var(--ease); }
.scene-wake { position: absolute; width: 92%; height: auto; top: 54%; left: 4%; opacity: .31; transform: translate3d(var(--wx, 0px), var(--wy, 0px), -45px) rotate(-15deg); transition: transform 180ms var(--ease); }
.tile { position: absolute; inset: 18% 22% 21%; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-18deg) rotateZ(-10deg); }
.tile-face, .tile-edge, .tile-back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 30%; }
.tile-face { transform: translateZ(18px); outline: 1px solid #b2f2f05e; object-fit: contain; }
.tile-edge { transform: translate3d(8px, 12px, 1px); background: linear-gradient(145deg, #53bcc2, #084463 42%, #082431); box-shadow: 11px 19px 41px #0416248a; }
.tile-back { transform: translate3d(17px, 20px, -17px); background: #061e2b; box-shadow: 0 28px 55px #020d15bf; }
.section-wake { position: absolute; bottom: -1px; height: clamp(50px, 8vw, 114px); inset-inline: 0; overflow: hidden; pointer-events: none; background: linear-gradient(transparent 58%, #f5f9fa20); }
.section-wake::after { position: absolute; inset: auto -4% -59px; height: 80px; content: ''; background: var(--paper); transform: rotate(-1.5deg); }
.section-wake img { width: min(64%, 850px); height: auto; position: absolute; right: -6%; top: -77%; opacity: .2; transform: translate3d(var(--scroll-wake, 0px), 0, 0); }

.portfolio { padding-block: clamp(55px, 8vw, 107px) clamp(72px, 9vw, 125px); }
.section-top { display: flex; align-items: end; justify-content: space-between; gap: 18px; border-bottom: 1px solid #c5d7dd; padding-bottom: 24px; }
.section-top h2 { font-size: clamp(2.65rem, 6vw, 5.6rem); }
.product-jump { display: flex; flex-wrap: wrap; gap: 10px; }
.product-jump a { border: 1px solid #b8d0d5; border-radius: 100px; padding: 7px 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.product-jump a:hover { background: var(--mist); }
.product-jump span { margin-left: 5px; color: var(--deep-blue); }
.product { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 5.5vw, 84px); align-items: center; padding-block: clamp(39px, 6.5vw, 85px); border-bottom: 1px solid #c5d7dd; }
.product-name { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 12px; font-size: 1.27rem; font-weight: 750; }
.product-name img { flex: 0 0 auto; }
.product h3 { font-size: clamp(2.65rem, 5.35vw, 5.2rem); margin-block: 13px 19px; }
.product-copy p { color: var(--copy); max-width: 38ch; font-size: clamp(1.06rem, 1.6vw, 1.26rem); }
.product-site { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; margin-top: 8px; color: var(--deep-blue); font-weight: 700; text-underline-offset: .23em; }
.product-site:hover { color: var(--ink); }
.status { border: 1px solid #c7d9df; border-radius: 100px; padding: 3px 10px; color: #3b5360; background: white; font-size: .83rem; font-weight: 700; }
.gallery-frame { overflow: hidden; border-radius: 18px; }
.dofi-visual .gallery-frame { background: #e2f2f1; border: 1px solid #c3dce0; }
.dofi-stage { position: relative; overflow: hidden; height: clamp(265px, 34vw, 440px); background: radial-gradient(ellipse at 58% 100%, #8fc7cc, #d6ecec 53%, #edf6f6 83%); }
.dofi-stage::before, .dofi-stage::after { content: ''; position: absolute; border: 1px solid #f8ffffad; border-radius: 50%; inset: 20% 14% -8%; transform: rotate(-15deg); }
.dofi-stage::after { inset: 24% 7% -19%; }
.phone-main, .phone-echo { position: absolute; width: clamp(160px, 35%, 255px); height: auto; z-index: 1; border-radius: 12%; box-shadow: 0 18px 36px #133c4f30; }
.phone-main { left: 31%; top: 8%; transform: rotate(-7deg); }
.phone-echo { left: 48%; top: 22%; transform: rotate(13deg); opacity: .72; }
.motopit .product-copy { grid-column: 2; grid-row: 1; }
.motopit { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.motopit .product-visual { grid-column: 1; grid-row: 1; }
.motopit-visual .gallery-frame { background: #0b2532; color: #e9f4f5; }
.vehicle-stage { position: relative; overflow: hidden; aspect-ratio: 1.67; background: #102d3a; }
.vehicle-stage img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-stage::after { position: absolute; inset: 0; content: ''; background: linear-gradient(#06192323, transparent 22%, transparent 74%, #0619235c); pointer-events: none; }
.framing { z-index: 1; position: absolute; inset: 13% 10%; opacity: .88; background: linear-gradient(white,white) left top/23px 1px,linear-gradient(white,white) left top/1px 23px,linear-gradient(white,white) right top/23px 1px,linear-gradient(white,white) right top/1px 23px,linear-gradient(white,white) left bottom/23px 1px,linear-gradient(white,white) left bottom/1px 23px,linear-gradient(white,white) right bottom/23px 1px,linear-gradient(white,white) right bottom/1px 23px; background-repeat: no-repeat; }
.visual-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 13px; flex-wrap: wrap; padding: 10px 15px; font-size: .9rem; }
.visual-caption span:first-child { font-weight: 750; }
.gallery-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.product-visual:not(.is-ready) .gallery-controls { display: none; }
.gallery-controls button { background: white; color: var(--ink); border: 1px solid #b7d0d6; min-height: 44px; border-radius: 100px; padding: 6px 13px; cursor: pointer; font-size: .94rem; }
.gallery-controls button:hover { background: var(--mist); }
.gallery-controls button[aria-pressed='true'] { background: var(--ink); color: white; border-color: var(--ink); }

.company { background: linear-gradient(110deg, var(--dark), var(--deep-blue)); color: white; }
.company-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-block: 59px; }
.company h2 { font-size: clamp(2rem, 4vw, 3.9rem); margin-bottom: 10px; }
.company p { max-width: 60ch; color: #d3e9ec; font-size: 1.07rem; }
.footer { background: var(--dark); color: #d4e6e9; border-top: 1px solid #83c4d137; }
.footer-inner { min-height: 80px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 25px; }
.footer-brand { white-space: nowrap; font-weight: 700; text-decoration: none; }
.footer-brand span { padding-left: 3px; }
.footer details { font-size: .92rem; max-width: 480px; }
.footer summary { cursor: pointer; }
.footer details p { padding-top: 8px; }
.can-reveal [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .74s var(--ease); }
.can-reveal [data-reveal].is-visible, .can-reveal [data-reveal]:focus-within { opacity: 1; transform: translateY(0); }

@media (max-width: 920px) {
  .hero-inner { min-height: 0; padding-block: 75px 110px; }
  .hero h1 { font-size: clamp(3.25rem, 8vw, 5rem); }
  .product { gap: 30px; }
  .company-inner { grid-template-columns: auto minmax(0, 1fr); }
  .company-inner .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 650px) {
  html { scroll-padding-top: 82px; }
  .header-inner { min-height: 68px; gap: 11px; }
  .brand { max-width: 176px; gap: 8px; }
  .brand img { width: 40px; height: 40px; }
  .header nav { gap: 14px; }
  .header nav a { font-size: .92rem; }
  .hero-inner { grid-template-columns: 1fr; padding-block: 61px 65px; }
  .hero h1 { font-size: clamp(3.18rem, 12.2vw, 5.15rem); }
  .hero-copy p { margin-block: 17px 23px; }
  .hero-art { width: min(100%, 450px); justify-self: center; margin: 4px 0 0; max-height: 400px; }
  .section-wake img { top: -32%; }
  .section-top { align-items: start; flex-direction: column; }
  .product { grid-template-columns: 1fr; }
  .motopit .product-copy, .motopit .product-visual { grid-column: auto; grid-row: auto; }
  .company-inner { gap: 13px 18px; padding-block: 47px; }
  .company-inner > img { width: 54px; height: 54px; align-self: start; }
  .footer-inner { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .scene, .section-wake img { transform: none; }
  .can-reveal [data-reveal] { opacity: 1; transform: none; }
}