/*
 * ROC Design Workshop: site-wide theme variant
 *
 * Loaded by inc/enqueue.php when WPANGEL_THEME_VARIANT === 'roc'.
 * Architecture/editorial identity: white and neutral surfaces, near-black
 * type, thin neutral borders, image-led projects, restrained motion.
 * Poppins body, Space Grotesk headings; ROC page and homepage presentation.
 *
 * This file loads before GeneratePress's own stylesheet and inline CSS, so
 * GeneratePress variables and base rules are overridden with :root:root and
 * html body (one step more specific), never with !important.
 */

/* ---------------------------------------------------------------- tokens */

:root:root {
    /* ROC tokens (use these in ROC components; do not hard-code values) */
    --roc-text: #111111;
    --roc-muted: #6b6b6b;
    --roc-surface: #ffffff;
    --roc-surface-alt: #f5f5f4;
    --roc-border: #e2e2e0;
    --roc-border-strong: #111111;

    --roc-font-body: 'Poppins', 'Noto Sans Khmer', system-ui, sans-serif;
    --roc-font-heading: 'Space Grotesk', 'Poppins', 'Noto Sans Khmer', system-ui, sans-serif;

    /* Layout */
    --roc-container: 1320px;
    --roc-text-width: 46rem;
    --roc-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --roc-shell-gutter: clamp(1.25rem, 2.6vw, 2.5rem);
    --roc-sticky-offset: calc(6rem + var(--wp-admin--admin-bar--height, 0px));

    /* Spacing scale */
    --roc-space-1: 0.5rem;
    --roc-space-2: 1rem;
    --roc-space-3: 1.5rem;
    --roc-space-4: 2.5rem;
    --roc-space-5: clamp(3rem, 6vw, 5rem);
    --roc-space-6: clamp(4rem, 9vw, 8rem);

    /* Type scale (fluid; use these instead of fixed sizes) */
    --roc-fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
    --roc-lh-body: 1.7;
    --roc-fs-small: 0.875rem;
    --roc-fs-meta: 0.75rem;
    --roc-fs-nav: 0.875rem;
    --roc-h1: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
    --roc-h2: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem);
    --roc-h3: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
    --roc-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --roc-eyebrow: 0.75rem;

    /* Radii: squared images and cards, softly rounded controls and panels */
    --roc-radius-sm: 6px;
    --roc-radius-md: 12px;
    --roc-radius-pill: 999px;

    /* Project cards and images */
    --roc-card-gap: clamp(1.25rem, 2.5vw, 2.5rem);
    --roc-card-ratio: 4 / 3;
    --roc-card-title-size: 1.0625rem;
    --roc-img-bg: #ececea;

    /* Buttons */
    --roc-btn-bg: var(--roc-text);
    --roc-btn-text: #ffffff;
    --roc-btn-border: var(--roc-text);
    --roc-btn-radius: var(--roc-radius-sm);

    /* Motion (restrained): shared easing and named interaction speeds */
    --roc-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --roc-dur-fast: 150ms;
    --roc-dur: 250ms;
    --roc-dur-slow: 700ms;
    --roc-t-fast: var(--roc-dur-fast) var(--roc-ease);
    --roc-t: var(--roc-dur) var(--roc-ease);
    --roc-t-slow: var(--roc-dur-slow) var(--roc-ease);
    --roc-dur-img: 500ms;
    --roc-t-img: var(--roc-dur-img) var(--roc-ease);
    --roc-shadow-pop: 0 14px 36px rgb(0 0 0 / 0.1);

    /* Framework tokens (HSL triplets) */
    --color-background: 0 0% 100%;
    --color-surface: 0 0% 100%;
    --color-text: 0 0% 7%;
    --color-text-muted: 0 0% 42%;
    --color-border: 60 3% 88%;
    --color-muted: 60 6% 96%;
    --color-primary: 0 0% 7%;
    --color-secondary: 0 0% 42%;
    --color-accent: 0 0% 7%;
    --font-heading: var(--roc-font-heading);
    --font-body: var(--roc-font-body);
    --radius-sm: var(--roc-radius-sm);
    --radius-md: var(--roc-radius-md);
    --radius-lg: var(--roc-radius-md);
    --shadow-card: none;

    /* WP Angel header container follows the ROC container */
    --wa-header-container-width: var(--roc-container);

    /* GeneratePress palette */
    --contrast: #111111;
    --contrast-2: #3d3d3d;
    --contrast-3: #6b6b6b;
    --base: #f5f5f4;
    --base-2: #ffffff;
    --base-3: #ffffff;
    --accent: #111111;
}

/* ------------------------------------------------------------------ base */

html {
    color-scheme: light;
    background: var(--roc-surface);
}

html body {
    font-family: var(--roc-font-body);
    font-size: var(--roc-fs-body);
    line-height: var(--roc-lh-body);
    font-weight: 400;
    color: var(--roc-text);
    background: var(--roc-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .wp-block-heading {
    font-family: var(--roc-font-heading);
    font-weight: 500;
    color: var(--roc-text);
    letter-spacing: -0.015em;
    line-height: 1.15;
}

/* Gutenberg headings: framework rules such as .wp-block-heading.has-text-align-center
   switch to a mono face and a fixed size; keep the ROC scale on every level. */
html body :is(.entry-content, .site-main) :is(h1, h2, h3, h4, h5, h6).wp-block-heading {
    font-family: var(--roc-font-heading);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

html body :is(.entry-content, .site-main) h1.wp-block-heading { font-size: var(--roc-h1); }
html body :is(.entry-content, .site-main) h2.wp-block-heading { font-size: var(--roc-h2); }
html body :is(.entry-content, .site-main) h3.wp-block-heading { font-size: var(--roc-h3); }
html body :is(.entry-content, .site-main) :is(h4, h5, h6).wp-block-heading { font-size: var(--roc-h4); }

html body :is(h1, h2, h3, h4, h5, h6).has-body-font-family {
    font-family: var(--roc-font-heading);
}

html body h1 { font-size: var(--roc-h1); }
html body h2 { font-size: var(--roc-h2); }
html body h3 { font-size: var(--roc-h3); }
html body h4,
html body h5,
html body h6 { font-size: var(--roc-h4); }

html body a {
    color: var(--roc-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--roc-t-fast), opacity var(--roc-t-fast);
}

html body a:hover,
html body a:focus-visible {
    color: var(--roc-muted);
}

/* GeneratePress colours content links with its yellow accent: keep ROC links dark */
html body .inside-article a:not(.wp-block-button__link),
html body .entry-content a:not(.wp-block-button__link) {
    color: var(--roc-text);
}

html body .inside-article a:not(.wp-block-button__link):hover,
html body .entry-content a:not(.wp-block-button__link):hover {
    color: var(--roc-muted);
}

html body :focus-visible {
    outline: 2px solid var(--roc-text);
    outline-offset: 3px;
}

/* One container width for header, content and footer */
html body .grid-container {
    max-width: var(--roc-container);
}

/* Flat surfaces: no boxed white cards on grey (GeneratePress "separate containers") */
html body .separate-containers .inside-article,
html body .separate-containers .comments-area,
html body .separate-containers .page-header,
html body .one-container .container {
    background: transparent;
    box-shadow: none;
}

html body .site-content {
    display: block;
    box-sizing: border-box;
    max-width: var(--roc-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--roc-gutter);
    padding-right: var(--roc-gutter);
}

/* Interior header and base footer use the editorial container. */
html body .site-header .inside-header.grid-container,
html body .site-footer .site-info .inside-site-info {
    box-sizing: border-box;
    max-width: var(--roc-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--roc-gutter);
    padding-right: var(--roc-gutter);
}

html body .site-main .roc-hero > .wp-block-group__inner-container,
html body .site-main .roc-section > .wp-block-group__inner-container {
    padding: 0;
    max-width: none;
}

/* Homepage shell follows the viewport; editorial sections stay constrained. */
html body.roc-home .site-header .inside-header.grid-container {
    width: 100%;
    max-width: none;
    padding-inline: var(--roc-shell-gutter);
}

/* ---------------------------------------------------------- buttons/forms */

/* Primary button: Gutenberg buttons, form submits (WPForms, comments, search),
   and .roc-btn. Same radius, padding, type, hover, active and focus everywhere. */
html body .wp-block-button__link,
html body .wp-block-button .wp-block-button__link,
html body .wp-element-button,
html body button[type="submit"],
html body input[type="submit"],
html body .wpforms-container .wpforms-submit,
html body .roc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 1.75rem;
    border: 1px solid var(--roc-btn-border);
    border-radius: var(--roc-btn-radius);
    background: var(--roc-btn-bg);
    color: var(--roc-btn-text);
    box-shadow: none;
    font-family: var(--roc-font-body);
    font-size: var(--roc-fs-small);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--roc-t), color var(--roc-t), border-color var(--roc-t), transform var(--roc-t-fast);
}

html body .wp-block-button__link:hover,
html body .wp-block-button .wp-block-button__link:hover,
html body .wp-element-button:hover,
html body button[type="submit"]:hover,
html body input[type="submit"]:hover,
html body .wpforms-container .wpforms-submit:hover,
html body .roc-btn:hover {
    background: transparent;
    color: var(--roc-text);
}

html body .wp-block-button__link:active,
html body .wp-element-button:active,
html body button[type="submit"]:active,
html body input[type="submit"]:active,
html body .wpforms-container .wpforms-submit:active,
html body .roc-btn:active {
    transform: translateY(1px);
}

html body .wp-block-button__link[disabled],
html body button[type="submit"][disabled],
html body input[type="submit"][disabled],
html body .wpforms-container .wpforms-submit[disabled],
html body .roc-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary / outline */
html body .wp-block-button.is-style-outline .wp-block-button__link,
html body .roc-btn--outline {
    background: transparent;
    color: var(--roc-text);
    border: 1px solid var(--roc-text);
}

html body .wp-block-button.is-style-outline .wp-block-button__link:hover,
html body .roc-btn--outline:hover {
    background: var(--roc-text);
    color: var(--roc-btn-text);
}

/* Text-arrow link: .roc-link, or an element with the class on a Paragraph link */
html body .roc-link,
html body a.roc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--roc-fs-small);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.15rem;
}

