/* =========================================================================
   ARKAS DIGITAL - GLOBAL STYLES
   All values come from tokens.css. Do not hard-code colours or sizes here.
   ========================================================================= */

/* ------------------------------------------------------------------ BASE */

html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--ark-bone);
  color: var(--ark-ink);
  font-family: var(--ark-font-body);
  font-size: var(--ark-size-body);
  font-weight: var(--ark-weight-body);
  line-height: var(--ark-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ark-font-heading);
  font-weight: var(--ark-weight-heading);
  color: var(--ark-ink);
  margin-top: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--ark-size-h1);
  line-height: var(--ark-lh-h1);
  letter-spacing: var(--ark-ls-h1);
  font-variation-settings: var(--ark-opsz-display);
  margin-bottom: var(--ark-space-5);
}

h2 {
  font-size: var(--ark-size-h2);
  line-height: var(--ark-lh-h2);
  letter-spacing: var(--ark-ls-h2);
  font-variation-settings: var(--ark-opsz-display);
  margin-bottom: var(--ark-space-5);
}

h3 {
  font-size: var(--ark-size-h3);
  line-height: var(--ark-lh-h3);
  font-variation-settings: var(--ark-opsz-text);
  margin-bottom: var(--ark-space-3);
}

h4 {
  font-size: var(--ark-size-h4);
  line-height: 1.35;
  font-variation-settings: var(--ark-opsz-text);
  margin-bottom: var(--ark-space-3);
}

p, ul, ol { margin-top: 0; margin-bottom: var(--ark-space-5); }

/* Text blocks capped at 68 characters (2.3). Applied to prose, not to
   layout containers, so full-bleed sections still span the viewport. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.ark-prose p,
.ark-prose ul,
.ark-prose ol { max-width: var(--ark-max-measure); }

a { color: var(--ark-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--ark-yellow-deep); }

strong, b { font-weight: var(--ark-weight-medium); }

/* Accessible focus ring, visible on light and dark surfaces alike. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ark-focus);
  outline-offset: 2px;
  border-radius: var(--ark-radius-small);
}

/* Skip link */
.ark-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ark-yellow); color: var(--ark-ink);
  padding: var(--ark-space-3) var(--ark-space-5);
  font-weight: var(--ark-weight-medium);
}
.ark-skip-link:focus { left: 0; }

/* --------------------------------------------------------------- LAYOUT */

.ark-section {
  padding-top: var(--ark-section-y-sm);
  padding-bottom: var(--ark-section-y-sm);
}
@media (min-width: 769px) {
  .ark-section { padding-top: var(--ark-section-y); padding-bottom: var(--ark-section-y); }
}

.ark-section--tight { padding-top: var(--ark-space-7); padding-bottom: var(--ark-space-7); }

.ark-wrap {
  width: 100%;
  max-width: var(--ark-max-width);
  margin-inline: auto;
  padding-inline: var(--ark-gutter);
}
@media (min-width: 769px) { .ark-wrap { padding-inline: var(--ark-gutter-lg); } }

/* Section surfaces */
.ark-section--dark { background-color: var(--ark-ink); color: var(--ark-bone); }
.ark-section--charcoal { background-color: var(--ark-charcoal); color: var(--ark-bone); }
.ark-section--tint { background-color: var(--ark-yellow-pale); }
.ark-section--white { background-color: var(--ark-white); }

.ark-section--dark h1, .ark-section--dark h2, .ark-section--dark h3, .ark-section--dark h4,
.ark-section--charcoal h1, .ark-section--charcoal h2, .ark-section--charcoal h3, .ark-section--charcoal h4 {
  color: var(--ark-bone);
}
.ark-section--dark a, .ark-section--charcoal a { color: var(--ark-bone); }
.ark-section--dark .ark-muted, .ark-section--charcoal .ark-muted { color: var(--ark-slate-light); }

/* Top hairline used to separate stacked light sections */
.ark-section--ruled { border-top: var(--ark-border); }

/* Grids */
.ark-grid { display: grid; gap: var(--ark-space-6); }
@media (min-width: 769px) {
  .ark-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ark-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ark-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .ark-grid--wide { gap: var(--ark-space-7); }
}

