/*
 * Server-rendered service guides plus the shared service directory.
 * Service-page rules are intentionally scoped under .seo-page because this
 * stylesheet is also attached to the existing editorial pages.
 */

body.seo-page {
  --seo-ink: #1a1916;
  --seo-muted: #676157;
  --seo-paper: #ede8de;
  --seo-paper-deep: #dfd7c8;
  --seo-line: rgba(26, 25, 22, 0.2);
  --seo-rust: #8b3d28;
  --seo-dark: #161614;
  --seo-shell: min(1240px, calc(100vw - 64px));
  margin: 0;
  color: var(--seo-ink);
  background: var(--seo-paper);
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

.seo-page a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.seo-page a:focus-visible {
  outline: 2px solid var(--seo-rust);
  outline-offset: 4px;
}

.seo-shell {
  width: var(--seo-shell);
  margin-inline: auto;
}

.seo-skip {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: #fff;
  background: var(--seo-dark);
  transform: translateY(-160%);
}

.seo-skip:focus {
  transform: none;
}

.seo-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid var(--seo-line);
  /* No backdrop-filter. This is a sticky bar, so the blur was recomputed on
     every scroll frame across the full width of the viewport — the same cost
     taken off the main site's header, on the sixteen pages that never got
     the fix. The alpha goes to 0.98 and carries it alone. */
  background: rgba(237, 232, 222, 0.98);
}

.seo-header__inner {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 54px);
}

.seo-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.seo-brand img {
  width: 30px;
  height: 35px;
  object-fit: contain;
}

.seo-brand span {
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.13rem;
  letter-spacing: 0.035em;
}

.seo-nav {
  display: flex;
  justify-content: center;
  gap: clamp(15px, 2vw, 30px);
}

.seo-nav a,
.seo-header__contact {
  position: relative;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.seo-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.seo-nav a:hover::after,
.seo-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.seo-header__contact {
  padding: 11px 15px;
  color: #fff;
  background: var(--seo-dark);
}

.seo-breadcrumb {
  padding-block: 24px 10px;
}

.seo-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--seo-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.055em;
  list-style: none;
  text-transform: uppercase;
}

.seo-breadcrumb li:not(:last-child)::after {
  content: "/";
  padding-left: 8px;
  opacity: 0.55;
}

.seo-breadcrumb a {
  text-decoration: none;
}

.seo-hero {
  padding: clamp(32px, 5vw, 84px) 0 clamp(70px, 9vw, 132px);
}

.seo-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: clamp(42px, 8vw, 130px);
}