html body .roc-link::after {
    content: "\2192";
    transition: transform var(--roc-t-fast);
}

html body .roc-link:hover::after,
html body .roc-link:focus-visible::after {
    transform: translateX(4px);
}

/* Form controls */
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="number"],
html body input[type="search"],
html body input[type="password"],
html body select,
html body textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--roc-border);
    border-radius: var(--roc-radius-sm);
    background: var(--roc-surface);
    color: var(--roc-text);
    font-family: var(--roc-font-body);
    font-size: var(--roc-fs-body);
    line-height: 1.4;
    box-shadow: none;
    transition: border-color var(--roc-t), box-shadow var(--roc-t);
}

html body input:focus,
html body select:focus,
html body textarea:focus {
    border-color: var(--roc-text);
    box-shadow: 0 0 0 3px rgb(17 17 17 / 0.08);
    outline: none;
}

html body label,
html body .wpforms-container .wpforms-field-label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--roc-font-body);
    font-size: var(--roc-fs-small);
    font-weight: 500;
    color: var(--roc-text);
}

html body .wpforms-container .wpforms-field-sublabel,
html body .wpforms-container .wpforms-field-description {
    font-size: var(--roc-fs-meta);
    color: var(--roc-muted);
}

html body .wpforms-container .wpforms-field {
    padding: 0 0 var(--roc-space-2);
}

html body .wpforms-container .wpforms-required-label {
    color: var(--roc-muted);
}

/* Validation */
html body .wpforms-container .wpforms-error,
html body .wpforms-container label.wpforms-error {
    margin-top: 0.35rem;
    font-size: var(--roc-fs-small);
    font-weight: 400;
    color: #b42318;
}

html body .wpforms-container input.wpforms-error,
html body .wpforms-container textarea.wpforms-error,
html body .wpforms-container select.wpforms-error {
    border-color: #b42318;
}

html body .wpforms-confirmation-container-full,
html body .wpforms-confirmation-container {
    padding: var(--roc-space-2) var(--roc-space-3);
    border: 1px solid var(--roc-border);
    border-radius: var(--roc-radius-md);
    background: var(--roc-surface-alt);
    color: var(--roc-text);
}

html body hr,
html body .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--roc-border);
    background: none;
}

/* ----------------------------------------------------------- header/footer */

html body .site-footer,
html body .site-info {
    background: var(--roc-surface);
    color: var(--roc-muted);
}

html body .site-footer {
    border-top: 1px solid var(--roc-border);
    margin-top: var(--roc-space-5);
}

/* The shared footer defines local tokens, so override them on its root. */
html body .angel-footer {
    --footer-bg: var(--roc-surface);
    --footer-text: var(--roc-muted);
    --footer-green: var(--roc-text);
    --footer-border: var(--roc-border);
}

html body .site-footer .site-info,
html body .site-footer .site-info .inside-site-info {
    width: 100%;
    max-width: none;
    padding: 0;
}

html body .angel-footer__container {
    width: auto;
    max-width: none;
    margin-inline: var(--roc-shell-gutter);
}

html body .angel-footer__main {
    border-top: 0;
    padding-block: var(--roc-space-3);
}

html body .angel-footer__row.grid-container {
    max-width: none;
    padding-inline: 0;
}

/* --------------------------------------------------------- page structure */

.roc-page-header {
    padding: var(--roc-space-5) 0 var(--roc-space-3);
}

.roc-page-title {
    margin: 0;
}

.roc-eyebrow {
    margin: 0 0 var(--roc-space-1);
    font-size: var(--roc-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--roc-muted);
}

.roc-eyebrow a {
    color: inherit;
    text-decoration: none;
}

.roc-page-intro {
    max-width: var(--roc-text-width);
    margin-top: var(--roc-space-2);
    color: var(--roc-muted);
}

/* ------------------------------------------------------- category filter */

.roc-filter ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--roc-space-1) var(--roc-space-3);
    margin: 0 0 var(--roc-space-4);
    padding: var(--roc-space-2) 0;
    list-style: none;
    border-top: 1px solid var(--roc-border);
    border-bottom: 1px solid var(--roc-border);
}

.roc-filter a {
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--roc-muted);
}

.roc-filter a:hover,
.roc-filter a[aria-current="page"] {
    color: var(--roc-text);
}

.roc-filter a[aria-current="page"] {
    border-bottom: 1px solid var(--roc-text);
}

.roc-filter__child a::before {
    content: "/ ";
    color: var(--roc-border);
}

/* ---------------------------------------------------------- project grid */

.roc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--roc-space-4) var(--roc-card-gap);
    margin: 0 0 var(--roc-space-5);
    padding: 0;
    list-style: none;
}

.roc-card {
    margin: 0;
}

.roc-card__link {
    display: block;
    text-decoration: none;
}

.roc-card__media {
    display: block;
    overflow: hidden;
    aspect-ratio: var(--roc-card-ratio);
    background: var(--roc-img-bg);
}

.roc-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--roc-t-img);
}

.roc-card__link:hover .roc-card__img,
.roc-card__link:focus-visible .roc-card__img {
    transform: scale(1.025);
}

.roc-card__title {
    display: block;
    margin-top: var(--roc-space-2);
    font-family: var(--roc-font-heading);
    font-size: var(--roc-card-title-size);
    font-weight: 500;
    line-height: 1.3;
    color: var(--roc-text);
}

.roc-empty {
    padding: var(--roc-space-5) 0;
    color: var(--roc-muted);
}

/* Pagination */
.roc-projects .navigation.pagination {
    margin: 0 0 var(--roc-space-5);
}

.roc-projects .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--roc-space-2);
    align-items: center;
}

.roc-projects .page-numbers {
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.roc-projects .page-numbers.current {
    border-bottom-color: var(--roc-text);
}

/* -------------------------------------------------------- single project */

.roc-project__header {
    padding: var(--roc-space-5) 0 var(--roc-space-3);
}

.roc-project__terms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--roc-space-1) var(--roc-space-2);
    margin: var(--roc-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.roc-project__terms a {
    font-size: 0.8125rem;
    color: var(--roc-muted);
    text-decoration: none;
}

.roc-project__terms li:not(:last-child)::after {
    content: "/";
    margin-left: var(--roc-space-2);
    color: var(--roc-border);
}

.roc-project__hero {
    margin: 0 0 var(--roc-space-4);
}

.roc-project__hero-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Body: text stays a readable column, media goes wide, images never overflow */
.roc-project__content {
    margin-bottom: var(--roc-space-5);
}

.roc-project__content > * {
    margin-top: 0;
    margin-bottom: var(--roc-space-3);
}

.roc-project__content > p,
.roc-project__content > h2,
.roc-project__content > h3,
.roc-project__content > h4,
.roc-project__content > ul,
.roc-project__content > ol,
.roc-project__content > blockquote,
.roc-project__content > .wp-block-file {
    max-width: var(--roc-text-width);
}

.roc-project__content p,
.roc-project__content li {
    line-height: 1.75;
    color: var(--roc-text);
}

.roc-project__content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.roc-project__content figure,
.roc-project__content .wp-block-image {
    margin-left: 0;
    margin-right: 0;
}

.roc-project__content .wp-block-image img {
    width: 100%;
}

.roc-project__content figcaption,
.roc-project__content .wp-element-caption {
    margin-top: var(--roc-space-1);
    font-size: 0.8125rem;
    color: var(--roc-muted);
    text-align: left;
}

.roc-project__content .wp-block-gallery {
    gap: var(--roc-card-gap);
}

.roc-project__content .wp-block-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.roc-project__content .wp-block-columns {
    gap: var(--roc-card-gap);
}

.roc-project__content .wp-block-media-text {
    gap: var(--roc-card-gap);
}

/* File / PDF blocks */
.roc-project__content .wp-block-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--roc-space-2);
    padding: var(--roc-space-2) 0;
    border-top: 1px solid var(--roc-border);
    border-bottom: 1px solid var(--roc-border);
}

.roc-project__content .wp-block-file object,
.roc-project__content .wp-block-file embed {
    width: 100%;
    max-width: 100%;
    min-height: 40rem;
    border: 1px solid var(--roc-border);
}

.roc-project__content .wp-block-file__button {
    margin-left: 0;
}

/* Previous / next */
.roc-project__nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--roc-space-3);
    align-items: baseline;
    padding: var(--roc-space-3) 0;
    border-top: 1px solid var(--roc-border);
    font-size: 0.9375rem;
}

.roc-project__nav a {
    text-decoration: none;
}

.roc-project__nav-next {
    text-align: right;
}

