/*
Theme Name: Profyce
Theme URI: https://profyce.com
Author: Profyce
Author URI: https://profyce.com
Description: Faithful WordPress replica of the Profyce marketing site. Fixed-price digital marketing for North Carolina small businesses. Includes the programmatic locations x services matrix, blog templates, and an owner-led lead form.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
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: profyce
Tags: business, one-column, custom-menu, custom-logo, blog, wide-blocks
*/

/* ==========================================================================
   PROFYCE THEME - SHARED CLASS INVENTORY
   --------------------------------------------------------------------------
   Every class below is defined in this file and is safe to use from any
   template (front-page.php, page-*.php, single.php, and the generated
   services / locations / location-service templates).

   LAYOUT
     .container                 max 80rem  (default page width)
     .container--xl             max 72rem
     .container--lg             max 64rem
     .container--md             max 56rem
     .container--sm             max 48rem  (prose / narrow copy)
     .section                   6rem top+bottom (8rem at >=768px)
     .section--tight            4rem / 5rem
     .section--lead             page-intro band (6rem / 7rem, centered)
     .section--tinted           subtle grey wash (rgba(10,10,10,.02))
     .section--border-top       1px top rule
     .section--border-y         1px top + bottom rule
     .stack / .stack--sm/lg     vertical rhythm between direct children

   GRID
     .grid                      base grid, 1 col mobile
     .grid--2 .grid--3 .grid--4 .grid--5     responsive column counts
     .grid--sidebar             1.4fr / 1fr at >=768px
     .grid--split               0.9fr / 1.1fr at >=768px
     .grid--gap-sm/--gap-lg     tighten or loosen gutters
     .grid--align-center        align-items:center

   TYPOGRAPHY
     .h-display                 hero h1 (3rem -> 4.5rem)
     .h-1 .h-2 .h-3 .h-4        section headings
     .lead                      1.125rem intro paragraph, muted
     .muted                     muted foreground colour
     .faint                     #999
     .eyebrow                   uppercase tracked label, brand orange
     .kicker                    uppercase tracked label, muted
     .text-gradient             orange -> pink gradient text
     .center                    text-align:center
     .balance                   text-wrap:balance
     .measure                   max-width 42rem

   BUTTONS  (compose: .btn + one variant + optional size)
     .btn                       pill base
     .btn--gradient             brand gradient fill, white text (primary CTA)
     .btn--ghost                hairline border, transparent fill
     .btn--white                white fill, dark text (use on dark panels)
     .btn--onDark               white hairline border on dark panels
     .btn--lg                   larger hero-size padding
     .btn--sm                   compact (header)
     .btn--block                full width
     .btn__icon                 inline svg inside a button (16px)
     .link-arrow                inline text link with trailing arrow

   SURFACES
     .card                      white card, hairline border, soft shadow
     .card--hover               lift + deepen shadow on hover
     .card--featured            pink hairline + pink-tinted gradient wash
     .card--pad-sm/--pad-lg     padding overrides (default 1.75rem)
     .card--flush               padding:0 (for media-topped cards)
     .card--dark                dark panel (foreground bg, white text)
     .bento-shadow              layered shadow with no border/background
     .panel                     tinted rounded block, no shadow

   PILLS / BADGES / TAGS
     .pill                      rounded-full white chip w/ border (link-safe)
     .pill--dot                 adds a gradient dot before the label
     .pill__meta                muted suffix inside a pill
     .badge                     tiny uppercase label
     .badge--brand              gradient fill, white text
     .badge--pink               pink tint on pink-10 background
     .badge--outline            hairline border

   ICONS / AVATARS
     .icon-tile                 48px gradient rounded square, white svg
     .icon-tile--sm             40px  |  .icon-tile--lg  56px
     .icon-outline              hairline square, brand-orange svg
     .avatar                    36px gradient circle for initials
     .avatar--lg                48px
     .icon                      generic 1em-ish inline svg sizing helper
     .icon--sm .icon--lg

   LISTS
     .check-list                deliverable list with orange check svg
     .dot-list                  bullet list with small orange dot
     .link-list                 plain vertical link list (footer / nav cols)

   STATS
     .stat-grid                 2 col -> 4 col grid of .stat
     .stat                      card wrapper
     .stat__value               gradient display number
     .stat__label               uppercase tracked caption

   STEPS / NUMBERS
     .step-num                  large ghosted gradient numeral (01, 02...)
     .num-tile                  small gradient square with a numeral

   HERO / DECOR
     .hero                      relative, overflow hidden, hero padding
     .hero__grid                1.2fr / 1fr at >=768px
     .hero__media               constrained illustration column
     .blob                      absolutely positioned soft radial glow
     .blob--warm .blob--pink    colour variants
     .gradient-mesh             ::before radial wash (use on dark panels)
     .grain                     ::after film grain overlay

   CTA BAND
     .cta-band                  outer padding wrapper
     .cta-band__inner           dark rounded panel
     .cta-band__actions         button row

   COMPARISON TABLE
     .compare                   bordered rounded table shell
     .compare__head             header row
     .compare__row              a row (auto zebra on :nth-child(even))
     .compare__was              struck-through "before" cell
     .compare__now              emphasised "after" cell

   FAQ / DEFINITION LISTS
     .faq                       dl wrapper
     .faq__q  .faq__a
     .accordion                 <details> based accordion
     .accordion__item / __q / __a

   FORMS
     .form                      vertical rhythm
     .form__row                 2-up field row (stacks under 640px)
     .field / .field__label / .field__input / .field__select / .field__textarea
     .field__req                required asterisk
     .form__note                small centered reassurance line
     .form__alert               error state block
     .form__success             success state block
     .honeypot                  visually removed bot trap

   HEADER / FOOTER
     .site-header .site-header__inner .brand .brand__mark .brand__word
     .site-nav .site-nav__link .site-header__actions
     .nav-toggle .nav-toggle__bar  (mobile)
     .site-footer .site-footer__grid .footer-col .footer-col__title
     .site-footer__bottom

   BLOG
     .post-grid                 3-up responsive card grid
     .post-card .post-card__media .post-card__body .post-card__meta
     .post-card__title .post-card__excerpt .post-card__more
     .article .article__head .article__meta .article__hero
     .prose                     long-form WordPress content styles
     .pagination                numbered pager

   ANIMATION
     .reveal                    fade+rise once .is-visible is added by JS.
                                Hidden state is scoped to html.js-reveal, so
                                content stays visible if JS never runs.
     .reveal[data-delay="1..6"] staggered delay steps
     (all motion is disabled under prefers-reduced-motion)

   UTILITY
     .sr-only  .no-scrollbar  .flow-tight  .mt-0 .mt-sm .mt-md .mt-lg .mt-xl
     .row  .row--between  .row--end  .row--wrap  .gap-sm .gap-md
     .full  .hide-sm  .hide-md-down
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS  (extracted verbatim from the production build)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Core palette */
  --background: #fafafa;
  --foreground: #0a0a0a;
  --card: #fff;
  --card-foreground: #0a0a0a;
  --popover: #fff;
  --popover-foreground: #0a0a0a;
  --primary: #f05;
  --primary-foreground: #fff;
  --secondary: #f5f5f5;
  --secondary-foreground: #0a0a0a;
  --muted: #f0f0f0;
  --muted-foreground: #666;
  --accent: #ff8c42;
  --accent-foreground: #0a0a0a;
  --destructive: #f34;
  --border: #0a0a0a14;
  --input: #0a0a0a14;
  --ring: #f05;
  --color-white: #fff;
  --color-red-600: #dc2626;
  --color-red-50: #fef2f2;

  /* Brand */
  --brand-orange: #ff8c42;
  --brand-pink: #f05;
  --brand-gradient: linear-gradient(135deg, #ff8c42, #f05);
  --surface-hover: #f0f0f0;
  --text-faint: #999;

  /* Type families */
  --font-inter: "Inter", "Inter Fallback";
  --font-outfit: "Outfit", "Outfit Fallback";
  --default-font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-display: "Outfit", "Outfit Fallback", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --default-mono-font-family: var(--font-mono);

  /* Type scale */
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;

  --tracking-tight: -.025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;

  /* Radii */
  --radius: .75rem;
  --radius-sm: calc(.75rem * .6);
  --radius-md: calc(.75rem * .85);
  --radius-lg: var(--radius);
  --radius-xl: calc(.75rem * 1.4);
  --radius-2xl: calc(.75rem * 1.8);
  --radius-3xl: calc(.75rem * 2.5);
  --radius-4xl: 2rem;
  --radius-full: 9999px;

  /* Containers */
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  /* Spacing + motion */
  --spacing: .25rem;
  --gutter: 1.5rem;
  --blur-xl: 24px;
  --blur-3xl: 64px;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);

  /* Elevation */
  --shadow-card:
    0 1px 3px rgba(0, 0, 0, .04),
    0 6px 24px rgba(0, 0, 0, .03);
  --shadow-card-hover:
    0 4px 12px rgba(0, 0, 0, .06),
    0 12px 40px rgba(0, 0, 0, .04);
  --shadow-bento:
    0 1px 2px rgba(0, 0, 0, .03),
    0 4px 16px rgba(0, 0, 0, .04),
    0 12px 48px rgba(0, 0, 0, .02);
  --shadow-cta: 0 4px 16px -4px rgba(255, 0, 85, .4);
  --shadow-cta-lg: 0 8px 32px -4px rgba(255, 0, 85, .35);
  --shadow-cta-lg-hover: 0 12px 40px -4px rgba(255, 0, 85, .45);
}


