/* ==========================================================================
   NABS Beauty — CMS additions
   Components the static theme had no markup for (dropdown navigation, card
   grids, testimonials, pricing, counters, rich text from the editor, notices).
   Built on the tokens and rhythm defined in styles.css — nothing here restyles
   the theme itself.
   ========================================================================== */

/* ---------- Brand: uploaded logo (Site Settings) in place of the SVG wordmark ---------- */
.brand__logo { display: block; width: auto; max-width: 160px; max-height: 44px; object-fit: contain; }
/* Header: the light logo sits over the dark hero; the dark logo takes over once the bar turns ivory
   (scrolled, or any inner page). Both are stacked so the swap is a cross-fade, not a reflow. */
.header .brand { position: relative; }
.header .brand__logo--dark { position: absolute; inset: 0; margin: auto 0; }
.header .brand__logo--light, .header .brand__logo--dark { transition: opacity 0.4s var(--ease); }
.header .brand__logo--dark { opacity: 0; }
.header.is-scrolled .brand__logo--light, body:not([data-page="home"]) .header .brand__logo--light { opacity: 0; }
.header.is-scrolled .brand__logo--dark, body:not([data-page="home"]) .header .brand__logo--dark { opacity: 1; }
.drawer__head .brand__logo { max-height: 40px; }
.brand--footer .brand__logo { max-width: 190px; max-height: 56px; }
.icon-img { width: 1.6em; height: 1.6em; object-fit: contain; display: inline-block; vertical-align: middle; }

/* ---------- Primary navigation: dropdowns for CMS menu items with children ---------- */
.nav__item { position: relative; }
.nav__caret { font-size: 0.85em; margin-left: 0.25rem; transition: transform 0.3s var(--ease); }
.nav__item--has-sub:hover .nav__caret, .nav__item--has-sub:focus-within .nav__caret { transform: rotate(180deg); }
.nav__sub {
  position: absolute; left: 50%; top: 100%; z-index: 55; min-width: 240px;
  transform: translate(-50%, 8px); padding: 0.75rem 0; margin-top: 0.75rem;
  background: var(--c-ivory); color: var(--c-brown); --text: var(--c-brown); --text-soft: rgba(43, 36, 34, 0.72); --line: rgba(43, 36, 34, 0.14);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(29, 25, 24, 0.16);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -0.85rem; height: 0.85rem; }
.nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__sub-link {
  display: block; padding: 0.55rem 1.4rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.02em; color: var(--text-soft);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.nav__sub-link:hover { color: var(--c-rose); padding-left: 1.7rem; }
.nav__sub-nested { padding: 0.2rem 0 0.4rem 0.9rem; border-left: 1px solid var(--line); margin: 0 0 0.35rem 1.4rem; }
.nav__sub-nested .nav__sub-link { padding-left: 0.8rem; font-weight: 400; }
.nav__sub-nested .nav__sub-link:hover { padding-left: 1.1rem; }

/* Drawer: nested links under a parent item */
.drawer__sub { padding: 0 0 0.75rem 1rem; display: grid; gap: 0.2rem; }
.drawer__links .drawer__sub a { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--text-soft); padding: 0.35rem 0; }
.drawer__links .drawer__sub a::after { display: none; }

/* ---------- Footer: variable number of CMS menu groups + social icons ---------- */
.footer__grid { grid-template-columns: 1.4fr repeat(var(--footer-cols, 3), 1fr); }
.footer__social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.footer__social .icon-btn { width: 40px; height: 40px; font-size: 1.15rem; }

