/* ============================================================
   Minusplus 加減設計 — Site stylesheet
   Built to CBDS 2027 Vol.01 Corporate Identity System:
   colour system (§1.2), type system (§1.3), spacing scale,
   application-tier colours for large-area use (§1.2.3).
   ============================================================ */

:root{
  /* logo colours — small elements only (icons, tags, buttons, <5% of a view) */
  --forest:#16140F; --navy:#2B3E44; --pink:#C99C86; --red:#A6432E; --orange:#C98A3D;
  /* application-tier colours — large surfaces (§1.2.3) */
  --navy-a:#35474C; --pink-a:#D9C2B3; --red-a:#7A4335; --orange-a:#9C7642;
  /* neutrals */
  --paper:#E6E2DB; --mist:#DDD7CC; --line:#C7C0B4; --slate:#6B6459; --ink:#1C1815;
  /* portfolio bg — deeper, more sophisticated */
  --gallery-bg:#C9C1B2; --gallery-text:#4A4E45;
  /* version B — concept presentation with deep charcoal */
  --concept-bg:#2A2825; --concept-border:#4A4845;
  /* spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:64px; --s7:96px; --s8:128px;
  /* fonts */
  --f-display:"Playfair Display", "Bodoni Moda", Didot, Georgia, serif;
  --f-serif-tc:"Noto Serif TC", "PingFang TC", "Songti TC", serif;
  --f-sans-tc:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --f-utility:"Inter", "Archivo", Helvetica, Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-sans-tc); font-weight:300; font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{list-style:none}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 var(--s4)}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 var(--s4)}

/* ---------- five-colour spectrum rule (brand signature device) ---------- */
.spectrum{display:flex; height:5px}
.spectrum i{flex:1}
.spectrum i:nth-child(1){background:var(--navy)}
.spectrum i:nth-child(2){background:var(--red)}
.spectrum i:nth-child(3){background:var(--pink)}
.spectrum i:nth-child(4){background:var(--orange)}
.spectrum i:nth-child(5){background:var(--forest)}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--f-serif-tc); font-weight:900; letter-spacing:.05em; color:var(--ink)}
h1{font-size:clamp(34px,5.6vw,64px); line-height:1.18}
h2{font-size:clamp(24px,3.4vw,34px); line-height:1.35; margin-bottom:var(--s3)}
h3{font-size:19px; font-weight:600; margin-bottom:var(--s2)}
.display{font-family:var(--f-display); font-weight:400; font-style:italic}
.eyebrow{
  font-family:var(--f-utility); font-size:11px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--navy); display:block; margin-bottom:var(--s3);
}
.eyebrow.on-dark{color:var(--orange)}
.lead{font-family:var(--f-serif-tc); font-weight:400; font-size:clamp(16px,2vw,19px); line-height:1.95; color:#3E423B; max-width:60ch}
p{max-width:68ch}
p+p{margin-top:1em}
.mono{font-family:var(--f-mono)}
.center{text-align:center; margin-left:auto; margin-right:auto}

/* ---------- nav ---------- */
.site-nav{position:absolute; top:0; left:0; right:0; z-index:100; background:transparent}
.group-bar + .site-nav { top: 36px; }
.site-nav .inner{max-width:1440px; margin:0 auto; padding:var(--s5); display:flex; align-items:flex-start; justify-content:space-between; height:auto}
.brand-lockup{display:flex; align-items:center; gap:16px; filter:drop-shadow(0 2px 12px rgba(0,0,0,0.45))}
.brand-lockup svg{height:54px; width:auto}
.brand-lockup .names{display:flex; flex-direction:column; line-height:1.2}
.brand-lockup .zh{font-family:var(--f-serif-tc); font-weight:900; font-size:17px; color:var(--paper); letter-spacing:.05em}
.brand-lockup .en{font-family:var(--f-display); font-size:11px; color:var(--orange); letter-spacing:.12em}
.nav-links{display:flex; align-items:center; gap:var(--s5)}
.nav-links a{
  font-family:var(--f-utility); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,0.7); padding:8px 0; position:relative;
  text-shadow:0 2px 12px rgba(0,0,0,0.45);
}
.nav-links a:hover, .nav-links a.active{color:var(--paper)}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange)}
.nav-cta{
  font-family:var(--f-utility); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--forest); background:var(--paper); padding:11px 22px; border-radius:2px;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.nav-cta:hover{background:var(--orange); color:var(--paper)}