.roc-project__nav-all {
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------- navigation */

/* One header system, two states.
   Default (interior pages): light, sticky, thin border.
   Homepage over the hero: transparent, fixed, dark glass pill; it returns to the
   light state once the hero has scrolled away (.roc-past-hero, set by roc.js).
   The states only change these variables; layout and components are shared. */
html body .site-header {
    --nh-fg: var(--roc-text);
    --nh-pill-bg: rgb(255 255 255 / 0.72);
    --nh-pill-border: var(--roc-border);
    --nh-hover: var(--roc-surface-alt);
    --nh-active: var(--roc-surface-alt);
    --nh-cta-bg: var(--roc-text);
    --nh-cta-fg: #ffffff;
    --nh-cta-hover-bg: transparent;
    --nh-cta-hover-fg: var(--roc-text);
    --nh-cta-ring: var(--roc-text);
    background: rgb(255 255 255 / 0.9);
    border-bottom: 1px solid var(--roc-border);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background var(--roc-t), border-color var(--roc-t);
}

html body.roc-home .site-header {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    z-index: 100;
}

html body.roc-home:not(.roc-past-hero) .site-header {
    --nh-fg: #ffffff;
    --nh-pill-bg: rgb(20 20 20 / 0.3);
    --nh-pill-border: rgb(255 255 255 / 0.24);
    --nh-hover: rgb(255 255 255 / 0.16);
    --nh-active: rgb(255 255 255 / 0.24);
    --nh-cta-bg: #ffffff;
    --nh-cta-fg: var(--roc-text);
    --nh-cta-hover-bg: transparent;
    --nh-cta-hover-fg: #ffffff;
    --nh-cta-ring: #ffffff;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html body .site-header .main-title a,
html body .site-header .main-title a:hover {
    color: var(--nh-fg);
    font-family: var(--roc-font-heading);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color var(--roc-t);
}

html body.roc-home:not(.roc-past-hero) .site-header .main-title a {
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

html body .main-navigation,
html body .main-navigation .inside-navigation {
    background: transparent;
}

/* Keep ROC arrow geometry when using GeneratePress's native toggle hook. */
html body .site-header .main-nav .dropdown-arrow {
    padding: 0;
    height: auto;
    margin-top: 0;
}

/* Links: shared by the main list, the CTA and the dropdowns */
html body .main-navigation .main-nav ul li > a {
    font-family: var(--roc-font-body);
    font-size: var(--roc-fs-nav);
    font-weight: 500;
    line-height: 1.2;
}

@media (min-width: 769px) {
    /* Three-part grid: logo | pill | CTA. No absolute positioning: the nav is a
       grid overlaid on the header row; its wrappers use display: contents. */
    html body .site-header .inside-header.grid-container {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    html body.roc-home.roc-past-hero .site-header .inside-header.grid-container {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    html body .site-header .site-branding {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        z-index: 2;
        justify-self: start;
    }

    html body .site-header #mobile-menu-control-wrapper {
        display: none;
    }

    html body .site-header #site-navigation {
        grid-column: 1 / -1;
        grid-row: 1;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        pointer-events: none;
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        justify-self: stretch;
    }

    html body .site-header #site-navigation .inside-navigation,
    html body .site-header #site-navigation .main-nav {
        display: contents;
    }

    html body .site-header #site-navigation .menu-toggle {
        display: none;
    }

    html body .site-header #site-navigation .main-nav > ul {
        pointer-events: auto;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Centre: the navigation pill */
    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) {
        grid-column: 2;
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 4px;
        background: var(--nh-pill-bg);
        border: 1px solid var(--nh-pill-border);
        border-radius: var(--roc-radius-md);
        backdrop-filter: blur(14px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        transition: background var(--roc-t), border-color var(--roc-t);
    }

    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) > li > a {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.6rem 1rem;
        border-radius: var(--roc-radius-sm);
        color: var(--nh-fg);
        text-decoration: none;
        transition: background var(--roc-t), color var(--roc-t);
    }

    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) > li > a:hover,
    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) > li:focus-within > a,
    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) > li.sfHover > a {
        background: var(--nh-hover);
        color: var(--nh-fg);
    }

    /* Active states come from WordPress classes, independent of nav-cta */
    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) > li.current-menu-item > a,
    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) > li.current_page_item > a,
    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) > li.current-menu-ancestor > a,
    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) > li.current-menu-parent > a,
    html body .site-header #site-navigation .main-nav > ul.menu:not(.nav-cta-menu) > li.current_page_ancestor > a {
        background: var(--nh-active);
        color: var(--nh-fg);
    }

    /* Right: the CTA (any item with the nav-cta class) */
    html body .site-header #site-navigation .main-nav > ul.nav-cta-menu {
        grid-column: 3;
        justify-self: end;
        pointer-events: auto;
        gap: 0.5rem;
    }

    html body .site-header #site-navigation .nav-cta-menu > li.nav-cta > a {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.7rem 1.3rem;
        border: 1px solid var(--nh-cta-bg);
        border-radius: var(--roc-radius-sm);
        background: var(--nh-cta-bg);
        color: var(--nh-cta-fg);
        text-decoration: none;
        transition: background var(--roc-t), color var(--roc-t), border-color var(--roc-t), transform var(--roc-t-fast);
    }

    html body .site-header #site-navigation .nav-cta-menu > li.nav-cta > a:hover,
    html body .site-header #site-navigation .nav-cta-menu > li.nav-cta > a:focus-visible {
        background: var(--nh-cta-hover-bg);
        color: var(--nh-cta-hover-fg);
        border-color: var(--nh-cta-bg);
    }

    html body .site-header #site-navigation .nav-cta-menu > li.nav-cta > a:active {
        transform: translateY(1px);
    }

    /* A CTA that is also the current page: ring, not a different fill */
    html body .site-header #site-navigation .nav-cta-menu > li.nav-cta.current-menu-item > a,
    html body .site-header #site-navigation .nav-cta-menu > li.nav-cta.current_page_item > a {
        outline: 1px solid var(--nh-cta-ring);
        outline-offset: 3px;
    }

    /* Dropdown arrow beside the label */
    html body .site-header .main-nav .dropdown-arrow {
        display: inline-flex;
        align-items: center;
        opacity: 0.7;
    }

    html body .site-header .main-nav .dropdown-arrow svg {
        width: 10px;
        height: 10px;
        transition: transform var(--roc-t);
    }

    html body .site-header .main-nav li:hover > a > .dropdown-arrow svg,
    html body .site-header .main-nav li:focus-within > a > .dropdown-arrow svg,
    html body .site-header .main-nav li.sfHover > a > .dropdown-arrow svg {
        transform: rotate(180deg);
    }

    /* ----------------------------------------------------------- dropdowns */
    html body .main-navigation:not(.toggled) .main-nav ul li {
        position: relative;
    }

    html body .main-navigation:not(.toggled) .main-nav ul ul.sub-menu {
        left: 0;
        top: calc(100% + 0.5rem);
        width: auto;
        min-width: 15rem;
        height: auto;
        overflow: visible;
        padding: 0.5rem;
        background: #ffffff;
        border: 1px solid var(--roc-border);
        border-radius: var(--roc-radius-md);
        box-shadow: var(--roc-shadow-pop);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity var(--roc-t), transform var(--roc-t), visibility 0s linear var(--roc-dur);
    }

    /* keeps the pointer inside the menu while crossing the gap */
    html body .main-navigation:not(.toggled) .main-nav ul ul.sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -0.6rem;
        height: 0.6rem;
    }

    html body .main-navigation:not(.toggled) .main-nav ul li:hover > ul.sub-menu,
    html body .main-navigation:not(.toggled) .main-nav ul li:focus-within > ul.sub-menu,
    html body .main-navigation:not(.toggled) .main-nav ul li.sfHover > ul.sub-menu {
        left: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }

    /* nested submenus open to the side */
    html body .main-navigation:not(.toggled) .main-nav ul ul.sub-menu ul.sub-menu {
        top: -0.5rem;
        left: calc(100% + 0.5rem);
        transform: translateX(-6px);
    }

    html body .main-navigation:not(.toggled) .main-nav ul ul.sub-menu ul.sub-menu::before {
        left: -0.6rem;
        right: auto;
        top: 0;
        bottom: 0;
        width: 0.6rem;
        height: auto;
    }

    html body .main-navigation:not(.toggled) .main-nav ul ul.sub-menu li:hover > ul.sub-menu,
    html body .main-navigation:not(.toggled) .main-nav ul ul.sub-menu li:focus-within > ul.sub-menu,
    html body .main-navigation:not(.toggled) .main-nav ul ul.sub-menu li.sfHover > ul.sub-menu {
        left: calc(100% + 0.5rem);
        top: -0.5rem;
        transform: none;
    }

    html body .main-navigation .main-nav ul ul.sub-menu li {
        width: 100%;
    }

    html body .main-navigation .main-nav ul ul.sub-menu li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.6rem 0.85rem;
        border-radius: var(--roc-radius-sm);
        color: var(--roc-text);
        font-size: var(--roc-fs-small);
        line-height: 1.3;
        text-decoration: none;
        background: transparent;
        transition: background var(--roc-t), color var(--roc-t);
    }

    html body .main-navigation .main-nav ul ul.sub-menu li > a:hover,
    html body .main-navigation .main-nav ul ul.sub-menu li:focus-within > a,
    html body .main-navigation .main-nav ul ul.sub-menu li.sfHover > a {
        background: var(--roc-surface-alt);
        color: var(--roc-text);
    }

    html body .main-navigation .main-nav ul ul.sub-menu li.current-menu-item > a,
    html body .main-navigation .main-nav ul ul.sub-menu li.current-menu-ancestor > a,
    html body .main-navigation .main-nav ul ul.sub-menu li.current-menu-parent > a {
        background: var(--roc-surface-alt);
        font-weight: 600;
    }

    /* arrows inside dropdowns point sideways */
    html body .main-navigation .main-nav ul ul.sub-menu .dropdown-arrow svg {
        transform: rotate(-90deg);
    }

    html body .main-navigation .main-nav ul ul.sub-menu li:hover > a > .dropdown-arrow svg,
    html body .main-navigation .main-nav ul ul.sub-menu li:focus-within > a > .dropdown-arrow svg {
        transform: rotate(-90deg);
    }
}

