/* ==========================================================================
   Coastal Performance Chiropractic — site stylesheet

   A hand-written recreation of the WordPress site's look (The7 theme,
   Elementor layouts). Section by section it follows the page order of the
   original. No raw colours here: everything comes from tokens.css.

   Icons are Font Awesome Free 5.15.4 (https://fontawesome.com), inlined as
   SVG by the {% icon %} template tag. License: CC BY 4.0
   (https://fontawesome.com/license/free).
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------- */

@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/assistant.684ac5f29b60.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans.23145c714161.woff2") format("woff2");
}

/* --- Reset and base -------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--weight-normal) var(--text-base) / var(--leading-base) var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The header is fixed; on pages without a photo behind it the content has to
   start below it. Pages with a hero (body.has-hero) draw under it instead. */
body:not(.has-hero) { padding-top: var(--header-height); }

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
a:hover { color: var(--color-ink); }

ul, ol { margin: 0 0 15px; padding-left: 20px; }

.icon {
  width: 1em;
  height: 1em;
  max-width: none;   /* the img/svg max-width rule would collapse it inside a flex item */
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.vh, .skip-link {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed !important;
  top: 8px; left: 8px;
  width: auto; height: auto;
  margin: 0; padding: 10px 16px;
  clip: auto;
  z-index: 1000;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 1300px) { .container { padding: 0; } }
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--section-pad) 0; }
.section--boxes { background: var(--color-bg-boxes); }
.section--grey { background: var(--color-bg-grey); }

/* --- Prose ----------------------------------------------------------------- */

.prose { color: var(--color-text); }
.prose--lg { font-size: var(--text-big); line-height: var(--leading-big); }
.prose h2, .prose h3, .prose h4 { margin: 1.4em 0 0.6em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose h2 { font-size: 28px; }
.prose h3 { font-size: var(--text-h3); }
.prose h4 { font-size: var(--text-h4); }
.prose hr { border: 0; border-top: 1px solid var(--color-rule); margin: 30px 0; }
.prose blockquote {
  margin: 20px 0;
  padding: 10px 0 10px 24px;
  border-left: 3px solid var(--color-teal);
  font-style: italic;
}
.prose img { margin: 30px auto; }
.prose .responsive-object {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 30px 0;
}
.prose .responsive-object iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Wagtail wraps a media embed in a plain div; the player itself is sized. */
.prose iframe, .stream iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 30px 0;
  border: 0;
}
.prose .full-width { width: 100%; }
.prose .left, .prose .right { max-width: 50%; }
.prose .left { float: left; margin: 0 24px 16px 0; }
.prose .right { float: right; margin: 0 0 16px 24px; }
.prose::after { content: ""; display: table; clear: both; }

/* --- Buttons --------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 12px 25px;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-white);
  background: var(--color-teal);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.button:hover, .button:focus { color: var(--color-white); background: var(--color-teal-hover); }
.button--hero {
  min-width: 240px;
  padding: 14px 30px;
  background: var(--color-cyan-deep);
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.button--hero:hover, .button--hero:focus { background: var(--color-cyan); }
.button--cyan { padding: 15px 30px; background: var(--color-cyan); }
.button--cyan:hover, .button--cyan:focus { background: var(--color-cyan-deep); }
.button--navy { background: var(--color-navy); }
.button--navy:hover, .button--navy:focus { background: var(--color-cyan); }
.button--teal { padding: 15px 45px; }
.button__icon { margin-left: 8px; }

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

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-header-rule);
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.site-header__inner {
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (min-width: 1300px) { .site-header__inner { padding: 0; } }

/* Over a hero the bar is transparent and its text white. Once the visitor
   scrolls past it, JavaScript adds .is-stuck and it becomes the white bar. */
.has-hero .site-header:not(.is-stuck) {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header.is-stuck { box-shadow: var(--shadow-header); }

.site-header__brand { display: none; line-height: 0; }
.site-header__brand-img { height: 60px; width: auto; }
.site-header__brand-img--light { display: none; }
.has-hero .site-header:not(.is-stuck) .site-header__brand-img--light { display: block; }
.has-hero .site-header:not(.is-stuck) .site-header__brand-img--dark { display: none; }

.site-nav { flex: 1 1 auto; }
.site-nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}
.site-nav__link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  white-space: nowrap;
}
.has-hero .site-header:not(.is-stuck) .site-nav__link { color: var(--color-white); }
/* The7's "line, left to right" underline. */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: currentColor;
  transition: right var(--transition);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { right: 0; }