/* ---------- Flash notices (form feedback rendered by Laravel) ---------- */
.notice {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start;
  padding: 1rem 1.2rem; margin-bottom: 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--fs-small); line-height: 1.55; background: var(--c-warm); color: var(--c-brown);
}
.notice i { font-size: 1.3rem; color: var(--c-rose); margin-top: 0.1rem; }
.notice--error { border-color: #9A4A3C; color: #7C3A2E; }
.notice--error i { color: #9A4A3C; }
.notice--success { border-color: var(--c-rose); }
.notice ul { display: grid; gap: 0.25rem; }
.notice ul li::before { content: "– "; color: var(--c-rose); }
.field__error { font-size: var(--fs-label); color: #9A4A3C; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: #9A4A3C; }
.field input[type="file"] { padding: 0.55rem 0; font-size: var(--fs-label); }
.on-dark .field input, .on-dark .field select, .on-dark .field textarea { color: var(--c-ivory); }
.on-dark .field input::placeholder, .on-dark .field textarea::placeholder { color: rgba(245, 239, 234, 0.45); }

/* ---------- Section heads ---------- */
.section-head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head .section-title { max-width: 22ch; margin-inline: auto; }
.section-head .section-text { text-align: center; margin-inline: auto; max-width: 62ch; }
.section-head .kicker { justify-content: center; }
.section-head .kicker::before { display: none; }
.section-head--left { justify-items: start; text-align: left; }
.section-head--left .section-title, .section-head--left .section-text { margin-inline: 0; text-align: left; }
.section-head--left .kicker::before { display: block; }
.section-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 80px); align-items: end; text-align: left; justify-items: start; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head--split .section-title { max-width: 18ch; margin-inline: 0; }
.section-head--split .section-intro { max-width: 52ch; }
.section-head--split .kicker { justify-content: flex-start; }
.section-head--split .kicker::before { display: block; }

/* ---------- Rich text from the CMS editor ---------- */
.rich { color: var(--text-soft); line-height: 1.75; }
.rich > * + * { margin-top: 1rem; }
.rich h1, .rich h2, .rich h3, .rich h4 { font-family: var(--font-display); font-weight: 500; color: var(--text); line-height: 1.15; margin-top: 1.75rem; }
.rich h1 { font-size: var(--fs-h2); } .rich h2 { font-size: var(--fs-h3); } .rich h3, .rich h4 { font-size: var(--fs-h4); }
.rich ul, .rich ol { padding-left: 1.25rem; display: grid; gap: 0.35rem; }
.rich ul { list-style: disc; } .rich ol { list-style: decimal; }
.rich a { color: var(--accent); border-bottom: 1px solid currentColor; }
.rich img { border-radius: var(--radius); margin-block: 1.5rem; }
.rich blockquote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 2px solid var(--c-rose); font-family: var(--font-display); font-style: italic; font-size: var(--fs-h4); color: var(--text); }
.rich table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.rich th, .rich td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; }
.rich iframe, .rich video { max-width: 100%; }
.section-text.rich { max-width: 58ch; }
.bleed__inner .rich, .split-tall__inner .rich { font-size: var(--fs-body); }

/* ---------- Card grids (blogs, projects, jobs, feature images) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--c-nude); }
.card__media--portrait { aspect-ratio: 3 / 4; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media--icon { display: grid; place-items: center; aspect-ratio: auto; height: 120px; background: var(--c-warm); font-size: 2.2rem; color: var(--c-rose); }
.on-dark .card__media--icon { background: rgba(245, 239, 234, 0.06); color: var(--c-nude); }
.card__body { padding-top: 1.25rem; display: grid; gap: 0.5rem; align-content: start; }
.card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--c-rose); }
.on-dark .card__meta { color: var(--c-nude); }
.card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; text-wrap: balance; }
.card__title a { transition: color 0.3s var(--ease); }
.card__title a:hover { color: var(--c-rose); }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__text { font-size: var(--fs-small); color: var(--text-soft); line-height: 1.65; }
.card__foot { margin-top: auto; padding-top: 0.9rem; }
.card__foot .link { position: relative; z-index: 1; }

/* ---------- Counters (Global Counter Section) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { padding: clamp(24px, 2.6vw, 36px) clamp(16px, 2vw, 32px) 0; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__icon { font-size: 1.6rem; color: var(--c-rose); display: block; margin-bottom: 0.75rem; }
.on-dark .stat__icon { color: var(--c-nude); }
.stat__value { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 1.4rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.01em; }
.stat__value small { font-size: 0.55em; color: var(--c-rose); margin-left: 0.1em; }
.on-dark .stat__value small { color: var(--c-nude); }
.stat__label { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--text-soft); }

/* ---------- Client logos ---------- */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: center; margin-top: clamp(28px, 3vw, 44px); }
.logo-item { display: grid; place-items: center; padding: 1rem; min-height: 96px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--c-warm); transition: border-color 0.3s var(--ease); }
.logo-item:hover { border-color: var(--c-rose); }
.logo-item img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter 0.4s var(--ease), opacity 0.4s var(--ease); }
.logo-item:hover img { filter: none; opacity: 1; }
.logo-item span { font-family: var(--font-display); font-size: var(--fs-h4); }

