/*
Theme Name: BrioForge
Theme URI: https://brioforge.com
Author: BrioForge
Author URI: https://brioforge.com
Description: Custom WordPress block theme for BrioForge — a warm, editorial, high-contrast brand system for a WordPress & WooCommerce development studio. Full Site Editing, core blocks only, self-hosted fonts.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brioforge
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, rtl-language-support, translation-ready, accessibility-ready, wide-blocks
*/

/*
The theme is GPL, but the bundled fonts are not — Space Grotesk and Manrope are
each SIL Open Font License 1.1, and the OFL requires its copyright notice and
license text to travel with the font files. Both live beside the woff2s in
assets/fonts/ (space-grotesk-OFL.txt, manrope-OFL.txt). Keep them there if the
fonts are ever swapped, subset again, or the theme is redistributed — the
Google Fonts API subsets carry no license metadata of their own.
*/

/* ==========================================================================
   Token aliases — map the design system's short names onto theme.json presets
   so the ported component CSS below reads exactly like the source of truth
   (assets/brioforge.css) while WordPress stays the single origin of the values.
   ========================================================================== */
:root {
  --ink: var(--wp--preset--color--ink);
  --ink-soft: var(--wp--preset--color--ink-soft);
  --muted: var(--wp--preset--color--muted);
  --paper: var(--wp--preset--color--paper);
  --card: var(--wp--preset--color--card);
  --line: var(--wp--preset--color--line);
  --navy: var(--wp--preset--color--navy);

  --pink: var(--wp--preset--color--pink);
  --green: var(--wp--preset--color--green);
  --teal: var(--wp--preset--color--teal);
  --gold: var(--wp--preset--color--gold);
  --gold-ink: var(--wp--preset--color--gold-ink);

  --pink-t: var(--wp--preset--color--pink-tint);
  --green-t: var(--wp--preset--color--green-tint);
  --teal-t: var(--wp--preset--color--teal-tint);
  --gold-t: var(--wp--preset--color--gold-tint);

  --pink-d: var(--wp--preset--color--pink-deep);
  --green-d: var(--wp--preset--color--green-deep);
  --teal-d: var(--wp--preset--color--teal-deep);
  --gold-d: var(--wp--preset--color--gold-deep);

  --r: 18px;
  --r-lg: 28px;
  --r-block: 34px;
  --shadow: var(--wp--preset--shadow--card);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
.dsp {
  font-family: var(--wp--preset--font-family--space-grotesk);
  letter-spacing: -.02em;
  line-height: 1.06;
}

/* Accessibility --------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 12px 0;
  font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Layout ---------------------------------------------------------------- */
.wrap {
  max-width: 1220px; margin: 0 auto; padding: 0 40px;
  position: relative; z-index: 1;
}
.section { padding: 88px 0; }
.section.tint { background: #fff; }
.sec-head { max-width: 660px; }
.sec-head.center { margin: 0 auto; text-align: center; }
/* Heading on the left, a link out to the full archive on the right. The
   heading keeps its own measure; the section head itself spans the wrap so
   the action can sit at the far edge. */
.sec-head.with-action {
  max-width: none; display: flex; gap: 28px;
  align-items: flex-end; justify-content: space-between;
}
.sec-head.with-action .sec-head-text { max-width: 660px; }
.sec-head-action { flex: none; }
.sec-head h2 { font-size: 44px; font-weight: 700; margin: 14px 0 0; }
.sec-head p { color: var(--muted); font-size: 18px; margin-top: 16px; }

/* ==========================================================================
   Logo, buttons, tags — decorative primitives
   ========================================================================== */
.logo {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 400; font-size: 26px; letter-spacing: -.03em; color: var(--ink);
}
.logo b { font-weight: 700; }

.btn,
.wp-block-button__link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 600; font-size: 16px;
  padding: 14px 26px; border-radius: 999px;
  border: 1.5px solid var(--ink); cursor: pointer;
  transition: .18s; white-space: nowrap; background: none;
  text-decoration: none;
}
.btn-primary,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background: var(--ink); color: #fff;
}
.btn-primary:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background: #000; color: #fff; transform: translateY(-1px);
}
.btn-ghost,
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn-ghost:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--ink); color: #fff;
}
.btn .arw { font-size: 18px; line-height: 0; }
.wp-block-buttons { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* core/post-terms wraps *every* term in one element, so putting the pill on
   .tag alone renders a multi-category post as a single bubble. The pill lives
   on the term links; the wrapper becomes a row that lays them out. */
.tag,
.wp-block-post-terms.tag a {
  display: inline-flex; align-items: center;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 600; font-size: 12.5px; letter-spacing: .02em;
  padding: 6px 13px; border-radius: 999px;
  background: var(--gold); color: var(--ink);
}
.wp-block-post-terms.tag {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0; background: none; border-radius: 0;
}
.wp-block-post-terms.tag a:hover { background: var(--gold-d); color: #fff; }
/* Gap does the spacing; the block's own separator would add a stray glyph. */
.wp-block-post-terms__separator { display: none; }
.eyebrow {
  display: inline-block;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 600; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

/* Image placeholder (diagonal hatch) — marks where real media goes -------- */
.ph {
  background-image: repeating-linear-gradient(135deg, #efece5 0 14px, #e7e3da 14px 28px);
  position: relative; display: flex; align-items: center; justify-content: center;
  color: #9a958a;
}
.ph span:not(.tag) {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #9a958a;
  background: rgba(255, 255, 255, .7); padding: 5px 10px; border-radius: 6px;
}
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* core/image wraps the img in a <figure>, so the direct-child rule above never
   matches block markup — the image then ignores the container's crop and radius. */
.ph > .wp-block-image { position: absolute; inset: 0; margin: 0; border-radius: inherit; overflow: hidden; }
.ph > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Off-edge decorative blobs — pure CSS, no semantics --------------------- */
.blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.services > :not(.blob),
.band > :not(.blob),
.cta-band > :not(.blob),
.contact > :not(.blob) { position: relative; z-index: 1; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
/* The header renders inside a .wp-block-template-part wrapper whose box is
   only as tall as the header itself, and a sticky element can never outlive
   its parent's box — so .nav scrolled away the instant the wrapper did.
   display: contents drops the wrapper's box so the header sticks against the
   page. Scoped to the first template part; the footer's wrapper is untouched. */
.wp-site-blocks > .wp-block-template-part:first-child { display: contents; }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 243, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px; max-width: 1300px; margin: 0 auto;
}
.nav .links {
  display: flex; gap: 32px;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 500; font-size: 16px;
}
.nav .rt { display: flex; align-items: center; gap: 22px; }
.nav .rt .c { font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 500; }
.nav .nav-cta { margin: 0; }

/* Site logo. An uploaded logo wins; .is-fallback is the CSS wordmark that
   renders when none is set (see brioforge_site_logo_fallback). */
.nav .brand { margin: 0; line-height: 0; }
.nav .brand img { max-height: 34px; width: auto; }
.brand.is-fallback { line-height: 1; }

/* Core navigation, styled to the design's link treatment. The menu itself is
   managed in the Site Editor — nothing here assumes particular items. */
.nav .links .wp-block-navigation { gap: 32px; }
.nav .links .wp-block-navigation__container { gap: 32px; }
.nav .links .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 500; font-size: 16px; color: var(--ink); text-decoration: none;
}
.nav .links .wp-block-navigation-item__content:hover { color: var(--teal); }
.nav-toggle {
  display: none; background: none; border: 0; padding: 0;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  font-size: 24px; line-height: 0; cursor: pointer; color: var(--ink);
}

/* Full-screen mobile menu (built by brioforge.js) ------------------------ */
.m-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--paper);
  padding: 20px 24px 44px; display: none; flex-direction: column; overflow-y: auto;
}
.m-menu.show { display: flex; }
.m-top { display: flex; align-items: center; justify-content: space-between; }
.m-close {
  background: none; border: 0; padding: 0; width: 42px; height: 42px;
  font-size: 22px; line-height: 0; color: var(--ink); cursor: pointer;
}
.m-desc { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 24px 0 26px; max-width: 520px; }
.m-rule { height: 1px; background: var(--line); }
.m-rule.gold { background: var(--gold-ink); opacity: .55; }
.m-links { display: flex; flex-direction: column; gap: 24px; padding: 32px 0; }
.m-links a {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 600; font-size: 26px; letter-spacing: -.02em; color: var(--ink);
}
.m-links a:hover { color: var(--teal); }
.m-tag { font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 600; font-size: 17px; margin: 28px 0 18px; }
.m-cta { align-self: flex-start; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding: 76px 0 84px; }
.hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero.rev .grid { grid-template-columns: .95fr 1.05fr; }
.hero h1 { font-size: 60px; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--teal); }
/* The design carried these as inline styles on the prototype's headings;
   they belong with the section rules now that patterns emit clean markup. */
