/* ==========================================================================
   Verve design system (2026-11 refresh)
   Loaded after the WordPress CSS. Same content, colors and fonts.

   Principles
   1. One grid: a 1200px container, one shared left/right edge on every page and section.
   2. One type scale and one spacing scale (tokens below), used everywhere.
   3. Orange is the only accent. Gray for secondary text, ink for body.
   4. Motion is a single quiet fade-up; images zoom 3% on hover. Nothing else moves.
   Most WordPress styles are inline, so overrides use !important where needed.
   ========================================================================== */

:root {
  /* color (from the original site) */
  --v-orange: #f05c3b;
  --v-orange-deep: #d9482a;
  --v-amber: #f6901c;
  --v-gray: #949598;
  --v-ink: #3f4042;
  --v-ink-soft: #5b5c5e;
  --v-tint: #f6f6f6;
  --v-line: rgba(63, 64, 66, .14);

  /* layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(64px, 9vw, 128px);

  /* type scale */
  --t-display: clamp(3rem, 1.6rem + 6vw, 7rem);
  --t-h1: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem);
  --t-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --t-h3: clamp(1.25rem, 1.1rem + .7vw, 1.65rem);
  --t-lede: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  --t-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-small: .9rem;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 4px;

  /* keep WordPress's spacing presets on our scale */
  --wp--preset--spacing--superbspacing-large: clamp(56px, 8vw, 112px);
  --wp--preset--spacing--superbspacing-xxlarge: clamp(64px, 10vw, 144px);
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--v-orange); color: #fff; }
:focus-visible { outline: 2px solid var(--v-orange); outline-offset: 3px; }
a { transition: color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); }

/* ---------- Grid: every constrained block shares one container ---------- */
body:not(.single-post) .wp-site-blocks .is-layout-constrained > :where(:not(.alignfull):not(.alignleft):not(.alignright)),
.wp-site-blocks .alignwide { max-width: var(--container); }
/* text keeps a comfortable measure and sits on the container's left edge */
body:not(.single-post) main .is-layout-constrained > p:not(.has-text-align-center),
.wp-site-blocks .wp-block-cover .is-layout-constrained > p:not(.has-text-align-center) { max-width: 60ch; margin-inline: 0 auto !important; }
body:not(.single-post) main .is-layout-constrained > :is(h1, h2):not(.has-text-align-center) { max-width: 22ch; margin-inline: 0 auto !important; }
body:not(.single-post) main .is-layout-constrained > h3:not(.has-text-align-center) { max-width: 32ch; margin-inline: 0 auto !important; }

/* ---------- Type ---------- */
main p, main li, footer p { letter-spacing: 0 !important; }
body:not(.single-post) main p, body:not(.single-post) main li { font-weight: 300 !important; line-height: 1.65 !important; color: var(--v-ink) !important; font-size: var(--t-body); }
body:not(.single-post) main p.has-text-color[style*="#f05c3b"], body:not(.single-post) main p[style*="color:#f05c3b"] { color: var(--v-orange) !important; font-weight: 600 !important; }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -.03em !important; }
body:not(.single-post) main h1, .wp-site-blocks .wp-block-cover h1 { font-size: var(--t-h1) !important; line-height: .98 !important; margin-block: 0 !important; }
body:not(.single-post) main h2 { font-size: var(--t-h2) !important; line-height: 1.04 !important; }
body:not(.single-post) main h3 { font-size: var(--t-h3) !important; line-height: 1.15 !important; }
main .wp-block-heading { margin-block-start: 0; }
body:not(.single-post) main h2 + p, body:not(.single-post) main h3 + p { margin-top: .9em; }
.wp-block-cover .wp-block-heading + .wp-block-heading { margin-top: .04em !important; }  /* hero lines stack tightly */

