/* === Foundation === */
/* Shared foundation: variables, reset, global typography, navigation, and common layout rules. */
button,
input,
select,
textarea {
  font:inherit
}
button,
input,
select,
textarea,
a {
  -webkit-tap-highlight-color:transparent
}
img,
video {
  max-width:100%
}
@media(prefers-color-scheme:dark) {
  :root {
    color-scheme:light only
  }
  html,
  body {
    background:#F6F5F1;
    color:#19223A
  }
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
.axis-line {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(17px,3vw,22px);
  line-height:1.38;
  color:var(--slate);
  margin-bottom:18px;
  max-width:100%
}

.card,
.usage-card{
  border:1px solid var(--line);
  background:#fff;
  padding:var(--box-pad);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0
}

.check {
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:14.5px;
  line-height:1.55;
  color:var(--soft);
  min-width:0
}
.check input {
  margin-top:5px;
  accent-color:var(--slate)
}
.check-list {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:start
}
.check.all {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:16px;
  color:var(--ink)
}
.choice {
  display:flex;
  height:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.35);
  padding:var(--box-pad-sm);
  cursor:pointer;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease
}
.choice input {
  position:absolute;
  opacity:0;
  pointer-events:none
}
.choice input:checked + .choice-body .choice-name,.choice input:checked + .choice-body .choice-axis {
  color:var(--slate)
}
.choice-axis {
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  font-size:16px;
  line-height:1.35;
  color:var(--slate);
  margin-bottom:12px
}
.choice-body {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0
}
.choice-desc {
  display:block;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:14.5px;
  line-height:1.6;
  color:var(--soft);
  min-width:0
}
.choice-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--grid-gap);
  align-items:stretch
}
.choice-name {
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:22px;
  line-height:1.18;
  color:var(--ink);
  margin-bottom:4px
}
.choice:has(input:checked) {
  border-color:var(--slate);
  box-shadow:0 0 0 1px var(--slate);
  background:rgba(236,233,225,.72)
}
.choice:hover {
  border-color:var(--slate);
  background:rgba(236,233,225,.6)
}
.contact {
  margin-top:clamp(58px,9vw,92px);
  padding-top:clamp(38px,7vw,56px);
  border-top:1px solid var(--line)
}

.eyebrow {
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:24px
}
.field label {
  display:block;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:8px;
  line-height:1.45
}
.fields {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start
}

.form-error {
  margin-top:20px;
  border:1px solid rgba(120,45,38,.25);
  background:rgba(120,45,38,.05);
  padding:16px 18px;
  font-family:'Spectral',serif;
  font-size:14px;
  line-height:1.6;
  color:#6B2E28
}
.form-error a {
  color:#6B2E28;
  text-decoration:none;
  border-bottom:1px solid rgba(107,46,40,.35)
}

.hero h1 {
  font-size:clamp(38px,7.4vw,60px);
  line-height:1.07;
  letter-spacing:-.008em;
  margin-bottom:22px
}
.hint {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:13.5px;
  line-height:1.6;
  color:var(--soft);
  margin-top:10px
}
.intro p,.method p {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:clamp(15.5px,2.5vw,17px);
  line-height:1.74;
  color:var(--ink);
  max-width:100%
}
.label {
  font-size:11.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:clamp(12px,2.5vw,18px)
}
.lang-switch {
  display:flex;
  gap:5px;
  align-items:center
}
.lang-switch::before {
  content:"";
  width:16px;
  height:16px;
  margin-right:4px;
  background:url("../brand/ui/globe.svg?v=0706-globe-stroke") center/contain no-repeat;
  opacity:.9;
  flex:0 0 auto
}
.lang-switch .disabled {
  opacity:.35;
  cursor:not-allowed
}
.lang-switch [aria-current="page"] {
  border-color:rgba(243,241,235,.68);
  color:#F3F1EB
}
.lang-switch a,.lang-switch span {
  min-width:28px;
  height:22px;
  padding:0 5px;
  border:1px solid rgba(243,241,235,.24);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  text-decoration:none;
  font-family:'Spectral',serif;
  font-size:9px;
  letter-spacing:.08em;
  line-height:1;
  color:rgba(243,241,235,.82);
  transition:border-color .25s ease,opacity .25s ease,transform .25s ease,background .25s ease,color .25s ease
}
.lang-switch a:hover,.lang-switch a:focus-visible {
  border-color:rgba(243,241,235,.72);
  background:rgba(243,241,235,.08);
  color:#F3F1EB;
  transform:translateY(-1px)
}
.lead {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:clamp(15px,2.4vw,17px);
  line-height:1.72;
  color:var(--soft);
  margin-bottom:clamp(40px,7vw,62px);
  max-width:100%
}
.logo-card,
.suite-card,
.pat-card,
.usage-card,
.card,
.choice,
.field,
.form,
.mood,
.guard-card,
.menu-row{
  min-width:0
}
.logo-grid,
.suite-grid,
.pat-grid,
.usage-grid,
.choice-grid,
.check-list,
.fields,
.menu-row,
.tiu-row,
.marks,
.forms,
.guard-grid,
.type-system-top{
  min-width:0
}
.logo-title,
.choice-name,
.choice-axis,
.menu-row .mname,
.usage-title,
.type-system-role,
.type-system-dev,
.subgroup-title,
.label,
.sec-label,
.eyebrow{
  word-break:keep-all;
  hyphens:none
}