.site-nav__link:hover { color: var(--color-ink); }
.has-hero .site-header:not(.is-stuck) .site-nav__link:hover { color: var(--color-white); }

.site-header__address {
  margin: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: var(--text-address);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  white-space: nowrap;
}
.site-header__address .icon { font-size: 30px; color: var(--color-cyan); }
.has-hero .site-header:not(.is-stuck) .site-header__address { color: var(--color-white); }
.site-nav__address--menu { display: none; }

.site-nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-ink);
  font-size: 22px;
  cursor: pointer;
}
.has-hero .site-header:not(.is-stuck) .site-nav__toggle { color: var(--color-white); }
.site-nav__toggle-close { display: none; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-open { display: none; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-close { display: inline; }

@media (max-width: 1024px) {
  :root { --header-height: var(--header-height-mobile); }
  .site-header__inner { gap: 16px; }
  .site-header__brand { display: block; }
  .site-header__address { display: none; }
  .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }

  .site-nav {
    position: fixed;
    top: var(--header-height); left: 0; right: 0;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 30px var(--gutter) 40px;
    background: var(--color-white);
    box-shadow: var(--shadow-header);
  }
  .js .site-nav:not([data-open="true"]) { display: none; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item + .site-nav__item { border-top: 1px solid var(--color-rule); }
  .site-nav__link { display: block; padding: 14px 0; font-size: 18px; color: var(--color-ink) !important; }
  .site-nav__link::after { display: none; }
  .site-nav__address--menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .site-nav__address--menu .icon { font-size: 24px; color: var(--color-cyan); }
  /* The mobile bar is always white so the black logo and dark icon read. */
  .has-hero .site-header:not(.is-stuck) { background: var(--color-white); border-bottom-color: var(--color-header-rule); }
  .has-hero .site-header:not(.is-stuck) .site-nav__toggle { color: var(--color-ink); }
  .has-hero .site-header:not(.is-stuck) .site-header__brand-img--light { display: none; }
  .has-hero .site-header:not(.is-stuck) .site-header__brand-img--dark { display: block; }
  body.has-hero { padding-top: var(--header-height); }
}

/* --- Home: hero ------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  color: var(--color-white);
  background: var(--color-ink-strong);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}
@media (min-width: 1025px) and (hover: hover) {
  .hero__bg { background-attachment: fixed; }
}
.hero__inner {
  min-height: 80vh;
  padding: calc(var(--header-height) + 40px) var(--gutter) 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero__logo {
  width: 430px;
  max-width: 80%;
  margin: 0 auto 60px;
}
.hero__heading {
  max-width: 1200px;
  margin: 0 0 30px;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  color: var(--color-gold);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.hero__tagline {
  position: relative;
  margin: 0;
  padding: 12px var(--gutter) 90px;
  background: rgba(0, 0, 0, 0.35);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  text-align: center;
  color: var(--color-white-75);
}
@media (max-width: 767px) {
  .hero__inner { min-height: 0; padding-top: 60px; }
  .hero__logo { margin-bottom: 60px; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; gap: 12px; }
  .hero__tagline { padding: 30px var(--gutter) 40px; font-size: 22px; }
}

/* --- Home: feature boxes --------------------------------------------------- */

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.feature { text-align: center; }
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin-bottom: 10px;
  border-radius: var(--radius-round);
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 32px;
}
.feature__title {
  margin-bottom: 10px;
  font-size: var(--text-h4);
  text-transform: uppercase;
}
.feature__text { line-height: var(--leading-big); }
@media (max-width: 1024px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .features__grid { grid-template-columns: 1fr; gap: 50px; } }

/* --- Home: banner and treatments ------------------------------------------ */

.banner { padding: 30px 0 60px; text-align: center; }
.banner__heading {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--color-cyan-deep);
}

.treatments { padding: 20px 0 100px; }
.treatments__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.treatments__heading {
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  color: var(--color-navy);
}
.treatments__body { margin-top: 55px; line-height: var(--leading-big); }
.treatments__list-title {
  margin-bottom: 30px;
  font-size: var(--text-h3);
  text-align: center;
  color: var(--color-text);
}
.treatments__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 5px 0;
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--color-ink);
}
.check-list__item a { color: var(--color-ink); }
.check-list__item a:hover { color: var(--color-teal); }
.check-list__icon { color: var(--color-teal); font-size: 16px; margin-top: 2px; }
@media (max-width: 1024px) {
  .treatments__grid { grid-template-columns: 1fr; gap: 50px; }
  .treatments__body { margin-top: 30px; }
}
@media (max-width: 600px) { .treatments__columns { grid-template-columns: 1fr; gap: 0; } }

