/*
 * Design system for Cranberry Psychological Center.
 *
 * The tokens below are the source of truth for colors and type. They came
 * from the client's brand kit, whose website mockup this site reproduces.
 *
 * Mobile-first: base rules are unprefixed, breakpoints layer on top at
 * 768px (tablet) and 1280px (desktop).
 */

/* ---------- Design tokens ---------- */

:root {
  /* Cranberry ramp, verbatim from the kit's :root */
  --cb-900: #2E0712;
  --cb-800: #48101E;
  --cb-700: #641327;
  --cb-600: #7E1A33; /* PRIMARY */
  --cb-500: #9C2A45;
  --cb-400: #BE5267;
  --cb-300: #D88C99;
  --cb-200: #EEC6CD;
  --cb-100: #F8E6EA;
  --cb-50: #FCF4F6;

  /* Warm neutrals */
  --ink: #211B1A;
  --cocoa: #4A3F3C;
  --stone: #7A6D68;
  --mist: #A99E98;
  --sand: #D8CDC4;
  --linen: #EFE8E0;
  --cream: #F7F2EC;
  --paper: #FFFFFF;

  /* Crimson Pro is the free stand-in for Minion, the logo's typeface. */
  --serif: "Crimson Pro", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, system-ui, sans-serif;

  --maxw: 1160px;
  /* Header and footer span wider than the reading column so they sit near
     the window edges on large screens instead of floating mid-page. */
  --maxw-chrome: 1440px;
  /* Hero text block width; matches the widest the copy got before it was
     centered, so the headline keeps its two-line wrap. */
  --hero-copy-w: 500px;
  /* Gap between the centered --maxw column and the viewport edge, 0 once the
     viewport is narrower. Media that bleeds to the edge uses it as a
     negative margin. */
  --bleed: max(0px, (100vw - var(--maxw)) / 2);

  /* The kit rounds generously: 18px on content cards, 14px on tiles, 999px on
     buttons and badges. Nothing in the system uses a 4px corner. */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Type scale, from the kit's "04 · Typography" scale rows. --size-hero is the
     web hero headline (40px in the mockup), which is deliberately smaller than
     the 54px display sample. Both scale down at narrow widths. */
  --size-hero: 30px;
  --size-h1: 30px;
  --size-h2: 24px;
  --size-h3: 19px;
  --size-body-l: 17px;
  --size-body: 16px;
  --size-body-s: 15px;
  --size-caption: 12px;

  /* Caps tracking. The kit sets 0.18em on every uppercase label; it is the
     single most recognizable detail of the system. */
  --track-caps: 0.18em;

  --space-section: 64px;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Component display rules (e.g. .staff-card's flex) otherwise override
   the UA's [hidden] rule, so JS-hidden elements stay on screen. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* The pseudo-elements below aren't matched by *, so opt them out too. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* lazy_fade_controller.js adds .is-loading only while bytes are in flight. */
img[data-controller~="lazy-fade"] {
  transition: opacity 0.4s ease;
}

img.is-loading {
  opacity: 0;
}

a {
  color: var(--cb-600);
}

/* A phone number split at a hyphen reads as two fragments. */
a[href^="tel:"] {
  white-space: nowrap;
}

::selection {
  background-color: var(--cb-100);
  color: var(--cb-800);
}

/* One focus treatment for every interactive element. Keyboard users get a
   visible ring; mouse users never see it (:focus-visible, not :focus). */
:focus-visible {
  outline: 2px solid var(--cb-600);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background-color: var(--cb-600);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  z-index: 10;
}

.skip-link:focus {
  left: 16px;
}

/* ---------- Typography ---------- */

/* The kit sets headings in ink, not cranberry. Cranberry is reserved for the
   mark, links, and buttons; using it on every heading turns the
   accent into wallpaper. */
h1,
h2,
h3,
.display {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.display {
  font-size: var(--size-hero);
  line-height: 1.06;
}

h1 {
  font-size: var(--size-h1);
  line-height: 1.1;
}

h2 {
  font-size: var(--size-h2);
  line-height: 1.15;
}

/* H3 breaks the serif rule on purpose: the kit's scale sets it in Hanken
   Semibold 20 so subheads inside body copy stay in the reading voice. */
h3 {
  font-family: var(--sans);
  font-size: var(--size-h3);
  font-weight: 600;
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 16px;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

.body-l {
  font-size: var(--size-body-l);
  color: var(--cocoa);
  max-width: 34em;
}

.caption {
  font-size: var(--size-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--stone);
}

.lede {
  color: var(--cocoa);
  font-size: var(--size-body-l);
  max-width: 34em;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: var(--space-section) 0;
}

/* Alternating band. The kit's page surface pairing is cranberry-or-ink on
   cream, so cream is the contrast surface against the white page, not the
   pink tint. cb-100 is a
   fill for badges, not a full-bleed section background. */
.section--alt {
  background-color: var(--cream);
}

/* For a section that follows another on the same surface: the previous
   section's bottom padding already supplies the gap, so keeping both doubles it. */
.section--flush-top {
  padding-top: 0;
}

.section-head {
  max-width: 680px;
  margin-bottom: 32px;
}

.section-head p:last-child {
  margin-bottom: 0;
}

.section-head:last-child {
  margin-bottom: 0;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--linen);
  background-color: var(--paper);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  max-width: var(--maxw-chrome);
  padding-top: 16px;
  padding-bottom: 16px;
  position: relative; /* anchors the mobile dropdown panel */
}

/* Logo lockup: client circle mark + two-line wordmark, per the kit's
   "horizontal / primary" variation. */
.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cb-600);
  text-decoration: none;
}

/* 48px rather than 40: the mark's thin arcs turn to mush any smaller. Any
   larger and MENU wraps under the lockup at 320px; 360px and up gets 64px
   (see breakpoints). */
.lockup__mark {
  flex: none;
  width: 48px;
  height: 48px;
}

.lockup__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* Both lines share one style so the name reads as a single, even wordmark.
   18px is the most that fits beside MENU on a 320px phone; 360px and up
   gets the full 21px (see breakpoints). */
.lockup__name,
.lockup__sub {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.lockup__sub {
  margin-top: 2px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* On phones the CTA lives at the bottom of the MENU panel instead (see
   .site-nav__cta), so the header row is just the lockup and the toggle. */
.site-header__actions .btn {
  display: none;
}

.menu-toggle {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--size-body-s);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--cb-600);
  cursor: pointer;
}

.menu-toggle:hover {
  color: var(--cb-700);
}

.site-nav {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 4px;
  background-color: var(--paper);
  border-bottom: 1px solid var(--linen);
  padding: 12px 20px 20px;
  box-shadow: 0 12px 24px -8px rgba(72, 16, 30, 0.16);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.site-nav a {
  font-size: var(--size-body-s);
  font-weight: 500;
  color: var(--cocoa);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--linen);
}

/* Direct children only: the submenu's last link still needs its rule, since
   Insurance follows it in the MENU panel. */
.site-nav > a:last-child {
  border-bottom: 0;
}

.site-nav a:hover,
.site-nav__trigger:hover {
  color: var(--cb-600);
}

.site-nav a[aria-current="page"],
.site-nav__trigger[aria-current="page"] {
  color: var(--cb-600);
  font-weight: 600;
}

/* Our Team: a row like the links above, caret at the far edge so it reads
   as expandable in the MENU panel. */
.site-nav__group {
  display: flex;
  flex-direction: column;
}

.site-nav__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linen);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: var(--size-body-s);
  font-weight: 500;
  color: var(--cocoa);
  text-align: left;
  cursor: pointer;
}