/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, not `hidden`: overflow-x:hidden forces overflow-y to auto, which
     makes this element a scroll container and silently kills position:sticky
     (the sticky header detached and scrolled away at 390px). `clip` contains
     the oversized decorative orbs without that side effect. */
  overflow-x: clip;
}

body {
  min-height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--default-font-family);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;   /* see note on html above: hidden breaks sticky */
}

img,
svg,
video,
canvas,
iframe { display: block; max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--default-transition-duration) var(--default-transition-timing-function);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

hr { border: 0; border-top: 1px solid var(--border); }

::selection { background: var(--brand-pink); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--foreground);
  color: #fff;
  border-radius: 0 0 var(--radius) 0;
  font-weight: var(--font-weight-semibold);
}
.skip-link:focus { left: 0; }

.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;
}

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }


/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-7xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--xl { max-width: var(--container-6xl); }
.container--lg { max-width: var(--container-5xl); }
.container--md { max-width: var(--container-4xl); }
.container--sm { max-width: var(--container-3xl); }

.section { padding-block: 6rem; }
.section--tight { padding-block: 4rem; }
.section--lead { padding-block: 6rem; }
.section--flush { padding-block: 0; }
.section--tinted { background: rgba(10, 10, 10, .02); }
.section--border-top { border-top: 1px solid var(--border); }
.section--border-y { border-block: 1px solid var(--border); }
.section--relative { position: relative; }
.section--clip { position: relative; overflow: hidden; }

