/* _layouts.css — ACF Flexible Content pod layout styles Ported 1:1 from the reference theme's class/data-attribute structure for the 18 kept Content Pods. All colour comes from custom properties, so the warm Childhood Matters palette (navy / orange / yellow / cream) applies automatically — no JM Reidys hex values remain anywhere in this file. ============================================================================ */ /* ── Legacy / Heritage — dark 2-column layout ───────────────────────────── */ .layout-legacy__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; } /* ── Content Layout ratio modifiers ──────────────────────────────────────── */ .layout-legacy--50-50 .layout-legacy__inner { grid-template-columns: 50fr 50fr; } .layout-legacy--60-40 .layout-legacy__inner { grid-template-columns: 60fr 40fr; } .layout-legacy--40-60 .layout-legacy__inner { grid-template-columns: 40fr 60fr; } .layout-legacy--70-30 .layout-legacy__inner { grid-template-columns: 70fr 30fr; } .layout-legacy--30-70 .layout-legacy__inner { grid-template-columns: 30fr 70fr; } .layout-legacy--80-20 .layout-legacy__inner { grid-template-columns: 80fr 20fr; } .layout-legacy--20-80 .layout-legacy__inner { grid-template-columns: 20fr 80fr; } .layout-legacy__col1 { display: flex; flex-direction: column; gap: var(--space-6); } .layout-legacy .eyebrow { color: var(--color-accent); } .layout-legacy__title { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; max-width: 22ch; } .layout-legacy__col1-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 38 / 39; } .layout-legacy__col1-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .layout-legacy__col2 { display: flex; flex-direction: column; gap: var(--space-8); } .layout-legacy__images { display: flex; gap: var(--space-4); align-items: flex-start; } .layout-legacy__img { flex: 1; border-radius: var(--radius); overflow: hidden; } .layout-legacy__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .layout-legacy__img--a { margin-top: var(--space-12); } .layout-legacy__body { color: color-mix(in srgb, currentColor 75%, transparent); font-size: var(--text-md); line-height: 1.75; } .layout-legacy__body p, .layout-legacy__body li { color: color-mix(in srgb, currentColor 75%, transparent); } .layout-legacy__cta { margin-top: var(--space-2); } @media (max-width: 900px) { .layout-legacy__inner, .layout-legacy--50-50 .layout-legacy__inner, .layout-legacy--60-40 .layout-legacy__inner, .layout-legacy--40-60 .layout-legacy__inner, .layout-legacy--70-30 .layout-legacy__inner, .layout-legacy--30-70 .layout-legacy__inner, .layout-legacy--80-20 .layout-legacy__inner, .layout-legacy--20-80 .layout-legacy__inner { grid-template-columns: 1fr; gap: var(--space-10); } .layout-legacy__img--b { margin-top: var(--space-6); } } @media (max-width: 500px) { .layout-legacy__images { flex-direction: column; } .layout-legacy__img--b { margin-top: 0; } } /* ── Questions / FAQ ─────────────────────────────────────────────────────── */ .layout-faq__inner { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-20); align-items: start; } .layout-faq__col-left { position: sticky; top: calc(var(--nav-height) + var(--space-8)); } .layout-faq__title { font-family: var(--font-heading); font-size: clamp(var(--text-4xl), 7vw, var(--text-5xl)); font-weight: 500; line-height: 1.05; margin-bottom: var(--space-6); } .layout-faq__intro { font-size: var(--text-base); color: color-mix(in srgb, currentColor 65%, transparent); line-height: 1.75; max-width: 36ch; margin-bottom: var(--space-8); } .layout-faq__items { display: flex; flex-direction: column; } .layout-faq__item > summary { list-style: none; } .layout-faq__item > summary::-webkit-details-marker { display: none; } .layout-faq__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; user-select: none; } .layout-faq__question { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; line-height: 1.4; } .layout-faq__icon-svg { flex-shrink: 0; transition: transform 300ms ease; color: var(--color-accent); } .layout-faq__body { overflow: hidden; } .layout-faq__answer { font-size: var(--text-base); color: color-mix(in srgb, currentColor 65%, transparent); line-height: 1.75; } .layout-faq__answer p:first-child { margin-top: 0; } .layout-faq__answer p:last-child { margin-bottom: 0; } /* ── Style: Minimal ──────────────────────────────────────────────────────── */ .layout-faq__items--minimal .layout-faq__item { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); padding-block: var(--space-7); } .layout-faq__items--minimal .layout-faq__item:first-child { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); } .layout-faq__items--minimal .layout-faq__answer { margin-top: var(--space-4); } .layout-faq__items--minimal .layout-faq__item.is-open .layout-faq__icon-svg { transform: rotate(180deg); } /* ── Style: Boxed ────────────────────────────────────────────────────────── */ .layout-faq__items--boxed { gap: var(--space-4); } .layout-faq__items--boxed .layout-faq__item { border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: var(--radius); padding: var(--space-6); } .layout-faq__items--boxed .layout-faq__answer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); } .layout-faq__items--boxed .layout-faq__item.is-open .layout-faq__icon-svg { transform: rotate(45deg); } /* ── Style: Cards ────────────────────────────────────────────────────────── */ .layout-faq__items--cards { gap: var(--space-3); } .layout-faq__items--cards .layout-faq__item { border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--radius); background: color-mix(in srgb, currentColor 4%, transparent); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-sm); } .layout-faq__items--cards .layout-faq__answer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); } .layout-faq__items--cards .layout-faq__item.is-open .layout-faq__icon-svg { transform: rotate(45deg); } @media (max-width: 900px) { .layout-faq__inner { grid-template-columns: 1fr; gap: var(--space-10); } .layout-faq__col-left { position: static; } } @media (max-width: 640px) { .layout-faq__title { font-size: clamp(var(--text-3xl), 12vw, var(--text-4xl)); } } /* ── Feature Highlights ──────────────────────────────────────────────────── */ .layout-features__upper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: start; margin-bottom: var(--space-20); } /* ── Content Layout ratio modifiers (Split-header + Left-title variants) ─── */ .layout-features--50-50 .layout-features__upper, .layout-features--50-50 .layout-features__split { grid-template-columns: 50fr 50fr; } .layout-features--60-40 .layout-features__upper, .layout-features--60-40 .layout-features__split { grid-template-columns: 60fr 40fr; } .layout-features--40-60 .layout-features__upper, .layout-features--40-60 .layout-features__split { grid-template-columns: 40fr 60fr; } .layout-features--70-30 .layout-features__upper, .layout-features--70-30 .layout-features__split { grid-template-columns: 70fr 30fr; } .layout-features--30-70 .layout-features__upper, .layout-features--30-70 .layout-features__split { grid-template-columns: 30fr 70fr; } .layout-features--80-20 .layout-features__upper, .layout-features--80-20 .layout-features__split { grid-template-columns: 80fr 20fr; } .layout-features--20-80 .layout-features__upper, .layout-features--20-80 .layout-features__split { grid-template-columns: 20fr 80fr; } .layout-features__heading { display: flex; flex-direction: column; gap: var(--space-4); } .layout-features__heading .eyebrow { color: var(--color-accent); } .layout-features__title { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } .layout-features__body { display: flex; flex-direction: column; gap: var(--space-6); padding-top: 0; } .layout-features__desc { font-size: var(--text-md); color: color-mix(in srgb, currentColor 90%, transparent); line-height: 1.5; } .layout-features__desc p { margin: 0 0 var(--space-4); } .layout-features__desc p:last-child { margin-bottom: 0; } .layout-features__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; } .layout-features__ctas .btn--primary { color: var(--color-white) !important; } .layout-features__ctas .btn--outline { border-color: var(--offwhite-border); color: inherit !important; } .h1-size h2 { font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl)) !important; } .h4-size h2 { font-size: var(--space-11) !important; } .hero--layout-full.text-center .hero__title { max-width: 100%; } .full-heading h2 { max-width: 100%; } .video-ratio .ev-cv__video-poster { aspect-ratio: 77 / 80; } .landscape .ev-cv__video-poster { aspect-ratio: 16 / 9; } .offwhite p { color: color-mix(in srgb, currentColor 70%, transparent); } .layout-features__ctas .btn--outline:hover, .layout-features__ctas .btn--outline:focus-visible { background-color: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; color: inherit !important; } .layout-features__strip { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--space-12); border-top: 1px solid var(--color-border); } .layout-features__strip[data-count="1"] { grid-template-columns: 1fr; } .layout-features__strip[data-count="2"] { grid-template-columns: repeat(2, 1fr); } .layout-features__strip[data-count="3"], .layout-features__strip[data-count="6"] { grid-template-columns: repeat(3, 1fr); } .layout-features__strip[data-count="4"] { grid-template-columns: repeat(4, 1fr); } .layout-features__strip[data-count="5"] { grid-template-columns: repeat(5, 1fr); } /* No horizontal padding: every column (and therefore every image) is exactly the same width, and the first/last images sit flush to the container edges. Column spacing comes from the grid gap; the divider is drawn in that gap. */ .layout-features__item { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-8); } /* Vertical divider line centred in the column gap (Figma). */ .layout-features__item + .layout-features__item::before { content: ""; position: absolute; top: var(--space-8); bottom: 0; left: calc(var(--space-12) / -2); width: 1px; background: var(--color-border); } /* feature_icon renders as a full-width rounded image, not a small icon. */ .layout-features__item-icon { width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--space-2); border-radius: var(--radius-xl); overflow: hidden; flex-shrink: 0; } .layout-features__item-icon img { /* width: 100%; */ height: 100%; object-fit: cover; display: block; } .layout-features__item-title { color: inherit; font-family: var(--font-heading); font-size: 1.5625rem !important; font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 10px !important; } section.text-center .layout-features__item.layout-features__item--icon { align-items: center; } .layout-features.border-box .layout-features__item { padding: 24px; border-radius: 16px; border: 1px solid var(--light-border); .layout-features__item-title { margin-bottom: 0 !important; } } .layout-features__item-desc { color: inherit; font-size: var(--text-base); line-height: 1.5; } .layout-features__item-desc p { margin: 0; } /* Clamp long item descriptions to a few lines + "Show more/less" toggle (opt-in via features_clamp_desc) instead of letting card heights sprawl. */ .layout-features__item-desc--clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .layout-features__item.is-expanded .layout-features__item-desc--clamp { display: block; -webkit-line-clamp: unset; overflow: visible; } .layout-features__item-toggle { align-self: flex-start; margin-top: var(--space-2); padding: 0; background: none; border: none; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); cursor: pointer; } .layout-features__item-toggle:hover { text-decoration-color: currentColor; } .layout-features__item-toggle[hidden] { display: none; } .layout-features__item-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); } .layout-features__item-link:hover { text-decoration-color: currentColor; } .accent-dark { background-color: var(--color-primary-light); } @media (max-width: 900px) { .layout-features__upper, .layout-features--50-50 .layout-features__upper, .layout-features--60-40 .layout-features__upper, .layout-features--40-60 .layout-features__upper, .layout-features--70-30 .layout-features__upper, .layout-features--30-70 .layout-features__upper, .layout-features--80-20 .layout-features__upper, .layout-features--20-80 .layout-features__upper { grid-template-columns: 1fr; gap: var(--space-8); margin-bottom: var(--space-12); } .layout-features__strip[data-count] { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); } .layout-features__item { padding: var(--space-8) 0 0; } .layout-features__item + .layout-features__item::before { display: none; } .layout-features__body { padding-top: 0; } } @media (max-width: 540px) { .layout-features__strip[data-count] { grid-template-columns: 1fr; gap: var(--space-8); } } section.dark.layout-features--split-icon .layout-features__heading .eyebrow { color: var(--color-accent); } /* ── Feature Highlights: centered + stacked + split-icon variants ────────── */ /* Base header (stacked variant): left-aligned, sits on top of the icon grid. */ .layout-features__header { max-width: 760px; margin: 0 0 var(--space-14); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; text-align: left; } .layout-features__header .eyebrow { color: var(--color-accent); } /* Centered header above the grid. */ .layout-features__header--center { max-width: 720px; margin: 0 auto var(--space-14); text-align: center; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; } .layout-features__header--center .eyebrow { color: var(--color-accent); } /* Left title column + items on the right. */ .layout-features__split { display: grid; grid-template-columns: 380px 1fr; gap: var(--space-20); align-items: start; } .layout-features__split .layout-features__heading { gap: var(--space-5); } .layout-features__split .layout-features__ctas { margin-top: var(--space-2); } /* Icon items: small icon, no dividers, no top border, gap-based grid. */ .layout-features__strip--icon { border-top: 0; column-gap: var(--space-12); row-gap: var(--space-16); } .layout-features__item--icon { padding-top: 0; gap: var(--space-3); } .layout-features__item--icon + .layout-features__item--icon::before { display: none; } .layout-features__strip--icon .layout-features__item-icon { width: 48px; height: 48px; aspect-ratio: auto; border-radius: 0; margin-bottom: var(--space-2); } .layout-features__strip--icon .layout-features__item-icon img { width: 100%; height: 100%; object-fit: contain; } .layout-features--centered .layout-features__ctas { justify-content: center; margin-top: var(--space-12); } /* In the split-icon layout the items sit in the narrower right column, so use an explicit column count per item count (2x2 for 4 items, 3x2 for 6, etc.) rather than the flat single-row data-count rules above. */ .layout-features--split-icon .layout-features__strip[data-count] { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .layout-features--split-icon .layout-features__strip[data-count="4"] { grid-template-columns: repeat(2, 1fr); } .layout-features--split-icon .layout-features__strip[data-count="6"] { grid-template-columns: repeat(3, 1fr); } .layout-features__strip[data-count="5"] { column-gap: var(--space-8); } .team-minimal .dcb-card-team .dcb-card-title { font-family: var(--font-body); font-size: var(--text-md); font-style: normal; font-weight: 600; } .layout-features-left .layout-features__header--center { text-align: left !important; margin-left: 0; align-items: baseline; } .contain-img .hero-story__wide img { aspect-ratio: auto; object-fit: contain; } .white { .layout-dgrid__title, .layout-dgrid__intro { color: var(--color-text); } } /* split-icon: title column stacks above the grid on smaller screens. */ @media (max-width: 900px) { .layout-features__split, .layout-features--50-50 .layout-features__split, .layout-features--60-40 .layout-features__split, .layout-features--40-60 .layout-features__split, .layout-features--70-30 .layout-features__split, .layout-features--30-70 .layout-features__split, .layout-features--80-20 .layout-features__split, .layout-features--20-80 .layout-features__split { grid-template-columns: 1fr; gap: var(--space-10); } } /* ── Video pod ────────────────────────────────────────────────────────────── */ .layout-video__header { text-align: center; max-width: 75ch; margin-inline: auto; margin-bottom: var(--space-10); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .layout-video__header .eyebrow { color: var(--color-accent); } .layout-video__heading { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; } .layout-video__desc { font-size: var(--text-md); line-height: 1.75; } /* ── Content — Two Column pod ─────────────────────────────────────────────── */ .layout-split__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; } .layout-split__heading { display: flex; flex-direction: column; gap: var(--space-4); } .layout-split__icon { width: 48px; height: 48px; margin-bottom: var(--space-2); } .layout-split__icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .layout-split__heading .eyebrow { color: var(--color-accent); } .layout-split__title { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; max-width: 18ch; } .layout-split__body { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-2); } .layout-split__desc p { margin: 0 0 var(--space-4); } .layout-split__desc p:last-child { margin-bottom: 0; } .layout-split__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; } .layout-split__ctas .btn--outline { color: inherit !important; } /* ── Content Layout ratio modifiers ──────────────────────────────────────── */ .layout-split--50-50 .layout-split__inner { grid-template-columns: 50fr 50fr; } .layout-split--60-40 .layout-split__inner { grid-template-columns: 60fr 40fr; } .layout-split--40-60 .layout-split__inner { grid-template-columns: 40fr 60fr; } .layout-split--70-30 .layout-split__inner { grid-template-columns: 70fr 30fr; } .layout-split--30-70 .layout-split__inner { grid-template-columns: 30fr 70fr; } .layout-split--80-20 .layout-split__inner { grid-template-columns: 80fr 20fr; } .layout-split--20-80 .layout-split__inner { grid-template-columns: 20fr 80fr; } @media (max-width: 900px) { .layout-split__inner, .layout-split--50-50 .layout-split__inner, .layout-split--60-40 .layout-split__inner, .layout-split--40-60 .layout-split__inner, .layout-split--70-30 .layout-split__inner, .layout-split--30-70 .layout-split__inner, .layout-split--80-20 .layout-split__inner, .layout-split--20-80 .layout-split__inner { grid-template-columns: 1fr; gap: var(--space-8); } .layout-split__title { max-width: none; } .layout-split__body { padding-top: 0; } } /* ── Dynamic Grid pod ─────────────────────────────────────────────────────── */ .layout-dgrid__header { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; text-align: left; max-width: 768px; margin-bottom: var(--space-20); } .layout-dgrid__heading { display: flex; flex-direction: column; gap: var(--space-4); } .layout-dgrid__heading .eyebrow { color: var(--color-accent); } .layout-dgrid__title { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; max-width: none; } .layout-dgrid__intro { font-size: var(--text-md); line-height: 1.5; } .layout-dgrid__intro p { margin: 0 0 var(--space-4); } .layout-dgrid__intro p:last-child { margin-bottom: 0; } /* Optional section button below the grid. */ .layout-dgrid__actions { display: flex; justify-content: flex-start; margin-top: var(--space-20); } /* Centred variant (add "text-center" to the pod Classes field) — e.g. Blog/Research grid. */ .layout-dgrid.text-center .layout-dgrid__header, .layout-dgrid__header--center { align-items: center; text-align: center; margin-inline: auto; } .layout-dgrid.text-center .layout-dgrid__actions { justify-content: center; } /* Centred footer call-out below the grid (e.g. Leadership "We're hiring!"). */ .layout-dgrid__foot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); max-width: 640px; margin: var(--space-16) auto 0; } .layout-dgrid__foot-heading { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0; } .layout-dgrid__foot-text { font-size: var(--text-md); line-height: 1.5; } .layout-dgrid__foot .layout-dgrid__actions { justify-content: center; margin-top: var(--space-5); } /* Split variant: title column on the left, cards grid on the right. */ .layout-dgrid__split { display: grid; grid-template-columns: 350px 1fr; gap: var(--space-20); align-items: start; } .layout-dgrid__aside { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: var(--space-24); } .layout-dgrid__split .layout-dgrid__actions { margin-top: var(--space-2); } .layout-dgrid__split .layout-dgrid__grid { min-width: 0; } .layout-dgrid .dcb-logo-tile { padding: 0 !important; } /* ── Content Layout ratio modifiers (override the fixed-width title column) ── */ .layout-dgrid--50-50 .layout-dgrid__split { grid-template-columns: 50fr 50fr; } .layout-dgrid--60-40 .layout-dgrid__split { grid-template-columns: 60fr 40fr; } .layout-dgrid--40-60 .layout-dgrid__split { grid-template-columns: 40fr 60fr; } .layout-dgrid--70-30 .layout-dgrid__split { grid-template-columns: 70fr 30fr; } .layout-dgrid--30-70 .layout-dgrid__split { grid-template-columns: 30fr 70fr; } .layout-dgrid--80-20 .layout-dgrid__split { grid-template-columns: 80fr 20fr; } .layout-dgrid--20-80 .layout-dgrid__split { grid-template-columns: 20fr 80fr; } @media (max-width: 900px) { .layout-dgrid__split, .layout-dgrid--50-50 .layout-dgrid__split, .layout-dgrid--60-40 .layout-dgrid__split, .layout-dgrid--40-60 .layout-dgrid__split, .layout-dgrid--70-30 .layout-dgrid__split, .layout-dgrid--30-70 .layout-dgrid__split, .layout-dgrid--80-20 .layout-dgrid__split, .layout-dgrid--20-80 .layout-dgrid__split { grid-template-columns: 1fr; gap: var(--space-10); } .layout-dgrid__aside { position: static; } } @media (max-width: 900px) { .layout-dgrid__header { gap: var(--space-6); margin-bottom: var(--space-12); } .layout-dgrid__actions { margin-top: var(--space-12); } } /* ── Tabbed Showcase pod ──────────────────────────────────────────────────── */ .layout-tabbed__header { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-10); max-width: 60ch; } .layout-tabbed { background-color: var(--color-white); color: var(--color-text); } .layout-tabbed__header .eyebrow { color: var(--color-accent); } .layout-tabbed__heading { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; } .layout-tabbed__desc { color: color-mix(in srgb, currentColor 70%, transparent); font-size: var(--text-lg); line-height: 1.75; } /* ── Version 2: Stats — interactive (each stat swaps its image on the right) ── */ .layout-tabbed__panel--stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .layout-tabbed--stats .layout-tabbed__tablist { gap: var(--space-10); } .layout-tabbed--stats .layout-tabbed__tab { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; background: none; border: none; border-left: 2px solid transparent; padding-left: var(--space-5); margin-left: calc(-1 * var(--space-5)); color: inherit; cursor: pointer; transition: border-color var(--transition-base); } .layout-tabbed--stats .layout-tabbed__tab.is-active { border-left-color: var(--color-accent); } .ts-stats__value { font-family: var(--font-heading); font-size: clamp(var(--text-4xl), 5vw, 4.5rem); font-weight: 500; line-height: 1; } .ts-stats__label { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; } .ts-stats__desc { color: color-mix(in srgb, currentColor 65%, transparent); line-height: 1.6; } .layout-tabbed--stats .layout-tabbed__pane img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius); } @media (max-width: 860px) { .layout-tabbed__panel--stats, .layout-tabbed--50-50 .layout-tabbed__panel--stats, .layout-tabbed--60-40 .layout-tabbed__panel--stats, .layout-tabbed--40-60 .layout-tabbed__panel--stats, .layout-tabbed--70-30 .layout-tabbed__panel--stats, .layout-tabbed--30-70 .layout-tabbed__panel--stats, .layout-tabbed--80-20 .layout-tabbed__panel--stats, .layout-tabbed--20-80 .layout-tabbed__panel--stats { grid-template-columns: 1fr; gap: var(--space-10); } } /* 2-column panel: vertical tab list (left) + active image (right) */ .layout-tabbed__panel { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); /* align-items: start; */ } /* ── Content Layout ratio modifiers (both the Tabs and Stats panels) ────── */ .layout-tabbed--50-50 .layout-tabbed__panel, .layout-tabbed--50-50 .layout-tabbed__panel--stats { grid-template-columns: 50fr 50fr; } .layout-tabbed--60-40 .layout-tabbed__panel, .layout-tabbed--60-40 .layout-tabbed__panel--stats { grid-template-columns: 60fr 40fr; } .layout-tabbed--40-60 .layout-tabbed__panel, .layout-tabbed--40-60 .layout-tabbed__panel--stats { grid-template-columns: 40fr 60fr; } .layout-tabbed--70-30 .layout-tabbed__panel, .layout-tabbed--70-30 .layout-tabbed__panel--stats { grid-template-columns: 70fr 30fr; } .layout-tabbed--30-70 .layout-tabbed__panel, .layout-tabbed--30-70 .layout-tabbed__panel--stats { grid-template-columns: 30fr 70fr; } .layout-tabbed--80-20 .layout-tabbed__panel, .layout-tabbed--80-20 .layout-tabbed__panel--stats { grid-template-columns: 80fr 20fr; } .layout-tabbed--20-80 .layout-tabbed__panel, .layout-tabbed--20-80 .layout-tabbed__panel--stats { grid-template-columns: 20fr 80fr; } .layout-tabbed__tablist { display: flex; flex-direction: column; justify-content: center; } .layout-tabbed__item { display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-6); border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); } .layout-tabbed__item:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); } .layout-tabbed__tab { appearance: none; background: none; border: none; padding: 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: var(--space-2); color: inherit; opacity: 0.55; border-radius: 6px 6px 0 0; transition: opacity var(--transition-base); } .layout-tabbed__tab:hover { opacity: 0.85; } .layout-tabbed__tab.is-active { background-color: var(--color-highlight) !important; color: var(--color-primary); opacity: 1; } .layout-tabbed__tab-heading { font-family: var(--font-heading); font-size: var(--text-xl-plus); font-weight: 500; line-height: 1.2; } .layout-tabbed__tab-desc { font-size: var(--text-base); color: color-mix(in srgb, currentColor 70%, transparent); line-height: 1.6; } .layout-tabbed__explore { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; font-size: var(--text-sm); font-weight: 600; text-decoration: none; color: inherit !important; transition: gap var(--transition-base); } .layout-tabbed__explore:hover { gap: var(--space-2); } .layout-tabbed__media-col { position: sticky; top: calc(var(--nav-height) + var(--space-8)); display: grid; } .layout-tabbed__pane { grid-area: 1 / 1; border-radius: var(--radius); overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; } .layout-tabbed__pane.is-active { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .layout-tabbed__pane { transition: none; } } .layout-tabbed__pane img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .layout-tabbed__panel, .layout-tabbed--50-50 .layout-tabbed__panel, .layout-tabbed--60-40 .layout-tabbed__panel, .layout-tabbed--40-60 .layout-tabbed__panel, .layout-tabbed--70-30 .layout-tabbed__panel, .layout-tabbed--30-70 .layout-tabbed__panel, .layout-tabbed--80-20 .layout-tabbed__panel, .layout-tabbed--20-80 .layout-tabbed__panel { grid-template-columns: 1fr; gap: var(--space-8); } .layout-tabbed__media-col { position: static; order: -1; } } /* ── Modifier: horizontal tabs (e.g. Practice Area "Highlights") ───────────── Same [data-cm-tabs] JS, same markup shape — tabs run in a row across the top instead of a vertical list, with the active tab's content in a single full-width panel underneath instead of a side media column. */ .layout-tabbed--horizontal .layout-tabbed__panel { grid-template-columns: 1fr; gap: var(--space-8); } .layout-tabbed--horizontal .layout-tabbed__tablist { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); } .layout-tabbed--horizontal .layout-tabbed__item { border: none; padding: 0; } .layout-tabbed--horizontal .layout-tabbed__item:last-child { border: none; } .layout-tabbed--horizontal .layout-tabbed__tab { flex-direction: row; padding: var(--space-3) var(--space-5); border-radius: 6px 6px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px; } .layout-tabbed--horizontal .layout-tabbed__tab-heading { font-size: var(--text-base); font-weight: 500; text-transform: capitalize; } .layout-tabbed--horizontal .layout-tabbed__tab.is-active { border-bottom-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .layout-tabbed--horizontal .layout-tabbed__media-col { position: static; } @media (max-width: 640px) { .layout-tabbed--horizontal .layout-tabbed__tablist { gap: var(--space-1); } .layout-tabbed--horizontal .layout-tabbed__tab { padding: var(--space-2) var(--space-3); } } /* ── Icon Steps & Image pod ───────────────────────────────────────────────── */ /* Default look: navy background with cream text. The Background setting (light/dark/alt-1/alt-2) overrides the default. */ .layout-isteps { background: var(--color-primary-light); color: var(--color-text-inverse); } .layout-isteps.light { background: var(--color-bg); color: var(--color-text); } .layout-isteps.dark { background: var(--color-primary); color: var(--color-text-inverse); } .layout-isteps.alt-1 { background: var(--color-primary); color: var(--color-text-inverse); } .layout-isteps.alt-2 { background: var(--color-primary-dark); color: var(--color-text-inverse); } .layout-isteps__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .layout-isteps__content { display: flex; flex-direction: column; gap: var(--space-10); } .layout-isteps__header { display: flex; flex-direction: column; gap: var(--space-4); max-width: 55ch; } .layout-isteps__header .eyebrow { color: var(--color-highlight); } .layout-isteps__heading { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.15; } .layout-isteps__desc { color: color-mix(in srgb, currentColor 75%, transparent); font-size: var(--text-lg); line-height: 1.75; } .layout-isteps__steps { display: flex; flex-direction: column; gap: var(--space-12); } .layout-isteps__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; } .layout-isteps__icon { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .layout-isteps__icon img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .layout-isteps__step-body { display: flex; flex-direction: column; gap: var(--space-3); } .layout-isteps__step-title { font-family: var(--font-heading); font-size: var(--text-xl-plus); font-weight: 500; line-height: 1.2; margin: 0; } .layout-isteps__step-desc { color: color-mix(in srgb, currentColor 70%, transparent); font-size: var(--text-md); line-height: 1.7; } .layout-isteps__step-desc p:last-child { margin-bottom: 0; } .layout-isteps__go { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); color: inherit; font-family: var(--font-heading); font-size: var(--text-base); text-decoration: none; transition: gap var(--transition-base), color var(--transition-base); } .layout-isteps__go:hover { color: var(--color-highlight); gap: var(--space-3); } .layout-isteps__go svg { width: 18px; height: 18px; flex: 0 0 auto; } .layout-isteps__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--radius); } @media (max-width: 900px) { .layout-isteps__inner { grid-template-columns: 1fr; gap: var(--space-10); } .layout-isteps__media { order: -1; } .layout-isteps__media img { aspect-ratio: 4 / 3; } } @media (max-width: 480px) { .layout-isteps__step { grid-template-columns: 1fr; gap: var(--space-4); } } /* ── Carousel pod — reuses .sp-gallery; restore normal top padding + header ── */ .layout-carousel.sp-gallery { padding-top: var(--space-20); } .layout-carousel__header { margin-bottom: var(--space-10); } /* Service Gallery (single-cm_service.php): centered header, per Figma. */ .srv-gallery .layout-carousel__header { max-width: 60ch; margin-left: auto; margin-right: auto; text-align: center; } /* ── Timeline pod ───────────────────────────────────────────────────────── */ .timeline__header { max-width: 60ch; margin: 0 auto var(--space-14); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); } .timeline__heading { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.15; } .timeline__desc { color: color-mix(in srgb, currentColor 70%, transparent); line-height: 1.7; } .timeline__ctas { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); } .timeline__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--tl-cols, 4), 1fr); gap: var(--space-8); } .timeline__item { display: flex; flex-direction: column; align-items: center; text-align: center; } .timeline__media { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: color-mix(in srgb, currentColor 14%, transparent); } .timeline__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .timeline__node { position: relative; width: 100%; height: 14px; margin-top: var(--space-6); display: flex; align-items: center; justify-content: center; } .timeline__node::before, .timeline__node::after { content: ""; position: absolute; top: 50%; height: 1px; background: color-mix(in srgb, currentColor 45%, transparent); transform: translateY(-50%); } .timeline__node::before { left: calc(-1 * var(--space-8) / 2); right: calc(50% + 9px); } .timeline__node::after { right: calc(-1 * var(--space-8) / 2); left: calc(50% + 9px); } .timeline__item:first-child .timeline__node::before { left: 0; } .timeline__item:last-child .timeline__node::after { right: 0; } .timeline__dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); } .timeline__year { font-family: var(--font-heading); font-size: var(--text-xl-plus); font-weight: 500; margin-top: var(--space-5); } .timeline__item-desc { margin-top: var(--space-3); color: color-mix(in srgb, currentColor 70%, transparent); line-height: 1.6; } @media (max-width: 900px) { .timeline__track { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); } .timeline__node::before, .timeline__node::after { display: none; } } @media (max-width: 520px) { .timeline__track { grid-template-columns: 1fr; } } /* ── Hero — Story (Collage) ─────────────────────────────────────────────── */ .hero-story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .hero-story__content { display: flex; flex-direction: column; gap: var(--space-6); } .hero-story__heading { font-family: var(--font-heading); font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl)); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0; } .hero-story__desc { font-size: var(--text-md); line-height: 1.5; max-width: none; } .hero-story__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); } /* Collage: right column ~608 wide × 532 tall (Figma). Tall main image inset 64px l/r; a 216² square bottom-left; a 244×166 image top-right. */ .hero-story__collage { position: relative; aspect-ratio: 608 / 532; } .hero-story__img { position: absolute; border-radius: var(--radius-xl); overflow: hidden; } .hero-story__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-story__img--main { top: 0; bottom: 0; left: 10.5%; right: 10.5%; z-index: 1; } .hero-story__img--top { width: 40%; aspect-ratio: 244 / 166; top: 12%; right: 0; z-index: 3; } .hero-story__img--bottom { width: 35.5%; aspect-ratio: 1 / 1; bottom: 12%; left: 0; z-index: 2; } @media (max-width: 900px) { .hero-story--collage .hero-story__inner { grid-template-columns: 1fr; gap: var(--space-10); } .hero-story__collage { aspect-ratio: 3 / 2; } } /* ── Hero — Story: centered + image-below variants ──────────────────────── */ .hero-story--centered-collage .hero-story__inner, .hero-story--centered-image .hero-story__inner, .hero-story--split-image .hero-story__inner { display: block; } .hero-story__content--center { max-width: 820px; margin: 0 auto; text-align: center; align-items: center; } .hero-story__content--center .hero-story__desc { max-width: 620px; } .hero-story__content--center .hero-story__actions { justify-content: center; } /* Wide image below the centered/split text. */ .hero-story__wide { margin-top: var(--space-12); border-radius: var(--radius-xl); overflow: hidden; } .hero-story__wide img { width: 100%; height: auto; display: block; aspect-ratio: 1280 / 567; object-fit: cover; } /* Centered variant: full-width collage below the text (How We Help). */ .hero-story--centered-collage .hero-story__collage { aspect-ratio: 1280 / 567; margin-top: var(--space-12); } .hero-story--centered-collage .hero-story__img--main { left: 10%; right: 10%; top: 0; bottom: auto; height: 85%; } .hero-story--centered-collage .hero-story__img--top { width: 23.6%; aspect-ratio: 302 / 452; top: 20.3%; right: 0; } .hero-story--centered-collage .hero-story__img--bottom { width: 30%; aspect-ratio: 1 / 1; top: 28%; left: -1.5%; bottom: auto; } /* Split variant: heading left, text+buttons right, image below (About). */ .hero-story--split-image .hero-story__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; } .hero-story--split-image .hero-story__heading { margin: 0; } .hero-story--split-image .hero-story__split-body { display: flex; flex-direction: column; gap: var(--space-6); } @media (max-width: 900px) { .hero-story--split-image .hero-story__split { grid-template-columns: 1fr; gap: var(--space-8); } } /* ── Content — Media & Text ─────────────────────────────────────────────── */ .media-text__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .media-text--right .media-text__media { order: 2; } /* ── Content Layout ratio modifiers (left / right, as rendered) ──────────── */ .media-text--50-50 .media-text__inner { grid-template-columns: 50fr 50fr; } .media-text--60-40 .media-text__inner { grid-template-columns: 60fr 40fr; } .media-text--40-60 .media-text__inner { grid-template-columns: 40fr 60fr; } .media-text--70-30 .media-text__inner { grid-template-columns: 70fr 30fr; } .media-text--30-70 .media-text__inner { grid-template-columns: 30fr 70fr; } .media-text--80-20 .media-text__inner { grid-template-columns: 80fr 20fr; } .media-text--20-80 .media-text__inner { grid-template-columns: 20fr 80fr; } .media-text__media > img, .media-text__media .ev-cv__video-wrap { width: 100%; border-radius: var(--radius); overflow: hidden; display: block; } .media-text__media > img { height: auto; } .media-text__heading { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.15; margin-bottom: var(--space-6); } .media-text__text { color: color-mix(in srgb, currentColor 78%, transparent); line-height: 1.8; } .media-text__text p { margin: 0 0 var(--space-5); } .media-text__text p:last-child { margin-bottom: 0; } /* Optional icon above the heading + action buttons below the body. */ .media-text__icon { width: 48px; height: 48px; margin-bottom: var(--space-5); } .media-text__icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .media-text__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); } @media (max-width: 860px) { .media-text__inner, .media-text--50-50 .media-text__inner, .media-text--60-40 .media-text__inner, .media-text--40-60 .media-text__inner, .media-text--70-30 .media-text__inner, .media-text--30-70 .media-text__inner, .media-text--80-20 .media-text__inner, .media-text--20-80 .media-text__inner { grid-template-columns: 1fr; gap: var(--space-8); } .media-text--right .media-text__media { order: 0; } } /* ── CTA pod — plays nicely with the shared .section.{dark,light,alt-*} bg ── */ .ev-cta__desc { color: color-mix(in srgb, currentColor 85%, transparent); } /* Light background → dark buttons for contrast (white-on-cream is invisible). */ .ev-cta.light .btn--white { color: var(--color-primary); } .ev-cta.light .btn--outline.btn--inverse { border-color: color-mix(in srgb, currentColor 25%, transparent); } /* ── Testimonials pod (dynamic — pulls from cm_testimonial CPT) ───────────── */ .layout-reviews__header { margin-bottom: var(--space-12); display: flex; flex-direction: column; gap: var(--space-3); } .layout-reviews.text-center .layout-reviews__header { align-items: center; text-align: center; max-width: 720px; margin-inline: auto; } .layout-reviews__eyebrow { color: var(--color-secondary); } .layout-reviews__title { font-family: var(--font-display); font-size: var(--font-size-section-heading); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; } .layout-reviews__desc { color: color-mix(in srgb, currentColor 65%, transparent); font-size: var(--text-lg); line-height: 1.75; max-width: 65ch; } /* Carousel track */ .layout-reviews__track { display: flex; gap: var(--space-6); overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .layout-reviews__track::-webkit-scrollbar { display: none; } /* Cards are always on a dark section — reset colour so inner text stays legible */ .layout-reviews__card { flex: 0 0 calc((100% - 2 * var(--space-6)) / 3); scroll-snap-align: start; text-align: left; color: var(--color-white); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); box-shadow: var(--shadow-sm); } /* Carousel controls */ .layout-reviews__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-10); } .layout-reviews__btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; color: inherit; opacity: 0.6; transition: opacity var(--transition-base), background var(--transition-base), color var(--transition-base); flex-shrink: 0; padding: 0; } .layout-reviews__btn:hover:not(:disabled) { opacity: 1; background: currentColor; } .layout-reviews__btn:hover:not(:disabled) svg { stroke: var(--color-bg-dark); } .layout-reviews__btn:disabled { opacity: 0.2; cursor: default; pointer-events: none; } .layout-reviews__dots { display: flex; align-items: center; gap: var(--space-2); } .layout-reviews__dot { width: 8px; height: 8px; border-radius: 9999px; border: none; padding: 0; background: var(--color-white); opacity: 0.3; cursor: pointer; transition: opacity var(--transition-base), width var(--transition-base); } .layout-reviews__dot.is-active { opacity: 1; width: 24px; } .layout-reviews__stars { display: flex; gap: 2px; color: var(--color-highlight); } .layout-reviews__star--empty { opacity: .25; } .layout-reviews__quote { font-weight: 600; font-size: 1.375rem; line-height: 1.75; flex: 1; } .layout-reviews__quote p { margin: 0; } .layout-reviews__byline { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-border); } .layout-reviews__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .layout-reviews__avatar--placeholder { background-color: var(--color-border); } .layout-reviews__byline-text { display: flex; flex-direction: column; gap: 2px; } .layout-reviews__author { font-weight: 600; font-size: var(--text-base); } .layout-reviews__occupation { font-size: var(--text-base); color: color-mix(in srgb, currentColor 60%, transparent); } /* data-visible variants — desktop only; responsive breakpoints below take over at ≤900px */ @media (min-width: 901px) { .layout-reviews__track[data-visible="2"] .layout-reviews__card { flex: 0 0 calc((100% - var(--space-6)) / 2); } .layout-reviews__track[data-visible="4"] .layout-reviews__card { flex: 0 0 calc((100% - 3 * var(--space-6)) / 4); } } @media (max-width: 900px) { .layout-reviews__card { flex: 0 0 calc((100% - var(--space-6)) / 2); } } @media (max-width: 540px) { .layout-reviews__card { flex: 0 0 100%; } } /* ── Columns + Image pod ──────────────────────────────────────────────────── */ .layout-columns__header { text-align: center; max-width: 768px; margin-inline: auto; margin-bottom: var(--space-20); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .layout-columns__eyebrow { color: var(--color-accent); } .layout-columns__heading { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } .layout-columns__desc { color: color-mix(in srgb, currentColor 90%, transparent); font-size: var(--text-md); line-height: 1.5; margin-top: var(--space-2); } .layout-columns__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-bottom: var(--space-16); } .layout-columns__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); } .layout-columns__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); } .layout-columns__grid[data-count="5"] { grid-template-columns: repeat(5, 1fr); } .layout-columns__grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); } /* Each column is a