/*
Theme Name: THEMEL Creative House
Theme URI: https://themel.mk
Author: THEMEL Creative House
Author URI: https://themel.mk
Description: Custom WordPress theme for THEMEL Creative House - WordPress/WooCommerce development and social media services. Warm stone base with a single blue accent.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: themel
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --bg: #e7e3d8;               /* warm stone paper — not black, not white */
  --bg-raised: #f4f1e8;
  --bg-deep: #dcd7c8;
  --text: #232f4d;             /* deep navy, not flat black — tied to the accent blue's hue */
  --text-muted: rgba(35,47,77,0.66);
  --text-faint: rgba(35,47,77,0.42);
  --accent: #2a4b8c;            /* blueprint blue — single UI accent */
  --accent-dim: rgba(42,75,140,0.10);
  --accent-soft: #5b7bc4;       /* lighter step of the accent, for gradients only */
  --glow-warm: rgba(196,108,74,0.16);   /* background atmosphere only — never used on text/buttons */
  --glow-cool: rgba(42,75,140,0.14);
  --on-accent: #f4f1e8;
  --warm: #b5623f;              /* decorative-only warm tone — backgrounds/gradients, never UI/text/links */
  --video: #7a5a8c;             /* decorative-only third tone for the Video Editing card — same rule as --warm */
  --border: rgba(35,47,77,0.14);
  --border-strong: rgba(35,47,77,0.28);
  --header-glass: rgba(231,227,216,0.55);

  --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --container: 1180px;
  --gutter: clamp(18px, 5vw, 64px);
  --radius: 16px;
}

/* Dark theme — toggled via [data-theme="dark"] on <html> (see the toggle
   button in header.php and the script in functions.php that sets this
   before first paint, to avoid a flash of the light theme). Redefines the
   same tokens the whole site already builds on, so most components adapt
   automatically without their own overrides. A handful of elements that
   use hardcoded colors instead of these tokens (the hero/footer/CTA navy
   bands, which are already dark either way, and a few low-opacity tinted
   backgrounds like the Services page color bands) may want a closer look
   once this is live and visible, rather than guessed at blind here. */