/* ---------- Header ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 60; isolation: isolate; }
/* frosted glass lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed full-screen menu */
header.wp-block-template-part::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
}
header .custom-logo { width: auto !important; height: 48px !important; max-width: none; display: block; transition: opacity .2s var(--ease); }
header .custom-logo-link:hover .custom-logo { opacity: .75; }
header .superbthemes-navigation-004 { width: min(100% - 2 * var(--gutter), var(--container)); max-width: none !important; margin-inline: auto !important; padding: 14px 0 !important; align-items: center; transition: padding .3s var(--ease); }
header .custom-logo { transition: height .3s var(--ease), opacity .2s var(--ease); }
body.is-scrolled header .superbthemes-navigation-004 { padding-block: 6px !important; }
/* the Contact button and the menu button share one vertical center */
header .wp-block-columns { align-items: center !important; gap: 8px !important; margin: 0; flex-wrap: nowrap !important; }
header .wp-block-column { display: flex; align-items: center; align-self: center; flex: 0 0 auto !important; width: auto !important; }
header .wp-block-buttons, header .wp-block-button { margin: 0; }
body.is-scrolled header .custom-logo { height: 36px !important; }
header .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: opacity .25s var(--ease); }
header .wp-block-navigation__responsive-container-open:hover { opacity: .6; background: none; }

header .wp-block-button__link { color: #555657 !important; }
header .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--v-orange) !important; }

/* full-screen menu */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed; inset: 0; z-index: 100000; background: #fff !important; overflow-y: auto; animation: v-fade .25s var(--ease);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 18px 0 64px !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { width: min(100% - 2 * var(--gutter), var(--container)) !important; max-width: none !important; margin: 0 auto !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position: relative; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: 14px; right: -10px; display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: clamp(56px, 12vh, 112px) 0 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-end !important; justify-content: flex-start !important; text-align: right; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: flex-end !important; justify-content: flex-start !important; gap: .3em; width: 100%; margin: 0; padding: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { justify-content: flex-end !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: inherit !important; font-weight: inherit !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem) !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.2; color: var(--v-ink-soft);
  transition: color .2s var(--ease), transform .3s var(--ease); display: inline-block;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--v-orange); transform: translateX(-6px); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link { font-size: 1rem !important; padding: 10px 18px !important; margin-top: 1rem; }

/* ---------- Buttons: the original rectangular outline buttons, with a quiet hover ---------- */
.wp-block-button__link, .wp-element-button { transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--v-orange) !important; border-color: var(--v-orange) !important; }
.wp-block-button .wp-block-button__link:hover { text-decoration: none; }
.wp-block-cover .wp-block-buttons, main .wp-block-buttons { gap: 12px; }

/* ---------- Work grid & images ---------- */
.wp-block-gallery { --wp--style--unstable-gallery-gap: 20px !important; gap: 20px !important; }
.wp-block-gallery.has-nested-images figure.wp-block-image { overflow: hidden; isolation: isolate; background: var(--v-tint); border-radius: var(--radius); }
.wp-block-gallery.has-nested-images figure.wp-block-image img { transition: transform .9s var(--ease); }
.wp-block-gallery.has-nested-images figure.wp-block-image:hover img { transform: scale(1.03); }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  font-size: .95rem !important; font-weight: 600; letter-spacing: .005em; text-align: left !important; color: #fff !important;
  padding: 56px 18px 16px !important; background: linear-gradient(to top, rgba(20, 20, 22, .7), rgba(20, 20, 22, 0)) !important;
}
main .wp-block-image img, main .wp-block-video video, main video:not(.wp-block-cover__video-background) { border-radius: var(--radius); }
main .wp-block-cover img, main .wp-block-cover video { border-radius: 0; }
main hr, main .wp-block-separator { border: 0 !important; border-top: 1px solid var(--v-line) !important; opacity: 1; }
main ul li::marker { color: var(--v-orange); }
main a:not(.wp-block-button__link):not(.wp-element-button) { text-underline-offset: .2em; text-decoration-thickness: 1px; }
main a:not(.wp-block-button__link):hover { color: var(--v-orange-deep); }

