/* ==========================================================================
   Monumental Stair Specialists — WebPro360 rebuild
   Dark editorial atelier. Charcoal + bone + antique brass. Fraunces + Inter.
   ========================================================================== */

:root {
  --char:        oklch(19% 0.008 60);   /* near-black warm charcoal */
  --char-deep:   oklch(14% 0.006 60);   /* deepest */
  --char-raise:  oklch(24% 0.009 62);   /* raised surface */
  --char-soft:   oklch(28% 0.01 62);
  --bone:        oklch(92% 0.012 78);   /* warm off-white text */
  --bone-dim:    oklch(72% 0.012 78);   /* muted */
  --bone-faint:  oklch(56% 0.012 74);   /* faint labels */
  --brass:       oklch(72% 0.086 74);   /* antique brass accent */
  --brass-bright:oklch(80% 0.1 78);
  --espresso:    oklch(38% 0.035 52);   /* wood secondary */
  --line:        oklch(32% 0.008 60);   /* hairline */
  --line-faint:  oklch(26% 0.007 60);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --container: 1220px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--bone);
  background: var(--char);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Fraunces optical/soft settings for editorial warmth */
h1, h2, h3, .serif { font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wide { max-width: 1600px; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--brass); opacity: 0.7; }

.lede { color: var(--bone-dim); font-size: 1.12rem; line-height: 1.75; max-width: 60ch; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brass); color: var(--char-deep); padding: 12px 20px; z-index: 200; font-weight: 700; }
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.86rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 16px 30px; border: 1px solid transparent; cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn-brass { background: var(--brass); color: var(--char-deep); }
.btn-brass:hover { background: var(--brass-bright); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn .arw { transition: transform .4s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* text link with brass underline */
.tlink { color: var(--bone); border-bottom: 1px solid var(--brass); padding-bottom: 3px; transition: color .3s var(--ease); }
.tlink:hover { color: var(--brass); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  transition: background-color .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { background: oklch(14% 0.006 60 / 0.86); backdrop-filter: blur(14px) saturate(1.1); padding-block: 14px; border-bottom-color: var(--line-faint); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 34px; width: auto; }
.brand-word { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: 0.02em; color: var(--bone); line-height: 1; }
.brand-word span { display: block; font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone-faint); margin-top: 5px; }

.nav { display: flex; align-items: center; gap: 38px; }
.nav a { font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); transition: color .3s var(--ease); }
.nav a:hover { color: var(--bone); }
.header-cta { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--brass); }
.header-cta:hover { color: var(--brass-bright); }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--bone); width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; }

.mobile-nav { position: fixed; inset: 0; z-index: 150; background: var(--char-deep); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: var(--gutter); transform: translateY(-100%); transition: transform .6s var(--ease); }
.mobile-nav.open { transform: translateY(0); }
.mobile-nav a { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.4rem); color: var(--bone); padding: 8px 0; }
.mobile-nav a:hover { color: var(--brass); }
.mobile-nav .close { position: absolute; top: 24px; right: var(--gutter); background: none; border: none; color: var(--bone); font-size: 1.4rem; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Narrow viewports crop a tall slice out of the square hero photo; the default
   centre crop lands on the dark wood column. Bias right so the lit window band
   stays in frame and the mobile hero reads as bright as the desktop one. */
@media (max-width: 940px) { .hero-media img { object-position: 68% center; } }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(14% 0.006 60 / 0.72) 0%, oklch(14% 0.006 60 / 0.32) 34%, oklch(14% 0.006 60 / 0.66) 78%, var(--char) 100%); }
/* Second scrim, shaped to wherever the copy sits, so the brighter photo cannot
   cost the hero text its contrast. Desktop: darkens the left copy column and
   leaves the right of the photo bright. Mobile: the crop is bright at the
   bottom, so darken downward and leave the top of the photo untouched. */
