/* Shared editorial styling for public pages; the admin keeps its own interface. */
:root {
  --gold: #c6a443;
  --editorial-rule: color-mix(in srgb, var(--gold) 58%, transparent);
  --editorial-gold-text: var(--gold);
}

#main { background: #fff; }
#main :is(h1, h2, h3, h4, h5, h6) { color: var(--green); }
#main :is(h1, h2, h3, h4, h5, h6) a { color: inherit; }
#main :is(.eyebrow, .journal-story-kicker, .journal-card-category) {
  color: var(--editorial-gold-text);
  font-size: 13px;
}
#main .eyebrow::before { content: none; display: none; }
#main .text-link { border-bottom-color: var(--editorial-rule); }
#main .about-page .agency-team { align-items: center; }
#main .about-page .agency-team-copy h2 { margin-bottom: 24px; }
#main .about-page .agency-team-portrait {
  width: 100%;
  max-width: 360px;
  margin: 0;
  justify-self: center;
}
#main .about-page .agency-team-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
@media (min-width: 651px) {
  #main .about-page .agency-team { grid-template-columns: 1.1fr 1fr; }
}
#main .cta-band .eyebrow { margin-bottom: 8px; }

#main .why-section .values {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
#main .why-section .value p { max-width: none; }
@media (min-width: 621px) and (max-width: 1099px) {
  #main .why-section .values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px; }
}
@media (max-width: 620px) {
  #main .why-section .values { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  #main :is(.eyebrow, .journal-story-kicker, .journal-card-category) { font-size: 12px; }
}

/* Shared service enquiry boxes match the Google rating's brand green. */
#main .service-detail .service-enquiry {
  background: var(--green);
  color: #fff;
}
#main .service-detail .service-enquiry :is(h2, p) {
  color: #fff;
}
#main .service-detail .service-enquiry .button {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
#main .service-detail .service-enquiry .button:hover {
  background: #a78a37;
  border-color: #a78a37;
  color: #fff;
}
#main .service-detail .service-enquiry .button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}
#main .service-detail--holiday-nannies .service-hero-note { max-width: 240px; right: 25%; }
#main .service-detail--holiday-nannies .service-hero-note span { white-space: nowrap; }
#main .service-detail--maternity-support .service-options > h2 { text-align: center; }

/* A quiet, gold-edged panel gives important introductory copy room to breathe. */
#main :is(
  .story-copy > p:first-of-type,
  .about-story-copy > p:first-of-type,
  .service-overview-copy > p,
  .editorial-copy > p:first-of-type,
  .detail-grid > div > p:first-of-type,
  .form-intro > div > p:first-of-type,
  .journal-story-body > p:first-of-type:not(:has(img)),
  .journal-story-body > div:first-child > p:first-of-type:not(:has(img))
) {
  background: var(--ivory);
  border-left: 3px solid var(--gold);
  padding: 22px 26px;
  margin-block: 0 25px;
  color: var(--ink);
  line-height: 1.85;
}

#main :is(.why-section, .about-values, .contact-enquiry-types, .service-sentiment) {
  background: var(--ivory);
  border-block: 1px solid var(--editorial-rule);
}
#main :is(.about-principles li, .about-values-grid article, .service-benefits li,
  .service-options-grid article, .service-sentiment p) {
  border-color: var(--editorial-rule);
}
#main :is(.care-planning, .agency-team, .athens-planning-grid article,
  .journal-categories, .journal-sidebar, .journal-story-sidebar,
  .journal-story-return, .journal-story-care) {
  border-color: var(--editorial-rule);
}

#main :is(.care-planning-brief, .guide-contents, .guide-author, .enquiry-card) {
  background: var(--ivory);
  border: 0;
  border-left: 3px solid var(--gold);
  border-radius: 0;
}
#main .care-planning-brief > h3 {
  font: 500 12px/1.7 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--editorial-gold-text);
}
#main .care-planning-trust {
  padding: 22px 26px;
  background: var(--ivory);
  border: 0;
  border-left: 3px solid var(--gold);
}
#main .care-planning-trust > .icon { flex-shrink: 0; }

/* Numbered pathways echo the restrained ruled strip in the visual reference. */
#main .process-section { background: var(--ivory); color: var(--ink); }
#main :is(.steps, .care-planning-steps) {
  gap: 0;
  padding-block: 0;
  border-block: 1px solid var(--editorial-rule);
}
#main :is(.steps, .care-planning-steps) > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: baseline;
  gap: 14px 12px;
  padding: 26px 30px;
  border-right: 1px solid var(--editorial-rule);
  min-width: 0;
}
#main :is(.steps, .care-planning-steps) > div:last-child { border-right: 0; }
#main :is(.steps, .care-planning-steps) .step-number {
  font: 500 13px/1.7 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: var(--editorial-gold-text);
  padding: 0;
  margin: 0;
  border: 0;
}
#main :is(.steps, .care-planning-steps) h3 {
  font: 500 13px/1.7 var(--sans);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0;
}
#main :is(.steps, .care-planning-steps) p {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.85;
  margin: 0;
  max-width: none;
  opacity: 1;
}