/* Two-column split: sticky heading beside content */
.ark-split { display: grid; gap: var(--ark-space-6); }
@media (min-width: 900px) {
  .ark-split { grid-template-columns: 1fr 1.4fr; gap: var(--ark-space-8); }
  .ark-split__aside { position: sticky; top: calc(var(--ark-header-height) + var(--ark-space-5)); align-self: start; }
}

/* --------------------------------------------------------- TYPE HELPERS */

/* Eyebrow: small tracked label above a heading, with a yellow rule.
   Yellow appears as a rule, never as text colour. */
.ark-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ark-space-3);
  font-family: var(--ark-font-body);
  font-size: var(--ark-size-label);
  font-weight: var(--ark-weight-medium);
  letter-spacing: var(--ark-ls-label);
  text-transform: uppercase;
  color: var(--ark-slate);
  margin-bottom: var(--ark-space-5);
}
.ark-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--ark-yellow);
  flex: none;
}
.ark-section--dark .ark-eyebrow,
.ark-section--charcoal .ark-eyebrow { color: var(--ark-slate-light); }

/* Answer paragraph - the 40-60 word block directly under the H1 (4). */
.ark-answer {
  font-size: var(--ark-size-lead);
  line-height: 1.55;
  color: var(--ark-ink);
  max-width: 62ch;
  margin-bottom: var(--ark-space-6);
}
.ark-section--dark .ark-answer,
.ark-section--charcoal .ark-answer { color: var(--ark-bone); }

.ark-lede { font-size: 1.1875rem; line-height: 1.6; max-width: var(--ark-max-measure); }
.ark-muted { color: var(--ark-slate); }
.ark-small { font-size: var(--ark-size-small); }
.ark-measure { max-width: var(--ark-max-measure); }

/* ------------------------------------------------------------- BUTTONS */

.ark-btn,
.wp-block-button__link.ark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ark-space-2);
  font-family: var(--ark-font-body);
  font-size: var(--ark-size-body);
  font-weight: var(--ark-weight-medium);
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: var(--ark-radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ark-duration) var(--ark-ease),
              border-color var(--ark-duration) var(--ark-ease),
              color var(--ark-duration) var(--ark-ease);
}

/* Primary CTA: yellow fill behind ink text. The only yellow-filled element
   permitted above the fold (2.1). */
.ark-btn--primary,
.wp-block-button__link.ark-btn--primary {
  background-color: var(--ark-yellow);
  color: var(--ark-ink);
  border-color: var(--ark-yellow);
}
.ark-btn--primary:hover,
.wp-block-button__link.ark-btn--primary:hover {
  background-color: var(--ark-yellow-deep);
  border-color: var(--ark-yellow-deep);
  color: var(--ark-ink);
}

.ark-btn--secondary,
.wp-block-button__link.ark-btn--secondary {
  background-color: transparent;
  color: var(--ark-ink);
  border-color: var(--ark-line);
}
.ark-btn--secondary:hover { border-color: var(--ark-ink); background-color: transparent; color: var(--ark-ink); }

/* Secondary button sitting on a dark surface */
.ark-section--dark .ark-btn--secondary,
.ark-section--charcoal .ark-btn--secondary,
.ark-hero .ark-btn--secondary {
  color: var(--ark-bone);
  border-color: var(--ark-line-dark);
}
.ark-section--dark .ark-btn--secondary:hover,
.ark-section--charcoal .ark-btn--secondary:hover,
.ark-hero .ark-btn--secondary:hover { border-color: var(--ark-bone); color: var(--ark-bone); }

/* Text link with a yellow underline rule */
.ark-link {
  display: inline-block;
  font-weight: var(--ark-weight-medium);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--ark-yellow);
}
.ark-link:hover { border-bottom-color: var(--ark-yellow-deep); }

.ark-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ark-space-4);
  margin-top: var(--ark-space-6);
}

/* ---------------------------------------------------------------- HERO */