/* ------------------------------------------------------------ mobile menu */

@media (max-width: 768px) {
    html body .site-header .inside-header.grid-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* the trigger */
    html body .site-header #mobile-menu-control-wrapper .menu-toggle,
    html body .site-header .menu-toggle {
        min-width: 2.75rem;
        min-height: 2.75rem;
        border: 1px solid var(--nh-pill-border);
        border-radius: var(--roc-radius-sm);
        background: var(--nh-pill-bg);
        color: var(--nh-fg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transition: background var(--roc-t), color var(--roc-t), border-color var(--roc-t);
    }

    html body .site-header .menu-toggle:hover {
        background: var(--nh-hover);
        color: var(--nh-fg);
    }

    /* ---- Fullscreen menu -------------------------------------------------
       The opened menu is a white overlay: brand top-left, a large close button
       top-right, oversized links centred in the remaining height, each rising
       in turn. GeneratePress still toggles `.toggled` and the submenus. */

    html body .site-header #site-navigation .roc-menu-bar {
        display: none;
    }

    html body .site-header #site-navigation.toggled {
        position: fixed;
        inset: 0;
        z-index: 9999;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding-top: var(--wp-admin--admin-bar--height, 0px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #ffffff;
        color: var(--roc-text);
        animation: roc-menu-fade var(--roc-dur) var(--roc-ease) both;
    }

    html body .site-header #site-navigation.toggled .inside-navigation {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        width: 100%;
        max-width: none;
        min-height: 100%;
        margin: 0;
        padding: 0 var(--roc-shell-gutter) 2.5rem;
        background: transparent;
    }

    /* one close control: ROC's, which clicks GeneratePress's own toggle */
    html body .site-header #site-navigation.toggled .inside-navigation > .menu-toggle {
        display: none;
    }

    /* GeneratePress hides every direct child of .inside-navigation except the
       menu while the toggle is inline; the extra class outranks that rule. */
    html body .site-header.has-inline-mobile-toggle #site-navigation.toggled .inside-navigation > .roc-menu-bar {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        min-height: 4.5rem;
        animation: roc-menu-fade var(--roc-dur) var(--roc-ease) both;
    }

    html body .site-header #site-navigation.toggled .roc-menu-brand {
        font-family: var(--roc-font-heading);
        font-size: 1.125rem;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: var(--roc-text);
        text-decoration: none;
    }

    html body .site-header #site-navigation.toggled .roc-menu-close {
        display: inline-grid;
        place-items: center;
        width: 3.5rem;
        height: 3.5rem;
        margin-right: -0.75rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--roc-text);
        cursor: pointer;
        transition: background var(--roc-t-fast);
    }

    html body .site-header #site-navigation.toggled .roc-menu-close:hover {
        background: var(--roc-surface-alt);
    }

    html body .site-header #site-navigation.toggled .roc-menu-close svg {
        width: 2.25rem;
        height: 2.25rem;
    }

    html body .site-header #site-navigation.toggled .main-nav {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-height: none;
        overflow: visible;
        padding: 1rem 0 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    html body .site-header #site-navigation.toggled .main-nav > ul {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        text-align: center;
    }

    html body .site-header #site-navigation.toggled .main-nav li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        padding: 0.3rem 0.5rem;
        border-radius: 0;
        background: transparent;
        color: var(--roc-text);
        font-family: var(--roc-font-heading);
        font-size: clamp(2.25rem, 10.5vw, 3.5rem);
        font-weight: 500;
        line-height: 1.12;
        letter-spacing: -0.025em;
        text-decoration: none;
    }

    html body .site-header #site-navigation.toggled .main-nav li > a:hover {
        color: var(--roc-muted);
    }

    html body .site-header #site-navigation.toggled .main-nav li > a:focus-visible,
    html body .site-header #site-navigation.toggled .roc-menu-close:focus-visible,
    html body .site-header #site-navigation.toggled .roc-menu-brand:focus-visible {
        outline: 2px solid var(--roc-text);
        outline-offset: 4px;
    }

    html body .site-header #site-navigation.toggled .main-nav li.current-menu-item > a,
    html body .site-header #site-navigation.toggled .main-nav li.current-menu-ancestor > a,
    html body .site-header #site-navigation.toggled .main-nav li.current-menu-parent > a {
        background: transparent;
        font-weight: 500;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.16em;
    }

    html body .site-header #site-navigation.toggled .dropdown-arrow {
        display: inline-grid;
        place-items: center;
        flex: none;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0 -1rem 0 0.15rem;
        border-radius: 50%;
        cursor: pointer;
    }

    html body .site-header #site-navigation.toggled .dropdown-arrow svg {
        width: 18px;
        height: 18px;
        transition: transform var(--roc-t);
    }

    html body .site-header #site-navigation.toggled li.sfHover > a > .dropdown-arrow svg {
        transform: rotate(180deg);
    }

    html body .site-header #site-navigation.toggled .main-nav ul ul.sub-menu {
        position: static;
        display: none;
        width: auto;
        height: auto;
        opacity: 1;
        visibility: visible;
        overflow: visible;
        margin: 0.25rem 0 0.75rem;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        pointer-events: auto;
        transform: none;
    }

    html body .site-header #site-navigation.toggled .main-nav ul ul.sub-menu.toggled-on,
    html body .site-header #site-navigation.toggled .main-nav li.sfHover > ul.sub-menu {
        display: block;
    }

    html body .site-header #site-navigation.toggled .main-nav ul ul.sub-menu li > a {
        color: var(--roc-muted);
        font-size: clamp(1.25rem, 5.6vw, 1.625rem);
        font-weight: 400;
        letter-spacing: -0.01em;
    }

    html body .site-header #site-navigation.toggled .main-nav ul ul.sub-menu ul.sub-menu li > a {
        font-size: clamp(1.0625rem, 4.6vw, 1.25rem);
    }

    html body .site-header #site-navigation.toggled .main-nav ul ul.sub-menu li > a:hover,
    html body .site-header #site-navigation.toggled .main-nav ul ul.sub-menu li.current-menu-item > a {
        color: var(--roc-text);
    }

    /* the nav-cta item reads as the last large link; its look stays ROC's */
    html body .site-header #site-navigation.toggled .main-nav > ul.nav-cta-menu {
        margin: 0;
        padding: 0;
        border: 0;
    }

    html body .site-header #site-navigation.toggled .main-nav li.nav-cta > a {
        justify-content: center;
        background: transparent;
        color: var(--roc-text);
        font-weight: 500;
    }

    html body .site-header #site-navigation.toggled .main-nav li.nav-cta.current-menu-item > a {
        outline: 0;
    }

    /* items rise in one after another (60ms apart) */
    html body .site-header #site-navigation.toggled .main-nav > ul > li {
        animation: roc-menu-rise 560ms var(--roc-ease) both;
        animation-delay: calc(140ms + var(--roc-i, 0) * 60ms);
    }

    html body .site-header #site-navigation.toggled .main-nav > ul > li:nth-child(2) { --roc-i: 1; }
    html body .site-header #site-navigation.toggled .main-nav > ul > li:nth-child(3) { --roc-i: 2; }
    html body .site-header #site-navigation.toggled .main-nav > ul > li:nth-child(4) { --roc-i: 3; }
    html body .site-header #site-navigation.toggled .main-nav > ul > li:nth-child(5) { --roc-i: 4; }
    html body .site-header #site-navigation.toggled .main-nav > ul > li:nth-child(6) { --roc-i: 5; }
    html body .site-header #site-navigation.toggled .main-nav > ul > li:nth-child(7) { --roc-i: 6; }
    html body .site-header #site-navigation.toggled .main-nav > ul > li:nth-child(8) { --roc-i: 7; }

    /* the CTA list follows the main list: continue the sequence after it */
    html body .site-header #site-navigation.toggled .main-nav > ul.nav-cta-menu > li {
        --roc-i: var(--roc-cta-i, 5);
    }

    /* fixed positioning must not be trapped by the header's backdrop blur */
    html body.roc-menu-open .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    @media (prefers-reduced-motion: reduce) {
        html body .site-header #site-navigation.toggled,
        html body .site-header #site-navigation.toggled .roc-menu-bar,
        html body .site-header #site-navigation.toggled .main-nav > ul > li {
            animation: none;
        }
    }
}

@keyframes roc-menu-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes roc-menu-rise {
    from { opacity: 0; transform: translateY(1.75rem); }
    to { opacity: 1; transform: none; }
}

/* the fullscreen close bar is mobile/tablet only */
html body .site-header .roc-menu-bar {
    display: none;
}

/* page scrolls behind an opened mobile menu */
html body.roc-menu-open,
html:has(body.roc-menu-open) {
    overflow: hidden;
}

/* -------------------------------------------------------------- homepage */

/* Hero: full-bleed architectural image, type layered over it */
html body .site-main .roc-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
    padding: 0;
    overflow: hidden;
    color: #fff;
    background: #1b211c;
    --roc-edge: var(--roc-shell-gutter);
}

html body .site-main .roc-hero > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: inherit;
    padding: 7rem var(--roc-edge) 6rem;
}

/* readability gradients, only where the type and nav sit */
.roc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgb(0 0 0 / 0.42) 0%, rgb(0 0 0 / 0) 26%),
        linear-gradient(to right, rgb(0 0 0 / 0.66) 0%, rgb(0 0 0 / 0.34) 48%, rgb(0 0 0 / 0) 82%),
        linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.1)),
        linear-gradient(to top, rgb(0 0 0 / 0.38) 0%, rgb(0 0 0 / 0) 30%);
}