[data-theme="dark"]{
  --bg: #1a2035;
  --bg-raised: #232f4d;
  --bg-deep: #12172a;
  --text: #f1f2f7;
  --text-muted: rgba(241,242,247,0.68);
  --text-faint: rgba(241,242,247,0.44);
  --accent: #5b7bc4;
  --accent-dim: rgba(91,123,196,0.16);
  --accent-soft: #8ba8e8;
  --glow-warm: rgba(214,138,95,0.18);
  --glow-cool: rgba(91,123,196,0.2);
  --on-accent: #12172a;
  --warm: #d68a5f;
  --video: #b48ac6;
  --border: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.26);
  --header-glass: rgba(26,32,53,0.55);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background:
    radial-gradient(ellipse 900px 640px at 12% -8%, var(--glow-cool), transparent 60%),
    radial-gradient(ellipse 760px 560px at 108% 18%, var(--glow-warm), transparent 55%),
    radial-gradient(ellipse 700px 500px at 20% 95%, var(--glow-cool), transparent 55%),
    linear-gradient(180deg, var(--bg-raised) 0%, var(--bg) 45%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* background-attachment:fixed used to tie this gradient to the viewport
   instead of the page — meaning only the first screen-height ever showed
   the gradient, and everything below it was one flat, static slice of
   color repeated for the rest of the page (with cards' own solid colors
   sitting on top of that flatness). Scroll-attached, the gradient spans
   the whole document instead, so the page has continuous, gradual color
   variation all the way down rather than going flat after the hero. */
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p{ margin: 0; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.container{ position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 18px;
}

/* ==========================================================================
   Grain overlay (Instrument-style)
   ========================================================================== */
.grain{
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scattered grain patches — localized texture in a few sections, instead of
   only the uniform full-page overlay above. Randomized size/position/rotation
   per patch rather than one repeating pattern. */
.grain-patch{
  position: absolute; pointer-events: none; z-index: 0; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain-patch-1{ top: 22%; left: -4%; width: 340px; height: 300px; opacity: 0.09; transform: rotate(-8deg); }
.grain-patch-2{ top: 40%; right: -6%; width: 300px; height: 260px; opacity: 0.07; transform: rotate(11deg); }
.grain-patch-3{ bottom: 18%; left: 8%; width: 260px; height: 260px; opacity: 0.08; transform: rotate(4deg); }
.grain-patch-4{ top: 18%; right: 12%; width: 220px; height: 220px; opacity: 0.07; transform: rotate(-14deg); }
@media (max-width: 640px){ .grain-patch{ display: none; } }

/* ==========================================================================
   Vertical grid-line background (Code and Theory-style)
   ========================================================================== */
.grid-lines{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  max-width: var(--container); margin: 0 auto; left: 0; right: 0;
}
.grid-lines::before, .grid-lines::after,
.grid-lines span{
  content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border);
}
.grid-lines::before{ left: 12px; }
.grid-lines::after{ right: 12px; }
.grid-lines span{ display: none; }

/* ==========================================================================
   Header / kinetic nav (Moving Brands-style)
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 24px -14px rgba(35,47,77,0.25);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
/* The blurred glass lives on a ::before, NOT on .site-header itself. Reason:
   putting a transform on an element that also has backdrop-filter breaks the
   filter in most browsers — so the header rendered blank/invisible when it
   slid back in. The pseudo-element has the blur and no transform, so the
   glass keeps working while the parent slides. */
.site-header::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--header-glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
/* Scrolling down slides the header out of view; scrolling up slides it back
   in seamlessly (JS toggles .is-hidden). translateY(-100%) plus a small extra
   so the shadow doesn't peek. */
.site-header.is-hidden{ transform: translateY(-105%); }
.site-header.is-scrolled{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 30px -14px rgba(35,47,77,0.35); }
body.admin-bar .site-header.is-hidden{ transform: translateY(-140%); }
/* WordPress's admin bar (visible only to logged-in users) is fixed at
   top:0 with a very high z-index — without this, it fights our sticky
   header for the same spot once you scroll and overlaps its top edge.
   Real visitors never see the admin bar, so this only matters when
   testing while logged in, but it's worth getting right regardless. */
body.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .site-header{ top: 46px; }
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.header-actions{ display: flex; align-items: center; gap: 16px; }
.site-logo{ display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.logo-word{
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.01em; color: var(--text); text-transform: lowercase;
}
.logo-dot{ color: var(--accent); }
.logo-tagline{
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
}
.primary-nav ul{ display: flex; gap: 36px; }
.primary-nav a{
  position: relative; font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em; padding: 4px 0; display: inline-block;
}
.primary-nav a::after{
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.35s cubic-bezier(.65,0,.35,1);
}
.primary-nav a:hover::after, .primary-nav a.current::after{ transform: scaleX(1); transform-origin: left; }
.lang-switcher{ position: relative; margin-left: 28px; padding-left: 20px; border-left: 1px solid var(--border); }
.lang-toggle{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; flex-shrink: 0;
  border: 1px solid var(--border-strong); border-radius: 19px;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--text); transition: border-color 0.2s ease, color 0.2s ease;
}
[data-theme="dark"] .lang-toggle{ background: rgba(255,255,255,0.06); }
.lang-toggle:hover{ border-color: var(--accent); color: var(--accent); }
.lang-caret{ width: 10px; height: 10px; color: var(--text-faint); transition: transform 0.2s ease; flex-shrink: 0; }

.theme-toggle{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--text);
  background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, color 0.2s ease;
}
[data-theme="dark"] .theme-toggle{ background: rgba(255,255,255,0.06); }
.theme-toggle:hover{ border-color: var(--accent); color: var(--accent); }
.theme-toggle svg{ width: 18px; height: 18px; }
.theme-icon-moon{ display: none; }
[data-theme="dark"] .theme-icon-sun{ display: none; }
[data-theme="dark"] .theme-icon-moon{ display: block; }
.lang-switcher.is-open .lang-toggle{ border-color: var(--accent); color: var(--accent); }
.lang-switcher.is-open .lang-caret{ transform: rotate(180deg); color: var(--accent); }

.lang-dropdown{
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px;
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 16px;
  padding: 6px; box-shadow: 0 24px 44px -20px rgba(35,47,77,0.35); z-index: 60;
}
.lang-switcher.is-open .lang-dropdown{ display: flex; }
.lang-option{ padding: 9px 12px; border-radius: 12px; font-size: 13px; color: var(--text-muted); transition: background 0.15s ease, color 0.15s ease; }
.lang-option:hover{ background: var(--accent-dim); color: var(--accent); }
.lang-option.is-active{ color: var(--accent); font-weight: 700; background: var(--accent-dim); }

.nav-toggle{ display: none; background: none; border: 0; color: var(--text); }
@media (max-width: 860px){
  .primary-nav{ display: none; }
  .nav-toggle{ display: block; }
  .lang-switcher{ margin-left: 0; padding-left: 0; border-left: 0; }
  .lang-dropdown{ right: 0; left: auto; }
}
@media (max-width: 480px){
  .lang-toggle{ height: 34px; padding: 0 10px; font-size: 11px; }
  .theme-toggle{ width: 34px; height: 34px; }
  /* "Creative House" is ~105px wide at this size — wider than the wordmark
     itself — and the header still has to fit the lang switcher, theme
     toggle and hamburger. Drop it here; the footer lockup keeps it. */
  /* Keep "Creative House" visible on small phones, just shrink it so it
     doesn't crowd the language switcher, theme toggle and hamburger. */
  .site-header .logo-tagline{ font-size: 8px; letter-spacing: 0.10em; }
}

/* ==========================================================================
   Marquee strip
   ========================================================================== */
.marquee{
  border-bottom: 1px solid var(--border);
  overflow: hidden; white-space: nowrap; padding: 14px 0;
}
.marquee-track{ display: inline-block; animation: marquee 28s linear infinite; }
.marquee-track span{
  display: inline-block; padding: 0 28px; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
.marquee-track span strong{ color: var(--accent); font-weight: 600; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================================
   Hero — split layout with a browser-preview illustration of a finished site,
   replacing the oversized-numeral pattern from the earlier draft.
   ========================================================================== */
.hero{ position: relative; padding: 88px 0 72px; }
.hero-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-inner{ max-width: 560px; }

/* Work page hero — text left, quick-fact stats right, so wide screens don't
   leave a dead gap next to a short paragraph. */
.hero-split{ display: flex; justify-content: space-between; align-items: center; gap: 100px; flex-wrap: wrap; }
.hero-split .hero-inner{ flex: 1 1 420px; }
.work-hero-stats{ display: flex; gap: 32px; flex-wrap: wrap; margin-left: auto; padding-left: 64px; border-left: 1px solid var(--border-strong); }
.stat-block{ display: flex; flex-direction: column; gap: 4px; }
.stat-block .stat-num{ font-family: var(--font-display); font-weight: 800; font-size: 32px; color: var(--accent); line-height: 1; }
.stat-block .stat-label{ font-size: 12px; color: var(--text-faint); max-width: 110px; line-height: 1.35; }
@media (max-width: 640px){
  .work-hero-stats{ gap: 24px; margin-left: 0; padding-left: 0; border-left: 0; }
  .stat-block .stat-num{ font-size: 26px; }
}
.hero h1{ font-size: clamp(38px, 6vw, 66px); line-height: 1.06; }
.hero h1 .rotator{ color: var(--accent); position: relative; display: inline-block; }
.hero p.lede{ margin-top: 24px; font-size: 17px; color: var(--text-muted); max-width: 480px; }
.hero-actions{ margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }

.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; font-size: 14px; font-weight: 700;
  border: 1px solid var(--text); border-radius: var(--radius);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-primary{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover{ background: transparent; color: var(--text); }
.btn-ghost{ color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   Hero v2 — full-bleed, near-full-viewport dark hero with the header
   floating transparently on top of it (see .site-header.is-home rules),
   inspired by a reference with a dramatic full-bleed photo behind the
   header. No real photography rights available for this site's hero, so
   the "photo" is a rich dark gradient plus the existing network
   illustration scaled up, rather than a fabricated stock image.
   ========================================================================== */
.hero-v2{
  position: relative; overflow: hidden; min-height: 92vh; display: flex; align-items: center;
  background: var(--bg);
}
.hero-center{ position: relative; z-index: 1; max-width: 700px; margin: 0 auto; text-align: left; }
.hero-center .hero-actions{ justify-content: flex-start; }

.hero-illustration{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.12;
}
.hero-illustration svg{ width: 100%; height: 100%; display: block; }
.hi-net-line{ stroke: var(--border-strong); stroke-width: 1; }
.hi-net-node-accent{ fill: var(--accent); }
.hi-net-node-warm{ fill: var(--warm); }
.hi-net-node-video{ fill: var(--video); }

/* Dark theme: the full-bleed navy hero with the brighter illustration and
   white text. Light theme (default, above) keeps the hero as part of the
   normal page — same warm background as everything else, no forced dark
   band — so light mode is genuinely all-light, not light-with-a-dark-hero. */
[data-theme="dark"] .hero-v2{
  background:
    radial-gradient(ellipse 900px 600px at 15% 20%, rgba(91,123,196,0.35), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 80%, rgba(122,90,140,0.30), transparent 60%),
    linear-gradient(160deg, #1a2035 0%, #232f4d 55%, #1a2035 100%);
}
[data-theme="dark"] .hero-v2 .eyebrow{ color: #a9c0f5; }
[data-theme="dark"] .hero-v2 h1{ color: #ffffff; }
[data-theme="dark"] .hero-v2 .lede{ color: rgba(255,255,255,0.78); }
[data-theme="dark"] .hero-v2 .btn-ghost{ color: #fff; border-color: rgba(255,255,255,0.4); }
[data-theme="dark"] .hero-v2 .btn-ghost:hover{ border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }
[data-theme="dark"] .hero-illustration{ opacity: 0.5; }
[data-theme="dark"] .hi-net-line{ stroke: rgba(255,255,255,0.16); }
[data-theme="dark"] .hi-net-node-accent{ fill: #7b9be8; }
[data-theme="dark"] .hi-net-node-warm{ fill: #d68a5f; }
[data-theme="dark"] .hi-net-node-video{ fill: #b48ac6; }

.hero-scroll-cue{
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; color: var(--text);
  background: var(--bg-raised); backdrop-filter: blur(6px);
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}
.hero-scroll-cue svg{ width: 18px; height: 18px; }
@keyframes hero-scroll-bounce{ 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(6px); } }

/* Compact dark hero (Work / Services / Contact) — same color language as
   the homepage's full hero, shorter, no scroll cue (there's usually
   content worth seeing without prompting a scroll on these pages). */
.hero-v2-compact{ min-height: auto; padding: 100px 0 64px; display: block; }
.hero-v2-compact .hero-illustration{ opacity: 0.12; }
[data-theme="dark"] .hero-v2-compact .hero-illustration{ opacity: 0.35; }
.hero-v2-compact .work-hero-stats{ border-left-color: var(--border-strong); }
[data-theme="dark"] .hero-v2-compact .work-hero-stats{ border-left-color: rgba(255,255,255,0.25); }
.hero-v2-compact .stat-block .stat-num{ color: var(--accent); }
[data-theme="dark"] .hero-v2-compact .stat-block .stat-num{ color: #a9c0f5; }
.hero-v2-compact .stat-block .stat-label{ color: var(--text-faint); }
[data-theme="dark"] .hero-v2-compact .stat-block .stat-label{ color: rgba(255,255,255,0.6); }

@media (max-width: 640px){
  /* Only the FULL homepage hero gets the tall mobile treatment. The compact
     hero must NOT — it was inheriting 82vh here and standing up a screen-tall
     block with content only at the top (all the empty space below the stats). */
  .hero-v2:not(.hero-v2-compact){ min-height: 82vh; }
  .hero-illustration{ opacity: 0.35; }
  .hero-scroll-cue{ display: none; }
  .hero-v2-compact{ min-height: auto; padding: 48px 0 8px; }
  /* Wrapped hero-split column gap becomes vertical dead space on mobile. */
  .hero-v2-compact .hero-split{ gap: 28px; }
  .hero-v2-compact + section{ padding-top: 24px; }}

/* ==========================================================================
   Sections generic
   ========================================================================== */
section{ position: relative; padding: 88px 0; }
section + section{ border-top: 1px solid var(--border); }

/* Dark theme: no hard dividing lines between sections — let the subtle
   background shade shifts (--bg / --bg-raised / --bg-deep) separate them
   instead, since a white-on-navy line reads as a much harder edge than
   the same line does on the light theme. */
[data-theme="dark"] section + section{ border-top: 1px solid var(--border); }
section::before{
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
section:nth-of-type(odd)::before{ background: radial-gradient(ellipse 640px 420px at 92% 0%, var(--glow-warm), transparent 62%); }
section:nth-of-type(even)::before{ background: radial-gradient(ellipse 640px 420px at 4% 100%, var(--glow-cool), transparent 62%); }
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(28px, 4vw, 42px); }
.section-head p{ margin-top: 16px; color: var(--text-muted); font-size: 16px; }

/* Client / proof strip */
.proof-strip{ padding: 40px 0; }
.proof-row{ display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }
.proof-row a{ font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-faint); transition: color 0.25s ease; }
.proof-row a:hover{ color: var(--text); }

/* Services grid */
.services-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }

/* v2: standalone cards instead of a shared bordered table look */
.services-grid-v2{ background: none; border: 0; gap: 24px; }
.services-grid-v2 .service-card{
  border-radius: 20px; border: 1px solid var(--border-strong);
  box-shadow: 0 20px 40px -30px rgba(35,47,77,0.3);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.services-grid-v2 .service-card:hover{ transform: translateY(-4px); box-shadow: 0 26px 46px -26px rgba(35,47,77,0.35); }

/* Fancier treatment: gradient top bar, radial glow behind icon, icon badge instead of a number */
.services-grid-v2 .service-card{
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg) 100%);
}
.services-grid-v2 .service-card::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.services-grid-v2 .service-card-social::before{ background: linear-gradient(90deg, var(--warm), #d68a5f); }
.services-grid-v2 .service-card h3{ margin-top: 0; }
.services-grid-v2 .service-card::after{
  content: ''; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-cool), transparent 70%); pointer-events: none;
}
.services-grid-v2 .service-card-social::after{ background: radial-gradient(circle, var(--glow-warm), transparent 70%); }

/* Services page — full-width alternating color bands instead of a row list
   or a card grid. Deliberately loud/different from the plain-row Process
   and FAQ sections right below it on the same page, and different from the
   Work page's card grid. Breaks out of .container to go edge-to-edge.
   width:100vw doesn't subtract scrollbar width, so it always overhangs the
   true visible viewport by a few pixels wherever a scrollbar is present —
   contained locally here so it can never cause page-wide horizontal
   overflow, independent of whatever body/html's own overflow is set to. */
.services-bands-wrap{ overflow: hidden; }
.services-band{
  position: relative; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
  padding: 56px 0;
}
.services-band-0{ background: var(--accent-dim); }
.services-band-1{ background: rgba(181,98,63,0.10); }
.services-band-2{ background: rgba(122,90,140,0.10); }
/* Divider at the top of every band except the first — a hairline plus a
   short accent segment at the left, colored to match that band's title.
   Gives each service a clear boundary even where the tint barely differs
   from its neighbour (Social/Video sit very close in the light theme). */
.services-band + .services-band .services-band-inner{ position: relative; }
.services-band + .services-band .services-band-inner::before{
  content: ''; position: absolute; top: -56px; left: var(--gutter); right: var(--gutter);
  height: 1px; background: var(--border);
}
.services-band + .services-band .services-band-inner::after{
  content: ''; position: absolute; top: -57px; left: var(--gutter);
  width: 48px; height: 3px; border-radius: 2px;
}
.services-band-0 .services-band-inner::after{ background: var(--accent); }
.services-band-1 .services-band-inner::after{ background: var(--warm); }
.services-band-2 .services-band-inner::after{ background: var(--video); }
.services-band-inner{
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: flex-start; gap: 48px; flex-wrap: wrap;
}
.band-title{ flex: 0 0 300px; }
.band-title h3{ font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.services-band-0 .band-title h3{ color: var(--accent); }
.services-band-1 .band-title h3{ color: var(--warm); }
.services-band-2 .band-title h3{ color: var(--video); }
.band-detail{ flex: 1 1 380px; padding-top: 8px; }
.band-detail p{ color: var(--text-muted); font-size: 16px; line-height: 1.6; max-width: 480px; }
.band-detail ul{ margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.band-detail ul li{ font-size: 12px; color: var(--text-faint); border: 1px solid var(--border-strong); background: var(--bg); padding: 5px 12px; border-radius: 26px; }
@media (max-width: 640px){
  .services-band{ padding: 40px 0; }
  .services-band-inner{ gap: 16px; }
  .band-title{ flex-basis: 100%; }
  .services-band + .services-band .services-band-inner::before{ top: -40px; }
  .services-band + .services-band .services-band-inner::after{ top: -41px; }
}

/* Three-column variant + third "Video Editing" card color */
.services-grid-v3{ grid-template-columns: repeat(3, 1fr); }
.services-grid-v3 .service-card-video::before{ background: linear-gradient(90deg, var(--video), #a878b8); }
.services-grid-v3 .service-card-video::after{ background: radial-gradient(circle, rgba(122,90,140,0.14), transparent 70%); }
.ring-fill-video{ stroke: var(--video); }
.play-triangle{ fill: var(--video); }

.card-metric{ margin-top: 24px; display: flex; align-items: center; gap: 16px; }
.metric-ring, .trend-chart{ flex-shrink: 0; }
.metric-ring{ width: 64px; height: 64px; }
.ring-track{ fill: none; stroke: var(--border); stroke-width: 8; }
.ring-fill{ fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring-label{ font-family: var(--font-display); font-weight: 800; font-size: 26px; fill: var(--text); }
.trend-chart{ width: 130px; height: 48px; }
.trend-line{ fill: none; stroke: var(--warm); stroke-width: 2.5; stroke-linecap: round; }
.trend-dot{ fill: var(--warm); }
.metric-caption{ font-size: 12px; color: var(--text-faint); max-width: 130px; line-height: 1.4; }

.service-card{ background: var(--bg); padding: 40px; transition: background 0.3s ease; }
.service-card:hover{ background: var(--bg-raised); }
.service-card .num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: var(--on-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 6px 16px -6px rgba(42,75,140,0.4);
}
.service-card h3{ margin-top: 18px; font-size: 22px; }
.service-card p{ margin-top: 12px; color: var(--text-muted); font-size: 15px; }
.service-card ul{ margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.service-card ul li{ font-size: 12px; color: var(--text-faint); border: 1px solid var(--border); padding: 5px 10px; border-radius: 26px; }

/* Case index / Work (Frog/AKQA sequential index + Clay hover + STRV chrome frame) */
.case-list{ display: flex; flex-direction: column; }
.case-row{
  display: grid; grid-template-columns: 90px 1fr 1fr; gap: 32px; align-items: center;
  padding: 40px 0; border-top: 1px solid var(--border);
}
.case-row:last-child{ border-bottom: 1px solid var(--border); }
.case-index{ font-family: var(--font-display); font-size: 15px; color: var(--text-faint); font-weight: 700; }
.case-info h3{ font-size: 26px; }
.case-info .case-meta{ margin-top: 8px; font-size: 13px; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }
.case-info p{ margin-top: 14px; color: var(--text-muted); font-size: 15px; max-width: 420px; }
.case-info a.case-link{ margin-top: 16px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--accent); }

/* "Visit site" as a real pill button so it stands out on every card, not a
   faint text link. Applies in all three card contexts (work, bento, case). */
.case-link{
  padding: 10px 20px; border-radius: 40px;
  background: var(--accent); color: #fff !important;
  box-shadow: 0 12px 24px -14px var(--accent);
  transition: gap 0.25s cubic-bezier(.2,.8,.2,1), transform 0.25s ease, box-shadow 0.25s ease;
}
.case-link:hover{ transform: translateY(-2px); box-shadow: 0 18px 32px -14px var(--accent); }
[data-theme="dark"] .case-link{ color: #0d1220 !important; }
.case-info a.case-link:hover{ gap: 8px; }

.browser-frame{
  border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden;
  background: var(--bg-raised); transform: scale(0.97); transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.case-row:hover .browser-frame{ transform: scale(1); }
.browser-frame .chrome{ display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.browser-frame .chrome span{ width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.browser-frame .screen{
  aspect-ratio: 16/10; background:
    linear-gradient(135deg, rgba(201,154,71,0.14), transparent 60%), var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-faint);
}

/* ==========================================================================
   Work — grouped by discipline (Web Development / Social Media / Video)
   ========================================================================== */
.bento-tile{
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border-strong); background: var(--bg-raised);
  display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
}
.bento-tile:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(35,47,77,0.35); }
.bento-tile[hidden]{ display: none; }

/* Work page showcase — full-width alternating rows instead of a grid.
   Only 3 projects exist right now; a dense grid doesn't need to carry
   that few, so each one gets real room instead. */
.work-group-head{ display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }

/* Two-column pairing for the Social + Video groups on the Work page.
   Each half owns its own head + slider grid; below 960px they stack. */
.work-groups-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.work-groups-pair .work-group{ min-width: 0; display: flex; flex-direction: column; }
/* Each card fills its column width (no dead space) and the two cards match
   each other's height — the taller one sets the height, the shorter card
   stretches to meet it. Additional cards still snap-scroll horizontally. */
.work-groups-pair .work-group-grid{ flex: 1; align-items: stretch; }
.work-groups-pair .work-group-grid .work-card{ flex: 0 0 100%; height: auto; }
@media (max-width: 960px){ .work-groups-pair{ grid-template-columns: 1fr; gap: 64px; } }
.work-group-grid{
  display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none;
}
.work-group-grid::-webkit-scrollbar{ display: none; }
.work-group-grid .work-card{ flex: 0 0 320px; scroll-snap-align: start; }
.work-card{
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  box-shadow: 0 18px 36px -26px rgba(35,47,77,0.3);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
.work-card:hover{ transform: translateY(-4px); box-shadow: 0 24px 44px -22px rgba(35,47,77,0.35); }
.work-card-visual{
  position: relative; aspect-ratio: 16 / 11; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  overflow: hidden;
}
/* Web-dev screenshots are the headline work — give them a taller frame so the
   site shows bigger and the card reads as the main event. */
.work-card-visual-web{ aspect-ratio: 4 / 3; }
.work-card:nth-of-type(3n+2) .work-card-visual-web{ background: linear-gradient(135deg, var(--warm) 0%, #d68a5f 100%); }
.work-card-visual-social, .work-card-visual-video{ flex-direction: column; }
.work-card-visual-social{ background: linear-gradient(135deg, var(--warm) 0%, #d68a5f 100%); }
.work-card-visual-video{ background: linear-gradient(135deg, var(--video) 0%, #a878b8 100%); }
/* Live homepage screenshot layered over the generated panel. If the image
   loads it covers the panel; if it errors (onerror hides it) the gradient +
   title show through as the fallback. Chrome bar stays on top either way. */
.work-card-shot{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; z-index: 1;
  background: var(--bg-raised);
}
.work-card-shot-logo{ object-fit: cover; }
/* Logo tiles are already square brand-colored images (the mark on its own
   background), so let them fill the visual area edge-to-edge with a small
   safe margin — no giant empty panel around a tiny icon. */
.work-card-shot-logo{ object-fit: cover; object-position: center; padding: 0; }
.work-card-visual .chrome{ position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; gap: 6px; padding: 12px 14px; background: rgba(0,0,0,0.14); }
/* If the screenshot failed (JS added .shot-failed), the panel gradient shows;
   re-add the title text as the fallback label. */
.work-card-visual.shot-failed::after{
  content: attr(data-title); position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; padding: 0 20px;
  font-family: var(--font-display); font-weight: 800; color: var(--on-accent);
  font-size: clamp(16px, 2vw, 22px); letter-spacing: -0.02em; opacity: 0.92; text-align: center;
}
.work-card-visual .chrome span{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.work-card-visual .mark{ font-family: var(--font-display); font-weight: 800; color: var(--on-accent); font-size: clamp(16px, 2vw, 22px); letter-spacing: -0.02em; opacity: 0.92; padding: 0 20px; text-align: center; }
.work-card-info{ padding: 22px 22px 24px; position: relative; }
.work-card-badge{
  position: absolute; top: -13px; left: 22px; background: var(--bg); border: 1px solid var(--border-strong);
  color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 26px;
}
.work-card-info .eyebrow-tag{ font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.work-card-info h3{ margin-top: 8px; font-size: 19px; }
.work-card-info p{ margin-top: 10px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.work-card-info .case-link{ margin-top: 16px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--accent); }
.work-card-info .case-link:hover{ gap: 8px; }

.bento-visual{
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
}
.bento-visual .chrome{ position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 6px; padding: 12px 14px; background: rgba(0,0,0,0.14); }
.bento-visual .chrome span{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.bento-visual .mark{ font-family: var(--font-display); font-weight: 800; color: var(--on-accent); font-size: clamp(18px, 2.4vw, 26px); letter-spacing: -0.02em; opacity: 0.92; padding: 0 20px; text-align: center; }

.bento-social-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 90px; margin-bottom: 14px; }
.bento-social-grid span{ aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,0.35); }
.bento-social-grid span:nth-child(odd){ background: rgba(255,255,255,0.6); }
.bento-play-ring{
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 14px;
  border: 1.5px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center;
}
.bento-play-ring svg{ width: 22px; height: 22px; color: rgba(255,255,255,0.92); }

.bento-info{ padding: 18px 22px 20px; background: var(--bg-raised); border-top: 1px solid var(--border); }
.bento-info .eyebrow-tag{ font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.bento-info h3{ margin-top: 6px; font-size: 19px; }
.bento-info p{ margin-top: 8px; font-size: 13px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bento-info .case-link{ margin-top: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--accent); }
.bento-info .case-link:hover{ gap: 8px; }

/* Process steps (Work page's simple vertical version — unchanged) */
.process-list{ counter-reset: step; }
.process-item{ display: grid; grid-template-columns: 60px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--border); }
.process-item:last-child{ border-bottom: 1px solid var(--border); }
.process-item .step-num{ font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--accent); }
.process-item h3{ font-size: 19px; }
.process-item p{ margin-top: 8px; color: var(--text-muted); font-size: 15px; max-width: 480px; }

/* Vertical timeline (Work page → "Here's what happens next").
   Circular numbered badges connected by an accent line running down the
   left. The line is drawn on the <ol> as a ::before, positioned so it
   passes through the centre of the badges.
   Badges are 56px, line sits at 28px from the list's left edge. */
.timeline{ position: relative; list-style: none; padding: 0; margin: 0; }
.timeline::before{
  content: ''; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
  background: linear-gradient(to bottom, transparent 0, var(--accent) 40px, var(--accent) calc(100% - 40px), transparent 100%);
  opacity: 0.35;
}
.timeline-item{
  position: relative; display: grid; grid-template-columns: 56px 1fr;
  gap: 28px; align-items: start; padding: 22px 0;
}
.timeline-item + .timeline-item{ margin-top: 8px; }
.timeline-badge{
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1.5px solid var(--accent);
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--accent); letter-spacing: 0.02em;
  box-shadow: 0 0 0 6px var(--bg);  /* mask the line where it passes behind */
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), background 0.25s ease, color 0.25s ease;
}
.timeline-item:hover .timeline-badge{
  transform: scale(1.08); background: var(--accent); color: #fff;
}
.timeline-body{ padding-top: 10px; }
.timeline-body h3{ font-size: 20px; margin: 0; }
.timeline-body p{ margin-top: 10px; color: var(--text-muted); font-size: 15px; max-width: 560px; }

/* Horizontal connected stepper (Services → "How a project runs").
   Deliberately different from the Work page's vertical badge timeline:
   three steps along one horizontal track, marker sitting on the line,
   content below. Stacks to vertical on mobile. */
.stepper{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.stepper-step{ position: relative; padding-top: 64px; }
/* The connecting track: a line through the marker centres. Drawn per step
   as a ::before so it starts at each marker and runs to the next. The last
   step's line is hidden. Marker centre sits at 24px from the step's top. */
.stepper-step::before{
  content: ''; position: absolute; top: 24px; left: 24px; right: -32px;
  height: 2px; background: var(--border-strong);
}
.stepper-step:last-child::before{ display: none; }
.stepper-marker{
  position: absolute; top: 0; left: 0;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 2px solid var(--accent);
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--accent); z-index: 1;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), background 0.25s ease, color 0.25s ease, box-shadow 0.3s ease;
}
.stepper-step{ transition: transform 0.3s cubic-bezier(.2,.8,.2,1); }
.stepper-step:hover{ transform: translateY(-4px); }
.stepper-step:hover .stepper-marker{
  background: var(--accent); color: #fff; transform: scale(1.1);
  box-shadow: 0 10px 24px -8px var(--accent);
}
[data-theme="dark"] .stepper-step:hover .stepper-marker{ color: #0d1220; }
.stepper-step h3{ transition: color 0.25s ease; }
.stepper-step:hover h3{ color: var(--accent); }
.stepper-step:first-child .stepper-marker{ background: var(--accent); color: #fff; }
[data-theme="dark"] .stepper-marker{ background: #1a2035; }
[data-theme="dark"] .stepper-step:first-child .stepper-marker{ background: var(--accent); color: #0d1220; }
.stepper-step h3{ font-size: 20px; margin: 0; }
.stepper-step p{ margin-top: 10px; color: var(--text-muted); font-size: 15px; line-height: 1.55; }

@media (max-width: 980px){
  .stepper{ grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  /* on 2 cols the horizontal connector to the next item in a row still works;
     hide it on the last item of each row (2nd, 4th) so it doesn't dangle */
  .stepper-step:nth-child(2n)::before{ display: none; }
}
@media (max-width: 620px){
  .stepper{ grid-template-columns: 1fr; gap: 8px; }
  .stepper-step{ padding-top: 0; padding-left: 68px; padding-bottom: 32px; min-height: 48px; }
  .stepper-step::before,
  .stepper-step:nth-child(2n)::before{
    display: block; top: 48px; bottom: -8px; left: 24px; right: auto; width: 2px; height: auto;
  }
  .stepper-step:last-child::before{ display: none; }
  .stepper-marker{ top: 0; left: 0; }
  .stepper-step:hover{ transform: none; }
}

[data-theme="dark"] .timeline-badge{ background: #1a2035; box-shadow: 0 0 0 6px #1a2035; }
[data-theme="dark"] .timeline-item:hover .timeline-badge{ background: var(--accent); color: #0d1220; }

@media (max-width: 640px){
  .timeline::before{ left: 21px; }
  .timeline-item{ grid-template-columns: 44px 1fr; gap: 20px; }
  .timeline-badge{ width: 44px; height: 44px; font-size: 13px; box-shadow: 0 0 0 5px var(--bg); }
  [data-theme="dark"] .timeline-badge{ box-shadow: 0 0 0 5px #1a2035; }
  .timeline-body{ padding-top: 6px; }
}

/* Process flow (Services page only) — horizontal steps with connecting
   arrows instead of a vertical divided list. align-items:stretch guarantees
   equal card height regardless of how much text is in each one. */
.process-flow{ display: flex; align-items: stretch; gap: 20px; }
.process-flow-item{
  flex: 1; padding: 32px 26px; border-radius: 20px; background: var(--bg-raised);
  border: 1px solid var(--border-strong); box-shadow: 0 16px 32px -26px rgba(35,47,77,0.3);
}
.process-flow-item h3{ font-size: 19px; }
.process-flow-item p{ margin-top: 10px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.flow-arrow{ flex: 0 0 auto; align-self: center; font-size: 22px; color: var(--border-strong); }
@media (max-width: 860px){
  .process-flow{ flex-direction: column; }
  .flow-arrow{ display: none; }
}

/* CTA band — full-bleed accent color, centered content. This is THE
   call-to-action treatment across all three pages (Home, Work, Services)
   so it reads as one consistent moment: the site's loudest surface.
   Background gets a subtle radial highlight to add depth without breaking
   the solid-color impression. */
.cta-band{
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(255,255,255,0.08), transparent 60%),
    var(--accent);
  color: #fff;
}
[data-theme="dark"] .cta-band{
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(255,255,255,0.08), transparent 60%),
    var(--accent);
}
.cta-band .container{ text-align: center; }
.cta-band .cta-inner{ max-width: 720px; margin: 0 auto; }
.cta-band .eyebrow{ color: rgba(255,255,255,0.7); }
.cta-band h2{ font-size: clamp(30px, 5vw, 52px); color: #fff; }
.cta-band .hero-actions{ justify-content: center; margin-top: 34px; }
/* Button contrast against the accent background: solid white pill with
   accent-colored text — the strongest possible affordance. Hover inverts. */
.cta-band .btn-primary{
  background: #fff; color: var(--accent); border-color: #fff;
}
.cta-band .btn-primary:hover{
  background: transparent; color: #fff; border-color: #fff;
}
.cta-band .btn-ghost{ color: #fff; border-color: rgba(255,255,255,0.5); }
.cta-band .btn-ghost:hover{ border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }

/* Homepage CTA — broken grid. A giant ghosted "themel." mark bleeds off the
   right edge behind the content; the eyebrow, headline and button are placed
   on an intentionally offset diagonal (each nudged from a plain stack) rather
   than centered or left-flushed. An oversized arrow cuts across the section. */
.cta-home{ position: relative; overflow: hidden; padding: 140px 0; border-top: 1px solid var(--border); }

/* Ghosted wordmark, bleeding off the right, low opacity */
.cta-home-mark{
  position: absolute; right: -4%; bottom: -8%;
  font-family: var(--font-display); font-weight: 800; text-transform: lowercase;
  font-size: clamp(140px, 20vw, 300px); line-height: 1; letter-spacing: -0.04em;
  color: var(--text); opacity: 0.05; white-space: nowrap; pointer-events: none; user-select: none;
}
.cta-home-mark-dot{ color: var(--accent); opacity: 1; }
[data-theme="dark"] .cta-home-mark{ color: #a9c0f5; opacity: 0.06; }

/* Oversized decorative arrow cutting across, upper area */
.cta-home-slash{
  position: absolute; left: 8%; top: 18%;
  font-size: clamp(60px, 9vw, 130px); line-height: 1; color: var(--accent);
  opacity: 0.16; transform: rotate(-18deg); pointer-events: none;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease;
}
.cta-home:hover .cta-home-slash{ transform: rotate(-18deg) translateX(16px); opacity: 0.24; }

/* Content on an offset diagonal — not a centered or flush stack */
.cta-home-grid{ position: relative; z-index: 1; }
.cta-home-eyebrow{
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin-left: 4%;
}
.cta-home-h2{
  font-size: clamp(36px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.025em;
  color: var(--text); max-width: 760px; margin: 20px 0 0 0;
}
.cta-home-btn{
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 40px; margin-left: 22%;   /* offset the button off the headline's left edge */
  padding: 20px 38px; border-radius: 44px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  transition: gap 0.3s cubic-bezier(.2,.8,.2,1), transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 20px 40px -18px var(--accent);
}
.cta-home-btn:hover{ gap: 18px; transform: translateY(-3px); box-shadow: 0 28px 52px -18px var(--accent); }
[data-theme="dark"] .cta-home-btn{ color: #0d1220; }
.cta-home-arrow{ font-size: 20px; line-height: 1; transition: transform 0.3s ease; }
.cta-home-btn:hover .cta-home-arrow{ transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .cta-home:hover .cta-home-slash{ transform: rotate(-18deg); }
}
@media (max-width: 760px){
  .cta-home{ padding: 72px 0; }
  .cta-home-eyebrow{ margin-left: 0; }
  .cta-home-h2{ font-size: clamp(30px, 8vw, 44px); }
  .cta-home-btn{ margin-left: 0; align-self: flex-start; width: auto; justify-content: center; }
  /* Bring the decorative arrow back on mobile, pointing down-right (↘)
     toward the ghosted wordmark below the button. */
  .cta-home-slash{
    display: block; left: auto; right: 14%; top: auto; bottom: 200px;
    font-size: 34px; opacity: 0.5; transform: rotate(45deg);
  }
  .cta-home:hover .cta-home-slash{ transform: rotate(45deg); }
  /* Keep the ghosted mark on mobile, but sit it low — below the button —
     so it never overlaps the eyebrow/headline/button text. Extra bottom
     padding on the section gives it room to live in. */
  .cta-home{ padding-bottom: 140px; }
  .cta-home-mark{
    display: block; left: 50%; right: auto; transform: translateX(-50%);
    bottom: 24px; top: auto; opacity: 0.05;
    /* Fill the full viewport width edge to edge. font-size drives it wide;
       width:100vw + centered keeps the whole word "themel." spanning the
       screen without clipping. */
    font-size: 27vw; width: 100vw; text-align: center;
  }
}
@media (max-width: 420px){
  .cta-home-btn{ width: 100%; }
}

/* Boxed CTA (Services page). A single contained panel — rounded, bordered,
   subtle accent wash — centered on the page background. No full-bleed slab,
   no side-by-side split; a self-contained card that reads as one deliberate
   closing moment. */
.cta-boxed{ padding: 96px 0; }
.cta-boxed-panel{
  position: relative; overflow: hidden;
  max-width: 960px; margin: 0 auto;
  padding: 64px 56px;
  border-radius: 28px;
  border: 1px solid var(--accent);
  background:
    radial-gradient(ellipse 700px 340px at 100% 0%, var(--accent-dim), transparent 60%),
    var(--bg-raised);
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
[data-theme="dark"] .cta-boxed-panel{
  border-color: rgba(139,168,232,0.3);
  background:
    radial-gradient(ellipse 700px 340px at 100% 0%, rgba(91,123,196,0.18), transparent 60%),
    #1e2740;
}
.cta-boxed-text .eyebrow{ margin-bottom: 14px; }
.cta-boxed-text h2{
  font-size: clamp(28px, 4vw, 46px); line-height: 1.08;
  max-width: 480px; letter-spacing: -0.01em;
}
.cta-boxed-btn{
  display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0;
  padding: 18px 34px; border-radius: 40px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  transition: gap 0.3s cubic-bezier(.2,.8,.2,1), transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 18px 36px -18px var(--accent);
}
.cta-boxed-btn:hover{ gap: 20px; transform: translateY(-2px); box-shadow: 0 24px 44px -18px var(--accent); }
[data-theme="dark"] .cta-boxed-btn{ color: #0d1220; }
.cta-boxed-arrow{ font-size: 20px; line-height: 1; }

@media (max-width: 640px){
  .cta-boxed{ padding: 64px 0; }
  .cta-boxed-panel{ padding: 40px 28px; border-radius: 20px; gap: 28px; }
  .cta-boxed-btn{ width: 100%; justify-content: center; }
}

/* Marquee CTA (Work page). Outlined display type that fills on hover,
   with the whole strip acting as the link and both edges masked to
   transparent so text glides in and out instead of hard-cutting at the
   viewport edges. */
.cta-marquee{
  display: flex; align-items: center;   /* vertical centering happens here, once */
  overflow: hidden; white-space: nowrap;
  height: 168px; margin-top: 40px;
  color: var(--text); text-decoration: none;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.cta-marquee-track{
  display: flex; align-items: center;   /* track is a flex row, matches strip height */
  will-change: transform;
  animation: marquee 42s linear infinite;
}
.cta-marquee:hover .cta-marquee-track{ animation-duration: 18s; }
@media (prefers-reduced-motion: reduce){
  .cta-marquee-track{ animation: none; }
}
.cta-marquee-item, .cta-marquee-sep{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 7vw, 92px); letter-spacing: -0.03em;
  line-height: 1.5;   /* symmetric room above caps and below descenders */
}
/* Outlined text — stroke-only by default, fills solid on hover of the strip. */
.cta-marquee-item{
  padding: 0 40px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text);
  transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
}
.cta-marquee:hover .cta-marquee-item{
  color: var(--text);
  -webkit-text-stroke-color: var(--text);
}
.cta-marquee-sep{ color: var(--accent); padding: 0 16px; }
[data-theme="dark"] .cta-marquee-item{
  -webkit-text-stroke-color: rgba(255,255,255,0.85);
}
[data-theme="dark"] .cta-marquee:hover .cta-marquee-item{
  color: rgba(255,255,255,0.95);
  -webkit-text-stroke-color: rgba(255,255,255,0.95);
}
[data-theme="dark"] .cta-marquee-sep{ color: #a9c0f5; }

@media (max-width: 640px){
  .cta-marquee{ height: 116px; margin-top: 24px; }
  .cta-marquee-item{ padding: 0 24px; -webkit-text-stroke-width: 1px; }
  .cta-marquee-sep{ padding: 0 10px; }
}

/* Contact — split panel: dark navy info column beside a light form card,
   both wrapped so they read as one contained unit that stands off the page. */
.contact-layout{
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0;
  border-radius: 28px; overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 80px -40px rgba(35,47,77,0.4);
}
/* Left: dark accent panel, always navy regardless of theme */
.contact-info{
  background: linear-gradient(160deg, #232f4d 0%, #1a2035 100%);
  color: #fff; padding: 56px 48px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.contact-info::before{
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,123,196,0.35), transparent 70%);
  pointer-events: none;
}
.contact-info-head .eyebrow{ color: #a9c0f5; margin-bottom: 14px; }
.contact-info-head h2{ font-size: clamp(26px, 2.6vw, 34px); color: #fff; line-height: 1.12; max-width: 320px; }
.contact-detail{ margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.contact-detail a, .contact-detail span{ font-size: 15px; color: rgba(255,255,255,0.9); }
.contact-detail a:hover{ color: #a9c0f5; }
.contact-detail small{ display: block; color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px; }
.contact-info .capability-strip{ margin-top: auto; padding-top: 40px; }
.contact-info .capability-strip span{ border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
.contact-info .capability-strip span:hover{ border-color: #a9c0f5; color: #a9c0f5; }

/* Dark theme: the navy info panel would vanish into the navy page, so flip
   it to a light panel with dark text — keeps the contrast the split needs. */
[data-theme="dark"] .contact-info{
  background: linear-gradient(160deg, #e7e3d8 0%, #dcd7ca 100%);
  color: var(--text);
}
[data-theme="dark"] .contact-info::before{
  background: radial-gradient(circle, rgba(42,75,140,0.20), transparent 70%);
}
[data-theme="dark"] .contact-info-head .eyebrow{ color: #2a4b8c; }
[data-theme="dark"] .contact-info-head h2{ color: #232f4d; }
[data-theme="dark"] .contact-detail a, [data-theme="dark"] .contact-detail span{ color: #232f4d; }
[data-theme="dark"] .contact-detail a:hover{ color: #2a4b8c; }
[data-theme="dark"] .contact-detail small{ color: rgba(35,47,77,0.55); }
[data-theme="dark"] .contact-info .capability-strip span{ border-color: rgba(35,47,77,0.28); color: rgba(35,47,77,0.75); }
[data-theme="dark"] .contact-info .capability-strip span:hover{ border-color: #2a4b8c; color: #2a4b8c; }

/* Right: light form side */
.contact-form-side{ background: var(--bg-raised); padding: 56px 48px; }
[data-theme="dark"] .contact-form-side{ background: #1e2740; }

.form-row{ margin-bottom: 20px; }
.form-row label{ display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.form-row input, .form-row textarea, .form-row select{
  width: 100%; background: var(--bg); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius); color: var(--text); padding: 14px 16px; font-size: 15px; font-family: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-row textarea{ min-height: 140px; resize: vertical; }
.form-status{ margin-top: 16px; font-size: 14px; }
.form-status.success{ color: var(--accent); }
.form-status.error{ color: #e2734c; }
.hp-field{ position: absolute; left: -9999px; opacity: 0; }

/* Why-us / value cards */
.value-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.value-card{ background: var(--bg); padding: 36px 32px; transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.25s ease; }
.value-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(35,47,77,0.32); }
.value-card .icon-mark{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.value-card .icon-mark svg{ width: 20px; height: 20px; }
.value-card h3{ margin-top: 20px; font-size: 19px; }
.value-card p{ margin-top: 10px; color: var(--text-muted); font-size: 14px; }

/* Capability strip (tags) — used elsewhere on the site, kept for reference */
.capability-strip{ display: flex; flex-wrap: wrap; gap: 12px; }
.capability-strip span{ font-size: 13px; padding: 9px 16px; border: 1px solid var(--border-strong); border-radius: 32px; color: var(--text-muted); }
.capability-strip span:hover{ border-color: var(--accent); color: var(--accent); }

/* FAQ cards (Services page) — single column. A 2-column grid with
   independently-expanding <details> doesn't reliably keep row partners
   the same height when one opens, which is exactly what broke; a single
   column removes that failure mode instead of patching around it. */
.faq-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; align-items: stretch; }
/* Force every collapsed card to the SAME height regardless of whether the
   question wraps to one or two lines. align-items:stretch on the grid makes
   each card fill its row; a fixed collapsed height keeps single-line and
   two-line questions identical. Cards still expand normally when opened. */
.faq-card:not([open]){ height: 96px; display: flex; flex-direction: column; justify-content: center; }
.faq-card:not([open]) summary{ padding: 0; }
.faq-card[open]{ align-self: start; }  /* opened card grows from its own top, doesn't stretch its row-mate */
@media (max-width: 640px){ .faq-grid{ grid-template-columns: 1fr; max-width: 100%; } }
.faq-card{
  border-radius: 18px; border: 1px solid var(--border); background: var(--bg-raised);
  padding: 4px 26px; transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.faq-card:hover{ border-color: var(--border-strong); }
.faq-card[open]{
  border-color: var(--accent);
  box-shadow: 0 20px 40px -28px rgba(35,47,77,0.35);
}
.faq-card summary{
  cursor: pointer; list-style: none; padding: 22px 0; font-family: var(--font-display);
  font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  transition: color 0.2s ease;
}
.faq-card[open] summary{ color: var(--accent); }
.faq-card summary::-webkit-details-marker{ display: none; }
/* Circular +/× toggle instead of a bare glyph — fills with accent when open */
.faq-card summary::after{
  content: '+'; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--accent);
  border: 1.5px solid var(--accent);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), background 0.25s ease, color 0.25s ease;
}
.faq-card[open] summary::after{
  content: '+'; transform: rotate(45deg);
  background: var(--accent); color: #fff;
}
[data-theme="dark"] .faq-card[open] summary::after{ color: #0d1220; }
/* Answer reveal: fade + slide, not an instant jump */
.faq-card p{
  padding-bottom: 22px; color: var(--text-muted); font-size: 14px; line-height: 1.6;
  animation: faq-reveal 0.32s ease;
}
@keyframes faq-reveal{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){ .faq-card p{ animation: none; } }

/* Featured work teaser (2-tile variant of the Work page's bento grid) */
/* Featured work slider (replaces the fixed 2-col teaser grid) */
.work-slider{
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none;
}
.work-slider::-webkit-scrollbar{ display: none; }
.work-slider .bento-tile.is-teaser{ flex: 0 0 340px; scroll-snap-align: start; }
.work-slider .bento-tile.is-teaser .bento-visual{ min-height: 200px; }

.slider-nav{ display: flex; gap: 8px; }
.slider-nav button{
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--bg-raised); color: var(--text); font-size: 15px;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease;
}
.slider-nav button:hover{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.slider-nav button:disabled{ opacity: 0.35; pointer-events: none; }

/* Pricing */
.pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pricing-card{
  display: flex; flex-direction: column; padding: 32px 28px; border-radius: 20px;
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.25s ease;
}
.pricing-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 52px -26px rgba(35,47,77,0.4); border-color: var(--accent); }
.pricing-card.is-featured{ border-color: var(--accent); box-shadow: 0 24px 48px -28px rgba(42,75,140,0.5); position: relative; }
.pricing-badge{
  position: absolute; top: -13px; left: 28px; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 26px;
}
.pricing-card h3{ font-size: 19px; }
.pricing-card .price{ margin-top: 10px; font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--accent); }
.pricing-card .pricing-desc{ margin-top: 10px; font-size: 14px; color: var(--text-muted); min-height: 40px; }
.pricing-features{ margin: 22px 0 26px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.pricing-features li{ font-size: 14px; color: var(--text-muted); padding-left: 22px; position: relative; }
.pricing-features li::before{ content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.pricing-note{ margin-top: 28px; font-size: 13px; color: var(--text-faint); text-align: center; }

/* Testimonials */
.testimonial-slider{
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none;
}
.testimonial-slider::-webkit-scrollbar{ display: none; }
.testimonial-slider .testimonial-card{ flex: 0 0 300px; scroll-snap-align: start; }
.testimonial-card{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 24px 22px 20px; border-radius: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  box-shadow: 0 10px 22px -18px rgba(35,47,77,0.25);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.25s ease;
}
.testimonial-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 42px -24px rgba(35,47,77,0.34); border-color: var(--border-strong); }
.testimonial-card::before{
  content: '\201C'; position: absolute; top: -8px; left: 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 56px;
  color: var(--accent); opacity: 0.08; line-height: 1; pointer-events: none;
}
.testimonial-card p{ position: relative; font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.55; }
.testimonial-author{ position: relative; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.testimonial-avatar{
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: var(--on-accent); font-family: var(--font-display); font-weight: 800; font-size: 12px;
}
.testimonial-author-text{ display: flex; flex-direction: column; gap: 1px; }
.testimonial-author-text strong{ font-size: 13px; }
.testimonial-author-text span{ font-size: 11px; color: var(--text-faint); }
.testimonial-empty{
  max-width: 300px; margin: 0 auto; padding: 24px 22px; border-radius: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--border); border-top: 3px solid var(--border-strong);
  text-align: center;
}
.testimonial-empty p{ color: var(--text-muted); font-style: italic; font-size: 13px; }
.testimonial-empty .testimonial-author{ margin-top: 14px; padding-top: 0; border-top: 0; flex-direction: column; gap: 2px; }

/* Footer — navy, matching the hero's color family, on every page (this is
   the "combine the light theme with the navy color, sitewide" ask: navy
   bookends top (hero) and bottom (footer/CTA) around the light content). */
.site-footer{
  border-top: 1px solid var(--border); padding: 64px 0 32px;
  background: var(--bg-raised);
}
[data-theme="dark"] .site-footer{
  border-top: 0;
  background: linear-gradient(160deg, #1a2035 0%, #232f4d 100%);
}
.footer-top{ display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }
.footer-top .logo-word{ font-size: 30px; }
.footer-cols{ display: flex; gap: 64px; flex-wrap: wrap; }
.footer-social{ display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.footer-social a{
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--text-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover{ border-color: var(--accent); color: var(--accent); }
.footer-social svg{ width: 16px; height: 16px; }
[data-theme="dark"] .footer-social a{ border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.75); }
[data-theme="dark"] .footer-social a:hover{ border-color: #a9c0f5; color: #a9c0f5; }
/* .footer-top switches to flex-direction:column at 860px, so from that
   point down the auto-margin flings the icon row to the far right edge,
   visually detached from the columns it belongs with. Reset it at the
   same breakpoint the stacking happens, not 220px later. */
@media (max-width: 860px){ .footer-social{ margin-left: 0; } }
/* Touch targets: 36px is fine for a mouse, under the 44px minimum for a
   thumb. Grow the hit area on phones without changing the icon size. */
@media (max-width: 640px){
  .footer-social{ gap: 14px; }
  .footer-social a{ width: 44px; height: 44px; }
}
.footer-col small{ display: block; color: var(--text-faint); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col a{ display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 10px; transition: color 0.2s ease; }
.footer-col a:hover{ color: var(--accent); }
.footer-col span{ display: block; font-size: 14px; color: var(--text-muted); }
.footer-bottom{ display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-faint); flex-wrap: wrap; gap: 12px; }

[data-theme="dark"] .footer-top .logo-word{ color: #fff; }
[data-theme="dark"] .site-footer .logo-tagline{ color: rgba(255,255,255,0.55); }
[data-theme="dark"] .footer-col small{ color: rgba(255,255,255,0.4); }
[data-theme="dark"] .footer-col a{ color: rgba(255,255,255,0.8); }
[data-theme="dark"] .footer-col a:hover{ color: #a9c0f5; }
[data-theme="dark"] .footer-col span{ color: rgba(255,255,255,0.8); }
[data-theme="dark"] .footer-bottom{ border-top-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); }

/* Scroll reveal */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
/* Staggered reveal — direct children fade up in sequence rather than all at
   once. Applied via .reveal-stagger on a grid/list container. */
.reveal-stagger > *{ opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.8,.2,1); }
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 0.13s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 0.21s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 0.29s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 0.37s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay: 0.53s; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay: 0.61s; }
@media (prefers-reduced-motion: reduce){
  .reveal-stagger > *{ opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px){
  .value-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .testimonial-slider .testimonial-card{ flex-basis: 82vw; }
  .work-slider .bento-tile.is-teaser{ flex-basis: 82vw; }
  .work-group-grid .work-card{ flex-basis: 82vw; }
  .hero-grid{ grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 860px){
  .services-grid{ grid-template-columns: 1fr; }
  .case-row{ grid-template-columns: 1fr; }
  .case-index{ order: -1; }
  .contact-layout{ grid-template-columns: 1fr; }
  .contact-info, .contact-form-side{ padding: 40px 28px; }
  .footer-top{ flex-direction: column; }
  section{ padding: 64px 0; }
}
@media (max-width: 640px){
  .site-header .container{ height: 64px; }
  .logo-word{ font-size: 20px; }
  .hero{ padding: 64px 0 48px; }
  .hero h1{ font-size: clamp(32px, 9vw, 44px); }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ justify-content: center; }
  .marquee-track span{ padding: 0 18px; font-size: 12px; }
  .process-item{ grid-template-columns: 1fr; gap: 8px; }
  .footer-cols{ gap: 32px; flex-direction: column; }
  .pricing-card.is-featured{ order: -1; }
}
@media (max-width: 420px){
  :root{ --gutter: 16px; }
  .btn{ padding: 13px 20px; font-size: 13px; }
  .service-card{ padding: 28px 22px; }
  .value-card{ padding: 28px 22px; }
  .case-info h3{ font-size: 21px; }
}

/* Mobile nav panel (overrides the desktop inline nav when toggled open) */
@media (max-width: 860px){
  .primary-nav{
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-raised); border-bottom: 1px solid var(--border);
    padding: 8px var(--gutter) 20px;
  }
  .primary-nav ul{ flex-direction: column; gap: 4px; }
  .primary-nav a{ display: block; padding: 12px 0; font-size: 15px; }
  .primary-nav a::after{ display: none; }
  .site-header{ position: sticky; }
}


/* Back-to-top button — hidden until scrolled down, then fades/slides in. */
.back-to-top{
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 14px 30px -12px var(--accent);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1), visibility 0.3s, box-shadow 0.25s ease;
}
.back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ transform: translateY(-3px); box-shadow: 0 20px 38px -12px var(--accent); }
.back-to-top svg{ width: 22px; height: 22px; }
[data-theme="dark"] .back-to-top{ color: #0d1220; }
@media (max-width: 640px){ .back-to-top{ right: 16px; bottom: 16px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce){
  .site-header{ transition: none; }
  .back-to-top{ transition: opacity 0.2s ease, visibility 0.2s; }
}