/* ============================================================
   TalkGlitz — how-we-work.css
   Mobile-first · Performance-optimised
   ============================================================ */

/* ── PAGE HERO ─────────────────────────────────────────── */
.hww-hero {
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: flex-end;
  padding: 7rem 0 4rem;
  overflow: hidden;
}
.hww-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hww-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.hww-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,.97) 0%,
    rgba(10,10,10,.75) 45%,
    rgba(10,10,10,.4)  80%,
    rgba(10,10,10,.2) 100%
  );
}
.hww-hero-inner {
  position: relative;
  z-index: 1;
}
.hww-hero-inner h1 {
  font-size: clamp(2.4rem, 7vw, 5rem);
  margin-bottom: 1.25rem;
}
.hww-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
@media (min-width: 640px) {
  .hww-hero-meta { flex-direction: row; flex-wrap: wrap; gap: 1.5rem; }
}
.hww-meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--grey-400);
}
.hww-meta-item i { color: var(--gold); font-size: 0.9rem; }
.hww-meta-item strong { color: var(--white); }

/* ── INTRO SECTION ─────────────────────────────────────── */
.hww-intro {
  padding: var(--space-3xl) 0;
  background: var(--off-black);
}
.hww-intro-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .hww-intro-inner { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
}
.hww-intro-text h2 { margin-bottom: 1.25rem; }
.hww-intro-text p  { margin-bottom: 1.1rem; }

/* Principle cards */
.hww-principle-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.hww-pc {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--charcoal);
  border: 1px solid rgba(201,168,76,.1);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1rem 1.5rem;
  transition: border-color var(--dur), transform var(--dur);
}
.hww-pc:hover {
  border-color: rgba(201,168,76,.3);
  transform: translateX(6px);
}
.hww-pc i {
  color: var(--gold);
  font-size: 1.2rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}
.hww-pc span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
}

/* ── STEPS SECTION ─────────────────────────────────────── */
.hww-steps-section {
  padding: var(--space-3xl) 0;
  background: var(--black);
}

.hww-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  margin-top: var(--space-xl);
}

/* Vertical connector line */
.hww-steps::before {
  content: '';
  position: absolute;
  left: 2.25rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--gold) 0%,
    rgba(201,168,76,.5) 60%,
    rgba(201,168,76,0) 100%
  );
}
@media (min-width: 768px) {
  .hww-steps::before { left: 3rem; }
}

/* Individual step */
.hww-step {
  display: flex;
  gap: 1.5rem;
  padding: 0 0 3.5rem;
  position: relative;
}
@media (min-width: 768px) {
  .hww-step { gap: 2.5rem; }
}
.hww-step:last-child { padding-bottom: 0; }

/* Step number — sits on the timeline */
.hww-step-number {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--off-black);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
  /* Pulse ring on hover */
  transition: box-shadow var(--dur);
}
.hww-step:hover .hww-step-number {
  box-shadow: 0 0 0 6px rgba(201,168,76,.12);
}

/* Step content card */
.hww-step-content {
  flex: 1;
  background: var(--charcoal);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: border-color var(--dur);
}
.hww-step:hover .hww-step-content {
  border-color: rgba(201,168,76,.2);
}

/* Step header: icon + tag + title */
.hww-step-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.hww-step-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.hww-step-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.hww-step-content h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-bottom: 0;
}
.hww-step-content > p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  color: var(--grey-400);
}

/* Sub-list inside step */
.hww-step-details {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}
.hww-step-details h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-600);
  margin-bottom: 0.875rem;
}
.hww-step-details ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hww-step-details li {
  font-size: 0.875rem;
  color: var(--grey-400);
  padding-left: 1rem;
  position: relative;
}
.hww-step-details li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.8rem;
}

/* Outcome bar at bottom of each step */
.hww-step-outcome {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(201,168,76,.05);
  border-left: 2px solid var(--gold);
  padding: 0.875rem 1.1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: 1rem;
}
.hww-outcome-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.hww-step-outcome > span:last-child {
  font-size: 0.875rem;
  color: var(--grey-200);
  line-height: 1.6;
}

/* ── COMMUNICATIONS SECTION ────────────────────────────── */
.hww-comms-section {
  padding: var(--space-3xl) 0;
  background: var(--charcoal);
}
.hww-comms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: var(--space-xl);
}
@media (min-width: 640px) { .hww-comms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .hww-comms-grid { grid-template-columns: repeat(3, 1fr); } }

.hww-comm-card {
  background: var(--off-black);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: border-color var(--dur), transform var(--dur);
}
.hww-comm-card:hover {
  border-color: rgba(201,168,76,.2);
  transform: translateY(-3px);
}
.hww-comm-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
}
.hww-comm-card h3 { font-size: 1.05rem; margin-bottom: 0.75rem; }
.hww-comm-card p  { font-size: 0.875rem; line-height: 1.75; }

