.axis-line--visual {
  font-size:clamp(16px,2.85vw,21px)
}
.lead--visual {
  font-size:clamp(14px,2.25vw,16px)
}
.sec-label .sn {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  text-transform:none;
  letter-spacing:0;
  margin-right:.75em;
  color:var(--slate-soft);
  font-size:15px
}

.card,.usage-card {
  border:1px solid var(--line);
  background:#fff;
  padding:clamp(22px,3.5vw,32px)
}

.usage-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(20px,3vw,30px);
  line-height:1.18;
  color:var(--ink);
  margin-bottom:10px
}

.logo-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1.4vw,12px);
  margin-top:14px;
  padding:clamp(10px,1.5vw,16px);
  border:1px solid rgba(25,34,58,.14);
  background:rgba(243,241,235,.04)
}
@media(max-width:640px) {
  .logo-grid {
    gap:10px
  }
}
.logo-card {
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column
}
.logo-card.chosen .logo-sample {
  box-shadow:inset 0 0 0 1px var(--slate)
}
.logo-sample {
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--panel);
  position:relative;
  padding:10px
}
.logo-badge {
  position:absolute;
  top:8px;
  right:8px;
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:4px 9px;
  border:1px solid var(--line);
  color:var(--faint);
  background:var(--bg)
}
.logo-badge.yes {
  color:#ECE9E1;
  background:var(--slate);
  border-color:var(--slate)
}
.logo-meta {
  padding:8px 4px;
  text-align:center
}
.logo-title {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:15.5px;
  margin-bottom:3px;
  color:var(--ink)
}

.logo-verdict {
  border:none;
  background:transparent;
  padding:0;
  margin-top:clamp(20px,3vw,30px)
}
.logo-verdict .vtitle {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(18px,3vw,24px);
  color:var(--ink);
  margin-bottom:8px
}
.logo-verdict p {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:14.5px;
  line-height:1.66;
  color:var(--soft)
}
.suite-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1.4vw,12px);
  margin-top:8px
}
@media(max-width:640px) {
  .suite-grid {
    gap:10px
  }
}
.suite-card {
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column
}
.suite-stage {
  flex:0 0 auto;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,2.4vw,24px)
}
.suite-stage.dark {
  background:var(--slate)
}
.suite-meta {
  padding:8px 6px;
  text-align:center
}
.suite-k {
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:8px
}

.pat-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:8px
}
@media(max-width:640px) {
  .pat-grid {
    gap:8px
  }
}
.pat-card {
  border:1px solid var(--line);
  background:#fff
}
.pv {
  height:118px;
  border-bottom:1px solid var(--line)
}

.pv.sparse {
  background-color:#fff;
  background-image:repeating-linear-gradient(0deg,transparent 0 26px,rgba(34,46,72,.32) 26px 27px,transparent 27px 58px)
}

.tiu {
  width:calc(100% - clamp(16px,3vw,28px));
  border:0;
  background:#fff;
  padding:clamp(22px,4vw,46px) clamp(18px,3.5vw,38px);
  margin:12px auto 0
}
.tiu-row {
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:clamp(14px,2.4vw,20px) 0
}
.tiu-row+.tiu-row {
  border-top:1px solid rgba(201,195,183,.4)
}
@media(min-width:680px) {
  .tiu-row {
    grid-template-columns:140px 1fr;
    gap:0;
    align-items:center
  }
}
.tiu-lab {
  position:relative;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  line-height:1.45
}
@media(min-width:680px) {
  .tiu-lab {
    padding-right:34px
  }
  .tiu-lab::after {
    content:"";
    position:absolute;
    right:8px;
    top:50%;
    width:18px;
    height:1px;
    background:var(--line)
  }
}
.tiu-eyebrow {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--faint)
}

.tiu-sub {
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(14px,2vw,17px);
  line-height:1.34;
  color:var(--slate)
}
.tiu-body {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:clamp(14px,2.2vw,15.5px);
  line-height:1.7;
  color:var(--soft);
  max-width:62ch
}
.tiu-btn {
  display:inline-block;
  font-family:'Spectral',serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--slate);
  border:1px solid var(--slate);
  padding:11px 22px
}
.tiu-cap {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--faint)
}
.type-system-card {
  width:calc(100% - clamp(16px,3vw,28px));
  border:0;
  background:#fff;
  margin:12px auto 0
}
.type-cover{
  margin-top:clamp(14px,2.2vw,22px);
  padding:clamp(30px,4vw,46px) clamp(12px,2vw,20px) clamp(12px,2vw,20px);
  border:1px solid rgba(25,34,58,.12);
  background:rgba(236,233,225,.22);
}
.type-cover + .type-cover{ margin-top:clamp(30px,4.5vw,48px); }
.type-cover > .sec-sub{
  margin:0 clamp(12px,2vw,18px);
  color:var(--ink);
  font-size:clamp(17px,2.7vw,19.5px);
  font-style:italic;
}
.type-system-item {
  position:relative;
  padding:clamp(22px,3.8vw,34px)
}
.type-system-item+.type-system-item {
  border-top:1px solid var(--line)
}
.type-system-top {
  display:grid;
  grid-template-columns:clamp(78px,13vw,116px) 1fr;
  gap:clamp(18px,4vw,34px);
  align-items:center
}
.type-system-aa {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(46px,8.3vw,66px);
  line-height:.86;
  color:var(--ink);
  letter-spacing:-.03em;
  white-space:nowrap
}
.type-system-aa.body {
  font-family:'Spectral',serif;
  font-weight:400;
  font-size:clamp(42px,7.1vw,58px);
  letter-spacing:-.05em
}
.type-system-name {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(19px,2.8vw,25px);
  line-height:1.14;
  color:var(--ink);
  margin-bottom:4px;
  padding-right:clamp(118px,22vw,190px)
}
.type-system-role {
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:10px
}
.type-system-dev {
  position:absolute;
  top:clamp(22px,3.8vw,34px);
  right:clamp(22px,3.8vw,34px);
  display:inline-block;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate);
  border:1px solid var(--line);
  background:rgba(236,233,225,.6);
  padding:3px 8px;
  margin-left:0;
  vertical-align:middle;
  white-space:nowrap
}
.type-system-set {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(13px,2vw,16px);
  line-height:1.62;
  color:var(--ink);
  letter-spacing:.025em;
  word-break:break-word
}
.type-system-set .it {
  font-style:italic;
  font-weight:400
}
.type-system-set.body {
  font-family:'Spectral',serif;
  font-weight:400;
  letter-spacing:.01em
}

