/* Final UI polish: compact header, stable form controls, visual service grid */
:root{--brand:#543a3a;--brand-soft:#765857;--line-soft:#e8dfdb;--surface-soft:#faf8f7}

/* Header */
.site-header{height:auto!important}
.header-inner{min-height:64px!important;gap:20px!important}
.brand-logo{width:28px!important;height:28px!important}
.brand-name{font-size:14px!important}
.desktop-nav{gap:24px!important}
.desktop-nav a{font-size:13px!important;line-height:20px!important;font-weight:500!important}
.header-cta{min-height:40px!important;padding:0 16px!important;border-radius:10px!important;background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important;font-size:13px!important;font-weight:700!important}
.header-cta:hover{background:#432e2e!important;color:#fff!important}
.secondary-nav .container{gap:24px!important}
.secondary-nav a{min-height:44px!important;font-size:12px!important}

@media(min-width:1280px){
  .header-inner{
    display:grid!important;
    grid-template-columns:1fr auto 1fr!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    row-gap:14px!important;
    column-gap:28px!important;
    min-height:132px!important;
    padding-top:18px!important;
    padding-bottom:14px!important;
  }
  .brand{
    grid-column:1 / -1!important;
    grid-row:1!important;
    justify-self:center!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
  }
  .brand-logo{width:40px!important;height:40px!important}
  .brand-name{display:none!important}
  .desktop-nav{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:center!important;
    margin-left:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:28px!important;
  }
  .desktop-nav a{font-size:13px!important;white-space:nowrap!important}
  .header-cta{
    grid-column:3!important;
    grid-row:2!important;
    justify-self:end!important;
    align-self:center!important;
    min-height:38px!important;
    padding-inline:15px!important;
  }
  .menu-button{display:none!important}
}

/* Form card */
.service-form-wrap{max-width:680px!important}
.service-form-wrap .reading-form{padding:28px!important;border-radius:16px!important;box-shadow:0 8px 28px rgba(84,58,58,.045)!important}
.form-page-title{margin-bottom:20px!important;padding-bottom:18px!important}
.form-page-title .flow-step-number{width:26px!important;height:26px!important;min-width:26px!important;margin-bottom:8px!important}
.form-page-title h2{font-size:18px!important;line-height:26px!important}
.form-page-title p{margin-top:5px!important;font-size:12px!important;line-height:19px!important}

.page-field-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;margin:0 0 14px!important}
.page-field-row:first-of-type{grid-template-columns:1fr!important}
.page-field-row+.page-field-row{margin-top:0!important}
.page-field-row .field{width:100%!important;max-width:none!important;margin:0!important;min-width:0!important}
.service-form-wrap>.reading-form>.field{width:100%!important;max-width:none!important;margin:0 0 14px!important}
.field-message:empty{display:none!important}
.service-form-wrap .field{gap:6px!important}
.service-form-wrap .field label{font-size:12px!important;line-height:18px!important;font-weight:700!important}
.required,.optional{font-size:10px!important;line-height:15px!important}

.service-form-wrap input:not([type="checkbox"]),
.service-form-wrap select{
  width:100%!important;
  height:44px!important;
  padding:0 13px!important;
  border:1px solid #ddd2cd!important;
  border-radius:10px!important;
  background-color:#fff!important;
  color:#2b2524!important;
  font-size:13px!important;
  line-height:20px!important;
  box-shadow:none!important;
}
.service-form-wrap select{
  padding-right:38px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23543a3a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:12px 8px!important;
}
.service-form-wrap input:not([type="checkbox"]):focus,
.service-form-wrap select:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(84,58,58,.07)!important}