.hero .eyebrow + h1 { margin-top: 18px; }
.hero .sub { font-size: 19px; color: var(--ink-soft); margin: 24px 0 32px; max-width: 470px; }
.hero .cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-media { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-lg); }
.hero-media .ph { position: absolute; inset: 0; border-radius: var(--r-lg); }

/* Phone device mockup on a colored disc ----------------------------------
   Used when the source image is a bare screenshot: CSS supplies the phone
   frame and the coloured disc behind it. */
.stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.stage .disc { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: var(--gold); }
.device { position: relative; width: 230px; background: #111318; border-radius: 38px; padding: 10px; }
.device .scr { border-radius: 29px; overflow: hidden; aspect-ratio: 9 / 19; }

/* Tall variant — used in the wishlist sections, where the device sits beside a
   long checklist. At the default 230px it reads undersized against eleven list
   items, so the frame and disc scale up to roughly match the column height. */
.stage--tall { min-height: 0; }
.stage--tall .disc { width: 430px; height: 430px; }
.stage--tall .device { width: 300px; border-radius: 46px; padding: 12px; }
.stage--tall .device .scr { border-radius: 36px; }

/* Desktop variant — a wide screenshot (admin screen, dashboard) shown as-is on
   the disc, with no frame around it. The image keeps its own aspect ratio, so
   nothing is cropped and swapping the artwork needs no CSS change. */
.stage--desktop { min-height: 0; min-width: 0; }
/* Both sized from the column rather than in pixels, so the screenshot fills the
   space at every width and the disc — being absolutely positioned, and so able
   to push a scrollbar onto the page — can never overhang it. */
.stage--desktop .disc { width: 100%; max-width: 560px; height: auto; aspect-ratio: 1; }
/* position: relative — the disc is absolutely positioned and would otherwise
   paint over the static image. */
.stage--desktop .shot { position: relative; margin: 0; width: 100%; }
.stage--desktop .shot img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); box-shadow: var(--shadow);
}

