@font-face { font-family:"Gowun Dodum"; src:url("assets/GowunDodum-card.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
:root { color-scheme:light; --ink:#202722; --green:#173f32; --paper:#f8f7f1; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; word-break:keep-all; overflow-wrap:break-word; }
.wrap { width:min(1180px,92%); margin:auto; }
header { display:flex; align-items:center; justify-content:space-between; min-height:72px; border-bottom:1px solid #bec5bb; }
.brand { font:italic 900 clamp(17px,2vw,25px)/1 Arial,sans-serif; letter-spacing:-.055em; color:var(--green); }
a { color:inherit; text-underline-offset:4px; }
header a { padding:12px 0; font-size:14px; }
.hero { display:grid; grid-template-columns:1fr 1fr; background:var(--green); color:white; }
.hero-copy { padding:clamp(24px,4vw,60px); align-self:center; }
.hero img { width:100%; height:auto; align-self:center; }
h1,h2,h3,p { margin:0; }
.slogan { font-size:clamp(19px,2vw,29px); margin:16px 0 9px; letter-spacing:-.05em; }
.intro { color:#d7e4db; }
h2 { font-size:clamp(24px,3vw,39px); letter-spacing:-.06em; line-height:1.3; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; align-items:start; }
article { background:#fff; border:1px solid #d6d9cf; overflow:hidden; scroll-margin-top:16px; }
.cover { display:block; width:100%; height:auto; }
.content { padding:clamp(19px,2.6vw,34px); }
h3 { color:var(--green); font-size:16px; }
.question { font-size:clamp(21px,2vw,29px); margin:5px 0 10px; }
.desc { color:#444f48; font-size:17px; line-height:1.7; }
small { display:block; margin-top:10px; color:#546158; }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:20px; }
.cta { display:inline-flex; align-items:center; gap:16px; min-height:48px; padding:6px 0; border-radius:0; color:var(--green); background:transparent; border-bottom:1px solid currentColor; text-decoration:none; font-weight:400; }
.cta:hover { background:transparent; color:#376c49; }
:focus-visible { outline:3px solid #b37528; outline-offset:3px; }
.membership,#choose,.question,.desc,.cta,.content small { font-family:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif; }
#choose,.question { font-weight:400; letter-spacing:-.025em; }
.membership { margin:22px 0 56px; padding:clamp(24px,4vw,52px); background:var(--green); color:white; }
.membership b { letter-spacing:.08em; font-size:14px; }
.membership h1 { margin:14px 0; font-size:clamp(32px,3.8vw,52px); line-height:1.23; text-wrap:balance; font-weight:400; letter-spacing:-.04em; }
.membership p { max-width:42em; line-height:1.75; color:#dce5dc; }
.closing { margin:56px 0 36px; }










.dock { display:none; }
@media(max-width:800px) {

 .dock { display:flex; justify-content:space-evenly; position:fixed; z-index:2; inset:auto 0 0; background:#173f32; color:white; border-top:1px solid #82988b; padding-bottom:env(safe-area-inset-bottom); }
 .dock a { text-align:center; flex:1; padding:12px 4px; text-decoration:none; }
 body { padding-bottom:calc(52px + env(safe-area-inset-bottom)); }
}
@media(max-width:700px) {
 header { min-height:60px; }
 .hero,.grid { grid-template-columns:1fr; }
 .hero img { display:none; }
 .grid { gap:18px; }
 .membership { margin:14px 0 32px; }
 .closing { margin:32px 0 20px; }
}

@media(prefers-reduced-motion:no-preference) {
 html { scroll-behavior:smooth; }
 .membership-copy { animation:arrive .45s ease-out both; }
 @keyframes arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}

body { background:#faf9f4; }
.membership { color:var(--green); background:transparent; padding:clamp(38px,6vw,90px) 0; border-bottom:1px solid #a9b4aa; margin:0 0 clamp(32px,4vw,60px); }
.membership-copy { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px 6%; align-items:end; }
.membership b { grid-column:1/-1; font:650 12px/1.5 Arial,sans-serif; letter-spacing:.17em; }
.membership h1 { margin:0; font-size:clamp(36px,5.1vw,72px); line-height:1.22; }
.membership p { color:#44574c; line-height:1.85; max-width:32em; }
.grid { gap:clamp(36px,5vw,70px) clamp(24px,3.8vw,54px); align-items:stretch; }
article { display:flex; flex-direction:column; border:0; background:transparent; overflow:visible; }
.content { flex:1; display:flex; flex-direction:column; align-items:flex-start; padding:22px 0 0; }
.content h3 { font-size:14px; font-weight:600; }
.question { margin:5px 0 12px; font-size:clamp(24px,2.3vw,33px); line-height:1.4; }
.desc { max-width:32em; }
.actions { margin-top:auto; padding-top:18px; }
.cta { padding:6px 0; border-radius:0; color:var(--green); background:transparent; border-bottom:1px solid currentColor; }
.cta:hover { background:transparent; color:#376c49; }
@media(max-width:760px) {
 .membership-copy { grid-template-columns:1fr; gap:14px; }
 .membership p { margin-top:4px; }
 .content { padding-top:16px; }
}

/* Reading rhythm and responsive spacing. */
.wrap { width:min(1120px,calc(100% - 48px)); }
.membership { padding-block:clamp(40px,5vw,72px); margin-bottom:44px; }
.membership-copy { gap:20px 7%; }
.membership h1 { font-size:clamp(34px,4.7vw,64px); line-height:1.3; letter-spacing:-.035em; }
.membership p { font-size:17px; line-height:1.85; max-width:32em; }
#choose { font-size:clamp(26px,3vw,36px); line-height:1.4; }
.grid { margin-top:28px; gap:56px 40px; }
.content { padding-top:22px; }
.content h3 { font-size:15px; line-height:1.5; }
.question { font-size:clamp(25px,2.3vw,31px); line-height:1.45; margin:8px 0 14px; }
.desc { font-size:17px; line-height:1.8; max-width:29em; color:#35463c; }
.content small { margin-top:14px; font-size:14px; line-height:1.75; color:#526057; }
.actions { padding-top:24px; }
.cta { min-height:48px; font-size:17px; }
.closing { margin-top:64px; }
@media(max-width:760px) {
  .membership-copy { grid-template-columns:1fr; gap:16px; }
  .membership p { max-width:36em; }
}
@media(max-width:700px) {
  .wrap { width:calc(100% - 36px); }
  .membership { padding-block:32px; margin-bottom:32px; }
  .grid { margin-top:24px; gap:40px; }
  .content { padding-top:18px; }
  .question { margin:7px 0 12px; }
  .actions { padding-top:18px; }
  .closing { margin-top:44px; }
}

/* Full-width photography and cream editorial layout. */
header.wrap {
  position:absolute; z-index:1; top:0; left:50%; transform:translateX(-50%);
  color:white; border-bottom:0; min-height:100px;
}
.brand { color:white; font-style:normal; font-size:26px; letter-spacing:-.04em; line-height:1; }
.brand span { font-size:11px; letter-spacing:.28em; }
header nav { display:flex; gap:32px; }
header a { color:white; text-decoration:none; min-height:44px; display:flex; align-items:center; }
main.wrap { width:100%; max-width:none; }
.opening { position:relative; background:#122b21; color:white; }
.opening > img { display:block; width:100%; height:67svh; min-height:480px; max-height:850px; object-fit:cover; object-position:center 38%; }
.opening::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,25,18,.48),transparent 40%,rgba(8,25,18,.65)); pointer-events:none; }
.opening-caption { position:absolute; z-index:1; left:max(4%,calc((100% - 1120px)/2)); bottom:38px; }
.opening-caption b { font:600 13px/1.5 Arial,sans-serif; letter-spacing:.14em; }
.opening-caption p { font-family:"Gowun Dodum",sans-serif; font-size:clamp(27px,3vw,40px); line-height:1.4; margin-top:10px; }
#services,.membership { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
#services { padding-top:58px; }
.grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:28px; }
.question { font-size:23px; }
.desc { font-size:16px; }
.content small { font-size:13px; }
.membership { border-top:1px solid #b9c3b7; border-bottom:0; margin-top:70px; padding-block:56px 70px; margin-bottom:0; }
.membership h1 { font-size:clamp(32px,3.5vw,48px); }
body { background:#f5f3e8; }
@media(max-width:1000px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px; } }
@media(max-width:700px) {
 header.wrap { min-height:80px; }
 .brand { font-size:20px; }
 header nav { gap:18px; }
 header a { font-size:13px; }
 .opening > img { height:65svh; min-height:420px; object-position:45% center; }
 .opening-caption { left:18px; bottom:28px; }
 #services,.membership { width:calc(100% - 36px); }
 #services { padding-top:34px; }
 .grid { gap:40px; grid-template-columns:1fr; }
 .membership { margin-top:44px; padding-block:34px; }
}

/* One service per row; scoped below the fixed main visual. */
#services .grid {
  grid-template-columns:minmax(0,1fr);
  gap:52px;
}
#services article {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
#services .content {
  padding:0;
}
#services .question {
  font-size:clamp(25px,2.5vw,34px);
}
#services .desc {
  font-size:18px;
}
#services .content small {
  font-size:14px;
}
@media(max-width:700px) {
  #services article {
    grid-template-columns:minmax(0,1fr);
    gap:20px;
  }
  #services .grid { gap:44px; }
  #services .desc { font-size:17px; }
}

@media(min-width:701px) {
  .opening > img {
    object-position:center top;
  }
}

/* Actual service previews — scoped below the preserved opening. */
#services .grid { gap: 88px; }
#services .actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:28px; }
#services .actions .cta { flex:0 0 auto; }
#services .screen-previews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; flex:1 1 240px; min-width:0; }
#services .screen-preview { min-width:0; padding:0; border:0; border-radius:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:zoom-in; }
#services .screen-preview img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; background:#e9e7e0; border:1px solid #d4d7cc; transition:transform .18s; }
#services .screen-preview span { display:block; margin-top:8px; font-size:11px; line-height:1.5; word-break:keep-all; }
#services .screen-preview:hover img { transform:translateY(-3px); }
#services .screen-preview:focus-visible { outline:2px solid #294e3e; outline-offset:4px; }
.screen-dialog { width:min(1180px,94vw); max-width:94vw; max-height:92dvh; padding:16px; border:0; background:#f6f5ef; color:#254638; }
.screen-dialog::backdrop { background:rgb(10 20 15 / .78); }
.screen-dialog-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:12px; }
.screen-dialog-bar p { margin:0; font-size:15px; }
.screen-close { font:inherit; color:inherit; padding:10px 14px; border:1px solid #b7c0b6; background:transparent; cursor:pointer; }
.screen-dialog > img { display:block; width:100%; max-height:75dvh; object-fit:contain; }
@media(max-width:700px) { #services .grid { gap:64px; } #services .actions { gap:22px; } #services .screen-previews { flex-basis:100%; } #services .screen-preview span { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { #services .screen-preview img { transition:none; } }