/* --- Home: testimonials ---------------------------------------------------- */

.testimonials__heading {
  margin-bottom: 40px;
  font-size: var(--text-h2);
  text-align: center;
}
.carousel { position: relative; padding: 0 60px; }
.carousel__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 4px; }
.testimonial {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 0 10px;
  text-align: center;
}
.testimonial__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin-bottom: 14px;
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  font-size: 14px;
}
.testimonial__title { font-size: var(--text-h4); margin-bottom: 6px; }
.testimonial__author {
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.testimonial__quote {
  max-width: 1100px;
  margin: 0 auto;
  line-height: var(--leading-big);
}
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  padding: 0;
  border: 1px solid rgba(57, 153, 142, 0.5);
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-teal);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), color var(--transition);
}
.carousel__arrow:hover { background: var(--color-teal); color: var(--color-white); }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.carousel__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-round);
  background: var(--color-teal);
  cursor: pointer;
}
.carousel__dot.is-active { background: transparent; }
.no-js .carousel__arrow, .no-js .carousel__dots { display: none; }
html:not(.js) .carousel { padding: 0; }
html:not(.js) .carousel__viewport { display: block; }
html:not(.js) .testimonial + .testimonial { margin-top: 40px; }
@media (max-width: 767px) { .carousel { padding: 0 44px; } }

/* --- FAQ ------------------------------------------------------------------- */

.faq { padding: 100px 25px; }
.faq__heading {
  font-size: var(--text-faq-title);
  line-height: var(--leading-heading);
  text-align: center;
  color: var(--color-ink-strong);
}
.faq__subheading {
  margin: 11px 0 30px;
  font-family: var(--font-heading);
  font-size: var(--text-faq-sub);
  font-weight: var(--weight-light);
  text-align: center;
  color: var(--color-navy);
}
.faq__list { max-width: 750px; margin: 0 auto; }
.faq__item {
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.faq__item + .faq__item { margin-top: 32px; }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--color-navy);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__chevron { font-size: 16px; transition: transform var(--transition); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer {
  padding: 0 35px 30px;
  font-size: var(--text-big);
  font-weight: var(--weight-medium);
  line-height: var(--leading-faq);
  color: var(--color-cyan);
}
@media (max-width: 767px) {
  .faq { padding: 50px 20px; }
  .faq__question { padding: 20px; }
  .faq__answer { padding: 0 20px 20px; }
}

/* --- Page band (About, Appointment Options) ------------------------------- */

.band {
  position: relative;
  isolation: isolate;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height) + 30px) var(--gutter) 40px;
  text-align: center;
  background: var(--color-ink-strong);
  color: var(--color-white);
}
.band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center center;
  background-size: cover;
}
.band__bg::after { content: ""; position: absolute; inset: 0; background: var(--band-overlay); }
.band__title { font-size: var(--text-band-title); line-height: var(--leading-tight); color: var(--color-white); }
.band__subtitle {
  margin: 20px 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-band-sub);
  font-weight: var(--weight-semibold);
  color: var(--color-white-75);
}
.band--plain { min-height: 0; background: var(--color-bg-title-bar); color: var(--color-ink); }
@media (max-width: 767px) { .band { min-height: 40vh; } }

/* --- About page ------------------------------------------------------------ */

.about-doctor {
  margin: 60px 0 30px;
  padding: 50px 0 40px;
  background: var(--color-bg-grey);
}
.about-doctor__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-doctor__aside { text-align: center; }
.about-doctor__portrait { width: 100%; margin: 0 auto; }
.about-doctor__cta { margin: 60px 0 0; }
.about-doctor__name {
  margin-bottom: 30px;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--color-navy);
}
.about-doctor__headline {
  margin-bottom: 30px;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-cyan);
}

.athlete { padding: 60px 0 40px; }
.athlete__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.athlete__heading {
  margin-bottom: 30px;
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  color: var(--color-cyan);
}
.point { display: flex; gap: 18px; margin-top: 50px; }
.point__icon { flex: 0 0 auto; color: var(--color-teal); font-size: 30px; line-height: 1; margin-top: 2px; }
.point__title { margin-bottom: 8px; font-size: 22px; }
@media (max-width: 1024px) {
  .about-doctor__grid, .athlete__grid { grid-template-columns: 1fr; gap: 40px; }
  .about-doctor__portrait { max-width: 480px; }
  .about-doctor__cta { margin-top: 30px; }
  .athlete__media { max-width: 600px; }
}

/* --- Appointment Options --------------------------------------------------- */

