.loc-page .tone-base, .about-page .tone-base { background: var(--ink, #161819); color: var(--cloud, #f5f2ec); }
.loc-page .tone-alt, .about-page .tone-alt { background: var(--alt, #1a1d1f); color: var(--cloud, #f5f2ec); }
.loc-page .tone-cream, .about-page .tone-cream { background: var(--cream, #ede8df); color: var(--ink, #161819); }
.loc-page .tone-cream .eyebrow,
.loc-page .tone-cream h2,
.loc-page .tone-cream .section-intro,
.about-page .tone-cream .eyebrow,
.about-page .tone-cream h2,
.about-page .tone-cream .section-intro { color: inherit; }

.loc-hero { background: #161819; color: #f5f2ec; padding: clamp(3rem, 6vw, 5rem) 0; }
.loc-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) {
  .loc-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; }
  .loc-usa .loc-hero-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.loc-hero h1 {
  margin: 0.4rem 0 1rem;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.loc-lead { max-width: 38rem; color: #c8ced0; font-size: 1.05rem; line-height: 1.65; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; margin-top: 1.5rem; }
.loc-secondary { color: #f5f2ec; display: inline-flex; align-items: center; gap: 0.35rem; border-bottom: 1px solid color-mix(in srgb, #f5f2ec 35%, transparent); text-decoration: none; }
.loc-secondary:hover { color: #f28b50; border-color: #f28b50; }
.loc-hero-media { margin: 0; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid #3d4548; }
.loc-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }
.loc-hero-media figcaption {
  position: absolute; left: 0.7rem; bottom: 0.7rem;
  background: rgba(22, 24, 25, 0.72); color: #f5f2ec; border-radius: 8px;
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.5rem;
}

.loc-prose { max-width: 46rem; }
.loc-split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .loc-split { grid-template-columns: 1.15fr 0.85fr; } }
.loc-cards, .loc-list, .loc-steps, .loc-proof, .loc-pills { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.loc-cards { display: grid; gap: 0.75rem; }
@media (min-width: 760px) { .loc-cards:not(.loc-cards-stack) { grid-template-columns: 1fr 1fr; } }
.loc-cards li, .loc-proof li {
  padding: 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 16px;
  background: #fff;
  color: #161819;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
.loc-page .tone-base .loc-cards li,
.loc-page .tone-base .loc-proof li { background: #1e2223; color: #f5f2ec; border-color: #3d4548; }
.loc-cards li:hover, .loc-proof li:hover { border-color: #f28b5080; }
.loc-list { display: grid; gap: 0.7rem; }
.loc-list li { padding-left: 0.9rem; border-left: 2px solid #9dbdb8; }
.loc-links { display: flex; gap: 1.25rem; margin-top: 1.25rem; }
.loc-links a { color: #f28b50; display: inline-flex; align-items: center; gap: 0.3rem; }

.loc-steps { display: grid; gap: 0; position: relative; }
.loc-steps li {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding: 0.85rem 0;
  animation: loc-step 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
.loc-steps span {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 2px solid #9dbdb8; color: #9dbdb8; font-size: 0.75rem; font-weight: 700;
}
.loc-steps p { margin: 0.45rem 0 0; }

.loc-proof { display: grid; gap: 0.85rem; }
@media (min-width: 760px) { .loc-proof { grid-template-columns: 1fr 1fr; } }
.loc-proof strong { display: block; margin-bottom: 0.35rem; }
.loc-tag { display: inline-block; font-size: 0.68rem; letter-spacing: 0.1em; color: #f28b50; margin-bottom: 0.4rem; }
.loc-proof p { margin: 0; }

.loc-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.loc-pills a, .loc-pills span {
  display: inline-flex; min-height: 44px; align-items: center; padding: 0.45rem 0.9rem;
  border: 1px solid #3d4548; border-radius: 100px; text-decoration: none; color: inherit;
}
.loc-pills a:hover { border-color: #f28b5080; color: #f28b50; }

.study-grid > li { border: 0; padding: 0; background: transparent; }
.study-grid a {
  display: grid; gap: 0.35rem; padding: 1.15rem 1.25rem; height: 100%;
  border: 1px solid #3d4548; border-radius: 16px; color: inherit; text-decoration: none;
}

.page-prose { max-width: 46rem; }
.page-prose h1 { margin: 0.4rem 0 1rem; }
.draft-grid, .study-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
@media (min-width: 760px) { .draft-grid, .study-grid { grid-template-columns: 1fr 1fr; } }
.draft-grid li, .study-grid a, .study-grid li {
  display: grid; gap: 0.35rem; padding: 1.15rem 1.25rem;
  border: 1px solid #3d4548; border-radius: 16px; color: inherit; text-decoration: none;
  transition: border-color 180ms ease-out;
}
.draft-grid li:hover, .study-grid a:hover { border-color: #f28b5080; }
.draft-grid small, .study-grid small { letter-spacing: 0.08em; text-transform: uppercase; color: #f28b50; font-size: 0.68rem; }
.cat-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.cat-row span { border: 1px solid #3d4548; border-radius: 100px; padding: 0.4rem 0.8rem; font-size: 0.85rem; }

.contact-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) {
  .contact-split { grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1fr); gap: 5rem; align-items: center; }
}
.contact-facts { margin: 2rem 0 0; border-top: 1px solid #3d4548; }
.contact-facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid #3d4548; }
.contact-facts dt { margin: 0; color: #a7adb0; font-size: 14px; font-weight: 600; }
.contact-facts dd { margin: 0; color: #f5f2ec; font-size: 16px; }
.contact-form {
  display: grid; gap: 16px; margin: 0;
  padding: 28px; border: 1px solid #3d4548; border-radius: 16px; background: #1e2223;
}
.contact-form label { display: block; color: #f5f2ec; font-size: 13px; font-weight: 600; line-height: 1.4; }
.contact-form label span { color: #a7adb0; font-weight: 400; }
.contact-fields { display: grid; gap: 16px; }
@media (min-width: 700px) { .contact-fields { grid-template-columns: 1fr 1fr; } }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; margin-top: 8px; padding: 0 14px;
  background: #161819; border: 1px solid #7f898d; border-radius: 8px; color: #f5f2ec;
  font: inherit; font-size: 16px;
}
.contact-form input { height: 48px; }
.contact-form textarea { min-height: 140px; padding: 12px 14px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #f28b50; outline: 2px solid #f28b50; outline-offset: 2px; }
.contact-form .form-error { display: block; margin-top: 8px; }
.contact-form .button { justify-self: start; border-radius: 8px; color: #161819; }
.contact-form .button:hover { transform: none; background: #ffa36d; }
.contact-form-note { margin: 0; color: #a7adb0; font-size: 14px; line-height: 1.5; }
@media (max-width: 599px) { .contact-form .button { width: 100%; } }
.contact-social { margin: 1.25rem 0 0; max-width: 42rem; color: #a7adb0; font-size: 14px; line-height: 1.6; }
.contact-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .contact-steps { grid-template-columns: 1fr 1fr; } }
.contact-steps li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 22px 24px; border: 1px solid #3d4548; border-radius: 16px; background: #1e2223;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
.contact-steps li:hover { border-color: #f28b5080; background: #282d2f; }
.contact-steps span { color: #9dbdb8; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.contact-steps p { margin: 0; color: #f5f2ec; font-size: 16px; line-height: 1.55; }

.about-page .section { scroll-margin-top: 156px; }
.about-page .loc-lead + .loc-lead { margin-top: 0.85rem; }
.about-hero-photo { position: relative; }
.about-hero-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-hero-photo::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, #161819d8); pointer-events: none; }
.about-hero-stat { position: absolute; z-index: 1; left: 22px; bottom: 52px; display: flex; align-items: center; gap: 14px; color: #f5f2ec; }
.about-hero-stat strong { font-size: clamp(3.2rem, 5vw, 4.6rem); font-weight: 500; letter-spacing: -0.06em; line-height: 0.9; }
.about-hero-stat span { font-size: 0.92rem; line-height: 1.4; }
.about-hero-note { margin: 10px 2px 0; color: #a7adb0; font-size: 0.72rem; line-height: 1.4; }

.about-matter-head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 8px; }
@media (min-width: 900px) { .about-matter-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; } }
.about-matter-head .section-heading { margin-bottom: 0; }
.about-matter-lead { margin: 0; color: #a7adb0; font-size: 18px; line-height: 1.65; max-width: 36rem; }
.about-matter-list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .about-matter-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .about-matter-list { grid-template-columns: repeat(4, 1fr); } }
.about-matter-list li { padding-top: 16px; border-top: 1px solid #3d4548; }
.about-matter-list span { display: block; margin-bottom: 12px; color: #f28b50; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.about-matter-list p { margin: 0; color: #f5f2ec; font-size: 18px; font-weight: 500; line-height: 1.45; }

.about-principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 24px; }
@media (min-width: 760px) { .about-principles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .about-principles { grid-template-columns: 1fr 1fr 1fr; } }
.about-principles li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding-top: 18px; border-top: 1px solid #cfc6b8; color: #161819;
}
.about-principles svg { color: #161819; }
.about-principles h3 { margin: 4px 0 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.about-principles p { margin: 0; color: #4d575b; font-size: 14px; line-height: 1.55; }

.about-services { margin-top: 0; }

.study-index { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .study-index { grid-template-columns: 1fr 1fr; } }
.study-index a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid #3d4548; border-radius: 16px; background: #1e2223; color: inherit; text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.study-index a:hover { border-color: #f28b5080; background: #282d2f; }
.study-index-media { display: grid; place-items: center; min-height: 240px; background: #f5f2ec; }
.study-index-media img { width: 100%; height: 260px; object-fit: contain; }
.study-index-copy { display: grid; gap: 0.4rem; padding: 1.25rem 1.35rem 1.4rem; }
.study-index-copy small { letter-spacing: 0.08em; text-transform: uppercase; color: #f28b50; font-size: 0.68rem; }
.study-index-copy strong { font-size: 1.45rem; font-weight: 500; letter-spacing: -0.02em; }
.study-index-copy span { color: #d5dbde; line-height: 1.55; }
.study-next { margin: 1.5rem 0 0; color: #a7adb0; }
.study-next a { color: #f28b50; }

.study-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .study-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; } }
.study-copy { margin: 0 0 1rem; color: #d5dbde; font-size: 16px; line-height: 1.65; max-width: 40rem; }
.study-copy:last-child { margin-bottom: 0; }
.study-shot { margin: 0; display: grid; place-items: center; min-height: 280px; padding: 16px; border-radius: 12px; background: #f5f2ec; border: 1px solid #3d4548; }
.study-shot img { width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.study-gallery { display: grid; gap: 16px; }
@media (min-width: 800px) { .study-gallery { grid-template-columns: 1.15fr 0.85fr 0.85fr; } }
.study-gallery figure { margin: 0; }
.study-gallery img { width: 100%; height: 280px; object-fit: cover; border-radius: 12px; background: #161819; }
.study-gallery .study-product img { object-fit: contain; background: #f5f2ec; }
.study-gallery figcaption { margin-top: 8px; color: #a7adb0; font-size: 12px; line-height: 1.45; }
.study-page .framework-section { scroll-margin-top: 156px; }

.about-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
@media (min-width: 900px) { .about-projects { grid-template-columns: 1fr 1fr 1fr; } }
.about-projects a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid #3d4548; border-radius: 16px; background: #1e2223; color: inherit; text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.about-projects a:hover { border-color: #f28b5080; background: #282d2f; }
.about-project-media { display: grid; place-items: center; min-height: 210px; background: #f5f2ec; }
.about-project-media img { width: 100%; height: 220px; object-fit: contain; }
.about-project-copy { display: grid; gap: 0.35rem; padding: 1.15rem 1.25rem 1.3rem; }
.about-project-copy small { letter-spacing: 0.08em; text-transform: uppercase; color: #f28b50; font-size: 0.68rem; }
.about-project-copy strong { font-size: 1.15rem; font-weight: 500; }
.about-project-copy span { color: #d5dbde; line-height: 1.55; }

.about-story { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .about-story { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: center; gap: 3rem; } }
.about-player { overflow: hidden; border: 1px solid #3d4548; border-radius: 12px; background: #000; }
.about-player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #161819; }

.about-markets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
@media (min-width: 760px) { .about-markets { grid-template-columns: 1fr 1fr 1fr; } }
.about-markets a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%;
  padding: 22px; border: 1px solid #d9d3c7; border-radius: 16px; background: #fff; color: #161819; text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.about-markets a:hover { border-color: #f28b5080; background: #f7f3ec; }
.about-markets svg { color: #f28b50; }
.about-markets strong { font-size: 1.15rem; font-weight: 500; }
.about-markets span { color: #3d4548; line-height: 1.55; }

@media (max-width: 900px) {
  .about-page .section { scroll-margin-top: 140px; }
  .about-hero-photo img { aspect-ratio: 16 / 11; }
}
@media (prefers-reduced-motion: reduce) {
  .about-projects a, .about-markets a, .about-page .goal-card,
  .contact-reach li, .contact-steps li { transition: none; }
}

@keyframes loc-step {
  0%, 100% { opacity: 0.62; }
  18%, 40% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loc-steps li { animation: none !important; opacity: 1; }
}