/* INT-01 建筑极简 — Swiss architecture studio */
.tpl-int-01{
  --gut:clamp(16px,4.4vw,72px);
  --sans:"Inter Tight","Noto Sans SC",system-ui,sans-serif;
  --serif:"Instrument Serif","Noto Sans SC",Georgia,serif;
  font-family:var(--sans);font-size:16px;letter-spacing:-.003em;font-synthesis-style:none;
  /* drawing-board column guides */
  --guides:repeating-linear-gradient(90deg,transparent 0 calc(100%/6 - 1px),var(--line) calc(100%/6 - 1px) calc(100%/6));
}
.tpl-int-01 main{max-width:1680px;margin:0 auto}
.tpl-int-01 a{text-decoration-thickness:1px}

/* ---- header ---- */
.i1-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 32px;padding:14px var(--gut);border-bottom:1px solid var(--fg);max-width:1680px;margin:0 auto}
.i1-brand{font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-size:14px;min-height:44px;display:flex;align-items:center}
.i1-tag{margin:0;font-size:13px;color:var(--muted)}
.i1-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 26px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.i1-nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;position:relative}
.i1-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:10px;height:1px;background:currentColor;transition:right .25s}
.i1-nav a:hover::after{right:0}

/* ---- hero ---- */
.i1-hero{padding:clamp(28px,4vw,56px) var(--gut) 0;position:relative;isolation:isolate}
.i1-hero::before{content:"";position:absolute;inset:0 var(--gut);background:var(--guides);pointer-events:none;z-index:-1}
.i1-hero-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 24px;align-items:start;padding-bottom:clamp(24px,4vw,56px)}
.i1-eyebrow,.i1-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0}
.i1-eyebrow{grid-column:1/6}
.i1-sub{grid-column:8/13;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--muted);max-width:30em}
.i1-sub p:last-child{margin:0}
.i1-h1{font-family:var(--sans);font-weight:500;font-size:clamp(46px,10.6vw,184px);line-height:.9;letter-spacing:-.055em;margin:0;max-width:14ch}
.i1-h1 span{display:inline}
.i1-h1 .i1-it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;padding-right:.04em}
:lang(zh-Hans) .i1-h1{letter-spacing:-.03em;line-height:1.02;max-width:none}
.i1-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:clamp(28px,4vw,48px) 0 clamp(28px,4vw,48px)}
.i1-btn{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:14px 26px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.01em;transition:gap .25s,opacity .2s}

.i1-btn:hover{gap:22px}
.i1-textlink{min-height:44px;display:inline-flex;align-items:center;font-weight:500;text-decoration:underline;text-underline-offset:6px}
.i1-plate{position:relative;overflow:hidden;margin:0 calc(var(--gut) * -1);}
.i1-plate img{width:100%;aspect-ratio:21/10;object-fit:cover}
.i1-mark{position:absolute;width:28px;height:28px;border:0 solid var(--bg);pointer-events:none}
.i1-mark--tl{left:var(--gut);top:20px;border-left-width:1.5px;border-top-width:1.5px}
.i1-mark--br{right:var(--gut);bottom:20px;border-right-width:1.5px;border-bottom-width:1.5px}
.tpl-int-01 main>.i1-hero{padding-bottom:0;border-bottom:0}
.tpl-int-01 main>.i1-hero--text{padding-bottom:clamp(40px,6vw,80px);border-bottom:1px solid var(--fg)}

/* ---- service ticker ---- */
.i1-ticker{border-bottom:1px solid var(--fg);padding:clamp(14px,2vw,22px) 0;font-family:var(--serif);font-style:italic;font-size:clamp(30px,4.6vw,68px);line-height:1.1;letter-spacing:-.01em}
.i1-ticker b{font-weight:400}
.i1-ticker i{font-family:var(--sans);font-style:normal;font-weight:300;color:var(--accent)}