.options { padding: 30px 0 60px; }
.options__heading {
  margin-bottom: 30px;
  font-size: var(--text-h2);
  text-align: center;
}
.options__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 60px;
}
.option { text-align: center; }
.option__title { margin-bottom: 15px; font-size: var(--text-h3); }
.option__text { font-size: var(--text-big); line-height: var(--leading-big); }
.option__cta { margin: 20px 0 0; }
@media (max-width: 767px) { .options__grid { grid-template-columns: 1fr; } }

/* --- Title bar and breadcrumbs (blog, posts, services) -------------------- */

.title-bar {
  padding: 70px 0;
  background: var(--color-bg-title-bar);
  text-align: center;
}
.title-bar__title { font-size: 26px; }
.crumbs { margin-top: 8px; font-size: var(--text-base); color: var(--color-text-muted); }
.crumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.crumbs__item + .crumbs__item::before { content: "/"; margin-right: 6px; opacity: 0.6; }
.crumbs a { color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-ink); }
@media (max-width: 767px) { .title-bar { padding: 40px 0; } }

/* --- Blog ------------------------------------------------------------------ */

.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 275px;
  gap: 100px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.listing-note { margin-bottom: 30px; font-size: var(--text-big); }

.post-card {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  gap: 30px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--color-rule);
}
.post-card:last-child { border-bottom: 0; margin-bottom: 0; }
/* A post with no featured image gets the full width rather than an empty box. */
.post-card--no-image { grid-template-columns: minmax(0, 1fr); }
.post-mini--no-image { display: block; }
.post-card__thumb { display: block; aspect-ratio: 215 / 115; overflow: hidden; background: var(--color-bg-boxes); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__title { font-size: 22px; line-height: 1.3; margin-bottom: 6px; }
.post-card__title a { color: var(--color-ink); }
.post-card__title a:hover { color: var(--color-teal); }
.post-card__meta { margin-bottom: 12px; font-size: var(--text-small); color: var(--color-text-muted); }
.post-card__meta a { color: var(--color-text-muted); }
.post-card__meta a:hover { color: var(--color-ink); }
.post-card__sep { margin: 0 6px; }
.post-card__excerpt { font-size: var(--text-big); line-height: var(--leading-big); margin-bottom: 14px; }
.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.post-card__more .icon { font-size: 10px; }
.post-card__more:hover { color: var(--color-teal); }

.sidebar__heading { margin: 60px 0 20px; font-size: var(--text-h4); }
.sidebar__heading:first-child { margin-top: 0; }
.search-form { position: relative; }
.search-form__input {
  width: 100%;
  height: 40px;
  padding: 0 40px 0 15px;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  background: var(--color-white);
  font: inherit;
  color: var(--color-ink);
}
.search-form__input:focus { outline: 2px solid var(--color-teal); outline-offset: -1px; }
.search-form__button {
  position: absolute;
  top: 0; right: 0;
  width: 40px; height: 40px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 16px;
  cursor: pointer;
}
.search-form__button:hover { color: var(--color-ink); }

.post-mini-list { list-style: none; margin: 0; padding: 0; }
.post-mini { display: flex; gap: 15px; margin-bottom: 20px; }
.post-mini__thumb { flex: 0 0 80px; width: 80px; height: 60px; overflow: hidden; background: var(--color-bg-boxes); }
.post-mini__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-mini__title { display: block; font-size: var(--text-base); line-height: 1.4; color: var(--color-ink); }
.post-mini__title:hover { color: var(--color-teal); }
.post-mini__date { display: block; margin-top: 4px; font-size: var(--text-small); color: var(--color-text-muted); }

.category-list { list-style: none; margin: 0; padding: 0; }
.category-list__item { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--text-big); }
.category-list__item a { color: var(--color-text); }
.category-list__item a:hover { color: var(--color-ink); }
.category-list__count { color: var(--color-text-muted); }