/* Chevron drawn from two borders, so it takes the text color for free. */
.site-nav__trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.site-nav__trigger[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

.site-nav__submenu {
  display: none;
  flex-direction: column;
  padding-left: 16px;
}

.site-nav__submenu.is-open {
  display: flex;
}

/* Existing-patient shortcuts. In the MENU panel they're list rows inside a
   tinted card, set apart by the tint, cranberry text, and an arrow that marks
   them as leaving for the portal site. They're external, so the current-page
   red never applies. The desktop header turns them into a segmented pill. */
.site-nav__quick {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding: 2px 16px;
  background-color: var(--cb-100);
  border-radius: var(--r-md);
}

/* The tint is pink, so the row rules pick up a pink-leaning line too; the
   default linen would read grey on it. */
.site-nav .site-nav__quick a.site-nav__link--strong {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom-color: color-mix(in srgb, var(--cb-400) 30%, transparent);
  color: var(--cb-600);
  font-weight: 600;
}

/* Decorative, so screen readers don't announce "north east arrow". */
.site-nav .site-nav__quick a.site-nav__link--strong::after {
  content: "\2197" / "";
}

.site-nav .site-nav__quick a.site-nav__link--strong:last-of-type {
  border-bottom: 0;
}

.site-nav .site-nav__quick a.site-nav__link--strong:hover {
  color: var(--cb-700);
}

/* The menu copy of the CTA: the same rounded-card shape as the shortcut card
   above, filled cranberry to match the Request a Call buttons elsewhere. */
.site-nav a.site-nav__cta {
  margin-top: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--r-md);
  color: var(--cream);
  font-weight: 600;
  text-align: center;
}