@media (min-width: 768px) {
  .section { padding-block: 8rem; }
  .section--tight { padding-block: 5rem; }
  .section--lead { padding-block: 7rem; }
}

.stack { display: flex; flex-direction: column; gap: 1.5rem; }
.stack--sm { gap: .75rem; }
.stack--lg { gap: 2.5rem; }

.row { display: flex; align-items: center; gap: 1rem; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--wrap { flex-wrap: wrap; }
.row--start { align-items: flex-start; }
.row--baseline { align-items: baseline; }
.gap-sm { gap: .5rem; }
.gap-md { gap: 1rem; }

.center { text-align: center; }
.balance { text-wrap: balance; }
.measure { max-width: 42rem; }
.center .measure,
.measure--auto { margin-inline: auto; }
.full { width: 100%; }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: .75rem; }
.mt-md { margin-top: 1.25rem; }
.mt-lg { margin-top: 2.5rem; }
.mt-xl { margin-top: 3.5rem; }

/* Visibility utilities are re-asserted at the end of this file so they win
   over component rules such as .btn { display: inline-flex }. */
@media (max-width: 767px) { .hide-md-down { display: none !important; } }


/* --------------------------------------------------------------------------
   4. GRID
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.grid--gap-sm { gap: .75rem; }
.grid--gap-lg { gap: 2.5rem; }
.grid--align-center { align-items: center; }
.grid--align-start { align-items: start; }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: 1.4fr 1fr; }
  .grid--split { grid-template-columns: .9fr 1.1fr; }
  .grid--split-wide { grid-template-columns: 1.2fr 1fr; }
  .grid--narrow-first { grid-template-columns: 1fr 2fr; }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.h-display {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold);
  line-height: .95;
  letter-spacing: var(--tracking-tight);
}
.h-1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tight);
}
.h-2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tight);
}
.h-3 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
}
.h-4 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

@media (min-width: 768px) {
  .h-display { font-size: var(--text-6xl); }
  .h-1 { font-size: var(--text-5xl); }
  .h-2 { font-size: var(--text-4xl); }
  .h-3 { font-size: var(--text-2xl); }
}
@media (min-width: 1024px) {
  .h-display { font-size: var(--text-7xl); }
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}
@media (min-width: 768px) {
  .lead { font-size: var(--text-xl); }
}
.lead--sm { font-size: var(--text-base); }
@media (min-width: 768px) { .lead--sm { font-size: var(--text-lg); } }

.muted { color: var(--muted-foreground); }
.faint { color: var(--text-faint); }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.bold { font-weight: var(--font-weight-bold); }
.semibold { font-weight: var(--font-weight-semibold); }
.display-font { font-family: var(--font-display); }

.eyebrow,
.kicker {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .2em;
}
.eyebrow { color: var(--brand-orange); }
.kicker { color: var(--muted-foreground); }

.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: var(--font-weight-semibold);
  color: var(--brand-orange);
}
.link-arrow:hover { opacity: .8; }

.underline-hover:hover { text-decoration: underline; text-underline-offset: 4px; }


/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform .2s var(--default-transition-timing-function),
    box-shadow .2s var(--default-transition-timing-function),
    background-color .2s var(--default-transition-timing-function),
    border-color .2s var(--default-transition-timing-function);
}

.btn--gradient {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn--gradient:hover { transform: scale(1.03); }

.btn--ghost {
  border-color: rgba(10, 10, 10, .15);
  color: var(--foreground);
}
.btn--ghost:hover {
  border-color: rgba(10, 10, 10, .3);
  background: rgba(10, 10, 10, .03);
}

.btn--white {
  background: #fff;
  color: var(--foreground);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}
.btn--white:hover { transform: scale(1.03); }

.btn--onDark {
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.btn--onDark:hover {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--text-base);
}
.btn--lg.btn--gradient { box-shadow: var(--shadow-cta-lg); }
.btn--lg.btn--gradient:hover { box-shadow: var(--shadow-cta-lg-hover); }

.btn--sm { padding: .5rem 1rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.btn__icon { width: 1rem; height: 1rem; flex: none; }
.btn:hover .btn__icon--slide { transform: translateX(2px); }
.btn__icon--slide { transition: transform .2s var(--default-transition-timing-function); }


/* --------------------------------------------------------------------------
   7. SURFACES
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: block;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  transition:
    transform .3s var(--default-transition-timing-function),
    box-shadow .3s var(--default-transition-timing-function),
    border-color .3s var(--default-transition-timing-function);
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.card--pad-sm { padding: 1.25rem; }
.card--pad-lg { padding: 2rem; }
.card--flush { padding: 0; overflow: hidden; }
.card--round-lg { border-radius: var(--radius-3xl); }
.card--flex { display: flex; flex-direction: column; height: 100%; }

.card--featured {
  border-color: rgba(255, 0, 85, .3);
  background: linear-gradient(to bottom, rgba(255, 0, 85, .05), var(--card));
  box-shadow: var(--shadow-bento);
}

.card--dark {
  background: var(--foreground);
  color: #fff;
  border-color: rgba(255, 255, 255, .08);
}
.card--dark .muted { color: rgba(255, 255, 255, .7); }

.panel {
  background: rgba(10, 10, 10, .02);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
}

.bento-shadow { box-shadow: var(--shadow-bento); }

@media (min-width: 768px) {
  .card--pad-lg { padding: 2.5rem; }
}


/* --------------------------------------------------------------------------
   8. PILLS / BADGES / TAGS
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-bento);
  transition:
    transform .2s var(--default-transition-timing-function),
    border-color .2s var(--default-transition-timing-function),
    background-color .2s var(--default-transition-timing-function);
}
a.pill:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 140, 66, .3);
  background: rgba(255, 140, 66, .05);
}
.pill--muted { color: var(--muted-foreground); }
.pill--dot::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: var(--radius-full);
  background: var(--brand-gradient);
  flex: none;
}
.pill__meta {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  transition: color .2s var(--default-transition-timing-function);
}
a.pill:hover .pill__meta { color: var(--brand-orange); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .125rem .625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  line-height: 1.6;
  white-space: nowrap;
}
.badge--brand { background: var(--brand-gradient); color: #fff; }
.badge--pink {
  background: rgba(255, 0, 85, .1);
  color: var(--brand-pink);
  letter-spacing: var(--tracking-wider);
}
.badge--outline {
  border-color: rgba(255, 0, 85, .3);
  background: rgba(255, 0, 85, .1);
  color: var(--brand-pink);
}
.badge--orange {
  background: rgba(255, 140, 66, .1);
  color: var(--brand-orange);
  letter-spacing: var(--tracking-widest);
}
.badge--corner {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}


/* --------------------------------------------------------------------------
   9. ICONS / AVATARS
   -------------------------------------------------------------------------- */