.post__media { position: relative; margin-bottom: 30px; }
.post__image { width: 100%; }
.post__badges {
  position: absolute;
  top: 10px; left: 10px;
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.post__badges a {
  display: inline-block;
  padding: 4px 8px;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
}
.post__badges a:hover { background: var(--color-teal); }
.post__date {
  position: absolute;
  top: 10px; right: 10px;
  min-width: 52px;
  padding: 8px 6px;
  background: var(--color-white);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  color: var(--color-ink);
}
.post__date-month { display: block; font-size: 12px; }
.post__date-day {
  display: block;
  margin: 2px 0;
  padding: 2px 0;
  border-top: 2px solid var(--color-teal);
  border-bottom: 2px solid var(--color-teal);
  font-size: 22px;
  font-weight: var(--weight-bold);
}
.post__date-year { display: block; font-size: 11px; }
.prose--post { font-size: var(--text-big); line-height: var(--leading-post); color: var(--color-ink); }
.prose--post p { margin-bottom: 1.4em; }
.prose--post ul, .prose--post ol { margin-bottom: 1.4em; }
.prose--post a { color: var(--color-link); }
.prose--post a:hover { color: var(--color-teal); }

@media (max-width: 1024px) {
  .layout-sidebar { grid-template-columns: 1fr; gap: 60px; padding-top: 50px; padding-bottom: 50px; }
  .sidebar { max-width: 480px; }
}
@media (max-width: 600px) {
  .post-card { grid-template-columns: 1fr; gap: 16px; }
  .post-card__thumb { aspect-ratio: 16 / 9; }
}

/* --- Services -------------------------------------------------------------- */

.service { padding: 90px 0; }
.service__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 60px;
  align-items: start;
}
.service__kicker {
  margin-bottom: 40px;
  font-family: var(--font-heading);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  color: var(--color-teal);
}
.service__title { margin-bottom: 40px; font-size: var(--text-h3); }
.service__cta { margin: 50px 0 0; }
.service__media img { width: 100%; }
@media (max-width: 1024px) {
  .service { padding: 50px 0; }
  .service__grid { grid-template-columns: 1fr; gap: 40px; }
  .service__media { order: -1; }
}

.services-intro { margin-bottom: 40px; font-size: var(--text-big); text-align: center; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.service-card { display: block; background: var(--color-white); box-shadow: var(--shadow-card); color: var(--color-text); }
.service-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-boxes); }
.service-card__placeholder { width: 64px; opacity: 0.25; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card__body { display: block; padding: 20px 24px 24px; }
.service-card__title { display: block; font-family: var(--font-heading); font-size: 20px; font-weight: var(--weight-semibold); color: var(--color-ink); }
.service-card__cats { display: block; margin-top: 4px; font-size: var(--text-small); color: var(--color-text-muted); }
.service-card__summary { display: block; margin-top: 10px; line-height: var(--leading-big); }
@media (max-width: 1024px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } }

/* --- Standard page (stream blocks) ---------------------------------------- */

.stream { font-size: var(--text-big); line-height: var(--leading-big); }
.stream > * + * { margin-top: 30px; }
.stream__subtitle { font-size: 20px; text-align: center; }
.stream__heading { font-size: 32px; line-height: var(--leading-heading); text-align: center; }
.stream .responsive-object { position: relative; padding-bottom: 56.25%; height: 0; }
.stream .responsive-object iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stream__button { text-align: center; }
.check-list--stream .check-list__item { font-family: var(--font-body); font-weight: var(--weight-normal); font-size: var(--text-big); }
.image-text { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; }
.image-text__heading { margin-bottom: 12px; font-size: var(--text-h3); }
@media (max-width: 767px) { .image-text { grid-template-columns: 1fr; } }

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

.site-footer {
  padding: 60px 0 50px;
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.site-footer__heading {
  margin-bottom: 30px;
  font-size: var(--text-h4);
  color: var(--color-footer-heading);
}
.site-footer__label { margin: 0 0 4px; color: var(--color-white); }
.site-footer__value { margin: 0 0 20px; line-height: var(--leading-base); }
.site-footer__value a { color: var(--color-footer-text); }
.site-footer__value a:hover { color: var(--color-white); }
.site-footer__note { margin: -16px 0 20px; font-size: var(--text-tiny); }
.site-footer .post-mini__title { color: var(--color-white); }
.site-footer .post-mini__title:hover { color: var(--color-teal-hover); }
.site-footer .post-mini__thumb { background: rgba(255, 255, 255, 0.06); }
.site-footer__col--gift { display: flex; justify-content: center; }
.social-links { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 4px; }
.social-links__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-round);
  background: var(--color-footer-social-bg);
  color: var(--color-footer-text);
  font-size: 12px;
}
.social-links__link:hover { background: var(--color-teal); color: var(--color-white); }
@media (max-width: 1024px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__col--gift { justify-content: flex-start; } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* --- Back to top ----------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 51, 51, 0.75);
  color: var(--color-white);
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), background-color var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--color-teal); color: var(--color-white); }

/* --- Error pages ----------------------------------------------------------- */

.error-page { padding: 100px 0; text-align: center; }
.error-page__code { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--color-teal); }
.error-page__title { margin-bottom: 20px; font-size: var(--text-h2); }
.error-page__body { max-width: 560px; margin: 0 auto; font-size: var(--text-big); line-height: var(--leading-big); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}