/* INT-05 建筑网格 — commercial interiors, architectural grid */
.tpl-int-05{
  --gut:clamp(16px,4.4vw,64px);
  --sans:"Inter Tight","Noto Sans SC",system-ui,sans-serif;
  --col:calc((min(100vw,1600px) - 2 * var(--gut)) / 12);
  --grid:linear-gradient(to right,var(--line) 1px,transparent 1px);
  --dock-bg:var(--accent);--dock-fg:var(--on-accent);
  font-family:var(--sans);font-size:16px;font-feature-settings:"tnum" 1,"ss01" 1;
}
.tpl-int-05 main{overflow-x:clip}
.tpl-int-05 ::selection{background:var(--accent);color:var(--on-accent)}
.i5-main>section{max-width:1600px;margin:0 auto;padding:0 var(--gut)}

/* header */
.i5-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 32px;max-width:1600px;margin:0 auto;padding:10px var(--gut);border-bottom:1px solid var(--line)}
.i5-brand{font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;min-height:48px;display:flex;align-items:center}
.i5-nav{display:flex;flex-wrap:wrap;gap:0 28px;font-size:13px;font-weight:500;letter-spacing:.06em}
.i5-nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:var(--muted);transition:color .2s}
.i5-nav a:hover{color:var(--fg)}

/* hero */
.i5-main>.i5-hero{position:relative;isolation:isolate;padding-top:clamp(48px,8vw,128px);padding-bottom:clamp(56px,7vw,112px)}
.i5-hero::before{content:"";position:absolute;inset:0 var(--gut);background:var(--grid);background-size:calc(100% / 12) 100%;border-right:1px solid var(--line);pointer-events:none;z-index:-1}
.i5-hero-title{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.i5-eyebrow{grid-column:1/span 3;align-self:start;margin:10px 0 28px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding-right:16px}
.i5-hero h1{grid-column:4/-1;font-weight:500;font-size:clamp(40px,7vw,120px);line-height:.98;letter-spacing:-.045em;padding-left:2px}
:lang(zh-Hans) .i5-hero h1{font-weight:600;line-height:1.16;letter-spacing:-.01em;font-size:clamp(36px,6.6vw,112px)}
.i5-hero-ph{position:relative;margin:clamp(40px,6vw,88px) 0 0;background:var(--soft)}
.i5-hero-ph img{width:100%;aspect-ratio:16/8;object-fit:cover}
.i5-crop{position:absolute;inset:-12px;pointer-events:none;--m:linear-gradient(var(--fg),var(--fg));background:
  var(--m) left top/20px 1px no-repeat,var(--m) left top/1px 20px no-repeat,
  var(--m) right top/20px 1px no-repeat,var(--m) right top/1px 20px no-repeat,
  var(--m) left bottom/20px 1px no-repeat,var(--m) left bottom/1px 20px no-repeat,
  var(--m) right bottom/20px 1px no-repeat,var(--m) right bottom/1px 20px no-repeat}
.i5-strip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--fg)}
.i5-strip-cell{padding-top:22px}
.i5-strip-sub{grid-column:4/span 5;padding-right:32px;color:var(--muted);font-size:clamp(16px,1.2vw,18px);line-height:1.75}
.i5-strip-sub p:last-child{margin:0}
.i5-strip-act{grid-column:10/-1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.i5-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:54px;padding:0 22px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.02em;transition:gap .3s}
.i5-btn::after{content:"→"}
.i5-btn:hover{gap:40px}
.i5-link{min-height:44px;display:inline-flex;align-items:center;font-size:14px;font-weight:600;text-decoration:none;color:var(--fg)}
.i5-link:hover{color:var(--accent)}