.roc-hero__image,
.roc-hero__image img {
    margin: 0;
}

.roc-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

html body .roc-hero .roc-hero__image img {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
    background: #1b211c;
}

.roc-hero__content,
.roc-hero__card,
.roc-hero__scroll {
    position: relative;
    z-index: 2;
}

html body .roc-hero__title {
    max-width: 13ch;
    margin: 0 0 var(--roc-space-3);
    font-size: clamp(2.6rem, 7.4vw, 7rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: #fff;
    text-wrap: balance;
}

/* quiet second tone for the key phrase, same typeface */
.roc-hero__title em {
    font-style: normal;
    color: rgb(255 255 255 / 0.74);
}

.roc-hero__lead {
    margin: 0 0 var(--roc-space-3);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5;
    color: rgb(255 255 255 / 0.9);
}

.roc-hero .wp-block-buttons {
    margin: 0;
}

html body .roc-hero .wp-block-button .wp-block-button__link {
    background: #fff;
    color: var(--roc-text);
    border: 1px solid #fff;
    padding: 1rem 2rem;
}

html body .roc-hero .wp-block-button .wp-block-button__link::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.75rem;
    transition: transform var(--roc-t-fast);
}

html body .roc-hero .wp-block-button .wp-block-button__link:hover {
    background: transparent;
    color: #fff;
}

html body .roc-hero .wp-block-button .wp-block-button__link:hover::after {
    transform: translateX(4px);
}

/* ( Scroll ) cue and featured-project note */
.roc-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
}

html body .inside-article .roc-hero__scroll a,
html body .inside-article .roc-hero__card a {
    color: #fff;
    text-decoration: none;
}

.roc-hero__card {
    position: absolute;
    right: var(--roc-edge);
    bottom: 1.5rem;
    min-width: 14rem;
    padding: 0.9rem 1.1rem;
    background: rgb(20 20 20 / 0.3);
    border: 1px solid rgb(255 255 255 / 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html body .site-main .roc-hero__card > .wp-block-group__inner-container {
    padding: 0;
    max-width: none;
}

.roc-hero__card p {
    margin: 0;
}

/* The card can hold a small preview image (added in the editor) */
.roc-hero__card {
    width: 15rem;
    padding: 0.5rem 0.5rem 0.9rem;
    border-radius: var(--roc-radius-md);
}

.roc-hero__card .wp-block-image {
    overflow: hidden;
    border-radius: var(--roc-radius-sm);
    margin: 0 0 0.75rem;
}

.roc-hero__card .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    transition: transform var(--roc-t-slow);
    object-fit: cover;
    border-radius: var(--roc-radius-sm);
}

.roc-hero__card-label,
.roc-hero__card-title {
    padding: 0 0.5rem;
}

.roc-hero__card-label {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.7);
}

.roc-hero__card-title {
    margin-top: 0.2rem;
    font-family: var(--roc-font-heading);
    font-size: 1.0625rem;
}

.roc-hero__card-title a::after {
    content: "\2192";
    margin-left: 0.6rem;
    display: inline-block;
    transition: transform var(--roc-t-fast);
}

.roc-hero__card:hover .roc-hero__card-title a::after,
.roc-hero__card:focus-within .roc-hero__card-title a::after {
    transform: translateX(4px);
}

.roc-hero__card {
    transition: border-color var(--roc-t), background var(--roc-t);
}

.roc-hero__card:hover,
.roc-hero__card:focus-within {
    border-color: rgb(255 255 255 / 0.5);
    background: rgb(20 20 20 / 0.4);
}

.roc-hero__card:hover .wp-block-image img,
.roc-hero__card:focus-within .wp-block-image img {
    transform: scale(1.035);
}

/* Restrained reveal; the image itself only settles, so LCP is not delayed */
@keyframes roc-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes roc-settle {
    from { transform: scale(1.04); }
    to   { transform: scale(1); }
}

.roc-hero__image img {
    animation: roc-settle calc(var(--roc-dur-slow) * 2.2) var(--roc-ease) both;
}

.roc-hero__title,
.roc-hero__lead,
.roc-hero .wp-block-buttons,
.roc-hero__card {
    animation: roc-rise var(--roc-dur-slow) var(--roc-ease) both;
}

.roc-hero__lead { animation-delay: 0.12s; }
.roc-hero .wp-block-buttons { animation-delay: 0.22s; }
.roc-hero__card { animation-delay: 0.4s; }

/* Sections */
.roc-section {
    padding: var(--roc-space-5) 0;
    border-top: 1px solid var(--roc-border);
}

html body .roc-section__title {
    margin: 0 0 var(--roc-space-1);
    font-size: var(--roc-h2);
}

.roc-section__intro {
    margin: 0 0 var(--roc-space-4);
    color: var(--roc-muted);
}

.roc-section__more {
    margin-top: var(--roc-space-4);
}

/* Selected projects: the Portfolio block, skinned to match the Projects grid */
.roc-selected .wpangel-portfolio,
.roc-selected .phearum-block-container {
    padding: 0;
    margin: 0;
    max-width: none;
    background: none;
}

/* Editorial rhythm: 7/5, 5/7, 7/5 across a 12-column grid. DOM order stays the
   selected order (1 to 6); large images are 3:2, supporting ones are square. */
.roc-selected .phearum-portfolio-grid .phearum-portfolio-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--roc-space-5) var(--roc-card-gap);
    align-items: stretch;
    counter-reset: roc-project;
}

.roc-selected .phearum-portfolio-item {
    counter-increment: roc-project;
    grid-column: span 5;
}

.roc-selected .phearum-portfolio-item:nth-child(1),
.roc-selected .phearum-portfolio-item:nth-child(4),
.roc-selected .phearum-portfolio-item:nth-child(5) {
    grid-column: span 7;
}

.roc-selected .phearum-portfolio-item:nth-child(1) .phearum-portfolio-image,
.roc-selected .phearum-portfolio-item:nth-child(4) .phearum-portfolio-image,
.roc-selected .phearum-portfolio-item:nth-child(5) .phearum-portfolio-image {
    aspect-ratio: 3 / 2;
}

/* Supporting images fill the row height set by the large neighbour (equal rows) */
.roc-selected .phearum-portfolio-item {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: auto;
}

.roc-selected .phearum-portfolio-item .phearum-portfolio-image {
    flex: 0 0 auto;
}

.roc-selected .phearum-portfolio-item:nth-child(2) .phearum-portfolio-image,
.roc-selected .phearum-portfolio-item:nth-child(3) .phearum-portfolio-image,
.roc-selected .phearum-portfolio-item:nth-child(6) .phearum-portfolio-image {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 16rem;
    position: relative;
}

.roc-selected .phearum-portfolio-item:nth-child(2) .phearum-portfolio-image img,
.roc-selected .phearum-portfolio-item:nth-child(3) .phearum-portfolio-image img,
.roc-selected .phearum-portfolio-item:nth-child(6) .phearum-portfolio-image img {
    position: absolute;
    inset: 0;
}

/* Title row: index number, title, arrow that nudges on hover */
html body .roc-selected .phearum-portfolio-title {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
}

html body .roc-selected .phearum-portfolio-title::before {
    content: counter(roc-project, decimal-leading-zero);
    flex: none;
    font-family: var(--roc-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--roc-muted);
}

html body .roc-selected .phearum-portfolio-title a::before {
    content: none;
}

html body .roc-selected .phearum-portfolio-title a {
    flex: 1;
}

html body .roc-selected .phearum-portfolio-title::after {
    content: "\2192";
    flex: none;
    margin-left: auto;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--roc-t-fast), transform var(--roc-t-fast);
}

html body .roc-selected .phearum-portfolio-item:hover .phearum-portfolio-title::after,
html body .roc-selected .phearum-portfolio-item:focus-within .phearum-portfolio-title::after {
    opacity: 1;
    transform: none;
}

html body .roc-selected .phearum-portfolio-item:focus-within .phearum-portfolio-image {
    outline: 2px solid var(--roc-text);
    outline-offset: 4px;
}

.roc-selected .phearum-portfolio-item {
    position: relative;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.roc-selected .phearum-portfolio-item:hover {
    transform: none;
    box-shadow: none;
}

.roc-selected .phearum-portfolio-image {
    aspect-ratio: var(--roc-card-ratio);
    background: var(--roc-img-bg);
    border-radius: 0;
}

.roc-selected .phearum-portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--roc-t-img);
}

.roc-selected .phearum-portfolio-item:hover .phearum-portfolio-image img,
.roc-selected .phearum-portfolio-item:focus-within .phearum-portfolio-image img {
    transform: scale(1.025);
}

.roc-selected .phearum-portfolio-content {
    flex: 0 0 auto;
    padding: 0;
    margin-top: var(--roc-space-2);
}

html body .roc-selected .phearum-portfolio-title {
    margin: 0;
    font-family: var(--roc-font-heading);
    font-size: var(--roc-card-title-size);
    font-weight: 500;
    line-height: 1.3;
}

.roc-selected .phearum-portfolio-title a {
    text-decoration: none;
}

/* Whole card clickable through the title link */
.roc-selected .phearum-portfolio-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.roc-selected .phearum-portfolio-categories,
.roc-selected .phearum-portfolio-meta {
    display: none;
}

/* FAQ: native details/summary, heading left and list right on wide screens */
.roc-faq details.wp-block-details {
    margin: 0;
    padding: var(--roc-space-3) 0;
    border-top: 1px solid var(--roc-border);
}

.roc-faq details.wp-block-details:last-child {
    border-bottom: 1px solid var(--roc-border);
}