.site-nav a.site-nav__cta:hover {
  color: var(--cream);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--sand);
  background-color: var(--cream);
  color: var(--cocoa);
  font-size: var(--size-body-s);
}

.site-footer .wrap {
  max-width: var(--maxw-chrome);
  padding-top: 48px;
  padding-bottom: 48px;
}

.site-footer__logo {
  display: block;
  width: 180px;
  height: auto;
}

.site-footer__offices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 32px 0;
  padding: 32px 0;
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
}

.office__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 4px;
}

.office__address {
  margin: 0 0 4px;
  color: var(--cocoa);
}

/* Keeps phone and fax as one tight contact block; the global 16px paragraph
   gap would split them apart. */
.office > p:not(:last-child) {
  margin-bottom: 4px;
}

.office__phone {
  font-weight: 600;
  text-decoration: none;
}

/* Muted and unlinked: a fax number is secondary to the phone and isn't
   something a browser can act on. */
.office__fax {
  margin: 0;
  color: var(--stone);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--stone);
  font-size: 13px;
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

/* ---------- Page transitions ---------- */

/* Home has no header CTA (its hero has one), so leaving or returning home
   would shove the nav and MENU sideways. Naming them lets the browser glide
   them to their new spot while the CTA slides in from the right. The rest of
   the page swaps instantly: a whole-page crossfade on every click would feel
   sluggish for a content site. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* Named only at the top of the page (see scroll_top_controller.js); when
   scrolled, the header is above the fold and would fly down into place.
   Back is skipped too: Turbo restores the old scroll position, so the header
   would glide and then ride off the top as the page scrolls back down. */
:root[data-at-top]:not([data-turbo-visit-direction="back"]) .menu-toggle {
  view-transition-name: menu-toggle;
}

:root[data-at-top]:not([data-turbo-visit-direction="back"]) .site-header__actions .btn {
  view-transition-name: header-cta;
}