/* ---------- Contact form ---------- */
.jetpack-contact-form-container input[type=text], .jetpack-contact-form-container input[type=email], .jetpack-contact-form-container textarea {
  border-radius: var(--radius) !important; border: 1px solid #cfd0d2 !important; padding: 14px 16px !important; font-size: 1rem !important; background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.jetpack-contact-form-container input:focus, .jetpack-contact-form-container textarea:focus { border-color: var(--v-orange) !important; box-shadow: 0 0 0 3px rgba(240, 92, 59, .14); outline: none; }

/* ---------- Footer ---------- */
/* the orange bar runs full width; its content sits on the shared container edges */
footer .wp-block-group.superbthemes-footer-001 {
  max-width: none !important; width: 100%; box-sizing: border-box; padding-block: clamp(40px, 5vw, 72px) !important;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)) !important;
}
footer .superbthemes-footer-001 > * { max-width: none !important; }
footer p { font-weight: 300 !important; line-height: 1.5 !important; }
footer .wp-block-social-links .wp-social-link a { transition: transform .25s var(--ease), opacity .25s var(--ease); }
footer .wp-block-social-links .wp-social-link a:hover { transform: translateY(-2px); opacity: .85; }
footer a { text-underline-offset: .2em; }

/* ---------- Motion ---------- */
@keyframes v-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes v-rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
/* scroll reveal: ShellBehavior adds .v-pre only to elements below the fold, then .is-in as they arrive */
.v-pre { opacity: 0; transform: translateY(26px); }
.v-pre.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 781px) {
  header .custom-logo { height: 38px !important; }
  .wp-block-gallery { --wp--style--unstable-gallery-gap: 12px !important; gap: 12px !important; }
}

/* ==========================================================================
   About page (content/pages/about.json is generated by scripts/build_about.py)
   ========================================================================== */
.v-about { font-family: "Altone", system-ui, sans-serif; color: var(--v-ink); }
.v-about * { box-sizing: border-box; }
.v-about h1, .v-about h2, .v-about h3, .v-about p, .v-about ul { margin: 0; padding: 0; font-family: inherit; }
.v-about ul { list-style: none; }
.v-wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.v-about section { padding-block: var(--section-y); }
.v-about h1, .v-about h2 { color: var(--v-orange); font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.v-about h1 { font-size: var(--t-display); line-height: .95; }
.v-about h2 { font-size: var(--t-h2); line-height: 1.04; }
.v-about h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--v-ink-soft); text-wrap: balance; }
.v-about p, .v-about li { font-size: var(--t-body); font-weight: 300; line-height: 1.65; color: var(--v-ink); }
.v-about .v-eyebrow { font-size: var(--t-small); font-weight: 600; letter-spacing: .04em; color: var(--v-gray); }

/* hero */
.v-hero { padding-block: clamp(72px, 12vw, 176px) clamp(56px, 8vw, 112px); }
.v-hero .v-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 32px; align-items: end; }
.v-hero h1 { grid-column: 1 / span 6; }
.v-hero .v-lede { grid-column: 7 / span 6; font-size: var(--t-lede); line-height: 1.5; }

/* the nine truths */
.v-truths { background: var(--v-tint); }
.v-truths h2 { margin-bottom: clamp(40px, 6vw, 80px); }
.v-truth-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(28px, 4vw, 56px); row-gap: clamp(36px, 5vw, 64px); }
.v-truth { border-top: 1px solid var(--v-line); padding-top: 20px; display: grid; gap: 14px; align-content: start; }
.v-truth .v-num { font-size: var(--t-small); font-weight: 600; color: var(--v-orange); letter-spacing: .04em; }

/* what we do: the original gray frame around a white panel */
.v-frame { background: var(--v-gray); padding: clamp(14px, 2.2vw, 30px); }
.v-panel { background: #fff; padding-block: clamp(48px, 7vw, 96px); }
.v-panel h2 { margin-bottom: clamp(36px, 5vw, 64px); }
.v-do-section h2 { margin-bottom: clamp(40px, 6vw, 80px); }
.v-do-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(28px, 4vw, 56px); row-gap: 48px; }
.v-do { display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--v-line); padding-top: 20px; }
.v-do ul { margin-top: 12px; }
.v-do li { padding-block: 10px; border-top: 1px solid var(--v-line); font-size: .95rem; }
.v-do li:last-child { border-bottom: 1px solid var(--v-line); }