.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-xl);
  background: var(--brand-gradient);
  color: #fff;
}
.icon-tile--sm { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); }
.icon-tile--xs { width: 2rem; height: 2rem; border-radius: var(--radius-md); }
.icon-tile--lg { width: 3.5rem; height: 3.5rem; }
.icon-tile svg { width: 1.5rem; height: 1.5rem; }
.icon-tile--sm svg { width: 1.25rem; height: 1.25rem; }
.icon-tile--xs svg { width: 1rem; height: 1rem; }

.icon-outline {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--brand-orange);
}
.icon-outline svg { width: 1rem; height: 1rem; }

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--brand-gradient);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-display);
}
.avatar--lg { width: 3rem; height: 3rem; font-size: var(--text-base); }

.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--xs { width: .875rem; height: .875rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
.icon--orange { color: var(--brand-orange); }
.icon--muted { color: var(--muted-foreground); }


/* --------------------------------------------------------------------------
   10. LISTS
   -------------------------------------------------------------------------- */
.check-list { display: flex; flex-direction: column; gap: .625rem; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.check-list svg {
  width: 1rem;
  height: 1rem;
  margin-top: .3rem;
  flex: none;
  color: var(--brand-orange);
}

.dot-list { display: flex; flex-direction: column; gap: .625rem; }
.dot-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.dot-list li::before {
  content: "";
  width: .25rem;
  height: .25rem;
  margin-top: .65rem;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--brand-orange);
}

.link-list { display: flex; flex-direction: column; gap: .625rem; }
.link-list a {
  font-size: var(--text-sm);
  color: rgba(10, 10, 10, .8);
}
.link-list a:hover { color: var(--foreground); }


/* --------------------------------------------------------------------------
   11. STATS
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat {
  text-align: center;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}
.stat--bare {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: center;
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.1;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat__label {
  margin-top: .5rem;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
}
@media (min-width: 768px) {
  .stat { text-align: left; }
  .stat--bare { text-align: left; }
  .stat__value { font-size: var(--text-5xl); }
}


/* --------------------------------------------------------------------------
   12. STEPS / NUMBERS
   -------------------------------------------------------------------------- */
.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  opacity: .3;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.step-num--lg { font-size: var(--text-6xl); }

.num-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-xl);
  background: var(--brand-gradient);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

