/* INT-03 深色精品 — night-time luxury */
.tpl-int-03{
  --gut:clamp(16px,5vw,88px);
  --serif:"Cormorant Garamond","Noto Sans SC",Georgia,serif;
  --sans:"Manrope","Noto Sans SC",system-ui,sans-serif;
  --copper:color-mix(in srgb,var(--accent) 55%,transparent);
  --dock-bg:var(--soft);--dock-fg:var(--fg);
  font-family:var(--sans);font-size:16px;font-weight:400;font-synthesis-style:none;font-variant-numeric:lining-nums;
}
.tpl-int-03 main{overflow-x:clip}
.tpl-int-03 ::selection{background:var(--accent);color:var(--on-accent)}

/* ---- header ---- */
.i3-head{display:flex;align-items:center;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;padding:18px var(--gut);border-bottom:1px solid var(--line)}
.i3-head--over{position:absolute;left:0;right:0;z-index:5;border-bottom-color:color-mix(in srgb,var(--fg) 18%,transparent);color:var(--fg)}
.i3-brand{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.32em;text-transform:uppercase;text-decoration:none;min-height:44px;display:flex;align-items:center}
.i3-nav{display:flex;flex-wrap:wrap;gap:0 30px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.i3-nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;opacity:.85;transition:opacity .2s,color .2s}
.i3-nav a:hover{opacity:1;color:var(--accent)}

/* ---- hero ---- */
.i3-hero{position:relative;isolation:isolate;min-height:min(100svh,980px);display:flex;align-items:flex-end;padding:clamp(120px,16vh,180px) var(--gut) clamp(40px,7vh,80px);overflow:hidden}
.i3-hero--text{min-height:0;padding-top:clamp(64px,10vw,140px)}
.i3-hero-bg{position:absolute;inset:0;z-index:-2}
.i3-hero-bg img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.i3-hero-bg img{animation:i3-push 26s ease-out both}}
@keyframes i3-push{from{transform:scale(1.12)}to{transform:scale(1)}}
.i3-hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 30%,color-mix(in srgb,var(--bg) 10%,transparent) 62%,color-mix(in srgb,var(--bg) 45%,transparent) 100%),
  linear-gradient(to right,color-mix(in srgb,var(--bg) 55%,transparent),transparent 60%)}
.i3-hero-copy{width:100%;max-width:1500px;margin:0 auto}
.i3-eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 22px;font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.i3-eyebrow::before{content:"";width:48px;height:1px;background:var(--accent);flex:none}
.i3-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(56px,9.4vw,168px);line-height:.92;letter-spacing:-.025em;max-width:12ch;margin:0}
:lang(zh-Hans) .i3-hero h1{line-height:1.12;letter-spacing:0}
.i3-hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-top:clamp(28px,4vw,48px);padding-top:clamp(20px,2.6vw,32px);border-top:1px solid var(--copper)}
.i3-sub{max-width:30em;font-size:clamp(16px,1.25vw,18px);color:var(--muted)}
.i3-sub p:last-child{margin:0}
.i3-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.i3-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;border:1px solid var(--accent);color:var(--fg);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(var(--accent),var(--accent)) left/0 100% no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1),color .3s}
.i3-btn:hover{background-size:100% 100%;color:var(--on-accent)}
.i3-link{min-height:44px;display:inline-flex;align-items:center;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--fg);opacity:.85}
.i3-link:hover{color:var(--accent);opacity:1}

/* ---- section shared ---- */
.tpl-int-03 main>section:not(.i3-hero){padding:clamp(72px,11vw,160px) var(--gut);max-width:1600px;margin:0 auto;position:relative}
.i3-sec-head{position:relative;isolation:isolate;margin-bottom:clamp(40px,6vw,80px)}
.i3-sec-head>:not(.i3-big){max-width:52rem}
.i3-big{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:-1;font-family:var(--serif);font-weight:300;font-size:clamp(150px,22vw,360px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--copper);pointer-events:none;user-select:none}
.i3-label{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.i3-label::before{content:"";width:32px;height:1px;background:currentColor}
.i3-h2{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.2vw,84px);line-height:1;letter-spacing:-.015em}
:lang(zh-Hans) .i3-h2{line-height:1.2;letter-spacing:0}
.i3-intro{margin-top:22px;color:var(--muted);max-width:36em}
.i3-intro p:last-child{margin:0}