.ark-hero {
  background-color: var(--ark-ink);
  color: var(--ark-bone);
  padding-top: var(--ark-space-8);
  padding-bottom: var(--ark-space-8);
  position: relative;
}
@media (min-width: 769px) {
  .ark-hero { padding-top: var(--ark-space-10); padding-bottom: var(--ark-space-10); }
}
.ark-hero h1 { color: var(--ark-bone); max-width: 18ch; }
.ark-hero .ark-answer { color: var(--ark-bone); opacity: 0.92; }
.ark-hero--inner h1 { max-width: 24ch; }
.ark-hero--inner { padding-top: var(--ark-space-7); padding-bottom: var(--ark-space-7); }
@media (min-width: 769px) {
  .ark-hero--inner { padding-top: var(--ark-space-9); padding-bottom: var(--ark-space-9); }
}

/* --------------------------------------------------------------- CARDS */

/* Hairline dividers instead of heavy card shadows (2.3). */
.ark-card {
  display: flex;
  flex-direction: column;
  padding: var(--ark-space-6);
  background-color: var(--ark-white);
  border: var(--ark-border);
  border-radius: var(--ark-radius);
  height: 100%;
}
.ark-card h3 { margin-bottom: var(--ark-space-3); }
.ark-card p { margin-bottom: var(--ark-space-4); }
.ark-card__foot { margin-top: auto; padding-top: var(--ark-space-3); }

.ark-card--flat { background-color: transparent; border: 0; padding: 0; }

/* Service card: numbered, yellow rule on top */
.ark-card--service { border-top: 3px solid var(--ark-yellow); }

.ark-card--dark {
  background-color: var(--ark-charcoal);
  border-color: var(--ark-line-dark);
  color: var(--ark-bone);
}
.ark-card--dark h3 { color: var(--ark-bone); }

/* Column set separated by hairlines rather than boxes (used for The Problem) */
.ark-ruled { display: grid; gap: var(--ark-space-6); }
.ark-ruled > * { padding-top: var(--ark-space-5); border-top: 2px solid var(--ark-yellow); }
@media (min-width: 769px) {
  .ark-ruled--3 { grid-template-columns: repeat(3, 1fr); gap: var(--ark-space-7); }
}
.ark-section--dark .ark-ruled > * { border-top-color: var(--ark-yellow); }

/* --------------------------------------------------------- NUMBERED LIST */

.ark-steps { list-style: none; margin: 0; padding: 0; counter-reset: ark-step; }
.ark-steps > li {
  counter-increment: ark-step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ark-space-5);
  padding: var(--ark-space-6) 0;
  border-top: var(--ark-border);
  max-width: none;
}
.ark-steps > li:last-child { border-bottom: var(--ark-border); }
.ark-steps > li::before {
  content: counter(ark-step, decimal-leading-zero);
  font-family: var(--ark-font-heading);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ark-slate);
  padding-top: 4px;
}
.ark-steps h3 { margin-bottom: var(--ark-space-2); }
.ark-steps p { margin-bottom: 0; max-width: var(--ark-max-measure); }

/* Tick / cross lists */
.ark-list { list-style: none; margin: 0 0 var(--ark-space-5); padding: 0; }
.ark-list > li {
  position: relative;
  padding-left: var(--ark-space-6);
  margin-bottom: var(--ark-space-3);
  max-width: var(--ark-max-measure);
}
.ark-list > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 2px;
  background: var(--ark-yellow);
}

/* "What we don't do" - anti-positioning list */
.ark-list--dont > li::before {
  width: 12px; height: 12px; top: 0.45em;
  background: none;
  border-left: 2px solid var(--ark-slate);
  border-bottom: 2px solid var(--ark-slate);
  transform: rotate(-45deg) scale(0.8);
  transform-origin: center;
}
.ark-section--dark .ark-list--dont > li::before { border-color: var(--ark-slate-light); }

/* ---------------------------------------------------------- STAT BLOCK */

.ark-stats { display: grid; gap: var(--ark-space-6); }
@media (min-width: 640px) { .ark-stats { grid-template-columns: repeat(3, 1fr); } }
.ark-stat { border-top: 2px solid var(--ark-yellow); padding-top: var(--ark-space-4); }
.ark-stat__figure {
  display: block;
  font-family: var(--ark-font-heading);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.05;
  font-variation-settings: var(--ark-opsz-display);
  margin-bottom: var(--ark-space-2);
}
.ark-stat__label { font-size: var(--ark-size-small); color: var(--ark-slate); margin: 0; }
.ark-section--dark .ark-stat__label { color: var(--ark-slate-light); }
.ark-stat__label a { color: inherit; }