.timeline-row {
  display: grid;
  gap: .75rem;
}
@media (min-width: 768px) {
  .timeline-row {
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 1.5rem;
  }
}
.timeline-row__day {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--brand-orange);
}


/* --------------------------------------------------------------------------
   13. HERO / DECOR
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 5rem;
}
@media (min-width: 768px) {
  .hero { padding-block: 8rem; }
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 768px) {
  .hero__grid { grid-template-columns: 1.2fr 1fr; gap: 4rem; }
}
.hero__copy { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
.hero__media { position: relative; width: 100%; max-width: 32rem; margin-inline: auto; }
.hero__media img { width: 100%; }

.blob {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(var(--blur-3xl));
  pointer-events: none;
  z-index: 0;
}
.blob--warm { background: radial-gradient(circle, rgba(255, 140, 66, .12), rgba(255, 0, 85, .1) 45%, transparent 70%); }
.blob--pink { background: radial-gradient(circle, rgba(255, 0, 85, .18), transparent 70%); }
.blob--soft { background: radial-gradient(circle, rgba(255, 0, 85, .06), rgba(255, 140, 66, .04) 45%, transparent 70%); }
.blob--onDark { background: radial-gradient(circle, rgba(255, 0, 85, .25), rgba(255, 140, 66, .15) 45%, transparent 70%); }

.gradient-mesh { position: relative; overflow: hidden; }
.gradient-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(255, 140, 66, .08), transparent),
    radial-gradient(ellipse 60% 60% at 80% 60%, rgba(255, 0, 85, .06), transparent);
  pointer-events: none;
  z-index: 0;
}

.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rule-gradient {
  height: 1px;
  width: 6rem;
  border: 0;
  background: linear-gradient(to right, rgba(255, 140, 66, .4), rgba(255, 0, 85, .4));
}


/* --------------------------------------------------------------------------
   14. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { padding: 5rem var(--gutter); }
@media (min-width: 768px) { .cta-band { padding-block: 7rem; } }

.cta-band__inner {
  position: relative;
  max-width: var(--container-5xl);
  margin-inline: auto;
  padding: 3rem;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background: var(--foreground);
  color: #fff;
}
@media (min-width: 768px) { .cta-band__inner { padding: 4rem; } }

.cta-band__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  .cta-band__grid { grid-template-columns: 1.2fr 1fr; align-items: center; }
}
.cta-band__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.05;
  color: #fff;
}
@media (min-width: 768px) { .cta-band__title { font-size: var(--text-4xl); } }
.cta-band__body {
  margin-top: 1rem;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, .7);
}
@media (min-width: 768px) { .cta-band__body { font-size: var(--text-lg); } }
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
@media (min-width: 640px) { .cta-band__actions { flex-direction: row; } }
@media (min-width: 768px) { .cta-band__actions { flex-direction: column; } }
@media (min-width: 1024px) { .cta-band__actions { flex-direction: row; } }


/* --------------------------------------------------------------------------
   15. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.compare {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card);
}
.compare__head,
.compare__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}
.compare__head {
  background: rgba(10, 10, 10, .02);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--muted-foreground);
}
.compare__row { font-size: var(--text-sm); }
@media (min-width: 768px) { .compare__row { font-size: var(--text-base); } }
.compare__row:nth-child(even) { background: rgba(10, 10, 10, .015); }
.compare__was { color: var(--muted-foreground); text-decoration: line-through; }
.compare__now { text-align: right; font-weight: var(--font-weight-medium); }
.compare__head span:last-child { text-align: right; }
.compare__sep {
  width: .375rem;
  height: .375rem;
  border-radius: var(--radius-full);
  background: var(--brand-pink);
}
.compare__head svg { width: 1rem; height: 1rem; color: var(--brand-orange); }


/* --------------------------------------------------------------------------
   16. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 1.75rem; }
.faq__q {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
}
@media (min-width: 768px) { .faq__q { font-size: var(--text-lg); } }
.faq__a {
  margin: .5rem 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  cursor: pointer;
  list-style: none;
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q::after {
  content: "";
  flex: none;
  width: .625rem;
  height: .625rem;
  border-right: 2px solid var(--muted-foreground);
  border-bottom: 2px solid var(--muted-foreground);
  transform: rotate(45deg);
  transition: transform .2s var(--default-transition-timing-function);
}
.accordion__item[open] .accordion__q::after { transform: rotate(-135deg); }
.accordion__a {
  padding-bottom: 1.5rem;
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}
@media (min-width: 768px) { .accordion__q { font-size: var(--text-lg); } }


/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: block; }
.field__label {
  display: block;
  margin-bottom: .375rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}
.field__req { color: var(--brand-pink); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  outline: none;
  transition:
    border-color .2s var(--default-transition-timing-function),
    box-shadow .2s var(--default-transition-timing-function);
}
.field__textarea { resize: vertical; min-height: 7.5rem; }
.field__select { appearance: none; padding-right: 2.5rem; background-image: none; }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: rgba(255, 0, 85, .5);
  box-shadow: 0 0 0 2px rgba(255, 0, 85, .1);
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-faint); }

.field--select { position: relative; }
.field--select::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1.15rem;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--muted-foreground);
  border-bottom: 2px solid var(--muted-foreground);
  transform: rotate(45deg);
  pointer-events: none;
}

.form__note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.form__alert {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem;
  border-radius: var(--radius-xl);
  background: var(--color-red-50);
  color: var(--color-red-600);
  font-size: var(--text-sm);
}
.form__alert svg { width: 1rem; height: 1rem; flex: none; }
.form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding-block: 3rem;
  text-align: center;
}
.form__success .icon-tile {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  margin-bottom: .75rem;
}
.form__success .icon-tile svg { width: 2rem; height: 2rem; }

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.is-hidden { display: none !important; }
.is-busy { opacity: .6; pointer-events: none; }


/* --------------------------------------------------------------------------
   18. SITE HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(250, 250, 250, .8);
  -webkit-backdrop-filter: blur(var(--blur-xl));
  backdrop-filter: blur(var(--blur-xl));
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
  max-width: var(--container-7xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tight);
  font-size: var(--text-lg);
}
.brand__mark { width: 28px; height: 28px; border-radius: var(--radius-md); }
.brand--md { font-size: var(--text-xl); }
.brand--md .brand__mark { width: 32px; height: 32px; }

.site-nav { display: none; }
@media (min-width: 900px) {
  .site-nav { display: flex; align-items: center; gap: 1.75rem; }
}
.site-nav ul { display: flex; align-items: center; gap: 1.75rem; }
.site-nav__link,
.site-nav a {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: var(--foreground); }

.site-header__actions { display: flex; align-items: center; gap: .75rem; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--foreground);
  border-radius: 2px;
  transition: transform .2s var(--default-transition-timing-function), opacity .2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--background);
}
.mobile-nav.is-open { display: block; }
@media (min-width: 900px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav ul {
  display: flex;
  flex-direction: column;
  max-width: var(--container-7xl);
  margin-inline: auto;
  padding: 1rem var(--gutter) 1.5rem;
  gap: .25rem;
}
.mobile-nav a {
  display: block;
  padding: .75rem .25rem;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--border);
}
.mobile-nav li:last-child a { border-bottom: 0; }


/* --------------------------------------------------------------------------
   19. SITE FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(10, 10, 10, .02);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 4rem;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.site-footer__about {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 24rem;
}
.site-footer__about p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}
.site-footer__geo {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.footer-col__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted-foreground);
}
.footer-col ul { margin-top: 1rem; }
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
@media (min-width: 768px) {
  .site-footer__bottom { flex-direction: row; align-items: center; }
}
.site-footer__legal { display: flex; gap: 1.25rem; }
.site-footer__legal a:hover { color: var(--foreground); }


/* --------------------------------------------------------------------------
   20. BLOG
   -------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: rgba(10, 10, 10, .02);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  transition:
    border-color .2s var(--default-transition-timing-function),
    background-color .2s var(--default-transition-timing-function);
}
.post-card:hover {
  border-color: rgba(10, 10, 10, .2);
  background: rgba(10, 10, 10, .03);
}
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  background: rgba(10, 10, 10, .02);
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s var(--default-transition-timing-function);
}
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__media--empty {
  background: linear-gradient(135deg, rgba(255, 140, 66, .15), rgba(255, 0, 85, .15));
}
.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
}
.post-card__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
}
.post-card__meta .sep {
  width: .25rem;
  height: .25rem;
  border-radius: var(--radius-full);
  background: rgba(102, 102, 102, .5);
}
.post-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}
.post-card__excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__more {
  margin-top: auto;
  padding-top: .25rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-orange);
}

.article__head { padding-top: 4rem; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
}
.article__meta span { display: inline-flex; align-items: center; gap: .375rem; }
.article__meta .sep {
  width: .25rem;
  height: .25rem;
  border-radius: var(--radius-full);
  background: rgba(102, 102, 102, .5);
}
.article__title {
  margin-top: 1.25rem;
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.05;
}
@media (min-width: 768px) { .article__title { font-size: var(--text-6xl); } }
.article__excerpt {
  margin-top: 1.25rem;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}
@media (min-width: 768px) { .article__excerpt { font-size: var(--text-xl); } }
.article__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-top: 2.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  background: rgba(10, 10, 10, .02);
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 3.5rem;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  background: var(--card);
}
.pagination .page-numbers:hover { border-color: rgba(10, 10, 10, .3); }
.pagination .page-numbers.current {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
}


/* --------------------------------------------------------------------------
   21. PROSE (WordPress content)
   -------------------------------------------------------------------------- */
