/* RET-04 光之纱 — bridal gown lookbook. Cormorant Garamond (+ Noto Serif SC) + Figtree. */
.tpl-ret-04{--gut:clamp(16px,5vw,80px);--max:1240px;--pad-x:max(var(--gut),calc((100% - var(--max))/2));--r4-serif:"Cormorant Garamond","Noto Serif SC",Georgia,serif;--r4-sans:"Figtree","Noto Sans SC",system-ui,sans-serif;font-family:var(--r4-sans);font-size:16px;line-height:1.8;--dock-bg:var(--fg);--dock-fg:var(--bg)}
.tpl-ret-04 h1,.tpl-ret-04 h2,.tpl-ret-04 h3{font-family:var(--r4-serif);font-weight:500;letter-spacing:.005em}
.tpl-ret-04 #main{overflow-x:clip}

.r4-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding:20px var(--pad-x)}
.r4-brand{display:inline-flex;align-items:center;min-height:44px;font-family:var(--r4-serif);font-size:clamp(21px,2vw,27px);font-weight:500;letter-spacing:.08em;text-decoration:none;color:var(--fg);line-height:1.2}
.r4-nav{display:flex;flex-wrap:wrap;gap:0 2px;margin-right:-12px}
.r4-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;text-decoration:none;font-size:13.5px;letter-spacing:.14em;color:var(--muted);transition:color .2s}
.r4-nav a:hover{color:var(--accent)}

.tpl-ret-04 #main>section{padding:clamp(80px,10vw,150px) var(--pad-x)}
.r4-small{margin:0 0 22px;font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.tpl-ret-04 #main h2{font-size:clamp(34px,4.2vw,60px);line-height:1.2}
.r4-intro{color:var(--muted);max-width:30em;margin-top:18px}
.r4-intro p:last-child{margin:0}

.r4-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 36px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:.12em;text-align:center;transition:letter-spacing .3s}
.r4-btn:hover{letter-spacing:.16em}

/* hero: asymmetric, gown to the page edge */
.tpl-ret-04 #main>.r4-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(32px,5vw,88px);padding:0 0 0 var(--pad-x)}
.r4-hero-copy{padding:clamp(48px,6vw,96px) 0}
.r4-hero h1{font-size:clamp(46px,6vw,96px);font-weight:400;line-height:1.12;margin-bottom:28px}
.r4-sub{color:var(--muted);max-width:25em;font-size:17px;margin-bottom:38px}
.r4-sub p:last-child{margin:0}
.r4-hero-img{position:relative;margin:0;align-self:stretch;border-radius:999px 0 0 0;overflow:hidden;min-height:min(88vh,860px)}
.r4-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.tpl-ret-04 #main>.r4-hero--text{grid-template-columns:minmax(0,860px);padding:clamp(40px,6vw,96px) var(--pad-x)}

/* lace edge */
.r4-lace{position:relative;background:var(--soft)}
.r4-lace::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:radial-gradient(circle at 50% 0,var(--bg) 10px,transparent 10.5px) 0 0/24px 14px repeat-x,radial-gradient(circle,var(--bg) 2px,transparent 2.5px) 0 18px/24px 8px repeat-x}

/* about: fitting appointment */
.r4-about-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:center;max-width:1100px;margin:0 auto}
.r4-about-in--text{grid-template-columns:minmax(0,760px)}
.r4-oval{margin:0;border-radius:50%;overflow:hidden;outline:1px solid var(--accent);outline-offset:10px;margin:12px}
.r4-oval img{width:100%;aspect-ratio:3/4;object-fit:cover}
.r4-about h2{margin-bottom:36px}
.r4-steps{display:grid;gap:4px}
.r4-steps li{display:grid;grid-template-columns:56px 1fr;align-items:baseline;gap:10px;padding:14px 0;font-size:16.5px;line-height:1.6}
.r4-rn{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:30px;line-height:1;color:var(--accent)}
.r4-about-body{color:var(--muted);max-width:32em}

/* services: sticky heading + list */
.r4-services{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px clamp(40px,7vw,120px);align-items:start}
.r4-svc-head{position:sticky;top:32px}
.r4-svc{border-top:1px solid var(--line)}
.r4-svc-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:baseline;gap:8px 20px;padding:28px 0;border-bottom:1px solid var(--line)}
.r4-svc-no{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:22px;color:var(--accent)}
.r4-svc-item h3{font-size:clamp(24px,2.2vw,31px);line-height:1.3;margin-bottom:6px}
.r4-svc-desc{color:var(--muted)}
.r4-svc-desc p{margin:0}
.r4-price{margin:6px 0 0;font-family:var(--r4-serif);font-size:20px}
.r4-ask{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;letter-spacing:.12em;text-decoration:none;color:var(--accent);white-space:nowrap;transition:background .2s,color .2s}
.r4-ask:hover{background:var(--accent);color:var(--on-accent)}