.roc-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--roc-space-3);
    cursor: pointer;
    list-style: none;
    font-family: var(--roc-font-heading);
    font-size: var(--roc-h3);
    font-weight: 500;
    line-height: 1.3;
}

.roc-faq summary::-webkit-details-marker {
    display: none;
}

.roc-faq summary::after {
    content: "+";
    flex: none;
    font-weight: 400;
}

.roc-faq details[open] summary::after {
    content: "\2212";
}

.roc-faq details p {
    max-width: var(--roc-text-width);
    margin: var(--roc-space-2) 0 0;
    line-height: 1.75;
    color: var(--roc-muted);
}

@media (min-width: 900px) {
    .roc-faq > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        column-gap: var(--roc-space-5);
        align-items: start;
    }

    .roc-faq .roc-section__title {
        grid-column: 1;
        grid-row: 1 / span 10;
        position: sticky;
        top: var(--roc-sticky-offset);
        align-self: start;
    }

    .roc-faq details.wp-block-details {
        grid-column: 2;
    }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
    .roc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .roc-selected .phearum-portfolio-grid .phearum-portfolio-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .roc-selected .phearum-portfolio-item,
    .roc-selected .phearum-portfolio-item:nth-child(n) {
        grid-column: auto;
    }

    .roc-selected .phearum-portfolio-item:nth-child(n) .phearum-portfolio-image {
        flex: 0 0 auto;
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .roc-selected .phearum-portfolio-item:nth-child(n) .phearum-portfolio-image img {
        position: static;
    }
}

@media (max-width: 640px) {
    .roc-grid,
    .roc-selected .phearum-portfolio-grid .phearum-portfolio-container {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--roc-space-3);
    }

    html body .roc-selected .phearum-portfolio-title::after {
        opacity: 1;
        transform: none;
    }

    .roc-hero__scroll {
        display: none;
    }

    .roc-hero__card {
        left: var(--roc-edge);
        right: var(--roc-edge);
        bottom: 1rem;
    }

    .roc-project__nav {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .roc-project__nav-next {
        text-align: left;
    }

    .roc-project__content .wp-block-file object,
    .roc-project__content .wp-block-file embed {
        min-height: 24rem;
    }

    .roc-project__content .wp-block-columns,
    .roc-project__content .wp-block-media-text {
        flex-direction: column;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .roc-card__img {
        transition: none;
    }

    .roc-card__link:hover .roc-card__img {
        transform: none;
    }
}

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

.roc-faq details.wp-block-details {
    padding: 1.75rem 0;
    transition: border-color var(--roc-t-fast);
}

.roc-faq summary {
    transition: color var(--roc-t-fast);
}

.roc-faq summary:hover {
    color: var(--roc-muted);
}

html body .roc-faq summary:focus-visible {
    outline: 2px solid var(--roc-text);
    outline-offset: 6px;
}

.roc-faq summary::after {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--roc-border);
    font-size: 1.25rem;
    line-height: 1;
    transition: background var(--roc-t-fast), border-color var(--roc-t-fast), color var(--roc-t-fast);
}

.roc-faq summary:hover::after,
.roc-faq details[open] summary::after {
    border-color: var(--roc-text);
}

.roc-faq details[open] summary::after {
    background: var(--roc-text);
    color: #fff;
}

.roc-faq details[open] > :not(summary) {
    animation: roc-rise var(--roc-t) both;
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .roc-hero__image img,
    .roc-hero__title,
    .roc-hero__lead,
    .roc-hero .wp-block-buttons,
    .roc-hero__card,
    .roc-faq details[open] > :not(summary) {
        animation: none;
    }

    .roc-selected .phearum-portfolio-image img,
    html body .roc-selected .phearum-portfolio-title::after,
    html body .roc-hero .wp-block-button .wp-block-button__link::after,
    .roc-hero__card-title a::after {
        transition: none;
    }

    .roc-selected .phearum-portfolio-item:hover .phearum-portfolio-image img,
.roc-selected .phearum-portfolio-item:focus-within .phearum-portfolio-image img {
        transform: none;
    }
}

/* ------------------------------------------------------ smooth anchors/reveal */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 6rem;
    }
}

/* Section reveal (script adds .roc-reveal, then .is-visible once in view).
   Only hidden when the early head script has set .roc-js. */
html.roc-js .roc-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--roc-t-slow), transform var(--roc-t-slow);
}

html.roc-js .roc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.roc-js .roc-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html body a,
    html body .wp-block-button__link,
    html body .roc-btn,
    html body .site-header,
    html body .site-header * {
        transition-duration: 0.01ms;
    }
}

/* ------------------------------------------------------- page layout (all) */

/* GeneratePress stacks container padding (#page, article, group inner containers).
   One container, one gutter: content lines up with the header logo. */
html body #page.site {
    max-width: none;
    margin: 0;
    padding: 0;
}

html body #page .inside-article,
html body #page .site-main > article {
    padding: 0;
}

html body .site-main .wp-block-group:not(.has-background):not(.roc-hero) > .wp-block-group__inner-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Default pages: ROC page header, readable text, wide media */
html body .page:not(.home) .entry-header,
html body .roc-post__header {
    padding: var(--roc-space-5) 0 var(--roc-space-3);
    margin: 0;
}

html body .page .entry-title,
html body .roc-page-title {
    margin: 0;
    font-size: var(--roc-h1);
}

html body .page:not(.home) .entry-content {
    margin: 0 0 var(--roc-space-5);
}

html body .page:not(.home) .entry-content > p,
html body .page:not(.home) .entry-content > ul,
html body .page:not(.home) .entry-content > ol,
html body .page:not(.home) .entry-content > blockquote,
html body .page:not(.home) .entry-content > h2,
html body .page:not(.home) .entry-content > h3 {
    max-width: var(--roc-text-width);
}

html body .entry-content img {
    max-width: 100%;
    height: auto;
}

html body .entry-content ul,
html body .entry-content ol {
    padding-left: 1.25rem;
}

html body .entry-content li + li {
    margin-top: 0.35rem;
}

html body .entry-content .wp-block-columns {
    gap: var(--roc-card-gap);
}

html body .entry-content figure {
    margin-left: 0;
    margin-right: 0;
}

html body .entry-content figcaption {
    margin-top: var(--roc-space-1);
    font-size: var(--roc-fs-small);
    color: var(--roc-muted);
}

html body .roc-page-intro {
    max-width: var(--roc-text-width);
    margin: var(--roc-space-2) 0 0;
    color: var(--roc-muted);
}

/* Contact page (WPForms inside the legacy two-column group) */
html body .contact-columns {
    gap: var(--roc-space-5);
    align-items: flex-start;
}

html body .contact-form-wrapper,
html body .contact-form-shortcode {
    max-width: 38rem;
}

html body .wpforms-container .wpforms-field .wpforms-field-row {
    display: grid;
    flex-direction: row;
    justify-content: normal;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--roc-space-2);
}

html body .wpforms-container .wpforms-field .wpforms-field-row::before,
html body .wpforms-container .wpforms-field .wpforms-field-row::after {
    display: none;
}

html body .wpforms-container .wpforms-field .wpforms-field-row .wpforms-field-row-block {
    float: none;
    clear: none;
    width: auto;
    padding: 0;
    margin: 0;
}

@media (max-width: 480px) {
    html body .wpforms-container .wpforms-field .wpforms-field-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

html body .wpforms-container .wpforms-field-medium,
html body .wpforms-container .wpforms-field-large {
    max-width: 100%;
}

html body .wpforms-container .wpforms-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* ---------------------------------------------------------------- blog */

.roc-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--roc-space-5) var(--roc-card-gap);
    margin: 0 0 var(--roc-space-5);
}

.roc-post-card {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.roc-post-card__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--roc-img-bg);
}

.roc-post-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--roc-t-img);
}

.roc-post-card:hover .roc-post-card__media img {
    transform: scale(1.025);
}

.roc-post-card__meta,
.roc-post__meta {
    margin: var(--roc-space-2) 0 0.35rem;
    font-size: var(--roc-fs-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--roc-muted);
}

.roc-post-card__title {
    margin: 0 0 var(--roc-space-1);
    font-size: var(--roc-h3);
}

html body .roc-post-card__title a {
    text-decoration: none;
}

.roc-post-card__excerpt {
    margin: 0 0 var(--roc-space-2);
    font-size: var(--roc-fs-small);
    color: var(--roc-muted);
}

.roc-post-card .roc-link {
    align-self: flex-start;
    margin-top: auto;
}

html body .navigation.pagination {
    margin: 0 0 var(--roc-space-5);
}

html body .navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--roc-space-2);
    align-items: center;
}

html body .navigation.pagination .page-numbers {
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

html body .navigation.pagination .page-numbers.current {
    border-bottom-color: var(--roc-text);
}

/* single post */
.roc-post__header {
    max-width: none;
}

.roc-post__meta {
    margin-top: var(--roc-space-2);
}

.roc-post__image {
    margin: 0 0 var(--roc-space-4);
}

.roc-post__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--roc-img-bg);
}

.roc-post__content {
    margin-bottom: var(--roc-space-5);
}

.roc-post__content > * {
    max-width: var(--roc-text-width);
    margin-top: 0;
    margin-bottom: var(--roc-space-3);
}

.roc-post__content > .wp-block-image,
.roc-post__content > .wp-block-gallery,
.roc-post__content > figure {
    max-width: none;
}

/* 404 */
.roc-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--roc-space-2);
    margin: 0 0 var(--roc-space-6);
}

@media (max-width: 1024px) {
    .roc-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .roc-post-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--roc-space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .roc-post-card__media img {
        transition: none;
    }

    .roc-post-card:hover .roc-post-card__media img {
        transform: none;
    }
}