.prose {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(10, 10, 10, .88);
}
.prose > * + * { margin-top: 1.5rem; }
.prose h2 {
  margin-top: 3rem;
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
}
.prose h3 {
  margin-top: 2.25rem;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}
.prose h4 { margin-top: 2rem; font-size: var(--text-xl); }
.prose a {
  color: var(--brand-orange);
  font-weight: var(--font-weight-medium);
}
.prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: var(--font-weight-semibold); color: var(--foreground); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .5rem; }
.prose li::marker { color: var(--brand-orange); }
.prose blockquote {
  padding-left: 1.25rem;
  border-left: 3px solid var(--brand-pink);
  color: rgba(10, 10, 10, .9);
  font-style: italic;
}
.prose img,
.prose figure { border-radius: var(--radius-2xl); overflow: hidden; }
.prose figcaption {
  margin-top: .5rem;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  text-align: center;
}
.prose code {
  padding: .15em .4em;
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--muted);
  border-radius: var(--radius-sm);
}
.prose pre {
  padding: 1.25rem;
  overflow-x: auto;
  background: var(--foreground);
  color: #fff;
  border-radius: var(--radius-2xl);
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.prose th, .prose td {
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  text-align: left;
}
.prose th { background: rgba(10, 10, 10, .02); font-weight: var(--font-weight-semibold); }
.prose hr { margin-block: 2.5rem; }
.table-scroll { overflow-x: auto; }

/* WordPress core alignment + caption classes */
.alignleft { float: left; margin: .5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .5rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .screen-reader-text { font-size: var(--text-sm); color: var(--muted-foreground); }
.sticky, .gallery-caption, .bypostauthor { }


/* --------------------------------------------------------------------------
   22. ANIMATION
   -------------------------------------------------------------------------- */
/* Reveal-on-scroll is PROGRESSIVE ENHANCEMENT, deliberately.
   The hidden state is scoped to .js-reveal, which functions.php stamps onto
   <html> from an early inline script. If that script never runs for any reason
   (an optimizer strips or defers it, CSP blocks it, an earlier JS error halts
   parsing, JS is disabled), .js-reveal is absent, nothing is ever hidden, and
   the page renders in full. The failure mode is "no animation", never
   "invisible content". Do not move opacity:0 onto bare .reveal: roughly 60
   elements across the static pages and all 135 matrix pages carry .reveal,
   so that single change would blank most of the site if one script failed. */
.reveal {
  transition:
    opacity .6s var(--default-transition-timing-function),
    transform .6s var(--default-transition-timing-function);
  will-change: opacity, transform;
}
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .06s; }
.reveal[data-delay="2"] { transition-delay: .12s; }
.reveal[data-delay="3"] { transition-delay: .18s; }
.reveal[data-delay="4"] { transition-delay: .24s; }
.reveal[data-delay="5"] { transition-delay: .3s; }
.reveal[data-delay="6"] { transition-delay: .36s; }

.spin { animation: profyce-spin 1s linear infinite; }
@keyframes profyce-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .card--hover:hover,
  a.pill:hover { transform: none !important; }
}