/* title blocks */
.i5-main>.i5-sec{padding-top:clamp(80px,10vw,152px)}
.i5-tb{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--fg);padding-top:20px;margin-bottom:clamp(40px,5vw,72px)}
.i5-code{grid-column:1/span 3;display:flex;gap:14px;align-items:baseline;margin:6px 0 20px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.i5-code span{color:var(--accent);font-weight:700}
.i5-tb-main{grid-column:4/-1}
.tpl-int-05 h2{font-weight:500;font-size:clamp(32px,4.4vw,68px);line-height:1.04;letter-spacing:-.035em;max-width:16ch}
:lang(zh-Hans) .tpl-int-05 h2{font-weight:600;line-height:1.24;letter-spacing:-.005em;font-size:clamp(28px,3.6vw,54px);max-width:20ch}
.i5-intro{margin-top:20px;max-width:34em;color:var(--muted)}
.i5-intro p:last-child{margin:0}

/* about */
.i5-about-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.i5-about-media{grid-column:1/span 4;background:var(--soft)}
.i5-about-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.i5-phases,.i5-lede{grid-column:6/-1}
.i5-about-body--text .i5-phases,.i5-about-body--text .i5-lede{grid-column:4/-1}
.i5-phases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.i5-phases li{padding:clamp(20px,2.4vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:clamp(150px,13vw,200px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.i5-phase-n{font-size:clamp(36px,3.6vw,56px);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.i5-phases p{margin:0;font-size:17px;font-weight:500;line-height:1.5}
.i5-lede{font-size:clamp(19px,1.6vw,23px);line-height:1.7}
.i5-lede p:last-child{margin:0}

/* schedule */
.i5-schedule{border-top:1px solid var(--line)}
.i5-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--line);position:relative;transition:background .3s}
.i5-row:hover{background:var(--soft)}
.i5-row-n{grid-column:1/span 3;font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--accent);padding-left:2px}
.i5-row h3{grid-column:4/span 3;font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.01em;padding-right:20px}
.i5-row-d{grid-column:7/span 4;color:var(--muted);font-size:15px;padding-right:20px}
.i5-row-d p:last-child{margin:0}
.i5-price{margin-top:6px!important;color:var(--fg);font-weight:600}
.i5-ask{grid-column:11/-1;justify-self:end;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 4px;font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.i5-ask:hover{color:var(--accent)}

/* sheets */
.i5-sheets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.i5-sheet{padding:clamp(12px,1.6vw,24px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.i5-sheet-ph{overflow:hidden;background:var(--soft)}
.i5-sheet-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.i5-sheet:hover .i5-sheet-ph img{transform:scale(1.03)}
.i5-sheet figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:14px;font-size:14px;color:var(--muted)}
.i5-sheet figcaption span{order:2;color:var(--accent);font-weight:600;letter-spacing:.1em;font-size:12px}

/* testimonials */
.i5-quote-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.i5-quote-list figure{padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.i5-quote-list blockquote{font-size:19px;line-height:1.6}
.i5-quote-list figcaption{margin-top:16px;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.i5-quote-list figcaption span{color:var(--muted)}

/* faq */
.i5-faq-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.i5-faq-list details{grid-column:4/-1;border-bottom:1px solid var(--line)}
.i5-faq-list details:first-child{border-top:1px solid var(--line)}
.i5-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:68px;padding:16px 0;font-size:18px;font-weight:600;letter-spacing:-.005em}
.i5-faq-list summary::after{float:none;flex:none;font-weight:300;font-size:26px;color:var(--accent)}
.i5-faq-list details p{margin:0 0 22px;color:var(--muted);max-width:40em}

/* contact */
.i5-main>.i5-contact{max-width:none;padding:clamp(88px,10vw,152px) 0 0}
.i5-contact-in{position:relative;isolation:isolate;max-width:1600px;margin:0 auto;padding:clamp(56px,7vw,112px) var(--gut);background:var(--accent);color:var(--on-accent);--line:color-mix(in srgb,var(--on-accent) 22%,transparent)}
.i5-contact-in::before{content:"";position:absolute;inset:0 var(--gut);background:var(--grid);background-size:calc(100% / 12) 100%;border-right:1px solid var(--line);opacity:.7;z-index:-1;pointer-events:none}
.i5-contact .i5-code{color:inherit;opacity:.85}
.i5-contact .i5-code span{color:inherit}
.i5-contact h2{font-size:clamp(40px,6.4vw,104px);max-width:14ch;margin-top:8px}
:lang(zh-Hans) .i5-contact h2{font-size:clamp(32px,5.2vw,84px);max-width:16ch}
.i5-contact-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-top:clamp(28px,4vw,56px)}
.i5-contact-intro{max-width:30em;opacity:.88;font-size:17px}
.i5-contact-intro p:last-child{margin:0}
.i5-btn--inv{background:var(--on-accent);color:var(--accent)}
.i5-contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.i5-contact-list li{padding:20px 20px 20px 0;border-bottom:1px solid var(--line)}
.i5-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0;font-size:17px;font-weight:600;text-decoration:none}
.i5-contact-list a:hover{text-decoration:underline}
.i5-social{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:20px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.i5-social a{min-height:44px;display:inline-flex;align-items:center}

/* footer */
.i5-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:1600px;margin:0 auto;padding:24px var(--gut) 32px;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.i5-foot-brand{font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}

@media (max-width:900px){
  .i5-eyebrow{grid-column:1/-1;margin-bottom:18px}
  .i5-hero h1,.i5-tb-main,.i5-code{grid-column:1/-1}
  .i5-code{margin-bottom:14px}
  .i5-strip-sub{grid-column:1/span 7}
  .i5-strip-act{grid-column:8/-1}
  .i5-about-media{grid-column:1/span 5}
  .i5-phases,.i5-lede{grid-column:7/-1}
  .i5-phases{grid-template-columns:minmax(0,1fr)}
  .i5-row-n{grid-column:1/span 2}
  .i5-row h3{grid-column:3/span 4}
  .i5-row-d{grid-column:7/span 6;padding-right:0}
  .i5-ask{grid-column:7/-1;justify-self:start;margin-top:6px}
  .i5-faq-list details,.i5-about-body--text .i5-phases,.i5-about-body--text .i5-lede{grid-column:1/-1}
}
@media (max-width:760px){
  .i5-nav{gap:0 16px;font-size:12px}
  .i5-hero::before{background-size:calc(100% / 4) 100%}
  .i5-hero-ph{margin-left:calc(var(--gut) * -1 + 8px);margin-right:calc(var(--gut) * -1 + 8px)}
  .i5-hero-ph img{aspect-ratio:4/3}
  .i5-crop{inset:-6px}
  .i5-strip-sub,.i5-strip-act,.i5-about-media,.i5-phases,.i5-lede{grid-column:1/-1}
  .i5-strip-sub{padding-right:0}
  .i5-strip-act{padding-top:20px}
  .i5-about-media{margin-bottom:32px;width:80%}
  .i5-phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .i5-phases li{min-height:140px;padding:18px}
  .i5-phases p{font-size:15px}
  .i5-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
  .i5-row-n,.i5-row h3,.i5-row-d{grid-column:1/-1}
  .i5-ask{grid-column:1;margin-top:4px}
  .i5-sheets{grid-template-columns:minmax(0,1fr)}
  .i5-contact-in::before{background-size:calc(100% / 4) 100%}
}