.method {
  margin-top:clamp(58px,9vw,92px)
}

.method p+p {
  margin-top:16px
}
.motion-stage {
  border:1px solid var(--line);
  background:#fff;
  padding:clamp(34px,6vw,64px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:220px
}

.ms-replay {
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--slate-soft);
  font-family:'Cormorant Garamond',serif;
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:9px 20px;
  margin-top:26px;
  cursor:pointer;
  transition:border-color .3s,color .3s
}
.ms-replay:hover {
  border-color:var(--slate);
  color:var(--slate)
}
.note {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:14.5px;
  line-height:1.68;
  color:var(--soft);
  margin-top:16px
}

.sec-label {
  font-size:11.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--faint);
  margin:clamp(56px,8vw,88px) 0 22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line)
}
.sec-sub {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(15.5px,2.4vw,17px);
  line-height:1.55;
  color:var(--slate-soft);
  margin-bottom:26px
}
.section {
  padding:clamp(30px,5vw,42px) 0;
  border-bottom:1px solid var(--line)
}
.section-sub {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:15px;
  line-height:1.68;
  color:var(--soft);
  margin-bottom:24px;
  max-width:100%
}
.section-title {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(23px,4vw,31px);
  line-height:1.16;
  margin-bottom:10px
}
.send-row {
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
  margin-top:28px
}
.site-menu {
  position:absolute;
  left:0;
  top:100%;
  min-width:230px;
  margin-top:0;
  padding:8px 0;
  border:1px solid rgba(201,195,183,.82);
  background:rgba(246,245,241,.94);
  box-shadow:0 18px 40px rgba(25,34,58,.08);
  opacity:0;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .25s ease,transform .25s ease
}
.site-menu a {
  display:block;
  padding:10px 16px;
  font-family:'Spectral',serif;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--soft);
  text-decoration:none
}
.site-menu a:hover,.site-menu a:focus-visible {
  color:var(--ink);
  background:rgba(236,233,225,.62)
}
.site-nav {
  position:relative;
  display:inline-block;
  z-index:20;
  padding:10px 0;
  margin:-10px 0
}
.site-nav:hover .site-menu,.site-nav:focus-within .site-menu {
  opacity:1;
  pointer-events:auto;
  transform:none
}
.site-trigger {
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  width:38px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer
}
.site-trigger-logo {
  display:block;
  width:clamp(24px,2.6vw,34px);
  height:auto
}
.site-trigger:hover .site-trigger-logo,.site-trigger:focus-visible .site-trigger-logo {
  opacity:.82
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0
}

.subgroup {
  margin-top:24px;
  padding:var(--box-pad-sm);
  border:1px solid var(--line);
  background:rgba(236,233,225,.42)
}
.subgroup-title {
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:14px
}

.thumb {
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  padding:0;
  cursor:pointer;
  opacity:.52;
  transition:opacity .25s ease,border-color .25s ease;
  flex:0 0 74px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center
}
.thumb span {
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  padding:8px;
  text-align:center
}

