/* Final production consistency layer — shared by every page */
:root {
  --production-container:1180px;
  --production-gutter:clamp(18px,3vw,32px);
  --production-soft-white:#f7f7f5;
  --production-dark:#18121d;
  --production-muted-light:rgba(247,247,245,.72);
  --production-label-light:rgba(247,247,245,.58);
  --production-accent:#d9ff55;
}

html {
  scroll-padding-top:96px
}

body {
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}

img,svg,video {
  max-width:100%
}

p,li,figcaption {
  overflow-wrap:break-word
}

h1,h2,h3 {
  text-wrap:balance;
  overflow-wrap:break-word
}

.shell {
  width:min(var(--production-container),calc(100% - (var(--production-gutter)*2)));
  max-width:var(--production-container)
}

/* Consistent glass navigation on every page */
.site-header {
  top:14px;
  left:50%;
  right:auto;
  width:min(var(--production-container),calc(100% - (var(--production-gutter)*2)));
  transform:translateX(-50%);
  border:1px solid rgba(23,18,29,.09);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 30px rgba(31,20,39,.07);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
}

.site-header .nav-wrap {
  width:100%;
  height:64px;
  padding-inline:18px
}

.site-header nav {
  gap:clamp(14px,2vw,26px)
}

.site-header nav a {
  white-space:nowrap
}

.site-header .nav-cta {
  background:transparent;
  color:rgba(21,18,26,.7);
  border:1px solid rgba(21,18,26,.11);
  padding:9px 14px;
  border-radius:999px;
  box-shadow:none
}

.site-header .nav-cta:hover {
  background:rgba(255,255,255,.75);
  color:var(--ink);
  border-color:rgba(21,18,26,.18)
}

/* Reliable page rhythm and heading alignment */
.section {
  padding-block:clamp(78px,9vw,120px)
}

.section-head {
  grid-template-columns:minmax(0,1fr) minmax(280px,400px);
  gap:clamp(32px,5vw,64px);
  margin-bottom:clamp(42px,5vw,64px)
}

.section-head h2,.about-copy h2,.contact-box h2 {
  max-width:820px
}

.case-section-title h2,.journey-heading h2,.results-intro h2 {
  max-width:760px
}

.case-prose,.story-copy,.about-practice-copy {
  min-width:0
}

/* Dark-section typography: soft white headings, readable supporting text */
.purple h2,.outcomes h2,.case-contact h2,.case-contact-card h2,
.dark h2,.section-dark h2,[data-theme="dark"] h2 {
  color:var(--production-soft-white)!important
}

.purple .section-head>p,.purple p,.outcomes p,.case-contact p,.case-contact-card p,
.dark p,.section-dark p,[data-theme="dark"] p {
  color:var(--production-muted-light)
}

.purple .eyebrow,.purple .kicker,.outcomes .eyebrow,.case-contact .eyebrow,.case-contact-card .eyebrow,
.dark .eyebrow,.section-dark .eyebrow,[data-theme="dark"] .eyebrow {
  color:var(--production-label-light)!important
}

.purple h2::after,.outcomes h2::after,.case-contact h2::after,.case-contact-card h2::after,
.dark h2::after,.section-dark h2::after,[data-theme="dark"] h2::after {
  background:var(--production-accent)!important
}

/* About-page hero: readable within common laptop heights */
.about-hero {
  padding:clamp(126px,14vh,160px) 0 clamp(72px,9vh,104px)
}

.about-hero h1 {
  font-size:clamp(48px,6vw,82px);
  line-height:1;
  max-width:760px;
  margin-bottom:22px
}

.about-hero-lead {
  font-size:clamp(19px,1.8vw,25px);
  max-width:700px
}

.about-hero-copy>p:not(.kicker):not(.about-hero-lead) {
  max-width:680px
}

/* Case-study first screen and long-form alignment */
.case-hero {
  padding-top:clamp(128px,14vh,158px)
}

.case-title h1 {
  font-size:clamp(44px,5.6vw,76px);
  max-width:850px
}

.case-hero-grid {
  gap:clamp(36px,6vw,88px)
}

.case-recruiter-summary .summary-intro h2 {
  max-width:940px
}

.story-row,.case-section-grid {
  gap:clamp(34px,6vw,86px)
}

.story-media img,.case-cover img {
  display:block;
  width:100%;
  height:auto
}

.visual-gallery {
  align-items:start
}

.next-case a {
  gap:24px
}

.next-case strong {
  line-height:1.12
}

.contact-rail-item strong {
  overflow-wrap:anywhere
}

/* Consistent footer row */
.footer .shell {
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  gap:32px;
  align-items:center
}

.footer-right {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(24px,4vw,52px);
  min-width:0
}

.footer-menu {
  display:flex;
  align-items:center;
  gap:clamp(16px,2.5vw,30px);
  flex-wrap:wrap
}

.footer-copy {
  margin:0;
  white-space:nowrap
}

/* Accessible interaction */
a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid rgba(77,22,136,.32);
  outline-offset:3px
}

@media(max-width:980px) {
  .site-header {
  top:10px;
  width:calc(100% - 24px);
  border-radius:24px
}

.site-header .nav-wrap {
  height:62px
}

.section-head {
  grid-template-columns:1fr
}

.footer .shell {
  grid-template-columns:1fr;
  align-items:start
}

.footer-right {
  justify-content:space-between;
  width:100%
}

}

@media(max-width:760px) {
  html {
  scroll-padding-top:82px
}

.site-header {
  width:calc(100% - 20px);
  border-radius:20px
}

.site-header .nav-wrap {
  height:58px;
  padding-inline:14px
}

.site-header nav {
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)
}

.about-hero {
  padding:106px 0 64px
}

.about-hero h1 {
  font-size:clamp(40px,12vw,58px)
}

.case-hero {
  padding-top:108px
}

.case-title h1 {
  font-size:clamp(39px,11vw,58px)
}

.story-row,.story-row.reverse,.case-section-grid {
  grid-template-columns:1fr
}

.next-case a {
  grid-template-columns:minmax(0,1fr) 48px;
  padding:28px 24px
}

.next-case i {
  width:44px;
  height:44px
}

.footer-right {
  display:grid;
  gap:20px
}

.footer-menu {
  gap:16px 22px
}

.footer-copy {
  white-space:normal
}

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  scroll-behavior:auto!important;
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important
}

}