:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
  background: #073c91;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --edge-x: clamp(24px, 4.5vw, 72px);
  --edge-top: clamp(28px, 4vw, 52px);
  --edge-bottom: clamp(24px, 3vw, 40px);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { position: relative; }
.ocean { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 85% 85%, #1687d4, transparent 65%), radial-gradient(ellipse at 25% 5%, #225cad, transparent 65%), linear-gradient(145deg, #041d51, #095bad); }
#ocean { width: 100%; height: 100%; display: block; }
.whale-fallback { position: absolute; width: 104vw; max-width: none; left: 66%; top: 58%; transform: translate(-50%, -50%); opacity: .3; mix-blend-mode: screen; }
.ocean.whale-ready .whale-fallback { visibility: hidden; }
.atmosphere { position: absolute; inset: 0; background: linear-gradient(90deg, #03162fe8 0%, #041b3bcc 26%, #05234c73 48%, #05234c14 69%, transparent 84%), linear-gradient(180deg, #021a341a, transparent 25%, transparent 78%, #00163133); }
.page { position: relative; z-index: 1; height: 100vh; height: 100dvh; }
header { position: absolute; top: max(var(--edge-top), env(safe-area-inset-top)); left: max(var(--edge-x), env(safe-area-inset-left)); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 27px; line-height: 1; letter-spacing: -1.1px; font-weight: 650; }
/* Shared Clearer / TakYes silhouette and conic treatment, in Seafic blues. */
.mark { display: block; width: 28px; height: 28px; flex-shrink: 0; background: conic-gradient(#3a97f9, #153d94, #073c91, #75ddff, #d3f9ff, #75ddff, #3a97f9); -webkit-mask: url("assets/brand-shape.png") center/contain no-repeat; mask: url("assets/brand-shape.png") center/contain no-repeat; }
main { position: absolute; top: 35%; left: 9%; right: 5%; max-width: 680px; text-align: left; }
h1 { font-size: clamp(52px, 5.7vw, 84px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; margin: 0; }
h1 span { display: block; color: #d5eaff; }
.description { margin: 32px 0 0; color: #e3edfa; font-size: clamp(18px, 1.4vw, 20px); font-weight: 400; line-height: 1.5; letter-spacing: -.012em; }
.tagline { margin: 20px 0 0; color: #b5c9df; font-size: clamp(16px, 1.2vw, 17px); font-weight: 400; line-height: 1.5; letter-spacing: -.008em; }
main a { color: inherit; text-decoration: underline; text-decoration-color: #bed6ef80; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .25s; }
main a:hover { text-decoration-color: #fff; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 3px; }
footer { position: absolute; bottom: max(var(--edge-bottom), env(safe-area-inset-bottom)); left: max(var(--edge-x), env(safe-area-inset-left)); font-size: 12px; letter-spacing: .02em; color: #9fb6d0; line-height: 1.4; }
@media (max-width: 700px) {
  :root { --edge-x: 24px; --edge-top: 28px; --edge-bottom: 24px; }
  .brand { font-size: 25px; gap: 9px; }
  .mark { width: 26px; height: 26px; }
  main { top: 31%; left: 24px; right: 24px; max-width: 480px; }
  h1 { font-size: clamp(38px, 9.6vw, 48px); }
  .description { margin-top: 28px; font-size: 17px; line-height: 1.5; max-width: 345px; }
  .desktop-break { display: none; }
  .tagline { margin-top: 18px; font-size: 16px; max-width: 345px; }
  .whale-fallback { width: 118vw; left: 60%; top: 64%; }
  .atmosphere { background: linear-gradient(90deg, #03162fc7, #041b3b99 40%, #05234c26 90%), linear-gradient(180deg, #03162f26 12%, #03162f73 32%, #03162f59 52%, transparent 76%); }
}
@media (max-height: 650px) {
  :root { --edge-top: 24px; --edge-bottom: 20px; }
  main { top: 25%; }
  h1 { font-size: clamp(38px, 5.7vw, 64px); }
  .description { margin-top: 28px; }
  .tagline { margin-top: 16px; }
}
@media (max-width: 700px) and (max-height: 650px) {
  main { top: 25%; }
  h1 { font-size: clamp(36px, 9.6vw, 44px); }
}
@media (max-height: 480px) {
  :root { --edge-top: 18px; --edge-bottom: 16px; }
  .brand { font-size: 23px; }
  .mark { width: 24px; height: 24px; }
  main { top: 22%; }
  h1 { font-size: clamp(32px, 4.8vw, 44px); }
  .description { margin-top: 18px; font-size: 16px; line-height: 1.45; }
  .tagline { margin-top: 12px; font-size: 15px; line-height: 1.45; }
}
@media (max-height: 350px) {
  :root { --edge-top: 14px; --edge-bottom: 12px; }
  main { top: 20%; }
  h1 { font-size: 30px; }
  .description { margin-top: 14px; font-size: 15px; }
  .tagline { margin-top: 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  main { animation: arrive 1.5s cubic-bezier(.22,1,.36,1) both; }
  .brand, footer { animation: fade 1.8s ease both; }
}
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Product navigation uses the existing shared brand silhouette, with each product's palette. */
header { right: max(var(--edge-x), env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; z-index: 5; }
.products-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: -8px -16px -8px 0; border: 1px solid transparent; border-radius: 10px; color: #fff; background: transparent; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; touch-action: manipulation; }
.products-toggle:hover, .products-toggle[aria-expanded="true"] { background: #ffffff14; border-color: #ffffff26; }
.products-toggle svg { transition: transform .2s; }
.products-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.products-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.products-panel { position: absolute; right: 0; top: calc(100% + 24px); width: min(840px, 100%); padding: 28px; border: 1px solid #ffffffb3; border-radius: 22px; background: #f8fbff; color: #132c49; box-shadow: 0 22px 70px #00112c55; max-height: calc(100dvh - 130px); overflow-y: auto; overscroll-behavior: contain; }
.products-panel[hidden] { display: none; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.product-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 18px; min-width: 0; border-radius: 14px; color: inherit; text-decoration: none; border: 1px solid #dce6f1; background: #fff; }
a.product-card:hover { background: #edf4fc; border-color: #aec5e0; }
a.product-card:focus-visible { outline: 2px solid #195eb0; outline-offset: 3px; }
.product-logo { display: block; flex-shrink: 0; width: 46px; height: 46px; margin-bottom: 10px; -webkit-mask: url("assets/brand-shape.png") center/contain no-repeat; mask: url("assets/brand-shape.png") center/contain no-repeat; }
.product-logo-takyes { background: conic-gradient(#eb0028,#b9001f,#7d0015,#300008,#000,#42000b,#9c001b,#eb0028); }
.product-logo-clearer { background: conic-gradient(#ff695c,#ffa442,#f5da62,#82c87a,#68c6d1,#858be0,#c080d0,#ff695c); }
/* Very Special Story: the same geometry and conic style in calm sand, ivory and warm brown. */
.product-logo-story { background: conic-gradient(#c7ad91,#aa896b,#947456,#dcc6af,#fffdf7,#f2e7d9,#c7ad91); }
.product-name { width: 100%; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.product-arrow { float: right; color: #6b8199; font-size: 17px; }
.product-description { color: #607187; font-size: 13px; line-height: 1.6; }
.product-coming { background: #f6f2ec; border-color: #e8ded3; }
.coming-soon { color: #7d6853; border: 1px solid #dfd2c2; border-radius: 20px; padding: 4px 9px; font-size: 10px; line-height: 1.4; letter-spacing: .03em; }
footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; right: var(--edge-x); }
footer a { color: inherit; text-underline-offset: 3px; text-decoration-color: #9fb6d060; }
footer a:hover { color: #fff; }
@media (max-width: 700px) {
  .products-panel { top: calc(100% + 20px); width: 100%; padding: 20px; border-radius: 18px; max-height: calc(100dvh - 110px); }
  .product-grid { grid-template-columns: 1fr; gap: 10px; }
  .product-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 17px 15px; }
  .product-logo { width: 40px; height: 40px; grid-row: 1 / 3; margin: 0; align-self: center; }
  .product-name { font-size: 16px; }
  .product-description, .coming-soon { grid-column: 2; }
  .coming-soon { justify-self: start; }
}
@media (max-height: 560px) {
  html, body { overflow-y: auto; }
  .page { min-height: 560px; }
  .products-panel { max-height: calc(100dvh - 90px); }
}
@media (prefers-reduced-motion: reduce) { .products-toggle svg { transition: none; } }

/* Company context, kept secondary to the original headline. */
.company-description { max-width: 500px; margin: 24px 0 0; color: #c8daec; font-size: 16px; line-height: 1.65; letter-spacing: -.008em; }
@media (max-height: 720px) {
  html, body { overflow-y: auto; }
  .page { min-height: 720px; }
  main { top: 180px; }
}
@media (max-width: 700px) {
  html, body { overflow-y: auto; }
  .page { min-height: 800px; }
  main { top: min(31vh, 220px); }
  .company-description { max-width: 420px; font-size: 15px; margin-top: 22px; }
}