.product-page { background: var(--foam); }

.detail-hero {
  position: relative;
  min-height: 780px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  color: white;
}

.detail-hero-image,
.detail-hero-shade { position: absolute; inset: 0; }
.detail-hero-image { background-position: center; background-size: cover; transform: scale(1.01); }
.detail-hero-shade { background: linear-gradient(90deg, rgba(3,18,27,.95), rgba(3,18,27,.7) 48%, rgba(3,18,27,.18)), linear-gradient(0deg, rgba(3,18,27,.72), transparent 60%); }
.detail-hero-content { position: relative; z-index: 2; padding: 210px 0 82px; }
.detail-back { margin-bottom: 50px; display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.68); font-size: 12px; font-weight: 700; }
.detail-back:hover { color: white; }
.detail-hero h1 { max-width: 890px; margin: 0; font-size: clamp(53px, 7vw, 92px); line-height: .98; letter-spacing: -.05em; }
.detail-hero h1 em { display: block; font-family: var(--font-serif); font-weight: 500; color: #9cdedb; }
.detail-hero-lead { max-width: 650px; margin: 30px 0 0; color: rgba(255,255,255,.77); font-size: 19px; line-height: 1.7; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 35px; }

.detail-intro { padding: 100px 0; background: white; }
.detail-intro-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10%; align-items: start; }
.detail-intro h2, .detail-process h2, .detail-clients h2 { margin: 0; font-size: clamp(40px, 5vw, 65px); line-height: 1.04; letter-spacing: -.045em; }
.detail-intro h2 em, .detail-process h2 em, .detail-clients h2 em { font-family: var(--font-serif); font-weight: 500; color: var(--ocean); }
.detail-story { color: #52666d; font-size: 17px; line-height: 1.8; }
.detail-story p { margin: 0 0 20px; }
.fact-row { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { padding: 23px 18px; border-right: 1px solid var(--line); }
.fact:first-child { padding-left: 0; }
.fact:last-child { border-right: 0; }
.fact small, .fact strong { display: block; }
.fact small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.fact strong { margin-top: 8px; font-size: 13px; }

.detail-process { padding: 110px 0; background: var(--sand); }
.detail-section-heading { max-width: 760px; margin-bottom: 52px; }
.detail-section-heading > p:last-child { max-width: 620px; margin: 24px 0 0; color: var(--muted); line-height: 1.7; }
.detail-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.detail-step { min-height: 245px; padding: 27px; display: flex; flex-direction: column; border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid rgba(8,40,58,.09); }
.detail-step > span { color: var(--turquoise); font-size: 11px; }
.detail-step strong { margin-top: auto; font-size: 18px; }
.detail-step p { margin: 11px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.detail-clients { padding: 105px 0; background: var(--navy); color: white; }
.detail-clients-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9%; align-items: center; }
.detail-clients h2 em { color: #94d9d7; }
.client-list { display: grid; gap: 12px; }
.client-list > div { padding: 20px 22px; display: grid; grid-template-columns: 34px 1fr; gap: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.04); }
.client-list span { color: var(--turquoise); font-size: 10px; }
.client-list strong { display: block; font-size: 14px; }
.client-list p { margin: 5px 0 0; color: rgba(255,255,255,.56); font-size: 12px; line-height: 1.5; }

.detail-cta { padding: 90px 0; background: var(--foam); }
.detail-cta-box { padding: 55px; display: flex; justify-content: space-between; align-items: center; gap: 40px; border-radius: 24px; background: white; box-shadow: var(--shadow); }
.detail-cta-box h2 { margin: 0; font-size: clamp(32px, 4vw, 51px); letter-spacing: -.04em; }
.detail-cta-box p { max-width: 620px; margin: 15px 0 0; color: var(--muted); line-height: 1.65; }
.detail-cta-actions { flex: 0 0 auto; display: grid; gap: 10px; }

.founder-quote {
  margin: 34px 0 0;
  padding: 28px 30px;
  border-left: 4px solid var(--turquoise);
  background: var(--foam);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 23px;
  line-height: 1.5;
}
.founder-quote cite { display: block; margin-top: 18px; color: var(--muted); font-family: var(--font-sans); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-hero .detail-hero-image { background-position: center 44%; }
.about-promise-copy { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.8; }
.about-promise-copy p { margin: 0 0 20px; }

@media (max-width: 980px) {
  .detail-hero { min-height: 720px; }
  .detail-intro-grid, .detail-clients-grid { grid-template-columns: 1fr; gap: 45px; }
  .detail-steps { grid-template-columns: 1fr 1fr; }
  .detail-cta-box { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .detail-hero { min-height: 700px; }
  .detail-hero-shade { background: linear-gradient(90deg, rgba(3,18,27,.9), rgba(3,18,27,.5)), linear-gradient(0deg, rgba(3,18,27,.78), transparent); }
  .detail-hero-content { padding: 155px 0 65px; }
  .detail-back { margin-bottom: 35px; }
  .detail-hero h1 { font-size: 48px; }
  .detail-hero-lead { font-size: 16px; }
  .detail-actions { flex-direction: column; align-items: stretch; }
  .detail-intro, .detail-process, .detail-clients, .detail-cta { padding: 75px 0; }
  .fact-row { grid-template-columns: 1fr; }
  .fact { padding: 17px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
  .detail-steps { grid-template-columns: 1fr; }
  .detail-step { min-height: 210px; }
  .detail-cta-box { padding: 30px 23px; }
  .detail-cta-actions { width: 100%; }
}