.nav-toggle{display:none; color:var(--paper); font-size:22px; text-shadow:0 2px 12px rgba(0,0,0,0.45)}

@media (max-width:860px){
  .nav-links{position:fixed; inset:76px 0 0 0; background:var(--forest); flex-direction:column; align-items:flex-start; padding:var(--s4); gap:var(--s3); transform:translateX(100%); transition:transform .3s ease; overflow-y:auto}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:15px}
  .nav-toggle{display:block}
  .brand-lockup .en{display:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--f-utility);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 30px; border-radius:2px; border:1px solid transparent; transition:all .2s ease;
}
.btn-primary{background:var(--navy); color:var(--paper)}
.btn-primary:hover{background:var(--forest)}
.btn-outline{border-color:var(--ink); color:var(--ink)}
.btn-outline:hover{background:var(--ink); color:var(--paper)}
.btn-outline.on-dark{border-color:rgba(248,248,246,.5); color:var(--paper)}
.btn-outline.on-dark:hover{background:var(--paper); color:var(--forest)}
.btn-block{width:100%; justify-content:center}

/* ---------- section rhythm ---------- */
section{padding:var(--s7) 0}
.section-tight{padding:var(--s6) 0}
.section-line{border-top:none}
.section-mist{background:var(--mist)}
.section-dark{background:var(--forest); color:var(--paper)}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--paper)}
.section-dark .lead{color:#C7CCC3}
.section-navy{background:var(--navy-a); color:var(--paper)}
.section-navy h1,.section-navy h2,.section-navy h3{color:var(--paper)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; color:var(--paper); overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.1) brightness(.98)}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,20,17,.92) 0%, rgba(20,20,17,.22) 46%, rgba(20,20,17,.4) 100%)}
.hero::before{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(230,226,219,.14); z-index:2; pointer-events:none}
.hero .content{position:relative; z-index:2; padding:var(--s7) 0 var(--s7)}
.hero .tag{font-family:var(--f-utility); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--orange); display:block; margin-bottom:var(--s4)}
.hero h1{color:var(--paper); max-width:17ch; font-size:clamp(40px,7.4vw,92px); letter-spacing:.03em}
.hero .lead{color:#D6D0C4; margin-top:var(--s4); font-size:16.5px; max-width:52ch}
.hero .actions{display:flex; gap:var(--s3); margin-top:var(--s6); flex-wrap:wrap}
.hero-sub{min-height:46vh}
.hero-mark{position:absolute; left:var(--s5); bottom:var(--s5); z-index:2; display:flex; align-items:center; gap:12px; opacity:.9}
.hero-mark svg{height:30px; width:auto}
.hero-mark span{font-family:var(--f-utility); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper); opacity:.75}
@media(max-width:640px){.hero-mark{display:none}}
.page-hero{position:relative; background:var(--forest); color:var(--paper); padding:calc(var(--s7) + 70px) 0 var(--s6)}
.page-hero .eyebrow{color:var(--orange)}
.page-hero h1{color:var(--paper)}
.page-hero .lead{color:#C7CCC3; margin-top:var(--s3)}

/* ---------- grids & cards ---------- */
.g2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--s6); align-items:start}
.g3{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s4)}
.g4{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s3)}