.type-system-note {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:13.8px;
  line-height:1.64;
  color:var(--soft);
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(201,195,183,.58)
}
@media(max-width:560px) {
  .type-system-top {
    grid-template-columns:1fr;
    gap:14px
  }
  .type-system-aa,.type-system-aa.body {
    font-size:clamp(50px,17vw,72px)
  }
  .type-system-name {
    padding-right:0
  }
  .type-system-dev {
    position:static;
    margin-top:8px;
    display:inline-block
  }
}
.guard-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:14px
}
@media(min-width:720px) {
  .guard-grid {
    grid-template-columns:1fr 1fr 1fr
  }
}
.guard-card {
  border:1px solid var(--line);
  background:#fff;
  padding:clamp(18px,3vw,26px);
  overflow:hidden
}
.guard-top {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
  align-items:stretch
}
.guard-box {
  min-height:98px;
  border:1px solid var(--line);
  background:var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
  position:relative;
  overflow:hidden;
  min-width:0;
  container-type:inline-size
}
.guard-box.good {
  background:#fff
}
.guard-x,.guard-ok {
  position:absolute;
  top:8px;
  left:8px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-family:'Spectral',serif
}
.guard-x {
  background:rgba(107,46,40,.12);
  color:#6B2E28
}
.guard-ok {
  background:rgba(34,46,72,.12);
  color:var(--slate)
}

.guard-title {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:21px;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:8px
}
.guard-text {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:13.5px;
  line-height:1.62;
  color:var(--soft)
}
.usage-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:8px
}
@media(max-width:640px) {
  .usage-grid {
    gap:10px
  }
}
.usage-list {
  margin:0;
  padding:0;
  list-style:none;
}
.usage-list li {
  display:grid;
  grid-template-columns:12px minmax(0,1fr);
  align-items:start;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:14.5px;
  line-height:1.62;
  color:var(--soft);
  padding:7px 0;
  border-top:1px solid var(--line)
}
.usage-list li::before {
  content:"·";
  display:block;
  grid-column:1;
  line-height:inherit;
}
.mock {
  border:1px solid var(--line);
  background:var(--panel);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  height:118px
}