.form-submit-area{grid-template-columns:minmax(0,1fr) auto!important;gap:10px 18px!important;margin-top:18px!important;padding-top:18px!important}
.form-submit-area .consent-row{display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;font-size:12px!important;line-height:18px!important}
.form-submit-area .consent-row input[type="checkbox"]{
  flex:0 0 auto!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #d5cac5!important;
  border-radius:5px!important;
  background:#fff!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.form-submit-area .consent-row input[type="checkbox"]:checked{
  border-color:var(--brand)!important;
  background-color:var(--brand)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2 5.7 9.8 11 4.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
.form-submit-area .form-status{font-size:10px!important;line-height:15px!important}
.service-form-wrap .reading-form .button-large{min-width:170px!important;min-height:44px!important;border-radius:10px!important;font-size:12px!important}

/* Home visual service cards */
.home-service-visuals{margin:72px 0!important}
.home-service-visuals .section-head{margin-bottom:24px!important}
.service-visual-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.service-visual-card{position:relative;display:flex;min-height:310px;overflow:hidden;align-items:flex-end;padding:20px;border-radius:16px;background:#f3efed center/cover no-repeat;color:#fff;isolation:isolate}
.service-visual-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(38,27,27,.82) 0%,rgba(38,27,27,.32) 52%,rgba(38,27,27,.06) 100%)}
.service-visual-card:hover{transform:translateY(-2px)}
.service-visual-card .visual-index{position:absolute;top:16px;left:16px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--brand);font-size:10px;font-weight:800}
.service-visual-card h3{margin:0 0 5px!important;color:#fff!important;font-size:19px!important;line-height:27px!important}
.service-visual-card p{margin:0!important;color:rgba(255,255,255,.78)!important;font-size:12px!important;line-height:19px!important}
.service-visual-card:nth-child(7){grid-column:span 2}

/* Signup */
.signup-main{padding:72px 0 96px}
.signup-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.signup-copy{max-width:440px}
.signup-copy h1{font-size:34px!important;line-height:44px!important;margin-bottom:12px!important}
.signup-card{padding:28px;border:1px solid var(--line-soft);border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(84,58,58,.045)}
.signup-card .field{margin-bottom:14px}
.signup-card .field label{font-size:12px;font-weight:700}
.signup-card input{width:100%;height:44px;border:1px solid #ddd2cd;border-radius:10px;padding:0 13px;font-size:13px}
.signup-card .button{width:100%;margin-top:8px}
.signup-note{margin-top:10px;font-size:11px!important;line-height:17px!important}

/* Service pages: one header only + representative image hero */
.secondary-nav{display:none!important}
.sub-hero{
  position:relative!important;
  display:flex!important;
  width:min(calc(100% - 64px),1280px)!important;
  min-height:390px!important;
  align-items:flex-end!important;
  margin:32px auto 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:20px!important;
  background-color:#543a3a!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.sub-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(35,24,24,.72) 0%,rgba(35,24,24,.36) 48%,rgba(35,24,24,.12) 100%);pointer-events:none}
.sub-hero>.container{position:relative!important;z-index:1!important;width:100%!important;margin:0!important;padding:48px!important}
.sub-hero .breadcrumb,.sub-hero .breadcrumb a{color:rgba(255,255,255,.66)!important}
.sub-hero .eyebrow{color:rgba(255,255,255,.78)!important}
.sub-hero h1{max-width:640px!important;color:#fff!important;font-size:34px!important;line-height:44px!important}
.sub-hero .sub-lead{max-width:620px!important;color:rgba(255,255,255,.78)!important}
body:has(a[aria-current="page"][href*="saju.html"]) .sub-hero{background-image:url('https://nineworksdatabase.planus253.workers.dev/cdn/test/20260907-060437-1-6ea6ea3f.webp')!important}
body:has(a[aria-current="page"][href*="ohaeng.html"]) .sub-hero{background-image:url('https://nineworksdatabase.planus253.workers.dev/cdn/test/20260907-060438-2-b3ce5dc2.webp')!important}
body:has(a[aria-current="page"][href*="fortune.html"]) .sub-hero{background-image:url('https://nineworksdatabase.planus253.workers.dev/cdn/test/20260907-060438-3-2cdbfb70.webp')!important}
body:has(a[aria-current="page"][href*="relationship.html"]) .sub-hero{background-image:url('https://nineworksdatabase.planus253.workers.dev/cdn/test/20260907-060439-4-e2399ab7.webp')!important}
body:has(a[aria-current="page"][href*="compatibility.html"]) .sub-hero{background-image:url('https://nineworksdatabase.planus253.workers.dev/cdn/test/20260907-060440-5-677398ac.webp')!important}
body:has(a[aria-current="page"][href*="work-money.html"]) .sub-hero{background-image:url('https://nineworksdatabase.planus253.workers.dev/cdn/test/20260907-060440-6-ef49b21c.webp')!important}
body:has(a[aria-current="page"][href*="archive.html"]) .sub-hero{background-image:url('https://nineworksdatabase.planus253.workers.dev/cdn/test/20260907-060441-7-9ce562e0.webp')!important}

@media(max-width:1100px){.service-visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-visual-card:nth-child(7){grid-column:auto}.signup-shell{grid-template-columns:1fr;gap:32px}}

/* Mobile navigation: true viewport overlay */
@media(max-width:1279px){
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    overflow:visible!important;
    background:#fff!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .header-inner{position:relative!important;z-index:1002!important;background:#fff!important}
  .mobile-menu[hidden]{display:none!important}
  .mobile-menu{
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    z-index:1001!important;
    width:100vw!important;
    height:calc(100dvh - 60px)!important;
    min-height:calc(100vh - 60px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    border-top:1px solid var(--line-soft)!important;
    background:#fff!important;
  }
  .mobile-menu nav{
    display:flex!important;
    width:100%!important;
    max-width:none!important;
    flex-direction:column!important;
    margin:0!important;
    padding:10px 20px 28px!important;
    background:#fff!important;
  }
  .mobile-menu a{
    display:flex!important;
    min-height:52px!important;
    align-items:center!important;
    padding:0 2px!important;
    border-bottom:1px solid #eee7e3!important;
    background:#fff!important;
    color:#2b2524!important;
    font-size:15px!important;
    line-height:22px!important;
    font-weight:500!important;
  }
  .mobile-menu a[aria-current="page"]{color:var(--brand)!important;font-weight:700!important}
  .menu-button{position:relative!important;z-index:1003!important}
  body.menu-open{overflow:hidden!important}
}

@media(max-width:767px){
  .header-inner{min-height:60px!important}
  .page-field-row{grid-template-columns:1fr!important;margin-bottom:0!important}
  .page-field-row .field{margin-bottom:12px!important}
  .form-submit-area{grid-template-columns:1fr!important}
  .service-form-wrap .reading-form .button-large{width:100%!important;min-width:0!important}
  .service-visual-grid{grid-template-columns:1fr}
  .service-visual-card{min-height:260px}
  .home-service-visuals{margin:52px 0!important}
  .signup-main{padding:52px 0 72px}
  .sub-hero{width:min(calc(100% - 32px),1280px)!important;min-height:320px!important;margin-top:16px!important;border-radius:16px!important}
  .sub-hero>.container{padding:28px 22px!important}
  .sub-hero h1{font-size:29px!important;line-height:38px!important}
}