/* brands: tinted band again, so sections alternate white / gray / white / gray / white */
.v-brands { background: var(--v-tint); }
.v-brands .v-intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 20px; margin-bottom: clamp(40px, 6vw, 72px); }
.v-brands .v-intro p.v-eyebrow { grid-column: 1 / -1; }
.v-brands h2 { grid-column: 1 / span 6; }
.v-brands .v-intro p { grid-column: 7 / span 6; }
/* No boxes or hairlines: logos sit straight on the section's light gray. The logo files have white backgrounds, so
   multiply blending makes the white disappear (isolation + the tint on the grid keep the blend working inside the reveal animation). */
.v-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--v-tint); isolation: isolate; }
.v-logos figure { margin: 0; background: transparent; display: grid; place-items: center; overflow: hidden; }
.v-logos img { display: block; width: 100%; height: auto; border-radius: 0 !important; mix-blend-mode: multiply; filter: grayscale(1); opacity: .8; transition: filter .5s var(--ease), opacity .5s var(--ease), transform .8s var(--ease); }
.v-logos figure:hover img { filter: none; opacity: 1; transform: scale(1.03); }

/* call to action */
.v-cta { background: var(--v-amber); padding-block: clamp(56px, 8vw, 104px) !important; }
.v-cta .v-wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.v-cta h2 { color: #fff; }
.v-cta .wp-block-button__link { display: inline-block; background: transparent !important; border: 1px solid #fff; color: #fff !important; padding: 12px 22px; font-size: 1rem; font-weight: 400; text-decoration: none; line-height: 1.2; }
.v-cta .wp-block-button__link:hover { background: #fff; color: var(--v-amber) !important; border-color: #fff !important; }

/* leadership */
.v-leaders h2 { margin-bottom: clamp(36px, 5vw, 64px); }
.v-people { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(28px, 4vw, 56px); row-gap: 56px; }
.v-person { display: grid; grid-template-columns: clamp(120px, 16vw, 200px) 1fr; column-gap: clamp(20px, 3vw, 36px); align-items: start; border-top: 1px solid var(--v-line); padding-top: 28px; }
.v-person img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; border-radius: var(--radius); }
.v-person .v-role { font-size: var(--t-small); font-weight: 600; letter-spacing: .02em; color: var(--v-gray); margin-top: 6px; margin-bottom: 16px; }
.v-person .wp-block-social-links { display: flex; gap: 14px; margin-top: 18px; padding: 0; }
.v-person .wp-social-link { color: var(--v-gray) !important; background: none !important; }
.v-person .wp-social-link a { display: block; padding: 0; color: inherit; transition: color .2s var(--ease), transform .25s var(--ease); }
.v-person .wp-social-link a:hover { color: var(--v-orange); transform: translateY(-2px); }
.v-person .wp-social-link svg { width: 24px; height: 24px; fill: currentColor; }

@media (max-width: 960px) {
  .v-hero h1, .v-hero .v-lede, .v-brands h2, .v-brands .v-intro p { grid-column: 1 / -1; }
  .v-do-grid { grid-template-columns: repeat(2, 1fr); }
  .v-logos { grid-template-columns: repeat(2, 1fr); }
  .v-people { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .v-truth-grid, .v-do-grid { grid-template-columns: 1fr; }
  .v-person { grid-template-columns: 96px 1fr; }
}

/* News list: dates and titles sit on the shared container edges */
main .wp-block-group.alignfull[style*="padding-left:70px"] { padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)) !important; }
main .wp-block-post-template { padding: 0; }
@media (max-width: 781px) { header .wp-block-navigation__responsive-container-open { margin-right: -10px; } }  /* icon, not its tap box, meets the grid edge */

/* ==========================================================================
   Work, Uncontent Feed and Contact (content/pages/*.json generated by scripts/build_pages.py).
   They reuse the About hero and tokens above.
   ========================================================================== */
.v-about.v-work section.v-hero, .v-about.v-news section.v-hero, .v-about.v-contact section.v-hero { padding-bottom: clamp(40px, 6vw, 80px); }
.v-workgrid { background: var(--v-tint); padding-top: clamp(32px, 5vw, 64px) !important; padding-bottom: clamp(48px, 7vw, 96px) !important; }
.v-workgrid .wp-block-gallery { margin: 0 0 20px; padding: 0; }
.v-workgrid .wp-block-gallery:last-child { margin-bottom: 0; }

/* Uncontent Feed */
.v-feed { background: var(--v-tint); padding-top: clamp(32px, 5vw, 64px) !important; padding-bottom: clamp(48px, 7vw, 96px) !important; }
.v-feed ol { list-style: none; margin: 0; padding: 0; }
.v-feed li { border-bottom: 1px solid var(--v-line); }
.v-feed li:last-child { border-bottom: 0; }
.v-feed a { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: baseline; padding-block: clamp(24px, 3.4vw, 44px); text-decoration: none; color: var(--v-ink); }
.v-feed time { grid-column: 1 / span 3; font-size: var(--t-small); font-weight: 600; letter-spacing: .04em; color: var(--v-orange); }
.v-feed h2 { grid-column: 4 / span 8; font-size: var(--t-h2); transition: color .25s var(--ease), transform .35s var(--ease); color: var(--v-ink-soft); }
.v-feed .v-arrow { grid-column: 12 / span 1; justify-self: end; color: var(--v-orange); font-size: var(--t-h3); opacity: 0; transform: translateX(-8px); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.v-feed a:hover h2, .v-feed a:focus-visible h2 { color: var(--v-orange); transform: translateX(6px); }
.v-feed a:hover .v-arrow, .v-feed a:focus-visible .v-arrow { opacity: 1; transform: none; }

/* Contact */
.v-contactgrid { background: var(--v-tint); padding-top: clamp(48px, 7vw, 96px) !important; padding-bottom: clamp(56px, 8vw, 112px) !important; }
.v-contactgrid .v-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px; align-items: start; }
.v-details { grid-column: 1 / span 5; }
.v-formbox { grid-column: 7 / span 6; }
.v-details h2, .v-formbox h2 { font-size: var(--t-h2); margin-bottom: 32px; }
.v-details dl { margin: 0; display: grid; gap: 28px; }
.v-details dt { font-size: var(--t-small); font-weight: 600; letter-spacing: .04em; color: var(--v-gray); margin-bottom: 6px; }
.v-details dd { margin: 0; font-size: var(--t-lede); line-height: 1.4; font-weight: 300; color: var(--v-ink); }
.v-details address { font-style: normal; }
.v-details a { color: var(--v-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .2s var(--ease); }
.v-details a:hover { color: var(--v-orange); }
.v-details a.v-reveal:not([data-v-done]) { color: var(--v-gray); }
.v-contact form { display: grid; gap: 22px; }
.v-field { display: grid; gap: 8px; }
.v-field span { font-size: var(--t-small); font-weight: 600; letter-spacing: .02em; color: var(--v-gray); }
.v-field em { font-style: normal; font-weight: 300; }
.v-field input, .v-field textarea { width: 100%; font: inherit; font-size: 1rem; font-weight: 300; color: var(--v-ink); background: #fff; border: 1px solid #cfd0d2; border-radius: var(--radius); padding: 14px 16px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.v-field textarea { resize: vertical; min-height: 160px; }
.v-field input:focus, .v-field textarea:focus { border-color: var(--v-orange); box-shadow: 0 0 0 3px rgba(240, 92, 59, .14); outline: none; }
.v-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.v-submit { justify-self: start; font: inherit; font-size: 1rem; line-height: 1.2; font-weight: 400; cursor: pointer; padding: 12px 22px; background: transparent; color: var(--v-gray); border: 1px solid var(--v-gray); border-radius: 0; transition: color .2s var(--ease), border-color .2s var(--ease); }
.v-submit:hover, .v-submit:focus-visible { color: var(--v-orange); border-color: var(--v-orange); }
.v-submit:disabled { opacity: .5; cursor: default; }
.v-contact .contact-form-submission { display: none; }
.v-contact .contact-form-submission.submission-success { display: grid; gap: 12px; }
.v-contact .contact-form-submission h3 { color: var(--v-orange); }

@media (max-width: 960px) {
  .v-feed time { grid-column: 1 / -1; margin-bottom: 8px; }
  .v-feed h2 { grid-column: 1 / span 10; }
  .v-feed .v-arrow { grid-column: 11 / span 2; opacity: 1; transform: none; }
  .v-details, .v-formbox { grid-column: 1 / -1; }
}
.v-contact .v-field { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
.v-contact .v-field input, .v-contact .v-field textarea { display: block; width: 100% !important; max-width: none !important; margin: 0; }

.v-feed .v-blurb { grid-column: 4 / span 7; grid-row: 2; margin-top: 12px; font-size: var(--t-lede); line-height: 1.4; color: var(--v-ink); max-width: 38em; }
@media (max-width: 960px) { .v-feed .v-blurb { grid-column: 1 / -1; grid-row: auto; } }

/* ---------- Articles (blog posts): keep the original WordPress look: a narrow column, bold gray copy, big headings ---------- */
body.single-post main p { line-height: 1.5; }  /* (the refresh rules above skip body.single-post, so articles keep their WordPress styling) */

/* ---------- Home: rotating first word ("<word> ideas, made with Verve") ---------- */
.wp-site-blocks .wp-block-cover h1.v-rotor { display: grid; color: var(--v-ink); font-weight: 700; letter-spacing: -.04em !important; line-height: 1.02 !important; font-size: clamp(2.6rem, 1rem + 5.2vw, 5.75rem) !important; margin-bottom: .3em !important; }
.v-rotor .v-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v-rotor .v-words { display: grid; }
.v-rotor .v-words span { grid-area: 1 / 1; opacity: 0; animation: v-word 13s var(--ease) infinite both; animation-delay: calc(var(--i) * 2.6s); }
.v-rotor .v-words span:first-child { opacity: 1; }
.v-rotor .v-line2 { display: block; }
.v-rotor .v-verve { color: var(--v-orange); }
@keyframes v-word {
  0% { opacity: 0; transform: translateY(.3em); }
  3.6% { opacity: 1; transform: none; }
  16.8% { opacity: 1; transform: none; }
  20.4% { opacity: 0; transform: translateY(-.3em); }
  100% { opacity: 0; }
}
.wp-site-blocks .wp-block-cover p.v-intro-copy { font-size: clamp(1.1rem, .85rem + .8vw, 1.35rem) !important; line-height: 1.45 !important; font-weight: 300 !important; max-width: none !important; color: var(--v-ink) !important; }

/* ---------- Articles: title + subhead share one design ---------- */
body.single-post main h2.v-post-title, body.single-post main h2.v-post-sub { line-height: 1 !important; }

/* ---------- Contact refinements ---------- */
.v-details h2, .v-formbox h2 { color: var(--v-ink); }
.v-error { color: var(--v-orange); font-size: var(--t-small); font-weight: 600; }
.v-field.is-invalid input, .v-field.is-invalid textarea { border-color: var(--v-orange); }
.v-contact .v-submit { width: auto !important; justify-self: start !important; }
/* all articles share one column width, so titles and copy line up from post to post */
body.single-post main [class*="wp-container-core-group"] > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.single-post main [class*="wp-container-core-group"] > .alignwide { max-width: 780px !important; }
.wp-site-blocks:has(.v-contact, .v-news, .v-work) > footer { margin-block-start: 0 !important; }

/* ---------- Home: bigger buttons, dark type ---------- */
.wp-block-cover .wp-block-buttons { gap: 16px; }
.wp-block-cover .wp-block-button__link { font-size: .9rem !important; font-weight: 400 !important; letter-spacing: 0 !important; padding: 9px 20px !important; color: var(--v-ink) !important; border-color: var(--v-ink) !important; }
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--v-orange) !important; border-color: var(--v-orange) !important; }

/* ---------- Home: three headlines (a: rotating words, b: Move fast and break (make) things, c: Ignorable work gets ignored) ----------
   ShellBehavior sets data-show="a" | "b" | "c" on h1.v-rotor (auto cycle until a visitor picks one with the dots) and flips data-n to restart the rotation. */
.v-rotor > :is(.v-a, .v-b, .v-c) { grid-area: 1 / 1; }
.v-rotor .v-b, .v-rotor .v-c, .v-switch { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .v-rotor .v-b, .v-rotor .v-c { display: block; opacity: 0; transition: opacity .4s var(--ease); }
  .v-rotor .v-a { transition: opacity .4s var(--ease); }
  .v-rotor[data-n="1"] .v-words span { animation-name: v-word2; }
  .v-rotor[data-show="b"] .v-a, .v-rotor[data-show="c"] .v-a { opacity: 0; }
  .v-rotor[data-show="b"] .v-b, .v-rotor[data-show="c"] .v-c { opacity: 1; }
  .v-rotor :is(.v-b, .v-c) .w { display: inline-block; }
  .v-rotor[data-show="b"] .v-b .w, .v-rotor[data-show="c"] .v-c .w { animation: v-in .5s var(--ease) both; animation-delay: var(--t); }
  .v-rotor .v-orange, .v-rotor .v-make { color: var(--v-orange); }
  .v-rotor .v-strike { position: relative; }
  .v-rotor .v-strike::after { content: ""; position: absolute; left: -.03em; right: -.03em; top: 54%; height: .075em; background: var(--v-orange); transform-origin: left; }
  .v-rotor[data-show="b"] .v-strike::after { animation: v-strike .45s var(--ease) 3.8s both; }
  .v-rotor .v-make { display: inline-block; vertical-align: bottom; overflow: hidden; max-width: 4em; padding-block: .12em; margin-block: -.12em; }
  .v-rotor[data-show="b"] .v-make { animation: v-make .6s var(--ease) both; animation-delay: var(--t); }
  .v-rotor[data-show] + .v-switch { display: flex; }
}
.v-switch { gap: 4px; margin: 4px 0 0 -8px; }
.v-switch button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.v-switch button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #c9cacc; transition: width .3s var(--ease), background-color .25s var(--ease); }
.v-switch button:hover::before { background: var(--v-orange); opacity: .7; }
.v-switch button[aria-pressed="true"]::before { width: 22px; background: var(--v-orange); opacity: 1; }
.v-switch button:focus-visible { outline: 2px solid var(--v-orange); outline-offset: -2px; border-radius: 4px; }
@keyframes v-make { from { max-width: 0; opacity: 0; } to { max-width: 4em; opacity: 1; } }
@keyframes v-word2 {
  0% { opacity: 0; transform: translateY(.3em); }
  3.6% { opacity: 1; transform: none; }
  16.8% { opacity: 1; transform: none; }
  20.4% { opacity: 0; transform: translateY(-.3em); }
  100% { opacity: 0; }
}
@keyframes v-in { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
@keyframes v-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ==========================================================================
   Individual work pages: title left, tags right, room before the content; lightbox
   ========================================================================== */
.v-workhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; padding-bottom: clamp(24px, 3.5vw, 40px); margin-bottom: clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--v-line); }
.v-workhead h1 { margin: 0 !important; color: var(--v-ink); font-weight: 700; letter-spacing: -.035em; text-wrap: balance; font-size: var(--t-h2) !important; line-height: 1 !important; }
.v-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 1.4em; max-width: 46%; }
.v-tags li { margin: 0; padding: 0; font-size: .56rem; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; color: var(--v-gray); }
.v-workbody > * { margin-block-start: 0; }
.v-workbody > h4 { margin-bottom: 1rem; }
@media (max-width: 781px) {
  .v-workhead { flex-direction: column; align-items: flex-start; }
  .v-tags { justify-content: flex-start; max-width: none; }
}