/* Illustration variant — the image already contains its own phone frame and
   backdrop, so adding .device and .disc renders a phone inside a phone with
   two overlapping discs. Show the artwork as-is instead. */
/* Sized to sit at roughly the same visual weight as the CSS treatment it
   replaces — a 230px device on a 340px disc. The artwork carries its own
   padding, so it needs a little more than 340px to read at the same scale. */
.stage--illustration { min-height: 0; }
.stage--illustration .wp-block-image { margin: 0; width: 100%; }
.stage--illustration img { width: 100%; height: auto; max-width: 380px; margin: 0 auto; display: block; }

/* ==========================================================================
   Trust logos
   ========================================================================== */
.trust { padding: 38px 0 8px; }
.trust .lbl {
  text-align: center; color: var(--muted);
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 22px;
}
.logos { display: flex; justify-content: center; align-items: center; gap: 56px; flex-wrap: wrap; opacity: .95; }
.logos .lg { display: inline-flex; align-items: center; justify-content: center; height: 96px; }
.logos .lg img { max-height: 96px; width: auto; object-fit: contain; filter: grayscale(1); }
.logos .lg b {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 700; font-size: 20px; color: var(--muted); letter-spacing: -.01em;
}

/* ==========================================================================
   Split
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.rev > *:first-child { order: 2; }
.split .media { position: relative; }
.split .ph { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.split h2 { font-size: 40px; font-weight: 700; margin-bottom: 18px; }
.split .eyebrow + h2 { margin-top: 14px; }
.split p { color: var(--ink-soft); font-size: 17px; margin-bottom: 16px; }

/* ==========================================================================
   Dark statement band
   ========================================================================== */
