/* ============================================================
   geo.css — Geography / Regional Presence Page
   Page-specific styles for /geography
   All values reference CSS variables from tokens.css.
   No inline styles, no magic numbers, no !important.
   Desktop-first responsive design.
   ============================================================ */


/* ============================================================
   1. PAGE SHELL
   ============================================================ */

.geo-page {
  display: block;
  width: 100%;
}

.geo-page .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  vertical-align: middle;
}


/* ============================================================
   2. SECTION SPACING — architectural .section-gap equivalent
   ============================================================ */

/* Hero section: tight padding, asymmetric gutters */
.geo-hero {
  padding-inline: 10% 5%;
  padding-block: var(--space-20);
}

/* All remaining sections use asymmetric gutters */
.geo-page .geo-section {
  padding-inline: 10% 5%;
  padding-block: var(--space-32);
}

/* Tinted variant: lighter background band */
.geo-page .geo-section[data-variant="tinted"] {
  background-color: var(--color-surface-container-low);
  padding-inline: 0;
}

.geo-page .geo-section[data-variant="tinted"] .geo-section__inner {
  padding-inline: 10% 5%;
}

/* Map section spans full width, inner gutters applied to content */
.geo-map-section {
  width: 100%;
  background-color: var(--color-surface-container-low);
  padding-block: var(--space-24);
  position: relative;
  overflow: hidden;
}

.geo-map-section__inner {
  padding-inline: 10% 5%;
}


/* ============================================================
   3. HERO — Asymmetric 12-col layout
   Tailwind: grid-cols-12, col-span-8 / col-span-4, items-end
   ============================================================ */

.geo-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-12);
  align-items: flex-end;
}

/* Left column: 8 of 12 */
.geo-hero__left {
  grid-column: span 8;
}

/* Right column: 4 of 12 */
.geo-hero__right {
  grid-column: span 4;
  padding-bottom: var(--space-4);
}

/* Badge / eyebrow label */
.geo-hero__badge {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ultra-wide);
  margin-bottom: var(--space-6);
}

/* H1: text-8xl / bold / headline font / leading-none / tracking-tighter */
.geo-hero__heading {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 6vw + 0.5rem, 6rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-primary);
  letter-spacing: var(--tracking-tighter);
  margin: 0;
}

/* Description paragraph */
.geo-hero__description {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-outline);
  max-width: 24rem;
  margin: 0;
}


/* ============================================================
   4. MAP SECTION — Section header + map container
   ============================================================ */

/* Section header: heading left, meta right — items-baseline */
.geo-map-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-12);
}

/* H2 */
.geo-map-section__heading {
  font-family: var(--font-headline);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Region count: small-caps, uppercase, widest tracking */
.geo-map-section__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-outline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-variant: small-caps;
}

/* Map container: 600px height, relative, overflow-hidden */
.geo-map-container {
  position: relative;
  height: 600px;
  background-color: var(--color-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--border-width) solid rgba(191, 200, 197, 0.1);
}

/* Map background image: mix-blend-multiply + opacity-20 + grayscale */
.geo-map-container__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.2;
  filter: grayscale(100%);
}

/* Inner layer with pins grid */
.geo-map-container__pins {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 6-column dot grid: visual pins representation */
.geo-map-pins-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-20);
  padding: var(--space-20);
  opacity: 0.4;
}

/* Individual pin dot */
.geo-map-pins-grid__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  display: block;
}

.geo-map-pins-grid__dot[data-color="primary"] {
  background-color: var(--color-primary);
}

.geo-map-pins-grid__dot[data-color="secondary"] {
  background-color: var(--color-secondary);
}

/* Floating info card: absolute bottom-right, shadow-2xl, border-left secondary */
.geo-map-card {
  position: absolute;
  bottom: var(--space-12);
  right: var(--space-12);
  background-color: var(--color-surface);
  padding: var(--space-8);
  box-shadow: var(--shadow-2xl);
  max-width: 20rem;
  border-left: var(--border-width-4) solid var(--color-secondary);
  z-index: 20;
}