/* ---------- Chips (keywords, blog categories, tags, service areas) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.05rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.03em; color: var(--text-soft); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
a.chip:hover, .chip.is-active { background: var(--c-brown); border-color: var(--c-brown); color: var(--c-ivory); }
.on-dark a.chip:hover, .on-dark .chip.is-active { background: var(--c-ivory); border-color: var(--c-ivory); color: var(--c-brown); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.quote { position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(24px, 2.6vw, 36px); background: var(--c-warm); border: 1px solid var(--line); border-radius: var(--radius); }
.on-dark .quote { background: rgba(245, 239, 234, 0.05); }
.quote__mark { font-size: 2rem; color: var(--c-rose); line-height: 1; }
.on-dark .quote__mark { color: var(--c-nude); }
.quote__stars { display: inline-flex; gap: 0.15rem; color: var(--c-rose); font-size: 1rem; }
.on-dark .quote__stars { color: var(--c-nude); }
.quote__text { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h4); line-height: 1.4; color: var(--text); }
.quote__author { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.quote__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--c-nude); }
.quote__name { font-weight: 500; font-size: var(--fs-small); }
.quote__role { font-size: var(--fs-label); color: var(--text-soft); }

/* ---------- Pricing (packages) ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); background: var(--c-warm); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.plan:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(43, 36, 34, 0.12); }
.plan--featured { background: var(--c-brown); color: var(--c-ivory); --text: var(--c-ivory); --text-soft: rgba(245, 239, 234, 0.74); --line: rgba(245, 239, 234, 0.16); --line-strong: rgba(245, 239, 234, 0.4); --accent: var(--c-nude); }
.plan__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; }
.plan__sub { margin-top: 0.4rem; font-size: var(--fs-small); color: var(--text-soft); }
.plan__price { margin-top: 1.5rem; display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1; }
.plan__price small { font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--text-soft); }
.plan__price del { font-size: 0.5em; color: var(--text-soft); font-weight: 400; }
.plan__features { margin-top: 1.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.plan__features li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.5; }
.plan__features i { color: var(--accent); font-size: 1.1rem; margin-top: 0.1rem; }
.plan .btn { margin-top: 1.75rem; width: 100%; }

/* ---------- Numbered steps (procedures) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); counter-reset: step; }
.step { position: relative; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); counter-increment: step; }
.step__num { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; color: var(--c-rose); margin-bottom: 0.75rem; }
.step__num::before { content: counter(step, decimal-leading-zero); }
.on-dark .step__num { color: var(--c-nude); }
.step__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--c-nude); margin-bottom: 1rem; }
.step__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.step h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 0.4rem; }
.step p { font-size: var(--fs-small); color: var(--text-soft); line-height: 1.6; }

/* ---------- Text columns (Text Section) ---------- */
.textblocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.textblock { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.textblock h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 0.6rem; }

/* ---------- Article (blog detail) ---------- */
.article { max-width: 820px; margin-inline: auto; }
.article__hero { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--c-nude); margin-bottom: clamp(28px, 3vw, 44px); }
.article__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article__lead { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h4); line-height: 1.4; color: var(--text); margin-bottom: 1.5rem; }
.article__section { margin-top: clamp(32px, 3.5vw, 48px); }
.article__section h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 0.75rem; }
.article__section .kicker { margin-bottom: 0.5rem; }
.article__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-nude); margin: 1.25rem 0; }
.article__media img { width: 100%; height: auto; }
.article__quote { margin: clamp(32px, 3.5vw, 48px) 0; padding: clamp(24px, 2.6vw, 36px); background: var(--c-ivory); border-left: 2px solid var(--c-rose); border-radius: var(--radius); }
.article__quote blockquote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-statement); line-height: 1.3; }
.article__quote figcaption { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-small); color: var(--text-soft); }
.article__quote figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article__cta { margin: clamp(32px, 3.5vw, 48px) 0; padding: clamp(28px, 3vw, 44px); border-radius: var(--radius); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
.article__cta .section-title { font-size: var(--fs-h3); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: clamp(40px, 4.5vw, 64px); padding-top: 1.75rem; border-top: 1px solid var(--line); }
.pager__item { display: grid; gap: 0.35rem; }
.pager__item--next { text-align: right; justify-items: end; }
.pager__label { font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--c-rose); }
.pager__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: 1.2; transition: color 0.3s var(--ease); }
.pager__item:hover .pager__title { color: var(--c-rose); }