.pillar{padding:var(--s4) 0; border-top:3px solid var(--navy)}
.pillar .num{font-family:var(--f-display); font-size:34px; color:var(--navy); margin-bottom:var(--s2)}
.pillar p{font-size:14.5px; color:#4A4E45}
.section-dark .pillar{border-top-color:var(--orange)}
.section-dark .pillar .num{color:var(--orange)}
.section-dark .pillar p{color:#C7CCC3}

.service-card{background:var(--paper); border:1px solid var(--line); padding:var(--s4)}
.service-card .num{font-family:var(--f-mono); font-size:12px; color:var(--slate); display:block; margin-bottom:var(--s2)}
.service-card h3{font-size:17px}
.service-card p{font-size:14px; color:var(--slate)}

/* ---------- portfolio grid ---------- */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--s5)}
.filter-btn{
  font-family:var(--f-utility); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 18px; border:1px solid var(--line); border-radius:20px; color:var(--slate); background:var(--paper);
}
/* ---------- Editorial Magazine Layout ---------- */
.portfolio-grid, .featured-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  margin-top: var(--s5);
}

.magazine-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;               /* 全部統一 4:3：卡片等高、照片露出 */
  background: var(--charcoal, #1C1815);
  overflow: hidden;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 901px) { .magazine-card { max-height: 66vh; } }  /* 桌機全寬 4:3 過高時封頂 */

.magazine-card .mc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: saturate(1.03) brightness(1);   /* 不再壓暗照片 */
}
.magazine-card:hover .mc-bg { transform: scale(1.04); filter: saturate(1) brightness(1.05); }

.magazine-card .mc-overlay {
  position: absolute;
  inset: 0;
  background: none;   /* 上方完整露出照片；遮片改由底部帶處理 */
  pointer-events: none;
}

/* Glassmorphism Wireframe Grid Overlay */
.mc-grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* Main Content Column */
.mc-col-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.mc-row { display: flex; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.15); }
.mc-row-top { height: 60px; background: linear-gradient(180deg, rgba(12,12,10,0.5), rgba(12,12,10,0)); }
.mc-row-mid { flex: 1; border-bottom: none; }
.mc-row-bottom { flex: 0 0 auto; border: none; align-items: center; padding: 20px 24px; background: linear-gradient(0deg, rgba(15,15,12,0.94) 0%, rgba(15,15,12,0.8) 62%, rgba(15,15,12,0.26) 100%); }

/* Cells */
.mc-cell {
  flex: 1;
  border-right: 1px solid rgba(255,255,255,0.15);
  padding: 8px var(--s3);
  font-family: var(--f-utility);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: #C7CCC3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.mc-cell:last-child { border-right: none; }
.mc-cell span { font-size: 9.5px; line-height: 1.15; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); display: block; }
.mc-cell .mc-value {
  color: #F2F0EA;
  font-weight: 400;
  line-height: 1.35;
  text-shadow: 0 1px 7px rgba(0,0,0,0.88);
}
.mc-cell-brand { font-family: var(--f-display); font-style: italic; color: var(--paper); flex: 1.5; }