/* Card heading: font-headline bold text-xl primary */
.geo-map-card__heading {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

/* Card address paragraph */
.geo-map-card__address {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-outline);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

/* Card link: icon + label row */
.geo-map-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--color-on-surface);
  transition: color var(--transition-base);
}

.geo-map-card__link:hover {
  color: var(--color-primary);
}

.geo-map-card__link .material-symbols-outlined {
  color: var(--color-secondary);
  font-size: 1.5rem;
}

/* Card link label: small-caps, uppercase, widest tracking */
.geo-map-card__link-label {
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-variant: small-caps;
}


/* ============================================================
   5. STATISTICS — Bento grid (3 columns, gap-1px)
   Tailwind: grid-cols-3, gap-1, bg-surface-variant (for separators)
   ============================================================ */

.geo-stats {
  padding-inline: 10% 5%;
  padding-block-start: var(--space-32);
  padding-block-end: var(--space-32);
}

/* Bento grid wrapper: 1px gaps as separator lines via bg-surface-variant */
.geo-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--color-surface-variant);
}

/* Bento cell base */
.geo-bento__cell {
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1;
  background-color: var(--color-surface);
}

/* Primary cell */
.geo-bento__cell[data-bg="primary"] {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Surface-high cell */
.geo-bento__cell[data-bg="surface"] {
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface);
}

/* Secondary cell */
.geo-bento__cell[data-bg="secondary"] {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

/* Icon — text-4xl */
.geo-bento__icon {
  font-size: 2.5rem;
  display: block;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Icon color for surface cell */
.geo-bento__cell[data-bg="surface"] .geo-bento__icon {
  color: var(--color-secondary);
}

/* Icon color for primary / secondary cells */
.geo-bento__cell[data-bg="primary"] .geo-bento__icon,
.geo-bento__cell[data-bg="secondary"] .geo-bento__icon {
  color: inherit;
}

/* Value number: text-6xl headline bold */
.geo-bento__value {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 4vw + 0.5rem, 3.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}

/* Surface cell value: primary color */
.geo-bento__cell[data-bg="surface"] .geo-bento__value {
  color: var(--color-primary);
}

/* Primary/secondary cells: inherit white */
.geo-bento__cell[data-bg="primary"] .geo-bento__value,
.geo-bento__cell[data-bg="secondary"] .geo-bento__value {
  color: inherit;
}

/* Label: text-sm uppercase tracking-[0.2em] opacity-80 */
.geo-bento__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0;
  line-height: var(--leading-snug);
}

.geo-bento__cell[data-bg="primary"] .geo-bento__label,
.geo-bento__cell[data-bg="secondary"] .geo-bento__label {
  opacity: 0.8;
}

.geo-bento__cell[data-bg="surface"] .geo-bento__label {
  color: var(--color-outline);
}

/* Bottom block wrapping value + label */
.geo-bento__bottom {
  display: flex;
  flex-direction: column;
}


/* ============================================================
   6. OFFICES — Alternating 2-column layouts
   Tailwind: grid-cols-12, col-span-7/5, gap-12, space-y-24
   ============================================================ */

.geo-offices {
  padding-inline: 10% 5%;
  padding-block: var(--space-32);
}

/* Section H2 */
.geo-offices__heading {
  font-family: var(--font-headline);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-transform: uppercase;
  margin: 0 0 var(--space-16);
}

/* Stacked office entries: space-y-24 equivalent */
.geo-offices__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* ---- Single office entry: 12-col grid ---- */
.geo-office-entry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-12);
}

/* Image column: 7 of 12 */
.geo-office-entry__media {
  grid-column: span 7;
  height: 500px;
  overflow: hidden;
}

/* Reversed image: image right (7 of 12) */
.geo-office-entry[data-layout="image-right"] .geo-office-entry__media {
  grid-column: span 7;
  order: 2;
}

/* Content column: 5 of 12 */
.geo-office-entry__content {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Reversed content: content left (5 of 12) */
.geo-office-entry[data-layout="image-right"] .geo-office-entry__content {
  grid-column: span 5;
  order: 1;
}

/* Office image */
.geo-office-entry__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

.geo-office-entry__media:hover .geo-office-entry__image {
  transform: scale(1.03);
}

/* Badge / eyebrow label: secondary, xs, tracking-widest, uppercase, bold */
.geo-office-entry__badge {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-4);
}