.hero-media::before { content: ""; position: absolute; inset: 0; }
@media (min-width: 941px) {
  .hero-media::before { background: linear-gradient(90deg, oklch(14% 0.006 60 / 0.74) 0%, oklch(14% 0.006 60 / 0.60) 34%, oklch(14% 0.006 60 / 0.22) 58%, oklch(14% 0.006 60 / 0) 74%); }
}
@media (max-width: 940px) {
  .hero-media::before { background: linear-gradient(180deg, oklch(14% 0.006 60 / 0) 0%, oklch(14% 0.006 60 / 0.10) 32%, oklch(14% 0.006 60 / 0.52) 56%, oklch(14% 0.006 60 / 0.62) 100%); }
}
.hero-inner { position: relative; width: 100%; padding-bottom: clamp(56px, 9vh, 104px); padding-top: 140px; }
.hero h1 { font-size: clamp(2.9rem, 8vw, 6.6rem); line-height: 0.98; letter-spacing: -0.03em; margin: 22px 0 0; max-width: 16ch; }
.hero h1 em { font-style: italic; color: var(--brass); }
.hero-sub { margin-top: 30px; max-width: 54ch; font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--bone-dim); line-height: 1.7; }
.hero-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero-phone { display: inline-flex; align-items: baseline; gap: 12px; }
.hero-phone .n { font-family: var(--font-display); font-size: 1.5rem; color: var(--bone); }
.hero-scroll { position: absolute; bottom: 30px; right: var(--gutter); writing-mode: vertical-rl; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone-faint); display: flex; align-items: center; gap: 14px; }
.hero-scroll::after { content: ""; width: 1px; height: 46px; background: linear-gradient(var(--brass), transparent); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(76px, 11vh, 150px); }
.section-tight { padding-block: clamp(56px, 8vh, 104px); }
.section-head { max-width: 62ch; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); margin-top: 20px; letter-spacing: -0.02em; }
.section-head h2 em { font-style: italic; color: var(--brass); }

/* ---------- Capabilities ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-faint); border-block: 1px solid var(--line-faint); margin-top: clamp(40px, 6vh, 72px); }
.cap { background: var(--char); padding: clamp(30px, 4vw, 48px) clamp(26px, 3vw, 40px); transition: background-color .5s var(--ease); }
.cap:hover { background: var(--char-raise); }
.cap .num { font-family: var(--font-display); font-size: 0.95rem; color: var(--brass); letter-spacing: 0.1em; }
.cap h3 { font-size: 1.55rem; margin: 20px 0 14px; line-height: 1.12; }
.cap p { color: var(--bone-dim); font-size: 0.98rem; line-height: 1.65; }

/* ---------- Feature split ---------- */
.feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 88px); align-items: center; }
.feature.rev { grid-template-columns: 0.95fr 1.05fr; }
.feature.rev .feature-media { order: 2; }
.feature-media { position: relative; }
.feature-media img { width: 100%; height: auto; }
.feature-media .tag { position: absolute; left: 0; bottom: 0; transform: translateY(50%); background: var(--brass); color: var(--char-deep); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 18px; }
.feature-body h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin: 18px 0 22px; }
.feature-body p + p { margin-top: 1.1em; }
.feature-body .lede { margin-bottom: 24px; }
.feature-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 16px; align-items: baseline; color: var(--bone-dim); font-size: 0.98rem; }
.feature-list li::before { content: ""; width: 8px; height: 8px; flex: none; transform: translateY(4px); background: var(--brass); }

/* ---------- The Method (signature) ---------- */
.method { background: var(--char-deep); border-block: 1px solid var(--line-faint); }
.method-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.method-head p { color: var(--bone-dim); }
.timeline { margin-top: clamp(46px, 7vh, 84px); display: grid; gap: 30px; }
.track { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; }
.track-label { text-align: right; }
.track-label .t { font-family: var(--font-display); font-size: 1.15rem; color: var(--bone); display: block; }
.track-label .d { font-size: 0.78rem; color: var(--bone-faint); letter-spacing: 0.04em; }
.track-bars { position: relative; display: grid; gap: 8px; padding: 6px 0; }
.bar { height: 30px; display: flex; align-items: center; padding-inline: 14px; font-size: 0.74rem; letter-spacing: 0.05em; color: var(--bone-dim); white-space: nowrap; overflow: visible; }
.bar.seq { background: var(--char-raise); border: 1px solid var(--line); min-width: max-content; }
.bar.par { background: linear-gradient(90deg, oklch(72% 0.086 74 / 0.22), oklch(72% 0.086 74 / 0.08)); border: 1px solid var(--brass); color: var(--bone); }
.track.axis { border-top: 1px solid var(--line-faint); padding-top: 14px; }
.axis-scale { grid-column: 2; display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--bone-faint); letter-spacing: 0.08em; }
.method-note { grid-column: 2; margin-top: 18px; color: var(--bone-dim); font-size: 0.95rem; max-width: 60ch; }
.method-note strong { color: var(--brass); font-weight: 600; }
.compress { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--brass); font-family: var(--font-display); font-size: 1.05rem; }

