:root {
  --ink: #111310;
  --paper: #f2f0ea;
  --paper-2: #e6e2d8;
  --line: rgba(17, 19, 16, 0.2);
  --muted: #686b64;
  --signal: #b66f3e;
  --white: #fbfaf7;
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }

.shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(242,240,234,.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 13px; letter-spacing: -.02em; font-weight: 650; }
.brand-mark { width: 34px; height: 34px; display:grid; place-items:center; border:1px solid var(--ink); font: 700 12px/1 ui-monospace, monospace; }
.brand small { display:block; color:var(--muted); font-size:11px; font-weight:550; letter-spacing:.13em; text-transform:uppercase; }
.nav { display:flex; align-items:center; gap:26px; font-size:14px; }
.nav a { color:#3d403b; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--ink); }
.nav .nav-cta { border-bottom:1px solid var(--ink); padding-bottom:4px; }
.menu { display:none; border:0; background:none; padding:8px; }

.eyebrow { margin:0 0 20px; font: 650 12px/1.2 ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family: Georgia, "Times New Roman", serif; font-weight:400; letter-spacing:-.035em; }
h1 { font-size:clamp(3.6rem, 7.6vw, 8.4rem); line-height:.91; }
h2 { font-size:clamp(2.5rem, 5vw, 5.6rem); line-height:.98; }
h3 { font-size:clamp(1.55rem, 2.7vw, 2.45rem); line-height:1.08; }
.lede { font-size:clamp(1.18rem, 1.8vw, 1.65rem); line-height:1.42; max-width:720px; }
.muted { color:var(--muted); }
.button { display:inline-flex; align-items:center; gap:22px; padding:14px 0; border-bottom:1px solid currentColor; font-size:14px; font-weight:650; }
.button::after { content:"↗"; font-size:17px; }

.hero { min-height:calc(100vh - 82px); position:relative; color:white; display:flex; align-items:flex-end; overflow:hidden; background:#111; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,7,8,.9) 0%,rgba(4,7,8,.58) 38%,rgba(4,7,8,.05) 75%),url("./hero-development.png") center/cover no-repeat; transform:scale(1.002); }
.hero-content { position:relative; padding:10vh 0 8vh; width:100%; }
.hero h1 { max-width:980px; margin-bottom:34px; }
.hero-copy { display:grid; grid-template-columns:2fr 1fr; gap:8vw; align-items:end; }
.hero-copy p { max-width:640px; font-size:18px; color:rgba(255,255,255,.8); }
.hero-index { font:12px/1.5 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; border-left:1px solid rgba(255,255,255,.38); padding-left:20px; }

.section { padding:clamp(84px, 12vw, 170px) 0; border-bottom:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:1fr 2fr; gap:6vw; align-items:start; margin-bottom:80px; }
.section-head h2 { margin-bottom:0; }
.intro-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:9vw; align-items:start; }
.statement { font:400 clamp(2.25rem,4.2vw,4.75rem)/1.03 Georgia,serif; letter-spacing:-.04em; }
.statement em { color:var(--signal); font-style:normal; }
.rule-list { border-top:1px solid var(--ink); }
.rule { display:grid; grid-template-columns:54px 1fr; gap:18px; padding:24px 0; border-bottom:1px solid var(--line); }
.rule span { font:12px ui-monospace,monospace; color:var(--signal); }
.rule h3 { font:600 17px/1.2 Inter,sans-serif; letter-spacing:0; margin-bottom:8px; }
.rule p { color:var(--muted); margin-bottom:0; }

.dark { background:var(--ink); color:var(--white); }
.dark .muted { color:#a9aca5; }
.pillars { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.25); }
.pillar { padding:34px 34px 62px 0; border-right:1px solid rgba(255,255,255,.22); }
.pillar + .pillar { padding-left:34px; }
.pillar:last-child { border-right:0; }
.pillar .num { font:12px ui-monospace,monospace; color:#c98b60; display:block; margin-bottom:80px; }
.pillar p { color:#b8bbb4; max-width:340px; }

.process { display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--ink); }
.step { min-height:215px; padding:22px 18px; border-right:1px solid var(--line); position:relative; }
.step:last-child { border-right:0; }
.step span { display:block; font:12px ui-monospace,monospace; color:var(--signal); margin-bottom:78px; }
.step strong { font-size:14px; }

.project-feature { display:grid; grid-template-columns:1.45fr .55fr; min-height:680px; background:#20231f; color:white; }
.project-art { min-height:560px; background:url("./1617-19-avenue-rendering.png") center/cover no-repeat; }
.project-copy { padding:clamp(40px,6vw,88px); display:flex; flex-direction:column; justify-content:space-between; }
.meta { display:grid; gap:16px; margin:34px 0; }
.meta div { display:flex; justify-content:space-between; gap:20px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.2); font-size:13px; }
.meta span { color:#aeb2aa; }

.insight-grid { display:grid; grid-template-columns:1fr 1fr; gap:10vw; }
.matrix { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.matrix div { min-height:190px; padding:24px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.matrix b { display:block; font:12px ui-monospace,monospace; color:var(--signal); margin-bottom:52px; }
.matrix span { font-family:Georgia,serif; font-size:22px; }

.page-hero { padding:clamp(90px,14vw,190px) 0 90px; border-bottom:1px solid var(--line); }
.page-hero h1 { max-width:1200px; }
.page-hero .lede { margin-left:auto; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:10vw; }
.split + .split { margin-top:100px; }
.service-row { display:grid; grid-template-columns:80px 1fr 1fr; gap:3vw; padding:34px 0; border-top:1px solid var(--line); align-items:start; }
.service-row:last-child { border-bottom:1px solid var(--line); }
.service-row > span { font:12px ui-monospace,monospace; color:var(--signal); }
.service-row h3 { margin:0; }
.service-row p { color:var(--muted); margin:0; }
.project-card { border-top:1px solid var(--ink); padding:28px 0 56px; display:grid; grid-template-columns:1fr 1.2fr; gap:6vw; }
.project-card .thumb { aspect-ratio:16/10; background:url("./1617-19-avenue-rendering.png") center/cover; }
.tag { display:inline-block; padding:6px 10px; border:1px solid currentColor; font:11px ui-monospace,monospace; text-transform:uppercase; letter-spacing:.1em; }
.case-hero { height:68vh; min-height:520px; background:linear-gradient(0deg,rgba(0,0,0,.68),transparent 43%),url("./1617-19-avenue-rendering.png") center 44%/cover; color:white; display:flex; align-items:end; }
.case-hero .shell { padding-bottom:72px; }
.case-hero h1 { max-width:900px; margin-bottom:0; }
.concept-note { display:inline-block; margin-top:18px; padding:7px 10px; border:1px solid rgba(255,255,255,.55); font:10px ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
.fact-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }
.fact { padding:22px 22px 50px 0; border-right:1px solid var(--line); }
.fact + .fact { padding-left:22px; }
.fact:last-child { border-right:0; }
.fact span { display:block; font:11px ui-monospace,monospace; color:var(--muted); text-transform:uppercase; margin-bottom:34px; }
.fact strong { font-family:Georgia,serif; font-size:27px; font-weight:400; }

.contact-panel { display:grid; grid-template-columns:1.25fr .75fr; min-height:520px; }
.contact-panel > div { padding:clamp(44px,7vw,100px); }
.contact-panel .dark { display:flex; flex-direction:column; justify-content:space-between; }
.contact-lines a { display:block; padding:22px 0; border-top:1px solid rgba(255,255,255,.24); font-size:18px; }
.contact-lines a:last-child { border-bottom:1px solid rgba(255,255,255,.24); }
.footer { padding:54px 0 32px; background:#0a0b09; color:#d7d7d1; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; }
.footer .brand { color:white; }
.footer p,.footer a { color:#8f928b; font-size:13px; }
.legal { margin-top:72px; padding-top:22px; border-top:1px solid #2c2e2a; display:flex; justify-content:space-between; color:#777b73; font-size:12px; }

@media (max-width: 900px) {
  .shell { width:min(calc(100% - 32px),var(--max)); }
  .header-inner { height:70px; }
  .nav { display:none; position:absolute; left:0; right:0; top:70px; background:var(--paper); padding:24px; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .menu { display:block; }
  .hero { min-height:800px; }
  .hero::before { background:linear-gradient(0deg,rgba(4,7,8,.9) 0%,rgba(4,7,8,.2) 75%),url("./hero-development.png") 64% center/cover no-repeat; }
  .hero-copy,.section-head,.intro-grid,.insight-grid,.split,.project-feature,.project-card,.contact-panel { grid-template-columns:1fr; }
  .hero-index { display:none; }
  .section-head { margin-bottom:50px; }
  .pillars { grid-template-columns:1fr; }
  .pillar,.pillar + .pillar { padding:32px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.22); }
  .pillar .num { margin-bottom:28px; }
  .process { grid-template-columns:1fr 1fr; }
  .step:nth-child(2n) { border-right:0; }
  .step span { margin-bottom:38px; }
  .project-art { min-height:430px; }
  .service-row { grid-template-columns:44px 1fr; }
  .service-row p { grid-column:2; }
  .fact-grid { grid-template-columns:1fr 1fr; }
  .fact:nth-child(2) { border-right:0; }
  .footer-grid { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  h1 { font-size:3.45rem; }
  .brand-name { max-width:210px; }
  .process,.matrix,.fact-grid { grid-template-columns:1fr; }
  .step,.step:nth-child(2n),.fact,.fact:nth-child(2) { border-right:0; border-bottom:1px solid var(--line); }
  .fact + .fact { padding-left:0; }
  .legal { flex-direction:column; gap:10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }
  .reveal.visible { opacity:1; transform:none; }
}

/* Supplied Calgary Brothers Development identity */
.site-header { background:#090909; border-bottom:1px solid #342b1b; backdrop-filter:none; }
.header-inner { height:110px; }
.site-header .brand { flex:none; }
.brand-logo { width:205px; height:auto; }
.site-header .nav a { color:#f9f4e9; }
.site-header .nav a:hover,.site-header .nav a[aria-current="page"] { color:#e4bf78; }
.site-header .nav .nav-cta { border-color:#d8b576; }
.site-header .menu { color:#f9f4e9; }
.footer .brand-logo { width:310px; }
@media (max-width:900px) {
  .header-inner { height:86px; }
  .site-header .brand-logo { width:155px; }
  .site-header .nav { top:86px; background:#090909; border-color:#342b1b; }
}

/* True-alpha brand artwork; no rectangular image matte. */
.brand-logo { object-fit:contain; }
.project-card .thumb, .project-art { background-color:#20231f; }

/* Keep project descriptions and actions in normal flow at every text size. */
.project-card { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:start; row-gap:32px; }
.project-card > div { min-width:0; }
.project-card .lede { max-width:100%; overflow-wrap:break-word; }
.project-card .button { position:static; margin-top:8px; }
.project-card + .project-card { margin-top:48px; }
@media (max-width:900px) { .project-card { grid-template-columns:minmax(0,1fr); } }
.contact-lines a { overflow-wrap:anywhere; }

.commercial-gallery { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-top:28px; }
.commercial-gallery figure { margin:0; min-width:0; }
.commercial-gallery img { width:100%; aspect-ratio:4 / 3; object-fit:cover; background:#20231f; }
.commercial-gallery figcaption { display:grid; gap:5px; padding-top:16px; }
.commercial-gallery figcaption span { font:600 11px/1.4 ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--signal); }
.commercial-gallery figcaption strong { font:400 clamp(1.45rem,2vw,2rem)/1.15 Georgia,serif; }
.commercial-gallery figcaption small { font-size:14px; color:var(--muted); }
.gallery-note { grid-column:1 / -1; margin:8px 0 0; font-size:13px; color:var(--muted); }
@media (max-width:700px) { .commercial-gallery { grid-template-columns:1fr; gap:32px; } }