/* --------------------------------------------------------------------------
   23. PAGE-SPECIFIC COMPOSITIONS
   (shared so generated service / location templates can reuse them)
   -------------------------------------------------------------------------- */

/* Bento service card: first item spans 2 columns and goes horizontal */
.service-card { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.service-card__thumb {
  width: 7rem;
  height: 7rem;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.service-card__thumb img { width: 100%; height: 100%; object-fit: contain; }
.service-card__body { display: flex; flex: 1; flex-direction: column; gap: .5rem; }
.service-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .75rem;
}
.service-card__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}
@media (min-width: 768px) {
  .service-card--wide { grid-column: span 2; }
  .service-card--wide .service-card { flex-direction: row; align-items: flex-start; gap: 2rem; }
}

/* Compact service chip row */
.service-chip { display: flex; align-items: center; gap: .75rem; }
.service-chip__name { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.service-chip__price { font-size: var(--text-xs); color: var(--muted-foreground); }

/* Price block used on pricing cards and service pages */
.price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: 1.25rem;
}
.price__num {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}
.price__suffix {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
}

/* Quote-only row card */
.quote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.quote-row__name { font-weight: var(--font-weight-medium); }
.quote-row__desc { font-size: var(--text-xs); color: var(--muted-foreground); }
.quote-row__price {
  flex: none;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
}
.quote-row__tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
}