/* ---------- Work / gallery preview ---------- */
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.work-grid { margin-top: clamp(36px, 5vh, 64px); display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.work-grid a { position: relative; overflow: hidden; display: block; background: var(--char-raise); }
.work-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s var(--ease); filter: saturate(0.94) brightness(0.94); }
.work-grid a:hover img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.w-tall { grid-column: span 4; aspect-ratio: 3/4; }
.w-wide { grid-column: span 8; aspect-ratio: 4/3; }
.w-half { grid-column: span 6; aspect-ratio: 4/3; }
.work-grid a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 60%, oklch(14% 0.006 60 / 0.5)); opacity: 0; transition: opacity .5s var(--ease); }
.work-grid a:hover::after { opacity: 1; }

/* ---------- Video ---------- */
.video-wrap { position: relative; aspect-ratio: 16/9; margin-top: clamp(34px, 5vh, 56px); border: 1px solid var(--line); background: var(--char-deep); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Contact ---------- */
.contact { background: var(--char-deep); border-top: 1px solid var(--line-faint); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
/* Grid items default to min-width:auto, so one long unbreakable token (the email
   address) can force a track wider than the viewport. Let the tracks shrink. */
.contact-grid > * { min-width: 0; }
.contact-head h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 18px 0 26px; }
.contact-head h2 em { font-style: italic; color: var(--brass); }
.contact-detail { display: grid; gap: 24px; margin-top: 34px; }
.contact-detail .row .k { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 6px; }
/* `anywhere` (not `break-word`) — only `anywhere` lets the break opportunity
   count toward min-content, which is what unsticks the grid track above. */
.contact-detail .row .v { font-family: var(--font-display); font-size: 1.3rem; color: var(--bone); overflow-wrap: anywhere; }
.contact-detail .row .v a:hover { color: var(--brass); }

.form-card { border: 1px solid var(--line); padding: clamp(28px, 3.5vw, 44px); background: var(--char); }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 10px; }
.field input, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--bone);
  background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 10px 2px;
  transition: border-color .4s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--brass); }
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--bone-faint); opacity: 0.6; }
.hp-field { position: absolute; left: -9999px; }
.form-msg { margin-top: 18px; font-size: 0.92rem; font-weight: 600; }
.form-msg.is-success { color: var(--brass); }
.form-msg.is-error { color: oklch(70% 0.14 30); }

/* ---------- Footer ---------- */
.site-footer { background: var(--char); padding-top: clamp(56px, 8vh, 96px); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-faint); }
.footer-brand img { height: 40px; margin-bottom: 20px; }
.footer-brand p { color: var(--bone-dim); font-size: 0.92rem; max-width: 38ch; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 18px; font-weight: 600; }
.footer-top > * { min-width: 0; }
.footer-col a, .footer-col p { display: block; color: var(--bone-dim); font-size: 0.95rem; margin-bottom: 10px; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--brass); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 30px; }
.footer-bottom .copy { font-size: 0.82rem; color: var(--bone-faint); }
.wp360-credit { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--bone-faint); }
.wp360-credit .chip { display: inline-flex; background: var(--bone); padding: 7px 11px; border-radius: 7px; line-height: 0; transition: transform .4s var(--ease); }
.wp360-credit .chip:hover { transform: translateY(-2px); }
.wp360-credit .chip img { height: 26px; width: auto; }

/* ---------- Gallery page ---------- */
.page-hero { padding-top: 160px; padding-bottom: clamp(40px, 6vh, 72px); border-bottom: 1px solid var(--line-faint); }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin-top: 20px; }
.page-hero p { margin-top: 22px; color: var(--bone-dim); max-width: 64ch; }
.masonry { columns: 3 300px; column-gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(36px, 5vh, 60px); }
.masonry figure { margin: 0 0 clamp(12px, 1.4vw, 20px); break-inside: avoid; overflow: hidden; background: var(--char-raise); position: relative; }
.masonry img { width: 100%; height: auto; transition: transform 1.1s var(--ease), filter .6s var(--ease); filter: saturate(0.94) brightness(0.92); }
.masonry figure:hover img { transform: scale(1.04); filter: saturate(1) brightness(1); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .cap-grid { grid-template-columns: 1fr; }
  .feature, .feature.rev { grid-template-columns: 1fr; gap: 32px; }
  .feature.rev .feature-media { order: 0; }
  .method-head, .contact-grid, .footer-top { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr; gap: 10px; }
  .track-label { text-align: left; }
  .axis-scale, .method-note { grid-column: 1; }
  .work-grid { grid-template-columns: repeat(6, 1fr); }
  .w-tall, .w-wide, .w-half { grid-column: span 3; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .masonry { columns: 2 160px; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .w-tall, .w-wide, .w-half { grid-column: span 1; aspect-ratio: 4/3; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}