/* Every image interaction also respects keyboard focus and reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .roc-hero__card,
    .roc-hero__card .wp-block-image img {
        transition: none;
    }

    .roc-hero__card:hover .wp-block-image img,
    .roc-hero__card:focus-within .wp-block-image img,
    .roc-card__link:focus-visible .roc-card__img,
    .roc-hero__card:hover .roc-hero__card-title a::after,
    .roc-hero__card:focus-within .roc-hero__card-title a::after {
        transform: none;
    }
}

/* ------------------------------------------------ scroll-progress statement */

/* One large editorial sentence between Selected projects and the FAQ. The text
   is plain and fully readable by default; roc-statement.js adds `.is-ready` and
   then lights the words in reading order as the section scrolls. */
html body .site-main .roc-statement {
    padding-bottom: var(--roc-space-2);
}

html body .site-main .roc-statement__text {
    max-width: 62rem;
    margin: 0 auto;
    font-family: var(--roc-font-heading);
    font-size: clamp(1.75rem, 1rem + 3.2vw, 2.375rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.025em;
    color: var(--roc-text);
    text-wrap: pretty;
}

html body .site-main .roc-statement__text.is-ready .roc-statement__word {
    color: #8a8a86;
    transition: color 280ms var(--roc-ease);
}

html body .site-main .roc-statement__text.is-ready .roc-statement__word.is-lit {
    color: var(--roc-text);
}

@media (prefers-reduced-motion: reduce) {
    html body .site-main .roc-statement__text.is-ready .roc-statement__word {
        color: var(--roc-text);
        transition: none;
    }
}

/* ------------------------------------------------------------ pricing page */

/* Use the existing site-content shell for hero, alternating service rows,
   FAQ and closing CTA. Keep photography inside the same editorial gutters. */
html body .roc-pricing__main {
    padding-block: 0;
}

html body .roc-pricing-hero {
    max-width: 62rem;
    margin: 0 auto;
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(3.5rem, 8vw, 6rem);
    text-align: center;
}

html body .roc-pricing-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.75rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--roc-radius-sm);
    background: var(--roc-surface-alt);
    color: var(--roc-muted);
    font-family: var(--roc-font-heading);
    font-size: var(--roc-fs-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html body .roc-pricing-pill__mark {
    color: var(--roc-text);
}

html body .roc-pricing-title,
html body .roc-pricing h1.wp-block-heading.roc-pricing-title {
    margin: 0;
    font-family: var(--roc-font-heading);
    font-size: clamp(2.5rem, 1rem + 6vw, 5.25rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

html body .roc-pricing-title__soft {
    display: block;
    color: #858581;
}

html body .roc-pricing-lede {
    max-width: 34rem;
    margin: 1.75rem auto 0;
    color: var(--roc-muted);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
    line-height: 1.6;
}

/* rows */
html body .roc-pricing-list {
    display: grid;
    gap: var(--roc-card-gap);
}

html body .roc-price-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
}

html body .roc-price-row__media {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--roc-surface-alt);
}

html body .roc-price-row__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body .roc-price-row__panel {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: clamp(2rem, 6vw, 3.75rem) clamp(1.25rem, 3.2vw, 3rem);
    background: var(--roc-surface-alt);
}

html body .roc-price-row__head {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--roc-border);
}