.mc-cell-huge {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  display: block;
}
.mc-cell-huge .zh-name { font-family: var(--f-serif-tc); font-weight: 600; font-size: 25px; letter-spacing: 0.08em; color: var(--paper); margin: 0; line-height: 1.12; text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
.mc-cell-huge .en-desc { font-family: var(--f-display); font-style: italic; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #E1DDD4; margin-top: 3px; text-shadow: 0 1px 10px rgba(0,0,0,0.8); }

.mc-cell-arrow {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin-left: 18px;
  padding: 0;
  border: 1px solid rgba(230,226,219,0.55);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 18px;
  line-height: 1;
  background: transparent;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.magazine-card:hover .mc-cell-arrow { background: var(--paper); color: var(--navy); border-color: var(--paper); }

@media (max-width: 900px) {
  .mc-row-top { display: none; } /* Hide technical metadata on small screens to save space */
  /* 名稱 + EXPLORE 收成一塊、貼齊左下、無分隔線無模糊 */
  .mc-row-bottom { height: 33%; padding: 0 20px 12px; overflow: hidden; align-items: flex-end; }
  .mc-cell-huge { padding: 0; }
  .mc-cell-huge .zh-name { font-size: 21px; }
  .mc-cell-huge .en-desc { font-size: 9.5px; letter-spacing: 0.22em; margin-top: 2px; }
  .mc-cell-arrow { width: 40px; height: 40px; font-size: 16px; margin-left: 14px; }
}

/* ---------- project detail (case-study layout) ---------- */
.project-hero{position:relative; min-height:86vh; display:flex; align-items:flex-end; color:var(--paper); background:var(--forest)}
.project-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.08) brightness(.97)}
.project-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,20,17,.92) 0%, rgba(20,20,17,.08) 58%)}
.project-hero .content{position:relative; z-index:2; padding-bottom:var(--s7); width:100%}
.project-hero h1{font-size:clamp(36px,6.4vw,76px)}
.project-meta{display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s3); font-family:var(--f-utility); font-size:12px; letter-spacing:.08em; color:#DEE2D8}
.project-meta b{color:var(--orange); font-weight:600; margin-right:6px; text-transform:uppercase; font-size:10.5px; letter-spacing:.14em}
.breadcrumb{font-family:var(--f-utility); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#C7CCC3; margin-bottom:var(--s3); display:inline-flex; gap:8px; align-items:center}
.breadcrumb:hover{color:var(--orange)}
.project-hero .hero-mark{opacity:.85}

/* concept section — dark, circular graphic + descriptive text, à la case-study briefs */
.concept-section{background:var(--forest); color:var(--paper); padding:var(--s7) 0}
.concept-section h1,.concept-section h2,.concept-section h3,.concept-section h4{color:var(--paper)}
.concept-grid{display:grid; grid-template-columns:220px 1fr; gap:var(--s7); align-items:start}
.concept-ring{width:180px; height:180px; border-radius:50%; border:1px solid rgba(230,226,219,.28); position:relative; flex-shrink:0}
.concept-ring::before{content:""; position:absolute; inset:22px; border-radius:50%; border:1px solid rgba(230,226,219,.2)}
.concept-ring::after{content:""; position:absolute; inset:44px; border-radius:50%; background:var(--orange); opacity:.9}
.concept-body .eyebrow{color:var(--orange)}
.concept-body p{font-size:16px; line-height:2; color:#D6D0C4; max-width:60ch}
@media(max-width:760px){.concept-grid{grid-template-columns:1fr; gap:var(--s4)}.concept-ring{width:96px;height:96px}.concept-ring::before{inset:12px}.concept-ring::after{inset:24px}}

.gallery-label{display:flex; align-items:center; gap:14px; margin:0 0 var(--s3)}
.gallery-label + .gallery-label{margin-top:var(--s6)}
.gallery-label span{font-family:var(--f-utility); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--slate)}
.gallery-label::after{content:""; flex:1; height:1px; background:var(--line)}

/* 全景 Panorama（大圖）＋ 局部 Detail（小圖網格）— single grid, panorama spans full width */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--s3)}
.gallery-grid figure{cursor:zoom-in; overflow:hidden; background:var(--mist); aspect-ratio:4/3}
.gallery-grid figure.panorama-figure{grid-column:1/-1; aspect-ratio:16/7}
.gallery-grid > .gallery-label{grid-column:1/-1}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.gallery-grid figure:hover img{transform:scale(1.04)}