/* ---- shared section bits ---- */
.tpl-int-01 main>section{padding:clamp(56px,9vw,128px) var(--gut);border-bottom:1px solid var(--line)}
.i1-label{display:flex;gap:10px;align-items:baseline;margin-bottom:22px}
.i1-label span{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:var(--muted)}
.i1-h2{font-weight:500;font-size:clamp(32px,4.8vw,72px);line-height:1;letter-spacing:-.045em;max-width:16ch}
:lang(zh-Hans) .i1-h2{letter-spacing:-.02em;line-height:1.15}
.i1-sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px 24px;align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.i1-sec-head .i1-label{grid-column:1/-1;margin:0}
.i1-sec-head .i1-h2{grid-column:1/8}
.i1-intro{grid-column:9/13;color:var(--muted);font-size:15px}
.i1-intro p:last-child{margin:0}

/* ---- about ---- */
.i1-about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 24px;align-items:start}
.i1-about-head{grid-column:1/6}
.i1-about-body{grid-column:7/13}
.i1-about--img .i1-about-media{grid-column:1/6;grid-row:1/3;overflow:hidden}
.i1-about--img .i1-about-head{grid-column:7/13;grid-row:1}
.i1-about--img .i1-about-body{grid-column:7/13;grid-row:2;align-self:end}
.i1-about-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.i1-lede{font-size:clamp(20px,2vw,28px);line-height:1.45;letter-spacing:-.015em}
.i1-steps{border-top:1px solid var(--fg);counter-reset:s}
.i1-steps li{display:grid;grid-template-columns:clamp(56px,7vw,110px) 1fr;align-items:baseline;gap:16px;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--fg)}
.i1-step-n{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3vw,44px);line-height:1;color:var(--accent)}
.i1-step-t{font-size:clamp(22px,2.6vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.15}

/* ---- services: project index ---- */
.i1-index{border-top:1px solid var(--fg)}
.i1-row{display:grid;grid-template-columns:clamp(48px,6vw,96px) minmax(0,5fr) minmax(0,5fr) auto;gap:12px 24px;align-items:baseline;padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--fg);position:relative}
.i1-row-n{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--accent)}
.i1-row h3{font-weight:500;font-size:clamp(24px,3vw,44px);line-height:1.05;letter-spacing:-.035em}
.i1-row-d{color:var(--muted);max-width:34em}
.i1-row-d p:last-child{margin-bottom:0}
.i1-price{color:var(--fg);font-weight:600;margin-top:10px}
.i1-ask{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 18px;border:1px solid var(--fg);border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.i1-ask:hover{background:var(--fg);color:var(--bg)}
@media (hover:hover){.i1-row h3{transition:transform .35s cubic-bezier(.2,.7,.2,1)}.i1-row:hover h3{transform:translateX(12px)}}

/* ---- work: asymmetric bento ---- */
.i1-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,6vw,96px) clamp(14px,2vw,28px);align-items:end}
.i1-b{min-width:0}
.i1-b-ph{overflow:hidden;background:var(--soft)}
.i1-b img{width:100%;object-fit:cover}
.i1-b0{grid-column:1/9}.i1-b0 img{aspect-ratio:3/2}
.i1-b1{grid-column:9/13}.i1-b1 img{aspect-ratio:4/5}
.i1-b2{grid-column:1/8}.i1-b2 img{aspect-ratio:3/2}
.i1-b3{grid-column:9/13;align-self:start}.i1-b3 img{aspect-ratio:4/5}
.i1-b figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.i1-b figcaption span{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--fg)}

/* ---- testimonials ---- */
.i1-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px 24px}
.i1-quote-list figure{border-top:1px solid var(--fg);padding-top:24px}
.i1-quote-list blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.3}
.i1-quote-list figcaption{margin-top:18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---- faq ---- */
.i1-faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 24px}
.i1-faq-head{grid-column:1/6}
.i1-faq-list{grid-column:7/13;border-top:1px solid var(--fg)}
.i1-faq-list details{border-bottom:1px solid var(--fg)}
.i1-faq-list summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:68px;padding:16px 0;font-weight:500;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em}
.i1-faq-list summary::after{float:none;font-family:var(--sans);font-weight:300;font-size:26px;line-height:1}
.i1-faq-list details p{margin:0 0 22px;color:var(--muted);max-width:40em}