/* lightbox */
.v-zoomwrap { position: relative; }
.v-zoomwrap > .v-zoombtn { z-index: 3; }
.v-zoombtn { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--v-ink); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .25s var(--ease), background .25s var(--ease); z-index: 2; }
.v-zoomwrap:hover .v-zoombtn, .v-zoombtn:focus-visible { opacity: 1; }
.v-zoombtn:hover { background: #fff; color: var(--v-orange); }
@media (hover: none) { .v-zoombtn { opacity: 1; } }
.v-lb { position: fixed; inset: 0; z-index: 200000; background: rgba(15,15,16,.94); display: grid; place-items: center; padding: 56px 16px; animation: v-fade .25s var(--ease); }
.v-lb-stage { display: grid; place-items: center; max-width: min(100%, 1600px); max-height: 100%; }
.v-lb-stage img, .v-lb-stage video { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: var(--radius); display: block; background: #000; }
.v-lb-cap { color: #cfcfd0; font-size: .9rem; text-align: center; margin-top: 12px; min-height: 1.2em; }
.v-lb button { position: absolute; border: 0; background: rgba(255,255,255,.1); color: #fff; width: 46px; height: 46px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; transition: background .2s var(--ease); }
.v-lb button:hover { background: var(--v-orange); }
.v-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v-lb-close { top: 14px; right: 14px; }
.v-lb-prev { left: 14px; top: 50%; translate: 0 -50%; }
.v-lb-next { right: 14px; top: 50%; translate: 0 -50%; }
.v-lb[data-single] .v-lb-prev, .v-lb[data-single] .v-lb-next { display: none; }
body.v-lb-open { overflow: hidden; }

/* work overview: the whole card is the link */
.v-workgrid figure.wp-block-image { position: relative; }
.v-workgrid figure.wp-block-image a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
/* header contact button: transparent */
header .wp-block-button__link, header .wp-block-button .wp-block-button__link { background: transparent !important; }
.lightbox-trigger { display: none !important; }  /* WordPress leftover lightbox button; ours replaces it */
/* beat WordPress's .wp-lightbox-container button rules so every expand icon looks identical */
.v-zoomwrap > button.v-zoombtn { width: 38px !important; height: 38px !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; border-radius: 999px !important; background: rgba(255,255,255,.88) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; display: grid !important; place-items: center; opacity: 0; color: var(--v-ink) !important; }
.v-zoomwrap:hover > button.v-zoombtn, .v-zoomwrap > button.v-zoombtn:focus-visible { opacity: 1; }
.v-zoomwrap > button.v-zoombtn:hover { background: #fff !important; color: var(--v-orange) !important; }
.v-zoomwrap > button.v-zoombtn svg { width: 18px !important; height: 18px !important; }
/* Touch screens: no expand icon at all; tapping the image or video opens the viewer. */
@media (hover: none) { .v-zoomwrap > button.v-zoombtn, .v-zoombtn { display: none !important; } }
/* No special cursor over viewer-enabled media (WordPress set a magnifier); the hover icon is the cue on desktop. */
.v-zoomwrap img, .v-zoomwrap video, .v-zoomwrap a { cursor: auto !important; }

/* articles: one title / subhead / date system */
body.single-post main h2.v-post-title { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 3.9rem) !important; line-height: 1 !important; font-weight: 700; letter-spacing: -.035em; }
body.single-post main h2.v-post-sub { font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem) !important; line-height: 1.25 !important; font-weight: 700; letter-spacing: -.01em; margin-top: .6em !important; }
body.single-post main p.v-post-date { font-size: var(--t-small, .85rem); font-weight: 600; letter-spacing: .04em; color: #949598 !important; margin: 0 0 1.1em !important; }
body.single-post main p.has-superbfont-large-font-size { line-height: 1.05 !important; }
footer .wp-block-site-title a::after { content: "."; }