.menu-list {
  margin-top:8px;
  border-top:1px solid var(--line)
}
.menu-row {
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}
@media(min-width:640px) {
  .menu-row {
    grid-template-columns:188px 1fr;
    gap:28px;
    align-items:baseline
  }
}
.menu-row .mname {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(18px,2.6vw,22px);
  color:var(--ink);
  line-height:1.22
}
.menu-row .mdesc {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:14px;
  line-height:1.62;
  color:var(--soft)
}
.menu-foot {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:13.5px;
  line-height:1.64;
  color:var(--soft);
  margin-top:18px
}
.mmeta {
  display:block;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--faint);
  margin-top:4px
}
.prepared-outputs {
  margin-top:clamp(76px,11vw,124px)
}
.po-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:12px;
  border-top:1px solid var(--line)
}
.po-item {
  min-width:0;
  padding:clamp(16px,2.4vw,22px) clamp(12px,2vw,20px);
  border-bottom:1px solid var(--line)
}
.po-item:nth-child(odd) {
  border-right:1px solid var(--line)
}
.po-name {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(16px,2vw,19px);
  line-height:1.24;
  color:var(--ink)
}
.po-desc {
  margin:8px 0 0;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:clamp(12px,1.35vw,13.5px);
  line-height:1.56;
  color:var(--soft)
}
.po-meta {
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:.66em;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint)
}
.po-foot {
  margin:16px 0 0;
  font-family:'Spectral',serif;
  font-weight:300;
  font-size:12.5px;
  line-height:1.58;
  color:var(--soft)
}
@media(max-width:640px) {
  .po-grid {
    grid-template-columns:1fr
  }
  .po-item:nth-child(odd) {
    border-right:0
  }
  .logo-sample {
    height:108px;
    padding:12px
  }
  .logo-meta {
    padding:13px 13px 16px
  }

  .logo-badge {
    top:8px;
    right:8px;
    font-size:7.5px;
    padding:3px 6px
  }
  .logo-title {
    font-size:18px
  }

  .suite-stage {
    height:78px;
    padding:10px
  }
  .suite-meta {
    padding:13px
  }

  .suite-k {
    font-size:8.4px;
    letter-spacing:.17em
  }

  .pat-card {
    min-width:0
  }
  .pv {
    height:86px
  }

  .usage-card {
    padding:14px
  }
  .usage-title {
    font-size:19px
  }
  .usage-list li {
    font-size:11.8px;
    line-height:1.46
  }
  .mock {
    height:92px;
    margin-bottom:12px
  }

}
@media(max-width:380px) {
  .pat-grid {
    gap:6px
  }
  .logo-grid,.suite-grid,.usage-grid {
    gap:8px
  }
  .pv {
    height:76px
  }

  .usage-list li {
    font-size:11px
  }
}
@media(max-width:760px) {
  .guard-box {
    min-height:104px;
    padding:18px 11px 12px;
    overflow:hidden;
    container-type:inline-size
  }
}
@media(max-width:420px) {
  .guard-box {
    min-height:98px;
    padding:18px 10px 10px
  }
}
.guard-example {
  max-width:100%;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(12.8px,13.8cqw,17.2px);
  line-height:1.09;
  letter-spacing:.002em;
  color:var(--ink);
  text-wrap:wrap
}
.guard-example .alt {
  font-family:'Spectral',serif;
  font-weight:500;
  font-style:normal
}
.guard-example .italic {
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400
}
.g-type-weak {
  line-height:1.0;
  color:rgba(25,34,58,.68)
}
.g-type-strong {
  line-height:1.1
}
.g-space-weak {
  letter-spacing:-.052em;
  line-height:.82;
  transform:scaleX(.94)
}
.g-space-strong {
  letter-spacing:.01em;
  line-height:1.12
}
.guard-box.low-contrast {
  background:#E9B6A8;
  color:#C9C3B7
}
.guard-box.high-contrast {
  background:#CBD8F4;
  color:#19223A
}
.guard-box.low-contrast .guard-example {
  color:#C9C3B7
}
.guard-box.high-contrast .guard-example {
  color:#19223A
}
@media(max-width:640px) {
  .guard-box {
    min-height:76px
  }
  .guard-example {
    font-size:clamp(11.6px,12.6cqw,15.6px);
    line-height:1.08
  }
  .g-space-weak {
    letter-spacing:-.044em;
    line-height:.84
  }
}
@media(max-width:360px) {
  .guard-box {
    min-height:68px
  }
  .guard-example {
    font-size:clamp(10.8px,12.2cqw,14px)
  }
}
@media(max-width:760px) {
  .wrap > .eyebrow, .wrap > h1, .wrap > .axis-line, .wrap > .lead, .wrap > .section-nav, .wrap > .sec-label, .wrap > .sec-sub {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    margin-left:0;
    margin-right:0
  }
  .wrap > .axis-line, .wrap > .lead, .wrap > .sec-sub, .section-nav .nav-text {
    text-align:left;
    white-space:normal;
    text-wrap:wrap;
    overflow-wrap:normal;
    word-break:normal;
    -webkit-hyphens:none;
    hyphens:none
  }
  .wrap > .axis-line {
    font-size:clamp(14.2px,3.7vw,17.4px);
    line-height:1.38;
    margin-bottom:15px;
    letter-spacing:.002em
  }
  .wrap > .lead {
    font-size:clamp(12.6px,3.25vw,13.9px);
    line-height:1.62;
    margin-bottom:clamp(34px,7vw,48px);
    letter-spacing:.002em
  }
}
@media(max-width:380px) {
  .wrap > .axis-line {
    font-size:15.4px;
    line-height:1.35
  }
  .wrap > .lead {
    font-size:12.9px;
    line-height:1.58
  }
}
@media(max-width:760px) {
  .guard-grid {
    grid-template-columns:1fr;
    gap:12px
  }
  .guard-card {
    padding:16px
  }
  .guard-top {
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px
  }
  .guard-example, .g-type-weak, .g-type-strong, .g-space-weak, .g-space-strong, .guard-box.low-contrast .guard-example, .guard-box.high-contrast .guard-example {
    font-size:clamp(14.8px,10.4cqw,18px);
    line-height:1.08;
    max-width:100%;
    text-wrap:wrap
  }
  .g-space-weak {
    letter-spacing:-.045em;
    line-height:.88;
    transform:scaleX(.95)
  }
  .g-space-strong {
    letter-spacing:.006em;
    line-height:1.12;
    transform:none
  }
  .guard-title {
    font-size:20px;
    line-height:1.18;
    margin-bottom:7px
  }
  .guard-text {
    font-size:13.2px;
    line-height:1.58
  }
}
@media(max-width:420px) {
  .guard-example, .g-type-weak, .g-type-strong, .g-space-weak, .g-space-strong, .guard-box.low-contrast .guard-example, .guard-box.high-contrast .guard-example {
    font-size:clamp(14px,10.1cqw,17px)
  }
}
@media(max-width:760px) {
  .wrap > .axis-line, .wrap > .lead {
    width:100%;
    max-width:100%;
    min-width:0;
    text-align:left;
    white-space:normal;
    text-wrap:wrap;
    overflow-wrap:normal;
    word-break:normal;
    -webkit-hyphens:none;
    hyphens:none
  }
}

.logo-sample.has-img {
  background:var(--panel);
  padding:10px;
  overflow:hidden;
  min-height:108px;
  display:flex;
  align-items:center;
  justify-content:center
}
.logo-sample.has-img img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block
}
.logo-sample.has-img.dim img {
  opacity:.72
}

