:root {
  --navy: #062d5d;
  --ink: #09294f;
  --gold: #bb7f2d;
  --soft-gold: #e5bd78;
  --cream: #fbf1e6;
  --cream-2: #fff8ef;
  --paper: #fffaf3;
  --sage: #8f9c78;
  --peach: #f0b7a0;
  --line: rgba(118, 83, 44, 0.2);
  --shadow: 0 18px 42px rgba(48, 35, 22, 0.13);
  --soft-shadow: 0 18px 38px rgba(48, 35, 22, 0.08);
  --radius: 8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.7), transparent 35rem),
    linear-gradient(180deg, #f8efe4 0%, #fbf1e6 42%, #f8ecdf 100%);
  font-family: Avenir, "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(118,83,44,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,83,44,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .45;
  content: "";
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1208px, calc(100% - 42px));
  min-height: 108px;
  margin: 0 auto;
  color: var(--navy);
  background: transparent;
  box-shadow: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}

.brand-logo {
  display: none;
}

.site-header .brand-logo {
  display: block;
  width: clamp(190px, 21vw, 270px);
  height: auto;
  border-radius: 2px;
  mix-blend-mode: multiply;
  opacity: 0;
  filter: saturate(.96) contrast(.96);
}

.site-header .brand-mark,
.site-header .brand-text {
  display: none;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(6,45,93,.34);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(249,231,205,.88)),
    radial-gradient(circle at 53% 34%, #f4d18f 0 15%, transparent 16%),
    linear-gradient(155deg, transparent 0 47%, rgba(6,45,93,.16) 48% 50%, transparent 51%);
  box-shadow: 0 9px 24px rgba(6, 45, 93, .13);
}

.brand-mark::before {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  height: 17px;
  border: 3px solid var(--navy);
  border-top: 0;
  border-radius: 0 0 32px 32px;
  content: "";
}

.mark-sky {
  position: absolute;
  top: 19px;
  width: 36px;
  height: 16px;
  border: 2px solid var(--navy);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
}

.mark-heart {
  position: absolute;
  bottom: 17px;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  border-radius: 4px;
  background: var(--navy);
}

.mark-heart::before,
.mark-heart::after {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy);
  content: "";
}

.mark-heart::before { left: -9px; }
.mark-heart::after { top: -9px; }

.brand-script {
  display: block;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 48px;
  line-height: .85;
}

.brand-sub {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.brand-korean-tag {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .18em;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 1.9vw, 30px);
  font-size: 15.5px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (min-width: 1101px) {
  .primary-nav {
    transform: translate(-76px, 4px);
  }
}

.primary-nav > a,
.dropdown-toggle {
  opacity: 1;
}

.primary-nav a,
.dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  letter-spacing: .035em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.primary-nav a:focus-visible,
.dropdown-toggle:focus-visible {
  outline: 2px solid rgba(187,127,45,.62);
  outline-offset: 3px;
}

.primary-nav a::after,
.dropdown-toggle::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  background: var(--gold);
  transition: transform .18s ease;
  content: "";
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a[aria-current="page"]::after,
.dropdown-toggle:hover::after {
  transform: scaleX(1);
}

.nav-dropdown {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: -12px;
}

.nav-dropdown::after {
  position: absolute;
  left: -18px;
  right: -18px;
  top: 100%;
  height: 16px;
  content: "";
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  display: grid;
  gap: 3px;
  width: 290px;
  padding: 12px;
  border: 1px solid rgba(118,83,44,.18);
  border-radius: 8px;
  background: rgba(255, 250, 243, .98);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.is-open .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.dropdown-menu a {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.25;
  text-transform: none;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background: rgba(229,189,120,.17);
}

.social-link {
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff !important;
  font-size: 19px;
  text-transform: none;
}

.social-link::after { display: none; }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(6,45,93,.18);
  border-radius: 50%;
  background: rgba(255,250,243,.86);
}

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: var(--navy);
}

.hero {
  position: relative;
  min-height: clamp(500px, 47.1vw, 760px);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0 24px;
  background:
    linear-gradient(180deg, rgba(255,245,231,.08), rgba(255,247,236,0) 70%, #f8efe4 100%),
    #f8efe4;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,248,239,.03), transparent 52%, rgba(248,239,228,.06) 100%);
  content: "";
}

.hero::after {
  display: none;
}

.hero-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,248,239,.01), rgba(255,248,239,0) 100%),
    url("assets/phase2-hires/home-hero-wide-clean-2x.png") center top / 100% auto no-repeat,
    linear-gradient(180deg, #f8efe4, #fff4e8 58%, #f8efe4);
}

.hero-scene::before {
  position: absolute;
  top: -4px;
  left: 25%;
  right: -7%;
  z-index: 1;
  height: 86px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 38%, rgba(255,241,224,.32), transparent 13rem),
    radial-gradient(ellipse at 76% 24%, rgba(222,226,236,.2), transparent 15rem),
    linear-gradient(90deg, rgba(245,232,222,0), rgba(245,232,222,.2) 12%, rgba(237,229,227,.22) 48%, rgba(220,225,235,.18) 84%, rgba(220,225,235,0)),
    linear-gradient(180deg, rgba(236,226,223,.18), rgba(242,229,219,.08) 62%, rgba(242,229,219,0));
  filter: blur(8px);
  opacity: .42;
  transform: scale(1.04);
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(180deg, transparent, #000 18%, #000 74%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(180deg, transparent, #000 18%, #000 74%, transparent);
  mask-composite: intersect;
  content: "";
}

.hero-scene span { display: none; }

.mountain {
  bottom: 184px;
  width: 49vw;
  max-width: 650px;
  height: 252px;
  clip-path: polygon(0 100%, 20% 48%, 36% 65%, 56% 20%, 78% 68%, 100% 42%, 100% 100%);
  background: linear-gradient(180deg, rgba(80,107,119,.48), rgba(46,78,69,.72));
}

.mountain-one { left: -8vw; opacity: .78; }
.mountain-two { right: -6vw; transform: scaleX(-1); opacity: .58; }

.sun {
  left: 50%;
  bottom: 255px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255,255,255,.93);
  box-shadow:
    0 0 52px 34px rgba(255,223,180,.42),
    0 0 110px 62px rgba(255,204,149,.23);
}

.water {
  left: 0;
  right: 0;
  bottom: 0;
  height: 258px;
  background:
    radial-gradient(ellipse at 50% 11%, rgba(255,237,201,.72), transparent 28%),
    linear-gradient(90deg, transparent, rgba(255,247,228,.34) 48%, rgba(255,247,228,.4) 52%, transparent),
    repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(6,45,93,.045) 47px 48px, transparent 49px 96px),
    linear-gradient(180deg, rgba(232,221,197,.28), rgba(82,121,144,.56));
}

.shore {
  bottom: 122px;
  height: 72px;
  opacity: .68;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(27,67,64,.8), transparent 45%),
    radial-gradient(ellipse at 70% 100%, rgba(31,73,70,.72), transparent 48%),
    linear-gradient(180deg, transparent, rgba(38,74,65,.58));
}

.shore-left {
  left: -4%;
  width: 45%;
  clip-path: polygon(0 100%, 0 58%, 18% 38%, 35% 54%, 51% 30%, 72% 48%, 100% 24%, 100% 100%);
}

.shore-right {
  right: -3%;
  width: 43%;
  clip-path: polygon(0 32%, 20% 50%, 45% 24%, 64% 44%, 82% 30%, 100% 58%, 100% 100%, 0 100%);
}

.city {
  bottom: 219px;
  width: 210px;
  height: 155px;
  background:
    radial-gradient(circle, rgba(245,206,128,.8) 0 1px, transparent 2px) 56px 46px/14px 18px,
    radial-gradient(circle, rgba(245,206,128,.65) 0 1px, transparent 2px) 128px 65px/16px 20px,
    linear-gradient(var(--navy), var(--navy)) 20px 52px/12px 94px,
    linear-gradient(var(--navy), var(--navy)) 52px 24px/18px 122px,
    linear-gradient(var(--navy), var(--navy)) 88px 74px/16px 72px,
    linear-gradient(var(--navy), var(--navy)) 122px 38px/24px 108px,
    linear-gradient(var(--navy), var(--navy)) 166px 66px/18px 80px;
  background-repeat: no-repeat;
  opacity: .62;
}