.band {
  position: relative; overflow: hidden; background: var(--navy);
  border-radius: var(--r-block); padding: 60px 56px; text-align: center; color: #fff;
}
.band h2 { font-size: 40px; font-weight: 700; max-width: 720px; margin: 0 auto 16px; }
.band p { color: #c3c6de; font-size: 17px; max-width: 640px; margin: 0 auto; }

/* ==========================================================================
   Services / industry cards
   ========================================================================== */
.services {
  background: var(--navy); border-radius: var(--r-block); padding: 64px 56px;
  color: #fff; position: relative; overflow: hidden;
}
.services .sec-head h2 { color: #fff; }
.services .sec-head p { color: #b9bcd6; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.svc { background: #fff; border-radius: var(--r); padding: 26px; color: var(--ink); box-shadow: var(--shadow); }
.svc .ic { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.svc .ic svg, .col .ic svg {
  width: 30px; height: 30px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.svc h3 { font-size: 20px; margin-bottom: 9px; }
.svc p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.svc .more {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 600; font-size: 14.5px; display: inline-flex; gap: 7px; color: var(--ink);
}

/* Feature columns with tick lists ---------------------------------------- */
.cols { display: grid; gap: 32px; margin-top: 48px; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.col .ic { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; }
.col h3 { font-size: 19px; margin-bottom: 14px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { font-size: 14.5px; color: var(--ink-soft); padding-left: 26px; position: relative; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green-t); border: 1.5px solid var(--green);
}

/* Checklist ("I wish it could do this") ---------------------------------- */
.wishlist { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.wishlist-title { font-size: 38px; font-weight: 700; margin: 14px 0 6px; }
.wishlist-lead { color: var(--muted); }
.partnership-title { font-size: 38px; font-weight: 700; margin: 14px 0 14px; }
.checklist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.checklist li { font-size: 15px; color: var(--ink-soft); padding-left: 30px; position: relative; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--teal); }

/* ==========================================================================
   Success chips
   ========================================================================== */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 44px; }
.chip { border-radius: var(--r); padding: 26px 22px; background: #fff; border: 1px solid var(--line); }
.chip .big { font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 700; font-size: 34px; line-height: 1; }
.chip .lbl { color: var(--muted); font-size: 13.5px; margin-top: 10px; line-height: 1.4; }
.chip.t-pink { background: var(--pink-t); border-color: transparent; }
.chip.t-green { background: var(--green-t); border-color: transparent; }
.chip.t-teal { background: var(--teal-t); border-color: transparent; }
.chip.t-gold { background: var(--gold-t); border-color: transparent; }

/* ==========================================================================
   Process
   ========================================================================== */
.process { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.process-title { font-size: 42px; font-weight: 700; margin: 14px 0 8px; }
.process-media { position: relative; }
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step .n {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 700; font-size: 15px; width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.step h4 { font-size: 19px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 15px; }
.process .ph { aspect-ratio: 1 / 1; border-radius: 50%; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.tcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; box-shadow: var(--shadow); }
.tcard .quote { font-size: 16px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 22px; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .av { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); flex: none; }
.tcard .nm { font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 600; font-size: 15px; }
.tcard .rl { font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   Stats row
   ========================================================================== */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; overflow: hidden; margin-top: 20px;
}
.stats-pair { grid-template-columns: 1fr 1fr; margin-top: 28px; }
.stat { padding: 40px 34px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat .big { font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 700; font-size: 52px; line-height: 1; }
.stat .lbl { color: var(--muted); font-size: 15px; margin-top: 10px; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden; background: var(--navy);
  border-radius: var(--r-block); padding: 72px 56px; text-align: center; color: #fff;
}
.cta-band h2 { font-size: 44px; font-weight: 700; max-width: 720px; margin: 0 auto 18px; }
.cta-band p { color: #c3c6de; font-size: 18px; max-width: 560px; margin: 0 auto 30px; }
.cta-band .btn-primary,
.cta-band .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background: #fff; color: var(--ink); border-color: #fff;
}
.cta-band .btn-primary:hover,
.cta-band .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
.cta-band .wp-block-buttons { justify-content: center; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  position: relative; overflow: hidden; background: var(--navy);
  border-radius: var(--r-block); padding: 60px 56px; color: #fff;
}
.contact .grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.contact h2 { font-size: 40px; font-weight: 700; margin-bottom: 14px; }
.contact .eyebrow + h2 { margin-top: 12px; }
.contact p { color: #c3c6de; font-size: 17px; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .full { grid-column: 1 / -1; }
.form label {
  display: block; font-size: 13px;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 600; margin-bottom: 7px; color: #cdd0e4;
}
.form input, .form textarea {
  width: 100%; border: 0; border-radius: 12px; padding: 13px 15px;
  font-family: var(--wp--preset--font-family--manrope); font-size: 15px;
  background: #fff; color: var(--ink);
}
.form textarea { min-height: 110px; resize: vertical; }

.card-form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 36px; box-shadow: var(--shadow);
}
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform .full { grid-column: 1 / -1; }
.cform label {
  display: block; font-size: 13px;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 600; margin-bottom: 7px; color: var(--ink);
}
.cform input, .cform textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  font-family: var(--wp--preset--font-family--manrope); font-size: 15px;
  background: var(--paper); color: var(--ink);
}
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.cform textarea { min-height: 130px; resize: vertical; }

.cmethods { display: flex; flex-direction: column; gap: 16px; margin: 32px 0; }
.cmethod { display: flex; align-items: center; gap: 16px; }
.cmethod .ci {
  width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.cmethod .ci svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmethod .k2 {
  font-size: 12px; color: var(--muted);
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.cmethod .v2 { font-size: 18px; font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 600; margin-top: 2px; }
.expect { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.expect li { padding-left: 30px; position: relative; color: var(--ink-soft); font-size: 15.5px; }
.expect li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--teal); font-weight: 700; }

/* ==========================================================================
   404
   ========================================================================== */
.error-404 { position: relative; overflow: hidden; text-align: center; padding: 96px 0 112px; }
.error-404__inner { max-width: 720px; margin: 0 auto; }

/* Oversized numeral. Decorative — the <h1> below carries the meaning, so it is
   aria-hidden and screen readers are not read a bare number. */
.error-404__code {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 700;
  font-size: clamp(112px, 15vw, 210px);
  line-height: .85;
  letter-spacing: -.04em;
  color: var(--ink);
  margin: 0 0 8px;
}
.error-404__title { font-size: 44px; font-weight: 700; margin: 0 0 16px; }
.error-404__lead {
  color: var(--muted); font-size: 18px; line-height: 1.6;
  max-width: 560px; margin: 0 auto 32px;
}
.error-404__cta { justify-content: center; }
.error-404__help { color: var(--muted); font-size: 15px; margin-top: 28px; }
.error-404__help a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.error-404__help a:hover { color: var(--teal); }

@media (max-width: 760px) {
  .error-404 { padding: 56px 0 72px; }
  .error-404__title { font-size: 30px; }
  .error-404__lead { font-size: 17px; }
  /* Keep one accent; the others crowd a narrow screen. */
  .error-404 > .blob:nth-of-type(2),
  .error-404 > .blob:nth-of-type(3) { display: none; }
  .error-404 > .blob:nth-of-type(1) { width: 140px; height: 140px; right: -60px; top: 20px; }
}

/* ==========================================================================
   Blog archive (Insights)
   ========================================================================== */
/* Contact page hero heading sits at archive scale, not hero scale. */
.contact-title { font-size: 56px; font-weight: 700; margin: 16px 0 0; }
.contact-title + .sub { margin: 22px 0 0; }

.archive-head { padding: 64px 0 8px; }
.archive-head h1 { font-size: 56px; font-weight: 700; }
.archive-head p { color: var(--muted); font-size: 19px; margin-top: 14px; }
.searchbar { display: flex; gap: 12px; margin: 34px 0 8px; }
.searchbar input {
  flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px;
  font-family: var(--wp--preset--font-family--manrope); font-size: 15px; background: #fff;
}
.searchbar .btn, .searchbar .wp-block-search__button { border-radius: 12px; }

.filterbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.filterbar .filters { margin: 0; padding: 14px 0; }
/* The grid carries its own 40px top margin, so the section's 88px padding
   stacked to 128px under the filter bar. Halved to 64px total. */
.filterbar + .section { padding-top: 24px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.filters button, .filters a {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 600; font-size: 13.5px; padding: 9px 17px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  cursor: pointer; transition: .15s; text-decoration: none;
}
.filters button:hover, .filters a:hover { border-color: var(--ink); color: var(--ink); }
.filters button.active, .filters a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
/* core/post-template's <li> runs through post_class(), which emits a bare
   "post" among its classes — so the list item matched the card styling too and
   drew a second card behind the real one. The element selector keeps the card
   on the pattern's <article>; the list item is only the grid cell. */
.posts > li { display: flex; }
article.post {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  position: relative; flex: 1;
}
/* Stretched link: the whole card is clickable without nesting anchors, which
   post-title's own link would otherwise make invalid. */
.post .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post .img { aspect-ratio: 16 / 10; position: relative; }
.post .img img { width: 100%; height: 100%; object-fit: cover; }
.post .img .wp-block-post-featured-image { margin: 0; height: 100%; }
/* Stand-in cover for a post published without a featured image. */
.cover-fallback {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 22px; text-align: center;
}
.cover-fallback span {
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 700; font-size: 21px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .06em;
}
.cover-fallback.t-gold { background: var(--gold-t); color: var(--gold-d); }
.cover-fallback.t-teal { background: var(--teal-t); color: var(--teal-d); }
.cover-fallback.t-pink { background: var(--pink-t); color: var(--pink-d); }
.cover-fallback.t-green { background: var(--green-t); color: var(--green-d); }
.post .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post .dt { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.post h3 { font-size: 18px; line-height: 1.25; margin-bottom: 12px; }
.post .ex { font-size: 14px; color: var(--muted); margin-bottom: 16px; flex: 1; }
.post .more { font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 600; font-size: 14px; display: inline-flex; gap: 7px; }

/* ==========================================================================
   Article
   ========================================================================== */
.crumbs { padding: 26px 0 0; }
.crumbs .article {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-weight: 500; font-size: 14px; color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--teal); }
.crumbs [aria-current] { color: var(--ink); }

/* 938px less the 40px side padding gives 858px of content, matching the live
   site's article column. Runs ~90 characters per line at 18px — wide for
   long-form, chosen deliberately for consistency with the existing site. */
.article { max-width: 938px; margin: 0 auto; padding: 0 40px; }
.article-hero { padding: 56px 0 10px; }
.article-hero .tag { margin-bottom: 18px; }
.article-hero h1 { font-size: 48px; font-weight: 700; line-height: 1.08; }
.article-hero .meta { color: var(--muted); font-size: 15px; margin-top: 18px; }
.article-cover { aspect-ratio: 16 / 8; border-radius: var(--r-lg); margin: 36px 0 8px; }

.prose { font-size: 18px; color: var(--ink-soft); line-height: 1.75; }
.prose h2 { font-size: 30px; font-weight: 700; color: var(--ink); margin: 44px 0 16px; }
.prose h3 { font-size: 22px; font-weight: 600; color: var(--ink); margin: 32px 0 12px; }
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose blockquote {
  margin: 28px 0; padding: 6px 0 6px 24px; border-left: 3px solid var(--gold);
  font-family: var(--wp--preset--font-family--space-grotesk);
  font-size: 22px; color: var(--ink); font-weight: 500;
}
.prose blockquote p { margin: 0; }

/* ==========================================================================
   Compare / case-study cards
   ========================================================================== */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; background: #fff; margin-top: 18px;
}
.compare .side { padding: 34px; }
.compare .side + .side { border-left: 1px solid var(--line); }
.compare .side h3 { font-size: 22px; display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.compare .side .lead { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.compare .dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.compare li { font-size: 14.5px; color: var(--ink-soft); padding-left: 25px; position: relative; }
.compare li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--paper); border: 1.5px solid var(--muted);
}
.compare-note {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 26px; margin-top: 16px;
}
.compare-note p { font-size: 15px; color: var(--ink-soft); }

.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.cs-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.cs-card .top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.cs-card .metric { font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 700; font-size: 38px; line-height: 1; color: var(--teal); }
.cs-card .client { font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 600; font-size: 15px; }
.cs-card .sector { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cs-card h3 { font-size: 17px; margin: 0 0 10px; }
.cs-card p { font-size: 14px; color: var(--muted); margin-bottom: 18px; flex: 1; }
.cs-card .more { font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 600; font-size: 14px; display: inline-flex; gap: 7px; margin-top: auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--navy); color: #cdd0e4; padding: 66px 40px 34px; }
.foot .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; max-width: 1220px; margin: 0 auto; }
.foot .logo { color: #fff; }
.foot p { font-size: 14px; color: #9a9fc0; margin-top: 14px; max-width: 280px; }
.foot h5 {
  font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 600;
  color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.foot a { color: #b4b8d6; font-size: 14.5px; }
.foot a:hover { color: #fff; }

/* Footer logo + Site-Editor-managed link columns. */
.foot .brand { margin: 0 0 4px; line-height: 0; }
.foot .brand img { max-height: 34px; width: auto; filter: brightness(0) invert(1); }
.foot .brand.is-fallback { line-height: 1; }
.foot .brand.is-fallback .logo { color: #fff; }
.foot .foot-col .wp-block-navigation__container { gap: 11px; }
.foot .foot-col .wp-block-navigation-item__content { color: #b4b8d6; font-size: 14.5px; text-decoration: none; }
.foot .foot-col .wp-block-navigation-item__content:hover { color: #fff; }
.foot .bar p { margin: 0; }
.foot .bar {
  max-width: 1220px; margin: 44px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; color: #7d82a6; font-size: 13px;
}
.dots { display: flex; gap: 10px; }
.dots a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center; color: #e6e8f5; transition: .15s;
}
.dots a:hover { background: #fff; color: var(--navy); }
.dots a svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   Block bridging — core blocks that need to inherit design primitives
   ========================================================================== */
.wp-block-post-template.posts { margin: 40px 0 0; padding: 0; }
.wp-block-query-pagination { display: flex; justify-content: center; margin-top: 44px; }
.wp-block-navigation .wp-block-navigation__container { gap: 32px; }
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--space-grotesk); font-weight: 500; font-size: 16px;
}
.wp-block-group.has-background { border-radius: var(--r-block); }
.wp-block-post-title a { text-decoration: none; }
.wp-block-post-featured-image img { border-radius: 0; }

/* ==========================================================================
   Responsive — breakpoints reproduced from the design source of truth
   ========================================================================== */
@media (max-width: 960px) {
  .hero .grid, .hero.rev .grid, .split, .process, .wishlist, .contact .grid { grid-template-columns: 1fr; }
  .grid3, .cols-4, .cols-3, .tcards, .posts, .cs-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; }
  .hero h1 { font-size: 44px; }
  .nav-toggle { display: flex; }
  .nav .links, .nav .rt { display: none; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 22px; }
  .nav .inner { padding: 14px 22px; }
  .section { padding: 56px 0; }
  .hero { padding: 44px 0 52px; }
  .hero > .blob:nth-of-type(2) { display: none; }
  .hero > .blob:nth-of-type(1) { right: -96px; top: 120px; }
  .hero h1 { font-size: 36px; }
  .hero .grid, .hero.rev .grid { gap: 34px; }
  .hero .sub { font-size: 17px; }
  .sec-head h2 { font-size: 30px; }
  /* Side by side leaves the heading too narrow to read, so the action drops
     below it and stretches to the column. */
  .sec-head.with-action { flex-direction: column; align-items: stretch; gap: 22px; }
  .sec-head-action { justify-content: center; }
  .split h2 { font-size: 28px; }
  .services, .band, .cta-band, .contact { padding: 40px 24px; }
  .band h2, .cta-band h2, .contact h2 { font-size: 28px; }
  .grid3, .cols-4, .cols-3, .tcards, .posts, .cs-grid, .compare, .cform { grid-template-columns: 1fr; }
  .compare .side + .side { border-left: 0; border-top: 1px solid var(--line); }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .stat .big { font-size: 44px; }
  .form { grid-template-columns: 1fr; }
  .foot { padding: 48px 22px 30px; }
  .foot .top { grid-template-columns: 1fr; gap: 28px; }
  .foot .bar { flex-direction: column; gap: 14px; align-items: flex-start; }
  .stage { min-height: 330px; }
  .device { width: 188px; }
  .process { gap: 34px; }
  .archive-head { padding: 44px 0 6px; }
  .archive-head h1 { font-size: 38px; }
  .searchbar { flex-direction: column; }
  .article, .article-hero .article { padding: 0 22px; }
  .article-hero h1 { font-size: 32px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 24px; }
  .prose blockquote { font-size: 19px; }
}