/* Warm supporting panels on About, Contact and the Journal. */
#main :is(.about-review, .journal-sidebar-panel, .contact-form-panel) {
  background: var(--ivory);
  border-top: 2px solid var(--gold);
}
#main .about-review blockquote { color: var(--green); }
#main .about-quote-mark { color: var(--editorial-gold-text); }
#main .contact-personal-note {
  background: var(--ivory);
  border: 0;
  border-left: 3px solid var(--gold);
  padding: 22px 24px;
  color: var(--green);
}
#main .contact-personal-note > .icon { flex-shrink: 0; }
#main .journal-featured > div {
  background: var(--ivory);
  border-left: 3px solid var(--gold);
  padding: 25px 26px;
}
#main .journal-card {
  background: #fff;
  border-color: var(--editorial-rule);
}
#main .journal-card-copy { border-top: 1px solid var(--editorial-rule); }

/* A shared, unhurried ribbon above every public page's footer. */
.footer-ribbon {
  position: relative;
  overflow: hidden;
  padding-block: 25px;
  background: var(--green);
  color: var(--ivory);
}
.footer-ribbon-window {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 78px), transparent calc(100% - 48px));
}
.footer-ribbon-track {
  display: flex;
  width: max-content;
  animation: footer-ribbon-drift 80s linear infinite;
}
.footer-ribbon-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 auto;
  gap: 42px;
  min-width: 100vw;
  margin: 0;
  padding: 0 42px 0 0;
  list-style: none;
}
.footer-ribbon-group li {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 42px;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.35;
}
.footer-ribbon-heart {
  display: block;
  flex: 0 0 auto;
  width: 19px;
  height: 21px;
  fill: var(--gold);
}
.footer-ribbon.is-paused .footer-ribbon-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .footer-ribbon:hover .footer-ribbon-track { animation-play-state: paused; }
}
.footer-ribbon-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgb(247 244 238 / 35%);
  border-radius: 50%;
  background: var(--green);
  color: var(--ivory);
  cursor: pointer;
}
.footer-ribbon-toggle[hidden] { display: none; }
.footer-ribbon-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.footer-ribbon-toggle .ribbon-play { display: none; }
.footer-ribbon.is-paused .ribbon-pause { display: none; }
.footer-ribbon.is-paused .ribbon-play { display: block; }
.footer-ribbon-toggle:hover { border-color: var(--ivory); }
.footer-ribbon-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@keyframes footer-ribbon-drift { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 650px) {
  .footer-ribbon { padding-block: 21px; }
  .footer-ribbon-group { gap: 30px; padding-right: 30px; }
  .footer-ribbon-group li { gap: 30px; }
  .footer-ribbon-heart { width: 16px; height: 18px; }
}
@media (max-width: 650px), (hover: none), (pointer: coarse) {
  .footer-ribbon-toggle { display: none; }
  .footer-ribbon-window { mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-ribbon { padding: 24px; }
  .footer-ribbon-window { mask-image: none; }
  .footer-ribbon-track { width: 100%; animation: none; }
  .footer-ribbon-group { flex-wrap: wrap; justify-content: center; min-width: 0; width: 100%; gap: 14px 22px; padding: 0; }
  .footer-ribbon-group li { gap: 22px; font-size: 23px; }
  .footer-ribbon-group li:last-child .footer-ribbon-heart,
  .footer-ribbon-group[aria-hidden="true"],
  .footer-ribbon-toggle { display: none; }
}

/* The same reading style applies to imported articles and future CMS posts. */
#main .journal-story-body h2 {
  border-top: 1px solid var(--editorial-rule);
  padding-top: 24px;
  margin-top: 40px;
}
#main .journal-story-body .guide-author h2 {
  border: 0;
  padding-top: 0;
  margin-top: 0;
}
#main .journal-story-body blockquote {
  background: var(--ivory);
  border-left: 3px solid var(--gold);
  color: var(--green);
  padding: 24px 28px;
}
#main .journal-story-body blockquote p:last-child { margin-bottom: 0; }
#main .journal-story-body hr { border-color: var(--editorial-rule); }
#main .journal-story-body a:not(.button) { text-decoration-color: var(--editorial-rule); }
#main .journal-story-body li::marker { color: var(--editorial-gold-text); }

@media (max-width: 850px) {
  #main :is(.steps, .care-planning-steps) > div { padding: 22px 20px; }
  #main .journal-featured > div { padding: 23px 22px; }
}

@media (max-width: 650px) {
  #main :is(.steps, .care-planning-steps) { grid-template-columns: 1fr; }
  #main :is(.steps, .care-planning-steps) > div {
    border-right: 0;
    border-bottom: 1px solid var(--editorial-rule);
    padding: 23px 20px;
  }
  #main :is(.steps, .care-planning-steps) > div:last-child { border-bottom: 0; }
  #main :is(
    .story-copy > p:first-of-type,
    .about-story-copy > p:first-of-type,
    .service-overview-copy > p,
    .editorial-copy > p:first-of-type,
    .detail-grid > div > p:first-of-type,
    .form-intro > div > p:first-of-type,
    .journal-story-body > p:first-of-type:not(:has(img)),
    .journal-story-body > div:first-child > p:first-of-type:not(:has(img))
  ) { padding: 20px; }
  #main .care-planning-trust { padding: 20px; gap: 12px; }
  #main .contact-personal-note { padding: 20px; gap: 14px; }
  #main .journal-story-body blockquote { padding: 22px 20px; }
}