/* gallery: lookbook strip */
.r4-work-head{text-align:center;max-width:720px;margin:0 auto clamp(48px,6vw,80px)}
.r4-work-head .r4-intro{margin:18px auto 0}
.r4-looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
.r4-look{margin:0}
.r4-look--1,.r4-look--3{margin-top:clamp(40px,6vw,96px)}
.r4-look-img{overflow:hidden}
.r4-look--0 .r4-look-img{border-radius:999px 999px 0 0}
.r4-look img{width:100%;aspect-ratio:3/4.6;object-fit:cover;object-position:50% 25%;transition:transform 1s ease}
.r4-look:hover img{transform:scale(1.04)}
.r4-look figcaption{margin-top:14px;font-family:var(--r4-serif);font-style:italic;font-size:18px;color:var(--muted)}

.r4-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,56px);text-align:center}
.r4-quote-list blockquote{font-family:var(--r4-serif);font-style:italic;font-size:clamp(21px,1.9vw,26px);line-height:1.55}
.r4-quote-list figcaption{margin-top:14px;font-size:12px;letter-spacing:.2em;color:var(--accent)}

/* faq */
.r4-faq{border-top:1px solid var(--line)}
.r4-faq-list{max-width:780px;margin:0 auto}
.r4-faq-list details{border-bottom:1px solid var(--line)}
.r4-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:18px 0;font-family:var(--r4-serif);font-size:21px;font-weight:500;line-height:1.45}
.r4-faq-list summary::after{float:none;margin:0;color:var(--accent);font-family:var(--r4-sans);font-weight:300;font-size:22px}
.r4-faq-list details p{margin:0;padding:0 0 24px;color:var(--muted);max-width:36em}

/* contact */
.r4-close{display:grid;justify-items:center;max-width:760px;margin:0 auto;text-align:center}
.r4-contact h2{font-size:clamp(38px,5vw,72px)!important;font-weight:400!important}
.r4-contact-intro{color:var(--muted);max-width:28em;margin:24px auto 36px}
.r4-contact-intro p:last-child{margin:0}
.r4-contact-info{display:grid;gap:14px;justify-items:center;margin-top:44px;padding-top:32px;border-top:1px solid var(--line);width:100%}
.r4-contact-list{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px}
.r4-contact-list .bc-k{color:var(--accent);opacity:1;font-size:11px}
.r4-contact-list a{display:inline-flex;align-items:center;min-height:44px}
.r4-social{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.r4-social a{min-height:44px;display:inline-flex;align-items:center;font-size:12.5px;letter-spacing:.18em;text-decoration:none;color:var(--muted)}

.r4-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:30px var(--pad-x) 40px;font-size:13px;letter-spacing:.1em;color:var(--muted);background:var(--soft)}
.r4-foot-brand{font-family:var(--r4-serif);font-size:19px;letter-spacing:.08em;color:var(--fg)}

@media (max-width:860px){
  .tpl-ret-04 #main>.r4-hero{grid-template-columns:1fr;padding:0}
  .r4-hero-copy{padding:clamp(28px,6vw,56px) var(--gut) 48px}
  .r4-hero-img{min-height:0;height:min(118vw,640px);margin-left:var(--gut);border-radius:999px 0 0 0}
  .r4-about-in{grid-template-columns:1fr;justify-items:center}
  .r4-oval{width:min(70vw,320px)}
  .r4-about-copy{width:100%}
  .r4-services{grid-template-columns:1fr}
  .r4-svc-head{position:static}
  .r4-looks{grid-template-columns:1fr 1fr}
  .r4-look--2{margin-top:0}
  .r4-look--3{margin-top:clamp(-96px,-12vw,-40px)}
}
@media (max-width:560px){
  .r4-head{justify-content:center}
  .r4-nav{justify-content:center;margin:0}
  .r4-nav a{padding:0 9px;letter-spacing:.08em}
  .r4-small{letter-spacing:.16em}
  .r4-hero h1{font-size:clamp(40px,11.5vw,52px)}
  .r4-btn{width:100%}
  .r4-svc-item{grid-template-columns:36px minmax(0,1fr)}
  .r4-ask{grid-column:2;justify-self:start;margin-top:8px}
  .r4-steps li{grid-template-columns:40px 1fr}
}