html body .roc-price-row__name,
html body .roc-pricing h2.wp-block-heading.roc-price-row__name {
    margin: 0;
    font-family: var(--roc-font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

html body .roc-price-row__amount {
    margin: 0;
    font-family: var(--roc-font-heading);
    font-size: clamp(1.75rem, 1.1rem + 2vw, 2.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

html body .roc-price-row__desc {
    margin: 0;
    color: var(--roc-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

html body .roc-price-row__features {
    display: grid;
    gap: 0.95rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .roc-price-row__features li {
    position: relative;
    margin: 0;
    padding-left: 2.1rem;
    font-size: 1rem;
    line-height: 1.45;
}

html body .roc-price-row__features li::before {
    content: "";
    position: absolute;
    top: 0.12em;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid #b9b9b5;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23555' stroke-width='1.4'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6'/%3E%3C/svg%3E") center / 100% no-repeat;
}

html body .roc-price-row__cta {
    width: 100%;
    margin-top: 0.5rem;
}

@media (min-width: 769px) {
    html body .roc-price-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: clamp(32rem, 44vw, 40rem);
    }

    html body .roc-price-row__media {
        aspect-ratio: auto;
    }

    html body .roc-price-row__panel {
        justify-content: center;
        padding: clamp(2.5rem, 4vw, 4rem);
    }

    html body .roc-price-row__head,
    html body .roc-price-row__features,
    html body .roc-price-row__cta {
        width: 100%;
        max-width: 30rem;
        margin-inline: auto;
    }

    html body .roc-price-row--flip .roc-price-row__media {
        order: 2;
    }
}

/* Pricing built from core blocks (Gutenberg-owned content, template-owned layout).
   The blocks reuse the .roc-price-row classes, so the rules above apply unchanged. */
html body .roc-pricing .wp-block-group__inner-container {
    display: contents;
}

html body .roc-pricing .roc-price-row .wp-block-group__inner-container > * {
    margin-block: 0;
}

html body .roc-pricing .roc-price-row .wp-block-buttons {
    width: 100%;
    margin-top: 0.5rem;
}

@media (min-width: 769px) {
    html body .roc-pricing .roc-price-row .wp-block-buttons {
        max-width: 30rem;
        margin-inline: auto;
    }
}

html body .roc-pricing .roc-price-row__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Plan rows: Kanzo-style hierarchy (uppercase plan name, large price line, larger description). */
html body .roc-pricing .roc-price-row .roc-price-row__name {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Price line: currency and amount are one large figure, the suffix a smaller
   muted unit on the same baseline. All three are real editable text in the body. */
html body .roc-pricing .roc-price-row__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 0.25rem;
    min-width: 0;
}

html body .roc-pricing .roc-price-row .roc-price-row__currency,
html body .roc-pricing .roc-price-row .roc-price-row__amount {
    margin: 0;
    font-family: var(--roc-font-heading);
    font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

html body .roc-pricing .roc-price-row .roc-price-row__suffix {
    margin: 0 0 0 0.75rem;
    color: var(--roc-muted);
    font-size: 1.125rem;
    line-height: 1.2;
}

html body .roc-pricing .roc-price-row .roc-price-row__desc {
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
}

html body .roc-pricing .roc-price-row .roc-price-row__features li {
    font-size: 1.0625rem;
}

/* Pressing Enter in a locked heading or paragraph adds a plain paragraph in the same slot.
   Empty ones stay hidden; typed ones read like the text around them instead of breaking the layout. */
html body .roc-pricing .roc-price-row p:empty,
html body .roc-pricing .roc-pricing-hero p:empty,
html body .roc-contact .roc-contact-hero__content p:empty {
    display: none;
}

html body .roc-pricing .roc-price-row__head p:not([class]),
html body .roc-pricing .roc-pricing-hero > p:not([class]) {
    margin: 0;
    color: var(--roc-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

html body .roc-contact .roc-contact-hero__content > p:not([class]) {
    margin: 0 0 1rem;
    color: var(--roc-contact-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

html body .roc-pricing .roc-pricing-pill--block::before {
    content: "\2731";
    color: var(--roc-text);
}

html body .roc-pricing .roc-pricing-title em {
    display: block;
    color: #8a8a86;
    font-style: normal;
}

html body .roc-pricing .roc-price-row__cta .wp-block-button__link {
    width: 100%;
}

html body .roc-pricing .roc-price-row__cta .wp-block-button__link::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* FAQ and closing call to action reuse the homepage components */
html body .roc-pricing .roc-faq {
    max-width: none;
    margin: 0;
    padding-inline: 0;
    padding-block: clamp(4rem, 9vw, 7rem);
}

html body .roc-pricing-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    padding: clamp(4rem, 10vw, 8rem) 0;
    text-align: center;
    border-top: 1px solid var(--roc-border);
}

html body .roc-pricing-cta__title {
    max-width: 22ch;
    margin: 0;
    font-family: var(--roc-font-heading);
    font-size: clamp(2rem, 1rem + 4vw, 3.75rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}


/* ------------------------------------------------------------ contact page */

/* Dark split hero (label, heading and the WPForms form beside a project
   photograph) inside the site container, then a light FAQ. Everything is scoped
   under .roc-contact so no other form on the site changes. */
html body .roc-contact {
    --roc-contact-bg: #27312d;
    --roc-contact-fg: #f4f4f1;
    --roc-contact-muted: rgb(244 244 241 / 0.64);
    --roc-contact-line: rgb(244 244 241 / 0.24);
    --roc-contact-error: #ffb4a8;
}

html body .roc-contact__main {
    padding-block: var(--roc-space-3) 0;
}

html body .roc-contact-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--roc-space-4);
    padding: clamp(1.25rem, 5vw, 4rem);
    border-radius: var(--roc-radius-md);
    background: var(--roc-contact-bg);
    color: var(--roc-contact-fg);
}

html body .roc-contact-pill {
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    background: #ffffff;
    color: var(--roc-text);
}

html body .roc-contact-title,
html body .roc-contact h1.wp-block-heading.roc-contact-title {
    margin: 0 0 clamp(2rem, 4vw, 3.25rem);
    color: var(--roc-contact-fg);
    font-family: var(--roc-font-heading);
    font-size: clamp(2.75rem, 1.2rem + 5.4vw, 5.5rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

html body .roc-contact-form {
    scroll-margin-top: 6rem;
}

html body .roc-contact-form:focus {
    outline: none;
}

html body .roc-contact-hero__media {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--roc-radius-sm);
    background: rgb(255 255 255 / 0.06);
}

html body .roc-contact-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% center;
}

@media (min-width: 960px) {
    html body .roc-contact-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 5rem);
        align-items: stretch;
    }

    html body .roc-contact-hero__media {
        aspect-ratio: auto;
        min-height: 100%;
    }
}

/* ---- the WPForms form, restyled in place ---- */
html body .roc-contact .wpforms-container {
    margin: 0;
}

html body .roc-contact .wpforms-container .wpforms-field-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--roc-space-3);
}

html body .roc-contact .wpforms-container .wpforms-field {
    grid-column: 1 / -1;
    padding: 0 0 var(--roc-space-3);
}

html body .roc-contact .wpforms-container .wpforms-field-number,
html body .roc-contact .wpforms-container .wpforms-field-select {
    grid-column: span 1;
}

@media (max-width: 560px) {
    html body .roc-contact .wpforms-container .wpforms-field-number,
    html body .roc-contact .wpforms-container .wpforms-field-select {
        grid-column: 1 / -1;
    }
}

html body .roc-contact .wpforms-container .wpforms-field-label,
html body .roc-contact .wpforms-container legend.wpforms-field-label {
    margin: 0 0 0.15rem;
    padding: 0;
    color: var(--roc-contact-fg);
    font-family: var(--roc-font-heading);
    font-size: 1rem;
    font-weight: 500;
}

html body .roc-contact .wpforms-container .wpforms-required-label {
    color: var(--roc-contact-muted);
}

/* "First" / "Last" sub labels sit above their inputs, like the field labels */
html body .roc-contact .wpforms-container .wpforms-field-row {
    gap: var(--roc-space-3);
}

html body .roc-contact .wpforms-container .wpforms-field-row .wpforms-field-row-block {
    display: flex;
    flex-direction: column-reverse;
}

html body .roc-contact .wpforms-container .wpforms-field-sublabel {
    margin: 0;
    color: var(--roc-contact-muted);
    font-size: var(--roc-fs-small);
    font-weight: 400;
}

/* underline-only controls */
html body .roc-contact .wpforms-container input[type="text"],
html body .roc-contact .wpforms-container input[type="email"],
html body .roc-contact .wpforms-container input[type="tel"],
html body .roc-contact .wpforms-container input[type="number"],
html body .roc-contact .wpforms-container select,
html body .roc-contact .wpforms-container textarea {
    max-width: 100%;
    padding: 0.7rem 0;
    border: 0;
    border-bottom: 1px solid var(--roc-contact-line);
    border-radius: 0;
    background: transparent;
    color: var(--roc-contact-fg);
    font-family: var(--roc-font-body);
    font-size: 1rem;
    box-shadow: none;
    transition: border-color var(--roc-t-fast);
}

html body .roc-contact .wpforms-container textarea {
    min-height: clamp(9rem, 20vw, 12rem);
    resize: vertical;
}

html body .roc-contact .wpforms-container select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.75rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23f4f4f1' stroke-width='1.4'%3E%3Cpath d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E") right 0.15rem center / 0.75rem no-repeat;
}

html body .roc-contact .wpforms-container select option {
    background: #ffffff;
    color: var(--roc-text);
}

html body .roc-contact .wpforms-container input::placeholder,
html body .roc-contact .wpforms-container textarea::placeholder {
    color: var(--roc-contact-muted);
}

html body .roc-contact .wpforms-container input:focus,
html body .roc-contact .wpforms-container select:focus,
html body .roc-contact .wpforms-container textarea:focus {
    border-bottom-color: var(--roc-contact-fg);
    box-shadow: 0 1px 0 0 var(--roc-contact-fg);
    outline: 2px solid var(--roc-contact-fg);
    outline-offset: 4px;
}

/* validation */
html body .roc-contact .wpforms-container .wpforms-error,
html body .roc-contact .wpforms-container label.wpforms-error {
    margin-top: 0.4rem;
    color: var(--roc-contact-error);
    font-size: var(--roc-fs-small);
}

html body .roc-contact .wpforms-container .wpforms-form input.wpforms-error,
html body .roc-contact .wpforms-container .wpforms-form textarea.wpforms-error,
html body .roc-contact .wpforms-container .wpforms-form select.wpforms-error {
    border-width: 0 0 1px;
    border-style: solid;
    border-color: transparent transparent var(--roc-contact-error);
    background: transparent;
    box-shadow: none;
}

/* submit: WPForms colours its button from CSS variables and a high-specificity
   rule, so set both */
html body .roc-contact .wpforms-container {
    --wpforms-button-background-color: #ffffff;
    --wpforms-button-background-color-alt: transparent;
    --wpforms-button-text-color: #111111;
    --wpforms-button-border-color: #ffffff;
    --wpforms-button-border-radius: var(--roc-radius-sm);
}

html body .roc-contact .wpforms-container .wpforms-submit-container {
    padding: var(--roc-space-1) 0 0;
}

html body .roc-contact .wpforms-container .wpforms-form .wpforms-submit-container .wpforms-submit {
    width: 100%;
    min-height: 3.25rem;
    border: 1px solid #ffffff;
    border-radius: var(--roc-radius-sm);
    background: #ffffff;
    color: var(--roc-text);
    font-size: 1rem;
    box-shadow: none;
}

html body .roc-contact .wpforms-container .wpforms-form .wpforms-submit-container .wpforms-submit:hover {
    background: transparent;
    color: #ffffff;
}

html body .roc-contact .wpforms-container .wpforms-submit:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

/* confirmation */
html body .roc-contact .wpforms-confirmation-container-full,
html body .roc-contact .wpforms-confirmation-container {
    border-color: var(--roc-contact-line);
    background: transparent;
    color: var(--roc-contact-fg);
}

/* ---- FAQ ---- */
html body .roc-contact-faq {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--roc-space-4);
    padding-block: clamp(4rem, 9vw, 8rem);
}

html body .roc-contact-faq__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--roc-space-4);
}

html body .roc-contact-faq__title,
html body .roc-contact h2.wp-block-heading.roc-contact-faq__title {
    margin: 0;
    font-family: var(--roc-font-heading);
    font-size: clamp(2.25rem, 1rem + 4.4vw, 4.25rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

html body .roc-contact-faq__soft {
    display: block;
    color: #8a8a86;
}

html body .roc-contact-faq__list {
    display: grid;
    gap: var(--roc-space-2);
    align-content: start;
}

html body .roc-contact-faq__item {
    border-radius: var(--roc-radius-sm);
    background: var(--roc-surface-alt);
}

html body .roc-contact-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--roc-space-3);
    padding: 1.6rem 1.5rem;
    list-style: none;
    cursor: pointer;
    font-family: var(--roc-font-heading);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
}

html body .roc-contact-faq__item summary::-webkit-details-marker {
    display: none;
}

html body .roc-contact-faq__item[open] summary {
    padding-bottom: 0.75rem;
}

html body .roc-contact-faq__item summary::after {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    transition: transform var(--roc-t);
}

html body .roc-contact-faq__item[open] summary::after {
    transform: rotate(45deg);
}

html body .roc-contact-faq__item summary:focus-visible {
    outline: 2px solid var(--roc-text);
    outline-offset: -2px;
    border-radius: var(--roc-radius-sm);
}

html body .roc-contact-faq__answer {
    padding: 0 1.5rem 1.5rem;
    color: var(--roc-muted);
    line-height: 1.6;
}

html body .roc-contact-faq__answer > :first-child {
    margin-top: 0;
}

html body .roc-contact-faq__answer > :last-child {
    margin-bottom: 0;
}

@media (min-width: 960px) {
    html body .roc-contact-faq {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(2rem, 6vw, 6rem);
    }

    html body .roc-contact-faq__intro {
        position: sticky;
        top: 7rem;
        align-self: start;
        min-height: clamp(18rem, 34vw, 26rem);
    }
}

@media (prefers-reduced-motion: no-preference) {
    html body .roc-contact-faq__item::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size 260ms var(--roc-ease), content-visibility 260ms var(--roc-ease) allow-discrete;
    }

    html body .roc-contact-faq__item[open]::details-content {
        block-size: auto;
    }

    html body .roc-contact-faq__list {
        interpolate-size: allow-keywords;
    }

    html:has(.roc-contact) {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .roc-contact-faq__item summary::after {
        transition: none;
    }
}

/* Contact page built from core blocks (Gutenberg-owned content, template-owned layout). */
html body .roc-contact .wp-block-group__inner-container {
    display: contents;
}

html body .roc-contact .roc-contact-pill--block::before {
    content: "\2731";
    color: var(--roc-text);
}

html body .roc-contact .roc-contact-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% center;
}

html body .roc-contact .wp-block-heading.roc-contact-title {
    margin-top: 0;
}

html body .roc-contact .roc-contact-faq__item > :not(summary) {
    margin: 0;
    padding: 0 1.5rem 1.5rem;
    color: var(--roc-muted);
    line-height: 1.6;
}

html body .roc-contact .roc-contact-faq__item > :not(summary):not(:last-child) {
    padding-bottom: 0.75rem;
}

html body .roc-contact .roc-contact-faq__cta {
    margin: 0;
}

/* ------------------------------------------------------------ footer notice */

/* The shared footer prints a cream, curved "256-bit SSL secure" band above the
   copyright, but only over HTTPS. The approved ROC footer has no such band (it
   was never visible on the HTTP local site). ROC has no crisis-resources notice,
   so the band contains only that badge: hide the whole band, curve included. */
html body .angel-footer__notice {
    display: none;
}