/* ==========================================================================
   MEM MEM LIMITED — Design System
   Ported 1:1 from the Figma Make reference (figma.com/make/ASdUQhUwYDGVT8HTShg8p8).
   Typography: Newsreader (headings) + Manrope (body/UI). Fonts are loaded via
   a <link> tag in each page's <head> (not @import) for faster parallel loading.
   ========================================================================== */

:root {
  --navy: #142333;
  --graphite: #30343a;
  --paper: #f5f3ee;
  --white: #fff;
  --brass: #a78d63;
  --steel: #8a9ba8;
  --line: #d9d9d4;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  color: var(--graphite);
  background: var(--paper);
  font: 15px/1.65 var(--sans);
  letter-spacing: .008em;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
figure, p, h1, h2, h3, blockquote { margin: 0; }
h1, h2, h3, blockquote {
  color: var(--navy);
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: .008em;
}

.site { min-height: 100vh; overflow: hidden; }
.shell { width: min(calc(100% - 48px), 1280px); margin-inline: auto; }
.skip-link {
  position: fixed; z-index: 1000; top: 8px; left: 8px;
  padding: 10px 16px; color: var(--white); background: var(--navy);
  transform: translateY(-150%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }
.site-header {
  position: relative; z-index: 50;
  border-bottom: 1px solid rgb(48 52 58 / 16%);
  background: rgb(245 243 238 / 95%);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; height: 88px;
}
.wordmark { display: inline-flex; align-items: center; }
.wordmark-lockup { display: block; height: 44px; width: auto; }
.wordmark-lockup--footer { height: 48px; }
.desktop-nav { display: flex; gap: 40px; font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.desktop-nav a { position: relative; padding-block: 12px; }
.desktop-nav a::after {
  position: absolute; right: 0; bottom: 6px; left: 0; height: 1px;
  background: var(--brass); content: ""; transform: scaleX(0);
  transform-origin: right; transition: transform 250ms ease;
}
.desktop-nav a:hover::after, .desktop-nav a.active::after {
  transform: scaleX(1); transform-origin: left;
}
.menu-button, .mobile-nav { display: none; }
.eyebrow, .micro-label {
  color: var(--brass); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; line-height: 1.4;
}

.hero {
  position: relative; display: flex; min-height: calc(100svh - 77px);
  flex-direction: column; justify-content: flex-end; overflow: hidden;
  padding-top: clamp(110px, 12vw, 170px); color: var(--white); background: var(--navy);
}
.hero::before {
  position: absolute; z-index: 1; inset: 0; content: "";
  background:
    linear-gradient(90deg, rgb(10 24 35 / 88%) 0%, rgb(10 24 35 / 60%) 48%, rgb(10 24 35 / 18%) 100%),
    linear-gradient(0deg, rgb(10 24 35 / 72%) 0%, transparent 50%);
}
.hero-backdrop { position: absolute; inset: 0; }
.hero-backdrop::after {
  position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 8%); content: "";
}
.hero-backdrop img {
  height: 100%; object-fit: cover; object-position: center 54%;
  filter: saturate(.35) contrast(.92) brightness(.82);
  transform: scale(1.015);
}
.hero-contours {
  z-index: 1; right: -12%; top: -14%; width: 54vw; height: 54vw;
  pointer-events: none; border-color: rgb(205 180 137 / 48%); border-width: 1.5px;
  transform: rotate(18deg);
}
.hero-contours::before, .hero-contours::after {
  border-color: rgb(205 180 137 / 38%); border-width: 1.5px;
}
.hero-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  align-items: end; position: relative; z-index: 2;
}
.hero-copy { grid-column: 1 / span 8; position: relative; padding-bottom: 76px; }
.hero .eyebrow { color: #c7ae83; }
.hero h1 {
  max-width: 900px; margin-top: 30px; color: var(--white);
  font-size: clamp(72px, 8vw, 122px); letter-spacing: .004em;
}
.hero h1 em { color: #d0b78c; font-weight: 300; font-style: normal; }
.hero-intro {
  max-width: 540px; margin: 42px 0 0; color: rgb(255 255 255 / 78%);
  font-size: 17px; line-height: 1.7;
}
.hero-actions { display: flex; gap: 12px; margin: 36px 0 0; flex-wrap: wrap; }
.button {
  display: inline-flex; min-height: 50px; align-items: center; justify-content: space-between;
  gap: 38px; padding: 0 20px; border: 1px solid var(--navy);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: color 200ms ease, background 200ms ease, transform 200ms ease;
}
.button:hover { transform: translateY(-2px); }
.button span { display: inline-block; transition: transform 200ms ease; }
.button:hover span { transform: rotate(45deg); }
.button.primary { color: var(--white); background: var(--navy); }
.button.primary:hover { color: var(--navy); background: var(--paper); }
.button.secondary:hover { color: var(--white); background: var(--navy); }
.hero .button.primary {
  color: var(--navy); border-color: var(--paper); background: var(--paper);
}
.hero .button.primary:hover { color: var(--paper); background: transparent; }
.hero .button.secondary { color: var(--paper); border-color: rgb(255 255 255 / 55%); }
.hero .button.secondary:hover { color: var(--navy); background: var(--paper); }
.hero-aside {
  grid-column: 11 / -1; display: flex; align-items: flex-end; flex-direction: column;
  gap: 8px; padding-bottom: 82px; color: rgb(255 255 255 / 58%);
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
}
.hero-aside span:last-child {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 30%);
}
.global-image figcaption {
  display: flex; justify-content: space-between; padding-top: 15px; color: #6a6d6e;
  font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.hero-footnote {
  display: flex; justify-content: space-between; position: relative; z-index: 2;
  padding: 27px 0 22px; border-top: 1px solid rgb(255 255 255 / 24%);
  color: rgb(255 255 255 / 62%);
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
}

.intro-section { padding: 160px 0; background: var(--white); }
.intro-grid, .global-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
}
.intro-grid > .eyebrow { grid-column: 1 / span 3; padding-top: 12px; }
.intro-grid > div { grid-column: 4 / -1; }
.intro-grid h2 {
  max-width: 870px; font-size: clamp(52px, 6.25vw, 90px); letter-spacing: .006em;
}
.intro-body {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px;
  max-width: 730px; margin-top: 58px; color: #626668;
}
.services-section, .approach-section, .values-section { padding: 150px 0; }
.section-heading {
  display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 24px; margin-bottom: 86px;
}
.section-heading .eyebrow { padding-top: 10px; }
.section-heading h2 { font-size: clamp(50px, 5.4vw, 78px); letter-spacing: .006em; }
.section-intro { align-self: end; color: #65696b; }
.service-list { border-top: 1px solid var(--navy); }
.service-row {
  display: grid; grid-template-columns: 1fr 4fr 4fr 1fr; gap: 24px;
  align-items: center; min-height: 158px; border-bottom: 1px solid var(--line);
}
.service-number, .process-number { color: var(--brass); font-size: 11px; letter-spacing: .14em; }
.service-row h3 { max-width: 330px; font-size: 29px; font-weight: 500; line-height: 1.1; }
.service-row > p:nth-child(3) { max-width: 410px; color: #666a6c; }
.round-arrow {
  display: flex; width: 46px; height: 46px; align-items: center; justify-content: center;
  justify-self: end; border: 1px solid #afb1af; border-radius: 50%;
  transition: color 200ms ease, border 200ms ease, transform 200ms ease;
}
.round-arrow:hover {
  color: var(--brass); border-color: var(--brass); transform: rotate(45deg);
}

.approach-section { background: var(--white); }
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin: 120px 0 62px;
}
.process-grid::before {
  position: absolute; top: 42px; right: 0; left: 0; height: 1px;
  background: var(--line); content: "";
}
.process-step { position: relative; padding-right: 42px; }
.process-marker {
  /* Pinned to the exact pixel of .process-grid::before's line (top: 42px,
     height: 1px -> center 42.5px), independent of flow. Deliberately NOT
     spaced via margin-top under .process-number: that position depended on
     the paragraph's rendered line-height, which shifts with whichever font
     actually loads (Newsreader/Manrope vs. a fallback), so the dot drifted
     off-center depending on the font. Centering it to a fixed coordinate
     keeps it correct regardless of font metrics. */
  position: absolute; top: 39px; left: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
}
.process-step h3 { margin-top: 81px; margin-bottom: 20px; font-size: 32px; }
.process-step > p:last-child { color: #686c6e; }
.text-link {
  display: inline-flex; gap: 34px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--brass); color: var(--navy);
  font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
}
.text-link span { display: inline-block; transition: transform 200ms ease; }
.text-link:hover span { transform: rotate(45deg); }

.experience-section {
  position: relative; overflow: hidden; padding: 170px 0;
  color: var(--white); background: var(--navy);
}
.experience-section.compact { padding: 130px 0; }
.experience-grid, .contact-banner-grid, .confidentiality-grid {
  display: grid; grid-template-columns: 3fr 9fr; gap: 24px;
}
.experience-grid .eyebrow { padding-top: 10px; }
.experience-grid blockquote {
  position: relative; z-index: 1; max-width: 920px; color: var(--paper);
  font-size: clamp(48px, 5.4vw, 78px); letter-spacing: .006em;
}

/* Photo variant: replaces the flat navy fill with a full-bleed image, for
   pages where this section lands directly against another dark block
   (currently About) and needs its own visual weight instead of blending
   into one undifferentiated mass. */
.experience-section--photo { background: none; }
.experience-photo-backdrop { position: absolute; z-index: 0; inset: 0; }
.experience-photo-backdrop img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: saturate(.2) contrast(1.05) brightness(.6);
}
.experience-section--photo::before {
  position: absolute; z-index: 1; inset: 0; content: "";
  background: linear-gradient(180deg, rgb(10 24 35 / 58%) 0%, rgb(10 24 35 / 62%) 55%, rgb(10 24 35 / 86%) 100%);
}
.experience-section--photo .experience-grid { position: relative; z-index: 2; }

.contour-lines {
  position: absolute; right: -10%; bottom: -50%; width: 54vw; height: 54vw;
  border: 1.5px solid rgb(167 141 99 / 32%); border-radius: 42% 58% 63% 37%;
  transform: rotate(24deg);
}
.contour-lines::before, .contour-lines::after {
  position: absolute; border: 1.5px solid rgb(167 141 99 / 26%);
  border-radius: inherit; content: ""; inset: 9%;
}
.contour-lines::after { inset: 19%; }

.global-section { padding: 170px 0; }
.global-grid { align-items: center; row-gap: 0; }
.global-image { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.global-image img {
  height: 680px; object-fit: cover; filter: saturate(.5) contrast(.9);
}
.global-copy { grid-column: 8 / -1; }
.global-copy--heading { grid-row: 1; }
.global-copy--body { grid-row: 2; }
.global-copy h2 {
  margin: 34px 0 42px; font-size: clamp(50px, 5vw, 72px); letter-spacing: .006em;
}
.global-copy > p:not(.eyebrow) { max-width: 480px; margin-bottom: 18px; color: #666a6c; }
.global-copy .text-link { margin-top: 24px; }
.contact-banner {
  padding: 125px 0; border-top: 1px solid rgb(255 255 255 / 12%);
  color: var(--paper); background: var(--navy);
}
.contact-banner h2 {
  max-width: 850px; color: var(--paper); font-size: clamp(54px, 6.25vw, 90px);
  letter-spacing: .006em;
}
.contact-banner div > p { margin: 34px 0; color: #bfc5c7; }
.text-link.light { color: var(--paper); }

.footer {
  padding: 88px 0 28px; color: #c2c8ca; background: #0d1924; font-size: 16px;
}
.footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 85px;
}
.footer-kicker {
  margin-top: 28px; color: #9aa4ab; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
}
.footer address { font-style: normal; line-height: 1.9; }
.footer address span {
  display: block; margin-bottom: 22px; color: var(--white);
  font-size: 13px; letter-spacing: .12em;
}
.footer .micro-label { color: var(--brass); font-size: 13px; }
.footer-links { display: flex; align-items: flex-start; flex-direction: column; }
.footer-links > a {
  margin-top: 13px; color: var(--white); font-size: 17px;
  border-bottom: 1px solid #58636a;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 45px; font-size: 14px; }
.footer a:hover { color: var(--brass); }
.footer-bottom {
  display: flex; justify-content: space-between; padding-top: 26px;
  border-top: 1px solid rgb(255 255 255 / 11%); color: #92999e;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.footer-bottom div { display: flex; gap: 28px; }

.page-hero { padding: 130px 0 105px; border-bottom: 1px solid var(--line); }
.page-hero-grid {
  display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 24px; align-items: end;
}
.page-hero-grid .eyebrow { align-self: start; padding-top: 12px; }
.page-hero h1 { font-size: clamp(64px, 7vw, 104px); letter-spacing: .004em; }
.page-hero-grid > p:last-child { color: #636769; }

/* Photo variant: a full-bleed background image treatment matching the
   main homepage hero, for inner-page heroes that warrant the same weight
   (currently Contact). */
.page-hero--photo {
  position: relative; overflow: hidden; padding: 180px 0 150px;
  color: var(--white); border-bottom: 0;
}
.page-hero-backdrop { position: absolute; z-index: 0; inset: 0; }
.page-hero-backdrop img {
  height: 100%; object-fit: cover; object-position: center 46%;
  filter: saturate(.35) contrast(.95) brightness(.74);
}
.page-hero--photo::before {
  position: absolute; z-index: 1; inset: 0; content: "";
  background: linear-gradient(0deg, rgb(10 24 35 / 85%) 0%, rgb(10 24 35 / 48%) 55%, rgb(10 24 35 / 28%) 100%);
}
.page-hero--photo .page-hero-grid { position: relative; z-index: 2; }
.page-hero--photo .eyebrow { color: #c7ae83; }
.page-hero--photo h1 { color: var(--white); }
.page-hero--photo .page-hero-grid > p:last-child { color: rgb(255 255 255 / 78%); }

/* CONTACT label stacked directly above the headline, both left-aligned in
   the hero's text column, instead of sitting beside it. */
.page-hero--photo .page-hero-grid {
  grid-template-rows: auto auto; align-items: start; row-gap: 14px;
}
.page-hero--photo .eyebrow {
  grid-column: 1 / span 2; grid-row: 1; align-self: start; padding-top: 0;
}
.page-hero--photo h1 { grid-column: 1 / span 2; grid-row: 2; }
.page-hero--photo .page-hero-grid > p:last-child {
  grid-column: 3; grid-row: 1 / span 2; align-self: end;
}

/* Footer: the same motif reappearing top-left, as if the hero's lines
   run all the way down the page (Contact page only — other pages keep
   a plain footer). */
.footer--contours { position: relative; overflow: hidden; }
.footer-contours {
  z-index: 0; left: -8%; top: -22%; width: 30vw; height: 30vw;
  border-color: rgb(167 141 99 / 20%); transform: rotate(-16deg); pointer-events: none;
}
.footer-contours::before, .footer-contours::after { border-color: rgb(167 141 99 / 14%); }
.footer--contours .shell { position: relative; z-index: 1; }
.editorial-image { padding-top: 80px; }
.editorial-image img {
  height: 52vw; max-height: 680px; object-fit: cover; object-position: center 62%;
  filter: saturate(.38) contrast(.92);
}
.editorial-image > p {
  padding-top: 13px; color: #747779; font-size: 9px;
  letter-spacing: .15em; text-transform: uppercase;
}
.service-details { padding: 135px 0 160px; }
.detail-row {
  display: grid; grid-template-columns: 1fr 5fr 4fr; gap: 24px;
  padding: 70px 0; border-top: 1px solid var(--line);
}
.detail-row:last-child { border-bottom: 1px solid var(--line); }
.detail-row h2 { max-width: 520px; font-size: clamp(38px, 4vw, 56px); font-weight: 500; }
.detail-row .lead { max-width: 500px; margin-top: 26px; color: var(--navy); font-size: 17px; }
.detail-row > p:last-child { color: #666a6c; }

.method-section { padding: 150px 0; }
.method-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 8.33%; }
.sticky-copy { align-self: start; position: sticky; top: 60px; }
.sticky-copy h2 { margin: 28px 0 34px; font-size: clamp(50px, 5vw, 72px); }
.sticky-copy > p:last-child { max-width: 420px; color: #65696b; }
.method-list { border-top: 1px solid var(--navy); }
.method-item {
  display: grid; grid-template-columns: 1fr 2fr 4fr; gap: 20px;
  padding: 54px 0 64px; border-bottom: 1px solid var(--line);
}
.method-item > p:first-child { color: var(--brass); font-size: 11px; }
.method-item h3 { font-size: 34px; }
.method-item div p { margin-bottom: 18px; color: #666a6c; }
.confidentiality { padding: 135px 0; background: #e9e9e5; }
.confidentiality-grid h2 { max-width: 820px; font-size: clamp(52px, 5.5vw, 78px); }
.confidentiality-grid div p { max-width: 600px; margin-top: 42px; color: #606466; }

.about-positioning { padding: 150px 0; }
.about-grid {
  display: grid; grid-template-columns: 6fr 5fr; column-gap: 8.33%; row-gap: 0;
  align-items: center;
}
.about-image { grid-column: 1; grid-row: 1 / span 2; }
.about-copy-heading { grid-column: 2; grid-row: 1; }
.about-copy-body { grid-column: 2; grid-row: 2; }
.about-image img { height: 720px; object-fit: cover; filter: saturate(.45); }
.about-grid h2 { margin: 30px 0 38px; font-size: clamp(50px, 5vw, 72px); }
.about-grid > div > p:not(.eyebrow) { margin-bottom: 18px; color: #636769; }
.values-section { background: var(--white); }
.values-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--navy);
}
.value-item {
  min-height: 310px; padding: 28px 28px 28px 0; border-right: 1px solid var(--line);
}
.value-item:not(:first-child) { padding-left: 28px; }
.value-item:last-child { border-right: 0; }
.value-item > p:first-child { color: var(--brass); font-size: 11px; }
.value-item h3 { margin: 92px 0 24px; font-size: 32px; }
.value-item > p:last-child { color: #666a6c; }

.contact-section { padding: 130px 0 160px; }
.contact-grid { display: grid; grid-template-columns: 4fr 7fr; gap: 8.33%; }
.contact-details > div {
  padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line);
}
.contact-details a, .contact-details address {
  display: inline-block; margin-top: 14px; color: var(--navy); font-style: normal;
}
.small-note { max-width: 330px; color: #777a7b; font-size: 12px; }
.contact-form { display: flex; flex-direction: column; gap: 34px; }
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.contact-form label {
  display: flex; flex-direction: column; gap: 8px; color: var(--navy);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.contact-form label small { color: #888b8c; font-weight: 400; }
.contact-form input:not([type="checkbox"]), .contact-form textarea {
  width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid #aeb0ad;
  border-radius: 0; outline: 0; color: var(--graphite); background: transparent;
  font-size: 16px; text-transform: none; transition: border 180ms ease;
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--brass); box-shadow: 0 1px 0 var(--brass);
}
.contact-form input.is-invalid, .contact-form textarea.is-invalid {
  border-color: #b3261e;
}
.contact-form input.is-invalid:focus, .contact-form textarea.is-invalid:focus {
  box-shadow: 0 1px 0 #b3261e;
}
.field-error {
  color: #b3261e; font-size: 11px; font-weight: 500;
  letter-spacing: .01em; text-transform: none;
}
.checkbox-field { display: flex; flex-direction: column; gap: 10px; }
.contact-form .checkbox {
  display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start;
  max-width: 620px; color: #626668; font-size: 11px; font-weight: 400;
  letter-spacing: 0; line-height: 1.7; text-transform: none;
}
.checkbox input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--navy); }
.checkbox.is-invalid input { outline: 1px solid #b3261e; outline-offset: 2px; }
.checkbox a { border-bottom: 1px solid var(--brass); }
.submit-button { align-self: flex-start; cursor: pointer; }
.form-caption { max-width: 600px; color: #777b7d; font-size: 10px; }
.form-fields { display: flex; flex-direction: column; gap: 34px; }
.form-fields[hidden] { display: none; }

.form-success {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  max-width: 480px; padding: 44px 40px; border: 1px solid var(--line);
}
.form-success[hidden] { display: none; }
.form-success-icon {
  display: flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  margin-bottom: 14px; border-radius: 50%; color: var(--white); background: var(--navy);
  font-size: 18px;
}
.form-success h3 { font-size: 26px; }
.form-success > p:not(.form-caption) { margin-top: 6px; color: #666a6c; }
.form-success .form-caption { margin-top: 20px; }

.legal-section { padding: 110px 0 150px; }
.legal-grid { display: grid; grid-template-columns: 3fr 8fr 1fr; gap: 24px; }
.legal-updated { color: #777b7d; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.legal-item {
  display: grid; grid-template-columns: 1fr 3fr; gap: 24px;
  padding: 52px 0; border-top: 1px solid var(--line);
}
.legal-item > p:first-child { color: var(--brass); font-size: 11px; }
.legal-item h2 { grid-column: 2; font-size: 38px; }
.legal-item > p:last-child { grid-column: 2; color: #626668; }
.not-found { display: flex; min-height: 75vh; align-items: center; }
.not-found-grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: center;
}
.error-code {
  color: #deddd7; font: 300 clamp(150px, 22vw, 320px)/.7 var(--serif);
}
.not-found h1 { margin: 28px 0; font-size: clamp(58px, 6vw, 88px); }
.not-found div > p:not(.eyebrow) { max-width: 450px; color: #666a6c; }
.not-found .text-link { margin-top: 36px; }

.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Side-by-side reveal groups (grid rows that cross the viewport threshold
   together) get a slight cascade so items settle in one after another
   instead of popping in as a block. Vertically stacked lists already
   stagger naturally as the user scrolls past each one.
   Note: .process-step deliberately keeps no delay here — its four columns
   share one static connecting line (.process-grid::before), and staggering
   the columns made their dots rise onto that line at different moments,
   reading as the markers "flying" into place rather than settling evenly. */
.value-item.reveal:nth-child(2),
.method-item.reveal:nth-child(2),
.legal-item.reveal:nth-child(2) { transition-delay: 70ms; }

.value-item.reveal:nth-child(3),
.method-item.reveal:nth-child(3),
.legal-item.reveal:nth-child(3) { transition-delay: 140ms; }

.value-item.reveal:nth-child(4),
.method-item.reveal:nth-child(4) { transition-delay: 210ms; }

/* Services: a clearly sequential cascade, one row settling in after the
   previous one, on both the home preview list and the Services page detail
   list. */
.service-row.reveal:nth-child(2),
.detail-row.reveal:nth-child(2) { transition-delay: 150ms; }

.service-row.reveal:nth-child(3),
.detail-row.reveal:nth-child(3) { transition-delay: 300ms; }

.service-row.reveal:nth-child(4),
.detail-row.reveal:nth-child(4) { transition-delay: 450ms; }

/* Hero: a quiet entrance on first load, independent of scroll (the hero
   is visible above the fold, so it can't wait for an IntersectionObserver).
   Pure CSS, so it runs even if JavaScript fails; content is in the DOM
   and legible throughout, never hidden on a stalled animation. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-copy .eyebrow,
.hero-copy h1,
.hero-intro,
.hero-actions,
.hero-aside span,
.hero-footnote span {
  animation: hero-fade-up 760ms ease both;
}
.hero-copy .eyebrow { animation-delay: 60ms; }
.hero-copy h1 { animation-delay: 160ms; }
.hero-intro { animation-delay: 340ms; }
.hero-actions { animation-delay: 460ms; }
.hero-aside span:nth-child(1) { animation-delay: 220ms; }
.hero-aside span:nth-child(2) { animation-delay: 300ms; }
.hero-aside span:nth-child(3) { animation-delay: 380ms; }
.hero-footnote span:nth-child(1) { animation-delay: 520ms; }
.hero-footnote span:nth-child(2) { animation-delay: 580ms; }

@media (max-width: 900px) {
  .shell { width: min(calc(100% - 40px), 720px); }
  .header-inner { height: 64px; }
  .wordmark-lockup { height: 34px; }
  .desktop-nav { display: none; }
  .menu-button {
    display: flex; width: 46px; height: 46px; align-items: center; justify-content: center;
    flex-direction: column; gap: 7px; border: 0; background: transparent;
  }
  .menu-button span { width: 22px; height: 1px; background: var(--navy); transition: transform 200ms ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-nav {
    display: block; position: absolute; top: 65px; right: 0; left: 0;
    max-height: 0; overflow: hidden; color: var(--paper); background: var(--navy);
    transition: max-height 350ms ease;
  }
  .mobile-nav.is-open { max-height: 520px; }
  .mobile-nav .shell { padding: 22px 0 34px; }
  .mobile-nav a {
    display: flex; align-items: baseline; gap: 22px; padding: 14px 0;
    border-bottom: 1px solid rgb(255 255 255 / 12%); font: 29px var(--serif);
  }
  .mobile-nav a span { color: var(--brass); font: 9px var(--sans); }

  .hero { min-height: calc(100svh - 65px); padding-top: 110px; }
  .hero-grid, .intro-grid, .global-grid, .page-hero-grid, .method-grid,
  .about-grid, .contact-grid, .not-found-grid { grid-template-columns: 1fr; }
  .hero-copy, .intro-grid > .eyebrow, .intro-grid > div,
  .global-image, .global-copy { grid-column: auto; }
  .global-image, .global-copy--heading, .global-copy--body,
  .about-image, .about-copy-heading, .about-copy-body { grid-row: auto; }
  .about-image, .about-copy-heading, .about-copy-body { grid-column: auto; }
  .hero-copy { grid-column: 1 / -1; padding-bottom: 72px; }
  .hero-aside { display: none; }
  .hero h1 { margin-top: 22px; font-size: clamp(59px, 16vw, 84px); }
  .hero-intro, .hero-actions { margin-left: 0; }
  .hero-backdrop img { object-position: 58% center; }
  .hero-contours {
    left: 50%; top: 12%; width: 110vw; height: 110vw;
    opacity: .9;
  }
  .intro-section, .services-section, .approach-section, .global-section,
  .values-section, .method-section, .about-positioning { padding: 100px 0; }
  .intro-grid > .eyebrow { margin-bottom: 34px; }
  .intro-body { gap: 30px; }
  .section-heading { grid-template-columns: 1fr; margin-bottom: 58px; }
  .section-heading .section-intro { max-width: 520px; }
  .service-row { grid-template-columns: 1fr 6fr auto; padding: 32px 0; }
  .service-row > p:nth-child(3) { grid-column: 2 / -1; }
  .process-grid, .values-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .process-step { padding: 30px 35px 52px 0; border-top: 1px solid var(--line); }
  /* No shared line to pin to at this width (hidden above), so the marker
     goes back to being a simple in-flow spacer between the number and
     the heading, and the heading's desktop-only replacement margin is
     no longer needed. */
  .process-marker { position: static; margin: 22px 0 35px; }
  .process-step h3 { margin-top: 0; }
  .experience-grid, .contact-banner-grid, .confidentiality-grid {
    grid-template-columns: 1fr; gap: 36px;
  }
  .experience-section { padding: 110px 0; }
  .global-image img, .about-image img { aspect-ratio: 1 / 1; height: auto; }
  .global-grid { row-gap: 36px; }
  .page-hero { padding: 90px 0 76px; }
  .page-hero-grid { gap: 32px; }
  .page-hero-grid > p:last-child { max-width: 520px; }
  /* The photo hero's desktop grid pins the eyebrow+h1 to columns 1-2 and
     the intro paragraph to column 3, spanning both rows. Once the grid
     collapses to a single column those explicit placements no longer
     describe real tracks, so reset everything to plain document flow. */
  .page-hero--photo .page-hero-grid { grid-template-rows: auto; row-gap: 0; }
  .page-hero--photo .eyebrow,
  .page-hero--photo h1,
  .page-hero--photo .page-hero-grid > p:last-child {
    grid-column: 1; grid-row: auto; align-self: auto;
  }
  .page-hero--photo .page-hero-grid > p:last-child { margin-top: 24px; }
  .detail-row { grid-template-columns: 1fr 5fr; }
  .detail-row > p:last-child { grid-column: 2; }
  .sticky-copy { position: static; margin-bottom: 75px; }
  .about-grid { gap: 70px; }
  .contact-grid { gap: 90px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 40px; }
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  .shell { width: calc(100% - 36px); }
  .hero h1 { font-size: 60px; }
  .hero-intro { margin-top: 30px; font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; margin-top: 30px; }
  .button { width: 100%; min-width: 0; }
  .submit-button { align-self: stretch; }
  .text-link { width: 100%; justify-content: space-between; }
  .hero::before {
    background:
      linear-gradient(90deg, rgb(10 24 35 / 82%) 0%, rgb(10 24 35 / 40%) 100%),
      linear-gradient(0deg, rgb(10 24 35 / 86%) 0%, transparent 68%);
  }
  .hero-footnote span:last-child { display: none; }
  .intro-section, .services-section, .approach-section, .global-section,
  .values-section, .method-section, .about-positioning, .contact-section,
  .service-details { padding: 82px 0; }
  .intro-grid h2, .section-heading h2, .global-copy h2, .sticky-copy h2,
  .about-grid h2, .confidentiality-grid h2 { font-size: 46px; }
  .intro-body { grid-template-columns: 1fr; margin-top: 36px; }
  .service-row { grid-template-columns: 40px 1fr auto; gap: 10px; }
  .service-row h3 { font-size: 25px; }
  .service-row > p:nth-child(3) { grid-column: 2 / -1; padding-right: 10px; }
  .round-arrow { width: 38px; height: 38px; }
  .process-grid, .values-grid { grid-template-columns: 1fr; margin-top: 70px; }
  .process-step {
    display: grid; grid-template-columns: 36px 1fr; column-gap: 16px;
  }
  .process-step .process-marker { display: none; }
  .process-step h3 { grid-column: 2; grid-row: 1; }
  .process-step > p:last-child { grid-column: 2; }
  .experience-grid blockquote, .contact-banner h2 { font-size: 46px; }
  .experience-section, .contact-banner, .confidentiality { padding: 84px 0; }
  .page-hero { padding: 74px 0 64px; }
  .page-hero h1 { font-size: 58px; }
  .editorial-image { padding-top: 36px; }
  .editorial-image img { height: 480px; }
  .detail-row { grid-template-columns: 36px 1fr; padding: 46px 0; }
  .detail-row h2 { font-size: 38px; }
  .method-item { grid-template-columns: 36px 1fr; padding: 40px 0; }
  .method-item div { grid-column: 2; }
  .value-item, .value-item:not(:first-child) {
    min-height: auto; padding: 30px 0 42px; border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .value-item h3 { margin: 38px 0 18px; }
  .field-row { grid-template-columns: 1fr; gap: 34px; }
  .contact-form { gap: 30px; }
  .footer { padding-top: 70px; }
  .footer-grid { grid-template-columns: 1fr; gap: 52px; padding-bottom: 65px; }
  .footer-brand { grid-column: auto; margin-bottom: 0; }
  .footer-bottom { align-items: flex-start; flex-direction: column-reverse; gap: 28px; }
  .footer-bottom div { align-items: flex-start; flex-direction: column; gap: 12px; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-grid > div { margin-top: 30px; }
  .legal-item { grid-template-columns: 35px 1fr; }
  .not-found { min-height: 70vh; padding: 70px 0; }
  .not-found-grid { gap: 70px; }
  .error-code { font-size: 180px; }
  .not-found h1 { font-size: 54px; }
}

/* ---------------- Custom cursor ----------------
   A small dot tracks the pointer exactly; a larger ring trails it with
   soft easing (set via JS). mix-blend-mode keeps both visible over the
   dark hero/footer sections and the light paper sections alike without
   needing separate color rules. Hidden until JS confirms readiness, so
   nothing is drawn before the real cursor position is known. */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none;
  border-radius: 50%; opacity: 0; mix-blend-mode: difference;
}
.cursor-dot {
  width: 7px; height: 7px; background: #fff;
  transition: opacity 200ms ease, width 200ms ease, height 200ms ease, background 200ms ease;
}
.cursor-ring {
  width: 34px; height: 34px; border: 1px solid #fff;
  transition: opacity 200ms ease, width 260ms cubic-bezier(.22, .9, .3, 1), height 260ms cubic-bezier(.22, .9, .3, 1);
}
body.cursor-ready { cursor: none; }
body.cursor-ready a, body.cursor-ready button, body.cursor-ready .button,
body.cursor-ready input, body.cursor-ready textarea, body.cursor-ready select,
body.cursor-ready label { cursor: none; }
body.cursor-ready .cursor-dot, body.cursor-ready .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring { width: 60px; height: 60px; }
body.cursor-hover .cursor-dot { width: 0; height: 0; opacity: 0; }
@media (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-copy .eyebrow, .hero-copy h1, .hero-intro, .hero-actions,
  .hero-aside span, .hero-footnote span {
    animation: none; opacity: 1; transform: none;
  }
  .button:hover { transform: none; }
  .cursor-dot, .cursor-ring { display: none; }
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}