/* ===========================================================
   K&J ARCHITECTURE — shared stylesheet
   =========================================================== */

:root{
  --red: #D22B2B;
  --red-dark: #B32020;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --bg: #ffffff;
  --bg-alt: #f7f6f3;
  --line: #e4e1da;
  --cream: #f2efe9;
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-weight:400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:700; margin:0; line-height:1.1; letter-spacing:-0.01em; }
p{ margin:0; font-weight:400; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

.wrap{ max-width: 1240px; margin:0 auto; padding:0 40px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:15px 26px; border:1px solid var(--ink); color:var(--ink);
  background:transparent; white-space:nowrap;
}
.btn:hover{ background: var(--ink); color:#fff; }
.btn.on-dark{ border-color:#fff; color:#fff; }
.btn.on-dark:hover{ background:#fff; color:var(--ink); }
.btn.solid{ background: var(--red); border-color:var(--red); color:#fff; }
.btn.solid:hover{ background: var(--red-dark); border-color:var(--red-dark); }
.btn.ghost-red{ border-color: var(--red); color:var(--red); }
.btn.ghost-red:hover{ background:var(--red); color:#fff; }

.eyebrow{
  color:var(--red); font-family: var(--font-display); font-weight:700;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  padding-left:20px; position:relative; margin-bottom:14px; display:block;
}
.eyebrow::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:12px; height:2px; background:var(--red);
}
.dot{ color:var(--red); }

/* ---------- Header ---------- */
header.site{
  border-bottom:1px solid var(--line);
  position: sticky; top:0; background:#fff; z-index:100;
}
.nav-inner{
  max-width:1240px; margin:0 auto; padding:18px 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:38px; height:38px; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:17px; letter-spacing:-0.03em;
  flex-shrink:0;
}
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:16px; letter-spacing:.04em; }
.brand-logo{ height:34px; width:auto; display:block; }
.footer-logo{ height:30px; width:auto; display:block; }
.wechat-box{ display:flex; align-items:center; }
.wechat-box a{ display:block; line-height:0; }
.wechat-box img{ height:36px; width:36px; object-fit:contain; border:1px solid var(--line); padding:2px; background:#fff; cursor:zoom-in; transition:transform .15s ease; }
.wechat-box img:hover{ transform:scale(1.08); border-color:var(--red); }
nav.primary ul{ display:flex; gap:34px; }
nav.primary a{
  font-family: var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  padding-bottom:6px; border-bottom:2px solid transparent;
}
nav.primary a:hover{ color:var(--ink); }
nav.primary a.active{ color:var(--red); border-bottom-color:var(--red); }

/* ---------- Page header block (non-home pages) ---------- */
.page-head{ padding:64px 0 48px; }
.page-head .grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:60px; align-items:center; }
.page-head h1{ font-size:56px; font-weight:700; margin-bottom:18px; }
.page-head .lead{ font-size:17px; font-weight:700; margin-bottom:14px; }
.page-head .desc{ color:var(--ink-soft); font-size:15px; max-width:520px; }
.page-head .rule{ width:60px; height:3px; background:var(--red); margin-bottom:22px; }
.sketch-box{
  aspect-ratio: 4/3; background:var(--bg-alt); border:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}

/* ---------- Hero (home) ---------- */
.hero{ position:relative; aspect-ratio: 1832 / 691; min-height:500px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero-media{
  position:absolute; top:0;left:0;right:0;bottom:0;
  background:
    linear-gradient(100deg, rgba(10,10,12,.82) 0%, rgba(10,10,12,.5) 42%, rgba(10,10,12,.15) 70%),
    url("images/projects/stanmore-bay-1.jpg");
  background-size: cover;
  background-position: center;
}
.hero-content{ position:relative; padding:100px 0; max-width:600px; }
.hero-content h1{ font-size:52px; font-weight:700; margin-bottom:22px; }
.hero-content .sub{ font-size:16px; font-weight:700; line-height:1.6; margin-bottom:16px; }
.hero-content .rule{ width:50px; height:3px; background:var(--red); margin:20px 0; }
.hero-content .desc{ font-size:14.5px; color:#d9d9d9; max-width:420px; margin-bottom:34px; }

/* ---------- Two-col feature ---------- */
.feature{ padding:90px 0; }
.feature .grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:64px; align-items:center; }
.feature h2{ font-size:32px; font-weight:700; margin-bottom:18px; }
.feature p{ color:var(--ink-soft); font-size:15px; margin-bottom:16px; }
.photo-box{ display:flex; align-items:center; justify-content:center; overflow:hidden; }
.photo-box img{ width:100%; height:auto; max-height:100%; object-fit:contain; }

/* ---------- Stats ---------- */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0; }
.stats .grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.stat{ display:flex; gap:16px; align-items:flex-start; }
.stat .icon{ color:var(--red); flex-shrink:0; margin-top:2px; }
.stat .num{ font-family: var(--font-display); font-size:26px; font-weight:700; line-height:1; }
.stat .label{ color:var(--red); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:6px 0 4px; }
.stat .sub{ font-size:13px; color:var(--ink-soft); }

/* ---------- Section heads ---------- */
.section{ padding:90px 0; }
.section.alt{ background:var(--bg-alt); }
.section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:38px; gap:20px; flex-wrap:wrap; }
.section-head h2{ font-size:32px; font-weight:700; }
.view-all{ font-family: var(--font-display); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:8px; color:var(--ink); }

/* ---------- Project cards / placeholder art ---------- */
.proj-media{
  position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--ink);
}
.proj-media .art{ position:absolute; top:0;left:0;right:0;bottom:0; background-size:cover; background-position:center; }
.proj-media img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.art{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M0 160 L60 100 L120 160'/%3E%3Cpath d='M60 100 L60 40'/%3E%3Cpath d='M120 160 L180 100 L240 160'/%3E%3Crect x='20' y='160' width='24' height='40'/%3E%3Crect x='80' y='170' width='18' height='30'/%3E%3Crect x='140' y='160' width='24' height='40'/%3E%3Crect x='200' y='170' width='18' height='30'/%3E%3Cline x1='0' y1='200' x2='240' y2='200'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(150deg, var(--a1) 0%, var(--a2) 100%);
}
.art.c1{ --a1:#3d4450; --a2:#181b20; }
.art.c2{ --a1:#4a4038; --a2:#211c17; }
.art.c3{ --a1:#38434a; --a2:#15191c; }
.art.c4{ --a1:#4c4642; --a2:#221e1b; }
.art.c5{ --a1:#3a3f47; --a2:#1a1c1f; }
.art.c6{ --a1:#453e3a; --a2:#1e1a17; }
.art.c7{ --a1:#333b45; --a2:#14171c; }
.art.c8{ --a1:#463f36; --a2:#201c17; }
.art.blueprint{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%236b7a8a' stroke-opacity='0.35' stroke-width='1'%3E%3Crect x='30' y='40' width='240' height='160'/%3E%3Cline x1='30' y1='90' x2='270' y2='90'/%3E%3Cline x1='120' y1='40' x2='120' y2='200'/%3E%3Cline x1='190' y1='90' x2='190' y2='200'/%3E%3Cpath d='M30 40 L150 10 L270 40'/%3E%3Ccircle cx='150' cy='230' r='26'/%3E%3Cline x1='150' y1='204' x2='150' y2='256'/%3E%3Cline x1='124' y1='230' x2='176' y2='230'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg,#eef0ee 0%, #e3e6e2 100%);
}
.proj-media .tag{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px 22px 16px;
  background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%);
  color:#fff;
}
.proj-media .tag h3{ font-size:19px; font-weight:700; }
.proj-media .tag .type{ font-size:12.5px; color:#e6e6e6; margin-top:3px; }
.proj-media .tag .loc{ font-size:12px; color:#cfcfcf; margin-top:6px; display:flex; align-items:center; gap:5px; }

/* ---------- Project card photo gallery ---------- */
.gallery{ position:absolute; top:0; left:0; right:0; bottom:0; }
.g-slide{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease; }
.g-slide.active{ opacity:1; }
.g-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; z-index:3;
  opacity:0; transition:opacity .15s ease, background .15s ease; font-size:16px; line-height:1;
}
.proj-media:hover .g-arrow{ opacity:1; }
.g-prev{ left:10px; }
.g-next{ right:10px; }
.g-arrow:hover{ background:rgba(0,0,0,.75); }
.g-dots{ position:absolute; bottom:54px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:3; }
.g-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); border:none; padding:0; cursor:pointer; }
.g-dot.active{ background:#fff; width:16px; border-radius:3px; transition:width .2s ease; }

.proj-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.proj-grid a.span2{ grid-column: span 2; }

/* Home featured layout: 2 big + 3 small */
.feat-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; margin-bottom:22px; }
.feat-grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }

/* ---------- Filter bar (projects/services) ---------- */
.filterbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:40px; flex-wrap:wrap; gap:16px;
}
.filterbar .tabs{ display:flex; gap:30px; flex-wrap:wrap; }
.filterbar .tabs a{
  font-family: var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); padding-bottom:16px; border-bottom:2px solid transparent; margin-bottom:-21px;
}
.filterbar .tabs a.active{ color:var(--red); border-bottom-color:var(--red); }
.sortby{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); }
.sortby select{ border:1px solid var(--line); padding:8px 12px; font-family:inherit; font-size:13px; background:#fff; }

/* ---------- Process steps ---------- */
.process-row{ display:grid; grid-template-columns: repeat(5,1fr); gap:0; position:relative; margin-top:40px; }
.process-row::before{
  content:''; position:absolute; top:26px; left:52px; right:52px; height:1px;
  background-image: linear-gradient(to right, var(--line) 50%, transparent 0%);
  background-size: 10px 1px; background-repeat: repeat-x;
}
.process-step{ text-align:center; padding:0 10px; position:relative; }
.process-step .circle{
  width:52px; height:52px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; background:#fff; color:var(--red);
  position:relative; z-index:1;
}
.process-step .n{ color:var(--red); font-family:var(--font-display); font-size:12px; font-weight:700; margin-bottom:6px; letter-spacing:.05em; }
.process-step .t{ font-family:var(--font-display); font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.process-step .d{ font-size:12.5px; color:var(--ink-soft); }

/* concept-to-construction (home) 4-col with icons */
.concept-grid{ display:grid; grid-template-columns: .8fr repeat(4,1fr); gap:34px; align-items:start; }
.concept-intro h2{ font-size:30px; font-weight:700; margin-bottom:18px; }
.concept-sketch{ margin-top:22px; opacity:.9; }
.concept-item .n{ color:var(--red); font-family:var(--font-display); font-weight:700; font-size:13px; margin-bottom:10px; }
.concept-item h4{ font-size:15.5px; font-weight:700; margin-bottom:8px; }
.concept-item p{ font-size:13px; color:var(--ink-soft); }
.concept-item .icon{ color:var(--red); margin-bottom:16px; }

/* ---------- Service cards ---------- */
.svc-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.svc-card{ border:1px solid var(--line); }
.svc-media{ aspect-ratio: 4/2.7; overflow:hidden; background:var(--bg-alt); }
.svc-media img, .svc-media .art{ width:100%; height:100%; object-fit:cover; }
.svc-body{ padding:22px; }
.svc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.svc-icon{ color:var(--red); }
.svc-n{ color:var(--red); font-family:var(--font-display); font-weight:700; font-size:14px; }
.svc-body h3{ font-size:18px; font-weight:700; margin-bottom:10px; }
.svc-body p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; }
.svc-body .arrow{ color:var(--red); font-weight:700; }
.svc-note{ display:flex; gap:16px; align-items:center; margin-top:26px; padding-top:26px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:13.5px; }
.svc-note .rule-v{ width:24px; height:2px; background:var(--red); flex-shrink:0; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: var(--cream); padding:38px 0; border-top:1px solid var(--line);
}
.cta-banner .row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cta-banner .left{ display:flex; align-items:center; gap:18px; }
.cta-banner .arrow-badge{ color:var(--red); }
.cta-banner h3{ font-size:22px; font-weight:700; margin-bottom:4px; }
.cta-banner p{ color:var(--ink-soft); font-size:14px; }

/* ---------- Footer ---------- */
footer.site{ background:#fff; padding:40px 0 0; }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; padding-bottom:30px; }
.footer-brand{ display:flex; gap:14px; }
.footer-brand .txt{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:4px; }
.footer-brand .name{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.footer-contact{ display:flex; gap:40px; flex-wrap:wrap; font-size:13.5px; }
.footer-contact .item{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); }
.footer-contact .item svg{ color:var(--red); flex-shrink:0; margin-top:2px; }

.footer-bottom{
  border-top:1px solid var(--line); padding:18px 0; display:flex; justify-content:space-between;
  font-size:12px; color:#8a8a8a; flex-wrap:wrap; gap:8px;
}

/* ---------- Contact / info bar ---------- */
.infobar{ padding:44px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.infobar .grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; text-align:center; }
.infobar .item .icon{ color:var(--red); margin-bottom:12px; }
.infobar .item h4{ font-size:16px; font-weight:700; margin-bottom:8px; }
.infobar .item p{ font-size:13px; color:var(--ink-soft); }

.map-row{ padding:60px 0; display:grid; grid-template-columns: 1.3fr 1fr; gap:50px; align-items:center; }
.map-box{ aspect-ratio: 16/10; background:var(--bg-alt); border:1px solid var(--line); position:relative; overflow:hidden; }
.map-pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  background:#fff; border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:12px 16px; font-size:12.5px; min-width:200px;
}
.map-pin b{ display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom:4px;}
.map-directions h3{ font-size:24px; font-weight:700; margin-bottom:16px; }
.map-directions p{ color:var(--ink-soft); font-size:14px; margin-bottom:22px; }

.contact-row{ padding:0 0 90px; display:grid; grid-template-columns: 1.4fr 1fr; gap:36px; }
.form-box .eyebrow{ margin-bottom:10px; }
.form-box h2{ font-size:26px; font-weight:700; margin-bottom:24px; }
.field{ margin-bottom:14px; }
.field input, .field textarea{
  width:100%; border:1px solid var(--line); padding:14px 16px; font-family:inherit; font-size:14px; background:#fff;
}
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.talk-box{ background:var(--bg-alt); padding:32px; border:1px solid var(--line); height:fit-content; }
.talk-box .bubble{ color:var(--red); margin-bottom:18px; }
.talk-box h3{ font-size:19px; font-weight:700; margin-bottom:10px; }
.talk-box p{ font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; }
.talk-box .row{ display:flex; gap:10px; align-items:center; font-size:14px; font-weight:700; margin-bottom:10px; }
.talk-box .row svg{ color:var(--red); }

/* ---------- Team ---------- */

.team-big {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  margin-bottom: 50px;
}

.team-card {
  display: block;
}

.team-card .photo {
  aspect-ratio: 3 / 3.6;
  overflow: hidden;
  background: var(--bg-alt);
}

.team-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.team-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.team-card .role {
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.team-card .rule {
  width: 30px;
  height: 2px;
  background: var(--line);
  margin-bottom: 14px;
}

.team-card p {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.team-small-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.team-small .photo {
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
  background: var(--bg-alt);
  margin-bottom: 16px;
}

.team-small .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-small h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.team-small .role {
  color: var(--red);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.team-small p {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.team-heading {
  text-align: center;
  margin-bottom: 44px;
}

.team-heading h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.team-heading p {
  color: var(--ink-soft);
  font-size: 14px;
}

/* ---------- About leader boxes / values ---------- */
.leader-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:26px; margin-top:70px; }
.leader-box{ background:var(--bg-alt); padding:30px; border-left:3px solid var(--red); }
.leader-box .tag{ color:var(--red); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.leader-box h3{ font-size:22px; font-weight:700; margin-bottom:14px; }
.leader-box p{ font-size:13.5px; color:var(--ink-soft); }
.values-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:24px; margin-top:70px; text-align:center; }
.value-item .icon{ color:var(--red); margin-bottom:14px; }
.value-item h4{ font-size:14.5px; font-weight:700; margin-bottom:8px; }
.value-item p{ font-size:12px; color:var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  nav.primary{ display:none; }
  .page-head .grid, .feature .grid, .concept-grid, .stats .grid, .leader-grid,
  .team-big, .team-card, .team-small-grid, .values-grid, .infobar .grid,
  .map-row, .contact-row, .field-row, .proj-grid, .feat-grid, .feat-grid3, .svc-grid, .process-row{
    grid-template-columns: 1fr !important;
  }
  .process-row::before{ display:none; }
  .hero-content h1{ font-size:38px; }
  .page-head h1{ font-size:38px; }
}