.suite-stage.has-img {
  background:rgba(255,255,255,.85);
  overflow:hidden;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px
}
.suite-stage.has-img.dark {
  background:var(--slate)
}
.suite-stage.has-img img {
  display:block;
  width:auto;
  height:auto;
  object-fit:contain;
  max-height:86px;
  max-width:66%
}
.suite-stage.has-img.dark img {
  filter:brightness(0) invert(1);
  opacity:.92
}
.pat-card.image .pv {
  height:132px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.pat-card.image .pv img {
  width:100%;
  height:100%;
  object-fit:cover
}

@media(max-width:640px) {

  .pat-card.image .pv {
    height:clamp(80px,21vw,110px)
  }
}
.logo-card.wordmark-card .logo-sample.has-img img {
  max-width:72%;
  max-height:54px
}
.logo-card.pictorial-card .logo-sample.has-img img {
  max-width:52%;
  max-height:54px;
  opacity:.72
}
.logo-card.abstract-card .logo-sample.has-img {
  background:#E8EDF2 url('../../brand/logo/ma_abstract_bg.png') center / cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  overflow:hidden
}

.logo-card.character-card .logo-sample.has-img img {
  max-width:54%;
  max-height:58px;
  opacity:.72
}

.palette-strip {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden
}
.tone-chip {
  min-height:92px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:10px 9px;
  color:var(--ink)
}
.tone-chip:last-child {
  border-right:0
}
.tone-chip.dark {
  color:var(--bg)
}
.tone-name {
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.25
}
.tone-hex {
  font-size:9px;
  letter-spacing:.08em;
  opacity:.76;
  margin-top:4px
}

.suite-card.primary .suite-stage.has-img img {
  max-width:70%;
  max-height:54px
}
.suite-card.full .suite-stage.has-img img {
  max-width:72%;
  max-height:52px
}
.suite-card.stacked .suite-stage.has-img img {
  max-width:42%;
  max-height:58px
}
.suite-card.initials .suite-stage.has-img img {
  max-width:26%;
  max-height:48px
}
.suite-card.soft .suite-stage.has-img img {
  max-width:62%;
  max-height:52px
}

.tiu-img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain
}
.tiu-img.align {
  max-width:min(100%,250px)
}

.type-system-img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain
}

.type-system-img.az {
  max-width:100%;
  margin-top:0;
  background:transparent
}
.type-system-img.align {
  max-width:520px;
  margin-top:10px
}
.type-system-set.image-set {
  font-size:0;
  line-height:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(2px,.325vw,3.5px);
  width:100%
}
.type-system-aa.image-aa img {
  width:100%;
  height:auto;
  display:block;
  max-width:148px;
  margin:0 auto;
  background:transparent
}
.type-system-card .type-system-item:first-child {
  background:#fff
}
@media(max-width:720px) {
  
  .palette-strip{
    grid-template-columns:repeat(6,112px);
    overflow-x:auto
  }
  .tone-chip {
    min-height:82px
  }
  .logo-sample.has-img {
    min-height:108px
  }
  .suite-stage.has-img {
    height:78px
  }
  
  .type-system-aa.image-aa {
    min-width:94px
  }
}
.logo-card.lettermark-card .logo-sample.has-img img {
  filter:none;
  opacity:1;
  max-width:36%;
  max-height:52px
}
.logo-card.abstract-card .logo-badge {
  color:var(--slate);
  border-color:rgba(34,46,72,.48);
  background:rgba(236,233,225,.72)
}
.logo-card.abstract-card .logo-sample.has-img img {
  max-width:62%;
  max-height:60px;
  width:auto;
  height:auto;
  object-fit:contain;
  opacity:1
}

.type-system-img.az[src$="mb_font_az_transparent.png"] {
  background:transparent
}
.hero-motion.hero-motion-image .hm-line-image {
  width:min(60vw,365px);
  max-width:365px
}
.hero-motion.hero-motion-image .hm-line-image img {
  width:100%;
  height:auto
}
@media(max-width:560px) {
  .hero-motion.hero-motion-image .hm-line-image {
    width:min(76vw,318px);
    max-width:318px
  }
}

.motion-stage .ms-replay,.ms-replay[data-motion-replay] {
  display:block;
  align-self:center;
  margin-left:auto;
  margin-right:auto;
  text-align:center
}
.mock.usage-photo {
  height:auto;
  aspect-ratio:16/9;
  padding:0;
  background:#fff;
  border:1px solid var(--line)
}
.mock.usage-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.usage-photo-grid .usage-card {
  padding:clamp(14px,2.4vw,22px)
}
@media(max-width:640px) {
  .mock.usage-photo {
    aspect-ratio:16/9
  }
}
.wrap > .section-nav + #applications {
  margin-top:clamp(18px,3.2vw,30px)
}
#receive {
  margin-top:clamp(42px,6vw,64px)
}
.wordmark-logic-box {
  margin-top:clamp(20px,3vw,30px);
  top:calc(0px - clamp(18px,2vw,26px));
  background:transparent
}
.wordmark-logic-box p {
  max-width:100%
}