/* ---------- Job detail ---------- */
.job__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.job__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin-bottom: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--line); }
.job__facts div { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.job__facts dt { font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--text-soft); }
.job__facts dd { font-weight: 500; font-size: var(--fs-small); margin-top: 0.15rem; }
.job__section + .job__section { margin-top: clamp(24px, 2.6vw, 36px); }
.job__section h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 0.6rem; }
.job__aside { position: sticky; top: 96px; }

/* ---------- Project detail ---------- */
.project__facts { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-size: var(--fs-small); color: var(--text-soft); margin-top: 1rem; }
.project__facts strong { color: var(--text); font-weight: 500; }
.project__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.project__block { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.project__block h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 0.6rem; }

/* ---------- Thank-you / status pages ---------- */
.status-card { max-width: 720px; margin-inline: auto; padding: clamp(32px, 4vw, 64px); background: var(--c-warm); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; display: grid; justify-items: center; }
.status-card .section-title { margin-inline: auto; }
.status-card .section-text { text-align: center; margin-inline: auto; }
.status-card__icon { font-size: 3rem; color: var(--c-rose); margin-bottom: 1rem; }
.status-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem 2rem; width: 100%; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--fs-small); text-align: left; }
.status-card__facts dt { font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--text-soft); }
.status-card__facts dd { font-weight: 500; margin-top: 0.15rem; }
.status-card .actions { justify-content: center; }

/* ---------- Misc ---------- */
.empty { color: var(--text-soft); font-size: var(--fs-small); text-align: center; padding: 2rem 0; }
.page-banner--plain { min-height: clamp(220px, 24vw, 320px); }
.section--flush-top { padding-top: 0; }
.list-lines .icon-img { margin-right: 0.5rem; }
.list-icons li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.list-icons li i, .list-icons li .icon-img { color: var(--c-rose); font-size: 1.15rem; margin-top: 0.15rem; }
.on-dark .list-icons li i { color: var(--c-nude); }
.list-icons li strong { display: block; font-weight: 500; }
.list-icons li span { display: block; font-size: var(--fs-label); color: var(--text-soft); }
.area-list { column-count: 3; column-gap: 2rem; }
.area-list li { break-inside: avoid; }
.section-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.section-grid > .section-head--left { margin-bottom: 0; }
.tile__img--placeholder { background: linear-gradient(160deg, var(--c-nude), var(--c-rose)); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .cards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cards, .cards--4, .quotes, .plans, .steps, .project__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section-head--split, .section-grid, .job__grid { grid-template-columns: 1fr; }
  .job__aside { position: static; }
  .area-list { column-count: 2; }
  .article__cta { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .cards, .cards--2, .cards--4, .quotes, .plans, .steps, .textblocks, .project__grid, .pager, .job__facts { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding-left: 0 !important; border-left: 0 !important; }
  .stat:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-list { column-count: 1; }
  .pager__item--next { text-align: left; justify-items: start; }
  .brand__logo { max-width: 130px; max-height: 38px; }
}

/* Touch devices: dropdown opened by cms.js on first tap */
.nav__item--has-sub.is-open .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Hidden notices stay hidden despite display:grid */
.notice[hidden] { display: none; }

/* Uploaded image icons inside the facts band */
.fact .icon-img { display: block; width: 1.6rem; height: 1.6rem; margin-bottom: 1rem; }

/* Values band with fewer than four CMS items (theme default is four); tablet/mobile rules from styles.css still apply */
.values--1 { grid-template-columns: 1fr; }
.values--2 { grid-template-columns: repeat(2, 1fr); }
.values--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .values--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .values--2, .values--3 { grid-template-columns: 1fr 1fr; } }

/* Philosophy flow strip: uploaded icons and fewer than four steps */
.flow__step .icon-img { width: 1.5rem; height: 1.5rem; flex: none; }
.flow--1 { grid-template-columns: 1fr; }
.flow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .flow--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pillars with fewer than four CMS items; tablet/mobile rules from styles.css still apply */
.pillars--1 { grid-template-columns: 1fr; }
.pillars--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pillars--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pillars--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pillars--2, .pillars--3 { grid-template-columns: 1fr; } }
.pillar .icon-img.pillar__icon { width: 1.6rem; height: 1.6rem; }

/* Mission blocks: uploaded icons */
.mission__block .icon-img.mission__icon { width: 1.6rem; height: 1.6rem; margin-top: 0.2rem; }

/* Info Block style 9 (who we work with): uploaded icons sit like the Phosphor glyphs */
.audience__item .icon-img { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; object-fit: contain; }