.thumb:hover,
.thumb:focus-visible{
  opacity:1;
  border-color:var(--slate)
}
.brand-masthead {
  height:var(--masthead-h);
  background:#151C2B;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right:max(var(--page-x),env(safe-area-inset-right));
  padding-left:max(var(--page-x),env(safe-area-inset-left));
  position:relative
}
.brand-masthead-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:70;
  text-decoration:none
}
.brand-masthead-link:focus-visible {
  outline:1px solid rgba(243,241,235,.74);
  outline-offset:8px
}
.brand-masthead-logo {
  display:block;
  width:clamp(90px,8vw,124px);
  height:auto;
  position:relative;
  z-index:70;
  transform:translateY(2px)
}
.topbar {
  position:fixed;
  top:var(--nav-initial-top);
  left:0;
  right:0;
  z-index:60;
  background:rgba(25,34,58,.14);
  border-bottom:0;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:top .34s ease,background .28s ease
}
.mb-nav-docked .topbar {
  top:0
}
.topbar-inner {
  max-width:864px;
  margin:0 auto;
  padding-top:11px;
  padding-right:max(var(--page-x),env(safe-area-inset-right));
  padding-bottom:11px;
  padding-left:max(var(--page-x),env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}
.transition-line {
  height:1px;
  width:0;
  background:var(--slate)
}
.transition-screen {
  position:fixed;
  inset:0;
  z-index:260;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease
}
.transition-screen.run {
  opacity:1;
  visibility:visible;
  pointer-events:auto
}

.wrap {
  width:100%;
  max-width:792px;
  margin-inline:auto;
  padding-top:var(--wrap-padding-top,calc(var(--topbar-h) + clamp(46px,7vw,82px)));
  padding-bottom:max(120px,8vh);
  padding-left:var(--page-x);
  padding-right:var(--page-x)
}
.wrap.contact-wrap,.wrap.thanks-wrap {
  max-width:812px
}
:focus-visible {
  outline:2px solid var(--slate);
  outline-offset:4px
}
:root {
  color-scheme:light only;
  --bg:#F6F5F1;
  --ink:#19223A;
  --soft:#4A5260;
  --faint:#6A7280;
  --line:#C9C3B7;
  --slate:#222E48;
  --slate-soft:#6E7A88;
  --panel:#ECE9E1;
  --topbar-h:54px;
  --masthead-h:clamp(72px,6vw,88px);
  --nav-initial-top:calc((var(--masthead-h) - var(--topbar-h)) / 2);
  --page-x:clamp(24px,5vw,40px);
  --box-pad:clamp(22px,3.5vw,32px);
  --box-pad-sm:clamp(18px,3vw,24px);
  --box-pad-lg:clamp(28px,5vw,52px);
  --inner-x:clamp(16px,3vw,22px);
  --grid-gap:16px;
  --media-fade-y:linear-gradient(180deg,
    transparent 0%,rgba(0,0,0,.06) 3%,rgba(0,0,0,.16) 7%,
    rgba(0,0,0,.34) 12%,rgba(0,0,0,.58) 18%,rgba(0,0,0,.78) 24%,
    rgba(0,0,0,.92) 29%,rgba(0,0,0,.98) 33%,#000 36%,#000 68%,
    rgba(0,0,0,.98) 72%,rgba(0,0,0,.92) 76%,rgba(0,0,0,.78) 82%,
    rgba(0,0,0,.50) 89%,rgba(0,0,0,.28) 94%,rgba(0,0,0,.10) 98%,transparent 100%);
  --media-fade-bottom:linear-gradient(180deg,
    #000 0%,#000 62%,rgba(0,0,0,.98) 67%,rgba(0,0,0,.92) 72%,
    rgba(0,0,0,.80) 78%,rgba(0,0,0,.62) 84%,rgba(0,0,0,.42) 89%,
    rgba(0,0,0,.24) 92%,rgba(0,0,0,.09) 97%,transparent 100%);
  --media-fade-waterline:linear-gradient(180deg,
    transparent 0%,rgba(0,0,0,.10) 3%,rgba(0,0,0,.30) 7%,
    rgba(0,0,0,.58) 12%,rgba(0,0,0,.82) 17%,rgba(0,0,0,.96) 22%,
    #000 26%,#000 78%,rgba(0,0,0,.96) 82%,rgba(0,0,0,.80) 87%,
    rgba(0,0,0,.54) 92%,rgba(0,0,0,.26) 96%,transparent 100%)
}
[hidden] {
  display:none
}
body {
  min-width:320px;
  background:var(--bg);
  color:var(--ink);
  color-scheme:light only;
  font-family:'Spectral',Georgia,serif;
  font-weight:400;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
button[type="submit"] {
  border:1px solid var(--slate);
  background:var(--slate);
  color:#ECE9E1;
  padding:13px 22px;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-family:'Spectral',serif;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,opacity .25s ease
}
button[type="submit"]:disabled {
  opacity:.55;
  cursor:not-allowed
}
button[type="submit"]:hover {
  background:transparent;
  color:var(--slate)
}
form {
  border-top:1px solid var(--line)
}
h1 {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(34px,6.4vw,54px);
  line-height:1.08;
  letter-spacing:-.006em;
  margin-bottom:20px
}
html {
  min-width:320px;
  background:#F6F5F1;
  color-scheme:light only;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-synthesis:none;
  scroll-behavior:smooth
}
html,body {
  max-width:100%;
  overflow-x:hidden
}
html,
body,
.brand-masthead,
.topbar,
.wrap,
.card,
.usage-card,
.choice,
.field,
.form,
.logo-card,
.suite-card,
.pat-card,
.guard-card,
.guard-box,
.menu-row,
.po-item,
.contact-card,
.address-card,
.map-card {
  color-scheme:light only
}
@media(prefers-color-scheme:dark) {
  :root,
  html,
  body {
    background:#F6F5F1;
    color:#19223A;
    color-scheme:light only
  }
  input,
  textarea,
  select,
  button {
    color-scheme:light only
  }
}
input:focus,textarea:focus,select:focus {
  outline:2px solid var(--slate);
  outline-offset:3px
}
input[type="text"],input[type="email"],input[type="url"],textarea,select {
  width:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  padding:13px 14px;
  font-family:'Spectral',serif;
  font-size:15px;
  color:var(--ink);
  border-radius:0
}
textarea {
  min-height:150px;
  resize:vertical;
  line-height:1.6
}
.is-hidden-field {
  display:none
}
.field-spaced {
  margin-top:18px
}
.subgroup-flush {
  margin-top:0
}

@keyframes transitionLine {
  0% {
    width:0;
    opacity:1
  }
  82% {
    width:min(42vw,420px);
    opacity:1
  }
  100% {
    width:min(42vw,420px);
    opacity:0
  }
}
@keyframes hmRise {
  to {
    transform:translateY(0);
    opacity:1
  }
}
@keyframes hmDraw {
  to {
    width:84px
  }
}

/* === Shared Components === */
/* ============================================================
   LOGO MOTION
   ============================================================ */
.mb-logo-motion {
  --mbw:708;
  --mbh:257;
  width:min(100%,620px);
  max-width:708px;
  margin-inline:auto;
  position:relative;
  color:var(--ink)
}
.mb-logo-motion--line,.mb-logo-motion--full {
  max-width:708px
}
.mb-motion-canvas {
  position:relative;
  width:100%;
  aspect-ratio:708/257;
  overflow:visible
}
.mb-logo-motion--line .mb-motion-canvas {
  aspect-ratio:708/160
}
.mb-motion-letters {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:37.75%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  overflow:visible;
  z-index:2
}
.mb-logo-motion--line .mb-motion-letters {
  height:60.63%
}
.mb-motion-mari-base {
  height:100%;
  display:inline-flex;
  align-items:flex-start;
  justify-content:flex-start;
  overflow:visible;
  flex:0 0 auto
}
.mb-motion-letter {
  height:100%;
  display:inline-flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  flex:0 0 auto
}
.mb-motion-letter img {
  height:100%;
  width:auto;
  display:block;
  opacity:0;
  transform:translateY(112%);
  filter:none;
  will-change:transform,opacity
}
.mb-motion-space {
  display:inline-block;
  width:0;
  min-width:0;
  flex:0 0 auto;
  height:100%
}
.mb-motion-foot {
  position:absolute;
  left:0;
  top:0;
  width:37.15%;
  display:block;
  overflow:hidden;
  opacity:0;
  clip-path:inset(60% 100% 0 0);
  z-index:2
}
.mb-motion-foot img {
  display:block;
  width:100%;
  height:auto;
  filter:none
}
.mb-motion-piece {
  position:absolute;
  left:0;
  width:100%;
  display:block;
  overflow:hidden;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  z-index:3
}
.mb-motion-piece img {
  display:block;
  width:100%;
  height:auto;
  filter:none
}
.mb-motion-line {
  top:33.85%
}
.mb-motion-align {
  top:59.92%
}
.mb-logo-motion--line .mb-motion-line {
  top:54.37%
}
.site-intro.run .mb-motion-letter img,.mb-logo-motion.run .mb-motion-letter img {
  animation:mbWaveRise 1.12s cubic-bezier(.18,.72,.18,1) forwards;
  animation-delay:var(--d)
}
.site-intro.run .mb-motion-foot,.mb-logo-motion.run .mb-motion-foot {
  animation:mbFootOnlyReveal 1.02s cubic-bezier(.58,0,.24,1) forwards;
  animation-delay:.97s
}
.site-intro.run .mb-motion-piece.mb-motion-line,.mb-logo-motion.run .mb-motion-piece.mb-motion-line {
  animation:mbHorizontalReveal 1.02s cubic-bezier(.58,0,.24,1) forwards;
  animation-delay:.97s
}
/* thanks 등 일반 로고모션: align도 좌→우, 빠르게 (foot/line과 함께) */
.mb-logo-motion.run .mb-motion-piece.mb-motion-align {
  animation:mbHorizontalReveal 1.02s cubic-bezier(.58,0,.24,1) forwards;
  animation-delay:.97s
}
/* index 인트로(첫인상): align만 우→좌, 1.85s 뒤 — 마지막에 반대편에서 안착 */
.site-intro.run .mb-motion-piece.mb-motion-align {
  animation:mbAlignRevealRTL 1.0s cubic-bezier(.58,0,.24,1) forwards;
  animation-delay:1.85s
}
@keyframes mbWaveRise {
  0% {
    opacity:0;
    transform:translateY(112%)
  }
  20% {
    opacity:1
  }
  84% {
    opacity:1;
    transform:translateY(-.35%)
  }
  100% {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes mbHorizontalReveal {
  0% {
    opacity:1;
    clip-path:inset(0 100% 0 0)
  }
  100% {
    opacity:1;
    clip-path:inset(0 0 0 0)
  }
}
@keyframes mbAlignRevealRTL {
  0% {
    opacity:1;
    clip-path:inset(0 0 0 100%)
  }
  100% {
    opacity:1;
    clip-path:inset(0 0 0 0)
  }
}
@keyframes mbFootOnlyReveal {
  0% {
    opacity:1;
    clip-path:inset(60% 100% 0 0)
  }
  100% {
    opacity:1;
    clip-path:inset(60% 0 0 0)
  }
}
@media(prefers-reduced-motion:reduce) {
  .mb-motion-letter img {
    opacity:1;
    transform:none;
    animation:none
  }
  .mb-motion-foot {
    opacity:1;
    clip-path:inset(60% 0 0 0);
    animation:none
  }
  .mb-motion-piece {
    opacity:1;
    clip-path:none;
    animation:none
  }
}
.site-intro {
  position:fixed;
  inset:0;
  z-index:320;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .13s ease,visibility .13s ease
}
.site-intro.done {
  opacity:0;
  visibility:hidden;
  pointer-events:none
}
body.intro-active {
  overflow:hidden
}
.site-intro .intro-mark {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(78vw,620px);
  padding:clamp(28px,6vw,64px);
  text-align:center
}
.site-intro .mb-logo-motion {
  width:100%
}
.site-intro.done .mb-logo-motion {
  pointer-events:none
}

.motion-stage .mb-logo-motion {
  width:min(100%,520px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:visible
}
.motion-stage .mb-motion-canvas {
  width:100%;
  overflow:visible
}
.mb-motion-foot,.mb-motion-piece {
  will-change:clip-path,opacity
}
@media(max-width:560px) {
  .mb-logo-motion {
    width:100%
  }
  .site-intro .intro-mark {
    width:min(86vw,520px)
  }
}
.hero-motion .hm-line-image {
  display:block;
  opacity:1;
  overflow:hidden;
  margin-bottom:clamp(3px,.8vw,6px)
}
.hero-motion .hm-line-image img {
  display:block;
  width:100%;
  height:auto;
  clip-path:inset(0 100% 0 0);
  opacity:0
}
.hero-motion.run .hm-line-image img {
  animation:mbHorizontalRevealImg .82s cubic-bezier(.65,0,.35,1) forwards
}
@keyframes mbHorizontalRevealImg {
  0% {
    opacity:1;
    clip-path:inset(0 100% 0 0)
  }
  100% {
    opacity:1;
    clip-path:inset(0 0 0 0)
  }
}
.mb-delay-01 {
  --d:0.10s
}
.mb-delay-02 {
  --d:0.16s
}
.mb-delay-03 {
  --d:0.22s
}
.mb-delay-04 {
  --d:0.28s
}
.mb-delay-05 {
  --d:0.36s
}
.mb-delay-06 {
  --d:0.44s
}
.mb-delay-07 {
  --d:0.56s
}
.mb-delay-08 {
  --d:0.62s
}
.mb-delay-09 {
  --d:0.68s
}
.mb-delay-10 {
  --d:0.74s
}
.hm-delay-00 {
  --hm-d:0.35s
}
.hm-delay-01 {
  --hm-d:0.385s
}
.hm-delay-02 {
  --hm-d:0.42s
}
.hm-delay-03 {
  --hm-d:0.455s
}
.hm-delay-04 {
  --hm-d:0.49s
}
.hm-delay-05 {
  --hm-d:0.525s
}
.hm-delay-06 {
  --hm-d:0.56s
}
.hm-delay-07 {
  --hm-d:0.595s
}
.hm-delay-08 {
  --hm-d:0.63s
}
.hm-delay-09 {
  --hm-d:0.665s
}
.hm-delay-10 {
  --hm-d:0.7s
}
.hm-delay-11 {
  --hm-d:0.735s
}
.hm-delay-12 {
  --hm-d:0.77s
}
.hm-delay-13 {
  --hm-d:0.805s
}
.hm-delay-14 {
  --hm-d:0.84s
}
.hm-delay-15 {
  --hm-d:0.875s
}
.hm-delay-16 {
  --hm-d:0.91s
}
.hm-delay-17 {
  --hm-d:0.945s
}
.hm-delay-18 {
  --hm-d:0.98s
}
.hm-delay-19 {
  --hm-d:1.015s
}
.hm-delay-20 {
  --hm-d:1.05s
}
.hm-delay-21 {
  --hm-d:1.085s
}
.hm-delay-22 {
  --hm-d:1.12s
}
.hm-delay-23 {
  --hm-d:1.155s
}
.hm-delay-24 {
  --hm-d:1.19s
}
.hm-delay-25 {
  --hm-d:1.225s
}
.hm-delay-26 {
  --hm-d:1.26s
}
.hm-delay-27 {
  --hm-d:1.295s
}
.hm-delay-28 {
  --hm-d:1.33s
}
.hm-delay-29 {
  --hm-d:1.365s
}
.hm-delay-30 {
  --hm-d:1.4s
}
.hm-delay-31 {
  --hm-d:1.435s
}
.hm-delay-32 {
  --hm-d:1.47s
}
.hm-delay-33 {
  --hm-d:1.505s
}
.hm-delay-34 {
  --hm-d:1.54s
}
.hm-delay-35 {
  --hm-d:1.575s
}
.hm-delay-36 {
  --hm-d:1.61s
}
.hm-delay-37 {
  --hm-d:1.645s
}
.hm-delay-38 {
  --hm-d:1.68s
}
.hm-delay-39 {
  --hm-d:1.715s
}
.hm-delay-40 {
  --hm-d:1.75s
}
.hm-delay-41 {
  --hm-d:1.785s
}
.hm-delay-42 {
  --hm-d:1.82s
}
.hm-delay-43 {
  --hm-d:1.855s
}
.hm-delay-44 {
  --hm-d:1.89s
}
.hm-delay-45 {
  --hm-d:1.925s
}
.hm-delay-46 {
  --hm-d:1.96s
}
.hm-delay-47 {
  --hm-d:1.995s
}
.hm-delay-48 {
  --hm-d:2.03s
}
.hm-delay-49 {
  --hm-d:2.065s
}
.hm-delay-50 {
  --hm-d:2.1s
}
.hm-delay-51 {
  --hm-d:2.135s
}
.hm-delay-52 {
  --hm-d:2.17s
}
.hm-delay-53 {
  --hm-d:2.205s
}
.hm-delay-54 {
  --hm-d:2.24s
}
.hm-delay-55 {
  --hm-d:2.275s
}
.hm-delay-56 {
  --hm-d:2.31s
}
.hm-delay-57 {
  --hm-d:2.345s
}
.hm-delay-58 {
  --hm-d:2.38s
}
.hm-delay-59 {
  --hm-d:2.415s
}
.hm-delay-60 {
  --hm-d:2.45s
}
.hm-delay-61 {
  --hm-d:2.485s
}
.hm-delay-62 {
  --hm-d:2.52s
}
.hm-delay-63 {
  --hm-d:2.555s
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */
.nav-arrow-mark {
  display:flex;
  align-items:center;
  justify-content:flex-start
}
.nav-arrow-mark img {
  display:inline-block;
  width:15px;
  height:15px;
  object-fit:contain;
  vertical-align:-.12em;
  opacity:.74
}

@media(max-width:560px) {
  .nav-arrow-mark img {
    width:12px;
    height:12px
  }
}
.section-nav {
  margin:clamp(28px,5vw,42px) 0 clamp(34px,6vw,52px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.section-nav a {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  color:inherit;
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,color .25s ease
}
.section-nav a:hover,.section-nav a:focus-visible {
  background:rgba(236,233,225,.58);
  border-color:var(--slate-soft);
  transform:translateX(3px);
  padding-left:8px
}
.section-nav a:last-child {
  border-bottom:0
}
.section-nav .nav-no {
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  min-width:28px;
  margin:0;
  padding:0;
  font-family:'Cormorant Garamond',serif;
  font-size:13px;
  font-style:italic;
  line-height:1;
  color:var(--faint)
}
.section-nav .nav-no.nav-arrow-mark img {
  display:block;
  width:10px;
  height:10px;
  object-fit:contain;
  margin:0;
  opacity:.62
}
.section-nav .nav-text {
  display:block;
  margin:0;
  padding:0;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:12.6px;
  line-height:1.42;
  color:var(--soft);
  text-indent:0
}
.section-nav .nav-text strong {
  display:inline;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:15.4px;
  line-height:1.18;
  color:var(--ink);
  margin-right:.35em
}
.contact.contact-enq {
  margin-top:clamp(76px,12vw,124px);
  padding-top:0;
  border-top:0
}
.enq-grid {
  --enq-rule-gap:0;
  --enq-word-h:clamp(22px,2.7vw,27px);
  --enq-action-h:clamp(22px,2.7vw,27px);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"marine enquiry" "rule rule" "bach mail";
  align-items:end;
  column-gap:clamp(24px,5vw,60px);
  row-gap:0
}
.enq-marine {
  grid-area:marine;
  align-self:end;
  justify-self:start;
  display:block;
  width:auto;
  height:var(--enq-word-h);
  max-width:clamp(74px,8.4vw,90px);
  object-fit:contain;
  margin:0 0 var(--enq-rule-gap)
}
.enq-rule {
  grid-area:rule;
  display:block;
  width:100%;
  height:auto;
  margin:0;
  opacity:.9
}
.enq-bach {
  grid-area:bach;
  align-self:start;
  justify-self:start;
  display:block;
  width:auto;
  height:calc(var(--enq-word-h) * 87 / 89);
  max-width:clamp(74px,8.4vw,90px);
  object-fit:contain;
  margin:0
}
.enq-actions {
  display:contents
}
.enq-cta {
  grid-area:enquiry;
  justify-self:end;
  align-self:end;
  display:block;
  line-height:0;
  text-decoration:none;
  border:0;
  margin:0 0 var(--enq-rule-gap);
  transition:transform .25s ease
}
.enq-mail-group {
  grid-area:mail;
  justify-self:end;
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin:0
}
.enq-mail {
  display:block;
  line-height:0;
  text-decoration:none;
  border:0;
  opacity:.92;
  transition:opacity .25s ease
}
.enq-details {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0;
  margin-top:-1px;
  width:max-content;
  max-width:calc(100vw - 36px);
  font-family:'Spectral',serif;
  font-size:8.6px;
  line-height:1.35;
  letter-spacing:.04em;
  color:var(--faint)
}
.enq-location-pair {
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:5px;
  max-width:min(360px,calc(100vw - 36px));
  white-space:nowrap
}
.enq-location-slash {
  color:rgba(106,114,128,.62)
}
.enq-address-details {
  position:relative;
  display:block;
  max-width:100%;
  text-align:right
}
.enq-address-details summary {
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  line-height:1.35;
  letter-spacing:.05em;
  color:rgba(74,82,96,.82);
  text-align:right;
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease
}
.enq-address-details summary span,
.enq-address-details summary b {
  font:inherit;
  font-weight:400
}
.enq-address-details summary span {
  border-bottom:1px solid rgba(74,82,96,.34)
}
.enq-address-details summary b {
  color:var(--soft);
  margin-left:.35em
}
.enq-address-details summary::-webkit-details-marker {
  display:none
}
.enq-address-details[open] summary {
  color:var(--ink);
  border-color:var(--slate)
}
.enq-phone,
.enq-phone:link,
.enq-phone:visited {
  color:var(--soft);
  -webkit-text-fill-color:var(--soft);
  text-decoration:none;
  border-bottom:1px solid rgba(74,82,96,.22);
  transition:color .25s ease,border-color .25s ease
}
.enq-address-panel {
  position:absolute;
  z-index:20;
  right:0;
  top:calc(100% + 6px);
  width:min(268px,calc(100vw - 40px));
  padding:10px 11px 11px;
  border:1px solid rgba(201,195,183,.58);
  background:rgba(246,245,241,.96);
  box-shadow:0 16px 34px rgba(25,34,58,.1);
  text-align:left
}
.enq-address-panel > div + div {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(201,195,183,.52)
}
.enq-address-panel span {
  display:block;
  margin-bottom:4px;
  font-size:7.8px;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--faint)
}
.enq-address-panel address {
  margin:0;
  font-style:normal;
  font-size:10.2px;
  line-height:1.45;
  letter-spacing:.015em;
  color:var(--soft)
}
.enq-map-link,
.enq-location-page {
  display:inline-block;
  margin-top:7px;
  margin-right:8px;
  font-size:7.8px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(25,34,58,.28);
  transition:color .25s ease,border-color .25s ease
}
.enq-location-page {
  margin-top:10px
}
.enq-privacy {
  display:inline-block;
  margin-top:12px;
  font-family:'Spectral',serif;
  font-size:7.8px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
  text-decoration:none;
  border-bottom:1px solid rgba(106,114,128,.3);
  transition:color .25s ease,border-color .25s ease
}
.enq-cta img {
  display:block;
  width:auto;
  height:var(--enq-action-h);
  max-width:clamp(118px,16vw,158px);
  object-fit:contain
}
.enq-mail img {
  display:block;
  width:auto;
  height:calc(var(--enq-action-h) * 87 / 89);
  max-width:clamp(118px,16vw,158px);
  object-fit:contain
}
.enq-cta:hover,.enq-cta:focus-visible {
  transform:translateX(3px)
}
.enq-mail:hover,.enq-mail:focus-visible {
  opacity:1
}
.enq-address-details summary:hover,
.enq-address-details summary:focus-visible,
.enq-phone:hover,.enq-phone:focus-visible,
.enq-map-link:hover,
.enq-map-link:focus-visible,
.enq-location-page:hover,
.enq-location-page:focus-visible {
  color:var(--ink);
  border-color:var(--slate)
}
.enq-privacy:hover,.enq-privacy:focus-visible {
  color:var(--ink);
  border-color:var(--slate)
}
.enq-cta:focus-visible,.enq-mail:focus-visible,.enq-phone:focus-visible,.enq-address-details summary:focus-visible,.enq-map-link:focus-visible,.enq-location-page:focus-visible,.enq-privacy:focus-visible {
  outline:1px solid var(--slate);
  outline-offset:4px
}
@media(max-width:600px) {
  .section-nav a {
    grid-template-columns:24px minmax(0,1fr);
    gap:9px;
    padding:9px 6px
  }
  .section-nav a:hover,.section-nav a:focus-visible {
    padding-left:6px
  }
  .section-nav .nav-no {
    width:24px;
    min-width:24px
  }
  .section-nav .nav-text {
    font-size:12px
  }
  .section-nav .nav-text strong {
    font-size:14.6px
  }
  .enq-grid {
    --enq-rule-gap:0;
    --enq-word-h:clamp(20px,5.2vw,25px);
    --enq-action-h:clamp(23px,6vw,28px);
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    grid-template-areas:"marine enquiry" "rule rule" "bach mail";
    column-gap:16px;
    row-gap:0
  }
  .enq-marine,.enq-bach {
    max-width:clamp(66px,18vw,82px)
  }
  .enq-cta {
    justify-self:end;
    align-self:end;
    margin:0
  }
  .enq-mail-group {
    justify-self:end;
    align-items:flex-end;
    margin:0
  }
  .enq-details {
    font-size:7.4px;
    letter-spacing:.025em
  }
  .enq-location-pair {
    gap:3px;
    max-width:calc(100vw - 32px)
  }
  .enq-address-panel {
    width:min(252px,calc(100vw - 34px))
  }
  .enq-cta img,.enq-mail img {
    max-width:clamp(128px,36vw,165px)
  }
}

/* === Shared Responsive Rules === */
/* Shared responsive layer: common mobile sizing and overflow guards. */
@media(max-width:360px) {
  .eyebrow,
.label,
.sec-label,
.suite-k,
.type-system-role,
.subgroup-title,
.field label{
    letter-spacing:.11em
  }
  .choice-desc,
.usage-list li,
.menu-row .mdesc,
.section-sub,
.lead,
.guard-text{
    font-size:11.2px;
    line-height:1.46
  }
}
@media(max-width:420px) {
  .brand-masthead-logo {
    width:clamp(76px,22vw,92px);
  }

  .pat-grid,
.guard-grid{
    gap:6px
  }
  .choice-grid,
  .check-list,
.logo-grid,
.suite-grid,
.marks{
    gap:8px
  }
  .guard-top {
    gap:6px
  }
  .lang-switch a,.lang-switch span {
    min-width:22px;
    height:18px;
    padding:0 2px;
    font-size:7.4px;
    letter-spacing:.03em
  }
  .lang-switch {
    gap:3px
  }
  .lang-switch::before {
    width:13px;
    height:13px;
    margin-right:1px
  }
  .logo-meta,
.suite-meta{
    padding:10px
  }
  .menu-row {
    grid-template-columns:112px minmax(0,1fr);
    gap:10px
  }

  .card,
.usage-card,
.choice,
.guard-card,
.subgroup{
    padding:13px
  }
  .site-menu {
    min-width:198px
  }
  .tiu-row {
    grid-template-columns:84px minmax(0,1fr);
    gap:10px
  }
  .topbar-inner {
    padding-left:12px;
    padding-right:12px;
    gap:8px
  }
  .site-trigger {
    width:28px;
    height:26px
  }
  .site-trigger-logo {
    width:22px
  }
  
  .type-system-aa,.type-system-aa.body {
    font-size:clamp(38px,11vw,54px)
  }
  .type-system-top {
    grid-template-columns:56px minmax(0,1fr);
    gap:12px
  }
  :root {
    --grid-gap:8px
  }
}
@media(max-width:760px) {
  .usage-title,
.choice-name,
.section-title{
    font-size:clamp(18px,4.4vw,24px);
    line-height:1.16
  }
  .choice-axis,
.suite-k,
.type-system-role,
.type-system-dev,
.field label{
    font-size:clamp(8.2px,2.2vw,10px)
  }
  .eyebrow,.label,.sec-label {
    font-size:10px;
    line-height:1.5
  }
  .forms {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .pat-grid,
.guard-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
  }
  .choice-grid,
  .check-list,
.marks{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .logo-grid,
.suite-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
  }
  .hero-motion .hm-line:first-child {
    white-space:nowrap
  }
  
  .logo-meta,
.suite-meta{
    padding:clamp(10px,2.8vw,16px)
  }
  .logo-sample {
    height:clamp(96px,25vw,118px);
    padding:10px
  }
  
  .menu-row {
    grid-template-columns:132px minmax(0,1fr);
    gap:14px;
    align-items:baseline;
    padding:15px 0
  }
  .mock {
    height:clamp(92px,23vw,112px)
  }

  .pv{
    height:clamp(76px,20vw,100px)
  }

  .card,
.usage-card,
.choice,
.guard-card,
.subgroup{
    padding:clamp(14px,3.4vw,22px)
  }

  .site-trigger,
.eyebrow,
.label,
.sec-label,
.suite-k,
.type-system-role,
.choice-axis,
.subgroup-title,
.field label,
.menu-row .mdesc strong{
    letter-spacing:.16em
  }
  .choice-desc,
.usage-list li,
.menu-row .mdesc,
.section-sub,
.lead,
.guard-text{
    font-size:clamp(11.6px,3.15vw,14px);
    line-height:1.52
  }
  .logo-title,
.guard-title,
.menu-row .mname{
    font-size:clamp(16px,3.8vw,20px)
  }
  .suite-stage {
    min-height:clamp(118px,31vw,158px);
    padding:clamp(14px,3.2vw,24px)
  }
  .thumb {
    flex-basis:64px;
    height:82px
  }

  .tiu-row {
    grid-template-columns:104px minmax(0,1fr);
    gap:14px;
    align-items:center
  }
  .topbar-inner {
    gap:clamp(8px,3vw,12px)
  }
  
  .type-system-dev {
    position:static;
    display:inline-block;
    margin-top:7px
  }
  .type-system-name {
    padding-right:0
  }
  .type-system-top {
    grid-template-columns:72px minmax(0,1fr);
    gap:16px;
    align-items:center
  }
  
  .wrap {
    padding-left:clamp(18px,5vw,24px);
    padding-right:clamp(18px,5vw,24px)
  }
  :root {
    --grid-gap:10px;
    --box-pad:clamp(14px,3.4vw,20px);
    --box-pad-sm:clamp(12px,3vw,18px);
    --box-pad-lg:clamp(18px,4vw,28px);
    --inner-x:clamp(10px,2.8vw,16px)
  }
  h1,.hero h1 {
    font-size:clamp(31px,8.4vw,44px);
    line-height:1.06
  }
}
@media(min-width:640px) {
  .thumb {
    flex-basis:88px;
    height:110px
  }
}
@media(min-width:680px) {
  .check-list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .choice-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .fields.two {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}
@media(max-width:640px) {
  .fields.two {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
}
@media(prefers-reduced-motion:no-preference) {
  .hero-axis-draw {
    width:0
  }
  .hero-motion .hm-line {
    opacity:0
  }
  .hero-motion .hm-line>i {
    display:inline-block;
    font-style:inherit;
    transform:translateY(108%);
    opacity:0
  }
  .hero-motion.run .hm-line {
    opacity:1
  }
  .hero-motion.run .hm-line>i {
    animation:hmRise .85s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay:var(--hm-d,0s)
  }
  .hero-motion.run ~ .hero-axis-draw {
    animation:hmDraw 1s cubic-bezier(.65,0,.35,1) forwards;
    animation-delay:.1s
  }
  .reveal {
    opacity:0;
    transform:translateY(14px);
    transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)
  }
  .reveal.in {
    opacity:1;
    transform:none
  }
  .transition-screen.run .transition-line {
    animation:transitionLine .58s cubic-bezier(.65,0,.35,1) forwards
  }
}
@supports (text-wrap:balance) {
  h1,
.hero h1,
.section-title,
.sec-label,
.usage-title,
.menu-row .mname,
.choice-name,
.logo-title,
.guard-title{
    text-wrap:balance
  }
}
@media(max-width:520px) {
  :root {
    --page-x:clamp(26px,8vw,34px)
  }
}

@media(max-width:560px) {
  h1,
  .hero h1 {
    font-size:clamp(21px,5.5vw,23px);
    line-height:1.08
  }
  .intro p,
  .method p {
    font-size:clamp(9.8px,2.55vw,10.6px);
    line-height:1.58
  }
  .axis-line,
  .lead,
  .section-sub,
  .sec-sub,
  .guard-text,
  .choice-desc,
  .usage-list li,
  .menu-row .mdesc {
    font-size:clamp(9.4px,2.45vw,10.3px);
    line-height:1.5
  }
  .section-title,
  .usage-title,
  .choice-name {
    font-size:clamp(12.5px,3.35vw,14px);
    line-height:1.2
  }
  .eyebrow,
  .label,
  .sec-label {
    font-size:8.5px
  }
  .card,
  .usage-card,
  .choice,
  .guard-card,
  .subgroup {
    padding:10px
  }
}