/* ── OFFICE SECTION ────────────────────────────────────── */
.hww-office-section {
  overflow: hidden;
  background: var(--black);
}
.hww-office-inner {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .hww-office-inner {
    grid-template-columns: 1fr 1fr 1fr;
    min-height: 420px;
  }
}
.hww-office-img-col {
  overflow: hidden;
  min-height: 260px;
}
.hww-office-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.hww-office-img-col:hover img { transform: scale(1.04); }
.hww-office-caption-col {
  background: var(--charcoal);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  border-left: 1px solid rgba(201,168,76,.08);
}
.hww-office-caption-col h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
}
.hww-office-caption-col p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--grey-400);
}

/* ── CLIENT ROLE SECTION ───────────────────────────────── */
.hww-client-role {
  padding: var(--space-3xl) 0;
  background: var(--off-black);
}
.hww-client-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 1024px) {
  .hww-client-inner { grid-template-columns: 1fr 380px; }
}
.hww-client-text h2 { margin-bottom: 1rem; }
.hww-client-text > p { margin-bottom: 2rem; }
.hww-client-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.hww-client-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.hww-client-list li > i {
  color: var(--gold);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.hww-client-list li strong {
  display: block;
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: 0.35rem;
}
.hww-client-list li p {
  font-size: 0.875rem;
  line-height: 1.75;
  margin: 0;
}

/* Guarantee card */
.hww-guarantee-card {
  background: var(--charcoal);
  border: 1px solid rgba(201,168,76,.15);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
@media (min-width: 1024px) {
  .hww-guarantee-card {
    position: sticky;
    top: 7rem;
  }
}
.hww-guarantee-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}
.hww-guarantee-card h3 {
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hww-guarantee-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.hww-guarantee-card li {
  display: flex;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--grey-400);
  align-items: flex-start;
}
.hww-guarantee-card li i {
  color: var(--gold);
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

/* ── TIMELINES SECTION ─────────────────────────────────── */
.hww-timelines-section {
  padding: var(--space-3xl) 0;
  background: var(--black);
}
.hww-timelines-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: var(--space-xl);
}
@media (min-width: 640px) { .hww-timelines-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .hww-timelines-grid { grid-template-columns: repeat(3, 1fr); } }

.hww-timeline-card {
  background: var(--charcoal);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color var(--dur), transform var(--dur);
}
.hww-timeline-card:hover {
  border-color: rgba(201,168,76,.2);
  transform: translateY(-3px);
}
.hww-tl-icon {
  color: var(--gold);
  font-size: 1.4rem;
}
.hww-tl-service {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-600);
}
.hww-tl-range {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.hww-tl-desc {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--grey-400);
  flex-grow: 1;
  margin: 0;
}
.hww-tl-deps {
  font-size: 0.78rem;
  color: var(--grey-600);
  line-height: 1.6;
  margin: 0;
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}
.hww-tl-deps i {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* ── FINAL CTA SECTION ─────────────────────────────────── */
.hww-final-cta {
  padding: var(--space-2xl) 0;
  background: linear-gradient(135deg, #1a0a00 0%, #3a1e00 50%, #1a0a00 100%);
  border-top: 1px solid rgba(201,168,76,.1);
  position: relative;
  overflow: hidden;
}
.hww-final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hww-final-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .hww-final-cta-inner { grid-template-columns: 1fr auto; gap: 4rem; }
}
.hww-cta-text h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--white);
  margin-bottom: 0.75rem;
}
.hww-cta-text p { color: rgba(255,255,255,.7); font-size: 1.05rem; }
.hww-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .hww-cta-actions { flex-direction: row; }
}

/* Larger CTA button variant */
.btn-lg {
  padding: 1.1rem 2.25rem;
  font-size: 0.95rem;
}

/* ── RESPONSIVE: mobile step layout ───────────────────── */
@media (max-width: 479px) {
  .hww-steps::before { left: 1.6rem; }
  .hww-step { gap: 1rem; }
  .hww-step-number {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 0.7rem;
  }
  .hww-step-content { padding: 1.5rem; }
  .hww-step-header { flex-direction: column; gap: 0.75rem; }
}

/* ── FULL-BLEED OFFICE SECTION ─────────────────────────── */
.hww-office-fullbleed {
  position: relative;
  min-height: 90svh;
  display: flex;
  align-items: center;   /* content centred over the image */
  overflow: hidden;
}

/* Background image — fills the whole section */
.hww-fb-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hww-fb-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  transition: transform 8s ease;
}
.hww-office-fullbleed:hover .hww-fb-bg img {
  transform: scale(1.04);
}

/* Single solid overlay — covers the entire image so text always reads */
.hww-fb-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Strong dark base across the whole section */
    linear-gradient(
      135deg,
      rgba(10,10,10,.92) 0%,
      rgba(10,10,10,.82) 50%,
      rgba(10,10,10,.72) 100%
    ),
    /* Gold accent — top right corner warmth */
    radial-gradient(
      ellipse at 85% 5%,
      rgba(139,105,20,.3) 0%,
      transparent 55%
    );
}