.lightbox{position:fixed; inset:0; background:rgba(15,17,13,.96); z-index:1000; display:none; align-items:center; justify-content:center; padding:var(--s4)}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:84vh; object-fit:contain}
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next{
  position:absolute; color:var(--paper); font-family:var(--f-utility); font-size:13px; letter-spacing:.1em;
  background:rgba(248,248,246,.08); border:1px solid rgba(248,248,246,.25); border-radius:50%;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.lightbox .lb-close{top:var(--s4); right:var(--s4)}
.lightbox .lb-prev{left:var(--s4); top:50%; transform:translateY(-50%)}
.lightbox .lb-next{right:var(--s4); top:50%; transform:translateY(-50%)}
.lightbox .lb-count{position:absolute; bottom:var(--s3); left:0; right:0; text-align:center; color:#C7CCC3; font-family:var(--f-mono); font-size:12px}

/* ---------- project detail: VERSION B (concept presentation with deep charcoal) ---------- */
#projectDetail.version-b .concept-presentation{background:var(--concept-bg); color:var(--paper); padding:var(--s7) 0; position:relative}
#projectDetail.version-b .concept-presentation h2, #projectDetail.version-b .concept-presentation h3{color:var(--paper)}

.concept-presentation-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start; padding:var(--s5)}
.concept-presentation-grid .concept-visual{position:relative}
.concept-presentation-grid .concept-content{padding:var(--s4) 0}

/* Floorplan + swatches + detail photos */
.concept-visual-group{display:flex; flex-direction:column; gap:var(--s4)}
.floorplan-section{padding:0; aspect-ratio:16/10; width:100%; max-height:480px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.floorplan-section img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 24px rgba(0,0,0,0.18))}

.swatches-row{display:flex; gap:var(--s3); flex-wrap:wrap}
.swatch{width:60px; height:60px; border-radius:4px; border:1px solid var(--concept-border); position:relative; overflow:hidden}
.swatch img{width:100%; height:100%; object-fit:cover}
.swatch-label{font-family:var(--f-utility); font-size:9px; position:absolute; bottom:4px; left:4px; color:rgba(255,255,255,.6); background:rgba(0,0,0,.5); padding:2px 4px; border-radius:2px}

.detail-photos-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); aspect-ratio:2/1}
.detail-photos-grid figure{overflow:hidden; background:var(--mist)}
.detail-photos-grid img{width:100%; height:100%; object-fit:cover}

/* Concept text with transparency layer effect */
.concept-content h2{font-size:clamp(24px,3vw,32px); margin-bottom:var(--s3)}
.concept-content .eyebrow{color:var(--orange)}
.concept-content p{font-size:15px; line-height:1.8; color:#D6D0C4; margin-bottom:var(--s3)}

/* Transparency overlay for text blocks */
.concept-text-block{background:rgba(255,255,255,.06); border-left:3px solid var(--orange); padding:var(--s4); margin-top:var(--s4)}
.concept-text-block p{color:#C7CCC3; font-size:14px}

@media(max-width:900px){
  .concept-presentation-grid{grid-template-columns:1fr; gap:var(--s4)}
  .detail-photos-grid{grid-template-columns:1fr}
}

/* ---------- about page ---------- */
.brand-quote{
  font-family:var(--f-serif-tc); font-weight:400; font-size:clamp(20px,3vw,28px); line-height:1.85;
  max-width:26ch; margin:0 auto; text-align:center;
}
.plus-minus-cols{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--s5)}
.plus-minus-cols > div{background:var(--paper); padding:var(--s5) var(--s4)}
.plus-minus-cols .sign{font-family:var(--f-display); font-size:40px; margin-bottom:var(--s3)}
.plus-minus-cols .plus .sign{color:var(--orange-a)}
.plus-minus-cols .minus .sign{color:var(--navy)}
.plus-minus-cols p{font-size:14.5px; color:#4A4E45}
@media (max-width:700px){.plus-minus-cols{grid-template-columns:1fr}}

.founder-card{display:flex; gap:var(--s4); align-items:center; background:var(--mist); padding:var(--s4); border:1px solid var(--line)}
.founder-card .avatar{width:76px; height:76px; border-radius:50%; background:var(--navy); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--paper); font-family:var(--f-serif-tc); font-size:24px; font-weight:900}
.founder-card .role{font-family:var(--f-utility); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate)}
.founder-card .name{font-family:var(--f-serif-tc); font-weight:900; font-size:20px; letter-spacing:.1em; margin-top:4px}
.founder-card .en{font-family:var(--f-utility); font-size:11.5px; letter-spacing:.14em; color:var(--navy); margin-top:2px}

/* ---------- tables ---------- */
table.d{width:100%; border-collapse:collapse; font-size:14px; margin-top:var(--s3)}
table.d th{font-family:var(--f-utility); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); text-align:left; padding:0 14px 11px 0; border-bottom:1px solid var(--ink); font-weight:600}
table.d td{padding:12px 14px 12px 0; border-bottom:1px solid var(--line); vertical-align:top}