.logo-card.lettermark-card .logo-sample.lettermark-pair {
  background:var(--panel);
  padding:clamp(20px,3.2vw,28px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible
}
.lettermark-combined {
  display:block;
  width:auto;
  height:auto;
  max-width:72%;
  max-height:74px;
  object-fit:contain
}
@media(max-width:640px) {
  .lettermark-combined {
    max-width:78%;
    max-height:64px
  }
}
.type-system-card .type-system-item:not(:first-child) .type-system-set.type-system-spaced .cap, .type-system-card .type-system-item:not(:first-child) .type-system-set.type-system-spaced .lower, .type-system-card .type-system-item:not(:first-child) .type-system-set.type-system-spaced .special {
  display:block;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal
}
.logo-card.emblem-card .logo-sample.has-img {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(10px,2vw,18px)
}
.logo-card.emblem-card .logo-sample.has-img img {
  display:block;
  max-width:82%;
  max-height:58px;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:0 auto
}
.type-system-aa,.type-system-aa.body,.type-system-aa.image-aa {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center
}
.type-system-top.marine-display-spec > div:last-child {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  min-width:0
}
.type-system-name,.type-system-role {
  width:100%;
  text-align:left
}
.type-system-align-sample {
  display:block;
  width:100%;
  text-align:center;
  margin:14px auto 12px
}
.type-system-align-sample.cormorant {
  font-size:clamp(15.6px,1.84vw,18px);
  letter-spacing:.006em
}
.type-system-align-sample.spectral {
  font-size:clamp(13.2px,1.52vw,15.5px);
  letter-spacing:.004em
}
.type-system-card .type-system-item:nth-child(2) .type-system-set.type-system-spaced {
  gap:4px;
  line-height:1.68;
  letter-spacing:.013em;
  word-spacing:.36em
}
.type-system-card .type-system-item:nth-child(2) .type-system-set.type-system-spaced .cap {
  word-spacing:.48em
}
.type-system-card .type-system-item:nth-child(2) .type-system-set.type-system-spaced .lower {
  word-spacing:.40em
}
.type-system-card .type-system-item:nth-child(2) .type-system-set.type-system-spaced .special {
  word-spacing:.44em
}
.type-system-card .type-system-item:nth-child(3) .type-system-set.body.type-system-spaced {
  gap:4px;
  line-height:1.68;
  font-size:clamp(12.5px,1.34vw,14.2px);
  letter-spacing:.011em;
  word-spacing:.28em
}
.type-system-card .type-system-item:nth-child(3) .type-system-set.body.type-system-spaced .cap {
  word-spacing:.34em
}
.type-system-card .type-system-item:nth-child(3) .type-system-set.body.type-system-spaced .lower {
  word-spacing:.28em
}
.type-system-card .type-system-item:nth-child(3) .type-system-set.body.type-system-spaced .special {
  word-spacing:.32em
}
@media(max-width:640px) {
  .type-system-aa {
    font-size:clamp(42px,10vw,56px)
  }
  .type-system-aa.body {
    font-size:clamp(38px,9vw,50px)
  }
  .type-system-aa.image-aa {
    min-width:96px;
    max-width:150px
  }
  .type-system-aa.image-aa img {
    max-width:126px
  }
  .type-system-img.align {
    max-width:330px;
    margin-top:4px;
    margin-bottom:0
  }
  .type-system-card .type-system-item:nth-child(2) .type-system-set.type-system-spaced {
    word-spacing:.22em
  }
  .type-system-card .type-system-item:nth-child(2) .type-system-set.type-system-spaced .cap {
    word-spacing:.28em
  }
  .type-system-card .type-system-item:nth-child(2) .type-system-set.type-system-spaced .lower {
    word-spacing:.22em
  }
  .type-system-card .type-system-item:nth-child(2) .type-system-set.type-system-spaced .special {
    word-spacing:.24em
  }
  .type-system-card .type-system-item:nth-child(3) .type-system-set.body.type-system-spaced {
    font-size:clamp(10.6px,2.65vw,12px);
    word-spacing:.18em
  }
  .type-system-card .type-system-item:nth-child(3) .type-system-set.body.type-system-spaced .cap {
    word-spacing:.22em
  }
  .type-system-card .type-system-item:nth-child(3) .type-system-set.body.type-system-spaced .lower {
    word-spacing:.18em
  }
  .type-system-card .type-system-item:nth-child(3) .type-system-set.body.type-system-spaced .special {
    word-spacing:.2em
  }
}
.type-system-top.marine-display-spec {
  align-items:center
}
.type-system-aa.image-aa {
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  width:clamp(88px,14vw,158px);
  max-width:158px;
  min-width:88px
}
.type-system-card .type-system-item:first-child .type-system-img.align {
  width:48%;
  max-width:226px;
  min-width:150px;
  margin:clamp(8px,1.2vw,11px) 0 0
}
.type-system-card .type-system-item:first-child .type-system-img.az {
  max-width:100%;
  margin-top:0
}
.type-system-card .type-system-item:not(:first-child) .type-system-align-sample {
  font-family:inherit;
  font-size:clamp(18px,2.6vw,23px);
  line-height:1.2;
  margin:clamp(14px,2vw,18px) 0 clamp(12px,1.7vw,16px);
  letter-spacing:.01em;
  text-align:left;
  color:var(--ink)
}
.type-system-card .type-system-item:not(:first-child) .type-system-align-sample.cormorant {
  font-family:'Cormorant Garamond',serif;
  font-weight:500
}
.type-system-card .type-system-item:not(:first-child) .type-system-align-sample.spectral {
  font-family:'Spectral',serif;
  font-weight:300
}
.type-system-card .type-system-item:not(:first-child) .type-system-set.type-system-spaced {
  display:flex;
  flex-direction:column;
  gap:clamp(7px,1vw,10px);
  font-size:clamp(12px,1.34vw,14.2px);
  line-height:1.72;
  letter-spacing:.008em;
  word-spacing:.4em;
  text-align:left
}
.type-system-card .type-system-item:not(:first-child) .type-system-set.type-system-spaced span {
  display:block;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal
}
.type-system-card .type-system-item:not(:first-child) .type-system-set.type-system-spaced .special {
  font-size:.96em;
  color:var(--slate);
  word-spacing:.46em
}
@media(max-width:640px) {
  .tiu-img.align {
    max-width:min(100%,200px)
  }
  .type-system-card .type-system-item:first-child .type-system-img.align {
    width:56%;
    min-width:140px
  }
  .type-system-card .type-system-item:not(:first-child) .type-system-align-sample {
    font-size:clamp(15px,3.9vw,17px)
  }
  .type-system-card .type-system-item:not(:first-child) .type-system-set.type-system-spaced {
    font-size:clamp(10.4px,2.7vw,11.8px);
    word-spacing:.3em;
    gap:5px
  }
}
.tone-paper {
  background:#F3F1EB
}
.tone-panel {
  background:#ECE9E1
}
.tone-line {
  background:#C9C3B7
}
.tone-slate-soft {
  background:#5A6678
}
.tone-axis {
  background:#222E48
}
.tone-ink {
  background:#19223A
}

.section-sub-spaced {
  margin-top:clamp(34px,5vw,52px)
}

/* 로고 forms(01) + suite(02b) 3컬럼 → 좁은 화면 단계적 축소 */
@media(max-width:760px){
  .logo-grid,.suite-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:440px){
  .logo-grid,.suite-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   레퍼런스 영상/이미지 배경 배너 (index 방식, .wrap 밖 전체폭)
   ============================================================ */
.vis-band{
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  min-height:clamp(320px,46vw,520px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--bg);
}
.vis-band-media{ position:absolute; inset:0; width:100%; height:100%; z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.14) 8%,rgba(0,0,0,.44) 18%,rgba(0,0,0,.78) 27%,#000 34%,#000 72%,rgba(0,0,0,.7) 81%,rgba(0,0,0,.34) 90%,rgba(0,0,0,.1) 96%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.14) 8%,rgba(0,0,0,.44) 18%,rgba(0,0,0,.78) 27%,#000 34%,#000 72%,rgba(0,0,0,.7) 81%,rgba(0,0,0,.34) 90%,rgba(0,0,0,.1) 96%,transparent 100%); }
.vis-band-media img,.vis-band-media video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.vis-band-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(9,17,32,.55) 0%,rgba(9,17,32,.42) 46%,rgba(9,17,32,.6) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.14) 8%,rgba(0,0,0,.44) 18%,rgba(0,0,0,.78) 27%,#000 34%,#000 72%,rgba(0,0,0,.7) 81%,rgba(0,0,0,.34) 90%,rgba(0,0,0,.1) 96%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.14) 8%,rgba(0,0,0,.44) 18%,rgba(0,0,0,.78) 27%,#000 34%,#000 72%,rgba(0,0,0,.7) 81%,rgba(0,0,0,.34) 90%,rgba(0,0,0,.1) 96%,transparent 100%); }
.vis-band-inner{ position:relative; z-index:2; max-width:792px; width:100%;
  padding:clamp(40px,6vw,80px) var(--page-x); text-align:center; }
.vis-band-label{ font-family:'Spectral',serif; font-size:clamp(11px,1.3vw,13px);
  letter-spacing:.18em; text-transform:uppercase; color:rgba(243,241,235,.74); margin:0 0 16px; }
.vis-band-title{ font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(28px,5vw,52px); line-height:1.1; color:#F3F1EB; margin:0; }
.vis-band-sub{ font-family:'Spectral',serif; font-size:clamp(13px,1.6vw,16px);
  line-height:1.6; color:rgba(243,241,235,.82); margin:16px auto 0; max-width:48ch; }
@media(prefers-reduced-motion:reduce){ .vis-band-media video{ display:none; } }

/* ============================================================
   02 Wordmark Logic — 어두운 navy 존 (강조점)
   ============================================================ */
/* 어두운 박스: pearl 워드마크 + 팔레트 */
.wordmark-dark{
  position:relative;
  top:calc(0px - clamp(18px,2vw,26px));
  padding:clamp(114px,16vw,202px) var(--page-x) clamp(36px,5vw,60px);
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:0;
}
.wordmark-dark > *{ position:relative; z-index:1; }
.wordmark-dark-mark{ width:min(64%,460px); display:flex; justify-content:center; }
.wordmark-dark-mark img{ width:100%; height:auto; display:block; }
/* 팔레트를 로고 아래 한 쌍의 정사각형 스트립으로 정렬 */
.palette-strip--in-dark{ display:flex; width:100%; margin:0; padding:0; box-sizing:border-box; border:0; outline:0; box-shadow:none; background:transparent; }
.palette-strip--in-dark .tone-chip{ flex:1 1 0; width:auto; min-width:0; min-height:0; aspect-ratio:1; justify-content:flex-end; padding:5px 4px; border-color:rgba(243,241,235,.14); }
.palette-strip--in-dark .tone-name{ color:rgba(243,241,235,.9); font-size:7px; }
.palette-strip--in-dark .tone-hex{ color:rgba(243,241,235,.55); font-size:6px; }
/* 밝은 칩(Paper/Panel/Greige)은 글씨를 어둡게 — 가독성 */
.palette-strip--in-dark .tone-paper .tone-name,
.palette-strip--in-dark .tone-panel .tone-name,
.palette-strip--in-dark .tone-line .tone-name{ color:rgba(25,34,58,.82); }
.palette-strip--in-dark .tone-paper .tone-hex,
.palette-strip--in-dark .tone-panel .tone-hex,
.palette-strip--in-dark .tone-line .tone-hex{ color:rgba(25,34,58,.55); }

/* ref-strip 박스 제거 (또로록만) */

/* ============================================================
   03 Logo motion + Pattern — 어두운 공유 존 (전체폭)
   ============================================================ */
.motion-pattern-dark{
  --motion-fade-bleed:clamp(260px,26vw,420px);
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:var(--bg);
  padding:clamp(142px,18vw,226px) 0 clamp(64px,8vw,100px);
  overflow:visible; isolation:isolate; margin-top:clamp(40px,6vw,72px);
}
.motion-pattern-dark::before{
  content:"";
  position:absolute;
  top:calc(0px - clamp(46px,5vw,72px));
  right:0;
  bottom:calc(0px - var(--motion-fade-bleed) + clamp(54px,6vw,84px));
  left:0;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(16,48,72,.18) 0%,rgba(16,48,72,.18) 55%,rgba(16,48,72,.13) 68%,rgba(16,48,72,.09) 78%,rgba(16,48,72,.05) 87%,rgba(16,48,72,.02) 93%,transparent 97%),
    url('../../brand/concept/concept-04-windsailcrossingopen-horizon.jpg') center / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.1) 4%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.62) 15%,rgba(0,0,0,.88) 20%,#000 24%,#000 62%,rgba(0,0,0,.8) 69%,rgba(0,0,0,.56) 76%,rgba(0,0,0,.34) 82%,rgba(0,0,0,.18) 88%,rgba(0,0,0,.08) 93%,rgba(0,0,0,.03) 96%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.1) 4%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.62) 15%,rgba(0,0,0,.88) 20%,#000 24%,#000 62%,rgba(0,0,0,.8) 69%,rgba(0,0,0,.56) 76%,rgba(0,0,0,.34) 82%,rgba(0,0,0,.18) 88%,rgba(0,0,0,.08) 93%,rgba(0,0,0,.03) 96%,transparent 100%);
}
.mpd-inner{ position:relative; z-index:1; max-width:792px; margin-inline:auto; padding:clamp(80px,8vw,108px) var(--page-x) 0; transform:translateY(calc(clamp(88px,9vw,124px) - 2% - clamp(54px,5.5vw,74px))); }
.motion-copy{ position:absolute; top:clamp(16px,1.5vw,22px); right:var(--page-x); left:var(--page-x); z-index:2; }
.motion-copy .sec-label{ margin-top:0; color:#F3F1EB; border-bottom-color:rgba(243,241,235,.24); }
.motion-copy .sec-label .sn,
.motion-copy .motion-caption p{ color:#F3F1EB; }
.motion-copy .motion-caption{ margin-top:clamp(10px,1.5vw,16px); padding-bottom:0; }
/* on-dark 라벨 */

/* 로고모션 크기 축소 + 투명 배경 (존 배경 공유) */
.motion-pattern-dark .motion-stage{ background:transparent; border:none; padding:clamp(20px,3vw,32px) 0; max-width:440px; margin:clamp(128px,14vw,176px) auto 0; }
.motion-pattern-dark .motion-stage img{ filter:brightness(0) invert(1); }
.motion-pattern-dark .ms-replay{ color:rgba(243,241,235,.7); border-color:rgba(243,241,235,.3); }
/* 패턴: 어두운 존 위 흰 카드 (패턴이 묻히지 않게) */
.pat-grid--on-dark{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(9px,1.3vw,14px); width:min(100%,540px); margin:clamp(28px,4vw,44px) auto 0; }
@media(max-width:680px){ .pat-grid--on-dark{ grid-template-columns:1fr; } }
.pat-grid--on-dark .pat-card{ background:#fff; border:1px solid rgba(243,241,235,.15); }
.pat-grid--on-dark .pv{ height:clamp(62px,8vw,84px); }

/* waterline 배너 + 어두운존 간격 없이 붙이기 (flush) */

.motion-pattern-dark--flush{ margin-top:calc(clamp(84px,11vw,132px) + clamp(66px,9vw,124px)); }
/* 로고모션/패턴 설명 — 박스 없이 (01 verdict처럼) */
.visual-overlay-copy{
  position:relative;
  z-index:2;
}
.sec-label.visual-overlay-copy,
.sec-label.visual-overlay-copy .sn,
.sec-sub.visual-overlay-copy,
.motion-caption.visual-overlay-copy p{
  color:#F3F1EB
}
.motion-caption{ margin-top:clamp(16px,2.4vw,24px); padding-bottom:clamp(96px,12vw,144px); }
.motion-caption p{ font-family:'Spectral',serif; font-size:clamp(13.5px,1.55vw,15.5px); line-height:1.62; margin:0; max-width:100%; }

/* ============================================================
   Suite 배너 — 연속된 물 배경 위의 제목과 로고 suite
   ============================================================ */
.suite-band{
  position:relative;
  margin-top:calc(clamp(48px,7vw,84px) + clamp(40px,5vw,70px));
  overflow:hidden;
}
.suite-band-inner{ position:relative; z-index:1; max-width:1180px; margin-inline:auto; padding:clamp(76px,11vw,142px) var(--page-x) clamp(52px,7vw,92px); }
/* 텍스트 — 파도선 부근 (상단) */
.suite-band-head{ text-align:center; min-height:clamp(150px,22vw,240px); display:flex; flex-direction:column; justify-content:flex-start; padding-top:clamp(54px,7vw,90px); transform:translateY(calc(0px - clamp(24px,3vw,40px) - clamp(36px,3.5vw,56px))); }
.suite-band-copy{ box-sizing:border-box; width:100%; max-width:none; margin:clamp(30px,4vw,48px) 0 0; text-align:left; }
.suite-band-copy .vis-band-sub{ display:block; width:100%; max-width:none; margin:0; text-align:left; }
/* suite 카드들 — 어두운 영역 위 */
.suite-grid--on-band{ margin-top:clamp(36px,4.5vw,58px); max-width:720px; margin-left:auto; margin-right:auto; padding:clamp(10px,1.5vw,16px); border:1px solid rgba(243,241,235,.16); background:rgba(243,241,235,.025); }

.wrap > .sec-label{ margin-top:clamp(64px,9vw,100px); }
.water-flow > #wordmark{ margin-top:clamp(78px,8vw,112px); top:clamp(10px,1vw,14px); }
.water-flow > #wordmark + .sec-sub{ top:clamp(10px,1vw,14px); }
.wrap > #typography{ margin-top:calc(clamp(64px,9vw,100px) + clamp(150px,17vw,220px)); }

/* ── 컬러팔레트 위 레퍼런스 이미지 6개 ── */
.palette-img-strip {
  display: flex;
  width: 100%;
  margin-top: 0;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  box-shadow: none;
  overflow: hidden;
}
.palette-img-strip .tone-img {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border-right: 1px solid rgba(243, 241, 235, .14);
}
.palette-img-strip .tone-img:last-child {
  border-right: 0;
}
.palette-img-strip .tone-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ── 컬러 이미지와 컬러칩 공통 폭 ── */
.palette-pair {
  width: min(68%, 490px);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(8px, 1.2vw, 12px);
  border: 1px solid rgba(243, 241, 235, .16);
  outline: 0;
  box-shadow: none;
  background: rgba(243, 241, 235, .025);
  overflow: hidden;
}

/* ============================================================
   WATER-FLOW
   wordmark-dark + verdict + suite-band 를 하나의 연속된 물 배경
   (water-transition-merged: 심해→파도→모래)으로 감싼다.
   페이지 배경 위에 사진을 한 겹만 두고 상·하단을 마스크로 용해한다.
   ============================================================ */
.water-flow{
  --water-flow-top-overlap:clamp(460px,44vw,680px);
  --water-flow-bottom-overlap:clamp(340px,34vw,520px);
  --water-flow-shift:clamp(110px,11vw,170px);
  --water-image-overscan:clamp(140px,14vw,220px);
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding-top:clamp(108px,12vw,156px);
  margin-right:calc(50% - 50vw);
  margin-top:clamp(210px,22vw,290px);
  margin-bottom:clamp(112px,13vw,168px);
  overflow:visible;
  isolation:isolate;
  background:var(--bg);
}
.water-flow-media{
  position:absolute;
  top:calc(0px - var(--water-flow-top-overlap) + var(--water-flow-shift));
  right:0;
  bottom:calc(0px - var(--water-flow-bottom-overlap) - var(--water-flow-shift));
  left:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.1) 4%,rgba(0,0,0,.28) 8%,rgba(0,0,0,.56) 12%,rgba(0,0,0,.82) 16%,#000 20%,#000 82%,rgba(0,0,0,.76) 89%,rgba(0,0,0,.38) 96%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.1) 4%,rgba(0,0,0,.28) 8%,rgba(0,0,0,.56) 12%,rgba(0,0,0,.82) 16%,#000 20%,#000 82%,rgba(0,0,0,.76) 89%,rgba(0,0,0,.38) 96%,transparent 100%);
}
.water-flow-image{
  position:absolute;
  top:calc(0px - var(--water-image-overscan) + 3%);
  right:0;
  bottom:calc(0px - var(--water-image-overscan) - 3%);
  left:0;
  background:url('../../brand/concept/water-transition-merged.jpg') center / cover no-repeat;
}
.water-flow-veil{
  position:absolute;
  inset:0;
  background:rgba(8,30,50,.24);
}
.water-flow > :not(.water-flow-media){
  position:relative;
  z-index:2;
}

/* verdict 텍스트 구간 — 물 위에 얹히므로 밝은 색 + shadow로 가독 확보 */
.water-flow > .sec-label{
  display:block;
  max-width:712px;
  margin:clamp(22px,3vw,34px) auto 0;
  padding-bottom:10px;
  color:#F3F1EB;
  border-bottom-color:rgba(243,241,235,.24);
  text-shadow:0 1px 10px rgba(6,12,24,.55);
}
.water-flow > .sec-label .sn{
  color:#F3F1EB;
}
.water-flow > .sec-sub{
  max-width:712px;
  margin-inline:auto;
  color:#F3F1EB;
  text-shadow:0 1px 10px rgba(6,12,24,.55);
}
.water-flow > .logo-verdict{
  max-width:712px;
  margin-inline:auto;
}
.water-flow > .logo-verdict--choice{ margin-top:clamp(10px,1.5vw,16px); }
.water-flow > .logo-verdict .vtitle{
  color:#fff;
  text-shadow:0 1px 12px rgba(6,12,24,.6);
}
.water-flow > .logo-verdict p{
  color:rgba(243,241,235,.9);
  text-shadow:0 1px 10px rgba(6,12,24,.5);
}
.forms-copy{
  position:relative;
  z-index:2;
  max-width:712px;
  margin:clamp(82px,9vw,112px) auto 0;
}
.forms-copy .sec-label{
  margin-top:0;
  color:#F3F1EB;
  border-bottom-color:rgba(243,241,235,.24);
  text-shadow:0 1px 10px rgba(6,12,24,.55);
}
.forms-copy .sec-label .sn,
.forms-copy .sec-sub{
  color:#F3F1EB;
  text-shadow:0 1px 10px rgba(6,12,24,.55);
}