/* ---- about ---- */
.i3-about{display:grid;grid-template-columns:1fr;gap:clamp(48px,7vw,120px);align-items:center}
.i3-about--img{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
.i3-about-media{position:relative;overflow:visible}
.i3-about-media::before{content:"";position:absolute;inset:clamp(14px,2vw,26px) clamp(-26px,-2vw,-14px) clamp(-26px,-2vw,-14px) clamp(14px,2vw,26px);border:1px solid var(--copper);pointer-events:none}
.i3-about-media img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover}
.i3-about-text{position:relative;isolation:isolate}
.i3-lede{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(22px,2.2vw,32px);line-height:1.4;color:var(--fg);max-width:26em}
:lang(zh-Hans) .i3-lede{font-style:normal;font-family:var(--sans);font-weight:300;font-size:clamp(19px,1.7vw,24px);line-height:1.8}
.i3-lede p:last-child{margin:0}
.i3-steps li{display:grid;grid-template-columns:64px 1fr;align-items:baseline;gap:16px;padding:20px 0;border-top:1px solid var(--line);font-size:18px}
.i3-steps li:last-child{border-bottom:1px solid var(--line)}
.i3-step-n{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--accent)}

/* ---- services ledger ---- */
.i3-services,.i3-faq{isolation:isolate}
.i3-ledger{border-top:1px solid var(--line)}
.i3-row{display:grid;grid-template-columns:clamp(64px,9vw,140px) minmax(0,1fr) minmax(0,1fr) auto;gap:12px clamp(16px,3vw,48px);align-items:center;padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--line);position:relative}
.i3-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.i3-row:hover::after{width:100%}
.i3-row-n{font-family:var(--serif);font-weight:300;font-size:clamp(44px,5vw,80px);line-height:.9;color:var(--accent)}
.i3-row h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.8vw,42px);line-height:1.08}
.i3-row-d{color:var(--muted);font-size:15px}
.i3-row-d p:last-child{margin:0}
.i3-price{color:var(--accent)!important;font-family:var(--serif);font-size:22px;margin-top:10px!important}
.i3-ask{min-width:56px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:border-color .3s,color .3s}
.i3-ask:hover{border-color:var(--accent);color:var(--accent)}

/* ---- work rail ---- */
.tpl-int-03 main>section.i3-work{max-width:none;padding-right:0}
.i3-work .i3-sec-head{padding-right:var(--gut)}
.i3-work .i3-big{right:var(--gut)}
.i3-rail{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:0 var(--gut) 20px 0;scrollbar-width:thin;scrollbar-color:var(--accent) var(--line)}
.i3-rail:focus-visible{outline-offset:-3px}
.i3-slide{flex:none;scroll-snap-align:start;max-width:86vw}
.i3-slide-ph{overflow:hidden;height:clamp(300px,64vh,640px)}
.i3-slide-img{height:100%;width:auto;max-width:86vw;object-fit:cover}
.i3-slide figcaption{display:flex;gap:16px;align-items:baseline;margin-top:16px;font-size:13px;color:var(--muted);max-width:min(86vw,480px)}
.i3-slide figcaption span{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--accent);white-space:nowrap}
.i3-hint{display:flex;align-items:center;gap:12px;margin:18px 0 0;color:var(--accent);font-size:18px}
.i3-hint span{width:72px;height:1px;background:var(--accent)}