/* H3: text-5xl primary uppercase headline bold */
.geo-office-entry__heading {
  font-family: var(--font-headline);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
  line-height: var(--leading-tight);
}

/* Description paragraph: text-lg leading-relaxed outline */
.geo-office-entry__description {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-outline);
  margin: 0 0 var(--space-6);
}

/* Contact details: address tag, space-y-2 */
.geo-office-entry__contacts {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

/* Contact row: flex items-start gap-3 */
.geo-office-entry__contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-outline);
}

.geo-office-entry__contact-row .material-symbols-outlined {
  color: var(--color-primary);
  font-size: var(--text-sm);
  margin-top: 2px;
  flex-shrink: 0;
}

.geo-office-entry__contact-row a {
  color: var(--color-outline);
  text-decoration: none;
  transition: color var(--transition-base);
}

.geo-office-entry__contact-row a:hover {
  color: var(--color-primary);
}

/* Directions button: outline variant, px-8 py-4, tracking-widest, mt-4 */
.geo-office-entry__btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  padding: var(--space-4) var(--space-8);
  border: var(--border-width-2) solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
  margin-top: var(--space-4);
  border-radius: var(--radius-none);
}

.geo-office-entry__btn:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.geo-office-entry__btn:active {
  transform: scale(0.98);
}


/* ============================================================
   7. EXPERT QUOTE — Border-left primary, large italic heading
   Tailwind: bg-surface-container-lowest p-16 border-l-6 border-primary
   ============================================================ */

.geo-quote {
  padding-inline: 10% 5%;
  padding-block: var(--space-32);
  background-color: var(--color-surface-container-low);
}

/* Quote card */
.geo-quote__card {
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-16);
  border-left: var(--border-width-6) solid var(--color-primary);
}

/* Quote text: text-3xl headline font-light italic leading-relaxed */
.geo-quote__text {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--color-primary);
  margin: 0 0 var(--space-8);
}

/* Author row: flex items-center gap-4 */
.geo-quote__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Author avatar: 12x12 (48px) square, bg-primary-container */
.geo-quote__avatar {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* Fallback avatar box (no image) */
.geo-quote__avatar-placeholder {
  width: 3rem;
  height: 3rem;
  background-color: var(--color-primary-container);
  display: block;
  flex-shrink: 0;
}

/* Author name: primary, uppercase, bold, text-sm tracking-widest */
.geo-quote__author-name {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-style: normal;
}

/* Author role: outline, xs, uppercase */
.geo-quote__author-role {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-outline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}


/* ============================================================
   8. CONTACT FORM — 2-col: left CTA + right form
   Tailwind: grid-cols-2, gap-20, pb-32
   ============================================================ */

.geo-form-section {
  padding-inline: 10% 5%;
  padding-block: var(--space-32);
  padding-block-end: var(--space-32);
}

/* 2-column grid: gap-20 */
.geo-form-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
}

/* ---- Left: CTA content ---- */
.geo-form-section__content {
  display: flex;
  flex-direction: column;
}

/* H2: text-6xl bold primary uppercase leading-none */
.geo-form-section__heading {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 4vw + 0.5rem, 3.75rem);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-8);
}

/* Description: text-lg outline leading-relaxed max-w-md */
.geo-form-section__description {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-outline);
  line-height: var(--leading-relaxed);
  max-width: 28rem;
  margin: 0 0 var(--space-12);
}

/* Option cards list: space-y-8 */
.geo-form-section__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Single option card: flex items-center gap-6, cursor-pointer, group */
.geo-option-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  cursor: pointer;
  text-decoration: none;
}