/* ------------------------------------------------------- TESTIMONIALS */

.ark-testimonials { display: grid; gap: var(--ark-space-6); }
@media (min-width: 769px) { .ark-testimonials { grid-template-columns: repeat(2, 1fr); } }

.ark-testimonial {
  display: flex;
  flex-direction: column;
  background-color: var(--ark-white);
  border: var(--ark-border);
  border-radius: var(--ark-radius);
  padding: var(--ark-space-7) var(--ark-space-6) var(--ark-space-6);
  position: relative;
  height: 100%;
}
.ark-testimonial::before {
  content: "";
  position: absolute;
  top: 0; left: var(--ark-space-6);
  width: 40px; height: 3px;
  background: var(--ark-yellow);
}
.ark-testimonial blockquote {
  margin: 0 0 var(--ark-space-5);
  padding: 0;
  border: 0;
  font-family: var(--ark-font-heading);
  font-size: 1.3125rem;
  line-height: 1.45;
  font-variation-settings: var(--ark-opsz-text);
}
.ark-testimonial blockquote p { margin: 0; max-width: none; font-size: inherit; }
.ark-testimonial figcaption,
.ark-testimonial__meta {
  margin-top: auto;
  padding-top: var(--ark-space-4);
  border-top: var(--ark-border);
  font-size: var(--ark-size-small);
  color: var(--ark-slate);
  font-style: normal;
}
.ark-testimonial__role { display: block; }

/* Placeholder state, shown until real testimonials land */
.ark-testimonial--placeholder { border-style: dashed; background-color: transparent; }
.ark-testimonial--placeholder blockquote { color: var(--ark-slate); }

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

.ark-faq { border-top: var(--ark-border); max-width: 860px; }

/* Uses the native details/summary element: keyboard accessible, works with
   no JavaScript, and the answer text is in the DOM for crawlers. */
.ark-faq .wp-block-details,
.ark-faq details {
  border-bottom: var(--ark-border);
  padding: 0;
  margin: 0;
  background: none;
}
.ark-faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--ark-space-5) var(--ark-space-7) var(--ark-space-5) 0;
  position: relative;
  font-family: var(--ark-font-heading);
  font-size: var(--ark-size-h3);
  line-height: var(--ark-lh-h3);
  font-variation-settings: var(--ark-opsz-text);
}
.ark-faq summary::-webkit-details-marker { display: none; }
.ark-faq summary::marker { content: ""; }

/* Plus / minus indicator drawn in CSS */
.ark-faq summary::after {
  content: "";
  position: absolute;
  right: 4px; top: 50%;
  width: 14px; height: 2px;
  background: var(--ark-ink);
  transform: translateY(-50%);
}
.ark-faq summary::before {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 2px; height: 14px;
  background: var(--ark-ink);
  transform: translateY(-50%);
  transition: opacity var(--ark-duration) var(--ark-ease);
}
.ark-faq details[open] summary::before { opacity: 0; }
.ark-faq details[open] summary::after { background: var(--ark-yellow-deep); }
.ark-faq .wp-block-details__content,
.ark-faq details > *:not(summary) { padding-bottom: var(--ark-space-5); }
.ark-faq details p { max-width: var(--ark-max-measure); margin-bottom: var(--ark-space-3); }
.ark-faq details p:last-child { margin-bottom: 0; }

.ark-section--dark .ark-faq { border-top-color: var(--ark-line-dark); }
.ark-section--dark .ark-faq details { border-bottom-color: var(--ark-line-dark); }
.ark-section--dark .ark-faq summary::after,
.ark-section--dark .ark-faq summary::before { background: var(--ark-bone); }

/* ------------------------------------------------------------ CTA BAND */

/* The one place a yellow fill spans a full section. Ink text on yellow
   passes contrast comfortably. */
.ark-cta-band { background-color: var(--ark-yellow); color: var(--ark-ink); }
.ark-cta-band h2 { color: var(--ark-ink); max-width: 20ch; }
.ark-cta-band p { color: var(--ark-ink); max-width: 56ch; }
.ark-cta-band .ark-btn--primary {
  background-color: var(--ark-ink);
  color: var(--ark-yellow);
  border-color: var(--ark-ink);
}
.ark-cta-band .ark-btn--primary:hover { background-color: var(--ark-charcoal); border-color: var(--ark-charcoal); color: var(--ark-yellow); }
.ark-cta-band__inner { display: grid; gap: var(--ark-space-6); align-items: center; }
@media (min-width: 900px) {
  .ark-cta-band__inner { grid-template-columns: 1.5fr auto; gap: var(--ark-space-8); }
}