/* ---------- contact / form ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:var(--s6); align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.info-block{margin-bottom:var(--s4)}
.info-block .label{font-family:var(--f-utility); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:6px; display:block}
.info-block .value{font-size:16px}
.info-block a.value:hover{color:var(--navy)}
.map-frame{width:100%; height:260px; border:1px solid var(--line); filter:grayscale(.3) contrast(1.05); margin-top:var(--s4)}
.social-row{display:flex; gap:14px; margin-top:var(--s4)}
.social-row a{width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--f-utility); font-size:11px; letter-spacing:.05em}
.social-row a:hover{border-color:var(--navy); color:var(--navy)}

.form-card{background:var(--paper); border:1px solid var(--line); padding:var(--s5)}
.field{margin-bottom:var(--s4)}
.field label{font-family:var(--f-utility); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:8px}
.field label .req{color:var(--red-a)}
.field input, .field select, .field textarea{
  width:100%; background:var(--paper); border:1px solid var(--line); padding:13px 14px; font-family:var(--f-sans-tc);
  font-size:15px; color:var(--ink); border-radius:2px;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--navy)}
.field textarea{resize:vertical; min-height:110px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.field-error{color:var(--red-a); font-size:12px; margin-top:6px; display:none}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--red-a)}
.field.invalid .field-error{display:block}
.form-note{font-size:12.5px; color:var(--slate); margin-top:var(--s3); line-height:1.7}
.form-success{display:none; text-align:center; padding:var(--s5) var(--s3)}
.form-success.show{display:block}
.form-success .mark{width:52px; height:52px; border-radius:50%; background:var(--navy); color:var(--paper); display:flex; align-items:center; justify-content:center; margin:0 auto var(--s3); font-size:22px}

/* ---------- footer ---------- */
footer{background:var(--forest); color:var(--paper); padding:var(--s6) 0 var(--s3)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s5)}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
footer h4{font-family:var(--f-utility); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#9CA398; margin-bottom:var(--s3); font-weight:600}
footer ul li{margin-bottom:10px; font-size:13.5px; color:#DEE2D8}
footer ul li a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid rgba(248,248,246,.12); margin-top:var(--s6); padding-top:var(--s3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--f-utility); font-size:10.5px; letter-spacing:.08em; color:#9CA398; text-transform:uppercase}

/* ---------- misc ---------- */
.tag-pill{display:inline-block; font-family:var(--f-utility); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); background:var(--mist); padding:5px 12px; border-radius:20px; margin-right:8px; margin-bottom:8px}
.divider{height:1px; background:var(--line); margin:var(--s6) 0}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
::selection{background:var(--navy); color:var(--paper)}

@media (max-width: 768px) {
  h1 { font-size: clamp(32px, 8vw, 48px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(24px, 6vw, 32px) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(20px, 5vw, 24px) !important; }
  .lead, p { font-size: 16px !important; }
  img { max-width: 100%; height: auto; object-fit: cover; }
  .hero, .project-hero, .hub-hero { min-height: 60vh !important; padding: 100px 0 !important; }
  .hero img, .project-hero img { height: 100% !important; object-fit: cover !important; }
}

@media (max-width: 768px) {
  svg, video, canvas, iframe { max-width: 100% !important; height: auto !important; }
  .brand-logo, .hero-svg, .mark { max-width: 80vw !important; height: auto !important; }
}

@media (max-width: 768px) {
  .concept-presentation-grid { grid-template-columns: 1fr !important; }
  .concept-visual, .concept-content { width: 100% !important; }
  .floorplan-container { aspect-ratio: 1/1 !important; padding: 12px !important; }
  .swatches-row { justify-content: flex-start !important; flex-wrap: wrap !important; }
  .project-spec-grid { grid-template-columns: 1fr 1fr !important; gap: 12px 16px !important; }
}