:root {
  --page: min(80vw, 1320px);
  --black: #111111;
  --text: #171717;
  --muted: #666666;
  --light: #f2f2f2;
  --soft: #eeeeee;
  --white: #ffffff;
  --accent: #ef6c21;
  --accent-dark: #c74f10;
  --line: #dedede;
  --shadow: 0 28px 70px rgba(0,0,0,.12);
  --radius: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--white);
  color: var(--text);
  font-family: Montserrat, Poppins, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.page-shell { width: var(--page); max-width: 1320px; margin-inline: auto; }

.site-header {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: #fff;
}
.logo { text-decoration: none; color: #6f6f6f; display: inline-flex; align-items: baseline; gap: 8px; letter-spacing: .02em; }
.logo span { font-size: 1.55rem; font-weight: 820; color: #5f5f5f; }
.logo small { font-size: .82rem; color: #8c8c8c; font-weight: 750; }
.desktop-nav { display: none; gap: 28px; color: #444; font-size: .9rem; font-weight: 800; }
.desktop-nav a { text-decoration: none; }
.desktop-nav a:hover { color: var(--accent); }
.hamburger { width: 42px; height: 32px; display: grid; align-content: center; gap: 6px; text-decoration: none; }
.hamburger span { display: block; height: 3px; background: var(--black); width: 100%; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(38px, 6vw, 86px);
  min-height: calc(100vh - 92px);
  padding: 20px 0 74px;
}
.hero::after {
  content: "";
  position: absolute;
  right: 0;
  top: 54px;
  width: clamp(86px, 11vw, 170px);
  height: calc(100% - 150px);
  background: var(--soft);
  z-index: -1;
}
.hero-photo { position: relative; align-self: stretch; min-height: 610px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.photo-credit {
  position: absolute;
  left: 28px;
  bottom: 24px;
  margin: 0;
  padding: 10px 16px;
  background: rgba(255,255,255,.88);
  color: #333;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-copy { min-width: 0; }
.kicker {
  margin: 0 0 18px;
  color: var(--accent);
  text-transform: uppercase;
  font-size: .82rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .16em;
}
h1, h2, h3 { margin: 0; color: var(--black); line-height: 1.03; letter-spacing: -.045em; }
h1 { font-size: clamp(3.1rem, 5.5vw, 6.25rem); font-weight: 900; }
h2 { font-size: clamp(2.05rem, 3.8vw, 4.65rem); font-weight: 900; }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.7rem); font-weight: 900; }
p { margin: 0; }
.lead { margin-top: 28px; font-size: clamp(1.04rem, 1.3vw, 1.28rem); color: #555; max-width: 690px; }
.hero-bullets { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 15px; color: #242424; font-weight: 780; }
.hero-bullets li { position: relative; padding-left: 34px; }
.hero-bullets li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--accent);
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.btn-dark, .btn-line, .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 25px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
  border: 2px solid var(--black);
  cursor: pointer;
}
.btn-dark { background: var(--black); color: #fff; }
.btn-dark:hover { background: var(--accent); border-color: var(--accent); }
.btn-line { background: transparent; color: var(--black); }
.btn-line:hover { color: var(--accent); border-color: var(--accent); }
.text-link { margin-top: 24px; border-color: var(--accent); color: var(--accent); background: #fff; }

.company {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(34px, 6vw, 90px);
  padding: 88px 0 82px;
}
.company-copy { display: grid; gap: 18px; color: #555; font-size: 1.03rem; }
.stage {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: clamp(34px, 5vw, 72px);
  padding: 34px 0 96px;
}
.stage-image img { width: 100%; height: 560px; object-fit: cover; }
.stage-card { background: var(--light); padding: clamp(30px, 5vw, 72px); }
.service-list { display: grid; gap: 24px; margin-top: 34px; }
.service-list article { display: grid; grid-template-columns: 54px 1fr; gap: 0 18px; border-top: 1px solid #d4d4d4; padding-top: 20px; }
.service-list span { color: var(--accent); font-weight: 950; }
.service-list strong { font-size: 1.1rem; color: var(--black); }
.service-list p { grid-column: 2; color: #5b5b5b; margin-top: 5px; }
.quote-band { background: var(--black); color: #fff; margin: 20px 0 92px; }
.quote-inner { padding: clamp(50px, 7vw, 96px) 0; }
.quote-inner h2 { color: #fff; max-width: 1120px; font-size: clamp(2rem, 3.9vw, 4.4rem); }

.portfolio { padding: 0 0 90px; }
.section-head { display: grid; grid-template-columns: .55fr 1.45fr; gap: 28px; align-items: end; margin-bottom: 34px; }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 245px;
  gap: 18px;
}
.portfolio-grid figure { position: relative; margin: 0; overflow: hidden; background: #ddd; }
.portfolio-grid .wide { grid-column: span 2; grid-row: span 2; }
.portfolio-grid .tall { grid-row: span 2; }
.portfolio-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.portfolio-grid figure:hover img { transform: scale(1.04); }
.portfolio-grid figcaption {
  position: absolute; left: 18px; bottom: 16px;
  background: rgba(255,255,255,.92);
  padding: 9px 13px;
  color: #111;
  font-weight: 900;
  font-size: .86rem;
}

.analysis {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(26px, 5vw, 72px);
  align-items: start;
  padding: 10px 0 96px;
}
.analysis-cards { display: grid; gap: 16px; }
.analysis-cards article { border: 1px solid var(--line); padding: 24px; display: grid; gap: 8px; }
.analysis-cards strong { font-size: 1.18rem; color: var(--black); }
.analysis-cards span { color: #666; }
.form-section {
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
  padding: 86px 0;
  border-top: 1px solid var(--line);
}
.form-intro { position: sticky; top: 24px; }
.form-intro p { margin-top: 22px; color: #555; font-size: 1.04rem; }
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--light);
}
.form label { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #111; font-weight: 900; font-size: .94rem; }
.form input, .form select, .form textarea {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-bottom: 2px solid #cfcfcf;
  background: #fff;
  color: #111;
  padding: 13px 14px;
  font: inherit;
  outline: none;
  border-radius: 0;
}
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-bottom-color: var(--accent); }
.full { grid-column: 1 / -1; }
.hidden-field { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; }
.form-options { display: grid; gap: 10px; padding: 8px 0; }
.check { flex-direction: row !important; align-items: flex-start; gap: 11px !important; font-weight: 750 !important; color: #333 !important; }
.check input { width: 18px; height: 18px; min-height: auto; accent-color: var(--accent); margin-top: 3px; }
.required { background: #fff; padding: 13px 15px; border-left: 5px solid var(--accent); }
.result {
  margin: 0 auto 64px;
  padding: clamp(28px, 4vw, 54px);
  background: var(--black);
  color: #fff;
}
.result h2, .result h3 { color: #fff; }
.result .kicker, .result .eyebrow { color: #ff9a58; }
.hidden { display: none; }
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0; }
.metric { background: #fff; color: #555; padding: 20px; }
.metric strong { display: block; color: #111; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.1; margin-top: 8px; overflow-wrap: anywhere; }
.sources { display: grid; gap: 12px; margin-top: 14px; }
.source { background: #1d1d1d; border: 1px solid #333; padding: 15px; overflow-wrap: anywhere; }
.source a { color: #ff9a58; }
.muted, .fine { color: #aaa; }
.ok { color: #73d19a; }
.warn { color: #ffb185; }
.final-note { padding: 56px 0 80px; border-top: 1px solid var(--line); }
.final-note h2 { font-size: clamp(1.8rem, 3vw, 3rem); }
.final-note p { max-width: 980px; color: #555; margin-top: 18px; }
.footer { min-height: 86px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #666; font-weight: 800; }
.footer a { color: var(--accent); text-decoration: none; }

@media (max-width: 1180px) {
  :root { --page: min(88vw, 1060px); }
  .hero, .company, .stage, .analysis, .form-section { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-photo { min-height: 520px; }
  .form-intro { position: static; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --page: calc(100vw - 32px); }
  .site-header { min-height: 74px; }
  .desktop-nav { display: none; }
  .logo small { display: none; }
  .hero { gap: 28px; padding-bottom: 46px; }
  .hero::after { right: -16px; width: 86px; height: 62%; top: 120px; }
  .hero-photo { min-height: 360px; order: 1; }
  .hero-copy { order: 2; }
  h1 { font-size: clamp(2.45rem, 13vw, 4rem); }
  h2 { font-size: clamp(2rem, 10vw, 3.2rem); }
  .hero-actions a, .form button { width: 100%; }
  .company, .stage, .form-section { padding: 52px 0; }
  .stage-image img { height: 360px; }
  .stage-card { padding: 28px 22px; }
  .portfolio-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .portfolio-grid .wide, .portfolio-grid .tall { grid-column: auto; grid-row: auto; }
  .analysis { padding-bottom: 52px; }
  .form, .result-grid { grid-template-columns: 1fr; }
  .footer { flex-direction: column; align-items: flex-start; padding: 26px 0; }
}
@media (max-width: 420px) {
  :root { --page: calc(100vw - 22px); }
  .photo-credit { left: 14px; right: 14px; bottom: 14px; }
  .form { padding: 18px; }
}