/* Content sits above overlays — centred vertically */
.hww-fb-content {
  position: relative;
  z-index: 2;
  padding: 8rem 1.25rem 6rem;
  max-width: 820px;
}
@media (min-width: 768px) {
  .hww-fb-content { padding: 9rem 2rem 7rem; }
}

/* Location tag */
.hww-fb-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,.35);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(10,10,10,.25);
}
.hww-fb-tag i { font-size: 0.8rem; }

/* Main heading */
.hww-fb-heading {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1.75rem;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.hww-fb-heading em {
  font-style: italic;
  color: var(--gold);
  display: block;
}

/* Body text */
.hww-fb-body {
  max-width: 640px;
  margin-bottom: 2.5rem;
}
.hww-fb-body p {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.8;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  margin-bottom: 1rem;
}
.hww-fb-body p:last-child { margin-bottom: 0; }

/* Stats row — frosted glass card */
.hww-fb-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem 2rem;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: var(--radius-lg);
  width: fit-content;
}
.hww-fb-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.hww-fb-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.hww-fb-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.55);
}
.hww-fb-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

/* CTA */
.hww-fb-cta {
  padding: 1rem 2rem;
  font-size: 0.9rem;
}

/* Mobile */
@media (max-width: 767px) {
  .hww-office-fullbleed { min-height: 100svh; align-items: flex-end; }
  .hww-fb-content { padding: 5rem 1.25rem 4rem; }
  .hww-fb-heading { font-size: clamp(2rem, 8vw, 3rem); }
  .hww-fb-stats { padding: 1.1rem 1.25rem; }
  .hww-fb-num { font-size: 1.6rem; }
}

/* ── OFFICE SECTION: text above, image below ─────────────── */
.hww-office-clean {
  padding: var(--space-3xl) 0 0;
  background: var(--off-black);
}

.hww-office-text-block {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: var(--space-xl);
}

.hww-office-heading {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 1.75rem;
}
.hww-office-heading em {
  display: block;
  font-style: italic;
  color: var(--gold);
}

.hww-office-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-bottom: 2rem;
  text-align: left;
}
@media (min-width: 768px) {
  .hww-office-cols {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
.hww-office-cols p {
  font-size: 0.975rem;
  line-height: 1.8;
  color: var(--grey-400);
  margin: 0;
}

/* Stats row — reuse .hww-fb-stats but centred */
.hww-office-text-block .hww-fb-stats {
  justify-content: center;
}

/* Image below — full width, rounded top corners, no gap underneath */
.hww-office-img-below {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: var(--space-xl);
  /* Gold top border as accent */
  border-top: 3px solid var(--gold);
}
.hww-office-img-below img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 560px;
  object-fit: cover;
  object-position: center 40%;
  transition: transform 0.8s ease;
}
.hww-office-img-below:hover img {
  transform: scale(1.02);
}
@media (min-width: 1024px) {
  .hww-office-img-below img { max-height: 640px; }
}

/* ── HOW WE WORK: mobile-specific fixes ─────────────────── */

/* Hero: reduce min-height on small phones */
@media (max-width: 479px) {
  .hww-hero { min-height: 80svh; padding: 6rem 0 3rem; }
  .hww-hero-inner h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
}

/* Intro principle cards: full width on mobile */
@media (max-width: 479px) {
  .hww-pc { padding: 0.875rem 1.1rem; }
  .hww-pc span { font-size: 0.95rem; }
}

/* Steps: reduce padding on mobile */
@media (max-width: 479px) {
  .hww-step-content { padding: 1.25rem; }
  .hww-step-details { padding: 1rem; }
  .hww-step-outcome { padding: 0.75rem 1rem; }
  .hww-steps::before { left: 1.5rem; }
}

/* Client role list: smaller gap on mobile */
@media (max-width: 479px) {
  .hww-client-list { gap: 1.25rem; }
  .hww-client-list li strong { font-size: 0.9rem; }
  .hww-client-list li p { font-size: 0.82rem; }
}

/* Guarantee card: not sticky on mobile */
@media (max-width: 1023px) {
  .hww-guarantee-card { position: static; }
}

/* Timeline cards: single col on mobile */
@media (max-width: 639px) {
  .hww-timelines-grid { grid-template-columns: 1fr; }
}

/* Final CTA: stack on mobile */
@media (max-width: 479px) {
  .hww-final-cta-inner { grid-template-columns: 1fr; }
  .hww-cta-actions { flex-direction: column; width: 100%; }
  .hww-cta-actions .btn { width: 100%; justify-content: center; }
}

/* Office clean section: tighter on mobile */
@media (max-width: 479px) {
  .hww-office-text-block { padding-bottom: var(--space-lg); }
  .hww-office-heading { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}