:root {
  --ink: #092d4a;
  --ocean: #0e5f93;
  --pulse: #38d7eb;
  --mist: #dce8ef;
  --pearl: #f4f5f3;
  --graphite: #182027;
  --white: #fbfcfb;
  --line: rgba(9, 45, 74, .16);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--graphite);
  background: var(--pearl);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.brand { font-weight: 700; letter-spacing: .16em; font-size: 15px; }
.brand span { font-weight: 400; letter-spacing: .02em; opacity: .55; margin-left: 8px; }
nav { display: flex; gap: 30px; font-size: 13px; }
nav a { opacity: .62; transition: opacity .2s; }
nav a:hover { opacity: 1; }

.hero { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 1.04fr .96fr; overflow: hidden; }
.hero-copy { padding: clamp(64px, 8vw, 130px) 4vw 70px; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 32px; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ocean); }
h1 { margin: 0; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: clamp(66px, 7.1vw, 124px); line-height: .76; letter-spacing: -.045em; }
h1 em { font-weight: 400; color: var(--ocean); }
.lead { max-width: 620px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.65; margin: 48px 0 38px; color: #43515b; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.button { padding: 16px 20px; border-radius: 2px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 38px; }
.button.primary { background: var(--ink); color: white; }
.text-link { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding-bottom: 4px; border-bottom: 1px solid var(--ink); }
.signature { font-family: var(--serif); font-style: italic; color: var(--ocean); font-size: 18px; }
.hero-art { position: relative; background: radial-gradient(circle at 54% 44%, #eefcfd 0 7%, #cde7ee 31%, #b4c6d4 62%, #7890a2 100%); border-left: 1px solid var(--line); display: grid; place-items: center; isolation: isolate; }
.hero-art::after { content: ""; position: absolute; inset: auto 7% 7% 7%; height: 10%; background: var(--ink); filter: blur(45px); opacity: .2; border-radius: 50%; }
.hero-art img { width: min(94%, 790px); position: relative; z-index: 2; mix-blend-mode: multiply; filter: saturate(.82) contrast(1.05); }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; }
.orbit-one { width: 73%; aspect-ratio: 1; }
.orbit-two { width: 93%; aspect-ratio: 1; }
.art-note { position: absolute; z-index: 3; left: 6%; bottom: 6%; color: white; font-size: 11px; line-height: 1.55; text-transform: uppercase; letter-spacing: .11em; }
.art-note span { font-family: var(--serif); font-size: 42px; line-height: 1; display: block; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principles article { padding: 42px 4vw 48px; border-right: 1px solid var(--line); }
.principles article:last-child { border-right: 0; }
.principles span { font-family: var(--serif); color: var(--ocean); font-size: 20px; }
.principles h2 { font-family: var(--serif); color: var(--ink); font-size: 34px; font-weight: 400; margin: 16px 0 12px; }
.principles p { max-width: 380px; margin: 0; font-size: 13px; line-height: 1.65; color: #5b6871; }

.section { padding: 110px 4vw; }
.section-head { display: grid; grid-template-columns: .7fr 1.3fr 1fr; align-items: start; gap: 5vw; margin-bottom: 64px; }
.section-head h2 { margin: 0; font: 400 clamp(42px, 4.2vw, 70px)/.95 var(--serif); color: var(--ink); letter-spacing: -.025em; }
.section-head h2 em { font-weight: 400; color: var(--ocean); }
.section-head > p:last-child { margin: 3px 0 0; font-size: 14px; line-height: 1.7; color: #5b6871; }
.swatches { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr 1fr; min-height: 310px; border: 1px solid var(--line); }
.swatch { border: 0; border-right: 1px solid rgba(255,255,255,.25); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; font: 600 12px var(--sans); cursor: pointer; transition: flex .25s ease, transform .2s; }
.swatch:hover { transform: translateY(-6px); }
.swatch small { font-weight: 400; opacity: .65; }
.ink { background: var(--ink); color: white; }.ocean { background: var(--ocean); color: white; }.pulse { background: var(--pulse); color: var(--ink); }.mist { background: var(--mist); color: var(--ink); }.pearl { background: var(--pearl); color: var(--ink); }.graphite { background: var(--graphite); color: white; }
.copy-hint { text-align: right; font-size: 11px; color: #73818b; letter-spacing: .06em; }

.type-section { background: var(--white); border-top: 1px solid var(--line); }
.type-stage { display: grid; grid-template-columns: 1.45fr .55fr; border: 1px solid var(--line); }
.type-display, .type-body { padding: clamp(30px, 4vw, 64px); }
.type-display { border-right: 1px solid var(--line); }
.type-label { display: block; color: #75828b; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; margin-bottom: 52px; }
.type-display > p { font: 400 clamp(60px, 7.2vw, 120px)/.78 var(--serif); letter-spacing: -.045em; color: var(--ink); margin: 0 0 54px; }
.type-display em { color: var(--ocean); font-weight: 400; }
.type-meta { display: flex; flex-wrap: wrap; gap: 12px 30px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #74818a; }
.type-body h3 { color: var(--ink); font-size: 24px; line-height: 1.32; margin: 0 0 24px; }
.type-body p { color: #59666e; font-size: 13px; line-height: 1.75; }
.alphabet { border-top: 1px solid var(--line); margin-top: 46px; padding-top: 32px; font: 400 27px/1.5 var(--serif); color: var(--ocean); }
.scale-row { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-top: 0; }
.scale-row div { padding: 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.scale-row div:last-child { border-right: 0; }
.scale-row strong { font: 400 36px var(--serif); color: var(--ink); }
.scale-row span { font-size: 10px; color: #75828b; text-transform: uppercase; letter-spacing: .1em; }

.material-section { background: var(--ink); color: white; }
.light-head h2 { color: white; }.light-head h2 em { color: #99d7e7; }.light-head > p:last-child { color: #b5c3cc; }.light-head .eyebrow { color: var(--pulse); }
.material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); }
.material-card { min-height: 610px; position: relative; overflow: hidden; padding: 32px; background: #102f45; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.material-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(4,24,39,.85)); z-index: -1; }
.material-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.7); transition: transform .6s ease; }
.material-card:hover img { transform: scale(1.035); }
.material-card > span { color: #a5dcea; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; }
.material-card h3 { font: 400 42px var(--serif); margin: 15px 0 8px; }
.material-card p { max-width: 330px; margin: 0; color: #c3d0d7; font-size: 13px; line-height: 1.6; }
.glass-card { background: radial-gradient(circle at 50% 40%, #427b92, #13384d 50%, #08263a); }
.glass-disc { position: absolute; top: 10%; left: 13%; width: 74%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.65); box-shadow: inset 0 0 44px rgba(255,255,255,.26), 0 0 55px rgba(56,215,235,.2); z-index: -1; }
.glass-disc::before { content: ""; position: absolute; width: 32%; height: 32%; top: 14%; left: 16%; border-radius: 50%; background: rgba(255,255,255,.4); filter: blur(16px); }

.components-section { background: #e7edf0; }
.component-board { display: grid; grid-template-columns: 1fr 1.4fr 1fr; border: 1px solid var(--line); background: var(--white); }
.component-cell { min-height: 310px; padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.component-cell .type-label { margin-bottom: 42px; }
.buttons-cell { grid-row: span 2; display: flex; flex-direction: column; }
.button-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: auto 0; }
.button.secondary { border: 1px solid var(--ink); color: var(--ink); }
.quote-cell { grid-column: span 2; border-right: 0; }
blockquote { font: 400 clamp(36px, 4vw, 66px)/.98 var(--serif); color: var(--ink); margin: 0; max-width: 920px; }
.stat-cell strong { font: 400 112px/.8 var(--serif); color: var(--ocean); }
.stat-cell strong span { font-size: 40px; }
.stat-cell p { font-size: 12px; color: #617079; }
.notice-cell { border-right: 0; }
.notice { padding: 26px; border-left: 3px solid var(--pulse); background: var(--mist); }
.notice b { font: 500 24px var(--serif); color: var(--ink); }
.notice p { font-size: 13px; line-height: 1.5; margin-bottom: 0; }

.patterns-section { background: var(--white); }
.pattern-grid { display: grid; grid-template-columns: 1.55fr 1fr .65fr; gap: 24px; align-items: stretch; }
.pattern-card { border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.pattern-card footer { padding: 18px 20px; display: flex; justify-content: space-between; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #66747d; border-top: 1px solid var(--line); }
.pattern-card footer b { color: var(--ink); }
.mini-browser { height: 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.mini-browser span { width: 5px; height: 5px; border-radius: 50%; background: #9cacb5; }
.web-layout { flex: 1; min-height: 405px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #f1f4f4; }
.web-layout small, .story-layout small { font-size: 7px; letter-spacing: .15em; color: var(--ocean); }
.web-layout h3 { font: 400 48px/.82 var(--serif); color: var(--ink); margin: 74px 0 20px; }.web-layout h3 i { color: var(--ocean); font-weight: 400; }
.web-layout p { font-size: 9px; line-height: 1.55; max-width: 170px; }
.web-layout img { width: 180%; height: 100%; object-fit: cover; transform: translateX(-18%); mix-blend-mode: multiply; }
.slide-layout { flex: 1; padding: 26px; position: relative; overflow: hidden; min-height: 433px; background: var(--ink); color: white; }
.slide-layout > span { color: var(--pulse); font: 400 22px var(--serif); }
.slide-layout h3 { font: 400 44px/.9 var(--serif); margin: 80px 0 18px; position: relative; z-index: 2; }
.slide-layout p { width: 55%; font-size: 9px; line-height: 1.5; position: relative; z-index: 2; color: #c7d5dc; }
.slide-layout img { position: absolute; width: 74%; right: -20%; bottom: -8%; mix-blend-mode: screen; opacity: .75; }
.story-layout { flex: 1; min-height: 433px; padding: 26px 20px; position: relative; overflow: hidden; background: linear-gradient(180deg, #f4f7f7, #cad8df); }
.story-layout h3 { margin: 46px 0 0; font: 400 34px/.9 var(--serif); color: var(--ink); position: relative; z-index: 2; }
.story-layout img { position: absolute; width: 120%; left: -12%; top: 30%; mix-blend-mode: multiply; }
.story-layout > span { position: absolute; left: 20px; right: 20px; bottom: 24px; font-size: 8px; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 12px; }

.asset-section { background: #d8e1e7; }
.asset-gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: 360px; gap: 14px; }
.asset-gallery figure { margin: 0; position: relative; overflow: hidden; background: #bccbd4; }
.asset-gallery figure:nth-child(4) { grid-column: 2; }.asset-gallery figure:nth-child(5) { grid-column: 3; }
.asset-gallery .asset-wide { grid-row: span 2; }
.asset-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s; }
.asset-gallery figure:hover img { transform: scale(1.025); filter: saturate(1.1); }
.asset-gallery figcaption { position: absolute; left: 18px; bottom: 18px; color: white; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.asset-gallery figcaption span { font: 400 24px var(--serif); display: block; }

.rules-section { display: grid; grid-template-columns: 1fr 1fr; }
.rule { padding: 90px 8vw; min-height: 560px; }
.rule > span { font-size: 11px; letter-spacing: .18em; font-weight: 700; }
.rule h2 { font: 400 clamp(48px, 5vw, 80px)/.86 var(--serif); margin: 90px 0 54px; }
.rule ul { list-style: none; padding: 0; margin: 0; }
.rule li { padding: 14px 0; border-top: 1px solid; font-size: 13px; }
.do { background: var(--mist); color: var(--ink); }.dont { background: var(--graphite); color: #dbe4e8; }.dont > span { color: #8ea0aa; }.dont li { border-color: rgba(255,255,255,.18); }.do li { border-color: var(--line); }

.closing { min-height: 760px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; background: radial-gradient(circle, #edf8f8, #cbd8df 58%, #9fb2bf); }
.closing img { position: absolute; width: min(54vw, 750px); mix-blend-mode: multiply; opacity: .42; }
.closing .eyebrow, .closing h2, .closing a { position: relative; z-index: 2; }
.closing h2 { margin: 15px 0 50px; font: 400 clamp(66px, 8vw, 130px)/.76 var(--serif); color: var(--ink); letter-spacing: -.04em; }.closing h2 em { color: var(--ocean); font-weight: 400; }
.site-footer { height: 80px; padding: 0 4vw; display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #71808a; background: var(--white); }

@media (max-width: 900px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 78vw; border-left: 0; border-top: 1px solid var(--line); }
  .principles { grid-template-columns: 1fr; }
  .principles article { border-right: 0; border-bottom: 1px solid var(--line); }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .type-stage { grid-template-columns: 1fr; }.type-display { border-right: 0; border-bottom: 1px solid var(--line); }
  .scale-row { grid-template-columns: repeat(4, 1fr); }
  .material-grid { grid-template-columns: 1fr; }.material-card { min-height: 520px; }
  .component-board { grid-template-columns: 1fr; }.component-cell, .quote-cell { grid-column: auto; grid-row: auto; border-right: 0; }
  .pattern-grid { grid-template-columns: 1fr; }.story-pattern { max-width: 400px; width: 100%; justify-self: center; }
  .asset-gallery { grid-template-columns: 1fr 1fr; }.asset-gallery figure:nth-child(4), .asset-gallery figure:nth-child(5) { grid-column: auto; }
  .rules-section { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero-copy { padding: 54px 20px 58px; }
  .topbar { padding: 0 20px; }
  h1 { font-size: 59px; }
  .signature { display: none; }
  .principles article, .section { padding-left: 20px; padding-right: 20px; }
  .swatches { min-height: 540px; }
  .scale-row { grid-template-columns: repeat(2, 1fr); }
  .type-display > p { font-size: 53px; }
  .pattern-grid { gap: 14px; }.web-layout { grid-template-columns: 1fr; }.web-layout img { display: none; }
  .asset-gallery { grid-template-columns: 1fr; grid-auto-rows: 330px; }.asset-gallery .asset-wide { grid-row: auto; }
  .rule { padding: 70px 20px; min-height: 500px; }
  .closing { min-height: 620px; padding: 0 20px; }.closing img { width: 120%; }
  .site-footer { height: auto; padding: 24px 20px; align-items: flex-start; gap: 14px; flex-direction: column; }
}