/* Testimonial figure */
.quote-card { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; }
.quote-card blockquote {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(10, 10, 10, .92);
}
.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.quote-card__role { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.quote-card__sub { font-size: var(--text-xs); color: var(--muted-foreground); }

/* Case study outcome tiles */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}
.outcome {
  padding: .75rem;
  background: rgba(10, 10, 10, .02);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.outcome__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
}
.outcome__value {
  margin-top: .25rem;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

/* Roster member card */
.roster-card { display: flex; flex-direction: column; gap: .75rem; height: 100%; }
.roster-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
}
.roster-card__jss {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
}
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Process step row: number column / body / detail list */
.step-row { display: grid; gap: 1.5rem; }
.step-row__head { display: flex; flex-direction: row; align-items: center; gap: 1rem; }
.step-row__detail { }
@media (min-width: 768px) {
  .step-row { grid-template-columns: auto 1fr 1fr; gap: 2.5rem; }
  .step-row__head { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .step-row__detail { border-left: 1px solid var(--border); padding-left: 2rem; }
}

/* Pain point list (homepage) */
.pain { display: flex; flex-direction: column; gap: 2rem; }
.pain p {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}
@media (min-width: 768px) { .pain p { font-size: var(--text-2xl); } }

/* Process connector line (homepage 4-up) */
.process-grid { position: relative; }
.process-grid__line {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
  pointer-events: none;
}
@media (min-width: 1024px) { .process-grid__line { display: block; } }

/* Contact meta list */
.meta-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.meta-list li { display: flex; align-items: flex-start; gap: .75rem; }
.meta-list__label {
  display: block;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--muted-foreground);
}
.meta-list__value { font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.meta-list__value:hover { color: var(--brand-orange); }

/* Empty state block */
.empty-state {
  padding: 3rem;
  text-align: center;
  background: rgba(10, 10, 10, .02);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
}


/* --------------------------------------------------------------------------
   24. VISIBILITY UTILITIES (last, so they beat component display rules)
   -------------------------------------------------------------------------- */
.hide-sm { display: none; }
@media (min-width: 640px) {
  .hide-sm { display: inline-flex; }
}

/* ==========================================================================
   25. MOBILE OVERFLOW CONTAINMENT
   The decorative aurora orbs / display glow and the portfolio mockup cards are
   absolutely positioned and deliberately oversized, so at narrow widths they
   push the document wider than the viewport (measured 595px against a 390px
   viewport on the homepage). Contain them at the document level.

   `clip` rather than `hidden`: overflow-x:hidden forces overflow-y to auto,
   which turns body into a scroll container and silently breaks position:sticky.
   ========================================================================== */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Belt and braces for the decorative layers themselves. */
.pfy-aurora-orb,
.pfy-display-glow {
  pointer-events: none;
}

/* A third-party plugin injects an inline `html:has(...) { overflow-x: hidden }`
   which outranks a plain element selector, and overflow-x:hidden makes the root
   a scroll container, which kills the sticky header (observed: header detached
   and scrolled away at 390px on the front page only). Force the containment
   back to `clip`, which contains the oversized decorative orbs WITHOUT
   creating a scroll container. !important is deliberate: it is the only way to
   outrank an injected inline rule we do not control. */
html,
body {
  overflow-x: clip !important;
}