/* ------------------------------------------------------------ DIAGRAMS */

.ark-diagram { margin: var(--ark-space-7) 0; }
.ark-diagram svg { width: 100%; height: auto; display: block; }
.ark-diagram figcaption {
  margin-top: var(--ark-space-4);
  font-size: var(--ark-size-small);
  color: var(--ark-slate);
}
.ark-section--dark .ark-diagram figcaption { color: var(--ark-slate-light); }

/* --------------------------------------------------------- DEFINITIONS */

/* Brand hub fact table */
.ark-facts { border-top: var(--ark-border); margin: 0 0 var(--ark-space-7); }
.ark-facts > div {
  display: grid;
  gap: var(--ark-space-2);
  padding: var(--ark-space-4) 0;
  border-bottom: var(--ark-border);
}
@media (min-width: 700px) { .ark-facts > div { grid-template-columns: 260px 1fr; gap: var(--ark-space-5); } }
.ark-facts dt { font-weight: var(--ark-weight-medium); color: var(--ark-slate); margin: 0; }
.ark-facts dd { margin: 0; }

/* --------------------------------------------------------- BREADCRUMBS */

.ark-breadcrumbs {
  font-size: var(--ark-size-small);
  color: var(--ark-slate);
  padding-block: var(--ark-space-4);
}
.ark-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ark-space-2); }
.ark-breadcrumbs li { display: flex; align-items: center; gap: var(--ark-space-2); }
.ark-breadcrumbs li + li::before { content: "/"; color: var(--ark-line); }
.ark-breadcrumbs a { color: var(--ark-slate); text-decoration: none; }
.ark-breadcrumbs a:hover { text-decoration: underline; }
.ark-breadcrumbs [aria-current="page"] { color: var(--ark-ink); }

/* ------------------------------------------------------------- IMAGES */

img { max-width: 100%; height: auto; }
figure { margin: 0; }
.ark-media img { border-radius: var(--ark-radius); display: block; width: 100%; }

/* --------------------------------------------------------------- FORMS */

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea,
.fluentform input[type="text"], .fluentform input[type="email"],
.fluentform input[type="url"], .fluentform input[type="tel"],
.fluentform select, .fluentform textarea {
  width: 100%;
  font-family: var(--ark-font-body);
  font-size: var(--ark-size-body);
  color: var(--ark-ink);
  background-color: var(--ark-white);
  border: var(--ark-border);
  border-radius: var(--ark-radius);
  padding: 13px 15px;
  line-height: 1.4;
  transition: border-color var(--ark-duration) var(--ark-ease);
  box-shadow: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--ark-ink); }

label, .fluentform .ff-el-input--label label {
  font-size: var(--ark-size-small);
  font-weight: var(--ark-weight-medium);
  color: var(--ark-ink);
  margin-bottom: var(--ark-space-2);
  display: inline-block;
}