.city-korea { left: 16%; opacity: .52; }
.city-newengland { right: 12%; opacity: .7; }

.pavilion {
  left: 6%;
  bottom: 154px;
  width: 212px;
  height: 106px;
  background:
    linear-gradient(160deg, transparent 48%, #141b25 49% 55%, transparent 56%) 0 0/100% 42px,
    linear-gradient(200deg, transparent 48%, #141b25 49% 55%, transparent 56%) 0 0/100% 42px,
    linear-gradient(#141b25, #141b25) 34px 39px/140px 11px,
    linear-gradient(#2b1b11, #2b1b11) 55px 50px/98px 48px,
    linear-gradient(#cc8d2e, #cc8d2e) 58px 54px/90px 5px;
  background-repeat: no-repeat;
  opacity: .9;
  filter: drop-shadow(0 14px 18px rgba(14, 21, 24, .16));
}

.hanok-row {
  left: 12%;
  bottom: 133px;
  width: 288px;
  height: 78px;
  opacity: .78;
  background:
    linear-gradient(160deg, transparent 48%, #172335 49% 56%, transparent 57%) 0 0/94px 34px,
    linear-gradient(200deg, transparent 48%, #172335 49% 56%, transparent 57%) 0 0/94px 34px,
    linear-gradient(160deg, transparent 48%, #172335 49% 56%, transparent 57%) 92px 7px/94px 34px,
    linear-gradient(200deg, transparent 48%, #172335 49% 56%, transparent 57%) 92px 7px/94px 34px,
    linear-gradient(#2a1d16, #2a1d16) 15px 32px/54px 32px,
    linear-gradient(#2a1d16, #2a1d16) 107px 39px/56px 28px,
    linear-gradient(#d8993a, #d8993a) 20px 38px/43px 3px,
    linear-gradient(#d8993a, #d8993a) 112px 45px/44px 3px;
  background-repeat: no-repeat;
}

.lighthouse {
  right: 7%;
  bottom: 160px;
  width: 96px;
  height: 150px;
  background:
    linear-gradient(var(--navy), var(--navy)) 39px 0/14px 16px,
    linear-gradient(#fff8ef, #fff8ef) 30px 16px/32px 92px,
    linear-gradient(var(--navy), var(--navy)) 22px 108px/48px 7px,
    linear-gradient(#f8efe4, #e4d2ba) 16px 115px/60px 28px;
  background-repeat: no-repeat;
  opacity: .94;
  filter: drop-shadow(0 12px 18px rgba(14, 21, 24, .16));
}

.church {
  right: 11.8%;
  bottom: 151px;
  width: 116px;
  height: 88px;
  background:
    linear-gradient(#fff7ed, #e4d3bd) 22px 36px/76px 42px,
    linear-gradient(135deg, transparent 49%, #183559 50% 63%, transparent 64%) 10px 18px/98px 30px,
    linear-gradient(#fff7ed, #fff7ed) 54px 3px/12px 35px,
    linear-gradient(#183559, #183559) 51px 0/18px 8px,
    linear-gradient(#183559, #183559) 58px -8px/4px 12px;
  background-repeat: no-repeat;
  opacity: .84;
}

.newengland-homes {
  right: 16%;
  bottom: 132px;
  width: 242px;
  height: 74px;
  opacity: .72;
  background:
    linear-gradient(135deg, transparent 49%, #213b5c 50% 62%, transparent 63%) 4px 11px/78px 26px,
    linear-gradient(#f7eee1, #dfcbb5) 12px 36px/58px 29px,
    linear-gradient(135deg, transparent 49%, #213b5c 50% 62%, transparent 63%) 80px 17px/70px 24px,
    linear-gradient(#f9f1e8, #e6d3be) 88px 40px/52px 25px,
    linear-gradient(135deg, transparent 49%, #213b5c 50% 62%, transparent 63%) 148px 8px/82px 28px,
    linear-gradient(#f7eee1, #dfcbb5) 158px 37px/60px 30px,
    radial-gradient(circle, #d4973c 0 1px, transparent 2px) 22px 45px/15px 12px,
    radial-gradient(circle, #d4973c 0 1px, transparent 2px) 170px 46px/15px 12px;
  background-repeat: no-repeat;
}

.bridge {
  left: 39%;
  bottom: 162px;
  width: 235px;
  height: 58px;
  border-bottom: 4px solid rgba(6,45,93,.45);
  border-radius: 0 0 50% 50%;
  opacity: .5;
}

.bridge::before,
.bridge::after {
  position: absolute;
  bottom: -36px;
  width: 3px;
  height: 38px;
  background: rgba(6,45,93,.42);
  content: "";
}

.bridge::before { left: 34%; }
.bridge::after { right: 34%; }

.sailboat {
  right: 27%;
  bottom: 222px;
  width: 68px;
  height: 54px;
  opacity: .82;
  background:
    linear-gradient(120deg, transparent 50%, #fffaf3 51%) 20px 0/28px 38px,
    linear-gradient(60deg, transparent 50%, rgba(6,45,93,.72) 51%) 37px 12px/20px 26px,
    linear-gradient(var(--navy), var(--navy)) 20px 38px/46px 4px;
  background-repeat: no-repeat;
}

.birds {
  left: 30%;
  top: 116px;
  width: 132px;
  height: 48px;
  opacity: .54;
  background:
    radial-gradient(ellipse at 50% 100%, transparent 55%, var(--navy) 57% 63%, transparent 65%) 0 0/34px 18px,
    radial-gradient(ellipse at 50% 100%, transparent 55%, var(--navy) 57% 63%, transparent 65%) 52px 12px/30px 16px,
    radial-gradient(ellipse at 50% 100%, transparent 55%, var(--navy) 57% 63%, transparent 65%) 96px 2px/28px 15px;
  background-repeat: no-repeat;
}

.cherry {
  top: -42px;
  width: 320px;
  height: 230px;
  opacity: .28;
  background:
    linear-gradient(28deg, transparent 0 47%, rgba(82,49,35,.42) 48% 51%, transparent 52%) 0 0/260px 150px,
    radial-gradient(circle, #e9a4a1 0 5px, transparent 6px) 20px 36px/46px 46px,
    radial-gradient(circle, #f0b7b0 0 4px, transparent 5px) 8px 12px/38px 38px;
}

.cherry-left { left: -50px; transform: rotate(-8deg); }
.cherry-right { right: -52px; transform: scaleX(-1) rotate(-8deg); }

.hero-copy {
  position: absolute;
  z-index: 3;
  width: 1px;
  height: 1px;
  max-width: 1px;
  overflow: hidden;
  text-align: center;
  transform: translateY(-4px);
  opacity: 0;
  pointer-events: none;
}

.hero-copy::before {
  position: absolute;
  inset: -48px -70px -42px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,248,235,.62), rgba(255,248,235,.28) 44%, transparent 72%);
  filter: blur(1px);
  content: "";
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
  letter-spacing: 0;
}

h1 {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(5.7rem, 13.6vw, 9.7rem);
  font-weight: 400;
  line-height: .78;
  text-shadow:
    0 2px 16px rgba(255, 244, 225, .7),
    0 1px 0 rgba(255,255,255,.42);
}

.heart-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(262px, 70vw);
  margin: 32px auto 13px;
}

.heart-divider::before,
.heart-divider::after {
  flex: 1;
  height: 1px;
  background: var(--gold);
  content: "";
}

.heart-divider span {
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border-radius: 3px;
  background: var(--navy);
}

.heart-divider span::before,
.heart-divider span::after {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy);
  content: "";
}

.heart-divider span::before { left: -7px; }
.heart-divider span::after { top: -7px; }

.hero-kicker,
.hero-subtitle,
.hero-korean {
  margin: 0;
  color: var(--navy);
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(255,248,239,.45);
}

.hero-kicker { font-size: clamp(.91rem, 1.45vw, 1rem); }
.hero-korean { margin-top: 10px; font-size: .94rem; letter-spacing: .17em; }
.hero-subtitle { margin-top: 11px; font-size: .92rem; }

.motto-band {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  min-height: 70px;
  padding: 0 24px;
  border-top: 1px solid rgba(118,83,44,.06);
  border-bottom: 1px solid rgba(118,83,44,.12);
  background:
    url("assets/mockup-slices/home-motto-art.png") center center / cover no-repeat,
    linear-gradient(90deg, rgba(247,234,216,.82), #fff8ed 45%, rgba(247,234,216,.82));
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.motto-band p { margin: 0; opacity: 0; }
.motto-band span { width: 1px; height: 27px; background: var(--gold); opacity: 0; }

.motto-band::before {
  position: absolute;
  left: max(38px, calc((100vw - 1120px) / 2 + 20px));
  top: 50%;
  width: 60px;
  height: 34px;
  transform: translateY(-50%);
  background: url("assets/mockup-icons/motto-leaf-left.png") center / contain no-repeat;
  opacity: .9;
  content: "";
}

.pillars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 29px max(24px, calc((100vw - 1120px) / 2)) 40px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.8), transparent 34rem),
    linear-gradient(180deg, #fffaf4, #fbf1e6 82%, rgba(251,241,230,0));
}

.pillars::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -44px;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(251,241,230,.94), rgba(251,241,230,0));
  content: "";
}

.pillars article {
  min-height: 158px;
  padding: 4px 28px 0;
  text-align: center;
}

.pillars article + article { border-left: 1px solid rgba(187,127,45,.3); }

.pillar-icon {
  position: relative;
  width: 72px;
  height: 62px;
  margin: 0 auto 13px;
  color: var(--navy);
  object-fit: contain;
  opacity: .96;
}

.pillar-icon span,
.pillar-icon i,
.pillar-icon::before,
.pillar-icon::after {
  position: absolute;
  display: block;
  content: "";
}

.connection-icon span {
  top: 5px;
  width: 25px;
  height: 25px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.connection-icon span:first-child { left: 9px; }
.connection-icon span:nth-child(2) { right: 9px; }
.connection-icon::before,
.connection-icon::after {
  bottom: 2px;
  width: 34px;
  height: 27px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 28px 28px;
}

.connection-icon::before { left: 8px; transform: rotate(18deg); }
.connection-icon::after { right: 8px; transform: rotate(-18deg); }
.connection-icon i {
  left: 28px;
  top: 32px;
  width: 17px;
  height: 17px;
  transform: rotate(45deg);
  border-radius: 4px;
  background: var(--soft-gold);
}

.connection-icon i::before,
.connection-icon i::after {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--soft-gold);
  content: "";
}

.connection-icon i::before { left: -8px; }
.connection-icon i::after { top: -8px; }

.support-icon span {
  top: 14px;
  width: 26px;
  height: 32px;
  border: 2px solid currentColor;
  border-radius: 18px 18px 8px 8px;
}

.support-icon span:first-child { left: 8px; transform: rotate(-22deg); }
.support-icon span:nth-child(2) { right: 8px; transform: rotate(22deg); }
.support-icon::before,
.support-icon::after {
  top: 30px;
  width: 25px;
  height: 2px;
  background: currentColor;
}

.support-icon::before { left: 18px; transform: rotate(24deg); }
.support-icon::after { right: 18px; transform: rotate(-24deg); }
.support-icon i {
  left: 29px;
  top: 18px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-radius: 4px;
  background: var(--soft-gold);
}

.support-icon i::before,
.support-icon i::after {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--soft-gold);
  content: "";
}

.support-icon i::before { left: -8px; }
.support-icon i::after { top: -8px; }

.identity-icon::before {
  left: 34px;
  top: 9px;
  width: 2px;
  height: 47px;
  background: currentColor;
}

.identity-icon span {
  width: 24px;
  height: 31px;
  border: 2px solid currentColor;
  border-radius: 70% 0 70% 0;
}

.identity-icon span:first-child { left: 13px; top: 24px; transform: rotate(-42deg); }
.identity-icon span:nth-child(2) { right: 12px; top: 20px; transform: rotate(48deg); }
.identity-icon i {
  left: 30px;
  top: 2px;
  width: 22px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 70% 0 70% 0;
  transform: rotate(42deg);
}

.identity-icon::after {
  left: 20px;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: currentColor;
}

.belonging-icon::before {
  left: 29px;
  top: 2px;
  width: 25px;
  height: 42px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.belonging-icon span:first-child {
  left: 22px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--soft-gold);
  box-shadow: 28px 0 0 var(--soft-gold);
}

.belonging-icon span:nth-child(2) {
  left: 18px;
  bottom: 4px;
  width: 38px;
  height: 16px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 24px 24px;
}

.belonging-icon i {
  left: 55px;
  top: 17px;
  width: 14px;
  height: 2px;
  background: var(--soft-gold);
  box-shadow: 0 7px 0 var(--soft-gold);
}

.pillars h2 {
  font-size: 1.02rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.pillars p {
  max-width: 190px;
  margin: 9px auto 0;
  font-size: .9rem;
  line-height: 1.55;
}

.section-heading-centered {
  max-width: 760px;
  margin: 0 auto clamp(20px, 3vw, 30px);
  text-align: center;
}

.section-heading-centered h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.start-here-section {
  width: min(1120px, calc(100% - 48px));
  margin: clamp(30px, 5vw, 56px) auto 0;
}

.start-here-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}

.start-here-card {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(168, 117, 42, .22);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 10rem),
    linear-gradient(180deg, rgba(255,250,243,.92), rgba(255,247,237,.74));
  box-shadow: var(--soft-shadow);
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.start-here-card:hover,
.start-here-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(187,127,45,.32);
  box-shadow: 0 20px 40px rgba(48,35,22,.11);
  outline: none;
}

.start-here-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  box-shadow: none;
}

.start-here-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.start-here-icon .icon-wash {
  opacity: .78;
}

.start-here-icon .icon-wash--beige {
  fill: #f3e1c8;
}

.start-here-icon .icon-wash--blue {
  fill: #dce9f4;
}

.start-here-icon .icon-wash--sage {
  fill: #dbe9df;
}

.start-here-icon .icon-line,
.start-here-icon .icon-dash,
.start-here-icon .icon-sage {
  fill: none;
  stroke: #0f2547;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.start-here-icon .icon-dash {
  stroke-dasharray: 4 7;
}

.start-here-icon .icon-heart,
.start-here-icon .icon-pin {
  fill: #c89d5c;
}

.start-here-icon .icon-pin-hole {
  fill: #fff8ec;
}

.start-here-icon .icon-sage,
.start-here-icon .icon-sage-fill {
  stroke: #6e8a73;
}

.start-here-icon .icon-sage-fill {
  fill: #8fa883;
  stroke-width: 1.6;
}

.start-here-card h3 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.14;
}

.start-here-card p {
  max-width: 26ch;
  margin: 12px auto 18px;
  color: rgba(6, 45, 93, .74);
  font-size: .95rem;
  line-height: 1.6;
}

.start-here-card > span:last-child {
  margin-top: auto;
  color: var(--navy);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.founder-preview-section,
.featured-story-section,
.explore-haneul-section {
  width: min(980px, calc(100% - 48px));
  margin: clamp(28px, 5vw, 54px) auto 0;
}

.founder-preview-section,
.featured-story-card {
  border: 1px solid rgba(168, 117, 42, .22);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.64), transparent 14rem),
    linear-gradient(145deg, rgba(255,250,243,.96), rgba(247,235,220,.78));
  box-shadow: var(--soft-shadow);
  text-align: center;
}

.founder-preview-section {
  padding: clamp(30px, 5vw, 52px);
}

.founder-preview-copy {
  max-width: 740px;
  margin: 0 auto;
}

.founder-preview-copy h2,
.featured-story-card h2 {
  margin: 0;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
}

.founder-preview-copy p:not(.script-note),
.featured-story-card p:not(.script-note) {
  max-width: 680px;
  margin: 14px auto 0;
  color: rgba(6, 45, 93, .78);
  font-size: clamp(1rem, 1.45vw, 1.13rem);
  line-height: 1.7;
}

.homepage-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 24px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff8ed;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(8, 47, 82, .14);
}

.homepage-cta-link:hover,
.homepage-cta-link:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.featured-story-card {
  padding: clamp(28px, 5vw, 48px);
}

.featured-story-card {
  border-top: 5px solid var(--gold);
}

.explore-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.explore-link-grid a {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(168, 117, 42, .22);
  border-radius: 18px;
  background: rgba(255, 250, 243, .86);
  color: var(--navy);
  box-shadow: 0 10px 22px rgba(8, 47, 82, .06);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.explore-link-grid a:hover,
.explore-link-grid a:focus-visible {
  transform: translateY(-2px);
  background: var(--navy);
  color: #fff8ed;
  outline: none;
}

.welcome-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 0.92fr) minmax(0, 1.68fr);
  gap: clamp(34px, 4vw, 56px);
  padding: 44px max(42px, calc((100vw - 1120px) / 2)) 18px;
  background:
    radial-gradient(circle at 5% 20%, rgba(255,255,255,.58), transparent 25rem),
    radial-gradient(circle at 88% 22%, rgba(232,189,134,.12), transparent 25rem),
    linear-gradient(180deg, #fbf1e6 0%, #fff6ec 48%, #fbf1e6 100%);
}

.welcome-section::before {
  display: none;
}

.script-note {
  display: inline-block;
  margin: 0 0 16px;
  color: var(--gold);
  font-family: Avenir, "Avenir Next", system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.welcome-copy h2 {
  max-width: 500px;
  font-size: clamp(1.72rem, 2.65vw, 2.32rem);
  line-height: 1.24;
}

.welcome-copy p:not(.script-note) {
  max-width: 455px;
  margin: 26px 0 0;
  font-size: .93rem;
  line-height: 1.72;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
  align-items: stretch;
}

.feature-card,
.support-card {
  overflow: hidden;
  border: 1px solid rgba(118,83,44,.11);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,250,243,.72), rgba(255,247,237,.55)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 8rem);
  box-shadow: var(--soft-shadow);
  text-decoration: none;
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 342px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.feature-card > picture,
.feature-card > picture {
  height: 150px;
}

.feature-card > picture {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.34), transparent 7rem),
    linear-gradient(180deg, #f1dfc9, #fff5ea);
}

.feature-card > picture img {
  width: auto;
  max-width: 100%;
  height: 144px;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.feature-card--media > picture {
  position: static;
}

.feature-card--media > picture img {
  position: static;
  width: auto;
  max-width: 100%;
  height: 144px;
  max-height: 100%;
  border-radius: 14px 14px 6px 6px;
  object-fit: contain;
  object-position: center;
}

.feature-card:hover,
.feature-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(187,127,45,.28);
  box-shadow: 0 20px 40px rgba(48,35,22,.11);
  outline: none;
}

.card-medallion {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: -29px auto 14px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--navy);
  box-shadow:
    0 0 0 5px rgba(255,250,243,.86),
    0 8px 20px rgba(48,35,22,.12);
  object-fit: contain;
}

.card-medallion.green { background: var(--sage); }
.card-medallion.gold { background: #e0a956; color: white; }
.card-medallion.navy { background: var(--navy); color: #fff8ec; }

.book-icon::before {
  width: 24px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 2px 8px 8px 2px;
  content: "";
}

.book-icon::after {
  position: absolute;
  top: 18px;
  bottom: 16px;
  left: 28px;
  width: 2px;
  background: currentColor;
  content: "";
}

.chat-icon::before {
  width: 28px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}

.chat-icon::after {
  position: absolute;
  right: 15px;
  bottom: 17px;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(22deg);
  content: "";
}

.leaf-icon::before {
  width: 27px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 90% 0 90% 0;
  transform: rotate(24deg);
  content: "";
}

.leaf-icon::after {
  position: absolute;
  width: 32px;
  height: 2px;
  transform: rotate(-42deg);
  background: currentColor;
  content: "";
}

.media-icon::before {
  width: 28px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 4px;
  content: "";
}

.media-icon::after {
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
  content: "";
}

.feature-card h3 { font-size: 1.22rem; }
.feature-card p { margin: 9px 24px 0; font-size: .9rem; line-height: 1.55; }
.explore { margin: auto 0 22px; color: var(--navy); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.quote-section {
  position: relative;
  min-height: clamp(124px, 12.1vw, 150px);
  display: grid;
  grid-template-columns: 1fr minmax(240px, .85fr);
  align-items: center;
  gap: 24px;
  overflow: hidden;
  padding: 24px min(6vw, 76px);
  background:
    url("assets/mockup-slices/home-quote-art.png") center center / cover no-repeat,
    #eef2ef;
}

.quote-section::before,
.quote-section::after {
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  content: "";
}

.quote-section::before {
  top: 0;
  background: linear-gradient(180deg, rgba(249,236,221,.38), rgba(249,236,221,0));
}

.quote-section::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(251,241,230,.38), rgba(251,241,230,0));
}

.quote-copy {
  opacity: 0;
  pointer-events: none;
}

.quote-section h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.small-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 220px;
  margin-top: 18px;
}

.small-divider::before,
.small-divider::after {
  flex: 1;
  height: 1px;
  background: var(--gold);
  content: "";
}

.small-divider span {
  width: 15px;
  height: 15px;
  border: 1px solid var(--gold);
  border-radius: 50%;
}

.quote-section picture {
  display: none;
}

.quote-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.resource-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 28px max(42px, calc((100vw - 1120px) / 2)) 28px;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.5), transparent 20rem),
    radial-gradient(circle at 88% 15%, rgba(229,189,120,.12), transparent 20rem),
    linear-gradient(180deg, #fbf1e6, #fff6ec 54%, #fbf1e6);
}

.support-card {
  display: grid;
  grid-template-columns: 136px 1fr;
  min-height: 136px;
}

.support-card > div {
  min-width: 0;
}

.support-card picture {
  display: grid;
  place-items: center;
  width: 100%;
  height: 136px;
  aspect-ratio: 1;
  align-self: stretch;
  overflow: hidden;
  background: linear-gradient(180deg, #efdcc5, #fff4e8);
}

.support-card picture img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}

.support-card:nth-child(3) picture img {
  object-position: center;
}

.support-card div { padding: 18px 18px 16px; }
.support-card-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 !important;
}

.support-card-icon {
  width: 42px;
  height: 42px;
  margin: 0;
  object-fit: contain;
}
.support-card h3 { font-size: 1.02rem; }
.support-card h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.support-card p { margin: 8px 0 10px; font-size: .86rem; line-height: 1.45; }
.support-card span { color: var(--navy); font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.follow-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: min(1120px, calc(100% - 44px));
  margin: 24px auto 0;
  min-height: 98px;
  padding: 22px clamp(24px, 5vw, 52px);
  border: 1px solid rgba(118,83,44,.1);
  border-radius: var(--radius);
  background:
    url("assets/phase2-hires/home-follow-art-2x.png") center center / 100% 100% no-repeat,
    rgba(255,250,243,.88);
  box-shadow: var(--soft-shadow);
}

.follow-band p { max-width: 460px; margin: 0; opacity: 0; }
.follow-band .script-note { margin-bottom: 4px; }

.follow-actions {
  position: absolute;
  left: 53.2%;
  top: 50%;
  display: flex;
  gap: 33px;
  margin-right: 0;
  transform: translateY(-50%);
}

.follow-actions a {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 30px;
  text-decoration: none;
}

.email-signup-section {
  width: min(900px, calc(100% - 48px));
  margin: clamp(30px, 5vw, 54px) auto 0;
}

.email-signup-card {
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid rgba(168, 117, 42, .24);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 16rem),
    linear-gradient(145deg, rgba(255,250,243,.96), rgba(247,235,220,.72));
  box-shadow: var(--soft-shadow);
  text-align: center;
}

.email-signup-card h2 {
  max-width: 720px;
  margin: 8px auto 14px;
  color: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.email-signup-card p:not(.script-note) {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(6, 45, 93, .78);
  font-size: clamp(.98rem, 1.45vw, 1.12rem);
  line-height: 1.7;
}

.email-signup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 24px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff8ed;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(8, 47, 82, .14);
  cursor: pointer;
}

.email-signup-button:hover,
.email-signup-button:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.email-signup-card .email-signup-privacy {
  max-width: 560px;
  margin-top: 18px;
  color: rgba(6, 45, 93, .64);
  font-size: .88rem;
  font-weight: 800;
}

.email-signup-form {
  max-width: 720px;
  margin: 24px auto 0;
}

.email-signup-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: end;
  gap: 12px;
}

.email-signup-fields label {
  display: grid;
  gap: 7px;
  text-align: left;
}

.email-signup-fields span {
  color: var(--navy);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.email-signup-fields strong {
  color: var(--gold);
}

.email-signup-fields input {
  width: 100%;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid rgba(168, 117, 42, .28);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--navy);
  font: 1rem/1.4 Avenir, "Avenir Next", system-ui, sans-serif;
}

.email-signup-fields input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(168, 117, 42, .14);
  outline: none;
}

.email-signup-status {
  min-height: 1.3em;
  margin-top: 14px !important;
  color: var(--navy) !important;
  font-size: .92rem !important;
  font-weight: 800;
}

.email-signup-status.is-error {
  color: #9b3429 !important;
}

.email-signup-status.is-success {
  color: #28603a !important;
}

.hidden-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .7fr 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
  padding: 34px min(6vw, 76px) 42px;
  background: linear-gradient(135deg, #052b59, #0a3b73);
  color: #fff8ef;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  align-items: center;
  justify-self: stretch;
  width: 100%;
  text-align: center;
}

.site-footer .brand {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
  color: #fff8ef;
}

.site-footer .brand-logo {
  display: block;
  width: min(245px, 100%);
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin-inline: auto;
  mix-blend-mode: normal;
  opacity: 1;
  transform: translateX(28px);
}
.site-footer h2 { margin-bottom: 10px; color: #fff8ef; font: 900 .9rem/1.2 Avenir, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.site-footer a, .site-footer p { display: block; margin: 0 0 6px; color: rgba(255,248,239,.88); font-size: .9rem; text-decoration: none; }
.footer-brand p { margin-top: 14px; color: #f2c98e; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contact-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 26px;
}

.contact-icon {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #f2c98e;
}

.envelope-icon {
  width: 18px;
  height: 13px;
  border: 1.6px solid currentColor;
  border-radius: 2px;
}

.envelope-icon::before,
.envelope-icon::after {
  position: absolute;
  top: 1px;
  width: 11px;
  height: 1.6px;
  background: currentColor;
  content: "";
}

.envelope-icon::before {
  left: 1px;
  transform: rotate(32deg);
  transform-origin: left center;
}

.envelope-icon::after {
  right: 1px;
  transform: rotate(-32deg);
  transform-origin: right center;
}

.globe-icon {
  border: 1.6px solid currentColor;
  border-radius: 50%;
}

.globe-icon::before,
.globe-icon::after {
  position: absolute;
  content: "";
}

.globe-icon::before {
  left: 3px;
  right: 3px;
  top: 50%;
  height: 1.4px;
  background: currentColor;
  transform: translateY(-50%);
}

.globe-icon::after {
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 7px;
  border-left: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
}

.facebook-icon {
  border: 1.6px solid currentColor;
  border-radius: 50%;
  font: 900 13px/1 Georgia, serif;
}

.instagram-icon {
  border: 1.6px solid currentColor;
  border-radius: 5px;
}

.instagram-icon::before {
  position: absolute;
  inset: 4px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  content: "";
}

.instagram-icon::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.copyright { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); }

@media (min-width: 1101px) and (max-width: 1180px) {
  .site-header {
    width: min(100%, calc(100% - 24px));
    min-height: 94px;
    gap: 10px;
  }

  .site-header .brand-logo {
    width: clamp(150px, 16vw, 188px);
  }

  .primary-nav {
    gap: clamp(9px, 1.05vw, 14px);
    font-size: clamp(11.5px, 1.15vw, 13px);
    transform: translate(-12px, 3px);
  }

  .primary-nav a,
  .dropdown-toggle {
    min-height: 38px;
    padding-inline: 1px;
    letter-spacing: .02em;
  }

  .social-link {
    width: 29px;
    height: 29px;
    background: var(--navy) !important;
    color: #fff !important;
    font-size: 17px;
  }

  .dropdown-menu {
    width: 262px;
  }

  .dropdown-menu a {
    font-size: 12.5px;
  }

  .hero {
    min-height: clamp(500px, 47.1vw, 556px);
  }

  .hero-scene {
    background:
      linear-gradient(180deg, rgba(255,248,239,.01), rgba(255,248,239,0) 100%),
      url("assets/phase2-hires/home-hero-wide-clean-2x.png") center top / min(100%, 1024px) auto no-repeat,
      linear-gradient(180deg, #f8efe4, #fff4e8 58%, #f8efe4);
  }

  .hero-scene::before {
    left: 22%;
    right: -4%;
    height: 112px;
  }

  .motto-band {
    font-size: clamp(.92rem, 1.55vw, 1.08rem);
    gap: 20px;
  }

  .pillars {
    padding-inline: 28px;
  }

  .pillars article {
    padding-inline: 18px;
  }

  .welcome-section {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-inline: max(34px, calc((100vw - 920px) / 2));
  }

  .welcome-copy {
    max-width: 680px;
  }

  .welcome-copy h2 {
    max-width: 650px;
  }

  .welcome-copy p:not(.script-note) {
    max-width: 630px;
  }

  .feature-cards {
    gap: 16px;
  }

  .feature-card {
    min-height: 326px;
  }

  .feature-card > picture {
    height: 140px;
  }

  .resource-strip {
    grid-template-columns: 1fr;
    padding-inline: max(34px, calc((100vw - 900px) / 2));
  }

  .support-card {
    grid-template-columns: 174px 1fr;
    width: 100%;
    max-width: 850px;
    justify-self: center;
  }

  .support-card picture {
    height: 156px;
  }

  .follow-band {
    width: min(900px, calc(100% - 48px));
    min-height: auto;
    background:
      linear-gradient(90deg, rgba(255,250,243,.92), rgba(245,232,213,.6)),
      rgba(255,250,243,.88);
  }

  .follow-band p {
    opacity: 1;
  }

  .follow-actions {
    position: static;
    flex: 0 0 auto;
    gap: 18px;
    transform: none;
  }

  .follow-actions a {
    background: var(--navy);
    color: white;
  }

  .site-footer {
    grid-template-columns: 1.1fr .8fr 1fr;
  }

  .site-footer > div:last-of-type {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .site-header {
    position: absolute;
    width: min(100%, calc(100% - 20px));
    min-height: 74px;
    padding: 10px 0;
    background: transparent;
    box-shadow: none;
  }

  .site-header .brand-logo { display: none; }
  .site-header .brand-mark,
  .site-header .brand-text { display: block; }
  .primary-nav > a,
  .dropdown-toggle {
    opacity: 1;
  }
  .brand-mark { width: 54px; height: 54px; }
  .brand-mark::before { left: 11px; right: 11px; bottom: 13px; height: 13px; border-width: 2px; }
  .mark-sky { top: 13px; width: 28px; height: 12px; border-width: 2px; }
  .mark-heart { bottom: 11px; width: 13px; height: 13px; }
  .mark-heart::before,
  .mark-heart::after { width: 13px; height: 13px; }
  .mark-heart::before { left: -6px; }
  .mark-heart::after { top: -6px; }
  .brand-script { font-size: 34px; }
  .brand-sub { font-size: 10px; }
  .brand-korean-tag { font-size: 9px; letter-spacing: .12em; }
  .menu-toggle { display: block; }

  .primary-nav {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 78px;
    display: none;
    padding: 16px;
    border: 1px solid rgba(118,83,44,.16);
    border-radius: 8px;
    background: rgba(255,250,243,.98);
    box-shadow: var(--shadow);
  }

  .primary-nav.is-open {
    display: grid;
    justify-content: stretch;
    gap: 4px;
  }

  .primary-nav a,
  .dropdown-toggle {
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    color: var(--navy);
  }

  .social-link {
    width: 42px !important;
    background: var(--navy);
    color: #fff !important;
  }

  .dropdown-menu {
    position: static;
    display: none;
    width: 100%;
    padding: 4px 0 8px 14px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-dropdown.is-open .dropdown-menu { display: grid; }
  .nav-dropdown.is-open .dropdown-menu {
    transform: none;
  }

  .hero { min-height: clamp(440px, 58vw, 520px); padding: 0 18px; }
  .city-korea, .pavilion { left: 3%; }
  .city-newengland, .lighthouse { right: 2%; }
  .hanok-row { left: 9%; transform: scale(.86); transform-origin: left bottom; }
  .newengland-homes { right: 7%; transform: scale(.86); transform-origin: right bottom; }
  .shore { bottom: 126px; opacity: .58; }
  .motto-band { flex-direction: column; gap: 12px; text-align: center; }
  .motto-band {
    min-height: auto;
    padding: 28px 24px;
    background:
      radial-gradient(circle at 88% 50%, rgba(229,189,120,.2), transparent 13rem),
      linear-gradient(90deg, rgba(247,234,216,.82), #fff8ed 45%, rgba(247,234,216,.82));
  }
  .motto-band::before { display: none; }
  .motto-band p { opacity: 1; }
  .motto-band p:first-child::before {
    display: none;
    content: none;
  }
  .motto-band span { width: 86px; height: 1px; opacity: .65; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars article:nth-child(3) { border-left: 0; }
  .pillars article:nth-child(n+3) { border-top: 1px solid rgba(187,127,45,.35); padding-top: 28px; }
  .welcome-section {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 48px 24px 18px;
    text-align: center;
  }

  .welcome-copy {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .welcome-copy h2,
  .welcome-copy p:not(.script-note) {
    margin-left: auto;
    margin-right: auto;
  }
  .feature-cards, .resource-strip { grid-template-columns: 1fr; }
  .quote-section { grid-template-columns: 1fr; }
  .quote-section picture { display: none; }
  .follow-band {
    align-items: center;
    justify-content: center;
    min-height: auto;
    text-align: center;
    background:
      linear-gradient(90deg, rgba(255,250,243,.92), rgba(245,232,213,.6)),
      rgba(255,250,243,.88);
  }
  .follow-band p {
    margin-left: auto;
    margin-right: auto;
  }
  .follow-band p { opacity: 1; }
  .follow-actions a {
    background: var(--navy);
    color: white;
  }
  .follow-actions {
    position: static;
    justify-content: center;
    margin-right: 0;
    transform: none;
  }
  .site-footer {
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer-brand {
    grid-column: 1 / -1;
    align-items: center;
  }
  .site-footer .brand {
    margin-inline: auto;
  }
  .contact-link {
    justify-content: center;
  }
}

@media (min-width: 621px) and (max-width: 1100px) {
  .site-header {
    min-height: 88px;
    justify-content: flex-end;
  }

  .site-header .brand {
    width: clamp(190px, 31vw, 245px);
    min-height: 78px;
    margin-right: auto;
    opacity: 0;
    pointer-events: none;
  }

  .site-header .brand-logo {
    display: none;
    width: clamp(170px, 27vw, 230px);
    mix-blend-mode: multiply;
    opacity: .7;
    filter: saturate(.9) contrast(.9);
  }

  .site-header .brand-mark,
  .site-header .brand-text {
    display: none;
  }

  .hero {
    min-height: clamp(360px, 47.1vw, 452px);
  }

  .hero-scene::before {
    left: 20%;
    right: -8%;
    height: 110px;
  }
}

@media (max-width: 620px) {
  .site-header {
    align-items: center;
    min-height: 76px;
  }

  .site-header .brand-logo {
    display: none;
    width: 154px;
    mix-blend-mode: multiply;
    opacity: .7;
    filter: saturate(.9) contrast(.9);
  }

  .site-header .brand-mark,
  .site-header .brand-text {
    display: none;
  }

  .hero { min-height: clamp(300px, 82vw, 330px); padding-inline: 18px; }
  .hero-scene {
    background:
      linear-gradient(180deg, rgba(255,248,239,.16), rgba(255,248,239,0) 100%),
      url("assets/phase2-hires/home-hero-wide-clean-2x.png") center 66px / 178% auto no-repeat,
      linear-gradient(180deg, #f8efe4, #fff4e8 58%, #f8efe4);
  }
  h1 { font-size: clamp(4.4rem, 25vw, 6.2rem); }
  .hero-kicker, .hero-subtitle, .hero-korean { letter-spacing: .08em; }
  .hero-copy::before { inset: -36px -26px -34px; }
  .city { opacity: .4; }
  .hanok-row,
  .newengland-homes,
  .church { display: none; }
  .pavilion { left: -20px; transform: scale(.72); transform-origin: left bottom; }
  .lighthouse { right: -24px; transform: scale(.74); transform-origin: right bottom; }
  .bridge { left: 24%; width: 190px; opacity: .35; }
  .sailboat { right: 18%; transform: scale(.82); }
  .cherry { opacity: .2; }
  .pillars { grid-template-columns: 1fr; }
  .pillars article + article { border-left: 0; border-top: 1px solid rgba(187,127,45,.35); padding-top: 28px; }
  .script-note {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    font-size: .76rem;
    letter-spacing: .1em;
  }
  .welcome-copy h2 {
    max-width: 330px;
    font-size: 1.86rem;
    line-height: 1.18;
  }
  .welcome-copy p:not(.script-note) {
    max-width: 335px;
    font-size: .92rem;
    line-height: 1.68;
  }
  .feature-card { min-height: 300px; }
  .support-card { grid-template-columns: 1fr; }
  .support-card picture {
    height: 156px;
    aspect-ratio: auto;
  }
  .support-card div { padding: 14px 16px 16px; }
  .support-card-heading {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }
  .support-card-icon {
    width: 34px;
    height: 34px;
  }
  .support-card h3 {
    font-size: 1rem;
    line-height: 1.18;
  }
  .support-card p {
    font-size: .86rem;
  }
  .follow-band {
    align-items: center;
    flex-direction: column;
  }
  .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-bottom: 92px;
    text-align: center;
  }
  .site-footer > div {
    width: min(100%, 430px);
    justify-self: center;
  }
  .site-footer > div:last-of-type {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .site-footer > div:last-of-type h2 {
    width: 100%;
    text-align: center;
  }
  .site-footer > div:last-of-type .contact-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .copyright {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: max-content;
  }
}

@media (min-width: 621px) and (max-width: 1180px) {
  .site-footer > div:nth-of-type(4) {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    width: min(100%, 460px);
    margin-inline: auto;
    text-align: center;
  }

  .site-footer > div:nth-of-type(4) h2 {
    width: 100%;
    text-align: center;
  }

  .site-footer > div:nth-of-type(4) .contact-link {
    display: flex !important;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Desktop-only footer alignment fix: keep tablet/mobile centered, move Contact Us to far right on desktop */
@media (min-width: 1181px) {
  .site-footer {
    grid-template-columns: 1.25fr .7fr 1fr minmax(300px, 430px);
    justify-items: start;
  }

  .site-footer > div:nth-of-type(2) {
    grid-column: 2;
  }

  .site-footer > div:nth-of-type(3) {
    grid-column: 3;
  }

  .site-footer > div:nth-of-type(4) {
    grid-column: 4;
    justify-self: end;
    align-self: start;
    width: min(100%, 430px);
    max-width: 430px;
    margin-left: auto;
    margin-right: 0;
    text-align: left;
  }

  .site-footer > div:nth-of-type(4) h2 {
    width: 100%;
    text-align: left;
  }

  .site-footer > div:nth-of-type(4) .contact-link {
    display: flex !important;
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}


/* =========================================================
   v26 targeted homepage hero/nav sharpness fix
   Removes the faint blurred nav-area underlay while preserving
   the approved homepage artwork and layout.
   ========================================================= */
.hero::before,
.hero-scene::before {
  display: none !important;
  content: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

.hero-scene {
  background:
    url("assets/phase2-hires/home-hero-wide-clean-2x.png") center top / 100% auto no-repeat,
    linear-gradient(180deg, #f8efe4, #fff4e8 58%, #f8efe4) !important;
}

@media (max-width: 1024px) {
  .hero-scene {
    background:
      url("assets/phase2-hires/home-hero-wide-clean-2x.png") center top / min(100%, 1024px) auto no-repeat,
      linear-gradient(180deg, #f8efe4, #fff4e8 58%, #f8efe4) !important;
  }
}

@media (max-width: 620px) {
  .hero-scene {
    background:
      url("assets/phase2-hires/home-hero-wide-clean-2x.png") center 66px / 178% auto no-repeat,
      linear-gradient(180deg, #f8efe4, #fff4e8 58%, #f8efe4) !important;
  }
}


/* =========================================================
   v30 homepage hero clean-image fix
   Replaces the artifact-containing homepage hero asset with the
   clean hero artwork and removes all soft/blurred overlay layers
   around the nav/hero area.
   ========================================================= */
body.homepage .hero::before,
body.homepage .hero::after,
body.homepage .hero-scene::before,
body.homepage .hero-scene::after,
body.homepage .hero-copy::before {
  display: none !important;
  content: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.homepage .hero,
body.homepage .hero-scene,
body.homepage .site-header,
body.homepage .primary-nav,
body.homepage .primary-nav a,
body.homepage .dropdown-toggle {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.homepage .hero-scene {
  background-image:
    url("assets/phase2-hires/home-hero-wide-clean-2x.png"),
    linear-gradient(180deg, #f8efe4, #fff4e8 58%, #f8efe4) !important;
  background-position: center top, center center !important;
  background-size: 100% auto, cover !important;
  background-repeat: no-repeat, no-repeat !important;
}

@media (max-width: 1024px) {
  body.homepage .hero-scene {
    background-size: min(100%, 1024px) auto, cover !important;
  }
}

@media (max-width: 620px) {
  body.homepage .hero-scene {
    background-position: center 66px, center center !important;
    background-size: 178% auto, cover !important;
  }
}

/* =========================================================
   v31 homepage hero/nav correction
   v30 used a clean hero art asset, but the built-in Haneul
   lettering in that asset sat too high and overlapped the
   absolute navigation bar. This keeps the clean asset, restores
   the real header logo, and positions the hero artwork below
   the nav so no background lettering sits behind menu items.
   ========================================================= */
body.homepage .site-header .brand-logo {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

body.homepage .hero-copy {
  display: none !important;
}

body.homepage .hero-scene {
  background-image:
    url("assets/phase2-hires/home-hero-wide-clean-2x.png"),
    linear-gradient(180deg, #f8efe4, #fff4e8 58%, #f8efe4) !important;
  background-position: center 112px, center center !important;
  background-size: 100% auto, cover !important;
  background-repeat: no-repeat, no-repeat !important;
}

@media (min-width: 1500px) {
  body.homepage .hero-scene {
    background-position: center 118px, center center !important;
  }
}

@media (max-width: 1024px) {
  body.homepage .hero-scene {
    background-position: center 92px, center center !important;
    background-size: min(100%, 1024px) auto, cover !important;
  }
}

@media (max-width: 620px) {
  body.homepage .hero-scene {
    background-position: center 80px, center center !important;
    background-size: 178% auto, cover !important;
  }
}

/* =========================================================
   v32 homepage header cleanup
   Removes the duplicate/overlay homepage logo and returns the
   homepage navigation to a compact height. Homepage only.
   ========================================================= */
body.homepage .site-header {
  min-height: 76px !important;
  padding: 0 !important;
  align-items: center !important;
}

body.homepage .site-header .brand {
  width: 120px !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.homepage .site-header .brand-logo,
body.homepage .site-header .brand-mark,
body.homepage .site-header .brand-text {
  display: none !important;
  opacity: 0 !important;
}

body.homepage .primary-nav {
  align-items: center !important;
}

@media (min-width: 1101px) and (max-width: 1180px) {
  body.homepage .site-header {
    min-height: 72px !important;
  }

  body.homepage .site-header .brand {
    width: 96px !important;
  }
}

@media (max-width: 1100px) {
  body.homepage .site-header {
    min-height: 68px !important;
    padding: 8px 0 !important;
  }

  body.homepage .site-header .brand {
    width: 1px !important;
    min-height: 0 !important;
    opacity: 0 !important;
  }
}

@media (max-width: 620px) {
  body.homepage .site-header {
    min-height: 64px !important;
    padding: 6px 0 !important;
  }
}


/* =========================================================
   v33 homepage compact header + real social icons
   Homepage-only cleanup: significantly reduces the nav height
   and renders Facebook/Instagram as actual SVG logos.
   ========================================================= */
body.homepage .site-header {
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  gap: 8px !important;
  align-items: center !important;
}

body.homepage .site-header .brand {
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.homepage .primary-nav {
  gap: clamp(12px, 1.25vw, 20px) !important;
  font-size: clamp(12px, 1.05vw, 14px) !important;
  transform: translate(0, 0) !important;
}

body.homepage .primary-nav a,
body.homepage .dropdown-toggle {
  min-height: 30px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

body.homepage .nav-dropdown {
  padding-bottom: 6px !important;
  margin-bottom: -6px !important;
}

body.homepage .social-link {
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--navy) !important;
  color: #fffaf2 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body.homepage .social-link::before,
body.homepage .social-link::after {
  display: none !important;
  content: none !important;
}

body.homepage .social-svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  fill: currentColor;
  color: currentColor;
}

body.homepage .follow-actions a {
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.homepage .follow-actions .social-svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor;
}

@media (min-width: 1101px) and (max-width: 1180px) {
  body.homepage .site-header {
    min-height: 50px !important;
    height: 50px !important;
  }
  body.homepage .primary-nav {
    gap: clamp(8px, .9vw, 12px) !important;
    font-size: clamp(11px, 1vw, 12.5px) !important;
  }
}

@media (max-width: 1100px) {
  body.homepage .site-header {
    min-height: 58px !important;
    height: auto !important;
    padding: 6px 0 !important;
  }
  body.homepage .site-header .brand {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.homepage .primary-nav {
    top: 64px !important;
    transform: none !important;
  }
}

@media (max-width: 620px) {
  body.homepage .site-header {
    min-height: 54px !important;
    padding: 5px 0 !important;
  }
  body.homepage .primary-nav {
    top: 60px !important;
  }
}

/* =========================================================
   v34 homepage header height + centerline correction
   Homepage only: keeps the compact v33 no-logo header, then
   tightens the vertical rhythm for links and social icons.
   ========================================================= */
body.homepage .site-header {
  min-height: 46px !important;
  height: 46px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  gap: 8px !important;
}

body.homepage .site-header .brand {
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.homepage .site-header .brand-logo,
body.homepage .site-header .brand-mark,
body.homepage .site-header .brand-text {
  display: none !important;
  opacity: 0 !important;
}

body.homepage .primary-nav {
  align-items: center !important;
  align-self: center !important;
  line-height: 1 !important;
  transform: none !important;
}

body.homepage .primary-nav > a,
body.homepage .dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

body.homepage .nav-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body.homepage .social-link {
  flex: 0 0 24px !important;
  align-self: center !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  line-height: 0 !important;
}

body.homepage .social-svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
}

@media (min-width: 1101px) and (max-width: 1180px) {
  body.homepage .site-header {
    min-height: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 1100px) {
  body.homepage .site-header {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 !important;
  }

  body.homepage .primary-nav {
    top: 60px !important;
  }
}

@media (max-width: 620px) {
  body.homepage .site-header {
    min-height: 50px !important;
    height: 50px !important;
  }

  body.homepage .primary-nav {
    top: 56px !important;
  }
}

/* =========================================================
   v35 homepage nav final compacting — no homepage logo
   Targeted homepage-only override. Keeps the homepage brand/logo
   hidden, centers the navigation, and reduces the visible nav height.
   ========================================================= */
body.homepage .site-header {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  margin-top: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
}

body.homepage .site-header .brand,
body.homepage .site-header .brand-logo,
body.homepage .site-header .brand-mark,
body.homepage .site-header .brand-text {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.homepage .primary-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
  font-size: clamp(11px, .95vw, 13px) !important;
  line-height: 1 !important;
  transform: none !important;
  margin: 0 auto !important;
}

body.homepage .primary-nav > a,
body.homepage .dropdown-toggle {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 1px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

body.homepage .nav-dropdown {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.homepage .dropdown-menu {
  top: calc(100% + 10px) !important;
}

body.homepage .social-link {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex: 0 0 22px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

body.homepage .social-svg {
  width: 13px !important;
  height: 13px !important;
}

@media (max-width: 1100px) {
  body.homepage .site-header {
    min-height: 50px !important;
    height: 50px !important;
    margin-top: 8px !important;
    justify-content: space-between !important;
  }

  body.homepage .site-header .brand {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.homepage .site-header .brand-logo {
    display: block !important;
    width: 120px !important;
    height: auto !important;
    opacity: 1 !important;
  }

  body.homepage .primary-nav {
    top: 58px !important;
  }
}

@media (max-width: 620px) {
  body.homepage .site-header {
    min-height: 48px !important;
    height: 48px !important;
    margin-top: 6px !important;
  }

  body.homepage .site-header .brand-logo {
    width: 108px !important;
  }

  body.homepage .primary-nav {
    top: 54px !important;
  }
}

/* =========================================================
   v36 homepage hero gap removal
   Homepage only: removes the large blank band between the compact
   nav and the built-in Haneul hero lettering by moving the hero
   artwork up. Does not change nav links, hero asset, or other pages.
   ========================================================= */
body.homepage .hero-scene {
  background-position: center 44px, center center !important;
}

@media (min-width: 1500px) {
  body.homepage .hero-scene {
    background-position: center 46px, center center !important;
  }
}

@media (max-width: 1100px) {
  body.homepage .hero-scene {
    background-position: center 58px, center center !important;
  }
}

@media (max-width: 620px) {
  body.homepage .hero-scene {
    background-position: center 56px, center center !important;
  }
}

/* =========================================================
   v37 homepage tablet/phone navigation cleanup
   Desktop remains unchanged. On tablet/phone, hide the
   horizontal nav bar and all logo/brand elements, leaving only
   the hamburger trigger and its dropdown panel.
   ========================================================= */
@media (max-width: 1100px) {
  body.homepage .site-header {
    position: absolute !important;
    top: 8px !important;
    left: auto !important;
    right: 12px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.homepage .site-header .brand,
  body.homepage .site-header .brand-logo,
  body.homepage .site-header .brand-mark,
  body.homepage .site-header .brand-text {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.homepage .menu-toggle {
    display: block !important;
    position: relative !important;
    z-index: 1002 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    flex: 0 0 44px !important;
  }

  body.homepage .primary-nav {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: 60px !important;
    width: auto !important;
    max-width: none !important;
    display: none !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(118,83,44,.16) !important;
    border-radius: 8px !important;
    background: rgba(255,250,243,.98) !important;
    box-shadow: var(--shadow) !important;
    transform: none !important;
    z-index: 1001 !important;
  }

  body.homepage .primary-nav.is-open {
    display: grid !important;
    justify-content: stretch !important;
    gap: 4px !important;
  }

  body.homepage .primary-nav a,
  body.homepage .dropdown-toggle {
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 10px 12px !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 620px) {
  body.homepage .site-header {
    top: 6px !important;
    right: 10px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  body.homepage .primary-nav {
    top: 56px !important;
  }
}

/* =========================================================
   v38 homepage desktop hero-to-motto spacing cleanup
   Desktop only: tightens the large empty gap between the homepage
   hero and the motto band without changing tablet/phone spacing.
   ========================================================= */
@media (min-width: 1101px) {
  body.homepage .hero {
    min-height: clamp(420px, 39vw, 620px) !important;
    margin-bottom: 0 !important;
  }

  body.homepage .motto-band {
    margin-top: 0 !important;
  }
}

/* Phase 1 content registry: homepage latest Founder’s Corner reflection. */
.latest-reflection-home {
  margin: clamp(30px, 5vw, 58px) auto;
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid rgba(168, 117, 42, .22);
  border-top: 5px solid var(--gold, #a8752a);
  border-radius: 18px;
  background: rgba(255, 250, 243, .82);
  box-shadow: 0 14px 30px rgba(37, 32, 25, .06);
  text-align: center;
}

.latest-reflection-home h2 {
  margin: 8px 0 10px;
  color: var(--navy, #15365a);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.12;
}

.latest-reflection-home p:not(.eyebrow) {
  margin: 0 0 18px;
  color: rgba(25, 51, 82, .72);
  font-weight: 800;
}

.latest-reflection-home a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(21, 54, 90, .08);
  color: var(--navy, #15365a);
  font-weight: 900;
  text-decoration: none;
}

.latest-reflection-home a:hover,
.latest-reflection-home a:focus-visible {
  background: var(--navy, #15365a);
  color: #fff8ec;
  outline: none;
}

/* v41 homepage content balance
   Scope: content below the hero only. Keeps hero, navigation, and footer unchanged. */
body.homepage .pillars {
  max-width: 1120px;
  margin-inline: auto;
}

body.homepage .welcome-section {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(28px, 4vw, 42px);
  padding-inline: max(28px, calc((100vw - 1120px) / 2));
  text-align: center;
}

body.homepage .welcome-copy {
  width: min(760px, 100%);
  margin-inline: auto;
}

body.homepage .welcome-copy h2,
body.homepage .welcome-copy p:not(.script-note) {
  margin-left: auto;
  margin-right: auto;
}

body.homepage .welcome-copy h2 {
  max-width: 720px;
}

body.homepage .welcome-copy p:not(.script-note) {
  max-width: 690px;
}

body.homepage .feature-cards {
  width: min(980px, 100%);
  margin-inline: auto;
}

body.homepage .latest-reflection-home {
  width: min(900px, calc(100% - 48px));
}

body.homepage .resource-strip {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
  padding-inline: 0;
  justify-content: center;
}

body.homepage .support-card {
  text-align: center;
}

body.homepage .support-card-heading {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
}

body.homepage .support-card p {
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1100px) {
  body.homepage .feature-cards {
    width: min(780px, 100%);
  }

  body.homepage .start-here-grid {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin-inline: auto;
  }

  body.homepage .explore-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.homepage .resource-strip,
  body.homepage .latest-reflection-home,
  body.homepage .start-here-section,
  body.homepage .founder-preview-section,
  body.homepage .featured-story-section,
  body.homepage .explore-haneul-section {
    width: min(100% - 44px, 900px);
  }
}

@media (max-width: 640px) {
  body.homepage .welcome-section {
    padding-inline: 24px;
  }

  body.homepage .feature-cards,
  body.homepage .resource-strip,
  body.homepage .explore-link-grid {
    width: 100%;
  }

  body.homepage .start-here-grid,
  body.homepage .explore-link-grid {
    grid-template-columns: 1fr;
  }

  body.homepage .latest-reflection-home,
  body.homepage .email-signup-section,
  body.homepage .start-here-section,
  body.homepage .founder-preview-section,
  body.homepage .featured-story-section,
  body.homepage .explore-haneul-section {
    width: min(100% - 32px, 900px);
  }

  body.homepage .support-card p {
    max-width: 100%;
  }

  body.homepage .email-signup-fields {
    grid-template-columns: 1fr;
  }

body.homepage .email-signup-button {
    width: 100%;
  }
}

/* v46 homepage cinematic hero
   Scope: homepage hero only. Uses the finished artwork without overlays. */
body.homepage .homepage-cinematic-hero {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f8efe4;
}

body.homepage .homepage-cinematic-hero img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  body.homepage .homepage-cinematic-hero {
    background: #f4eadf;
  }

  body.homepage .homepage-cinematic-hero img {
    width: 100%;
    height: auto;
  }
}