/* ============================================================
   Icon Vins Fins — 정적 재구축 공통 스타일
   디자인 토큰: 원본 bridge-child CSS에서 추출 (STATIC_POC.md)
   navy #00205c · dark #393939 · gray #565C61 · lightgray #9F9F9F
   beige #AFA894 · input #e3e3e3 · 본문 p = Lato, 헤딩/기타 = Abel
   ============================================================ */

/* ---- 폰트 (셀프 호스팅) ---- */
@font-face{font-family:'Abel';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/abel-400.woff2') format('woff2')}
/* Lato는 셀프 호스팅하지 않음 (27차 결정 A1): 라이브는 Lato를 실제로 로드하지 않아 'Lato',sans-serif = OS sans,
   'Lato', Regular(제네릭 없음) = 브라우저 기본 세리프로 렌더된다. 그 렌더를 그대로 미러. */

:root{
  --navy:#00205c; --dark:#393939; --gray:#565C61; --lgray:#9F9F9F;
  --beige:#AFA894; --input:#e3e3e3; --btn-text:#63656A;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{font-family:'Abel',sans-serif;color:var(--dark);background:#fff;line-height:1.5;letter-spacing:1px;font-size:16px;overflow-x:clip} /* 폰트 폴백 폭 차이로 인한 미세 가로 스크롤 안전망 (라이브 동작 동일) */
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
p{font-family:'Lato',sans-serif;font-weight:400}
h1,h2,h3,h4,h5{font-weight:400}
/* ---- 콘텐츠 그리드 (라이브 Bridge 실측·CSS: ≥1500 1400 / 1100 / ≤1200 950 / ≤1000 768 / ≤768 600 / ≤600 420 / ≤480 300 / ≤350 95%) ---- */
:root{--gw:1100px}
@media(min-width:1500px){:root{--gw:1400px}}
@media(max-width:1200px){:root{--gw:950px}}
@media(max-width:1000px){:root{--gw:768px}}
@media(max-width:768px){:root{--gw:600px}}
@media(max-width:600px){:root{--gw:420px}}
@media(max-width:480px){:root{--gw:300px}}
.wrap{width:var(--gw);margin:0 auto}

/* ---- 헤더 (라이브 실측 28차: 내부 124 + navy 보더 18 = 142, 로고 221×114 @y5, 그리드 정렬;
   1001–1200 = 풀폭 + 좌우 45; ≤1000 = 모바일 로고 144×74 중앙 + 햄버거만, 내부 100 + 보더 18/12/10) ---- */
header.site{position:relative;background:#fff;z-index:50;border-bottom:18px solid var(--navy)}
@media(max-width:991.98px){header.site{border-bottom-width:12px}}
@media(max-width:767.98px){header.site{border-bottom-width:10px}}
.hwrap{width:var(--gw);height:124px;margin:0 auto;display:flex;align-items:center;position:relative}
@media(min-width:1001px) and (max-width:1200px){.hwrap{width:100%;padding:0 45px}}
.logo img{height:114px;display:block;width:auto}
.logo img.m{display:none}
.hright{margin-left:auto;display:flex;align-items:center;height:100%}
.hright .lang{font-family:'Abel',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--navy);padding:0 15px;height:100%;display:flex;align-items:center}
.hright .ig{width:52px;height:100%;display:flex;align-items:center;padding-left:15px}
.hright .ig svg{width:15px;height:16px;display:block;fill:var(--navy)}
.hright .ig:hover svg{fill:var(--dark)}
.btn-dl{background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:12px;padding:15px 30px;margin:0 15px;font-family:'Abel',sans-serif;font-size:16px;font-weight:700;line-height:21px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .1s linear}
.btn-dl:hover{background:var(--navy);color:#fff}
.burger{background:none;border:0;cursor:pointer;padding:0 0 0 8px;width:32px;height:20px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box}
.burger .line{display:block;width:24px;height:4px;background:#9d9d9d;transition:background .2s}
.burger:hover .line{background:var(--navy)}
@media(max-width:1000px){
  .hwrap{height:100px;justify-content:center}
  .logo img.d{display:none}
  .logo img.m{display:block;height:74px}
  .hright{position:absolute;right:0;top:0}
  .hright .lang,.hright .ig,.btn-dl{display:none}
}
@media(max-width:600px){.hwrap{width:420px;margin:0 0 0 max(45px, calc((100% - 420px) / 2))}}
@media(max-width:480px){.hwrap{width:calc(100% - 50px);margin:0 auto}}
@media(max-width:420px){.hwrap{width:calc(100% - 30px)}}

/* ---- 풀스크린 팝업 메뉴 (원본: popup_menu_holder rgba(191,191,191,.98)) ---- */
.popup-menu{position:fixed;inset:0;background:rgba(191,191,191,.98);z-index:90;display:none;align-items:center;justify-content:center;text-align:center}
.popup-menu.open{display:flex}
.popup-menu ul{list-style:none}
.popup-menu .social{display:table;margin:30px auto 0}
.popup-menu .social a{background:#fff;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .3s}
.popup-menu .social a svg{width:20px;height:20px;fill:var(--navy);transition:fill .3s}
.popup-menu .social a:hover{background:var(--navy)}
.popup-menu .social a:hover svg{fill:#fff}
.burger .line{transition:transform .25s,opacity .2s,background .2s}
.burger.open .line:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open .line:nth-child(2){opacity:0}
.burger.open .line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(min-width:1001px){.burger{margin-top:2px}} /* 라이브 중앙선 y61.4 @124 */

/* ---- 페이지 배너 (라이브 bridge-child CSS 그대로: min-height는 content-box → 1292 내부 배너 = 200+340+100 = 640 + 하단 18 = 658;
   버튼 있는 배너(with-button) = 150/150. 768–991: 150/70 + min 240 / 하단 12. ≤767: 60/60 + min 220 / 하단 10) ---- */
.page-banner{background:var(--navy);padding:0 0 10px;text-align:center;margin:0;overflow:hidden} /* 긴 단일 단어 h1(SUSTAINABILITY 등) 모바일 미세 오버플로 클리핑 — 라이브 동작 동일 */
@media(min-width:768px){.page-banner{padding-bottom:12px}}
@media(min-width:992px){.page-banner{padding-bottom:18px}}
#banner-home.page-banner,#banner-tnx.page-banner{margin-bottom:50px}
@media(min-width:992px){#banner-home.page-banner,#banner-tnx.page-banner{margin-bottom:100px}}
.banner-text{box-sizing:content-box;background-color:var(--dark);background-position:50% 50%;background-repeat:no-repeat;background-size:cover;min-height:220px;padding:60px 15px}
@media(min-width:768px){.banner-text{min-height:240px;padding:150px 15px 70px}.banner-text:has(.btns){padding:130px 15px 90px}}
@media(min-width:992px){.banner-text{min-height:340px;padding:200px 15px 100px}.banner-text:has(.btns){padding:150px 15px}}
/* 홈·감사·지속가능성 배너 = grid_section(본문이 그리드 폭 안): 1292 x96 w1100, 390 x45 w300 (그 외 배너는 전폭 − 15) */
#banner-home .banner-text,#banner-tnx .banner-text,#banner-sus .banner-text{padding-left:calc((100% - var(--gw)) / 2);padding-right:calc((100% - var(--gw)) / 2)}
.banner-text h1{color:#fff;font-size:48px;line-height:48px;font-family:'Abel',sans-serif;font-weight:400;letter-spacing:1px;text-transform:uppercase;margin:0;padding:0}
@media(min-width:992px){.banner-text h1{font-size:50px;line-height:50px;letter-spacing:1.5px;padding-bottom:60px}}
@media(max-width:767.98px){html[lang=en] #banner-home .banner-text h1{overflow-wrap:anywhere}} /* 29차 Gun 결정: 세리프 폴백 시 긴 단어(EXCEPTIONAL) 화면 초과 → 줄바꿈(라이브는 넘침, 의도적 차이). EN 홈 한정 — FR 홈 SPIRITUEUX·SUPÉRIEURE는 라이브도 열만 넘고 화면 안(줄바꿈 금지) — 다른 배너는 라이브처럼 .page-banner 클리핑(SUSTAINABILITY 390 한 줄) */
/* ≤991: h1 뒤 빈 공간 블록(vc_hidden-md/lg) — 내부 배너 20, 홈 30 (라이브 실측) */
@media(max-width:991.98px){.banner-text h1+p.sub{margin-top:20px}#banner-home .banner-text h1+p.sub{margin-top:30px}}
.banner-text p.sub{color:var(--lgray);font-size:20px;line-height:22.5px;letter-spacing:1px;margin:0 auto}
@media(min-width:768px){.banner-text p.sub{font-size:19.2px;line-height:21.6px}}
@media(min-width:992px){.banner-text p.sub{font-size:24px;line-height:27px}}
.banner-text:has(.btns) p.sub{margin-bottom:40px}
@media(min-width:768px){.banner-text:has(.btns) p.sub{margin-bottom:60px}}
@media(min-width:992px){.banner-text:has(.btns) p.sub{margin-bottom:80px}}
@media(max-width:991.98px){.bd{display:none}} /* 라이브 vc_hidden-xs/sm 브레이크 재현 */
/* 홈 배너 버튼 (라이브 btn-cta: 각 버튼 = 자기 열 중앙 — ≥992 [2|4|4|2]/12, 768–991 6|6, ≤767 1열; min-width 210 / 60%) */
/* 배너 버튼 (라이브 .qbutton.btn-cta / .btn-trans — 각 버튼 = 자기 VC 열(패딩 15) 안 중앙, 넘치면 시작점 정렬.
   min-width는 content-box: btn-cta ≥992 60%·≤991 210px, btn-trans 85% → calc(n% − n%×30px)로 열 패딩 보정.
   열: 홈 [lg 오프셋2|4|4, md 4|4, sm 6|6] · services/지속가능성 .c4 [md 3×4, sm 6×2] · contact .c3 [lg 4 push1|4|4 pull1, md 4×3, sm 12]) */
.banner-text .btns{display:grid;grid-template-columns:minmax(0,1fr);margin:0 -15px}
.banner-text .btns>a{box-sizing:content-box;margin:0 auto 20px;min-width:210px;padding:3px 20px 0;background:#fff;border:3px solid #fff;border-radius:12px;color:#63656A;font-family:'Abel',sans-serif;font-size:14.4px;font-weight:400;line-height:49.5px;letter-spacing:1px;text-transform:uppercase;text-align:center;cursor:pointer;transition:all .2s}
.banner-text .btns>a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.banner-text .btns>a.trans{background:transparent;color:#fff;min-width:calc(85% - 25.5px);justify-self:start;margin-left:max(15px, calc(7.5% - 10.25px));margin-right:0} /* 열 안쪽보다 넓으면(=라이브 1292·1100·390) 안쪽 시작점, 아니면 중앙 */
@media(min-width:768px){#banner-home .btns,.banner-text .btns.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:992px){
  .banner-text .btns>a{border-radius:16px;font-size:16px;line-height:55px;margin-bottom:0;min-width:calc(60% - 18px)}
  .banner-text .btns>a.trans{min-width:calc(85% - 25.5px)}
  .banner-text .btns.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .banner-text .btns.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  #banner-home .btns{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1200px){
  #banner-home .btns,.banner-text .btns.c3{grid-template-columns:repeat(12,minmax(0,1fr))}
  #banner-home .btns>:nth-child(1){grid-area:1/3/2/7}#banner-home .btns>:nth-child(2){grid-area:1/7/2/11}
  .banner-text .btns.c3>:nth-child(1){grid-area:1/2/2/6}.banner-text .btns.c3>:nth-child(2){grid-area:1/5/2/9}.banner-text .btns.c3>:nth-child(3){grid-area:1/8/2/12}
}
/* 감사 배너 구분선 (라이브 header-separator normal, 흰색) */
.banner-text .sep{width:40px;height:4px;background:#fff;margin:25px auto 50px}
@media(min-width:992px){.banner-text .sep{width:70px;height:5px;margin:45px auto 50px}}

/* ---- 공용 버튼 (qbutton 재현) ---- */
.qbutton{display:inline-block;background:#fff;border:3px solid #fff;border-radius:16px;color:var(--btn-text);font-family:'Abel',sans-serif;font-size:16px;letter-spacing:1px;line-height:55px;padding:0 34px;margin:0 10px 10px;text-transform:uppercase;cursor:pointer;transition:all .2s}
.qbutton:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.qbutton.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.qbutton.navy:hover{background:#fff;color:var(--navy)}

/* ---- 콘텐츠 섹션 공통 ---- */
/* 라이브 .padded.grid_section: 패딩 100/100 (≤991: 50/50), 폭 = 그리드 */
section.content{width:var(--gw);margin:0 auto;padding:50px 0}
@media(min-width:992px){section.content{padding:100px 0}}
section.content h2{font-size:2em;letter-spacing:.06em;text-transform:uppercase;color:var(--dark);margin-bottom:20px}
section.content h3{font-size:2em;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:20px}
section.content h4{font-size:1.35em;letter-spacing:.04em;color:var(--dark);margin:26px 0 8px}
section.content p{color:var(--gray);font-size:18px;line-height:30px;letter-spacing:1px;margin-bottom:1.5em} /* 라이브 p mb 1.5em, 텍스트 블록 마지막 p = 0 */
section.content p:last-child{margin-bottom:0}
/* about 스토리: 라이브 = 이미지 6/12(535) | 1칸 띄운 텍스트 5/12(441, 상단 60·≤991 20), 구분선 뒤 빈 공간 50(≥992) */
#our-story .two-col{row-gap:0;grid-template-columns:minmax(0,1fr)}
#our-story .two-col .img{text-align:center}
#our-story .two-col .img img{display:block;margin:0 auto} /* ≤991 적층: 이미지 원본 크기 중앙 */
@media(min-width:992px){#our-story .two-col{grid-template-columns:calc((100% + 30px) / 2 - 30px) calc((100% + 30px) * 5 / 12 - 30px);column-gap:calc((100% + 30px) / 12 + 30px);align-items:start}}
#our-story .two-col .txt{padding-top:52px} /* ≤991 적층: 이미지 요소 하단 여백 + col-text 20 (라이브 실측 52 @390·900) */
@media(min-width:992px){#our-story .two-col{padding-top:50px}#our-story .two-col .txt{padding-top:60px}}

/* 센터 섹션 타이틀 + 네이비 언더라인 (라이브 실측: 50px/50px, ls 3.2px)
   section.content h3보다 특이도 우선 필요 → 셀렉터 강화 */
.sec-title,section.content h3.sec-title,.band h3.sec-title{text-align:center;color:var(--navy);font-size:50px;line-height:50px;letter-spacing:3.2px;text-transform:uppercase;margin:0}
/* 라이브 .separator.header-separator: 40×4, 여백 25/50 (≥992: 70×5, 45/50) */
.sec-title::after{content:"";display:block;width:40px;height:4px;background:var(--navy);margin:25px auto 50px}
@media(min-width:992px){.sec-title::after{width:70px;height:5px;margin:45px auto 50px}}
.lead{text-align:center;margin:0 auto 26px}

/* 배너 앵커 버튼 (라이브 실측 = 표준 qbutton: 16px/lh55/ls1) */

/* 대시 룰 타이틀 (라이브 실측: 40px, ls 14px, lh 55px, #89898C) */

/* 풀폭 네이비/그레이 밴드 섹션 */
.band{padding:50px 0;margin:0}
@media(min-width:992px){.band{padding:100px 0}}
.band .inner{width:var(--gw);margin:0 auto}
.band-navy{background:var(--navy);color:#fff}
.band-navy .sec-title,.band-navy h3.sec-title{color:#fff}
.band-navy .sec-title::after{background:#fff}
.band-navy p{color:#fff}
/* 컨슈머 섹션 (rev) 본문 = 우측 정렬 (라이브 실측) */

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.two-col.rev>.txt{order:2}.two-col.rev>.img{order:1}
@media(max-width:820px){.two-col{grid-template-columns:minmax(0,1fr)}.two-col.rev>.txt{order:1}.two-col.rev>.img{order:2}}

/* ---- CTA 밴드 (라이브 .padded.cta-bar: 패딩 100/100·≤991 50/50, 하단 마진 100·≤767 50;
   ≥768 = 7/12 | 5/12 컬럼 — h2 우측 정렬 + margin-right 20/50, 버튼 위 15px 여백(768–991 숨김); ≤767 = 세로 중앙) ---- */
.cta-bar{background:var(--navy);margin:0 0 50px;padding:50px 0}
@media(min-width:768px){.cta-bar{margin-bottom:100px}}
@media(min-width:992px){.cta-bar{padding:100px 0}}
.cta-bar .in{width:var(--gw);margin:0 auto;text-align:center}
.cta-bar h2{color:#fff;font-size:35.2px;letter-spacing:1px;line-height:1.38462;text-transform:uppercase;text-align:center;margin:0}
.cta-bar .qbutton{display:inline-block;justify-self:start;margin:15px 0 0;background:#fff;border:3px solid #fff;border-radius:12px;color:var(--gray);font-size:16px;font-weight:400;line-height:50px;padding:0 10%}
.cta-bar .qbutton:hover{background:transparent;color:#fff;border-color:#fff}
.cta-bar .qbutton{white-space:nowrap}
@media(max-width:767.98px){.cta-bar .qbutton{white-space:normal;width:max-content;max-width:calc((100vw + 100%) / 2)}} /* 라이브 = 열을 넘어 한 줄(FR about 세리프 310) — 화면 오른쪽 끝을 넘을 때만 줄바꿈(FR news 세리프 364) */
@media(min-width:768px){
  .cta-bar .in{display:grid;grid-template-columns:calc((100% + 30px) * 7 / 12 - 30px) 1fr;column-gap:30px;align-items:start;text-align:left}
  .cta-bar h2{text-align:right;margin-right:20px}
}
@media(min-width:768px) and (max-width:991.98px){.cta-bar .qbutton{margin-top:0;font-size:14.4px;line-height:49.5px}}
@media(width:768px){.cta-bar .qbutton{font-size:16px;line-height:50px}} /* 라이브 ≤768 규칙이 768 포함 = 16/50 138×56 */
@media(min-width:768px){.cta-bar .in.w8{grid-template-columns:calc((100% + 30px) * 8 / 12 - 30px) 1fr}} /* FR about = 8/12 | 4/12 */
@media(min-width:992px){.cta-bar h2{font-size:50px;margin-right:50px}.cta-bar .qbutton{border-radius:16px;font-weight:700;line-height:55px;padding:0 5%}}

/* ---- 서비스 아이콘 그리드 (라이브 = 6열 1행) ---- */

/* ---- 위치(Locations) — 네이비 밴드 안 흰 텍스트 + 맵 임베드 ---- */

/* ---- 뉴스 ---- */
/* 라이브 Content Views 빈 상태(B15 미러): col-md-6 열, 하단 15, Abel 20/30 (≤991 16/24) */
.news-empty{color:var(--gray);font-family:'Abel',sans-serif;font-size:16px;line-height:24px;letter-spacing:1px;text-align:left;padding:0 0 15px}
@media(min-width:992px){.news-empty{font-size:20px;line-height:30px}.news-empty>div{width:calc((100% + 30px) / 2 - 30px)}}

/* ---- 인스타그램 갤러리 슬롯 ---- */
.ig-slot{max-width:1200px;margin:70px auto;padding:0 24px;text-align:center}
.ig-slot h2{font-size:1.9em;color:var(--dark);letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
.ig-grid a{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#00205c,#445885)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ig-grid a:hover img{transform:scale(1.04)}
.ig-embed{max-width:540px;margin:0 auto}
.ig-embed .instagram-media{min-width:0!important}
.ig-follow{margin-top:20px}

/* ---- 홈 콜라주 ---- */
.collage{margin:0;padding:0 0 15px;text-align:center} /* 라이브 = 풀블리드 행: 이미지 + 하단 22 + 15 (1292 행 771) */
.collage img{display:block;width:100%;height:auto;margin-bottom:22px}

/* ---- 폼(Contact) — 라이브 = 흰 배경 + 네이비 아웃라인 입력 ---- */
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---- 푸터 (라이브 실측: 링크 Abel 16px #393939 lh24 센터, h5 15px w600, h4 24px, 안내문 Abel 18px) ---- */
/* 라이브 #footer-content(grid_section): [nav 6/12 = 링크 4/4/4] [빈 2/12] [폼 4/12], 컬럼 패딩 15 → 링크 열 폭 = (그리드+30)/6.
   768–991 = 링크 3열 + 폼 전폭, ≤767 = 1열 중앙. 저작권 행 = .padded(상단 0) */
footer.site{margin:0;overflow-x:clip}
.ftop{width:calc(var(--gw) + 30px);margin:0 auto;display:flex;flex-wrap:wrap;padding:0;text-align:left}
.ftop>div{width:calc(100% / 6);padding:0 15px}
.ftop>div:last-child{width:calc(100% / 3)}
@media(max-width:991.98px){.ftop>div{width:calc(100% / 3)}.ftop>div:last-child{width:100%}.fspace{display:none}}
@media(max-width:767.98px){.ftop>div{width:100%}}
footer.site h5{color:var(--dark);font-size:15px;font-weight:600;letter-spacing:1px;line-height:1.571429;margin-bottom:22px;text-transform:uppercase;font-family:'Abel',sans-serif;text-align:left}
footer.site h4{color:var(--dark);font-size:24px;font-weight:700;letter-spacing:1px;line-height:33px;margin-bottom:15px;text-transform:none;font-family:'Abel',sans-serif;text-align:left}
.f-form{text-align:left}
/* 라이브: 링크 = p 안 inline-block(mb10) → 줄 간격 34, 마지막 줄 0 + 열 끝 빈 공간 40; nav 블록 뒤 구분선 여백(~11) */
footer.site ul{margin:0 0 40px}
footer.site li{list-style:none;margin:0;padding:0 0 10px;color:#393939;font-size:16px;line-height:24px}
footer.site li:last-child{padding-bottom:0}
@media(max-width:991.98px){.ftop>div:last-child{margin-top:11px}}
footer.site li a{color:#393939;display:inline-block;text-align:center}
footer.site li a:hover{color:var(--navy)}
/* 라이브 #footer-form: 입력 = 9/12 열(252 @1292, ≤991 전폭), 패딩 15, 반경 12, 글자 .8em; 버튼 = 높이 42(lh38 + 보더 2), 반경 8 */
.f-form input[type=email]{display:block;width:calc((100% + 30px) * .75 - 30px);background:var(--input);border:2px solid var(--input);border-radius:12px;color:var(--dark);padding:15px;font-family:'Abel',sans-serif;font-size:14.4px;line-height:16.2px;letter-spacing:1px;text-transform:uppercase;margin:0}
@media(max-width:991.98px){.f-form input[type=email]{width:100%;font-size:12.8px;line-height:14.4px}}
@media(min-width:992px){.f-form button{font-weight:700}}
.f-form input[type=email]{font-weight:700}
.f-form button{background:var(--navy);color:#fff;border:2px solid var(--navy);border-radius:8px;height:42px;line-height:38px;padding:0 30px;margin:40px 0 20px;font-family:'Abel',sans-serif;font-size:12.6px;letter-spacing:1px;cursor:pointer;text-transform:uppercase}
@media(max-width:991.98px){.f-form button{font-size:14.4px;margin-bottom:70px}}
@media(max-width:767.98px){.f-form button{display:block;margin:20px auto 101px}}
.f-form p{color:#393939;font-size:18px;line-height:27px;letter-spacing:1px;margin-bottom:30px;font-family:'Abel',sans-serif}
@media(max-width:991.98px){footer.site h4{font-size:19.2px;line-height:26.4px}.f-form p{font-size:16px;line-height:24px}}
.fbottom{color:#393939;font-family:'Abel',sans-serif;font-size:16px;line-height:24px;letter-spacing:1px;padding:0 0 50px}
@media(min-width:992px){.fbottom{padding-bottom:100px}}
.fbottom .in{width:var(--gw);margin:0 auto;text-align:left}
/* 601–629 / 769–797: 그리드+30이 뷰포트보다 넓은 구간 — 라이브는 .footer_top 패딩 24 + #footer-content −15 → 내용 x = max(9, (vw−gw)/2) (32차 실측) */
@media(min-width:601px) and (max-width:629.98px),(min-width:769px) and (max-width:797.98px){
  .ftop{margin-left:max(-6px,calc((100% - var(--gw) - 30px) / 2));margin-right:0}
  .fbottom .in{margin-left:max(9px,calc((100% - var(--gw)) / 2));margin-right:0}
}

/* FR services 구버전 레이아웃: 좌측 언더라인 타이틀이 50px (EN side=32px과 다름) */
/* Apply Now 토글: 데스크톱 700 (인라인 스타일 제거 후 CSS로) */

/* ---- 모바일 실측 교정 (2026-07-24 390px 실측; 28차: 라이브 기준 구간으로 분리 — 글자 크기 = 본문 16→20 전환점 992, 정렬 = 768) ---- */
@media(max-width:991.98px){
  section.content p,.band p{font-size:14px;line-height:24px}
  .qbutton{font-size:14.4px;line-height:49.5px;font-weight:400}
  .sec-title,section.content h3.sec-title,.band h3.sec-title{font-size:34px;line-height:34px;letter-spacing:1.2px}
}
@media(max-width:767.98px){
  .ftop{text-align:center}
  footer.site h5,footer.site h4{text-align:center}
  .f-form{text-align:center}
  .fbottom .in{text-align:center}
  html[lang=fr] .ftop>div:nth-child(1) ul,html[lang=fr] .ftop>div:nth-child(3) ul{text-align:left}
}

/* ---- 포트폴리오 페이지 (/portfolio/) — SW .pf 구조 이식, IVF 토큰 ---- */
.pf{background:#fafafa;padding-bottom:60px} /* 배너 하단 마진 0(28차) → 음수 마진 제거 */
.pf-tabs-row{background:var(--navy);padding:14px 20px 22px}
.pf-tabs{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px}
.pf-tabs button{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:25px;padding:8px 18px;font-family:'Lato',sans-serif;font-weight:700;font-size:12px;letter-spacing:1px;cursor:pointer;transition:.2s}
.pf-tabs button.on,.pf-tabs button:hover{background:#fff;color:var(--navy)}
.pf-toolbar{background:#fff;border-bottom:1px solid #eee;padding:14px 20px;position:sticky;top:0;z-index:10;box-shadow:0 1px 6px rgba(0,0,0,.05)}
.pf-twrap{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pf-twrap input[type=search]{flex:1 1 260px;min-width:0;padding:10px 14px;border:1px solid #ddd;border-radius:8px;font-family:'Lato',sans-serif;font-size:14px;background:#fafafa;color:var(--dark)}
.pf-twrap select{padding:9px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-family:'Lato',sans-serif;font-size:13px;color:var(--dark);max-width:190px;min-width:0}
.pf-clear{font-family:'Lato',sans-serif;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.pf-count{font-size:12.5px;color:#767676;margin-left:auto;white-space:nowrap;font-family:'Lato',sans-serif}
.pf-main{max-width:1180px;margin:0 auto;padding:10px 20px 30px}
.pf-country{margin:34px 0 10px}
.pf-country h2{font-family:'Abel',sans-serif;font-size:26px;color:var(--navy);letter-spacing:2px;text-transform:uppercase;border-bottom:2px solid var(--navy);padding-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}
.pf-country h2 small{font-family:'Lato',sans-serif;font-size:12px;color:#767676;letter-spacing:0}
.pf-producer{background:#fff;border:1px solid #e8e8e8;border-radius:10px;margin:16px 0;overflow-x:auto}
.pf-phead{padding:13px 18px 11px;border-bottom:1px solid #eee;background:#fdfdfd}
.pf-pname{font-family:'Lato',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--navy);text-transform:uppercase}
.pf-pregion{font-family:'Lato',sans-serif;font-size:12px;color:var(--gray);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.pf-tbd{color:#999;font-style:italic;text-transform:none}
.pf table{width:100%;border-collapse:collapse;font-size:13.2px;font-family:'Lato',sans-serif}
.pf th{font-weight:700;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#767676;text-align:left;padding:9px 10px;border-bottom:1px solid #eee}
.pf td{padding:8px 10px;border-bottom:1px solid #f3f3f3;vertical-align:top;color:var(--dark)}
.pf tr:last-child td{border-bottom:0}
.pf tr:hover td{background:#f4f6fa}
.pf .code{color:#767676;font-size:12px;font-variant-numeric:tabular-nums}
.pf .nm{font-weight:700}
.pf .price{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-lt{font-size:11px;background:#f2f2f2;border-radius:4px;padding:2px 7px;white-space:nowrap;color:#555}
.pf-cat{font-size:11px;background:#e9edf5;border-radius:4px;padding:2px 7px;white-space:nowrap;color:var(--navy)}
.pf .acc{font-size:11px;color:#767676}
.pf .acc b{color:var(--navy);font-weight:700}
.pf .note{font-size:11px;color:var(--navy);font-weight:700}
.pf-empty{text-align:center;color:#767676;padding:70px 0;font-size:15px;font-family:'Lato',sans-serif}
.pf-foot{max-width:1180px;margin:0 auto;padding:0 20px;font-size:12px;color:#767676;text-align:center;font-family:'Lato',sans-serif}
@media(max-width:768px){
  .pf th.hide-m,.pf td.hide-m{display:none}
  .pf-count{flex-basis:100%;margin-left:0}
}

/* ============================================================
   IVF contact + services page bodies (C3) — live mirror, measured 2026-10-01.
   APPLY: append this block to site/ivf/assets/css/site.css and delete the old selectors
   listed in "DELETE" at the bottom of this file (build.py does exactly that for the preview).
   Breakpoints = live: font sizes/paddings switch at 992 (Bootstrap md), column floats at 768 (sm),
   icon columns 6-up at 1200 (lg).
   ============================================================ */

/* ---- WPBakery float-grid helper (new, page-local prefix cs- : gutter 15, row −15) ---- */
.cs-row{margin:0 -15px}
.cs-row::before,.cs-row::after{content:"";display:table}
.cs-row::after{clear:both}
.cs-c{position:relative;min-height:1px;padding:0 15px} /* empty live columns keep 1px (min-height) */
@media(min-width:768px){.cs-c{float:left;width:100%}.cs-c.sm-1{width:8.33333333%}.cs-c.sm-3{width:25%}.cs-c.sm-4{width:33.33333333%}.cs-c.sm-7{width:58.33333333%}}
@media(min-width:992px){.cs-c.md-2{width:16.66666667%}.cs-c.md-3{width:25%}.cs-c.md-6{width:50%}.cs-c.md-8{width:66.66666667%}}
@media(min-width:1200px){.cs-c.lg-2{width:16.66666667%}}
.cs-sp1{height:1px}.cs-sp15{height:15px}.cs-sp40{height:40px}.cs-sp60{height:60px} /* vc_empty_space */
@media(min-width:768px) and (max-width:991.98px){.cs-hsm{display:none}} /* vc_hidden-sm */
.ct-c{text-align:center}
/* row −15 gutters are wider than the viewport at 769–797 / 601–629 (grid 768/600): live clips them with .wrapper_inner{overflow:hidden} */
#send-message,#our-locations,#for-partners,#services-included,.sv-aud{overflow-x:clip}

/* ---- contact: form (live CF7 "cf7_custom_style_2": 2/12 | 8/12 | 2/12 at ≥992, fields col-md-6) ---- */
.ct-form{padding-top:10px} /* ≤991: first field +10 (input margin 10 0), then 20 between fields */
.ct-form::after{content:"";display:table;clear:both}
.ct-f{padding:0 15px 20px}
@media(min-width:992px){.ct-form{padding-top:0}.ct-f{float:left;width:100%;padding-top:10px}.ct-f.md-6{width:50%}} /* each field block 10 + 60.2 + 20 = 90.2 */
.ct-f input,.ct-f textarea{display:block;width:100%;margin:0;padding:20px 15px;background:#fff;border:2px solid var(--navy);border-radius:16px;color:#717171;font-family:'Abel',sans-serif;font-size:11.2px;font-weight:700;line-height:12.6px;letter-spacing:1px;text-transform:uppercase;outline:0;resize:none;-webkit-appearance:none;appearance:none}
@media(min-width:992px){.ct-f input,.ct-f textarea{font-size:14.4px;line-height:16.2px}} /* input 60.2 / textarea(rows 10) 206; ≤991 56.6 / 170 */
.ct-f input:focus,.ct-f textarea:focus{color:var(--navy)}
.ct-send{clear:both;padding:20px 0;text-align:right}
/* live: submit is followed by the invisible CF7 spinner (24 + 2×24 margin) → button right edge = column right − 72 */
.ct-send .btn-send{display:inline-block;vertical-align:top;margin:0 72px 0 0;padding:0 50px;background:var(--navy);border:2px solid var(--navy);border-radius:8px;color:#fff;font-family:'Abel',sans-serif;font-size:12.6px;font-weight:400;line-height:43.3125px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
@media(min-width:992px){.ct-send .btn-send{border-radius:16px;font-weight:700}}
.ct-send .btn-send:hover{background:#fff;color:var(--navy)}
section.content .ct-send{line-height:0}
section.content .form-note{margin:20px 0 0;color:var(--gray);font-size:16px;line-height:22px;text-align:left}
.form-note:empty{display:none}

/* ---- contact: locations (live: 4 × col-sm-3 EN / 3 × col-sm-4 FR; map box = 5px #f7f7f7 frame, iframe 410 high) ---- */
.ct-map{padding:5px;background:#f7f7f7}
.ct-map iframe{display:block;width:100%;height:410px;border:0;mix-blend-mode:luminosity}
.ct-addr h4{margin:0 0 20px;color:#fff;font-family:'Lato',sans-serif;font-size:19.2px;font-weight:700;line-height:26.4px;letter-spacing:1px;text-transform:uppercase}
.ct-locs .ct-addr p{margin:0 0 1.5em;font-size:14.4px;line-height:19.2px}
.ct-locs .ct-addr p:last-child{margin-bottom:0}
@media(min-width:992px){.ct-addr h4{font-size:24px;line-height:33px}.ct-locs .ct-addr p{font-size:18px;line-height:24px}}

/* ---- contact: careers button (live .qbutton.center.btn-brown: padding 0 5% of the grid, ≤991 0 10% + radius 8) ---- */
.qbutton.ct-apply{margin:0;padding:0 5%;font-weight:700;vertical-align:top}
@media(max-width:991.98px){.qbutton.ct-apply{padding:0 10%;border-radius:8px;font-weight:400}}

/* ---- services ---- */
#for-retailers,#for-consumers{padding-bottom:0} /* live row style padding-bottom:0 (moved from the shared section) */
section.content h4.sv-rule{margin:0;padding:5px 0 0;border-top:1px dashed #89898C;border-bottom:1px dashed #89898C;color:#89898C;font-family:'Abel',sans-serif;font-size:20px;font-weight:400;line-height:27.5px;letter-spacing:4px;text-align:center;text-transform:uppercase}
@media(min-width:992px){section.content h4.sv-rule{border-top:2px dashed #565C61;border-bottom:2px dashed #565C61;font-size:40px;line-height:55px;letter-spacing:14px}}
.sv-icons{padding:50px 0} /* live inner row .padded */
@media(min-width:992px){.sv-icons{padding:100px 0}}
.sv-ico{padding-bottom:39px;text-align:center} /* live: icon_text_inner padding 18 + empty p margin 21/27 */
.sv-ih{height:111px;margin-bottom:13px}
.sv-ih img{display:inline-block;width:104px;height:104px;vertical-align:top}
section.content .sv-ico h5{margin:0;color:#89898C;font-family:'Lato',sans-serif;font-size:16px;font-weight:400;line-height:21.6px;letter-spacing:3px;text-transform:none}
@media(min-width:992px){.sv-ico{padding-bottom:45px}.sv-ih{height:112px}section.content .sv-ico h5{font-size:23px;line-height:31.05px}}
/* audience rows: image 4/12 | rule 1/12 | text 7/12 (consumers = push/pull mirrored at ≥768) */
.sv-img{text-align:right}
.sv-aud.rev .sv-img{text-align:left}
.sv-img img{display:inline-block;max-width:100%;height:auto;vertical-align:top}
.sv-line{height:3px;margin:25px 0 10px;background:var(--navy)}
@media(max-width:767.98px){.sv-line{display:none}}
section.content .sv-txt h3{margin:0;color:var(--navy);font-size:34px;line-height:34px;letter-spacing:1.2px;text-transform:uppercase}
@media(min-width:992px){section.content .sv-txt h3{font-size:50px;line-height:50px;letter-spacing:3.2px}}
@media(min-width:768px){
  .sv-aud.rev .cs-c.sm-4{left:66.66666667%}
  .sv-aud.rev .cs-c.sm-1{left:25%}
  .sv-aud.rev .cs-c.sm-7{left:-41.66666667%}
  .sv-aud.rev .sv-txt{text-align:right}
}

/* ---- 폼 검증 UI = 라이브 CF7 실측(32차): 필드 팁 14px 대문자 ls1 #c00, 좌우 10, 줄높이 30(≥992)/24, contact는 입력 아래 10;
   요약 박스 Abel 16/22 ls1 흰 글자 #f1c40f(오류)/#1abc9c(성공) 패딩 10 10 10 30 r8 위아래 20, FA f12a 16px left 10 top 10 ---- */
.fld-tip{display:block;margin:10px 10px 0;font-family:'Lato',sans-serif;font-size:14px;line-height:24px;font-weight:400;letter-spacing:1px;text-transform:uppercase;text-align:left;color:#c00}
.f-form .fld-tip{margin-top:0;font-family:'Abel',sans-serif;text-align:inherit}
@media(min-width:992px){.fld-tip{line-height:30px}.f-form .fld-tip{line-height:27px}}
.form-out{position:relative;clear:both;margin:20px 0;padding:10px 10px 10px 30px;border-radius:8px;background:#f1c40f;color:#fff;font-family:'Abel',sans-serif;font-size:16px;line-height:22px;font-weight:400;letter-spacing:1px;text-transform:none;text-align:left}
.form-out[hidden]{display:none}
.form-out.ok{background:#1abc9c}
.form-out svg{position:absolute;left:10px;top:13px;width:5.71px;height:16px;fill:#fff}
/* 푸터: 버튼 아래 여백(20/70/101)은 폼 밖 간격 역할 → 박스는 버튼 바로 아래 20에 오도록 당김 */
.f-form .form-out{margin:0 0 20px}
@media(max-width:991.98px){.f-form .form-out{margin:-50px 0 70px}}
@media(min-width:992px){.f-form .fld-tip{width:calc((100% + 30px) * .75 - 50px)}.f-form .form-out{width:calc((100% + 30px) * .75 - 30px)}} /* 라이브: 팁·박스 = 입력 폭(252) 기준 */

/* ============================================================
   IVF sustainability + partners page bodies (C3) — live mirror, measured 2026-10-01.
   Spec = phaseB/specs/ivf-sustainability-partners/SPEC.md (applied by tools/apply.py).
   ============================================================ */

/* ---- vc_col-sm-N mirror: floats ≥768, stacked ≤767 (empty column = 1px like live), column padding 0 15, inner row −15 ---- */
.sp-in{margin:0 -15px}
.sp-in::after,.sus-ibr::after{content:"";display:table;clear:both}
.sp-c{display:flow-root;min-height:1px;padding:0 15px}
.sp-c.p0{padding:0}
@media(min-width:768px){
  .sp-c{float:left}
  .sp-2{width:16.66666667%}.sp-3{width:25%}.sp-4{width:33.33333333%}.sp-6{width:50%}.sp-8{width:66.66666667%}.sp-9{width:75%}
}

/* ================= sustainability (live rows: .padded 100/100, ≤991 50/50; grid = --gw) =================
   R1 environment · R2 initiatives (#fafafa) · R3 offset (navy) · R4 projects · R5 community (#fafafa) · R6 gallery (navy, +480 below) */
.sus-row{padding:50px 0;overflow-x:clip} /* clip = live .wrapper_inner overflow:hidden (−15 rows at 601–629/769–797, icon row overhang at 1001–1079) */
@media(min-width:992px){.sus-row{padding:100px 0}}
.sus-grey{background:#fafafa}
.sus-navy{background:var(--navy)}
.sus-navy .sec-title{color:#fff}
.sus-navy .sec-title::after{background:#fff}
.sus-sp32{height:32px}
.sus-sp50{height:50px}
.sus-px{height:1px} /* live R4: trailing empty vc_col-sm-12 (min-height 1px) */
/* text columns: p 18/30 (≤991 14/24) #565C61 mb 1.5em (last 0); h4 = 'Lato' 24/30 300 mb20 */
.sus-txt p{color:var(--gray);font-size:18px;line-height:30px;letter-spacing:1px;margin:0 0 1.5em}
.sus-txt p:last-child{margin-bottom:0}
.sus-txt h4{font-family:'Lato' !important;font-weight:300;font-size:24px;line-height:30px;letter-spacing:1px;text-transform:none;color:var(--gray);margin:0 0 20px}
.sus-sub{margin-top:40px;padding-top:40px;border-top:1px dashed #80878D} /* subheader-dashed-top */
@media(max-width:991.98px){.sus-txt p{font-size:14px;line-height:24px}}
/* logos: 3|3|3|3, image = min(natural 194, column inner width), centred */
.sus-logos img{display:block;margin:0 auto;max-width:100%;height:auto}
/* initiatives: 4|8. h3 Abel 24/30 700 uppercase ls 3.2 (≤991 1.2); check = 27 circle navy + FA check 18; p 15/27 pl38 (≤768: lh37 pl45) */
.sus-ini{font-family:'Abel' !important;font-weight:700;font-size:24px;line-height:30px;letter-spacing:3.2px;text-transform:uppercase;color:var(--gray);text-align:left;margin:0}
.sus-chk{margin-bottom:21px}
.sus-chk i{float:left;position:relative;width:27px;height:27px;border-radius:36px;background:var(--navy)}
.sus-chk svg{position:absolute;left:4.5px;top:4.5px;width:18px;height:18px;fill:#fff}
.sus-chk p{position:relative;font-size:15px;line-height:27px;letter-spacing:1px;color:#303030;padding-left:38px;margin:0}
@media(max-width:768px){.sus-chk p{line-height:37px;padding-left:45px}}
/* offset equation: 2|3|2|3|2 — #text_medium column has inner padding 0 */
.sus-eqn h3{font-family:'Lato' !important;font-weight:300;letter-spacing:3.2px;color:#fff;margin:0}
.sus-med h3{font-size:58px;line-height:60px;text-transform:none;text-align:left}
.sus-eq h3{font-size:46px;line-height:50px;text-transform:uppercase;text-align:center}
.sus-big h3{font-size:100px;line-height:50px;text-transform:uppercase;text-align:left;margin-bottom:20px}
.sus-big h3.sm{font-size:40px;line-height:50px;text-transform:capitalize}
/* header-dashed-top: 1px dashed + 80/80; h3 Abel 24/30 w300 uppercase ls1 centre */
.sus-dash{padding:80px 0;border-top:1px dashed #80878D;text-align:center}
.sus-dash h3{font-family:'Abel';font-weight:300;font-size:24px;line-height:30px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin:0}
@media(max-width:991.98px){.sus-ini,.sus-eqn h3{letter-spacing:1.2px}}
/* box_icon rows: margin 0 6% at ≥992 only. Offset row = fixed-width grid inside (starts at the 6% edge, overflows right like live);
   community row = plain 50|50 without the −15 row margin (so it is inset by the 15 column padding) */
@media(min-width:992px){.sus-ib{margin:0 6%}}
/* q_icon_with_title: icon floats (small 52 / large 104 / very_large 130), text padding-left 72 / 122 / 150, inner 10 0; p mb 36 */
.qi{display:flow-root;text-align:left}
.qi-h{float:left;width:52px}
.qi-h img{display:block;width:100%;height:auto}
.qi.l .qi-h{width:104px}
.qi.xl .qi-h{width:130px}
.qi-t{padding:10px 0 10px 72px}
.qi.l .qi-t{padding-left:122px}
.qi.xl .qi-t{padding-left:150px}
.qi h5{font-family:'Lato';font-weight:300;font-size:24px;line-height:30px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin:0}
.qi.l h5{margin-bottom:8.4px}
.qi p{font-family:'Lato';font-weight:300;font-size:24px;line-height:30px;letter-spacing:1px;color:#fff;margin:0 0 36px}
.sus-grey .qi h5{color:#262626}
.sus-grey .qi p{color:#000}
/* gallery: section margin-bottom 480; carousel column height 200 / −100 (≥992: 400 / −200) → carousel hangs out of the navy band */
.sus-gal{margin-bottom:480px}
.sus-gal>.wrap{display:flow-root}
.gal-box{height:200px;margin-bottom:-100px}
@media(min-width:992px){.gal-box{height:400px;margin-bottom:-200px}}
/* carousel-slider (Owl) mirror: width = grid, item = (W+10)/n − 10, gap 10, 3:4, dots mt10 (row 30 / ≤991 25), arrows 48 outside, hover only */
.gcar{position:relative}
.gcar-outer{overflow:hidden;touch-action:pan-y}
.gcar-stage{display:flex;will-change:transform}
.gcar-item{flex:0 0 auto;margin-right:10px}
.gcar-item a{display:block;cursor:pointer}
.gcar-item img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.gcar-nav button{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;padding:0;border:0;background:none;color:#80878D;opacity:0;cursor:pointer;transition:all .3s ease-in-out}
.gcar-nav svg{display:block;width:48px;height:48px;fill:currentColor}
.gcar-prev{left:-48px}.gcar-next{right:-48px}
.gcar:hover .gcar-nav button{opacity:1}
.gcar-nav button:hover{color:var(--navy)}
.gcar-dots{margin-top:10px;height:25px;display:flex;justify-content:center;align-items:flex-start}
@media(min-width:992px){.gcar-dots{height:30px;padding-top:4px}}
.gcar-dots button{width:26px;height:18px;padding:0;border:0;background:none;cursor:pointer}
.gcar-dots span{display:block;width:10px;height:10px;margin:4px 8px;border-radius:9999px;background:#80878D;transition:opacity .2s ease}
.gcar-dots button.active span,.gcar-dots button:hover span{background:var(--navy)}
/* lightbox (magnific-popup mirror): overlay rgb(11,11,11) .8, image 40 top/bottom, × full image width right-aligned, arrows 90×110 (≤900: ×.75, side padding 6), counter hidden */
html.glb-on{overflow:hidden}
.glb{position:fixed;inset:0;z-index:1000;background:rgba(11,11,11,.8);display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:zoom-out}
.glb[hidden]{display:none}
.glb-fig{position:relative;padding:40px 0;cursor:pointer}
.glb-fig img{display:block;max-width:100%;max-height:calc(100vh - 80px);width:auto;height:auto;margin:0 auto}
.glb-x{position:absolute;top:0;right:-6px;width:100%;height:44px;text-align:right;padding:0 6px 0 0;border:0;background:none;color:#fff;font:28px/44px Arial,Baskerville,monospace;letter-spacing:0;opacity:.65;cursor:zoom-out}
.glb-x:hover{opacity:1}
.glb-cnt{display:none}
.glb-a{position:absolute;top:50%;margin-top:-55px;width:90px;height:110px;border:0;background:none;opacity:.65;cursor:pointer}
.glb-a::before,.glb-a::after{content:"";display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent}
.glb-a::after{border-top-width:13px;border-bottom-width:13px;top:8px}
.glb-a::before{border-top-width:21px;border-bottom-width:21px;opacity:.7}
.glb-l{left:0}.glb-l::after{border-right:17px solid #fff;margin-left:31px}.glb-l::before{margin-left:25px;border-right:27px solid #3f3f3f}
.glb-r{right:0}.glb-r::after{border-left:17px solid #fff;margin-left:39px}.glb-r::before{border-left:27px solid #3f3f3f}
.glb-a:hover{opacity:1}
@media(max-width:900px){.glb{padding:0 6px}.glb-a{transform:scale(.75)}.glb-l{transform-origin:0 50%}.glb-r{transform-origin:100% 50%}}

/* ================= partners (live: 100 spacer · filter row 9|3 · 100 spacer · results · 100 spacer · CTA) ================= */
.pt-sp{height:100px}
.pt-sp20{height:20px}
.pt-row{overflow-x:clip} /* −15 rows are wider than the viewport at 601–629 / 769–797 */
/* search input / selects: 2px navy, radius 8 (≥992 16), Abel .9em/1.4 w400 (≥992 .75em w700). Select sits in a <p> (18px ≥992 / 14px) */
#search_title{display:block;width:100%;border:2px solid var(--navy);border-radius:8px;background:#fff;color:var(--gray);font:400 14.4px/20.16px 'Abel',sans-serif;letter-spacing:normal;padding:15px 20px;margin:0}
.pt-sel{appearance:none;-webkit-appearance:none;display:block;width:100%;background:#fff url('/assets/img/caret-down.png') 95% 50% no-repeat;border:2px solid var(--navy);border-radius:8px;color:var(--gray);cursor:pointer;font:400 12.6px/17.64px 'Abel',sans-serif;letter-spacing:1px;padding:20px 15px;text-transform:uppercase;margin:0}
.pt-sel:disabled{opacity:.7}
/* RESET / SEARCH: display table, right aligned, ≤767 full width; ≥768 width 170 radius 16 font .75em */
#search_reset,#search_submit{display:table;box-sizing:border-box;margin:0 0 20px auto;min-width:100%;width:auto;padding:15px 20px;border-radius:8px;cursor:pointer;font-family:'Abel',sans-serif;font-size:14.4px;font-weight:700;line-height:20.16px;letter-spacing:1px;text-align:center;transition:all .3s}
#search_reset{border:2px solid var(--navy);background:#fff;color:var(--gray)}
#search_reset:hover{background:var(--navy);color:#fff}
#search_submit{border:2px solid var(--navy);background:var(--navy);color:#fff}
#search_submit:hover{background:#fff;color:var(--navy)}
@media(min-width:768px){#search_reset,#search_submit{min-width:150px;width:170px;border-radius:16px;font-size:12px;line-height:16.8px}}
@media(min-width:992px){
  #search_title{border-radius:16px;font:700 15px/21px 'Abel',sans-serif}
  .pt-sel{border-radius:16px;font:700 13.5px/18.9px 'Abel',sans-serif}
  #search_reset,#search_submit{font-size:15px;line-height:21px}
}
/* results: country heading + rows of 3 cards (vc_col-sm-4; each row clears → row height = tallest card) */
.country-name{border-bottom:1px dashed #707070;color:var(--navy);font-family:'Lato',sans-serif;font-size:33.6px;font-weight:400;letter-spacing:2px;line-height:49.6px;text-transform:uppercase;text-align:left;margin:0 0 30px;padding:0 0 5px}
.pt-card{list-style:none;display:block;margin:0 0 30px;padding:0;width:100%}
.pt-card>li{display:block;text-align:center}
.pt-card>li:first-child{padding:0 0 15px}
.pt-card>li:first-child>a{display:table;margin:0 auto;width:200px}
.pt-card>li:first-child>a>img{display:block;width:100%;height:auto}
.pt-card .pt-name{display:none} /* live: .partner-list-name{display:none} */
.pt-meta,.pt-web{font-family:'Lato', Regular;font-size:12.8px;line-height:25.6px;letter-spacing:1px;text-transform:uppercase;color:var(--gray)}
.pt-meta span{color:#63656A;font-family:'Abel',sans-serif}
.pt-web a{color:#303030;transition:all .3s}
.pt-web a:hover{color:var(--navy)}
.pt-none{font:700 16px/24px 'Lato',sans-serif;letter-spacing:1.2px;text-align:center;text-transform:uppercase;color:var(--navy);margin:0}
.pt-none svg{display:inline-block;width:1em;height:1em;vertical-align:-.14em;fill:currentColor}
@media(min-width:992px){
  .country-name{font-size:42px;line-height:62px}
  .pt-meta,.pt-web{font-size:16px;line-height:32px}
  .pt-none{font-size:20px;line-height:30px;letter-spacing:3.2px}
}

/* ============================================================
   IVF partner detail pages (/partners/<slug>/, /fr/partners/<slug>/ — 235 pages) — live mirror, measured 2026-10-01.
   Spec = phaseB/specs/ivf-partner-detail/SPEC.md (appended by apply.py). Everything is scoped to #partner-details-area / .pd-*;
   no existing rule is changed. Reused as-is: .wrap, .pt-sp (100px spacer), .cta-bar, img{max-width:100%;height:auto}.
   Live rules mirrored from bridge-child/style.css ("Partners' Details Page"): em sizes resolve against the live body
   font-size 16px (≥992: 20px) / line-height 1.5em, so the card carries those two values itself.
   'Lato' is written literally (not loaded on live → OS sans); never self-host Lato.
   ============================================================ */
#partner-details-area{display:flow-root;padding:30px 20px;margin:0 0 60px;box-shadow:0 10px 20px rgba(0,0,0,.15);color:#565C61;font-size:16px;line-height:24px}
@media(min-width:768px){#partner-details-area{padding:40px 30px}}
@media(min-width:992px){#partner-details-area{padding:40px;font-size:20px;line-height:30px}}
/* columns = live vc_col-md-3 | vc_col-md-9 [ vc_col-md-6 (inline margin-bottom 40) | vc_col-md-5 push-1 ]: floats at ≥992 only, column padding 0 15, empty column keeps 1px */
.pd-c{position:relative;min-height:1px;padding:0 15px}
.pd-c::before,.pd-c::after,.pd-main::after{content:"";display:table} /* live vc_column-inner clearfix: keeps the social list's 20px top margin inside an otherwise empty column */
.pd-c::after,.pd-main::after{clear:both}
.pd-info{margin-bottom:40px}
@media(min-width:992px){
  .pd-c{float:left}
  .pd-logo{width:25%}
  .pd-main{float:left;width:75%}
  .pd-info{width:50%}
  .pd-desc{width:41.66666667%;left:8.33333333%}
}
/* logo: top-aligned (the live centring script targets vc_col-sm-* and never matches on IVF); the inline image keeps its baseline gap */
.partner-details-logo{display:table;margin:0 auto;max-width:100%}
.partner-details-title{display:none} /* live: h1 present, hidden */
/* info rows: ul flex; label Lato / value Abel, .9em/1.125em; <992 the two cells share the row 50/50 (both width 100% → flex-shrink), ≥992 30/70 */
.partner-details-info{display:flex;list-style:none;margin:0;padding:0;width:100%}
.partner-details-info::after{content:"";clear:both;display:table}
.partner-details-info>li{border-bottom:1px dashed #707070;box-sizing:border-box;color:#00205c;display:flex;float:left;font-family:'Lato',sans-serif;font-size:.9em;font-weight:400;line-height:1.125em;letter-spacing:1px;margin:0;padding:10px 0;text-transform:uppercase;width:100%}
.partner-details-info:last-child>li{border:none}
.partner-details-info>li:last-child,.partner-details-info>li>a{color:#9f9f9f;font-family:'Abel',sans-serif;padding:10px 0;transition:all .3s;width:100%}
@media(min-width:992px){
  .partner-details-info>li{width:30%}
  .partner-details-info>li:last-child,.partner-details-info>li>a{width:70%}
}
.partner-details-info>li.pd-web{width:100%} /* live: inline style on the website row */
.partner-details-info>li:hover>a{color:#00205c}
.partner-details-info>li>a[href=""]{display:none} /* empty website: link hidden, row box stays (savage-wines, shot-in-the-dark) */
/* description: p = 'Lato' 14/24 (≥992 20/30) #89898C, margin-bottom 1.5em, last child 0 */
#partner-details-area p{color:#89898C;font-size:14px;line-height:24px;letter-spacing:1px;margin:0 0 1.5em}
@media(min-width:992px){#partner-details-area p{font-size:20px;line-height:30px}}
#partner-details-area p:last-child{margin-bottom:0 !important}
.partners-social-media-links{display:table;list-style:none;margin:20px 0 0;padding:0}
.partners-social-media-links>li{display:table-cell;padding:0 5px}
.partners-social-media-links>li>a{display:block;width:36px}
.partners-social-media-links>li>a>img{display:block;width:100%}
/* BACK TO RESULTS = live .qbutton.default: padding 10% / 5% of the grid width */
.pd-back{display:inline-block;position:relative;vertical-align:top;background:#00205c;border:3px solid #00205c;border-radius:8px;color:#fff;cursor:pointer;font-family:'Abel',sans-serif;font-size:14.4px;font-weight:400;line-height:49.5px;letter-spacing:1px;padding:0 10%;text-transform:uppercase;white-space:nowrap;transition:color .1s linear,background-color .1s linear,border-color .1s linear}
@media(min-width:992px){.pd-back{border-radius:16px;font-size:16px;font-weight:700;line-height:55px;padding:0 5%}}
.pd-back:hover{background:#fff;color:#00205c}

/* ==== IVF 404 template (spec = phaseB/specs/ivf-404/SPEC.md) — every rule is scoped to .nf404; no existing rule is changed.
   Reused as-is: .cta-bar (Stay Up-to-Date band), --gw grid width, base .qbutton.
   Live stack (all widths): header → 40 → h2 (Abel 32/44.31 600 #303030, same size at every width) → 46 → bar (grid width × 4, #d5c9b1) → 51 → p → 51 → button → 36 → 83 → band.
   Live p = Lato 18/30 (≤991 14/24) #565C61; button = .qbutton.default: 14.4/49.5 700 radius 16 padding 0 5% of the grid (≤991 12.6/43.3125 400 radius 8, 0 10%), nowrap. ==== */
.nf404{width:var(--gw);margin:0 auto 83px;padding:40px 0 36px;text-align:center}
.nf404 h2{margin:0;color:#303030;font-size:32px;font-weight:600;line-height:1.384615;text-align:center;text-transform:uppercase}
.nf404 .nf-sep{display:block;height:4px;margin:46px 0 51px;background:#d5c9b1}
.nf404 p{margin:0 0 51px;color:#565C61;font-size:18px;line-height:30px}
.nf404 p.nf-btn{margin:0}
.nf404 .qbutton{margin:0;padding:0 5%;background:#00205c;border-color:#00205c;color:#fff;font-size:14.4px;font-weight:700;line-height:49.5px;white-space:nowrap;text-align:left;transition:color .1s linear,background-color .1s linear,border-color .1s linear}
.nf404 .qbutton:hover{background:#fff;border-color:#00205c;color:#00205c}
@media(max-width:991.98px){
  .nf404 p{font-size:14px;line-height:24px}
  .nf404 .qbutton{padding:0 10%;border-radius:8px;font-size:12.6px;font-weight:400;line-height:43.3125px}
}
/* >>> ivf-narrow-350 */

/* ==== ≤350px gutters (spec = phaseB/specs/ivf-narrow-350/SPEC.md, live measured 2026-10-02) — replaces the old `--gw:95%`.
   Live Bridge at ≤350: grid box (.section_inner / .container_inner) = 95% of ITS PARENT and the inner row loses its −15 margin
   (.section_inner_margin{margin:0}) while the column keeps padding 15. The parent differs by context, so the content width does too:
   - body rows (parent = −15 row, vw + 30):          0.95 × (vw + 30) − 30 = 95% − 1.5px   (320: x8.75 w302.5)   → --gw
   - home / thank-you / sustainability banner (parent = vw): 95% − 30px                    (320: x23 w274)
   - 404 (container_inner, no column):                95%                                  (320: x8 w304)
   - footer (parent = .footer_top padding 24, row −15 = vw − 18): 0.95 × (vw − 18) − 30    (320: x31.5 w256.9; .ftop = that + 30) ==== */
@media(max-width:350px){
  :root{--gw:calc(95% - 1.5px)}
  #banner-home .banner-text,#banner-tnx .banner-text,#banner-sus .banner-text{padding-left:calc(2.5% + 15px);padding-right:calc(2.5% + 15px)}
  .nf404{width:95%}
  .ftop{width:calc(95% - 17.1px)}
  .fbottom .in{width:calc(95% - 47.1px)}
  .sp-c.p0.sus-med{padding:0 2.5%} /* 라이브 중첩 95%: 320 = x2.1 w315.9 (패딩 0이면 −15 행 폭 그대로라 h3 왼쪽 6px 잘림) */
}
/* <<< ivf-narrow-350 */
/* >>> ivf-portfolio-revert */
/* ---- 팝업 메뉴 = 라이브 Bridge popup_menu 실측(2026-10-02, phaseB/specs/ivf-portfolio-revert/SPEC.md):
   holder = table 100% + 셀 세로 중앙(≥768 패딩 80/0, ≤767 상단 정렬 10/0) → 내용이 화면보다 길면 위에서부터, 아래는 잘림(라이브 outer overflow hidden).
   로고 227×108(원본 크기) 링크 + 아래 8(≥992)/7 · 구분선 20%×4(내용 2 + 보더 2) 위아래 30(≥992)/10 ·
   항목 a 24px/50(≤768: 40, 글자 span 16.8px) 굵게 1.5 대문자 흰색(현재 페이지도 흰색, hover navy) ·
   소셜 30 위 · Download Portfolio(EN/FR 모두 영어) 30 위, navy 칸 + 3px 보더 r10, 17.5/17.5(≤991: 14/14) 20/25, hover 흰 바탕+흰 보더+navy 글자.
   닫기 = 햄버거 X(흰색, 헤더가 오버레이 위 — 라이브 header z110 > popup z105; 헤더 배경·보더 투명, 로고·우측 항목 숨김) ---- */
.popup-menu{overflow:hidden}
.popup-menu.open{flex-direction:column;align-items:stretch;justify-content:flex-start}
.popup-menu .inner{margin:auto 0;padding:80px 0}
.popup-menu .mlogo{display:table;margin:0 auto 8px}
.popup-menu .mlogo img{display:block;width:227px;height:108px}
.popup-menu .spacer{box-sizing:content-box;border-bottom:2px solid #fff;display:table;height:2px;width:20%;margin:0 auto 30px}
.popup-menu .spacer.bottom{margin:30px auto 0}
.popup-menu a.mlink{display:block;font-family:'Abel',sans-serif;font-size:24px;line-height:50px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;transition:color .2s}
.popup-menu a.mlink span{display:inline-block;vertical-align:middle}   /* Bridge: a span inline-block middle → 행 51.9(≤768 41.9) */
.popup-menu a.mlink span>span{font-size:1em}
.popup-menu a.mlink:hover{color:var(--navy)}
.popup-menu .mdl{display:table;margin:30px auto 0;background:var(--navy);border:3px solid var(--navy);border-radius:10px;color:#fff;font-family:'Abel',sans-serif;font-size:17.5px;font-weight:700;line-height:17.5px;letter-spacing:1px;padding:20px 25px;text-transform:uppercase;transition:all .1s linear}
.popup-menu .mdl:hover{background:#fff;border-color:#fff;color:var(--navy)}
@media(max-width:991.98px){
  .popup-menu .mlogo{margin-bottom:7px}
  .popup-menu .spacer{margin-bottom:10px}
  .popup-menu .spacer.bottom{margin-top:10px}
  .popup-menu .mdl{font-size:14px;line-height:14px}
}
@media(max-width:768px){.popup-menu a.mlink{line-height:40px}.popup-menu a.mlink span{font-size:.7em}}
@media(max-width:767.98px){.popup-menu .inner{margin:0;padding:10px 0}}
body.menu-open header.site{z-index:95;background:transparent;border-bottom-color:transparent}
body.menu-open header.site .logo,body.menu-open .hright .lang,body.menu-open .hright .ig,body.menu-open .btn-dl{visibility:hidden}
body.menu-open .burger .line{background:#fff}
/* <<< ivf-portfolio-revert */

/* >>> ivf-portfolio-modal */
/* ---------- IVF "Download Portfolio" modal (phaseB/specs/ivf-portfolio-modal, live measured 2026-10-06) ----------
   Live #portfolio-overlay (bridge-child): fixed 100%, rgba(191,191,191,.98), z 99999; text Abel 20/30 ls 1 #565C61 (<992: 16/24 — every size below is em of this).
   Box = absolute top 50% translateY(-50%), full width. WPBakery row −15 › col 4/12 offset 4/12 (>=768) › padding 0 15  ==  content column
     (100% + 30px)/3 − 30px, centred; <768 the column is the full viewport width.
   CLOSE ✖ = white 1em, absolute top −120 right 0, hover navy (.3s). h2 = Abel 3.62em/1.125em ls 1.5 upper white centre, margin-bottom 80.
   Province box = 80% wide + padding 20 + 2px navy border (content-box), r16, white, 700 .75em/1.4em; label 15px line centred; FA caret top 18 right 10.
   List = absolute top 57 on the box's padding edge, 100% + 1px #aaa border, r10, white, rows 1.4em centred, hover #fafafa. No animation (display none → block).
   Download = display table centred, navy/white, 3px navy border, .9em/3.4375em 400 r8 padding 0 10%; >=992: .8em 700 r16 padding 0 5%; hover white/navy (.1s linear).
   Kept from the previous static modal by decision (Gun 2026-10-06): outside click closes, selection survives close, no scroll lock, no iPhone-UA branch. */
#portfolio-modal{position:fixed;top:0;left:0;width:100%;height:100%;margin:0;background:rgba(191,191,191,.98);z-index:99999;display:none;overflow:hidden auto;font-family:'Abel',sans-serif;font-size:20px;line-height:30px;letter-spacing:1px;color:#565C61;text-align:left}
#portfolio-modal.open{display:block}
#portfolio-modal .pm-in{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%)}
#portfolio-modal .pm-wrap{position:relative;width:calc((100% + 30px) / 3 - 30px);margin:0 auto}
#portfolio-modal .mclose{position:absolute;top:-120px;right:0;display:block;color:#fff;transition:color .3s}
#portfolio-modal .mclose:hover{color:#00205c}
#portfolio-modal .mclose svg{display:inline-block;box-sizing:content-box;width:.78571429em;height:1em;padding-right:1px;vertical-align:-.14285714em;fill:currentColor}
#portfolio-modal h2{font-family:'Abel',sans-serif;font-size:3.62em;font-weight:400;line-height:1.125em;letter-spacing:1.5px;text-transform:uppercase;text-align:center;color:#fff;margin:0 0 80px;padding:0}
#portfolio-modal .pm-dd{position:relative;box-sizing:content-box;width:80%;margin:0 auto 20px;padding:20px;background:#fff;border:2px solid #00205c;border-radius:16px;font:700 .75em/1.4em 'Abel',sans-serif;cursor:pointer}
#portfolio-modal .pm-sel span{display:block;width:100%;font-weight:700;line-height:15px;text-align:center}
#portfolio-modal .pm-sel svg{position:absolute;top:18px;right:10px;box-sizing:content-box;width:.57142857em;height:1em;padding-right:1px;fill:currentColor}
#portfolio-modal .pm-sel .cu,#portfolio-modal .pm-dd.open .pm-sel .cd{display:none}
#portfolio-modal .pm-dd.open .pm-sel .cu{display:inline}
#portfolio-modal .pm-sel:focus{outline:0}
#portfolio-modal .pm-sel:focus-visible,#portfolio-modal .pm-dd li:focus-visible{outline:2px solid #00205c;outline-offset:2px}
#portfolio-modal .pm-dd ul{display:none;position:absolute;top:57px;left:0;box-sizing:content-box;width:100%;margin:0;padding:0;list-style:none;text-align:center;background:#fff;border:1px solid #aaa;border-radius:10px;z-index:999;overflow:hidden}
#portfolio-modal .pm-dd.open ul{display:block}
#portfolio-modal .pm-dd li{margin:0;padding:0;list-style:none}
#portfolio-modal .pm-dd li:hover{background:#fafafa}
#portfolio-modal .qbutton{display:table;box-sizing:content-box;margin:0 auto;padding:0 10%;background:#00205c;border:3px solid #00205c;border-radius:8px;color:#fff;font-family:'Abel',sans-serif;font-size:.9em;font-weight:400;line-height:3.4375em;letter-spacing:1px;text-transform:uppercase;text-align:left;white-space:nowrap;transition:color .1s linear,background-color .1s linear,border-color .1s linear}
#portfolio-modal .qbutton:hover{background:#fff;border-color:#00205c;color:#00205c}
@media(min-width:992px){#portfolio-modal .qbutton{padding:0 5%;border-radius:16px;font-size:.8em;font-weight:700}}
@media(max-width:991.98px){#portfolio-modal{font-size:16px;line-height:24px}}
@media(max-width:767.98px){#portfolio-modal .pm-wrap{width:100%}}
/* <<< ivf-portfolio-modal */