/* ---- contact (inverted) ---- */
.tpl-int-01 main>.i1-contact{background:var(--fg);color:var(--bg);border:0;position:relative;isolation:isolate}
.i1-contact::before{content:"";position:absolute;inset:0 var(--gut);background:repeating-linear-gradient(90deg,transparent 0 calc(100%/6 - 1px),color-mix(in srgb,var(--bg) 14%,transparent) calc(100%/6 - 1px) calc(100%/6));z-index:-1;pointer-events:none}
.i1-contact .i1-label span{color:inherit;opacity:.75}
.i1-contact-title .i1-it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.i1-contact-title{font-weight:500;font-size:clamp(40px,7.6vw,132px);line-height:.95;letter-spacing:-.055em;max-width:14ch;margin-bottom:clamp(40px,6vw,88px)}
:lang(zh-Hans) .i1-contact-title{letter-spacing:-.03em;line-height:1.1}
.i1-contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 24px}
.i1-contact-grid>div:first-child{grid-column:1/6}
.i1-contact-grid>div:last-child{grid-column:7/13}
.i1-contact-grid>div:empty{display:none}
.i1-contact-lead p{font-size:17px;opacity:.85;max-width:30em}
.i1-btn--inv{background:var(--bg);color:var(--fg);margin-top:8px}
.i1-contact-list{border-top:1px solid color-mix(in srgb,var(--bg) 40%,transparent)}
.i1-contact-list li{display:grid;grid-template-columns:140px 1fr;gap:4px 16px;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--bg) 40%,transparent);font-size:17px}
.i1-contact-list .bc-k{opacity:.7;padding-top:4px}
.i1-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.i1-social{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:20px}
.i1-social a{min-height:44px;display:inline-flex;align-items:center;font-weight:500}

/* ---- footer ---- */
.i1-foot{padding:clamp(32px,5vw,64px) var(--gut) 24px;max-width:1680px;margin:0 auto;overflow:hidden}
.i1-foot-mark{margin:0;font-weight:600;font-size:clamp(48px,12.5vw,220px);line-height:.85;letter-spacing:-.06em;text-transform:uppercase;overflow-wrap:anywhere}
:lang(zh-Hans) .i1-foot-mark{letter-spacing:-.03em}
.i1-foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--fg);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.i1-top{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--fg);border-radius:50%;text-decoration:none;font-size:18px}

/* ---- responsive ---- */
@media (max-width:1080px){
  .i1-row{grid-template-columns:clamp(40px,6vw,96px) minmax(0,1fr) auto}
  .i1-row-d{grid-column:2/3;grid-row:2}
  .i1-row .i1-ask{grid-column:3;grid-row:1}
}
@media (max-width:760px){
  .i1-head{grid-template-columns:1fr;gap:0}
  .i1-tag{display:none}
  .i1-nav{justify-content:flex-start;gap:0 18px;font-size:12px;margin-left:-2px}
  .i1-hero::before{inset:0 var(--gut);background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line) calc(25% - 1px) 25%)}
  .i1-hero-top{grid-template-columns:1fr;gap:18px}
  .i1-eyebrow,.i1-sub{grid-column:1/-1}
  .i1-h1{font-size:clamp(46px,15vw,84px)}
  .i1-plate img{aspect-ratio:4/5}
  .i1-sec-head .i1-h2,.i1-intro{grid-column:1/-1}
  .i1-about,.i1-faq,.i1-contact-grid{grid-template-columns:1fr}
  .i1-about>*,.i1-about--img>*,.i1-faq>*,.i1-contact-grid>div:first-child,.i1-contact-grid>div:last-child{grid-column:1/-1!important;grid-row:auto!important}
  .i1-about--img .i1-about-media{width:72%;margin-top:0}
  .i1-row{grid-template-columns:44px minmax(0,1fr)}
  .i1-row-d{grid-column:2}
  .i1-row .i1-ask{grid-column:2;grid-row:auto;justify-self:start;margin-top:6px}
  .i1-bento{gap:36px 12px}
  .i1-b0,.i1-b2{grid-column:1/-1}
  .i1-b1{grid-column:3/13}
  .i1-b3{grid-column:1/11}
  .i1-contact-list li{grid-template-columns:1fr}
}