/* Icon box: w-16 h-16 bg-surface-container-high, flex center */
.geo-option-card__icon-box {
  width: 4rem;
  height: 4rem;
  background-color: var(--color-surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.geo-option-card__icon-box .material-symbols-outlined {
  font-size: 1.875rem;
  color: var(--color-on-surface);
  transition: color var(--transition-base);
}

/* Hover: icon box becomes primary, icon turns white */
.geo-option-card:hover .geo-option-card__icon-box {
  background-color: var(--color-primary);
}

.geo-option-card:hover .geo-option-card__icon-box .material-symbols-outlined {
  color: var(--color-on-primary);
}

/* Card body */
.geo-option-card__body {
  display: flex;
  flex-direction: column;
}

/* Card title: primary, bold, uppercase, tracking-widest */
.geo-option-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin: 0 0 var(--space-1);
}

/* Card subtitle: outline, text-sm */
.geo-option-card__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-outline);
  margin: 0;
}

/* ---- Right: form panel ---- */
.geo-form-section__form-panel {
  background-color: var(--color-surface-container);
  padding: var(--space-12);
}

/* ---- Form internals (floating-label style from geo.html) ---- */

/* Form wrapper */
.geo-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Field wrapper: relative for floating label */
.geo-form-field {
  position: relative;
}

/* Input / Select base */
.geo-form-field__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(191, 200, 197, 0.3);
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-on-surface);
  outline: none;
  transition: border-color var(--transition-base);
  border-radius: 0;
  box-sizing: border-box;
}

.geo-form-field__input:focus {
  border-bottom-color: var(--color-primary);
}

/* Placeholder transparent — label takes that role */
.geo-form-field__input::placeholder {
  color: transparent;
}

/* Floating label: starts at middle, rises when field has content / focused */
.geo-form-field__label {
  position: absolute;
  left: 0;
  top: var(--space-3);
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: rgba(112, 121, 118, 0.5);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  pointer-events: none;
  transition: top var(--transition-base), font-size var(--transition-base), color var(--transition-base);
}

/* Risen state: when input has value or is focused */
.geo-form-field__input:focus + .geo-form-field__label,
.geo-form-field__input:not(:placeholder-shown) + .geo-form-field__label {
  top: -0.875rem;
  font-size: var(--text-xs);
  color: var(--color-primary);
}

/* Select — appearance override */
.geo-form-field__input[data-type="select"] {
  appearance: none;
  -webkit-appearance: none;
  color: var(--color-outline);
  cursor: pointer;
}

/* Select label always stays risen (select value is always "shown") */
.geo-form-field__label[data-for="select"] {
  top: -0.875rem;
  font-size: var(--text-xs);
  color: var(--color-primary);
}

/* Submit button: full-width, primary bg, text-on-primary, py-6, tracking ultra-wide */
.geo-form-submit {
  width: 100%;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ultra-wide);
  padding: var(--space-6) var(--space-8);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
  border-radius: var(--radius-none);
  display: block;
}

.geo-form-submit:hover {
  background-color: var(--color-primary-container);
}

.geo-form-submit:active {
  transform: scale(0.98);
}

/* Disclaimer text */
.geo-contact-form__disclaimer {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-outline);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.geo-contact-form__disclaimer-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-base);
}

.geo-contact-form__disclaimer-link:hover {
  color: var(--color-primary-container);
}


/* ============================================================
   9. STAT-CARD OVERRIDES — geo page bento context
   When _partials/stat-card is used inside .geo-bento
   ============================================================ */

.geo-bento .stat-card {
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1;
  background-color: var(--color-surface);
}