::view-transition-group(site-nav),
::view-transition-group(menu-toggle),
::view-transition-group(header-cta) {
  animation-duration: 350ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* :only-child means the CTA exists on just one side of the navigation, i.e.
   to or from home. Between two pages that both have it, nothing moves. */
::view-transition-new(header-cta):only-child {
  animation: header-cta-in 350ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Fast and front-loaded: the nav glides into this spot on the way home. */
::view-transition-old(header-cta):only-child {
  animation: header-cta-in 100ms ease-out reverse both;
}

/* Pseudo-element styles match against the incoming page, so this means
   "arriving at a page without the header CTA" (home). The nav and MENU hold
   still until the CTA has faded, instead of sliding across it. */
:root:not(:has(.site-header__actions .btn))::view-transition-group(site-nav),
:root:not(:has(.site-header__actions .btn))::view-transition-group(menu-toggle) {
  animation-delay: 100ms;
}

@keyframes header-cta-in {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}

/* ---------- Breakpoints (foundation) ---------- */

/* Component-level breakpoints live at the bottom of components.css. */

@media (min-width: 360px) {
  .lockup__mark {
    width: 64px;
    height: 64px;
  }

  .lockup__name,
  .lockup__sub {
    font-size: 21px;
  }
}

/* 600px and up: lockup + MENU + CTA (~525px plus gutters) fit on one row,
   so the header shows the CTA too. The MENU panel keeps its copy, so the
   panel's shortcut stack always ends in it. */
@media (min-width: 600px) {
  .site-header__actions .btn {
    display: inline-block;
  }
}

/* 768px and up: tablet */
@media (min-width: 768px) {
  :root {
    --size-hero: 34px;
    --size-h1: 34px;
    --size-h2: 27px;
    --size-h3: 20px;
    --size-body-l: 18px;
    --space-section: 80px;
  }

  .wrap {
    padding: 0 32px;
  }

  /* Keeps the dropdown's links on the same edge as the lockup. */
  .site-nav {
    padding-left: 32px;
    padding-right: 32px;
  }

  .site-footer__logo {
    width: 220px;
  }

  .site-footer__offices {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 40px;
  }
}

/* 1040px and up: the practice name and the hero headline share one size, so
   the name never reads smaller than the headline. It grows with the window,
   26px here to 34px at 1200px. */
@media (min-width: 1040px) {
  :root {
    --size-brand: clamp(26px, 5vw - 26px, 34px);
    --size-hero: var(--size-brand);
  }

  .lockup__name,
  .lockup__sub {
    font-size: var(--size-brand);
  }

  /* Holds at 64px until the two-line name outgrows it, then keeps pace. */
  .lockup__mark {
    width: clamp(64px, var(--size-brand) * 2.35, 80px);
    height: clamp(64px, var(--size-brand) * 2.35, 80px);
  }
}

/* 1130px and up: the nav goes inline. Lockup + nav + CTA need ~1046px in
   one row at the smallest --size-brand, and the wordmark grows with the
   window, so the row needs ~1090px by here. Chrome on Linux and Windows
   reserves 15px of the window for a classic scrollbar that the media query
   still counts, so MENU stays until the row fits with room to spare; any
   narrower and the CTA wraps under the logo. */
@media (min-width: 1130px) {
  /* No gap, so the CTA can butt against the shortcut pill. The lockup's
     margin keeps the nav off it if the row ever gets tight. */
  .site-header .wrap {
    column-gap: 0;
  }

  .lockup {
    margin-right: 16px;
  }

  .menu-toggle {
    display: none;
  }

  /* On the home page the actions box holds only the hidden toggle. Left in,
     its empty box would still take a column gap and pull the nav off the
     right edge. */
  .site-header__actions:not(:has(.btn)) {
    display: none;
  }

  /* Named only once it's inline; below this it's the MENU dropdown. */
  :root[data-at-top]:not([data-turbo-visit-direction="back"]) .site-nav {
    view-transition-name: site-nav;
  }

  /* margin-left: auto packs the nav to the right, against the CTA. */
  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    margin-left: auto;
    border-bottom: 0;
    padding: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .site-nav a {
    padding: 0;
    border-bottom: 0;
  }

  /* The header CTA takes over from the menu copy. */
  .site-nav a.site-nav__cta {
    display: none;
  }

  /* Inline, the shortcuts become a segmented pill that, with the header
     CTA, reads as one capsule ending in the filled CTA. Each segment fills on
     hover, so it's clear which one a click lands on. Sized like .btn so the
     segments and the CTA share a height. Opaque so the CTA can hide behind
     it during page transitions. */
  .site-nav__quick {
    flex-direction: row;
    margin-top: 0;
    padding: 0;
    border: 1px solid var(--cb-600);
    border-radius: var(--r-pill);
    background-color: var(--paper);
  }

  .site-nav .site-nav__quick a.site-nav__link--strong {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.2;
  }

  .site-nav .site-nav__quick a.site-nav__link--strong::after {
    content: none;
  }

  .site-nav .site-nav__quick a.site-nav__link--strong:hover {
    color: var(--cb-600);
    background-color: var(--cb-100);
  }

  .site-nav .site-nav__quick a.site-nav__link--strong:first-of-type {
    border-radius: var(--r-pill) 0 0 var(--r-pill);
  }

  .site-nav .site-nav__quick a.site-nav__link--strong:last-of-type {
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
  }

  .site-nav .site-nav__quick a.site-nav__link--strong + a {
    border-left: 1px solid var(--cb-600);
  }

  /* Inset, so the ring doesn't spill onto the neighboring segment. */
  .site-nav .site-nav__quick a:focus-visible {
    outline-offset: -4px;
  }

  /* The CTA is the capsule's end cap: its border closes the shape, and its
     flat left edge meets the group's flat right edge. Home has no header CTA,
     so there the group stays closed. */
  .site-header:has(.site-header__actions .btn) .site-nav__quick {
    border-right: 0;
    border-radius: var(--r-pill) 0 0 var(--r-pill);
  }

  .site-header:has(.site-header__actions .btn) .site-nav__quick a:last-of-type {
    border-radius: 0;
  }

  .site-header__actions .btn {
    padding: 12px 20px;
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
  }

  /* To and from home, the CTA slides out from behind the pill instead of
     fading in on top of it: the nav paints above the CTA, and the CTA holds
     still at full opacity while the nav glides off it (or back over it). */
  ::view-transition-group(site-nav) {
    z-index: 1;
  }

  /* Swap rather than crossfade, so the old pill's rounded end doesn't ghost
     over the CTA and the nav text doesn't dim mid-glide. */
  ::view-transition-old(site-nav) {
    animation: none;
    opacity: 0;
  }

  ::view-transition-new(site-nav) {
    animation: none;
  }

  ::view-transition-new(header-cta):only-child,
  ::view-transition-old(header-cta):only-child {
    animation: none;
  }

  :root:not(:has(.site-header__actions .btn))::view-transition-group(site-nav) {
    animation-delay: 0s;
  }

  /* Pages carry no label above the h1, so the inline nav is the wayfinding
     cue. Color alone is a weak signal (and fails for color-blind visitors);
     the underline makes the current page unmistakable. */
  .site-nav a[aria-current="page"],
  .site-nav__trigger[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  .site-nav__group {
    position: relative;
  }

  .site-nav__trigger {
    justify-content: flex-start;
    gap: 6px;
    border-bottom: 0;
    padding: 0;
  }

  /* A floating panel under the trigger, same surface and fade as the MENU
     panel. Always laid out (display: flex) so the fade can run. */
  .site-nav__submenu {
    display: flex;
    position: absolute;
    top: calc(100% + 16px);
    left: -16px;
    min-width: 220px;
    padding: 4px 16px;
    background-color: var(--paper);
    border: 1px solid var(--linen);
    box-shadow: 0 12px 24px -8px rgba(72, 16, 30, 0.16);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  }

  .site-nav__submenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  /* Back to list rows; the inline-link reset above stripped them. In a list
     the bold red already marks the current page, so no underline here. */
  .site-nav .site-nav__submenu a {
    padding: 10px 0;
    border-bottom: 1px solid var(--linen);
    text-decoration: none;
  }

  .site-nav .site-nav__submenu a:last-child {
    border-bottom: 0;
  }
}

/* 1280px and up: desktop */
@media (min-width: 1280px) {
  :root {
    --size-h1: 38px;
    --space-section: 96px;
  }

  .wrap {
    padding: 0 40px;
  }

  .site-footer__offices {
    grid-template-columns: repeat(4, 1fr);
  }
}