/* ---- testimonials ---- */
.i3-quote-list{display:grid;gap:clamp(40px,6vw,72px)}
.i3-quote-list figure{max-width:52rem}
.i3-quote-list figure:nth-child(even){margin-left:auto;text-align:right}
.i3-quote-list blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(26px,3vw,44px);line-height:1.25}
:lang(zh-Hans) .i3-quote-list blockquote{font-style:normal}
.i3-quote-list figcaption{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.i3-quote-list figcaption span{color:var(--muted)}

/* ---- faq ---- */
.i3-faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.i3-faq-list{border-top:1px solid var(--line)}
.i3-faq-list details{border-bottom:1px solid var(--line)}
.i3-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:16px 0;font-family:var(--serif);font-size:clamp(21px,1.8vw,26px);font-weight:500}
.i3-faq-list summary::after{float:none;flex:none;color:var(--accent);font-family:var(--sans);font-weight:300;font-size:24px}
.i3-faq-list details[open] summary{color:var(--accent)}
.i3-faq-list details p{margin:0 0 24px;color:var(--muted);max-width:38em}

/* ---- contact ---- */
.tpl-int-03 main>.i3-contact{text-align:center;display:flex;flex-direction:column;align-items:center;border-top:1px solid var(--line);max-width:none;background:radial-gradient(ellipse 60% 50% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.i3-contact .i3-label::after{content:"";width:32px;height:1px;background:currentColor}
.i3-contact-title{font-family:var(--serif);font-weight:300;font-size:clamp(44px,7vw,120px);line-height:.98;letter-spacing:-.02em;max-width:14ch}
:lang(zh-Hans) .i3-contact-title{line-height:1.15;letter-spacing:0}
.i3-orn{display:flex;align-items:center;gap:14px;margin:clamp(28px,4vw,44px) 0}
.i3-orn::before,.i3-orn::after{content:"";width:72px;height:1px;background:var(--accent)}
.i3-orn i{width:8px;height:8px;border:1px solid var(--accent);transform:rotate(45deg)}
.i3-contact-intro{max-width:34em;color:var(--muted);margin-bottom:12px}
.i3-contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 32px;width:100%;max-width:1100px;margin-top:clamp(48px,6vw,80px);text-align:left}
.i3-contact-list li{padding:22px 0;border-top:1px solid var(--copper)}
.i3-contact-list .bc-k{color:var(--accent);opacity:1;margin-bottom:6px;letter-spacing:.24em;font-size:11px;font-weight:600}
.i3-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;text-decoration:none;font-size:17px}
.i3-contact-list a:hover{color:var(--accent)}
.i3-social{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;margin-top:28px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.i3-social a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.i3-social a:hover{color:var(--accent)}

/* ---- footer ---- */
.i3-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding:28px var(--gut);border-top:1px solid var(--line);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.i3-foot-brand{font-family:var(--serif);font-size:18px;letter-spacing:.32em;color:var(--fg)}

/* ---- responsive ---- */
@media (max-width:1000px){
  .i3-row{grid-template-columns:clamp(56px,9vw,120px) minmax(0,1fr) auto}
  .i3-row-d{grid-column:2;grid-row:2}
  .i3-row .i3-ask{grid-column:3;grid-row:1}
}
@media (max-width:760px){
  .i3-head{gap:0 18px}
  .i3-nav{gap:0 16px;font-size:11px;letter-spacing:.14em}
  .i3-brand{font-size:17px;letter-spacing:.24em}
  .i3-hero{min-height:min(92svh,780px);padding-top:150px}
  .i3-hero-bg img{object-position:62% 50%!important}
  .i3-about--img,.i3-faq{grid-template-columns:1fr}
  .i3-about-media{width:86%}
  .i3-row{grid-template-columns:52px minmax(0,1fr);align-items:start}
  .i3-row-n{font-size:40px}
  .i3-row-d{grid-column:2}
  .i3-row .i3-ask{grid-column:2;grid-row:auto;justify-self:start}
  .i3-slide-ph{height:clamp(280px,58vh,480px)}
  .i3-big{font-size:132px;top:-28px;transform:none;opacity:.8}
}