.fluentform .ff-el-group { margin-bottom: var(--ark-space-5); }
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error select,
.fluentform .ff-el-is-error textarea { border-color: #B3261E; }
.fluentform .error-text, .fluentform .text-danger { color: #B3261E; font-size: var(--ark-size-small); }

.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
  background-color: var(--ark-yellow) !important;
  color: var(--ark-ink) !important;
  border: 1px solid var(--ark-yellow) !important;
  border-radius: var(--ark-radius) !important;
  font-family: var(--ark-font-body) !important;
  font-size: var(--ark-size-body) !important;
  font-weight: var(--ark-weight-medium) !important;
  padding: 15px 28px !important;
  box-shadow: none !important;
  transition: background-color var(--ark-duration) var(--ark-ease);
}
.fluentform .ff-btn-submit:hover { background-color: var(--ark-yellow-deep) !important; border-color: var(--ark-yellow-deep) !important; }

/* Honeypot must stay reachable by bots but hidden from people and
   screen readers alike. */
.ff-el-form-hide, .ark-hp { position: absolute !important; left: -9999px !important; }

/* --------------------------------------------------------------- MOTION */

/* Subtle fade-up on scroll (2.3), implemented with CSS scroll-driven
   animations. Content is fully visible by default and only animates where
   the browser supports it, so nothing depends on JavaScript to appear and
   crawlers always see the rendered text (5.9). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ark-animate {
      animation: ark-fade-up var(--ark-duration) var(--ark-ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes ark-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

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

/* ------------------------------------------------------------ UTILITIES */

.ark-hidden { display: none; }
.screen-reader-text, .ark-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ark-mt-0 { margin-top: 0; }
.ark-mb-0 { margin-bottom: 0; }
.ark-mb-6 { margin-bottom: var(--ark-space-6); }
.ark-mb-7 { margin-bottom: var(--ark-space-7); }

/* Print */
@media print {
  .ark-site-header, .ark-site-footer, .ark-cta-band, .ark-skip-link { display: none; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------- OWNER-TO-SUPPLY MARKS */

/* Anything the owner still has to provide renders in this style so it is
   impossible to miss on a page and easy to search for. Every instance is
   listed in the build completion report. */
.ark-placeholder {
  display: inline-block;
  background: repeating-linear-gradient(
    45deg, var(--ark-yellow-pale), var(--ark-yellow-pale) 6px,
    #FBEFCE 6px, #FBEFCE 12px
  );
  border: 1px dashed var(--ark-yellow-deep);
  border-radius: var(--ark-radius-small);
  padding: 2px 8px;
  font-size: var(--ark-size-small);
  color: #5A4A12;
  font-style: normal;
}
.ark-section--dark .ark-placeholder,
.ark-section--charcoal .ark-placeholder,
.ark-site-footer .ark-placeholder {
  background: transparent;
  color: var(--ark-yellow);
  border-color: var(--ark-yellow-deep);
}

/* =========================================================================
   GUTENBERG BLOCK INTEGRATION

   Page content is built from native Gutenberg blocks so an editor can change
   any wording or reorder any section from the block editor. These rules make
   the core block wrappers cooperate with the component classes above, both on
   the front end and inside the editor.
   ========================================================================= */

/* Core layout wrappers must not impose their own width or spacing where a
   component class is doing the job. */
.ark-section > .wp-block-group__inner-container,
.ark-wrap > .wp-block-group__inner-container { max-width: none; padding: 0; }

/* The flow layout adds a top margin to every sibling. Components that manage
   their own spacing opt out. */
.ark-grid > *,
.ark-ruled > *,
.ark-cta-band__inner > *,
.ark-split > *,
.ark-testimonials > *,
.ark-stats > * { margin-block-start: 0; }

/* Grids stay grids even when Gutenberg marks them as flow or constrained. */
.ark-grid.is-layout-flow,
.ark-grid.is-layout-constrained,
.ark-stats.is-layout-flow,
.ark-testimonials.is-layout-flow,
.ark-ruled.is-layout-flow,
.ark-split.is-layout-flow,
.ark-cta-band__inner.is-layout-flow { display: grid; }

@media (min-width: 769px) {
  .ark-grid--2.is-layout-flow, .ark-grid--2.is-layout-constrained { grid-template-columns: repeat(2, 1fr); }
  .ark-grid--3.is-layout-flow, .ark-grid--3.is-layout-constrained { grid-template-columns: repeat(3, 1fr); }
  .ark-grid--4.is-layout-flow, .ark-grid--4.is-layout-constrained { grid-template-columns: repeat(4, 1fr); }
  .ark-ruled--3.is-layout-flow { grid-template-columns: repeat(3, 1fr); gap: var(--ark-space-7); }
}

/* Constrained groups inside a component should fill it, not re-centre. */
.ark-card > .wp-block-group__inner-container > *,
.ark-testimonial > .wp-block-group__inner-container > * { max-width: none; }

/* Headings block: core adds .wp-block-heading, which must not reset the
   typography set on the element selectors. */
.wp-block-heading { font-family: var(--ark-font-heading); }

/* ------------------------------------------------------------- BUTTONS */

/* core/button puts the author's class on the wrapper and renders the real
   control as the inner anchor, so the button styling is attached here rather
   than to the class itself. */
.wp-block-buttons.ark-cta-row { gap: var(--ark-space-4); margin-top: var(--ark-space-6); }
.wp-block-buttons.ark-cta-row.is-layout-flex { display: flex; flex-wrap: wrap; }

.wp-block-button.ark-btn--primary > .wp-block-button__link,
.wp-block-button.ark-btn--secondary > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ark-font-body);
  font-size: var(--ark-size-body);
  font-weight: var(--ark-weight-medium);
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: var(--ark-radius);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color var(--ark-duration) var(--ark-ease),
              border-color var(--ark-duration) var(--ark-ease),
              color var(--ark-duration) var(--ark-ease);
}

.wp-block-button.ark-btn--primary > .wp-block-button__link {
  background-color: var(--ark-yellow);
  color: var(--ark-ink);
  border-color: var(--ark-yellow);
}
.wp-block-button.ark-btn--primary > .wp-block-button__link:hover {
  background-color: var(--ark-yellow-deep);
  border-color: var(--ark-yellow-deep);
  color: var(--ark-ink);
}

.wp-block-button.ark-btn--secondary > .wp-block-button__link {
  background-color: transparent;
  color: var(--ark-ink);
  border-color: var(--ark-line);
}
.wp-block-button.ark-btn--secondary > .wp-block-button__link:hover {
  border-color: var(--ark-ink);
  background-color: transparent;
}

/* Secondary button on a dark surface */
.ark-section--dark .wp-block-button.ark-btn--secondary > .wp-block-button__link,
.ark-section--charcoal .wp-block-button.ark-btn--secondary > .wp-block-button__link,
.ark-hero .wp-block-button.ark-btn--secondary > .wp-block-button__link {
  color: var(--ark-bone);
  border-color: var(--ark-line-dark);
}
.ark-section--dark .wp-block-button.ark-btn--secondary > .wp-block-button__link:hover,
.ark-section--charcoal .wp-block-button.ark-btn--secondary > .wp-block-button__link:hover,
.ark-hero .wp-block-button.ark-btn--secondary > .wp-block-button__link:hover {
  border-color: var(--ark-bone);
  color: var(--ark-bone);
}

/* Inverted primary inside the yellow call-to-action band */
.ark-cta-band .wp-block-button.ark-btn--primary > .wp-block-button__link {
  background-color: var(--ark-ink);
  color: var(--ark-yellow);
  border-color: var(--ark-ink);
}
.ark-cta-band .wp-block-button.ark-btn--primary > .wp-block-button__link:hover {
  background-color: var(--ark-charcoal);
  border-color: var(--ark-charcoal);
  color: var(--ark-yellow);
}

/* ---------------------------------------------------------------- LISTS */

/* core/list renders a plain ul; the tick treatment is opt-in by class. */
.wp-block-list.ark-list { list-style: none; padding-left: 0; }

/* ------------------------------------------------------------- DETAILS */

/* core/details is the FAQ accordion: native disclosure, no JavaScript, and
   the answer text is always present in the DOM for crawlers (5.3). */
.ark-faq .wp-block-details { margin-block: 0; }
.ark-faq .wp-block-details summary { font-family: var(--ark-font-heading); }

/* --------------------------------------------------------------- IMAGE */

.wp-block-image { margin: 0; }
.wp-block-image img { border-radius: var(--ark-radius); }

/* ------------------------------------------------------------- EDITOR */

/* Give the editor canvas the page background so contrast reads true while
   editing, and stop the editor's default width fighting full-bleed sections. */
.editor-styles-wrapper { background-color: var(--ark-bone); }
.editor-styles-wrapper .ark-section { padding-left: 0; padding-right: 0; }

/* ------------------------------------------- GROUP INNER CONTAINER FIX */

/* WordPress wraps the children of a core/group in an extra
   .wp-block-group__inner-container div on the front end for themes that do
   not ship a theme.json, but the block editor does not add that wrapper. The
   result is that a grid renders correctly while editing and collapses to a
   single column once published, because the wrapper becomes the only grid
   item.

   The wrapper is purely presentational, so removing it from the box tree with
   display: contents makes the published page match the editor exactly and
   lets the grid, flex and margin rules above apply to the real content. */
.entry-content .wp-block-group__inner-container { display: contents; }