.geo-bento .stat-card[data-bg="primary"] {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.geo-bento .stat-card[data-bg="secondary"] {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.geo-bento .stat-card[data-bg="surface"] {
  background-color: var(--color-surface-container-high);
}

.geo-bento .stat-card__icon {
  font-size: 2.5rem;
  display: block;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.geo-bento .stat-card[data-bg="surface"] .stat-card__icon {
  color: var(--color-secondary);
}

.geo-bento .stat-card[data-bg="primary"] .stat-card__icon,
.geo-bento .stat-card[data-bg="secondary"] .stat-card__icon {
  color: inherit;
}

.geo-bento .stat-card__value {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 4vw + 0.5rem, 3.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}

.geo-bento .stat-card[data-bg="surface"] .stat-card__value {
  color: var(--color-primary);
}

.geo-bento .stat-card[data-bg="primary"] .stat-card__value,
.geo-bento .stat-card[data-bg="secondary"] .stat-card__value {
  color: inherit;
}

.geo-bento .stat-card__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0;
  line-height: var(--leading-snug);
}

.geo-bento .stat-card[data-bg="primary"] .stat-card__label,
.geo-bento .stat-card[data-bg="secondary"] .stat-card__label {
  opacity: 0.8;
}

.geo-bento .stat-card[data-bg="surface"] .stat-card__label {
  color: var(--color-outline);
}


/* ============================================================
   10. QUOTE BLOCK OVERRIDES — geo context
   ============================================================ */

.geo-page .quote-block {
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-16);
  border-left: var(--border-width-6) solid var(--color-primary);
  margin: 0;
}

.geo-page .quote-block__icon {
  display: block;
  font-size: 3rem;
  color: var(--color-secondary);
  margin-bottom: var(--space-6);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.geo-page .quote-block__text {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--color-primary);
  margin: 0 0 var(--space-8);
}

.geo-page .quote-block__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.geo-page .quote-block__avatar {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.geo-page .quote-block__author-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.geo-page .quote-block__author-name {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-style: normal;
}

.geo-page .quote-block__author-role {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-outline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}


/* ============================================================
   11. CONTACT FORM OVERRIDES — geo context form panel
   ============================================================ */

.geo-page .contact-form-wrapper {
  background-color: transparent;
}

.geo-page .contact-form__heading {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-8);
  letter-spacing: var(--tracking-wider);
}

/* Override default form-field labels to match geo floating-label style */
.geo-page .form-field {
  position: relative;
  margin-bottom: 0;
}

.geo-page .form-field__label {
  position: absolute;
  left: 0;
  top: var(--space-3);
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: rgba(112, 121, 118, 0.5);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  pointer-events: none;
  transition: top var(--transition-base), font-size var(--transition-base), color var(--transition-base);
  line-height: 1;
}

.geo-page .form-field__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(191, 200, 197, 0.3);
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-on-surface);
  outline: none;
  transition: border-color var(--transition-base);
  border-radius: 0;
  box-sizing: border-box;
}

.geo-page .form-field__input:focus {
  border-bottom-color: var(--color-primary);
}

.geo-page .form-field__input::placeholder {
  color: transparent;
}

.geo-page .form-field__input:focus + .form-field__label,
.geo-page .form-field__input:not(:placeholder-shown) + .form-field__label {
  top: -0.875rem;
  font-size: var(--text-xs);
  color: var(--color-primary);
}

/* Select override */
.geo-page .form-field__select {
  appearance: none;
  -webkit-appearance: none;
  color: var(--color-outline);
  cursor: pointer;
}

/* Select wrapper */
.geo-page .form-field--select {
  position: relative;
}

.geo-page .form-field__select-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-outline);
  font-size: 1.25rem;
}

/* In geo context, select label always risen (select always has a value) */
.geo-page .form-field--select .form-field__label {
  top: -0.875rem;
  font-size: var(--text-xs);
  color: var(--color-primary);
}

/* Contact form inside geo panel uses column gap */
.geo-page .contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Submit button override */
.geo-page .contact-form__submit {
  width: 100%;
  padding: var(--space-6) var(--space-8);
  letter-spacing: var(--tracking-ultra-wide);
  font-size: var(--text-sm);
}

.geo-page .contact-form__disclaimer {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-outline);
  margin-top: var(--space-4);
}


/* ============================================================
   12. SCREEN READER — .sr-only utility
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   13. RESPONSIVE — Tablet (<= 1023px)
   ============================================================ */