.seo-kicker,
.service-directory__eyebrow {
  margin: 0 0 18px;
  color: var(--seo-rust, #8b3d28);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.69rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.seo-hero h1,
.seo-section h2,
.seo-faq h2,
.seo-related h2,
.seo-contact h2 {
  margin: 0;
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400;
  line-height: 1.04;
  text-wrap: balance;
}

.seo-hero h1 {
  max-width: 13ch;
  font-size: clamp(3rem, 6.1vw, 6.3rem);
  letter-spacing: -0.045em;
}

.seo-hero__lead {
  max-width: 63ch;
  margin: clamp(28px, 4vw, 48px) 0 0;
  color: #4e4a43;
  font-size: clamp(1.04rem, 1.35vw, 1.24rem);
  line-height: 1.72;
}

.seo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 34px;
}

.seo-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 19px;
  color: #fff !important;
  border: 1px solid var(--seo-dark);
  background: var(--seo-dark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease;
}

.seo-button:hover {
  color: var(--seo-dark) !important;
  background: transparent;
}

.seo-text-link {
  font-size: 0.82rem;
  font-weight: 500;
}

.seo-hero__media {
  position: relative;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.seo-hero__media::before {
  content: none;
}

.seo-hero__image-frame {
  display: grid;
  width: 100%;
  min-width: 0;
  place-items: center;
  padding: clamp(8px, 1.5vw, 16px);
  overflow: hidden;
  border: 1px solid var(--seo-rust);
  background: var(--seo-paper-deep);
}

.seo-hero__image-frame picture {
  display: block;
  width: 100%;
  min-width: 0;
}

.seo-hero__image-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 700px;
  object-fit: contain;
  object-position: center;
  background: var(--seo-paper-deep);
}

.seo-hero__media figcaption {
  position: static;
  max-width: none;
  padding: 12px 0 0;
  color: var(--seo-muted);
  background: transparent;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.63rem;
  letter-spacing: 0.045em;
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-align: right;
  text-transform: uppercase;
}

.seo-proof {
  border-block: 1px solid var(--seo-line);
  background: rgba(255, 255, 255, 0.18);
}

.seo-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.seo-proof p {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 14px;
  min-height: 142px;
  margin: 0;
  padding: 34px clamp(18px, 3vw, 40px);
  color: var(--seo-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.seo-proof p + p {
  border-left: 1px solid var(--seo-line);
}

.seo-proof p > span {
  grid-row: span 2;
  color: var(--seo-rust);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
}

.seo-proof strong {
  color: var(--seo-ink);
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 400;
}

.seo-sections {
  padding-block: clamp(76px, 10vw, 150px);
}

.seo-section {
  display: grid;
  grid-template-columns: minmax(90px, 0.3fr) minmax(0, 1fr);
  gap: clamp(25px, 6vw, 90px);
  padding-block: clamp(50px, 7vw, 92px);
  border-top: 1px solid var(--seo-line);
}

.seo-section:last-child {
  border-bottom: 1px solid var(--seo-line);
}

.seo-section__number {
  color: var(--seo-rust);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.seo-section__body {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(300px, 1fr);
  gap: clamp(35px, 7vw, 100px);
}

.seo-section h2 {
  font-size: clamp(2rem, 3.6vw, 4rem);
}

.seo-prose p {
  max-width: 67ch;
  margin: 0;
  color: #4e4a43;
  font-size: 0.98rem;
}

.seo-prose p + p {
  margin-top: 1.25em;
}

.seo-points {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 25px;
  margin: 10px 0 0;
  padding: 0;
  border-top: 1px solid var(--seo-line);
  list-style: none;
}

.seo-points li {
  position: relative;
  padding: 15px 0 15px 25px;
  border-bottom: 1px solid var(--seo-line);
  color: #45413a;
  font-size: 0.8rem;
}

.seo-points li::before {
  content: "+";
  position: absolute;
  left: 2px;
  color: var(--seo-rust);
  font-family: "JetBrains Mono", monospace;
}

.seo-faq {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(50px, 9vw, 150px);
  padding: clamp(75px, 10vw, 150px) max(32px, calc((100vw - 1240px) / 2));
  color: #efebe2;
  background: var(--seo-dark);
}

.seo-faq h2 {
  max-width: 10ch;
  font-size: clamp(2.5rem, 4.8vw, 5.2rem);
}

.seo-faq .seo-kicker {
  color: #c77b5e;
}

.seo-faq__list {
  margin: 0;
}

.seo-faq__item {
  display: grid;
  grid-template-columns: minmax(210px, 0.85fr) minmax(250px, 1fr);
  gap: clamp(22px, 5vw, 70px);
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.seo-faq__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.seo-faq dt {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.4;
}

.seo-faq dt span {
  color: #c77b5e;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
}

.seo-faq dd {
  margin: 0;
  color: rgba(239, 235, 226, 0.7);
  font-size: 0.9rem;
}

.seo-related {
  padding-block: clamp(80px, 10vw, 145px);
}

.seo-related__head {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 50px;
}

.seo-related__head .seo-kicker {
  margin: 0;
}

.seo-related h2 {
  font-size: clamp(2.4rem, 4.7vw, 5rem);
}

.seo-related ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--seo-line);
  list-style: none;
}

.seo-related li {
  border-right: 1px solid var(--seo-line);
  border-bottom: 1px solid var(--seo-line);
}

.seo-related li:nth-child(3n + 1) {
  border-left: 1px solid var(--seo-line);
}

.seo-related a {
  position: relative;
  display: flex;
  min-height: 230px;
  flex-direction: column;
  padding: 30px;
  text-decoration: none;
  transition: background 170ms ease;
}

.seo-related a:hover {
  background: rgba(255, 255, 255, 0.28);
}

.seo-related__label {
  max-width: 15ch;
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.2;
}

.seo-related__description {
  margin-top: auto;
  padding-top: 30px;
  color: var(--seo-muted);
  font-size: 0.77rem;
  line-height: 1.55;
}

.seo-related__arrow {
  position: absolute;
  top: 29px;
  right: 29px;
  color: var(--seo-rust);
}

.seo-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  margin-bottom: clamp(80px, 10vw, 150px);
  color: #f3eee5;
  background: var(--seo-rust);
}

.seo-contact__copy {
  padding: clamp(44px, 7vw, 95px);
}

.seo-contact .seo-kicker {
  color: rgba(255, 255, 255, 0.7);
}

.seo-contact h2 {
  max-width: 13ch;
  font-size: clamp(2.6rem, 5.2vw, 5.5rem);
}

.seo-contact__copy > p:not(.seo-kicker) {
  max-width: 60ch;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.74);
}

.seo-button--light {
  color: var(--seo-rust) !important;
  border-color: #f3eee5;
  background: #f3eee5;
}

.seo-button--light:hover,
.seo-button--outline-light:hover {
  color: #fff !important;
  border-color: #fff;
  background: transparent;
}

.seo-button--outline-light {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}

.seo-button--outline-light:hover {
  color: var(--seo-rust) !important;
  background: #fff;
}

.seo-contact__address {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: clamp(38px, 5vw, 70px);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  font-style: normal;
}

.seo-contact__label {
  margin-bottom: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.seo-contact__address strong {
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.seo-contact__address > span:not(.seo-contact__label) {
  max-width: 31ch;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.86rem;
}

.seo-contact__address a {
  width: fit-content;
  font-size: 0.84rem;
}

.seo-contact__map {
  margin-top: 12px;
  font-weight: 600;
}

.seo-contact__address small {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
}

.seo-footer {
  padding: 72px 0 22px;
  /* THE SAME GROUND AS THE REST OF THE SITE'S FOOTER.
     ---------------------------------------------------------------------
     This was a flat --seo-dark, #161614. That is very nearly the #141413 the
     main footer was deliberately moved away from — "a near-neutral black that
     belongs to no part of this palette, and read as a hole cut in the bottom
     of a sand-coloured site", in the words of the note beside .foot in
     site.css. So the sixteen guide pages kept the black footer the twelve
     designed pages had already given up, and the difference is obvious the
     moment a reader crosses from one to the other.

     Values, not tokens, and not by preference: this template loads fonts.css
     and this file only — nine stylesheets would cost these pages the load
     time that makes them worth having — so --stone-700 through --stone-950
     are not in scope here. They are inlined below in the same order and at the
     same stops as .foot in site.css, with the same warm radial over the top.
     If the ramp is ever retuned, both places move together:

       --stone-700 #3A342B · --stone-800 #2A251D
       --stone-900 #1E1A14 · --stone-950 #14110C                             */
  color: rgba(245, 241, 232, 0.72);
  background:
    radial-gradient(ellipse 90% 70% at 22% 0%, rgba(194, 170, 126, .10), transparent 62%),
    linear-gradient(168deg, #3A342B 0%, #2A251D 42%, #1E1A14 74%, #14110C 100%);
}

.seo-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: clamp(35px, 7vw, 100px);
}

.seo-brand--footer {
  color: #fff !important;
}

.seo-brand--footer img {
  filter: grayscale(1) invert(1);
}

.seo-footer p {
  margin: 17px 0 0;
  font-size: 0.83rem;
}

.seo-footer nav,
.seo-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
}

.seo-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 58px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Individual journal URLs give each substantive workshop note one canonical
   page while retaining the same responsive editorial system. */
.journal-detail{max-width:1020px;margin:0 auto;padding:clamp(40px,7vw,92px) 0 clamp(90px,12vw,170px)}
.journal-detail__head{max-width:880px;margin:0 auto;text-align:center}
.journal-detail__head h1{margin:0;font-family:"Marcellus",Georgia,serif;font-size:clamp(2.75rem,6vw,6.2rem);
  font-weight:400;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.journal-detail__excerpt{max-width:720px;margin:30px auto 0;color:#4e4a43;font-size:clamp(1.03rem,1.5vw,1.25rem);line-height:1.75}
.journal-detail__date{margin:22px 0 0;color:var(--seo-muted);font-family:"JetBrains Mono",monospace;font-size:.65rem;
  letter-spacing:.06em;text-transform:uppercase}
.journal-detail__media{margin:clamp(45px,8vw,90px) 0 0}
.journal-detail__media img,.journal-detail__media video{display:block;width:100%;max-height:720px;object-fit:contain;background:var(--seo-paper-deep)}
.journal-detail__body{width:min(720px,100%);margin:clamp(48px,7vw,82px) auto 0;color:#3f3b35;font-size:1.03rem;line-height:1.85}
.journal-detail__body p{margin:0}.journal-detail__body p+p{margin-top:1.35em}
.journal-detail__body h3{margin:2.4em 0 .7em;color:var(--seo-ink);font-family:"Marcellus",Georgia,serif;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:400;line-height:1.18}
.journal-detail__body ul{margin:1.35em 0;padding-left:1.25em}.journal-detail__body li+li{margin-top:.7em}
.journal-detail__foot{width:min(720px,100%);margin:70px auto 0;padding-top:28px;border-top:1px solid var(--seo-line);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.journal-detail__foot p{margin:0;color:var(--seo-muted);font-size:.8rem}


/* Shared block injected into editorial pages as well as service guides. */
.service-directory {
  --sd-ink: #1a1916;
  --sd-muted: #676157;
  --sd-line: rgba(26, 25, 22, 0.2);
  padding: clamp(74px, 10vw, 140px) 32px;
  color: var(--sd-ink);
  background: #e2dacb;
  font-family: "Instrument Sans", Arial, sans-serif;
}

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

.service-directory__inner {
  width: min(1240px, 100%);
  margin-inline: auto;
}

.service-directory__head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 45px;
  align-items: end;
  margin-bottom: 48px;
}

.service-directory__head h2 {
  max-width: 14ch;
  margin: 0;
  font-family: "Marcellus", Georgia, serif;
  font-size: clamp(2.3rem, 4.6vw, 4.8rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.service-directory__head p {
  max-width: 43ch;
  margin: 0;
  color: var(--sd-muted);
  font-size: 0.9rem;
}

.service-directory nav {
  border-top: 1px solid var(--sd-line);
}

.service-directory__all {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid var(--sd-line);
  color: inherit;
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.2rem;
  text-decoration: none;
}

.service-directory__all::after {
  content: "View overview \2197";
  color: var(--sd-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.service-directory ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-directory li {
  border-right: 1px solid var(--sd-line);
  border-bottom: 1px solid var(--sd-line);
}

.service-directory li:nth-child(4n + 1) {
  border-left: 1px solid var(--sd-line);
}

.service-directory li a {
  display: flex;
  min-height: 88px;
  align-items: flex-end;
  padding: 19px;
  color: inherit;
  font-size: 0.8rem;
  text-decoration: none;
  transition: background 170ms ease;
}

.service-directory li a:hover,
.service-directory a.is-current {
  background: rgba(255, 255, 255, 0.34);
}

@media (max-width: 1050px) {
  .seo-header__inner {
    grid-template-columns: auto 1fr;
  }

  .seo-nav {
    justify-content: flex-end;
    overflow-x: auto;
    padding-block: 15px;
  }

  .seo-nav a:nth-last-child(-n + 2),
  .seo-header__contact {
    display: none;
  }

  .seo-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
    gap: 52px;
  }

  .seo-section__body {
    grid-template-columns: 1fr;
  }

  .seo-points {
    grid-column: 1;
  }

  .seo-related ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .seo-related li:nth-child(3n + 1) {
    border-left: 0;
  }

  .seo-related li:nth-child(2n + 1) {
    border-left: 1px solid var(--seo-line);
  }

  .service-directory ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-directory li:nth-child(4n + 1) {
    border-left: 0;
  }

  .service-directory li:nth-child(3n + 1) {
    border-left: 1px solid var(--sd-line);
  }
}

/* An iPad portrait viewport leaves enough room for each question/answer row,
   but not for that row inside a second outer FAQ column. Stack the outer
   heading before the inner definition list reaches its minimum width. */
@media (max-width: 900px) {
  .seo-faq {
    grid-template-columns: 1fr;
    gap: 45px;
    padding-inline: 32px;
  }

  .seo-faq h2 {
    max-width: 14ch;
  }
}

@media (max-width: 760px) {
  body.seo-page {
    --seo-shell: min(100% - 36px, 1240px);
  }

  .seo-header__inner {
    min-height: 64px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
  }

  .seo-brand span {
    font-size: 1rem;
  }

  .seo-nav {
    justify-content: flex-start;
    gap: 18px;
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }

  .seo-nav a:nth-child(n + 4) {
    display: none;
  }

  .seo-breadcrumb {
    padding-top: 16px;
  }

  .seo-hero {
    padding-top: 24px;
  }

  .seo-hero__grid,
  .seo-proof__grid,
  .seo-faq,
  .seo-contact,
  .seo-footer__grid {
    grid-template-columns: 1fr;
  }

  .seo-hero h1 {
    font-size: clamp(2.75rem, 13vw, 4.7rem);
  }

  .seo-hero__media {
    margin-top: 12px;
  }

  .seo-hero__image-frame {
    padding: 8px;
  }

  .seo-hero__image-frame img {
    max-height: none;
  }

  .seo-proof p {
    min-height: 0;
  }

  .seo-proof p + p {
    border-top: 1px solid var(--seo-line);
    border-left: 0;
  }

  .seo-section {
    grid-template-columns: 34px 1fr;
    gap: 14px;
  }

  .seo-section h2 {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }

  .seo-points {
    grid-template-columns: 1fr;
  }

  .seo-faq {
    gap: 45px;
    padding-inline: 18px;
  }

  .seo-faq__item,
  .seo-related__head {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .seo-faq dd {
    padding-left: 42px;
  }

  .seo-related ul {
    grid-template-columns: 1fr;
  }

  .seo-related li,
  .seo-related li:nth-child(2n + 1),
  .seo-related li:nth-child(3n + 1) {
    border-left: 1px solid var(--seo-line);
  }

  .seo-related a {
    min-height: 195px;
  }

  .seo-contact__copy,
  .seo-contact__address {
    padding: 38px 25px;
  }

  .seo-contact__address {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-left: 0;
  }

  .seo-footer__bottom {
    flex-direction: column;
  }

  .journal-detail__head{text-align:left}
  .journal-detail__excerpt{margin-left:0}
  .journal-detail__foot{align-items:flex-start;flex-direction:column}

  .service-directory {
    padding-inline: 18px;
  }

  .service-directory__head,
  .service-directory ul {
    grid-template-columns: 1fr;
  }

  .service-directory__head {
    gap: 20px;
  }

  .service-directory li,
  .service-directory li:nth-child(3n + 1),
  .service-directory li:nth-child(4n + 1) {
    border-left: 1px solid var(--sd-line);
  }

  .service-directory li a {
    min-height: 65px;
  }
}

@media (max-width: 480px) {
  .seo-header__inner {
    gap: 12px;
  }

  .seo-brand {
    gap: 8px;
  }

  .seo-brand img {
    width: 26px;
    height: 30px;
  }

  .seo-brand span {
    font-size: 0.9rem;
  }

  .seo-nav {
    justify-content: flex-end;
    gap: 10px;
    mask-image: none;
  }

  .seo-nav a {
    font-size: 0.66rem;
    letter-spacing: 0.055em;
  }
}

@media print {
  .seo-header,
  .seo-actions,
  .service-directory,
  .seo-footer {
    display: none !important;
  }

  body.seo-page {
    color: #000;
    background: #fff;
  }

  .seo-faq,
  .seo-contact {
    color: #000;
    background: #fff;
    border: 1px solid #999;
  }
}