@media (max-width: 1023px) {

  /* Hero: stack columns */
  .geo-hero {
    padding-inline: var(--container-padding);
  }

  .geo-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .geo-hero__left,
  .geo-hero__right {
    grid-column: span 1;
  }

  .geo-hero__description {
    max-width: 100%;
  }

  /* Map section: full padding */
  .geo-map-section__inner {
    padding-inline: var(--container-padding);
  }

  /* Map section header: wrap if needed */
  .geo-map-section__header {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  /* Map container: reduce height */
  .geo-map-container {
    height: 400px;
  }

  /* Floating map card: smaller padding, smaller max-width */
  .geo-map-card {
    bottom: var(--space-6);
    right: var(--space-6);
    padding: var(--space-6);
    max-width: 16rem;
  }

  /* Stats: reduce columns */
  .geo-stats {
    padding-inline: var(--container-padding);
  }

  /* Bento: 1 column on tablet */
  .geo-bento {
    grid-template-columns: 1fr;
  }

  .geo-bento .stat-card {
    aspect-ratio: auto;
    padding: var(--space-10);
  }

  /* Offices: collapse to 1 column */
  .geo-offices {
    padding-inline: var(--container-padding);
  }

  .geo-offices__list {
    gap: var(--space-16);
  }

  .geo-office-entry {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .geo-office-entry__media,
  .geo-office-entry[data-layout="image-right"] .geo-office-entry__media {
    grid-column: span 1;
    height: 350px;
    order: 1;
  }

  .geo-office-entry__content,
  .geo-office-entry[data-layout="image-right"] .geo-office-entry__content {
    grid-column: span 1;
    order: 2;
  }

  /* Quote section */
  .geo-quote {
    padding-inline: var(--container-padding);
  }

  /* Form section */
  .geo-form-section {
    padding-inline: var(--container-padding);
  }

  .geo-form-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  /* Map section asymmetric gutters off */
  .geo-page .geo-section[data-variant="tinted"] .geo-section__inner {
    padding-inline: var(--container-padding);
  }
}


/* ============================================================
   14. RESPONSIVE — Mobile (<= 767px)
   ============================================================ */

@media (max-width: 767px) {

  /* Hero: tighter padding */
  .geo-hero {
    padding-block: var(--space-12);
    padding-inline: var(--container-padding);
  }

  /* Hero heading: slightly smaller */
  .geo-hero__heading {
    font-size: clamp(2rem, 10vw, 2.5rem);
  }

  /* Map: compact */
  .geo-map-section {
    padding-block: var(--space-16);
  }

  .geo-map-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
  }

  .geo-map-container {
    height: 280px;
  }

  /* Map card: hidden on very small or repositioned */
  .geo-map-card {
    position: static;
    box-shadow: none;
    border-left: var(--border-width-4) solid var(--color-secondary);
    margin-top: var(--space-6);
    max-width: 100%;
  }

  /* Pins grid hidden on mobile */
  .geo-map-pins-grid {
    display: none;
  }

  /* Stats */
  .geo-stats {
    padding-block: var(--space-16);
  }

  .geo-bento__cell,
  .geo-bento .stat-card {
    aspect-ratio: auto;
    padding: var(--space-8);
  }

  /* Offices */
  .geo-offices {
    padding-block: var(--space-16);
  }

  .geo-offices__heading {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-10);
  }

  .geo-office-entry__media,
  .geo-office-entry[data-layout="image-right"] .geo-office-entry__media {
    height: 260px;
  }

  .geo-office-entry__heading {
    font-size: var(--text-3xl);
  }

  /* Quote */
  .geo-quote {
    padding-block: var(--space-16);
    padding-inline: var(--container-padding);
  }

  .geo-quote__card {
    padding: var(--space-8);
  }

  .geo-page .quote-block {
    padding: var(--space-8) var(--space-6);
  }

  .geo-page .quote-block__text {
    font-size: var(--text-2xl);
  }

  /* Form */
  .geo-form-section {
    padding-block: var(--space-16);
  }

  .geo-form-section__heading {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
  }

  .geo-form-section__form-panel {
    padding: var(--space-8);
  }

  .geo-contact-form {
    gap: var(--space-8);
  }

  /* Map section tinted */
  .geo-map-section__inner {
    padding-inline: var(--container-padding);
  }
}


/* ============================================================
   15. PRINT RESETS
   ============================================================ */

@media print {

  .geo-map-container__image {
    opacity: 0.5;
    filter: none;
  }

  .geo-map-pins-grid {
    display: none;
  }

  .geo-office-entry__image {
    transform: none;
  }

  .geo-map-card {
    position: static;
    box-shadow: none;
    margin-top: var(--space-4);
  }

  .geo-bento__cell,
  .geo-bento .stat-card {
    aspect-ratio: auto;
    break-inside: avoid;
  }
}