/* ════════════════════════════════════════════════════════════════
   BLENDR .COM  ·  extras.css  (redesign test)
   Kept-from-current-site pieces + page styles layered on the new
   seawater design system. Loads AFTER site.css so it can override.
   ════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. INTRO SCREEN (homepage only) ───────── */
#intro-screen {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
#intro-bg { position: absolute; inset: 0; background: #0d2a2e; }
#intro-logo-wrap { position: relative; z-index: 1; width: min(540px, 78vw); }
#intro-logo-wrap svg { width: 100%; height: auto; overflow: visible; }
#intro-logo-wrap .stroke-path { fill: none; stroke: #ffffff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
#intro-logo-wrap .fill-path { fill: #ffffff; stroke: none; opacity: 0; }
#intro-logo-wrap .tag-path  { fill: #ffffff; stroke: none; opacity: 0; }

/* hide page chrome while the intro plays (revealed by the intro script) */
body.intro-active .nav,
body.intro-active main,
body.intro-active .footer { opacity: 0; pointer-events: none; }
body:not(.intro-active) .nav,
body:not(.intro-active) main,
body:not(.intro-active) .footer { opacity: 1; transition: opacity .4s ease; }

/* ───────────────────────── 2. IMAGE HERO (homepage) ──────────────── */
/* full-bleed photo + big "CREATE / Your Brand" — no wave, no scroll cue */
.hero { align-items: center; justify-content: center; text-align: center; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1.06); transition: transform 10s ease; will-change: transform;
}
.hero-bg.loaded { transform: scale(1); }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(13,36,38,0.58) 0%, rgba(13,36,38,0.36) 42%, rgba(15,34,38,0.88) 100%);
}
.hero > .container { position: relative; z-index: 3; }
.hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; }

.hero-create {
  display: block; font-family: var(--bl-font-display); font-weight: 900;
  font-size: clamp(4.5rem, 13vw, 15rem); letter-spacing: 0.08em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.92); line-height: 0.92;
  opacity: 0; transform: translateX(-70px);
}
body.hero-ready .hero-create { animation: heroFromLeft 2s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero-tagline {
  display: block; font-family: var(--bl-font-display); font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 8rem); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bl-white); line-height: 0.92; margin-top: -0.5em;
  position: relative; z-index: 2;
  opacity: 0; transform: translateX(70px);
}
body.hero-ready .hero-tagline { animation: heroFromRight 2s cubic-bezier(0.16,1,0.3,1) 0.5s both; }

@keyframes heroFromLeft  { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: translateX(0); } }
@keyframes heroFromRight { from { opacity: 0; transform: translateX(70px);  } to { opacity: 1; transform: translateX(0); } }
@keyframes heroFadeUp    { from { opacity: 0; transform: translateY(24px);  } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px){
  .hero-create  { font-size: clamp(3.5rem, 16vw, 7rem); }
  .hero-tagline { font-size: clamp(1.8rem, 9vw, 4rem); }
}

/* ───────────────────────── 3. INNER-PAGE HERO ────────────────────── */
/* shorter photo hero with a big outline title (Services / Portfolio / Contact).
   NOTE: use .hero-compact (NOT .hero-inner — that collides with site.css's
   .hero-inner content wrapper which clamps width to 980px). */
.hero-compact { min-height: 62vh; }
.hero-compact .hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-inner-title {
  font-family: var(--bl-font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.07em; font-size: clamp(4.5rem, 13vw, 14rem); line-height: 0.92;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.92);
  animation: heroFadeUp 1s var(--site-ease) both;
}
.hero-inner-sub {
  font-family: var(--bl-font-display); font-weight: 400; font-style: italic;
  letter-spacing: 0.3em; text-transform: uppercase; font-size: clamp(0.85rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.72); margin-top: 1.1rem;
  animation: heroFadeUp 1s var(--site-ease) 0.15s both;
}

/* active nav link (current page) */
.nav-links a.active { color: var(--bl-fg); }
.nav-links a.active::after { width: 100%; }

/* ─── nav chrome over the (always-dark) hero photo ───
   The hero image never changes with the theme, so at the top the logo + menu
   items must stay LIGHT in both modes (a dark logo/links would vanish on the
   dark photo). Once scrolled, the nav gains a theme-tinted background, so it
   reverts to the theme-adaptive colours and reads against whatever is behind it.
   (!important is needed to beat the inline filter that the theme JS sets on the logo.) */
.nav:not(.scrolled) .nav-logo { filter: brightness(0) invert(1) !important; }
.nav:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.72); }
.nav:not(.scrolled) .nav-links a:hover,
.nav:not(.scrolled) .nav-links a.active { color: #fff; }
.nav:not(.scrolled) .nav-links a::after { background: #fff; }
.nav:not(.scrolled) .nav-burger { color: #fff; border-color: rgba(255,255,255,0.35); }
/* language-switcher trigger: same treatment so it stays visible over the dark hero in both themes */
.nav:not(.scrolled) .nav-dd--lang .ls-trigger { color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.38); }
.nav:not(.scrolled) .nav-dd--lang:hover .ls-trigger,
.nav:not(.scrolled) .nav-dd--lang:focus-within .ls-trigger { color: #fff; border-color: #fff; }

/* bigger wordmark in the nav; shrinks a touch on scroll. The intro fly-in
   measures the live nav logo at runtime, so it lands at this size automatically. */
.nav-logo { height: 38px; transition: height .4s var(--site-ease), opacity .3s; }
.nav.scrolled .nav-logo { height: 30px; }

/* the .mixed lock-up only spaced the italic word, so a bold word placed second
   ran into the first ("partner|brands", "what clients|say"). Guarantee a gap
   between the two words regardless of order. */
.mixed > * + * { margin-left: 0.18em; }
/* heading lockups: balance multi-line wraps so longer translations don't look ragged */
.mixed { text-wrap: balance; }
/* large centered display headings read as a clean 2-line stack (bold phrase / italic phrase),
   which stays balanced across languages of different lengths instead of wrapping mid-phrase */
.section-head.center .mixed .s { display: block; margin-left: 0; }

/* ───────────────────────── 4. SEAMLESS MARQUEE ───────────────────── */
/* remove the left/right edge fades so the partner logos run seamlessly */
.marquee::before, .marquee::after { display: none !important; }

/* drag-scroll rail: stop the browser's native image/link drag from
   hijacking the gesture (that's why "drag to explore" only worked once) */
.rail { user-select: none; -webkit-user-select: none; }
.rail a, .rail img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }

/* ─── services page: animated "we ___" verb-cycle heading (from the original site) ─── */
.h-we {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  letter-spacing: 0; line-height: 0.92; text-transform: none;
  font-family: var(--bl-font-display); font-size: clamp(3.2rem, 8vw, 8rem);
}
.h-we .we {
  font-weight: 300; font-style: italic; font-size: 0.62em;
  color: var(--bl-fg-muted); letter-spacing: 0.07em; margin-bottom: -0.1em;
}
.h-we .design {
  font-weight: 900; color: var(--bl-accent); letter-spacing: 0.02em;
  display: inline-block; /* required for the transform animations */
}
@keyframes vExitToTop    { to { opacity: 0; transform: translateY(-28px); } }
@keyframes vExitToBottom { to { opacity: 0; transform: translateY(28px);  } }
@keyframes vExitToLeft   { to { opacity: 0; transform: translateX(-40px); } }
@keyframes vExitToRight  { to { opacity: 0; transform: translateX(40px);  } }
@keyframes vExitBloom    { to { opacity: 0; transform: scale(1.08) translateY(-12px); } }
@keyframes vExitShrink   { to { opacity: 0; transform: scale(0.88); } }
@keyframes vEnterFromBottom { from { opacity: 0; transform: translateY(28px);  } }
@keyframes vEnterFromTop    { from { opacity: 0; transform: translateY(-28px); } }
@keyframes vEnterFromRight  { from { opacity: 0; transform: translateX(40px);  } }
@keyframes vEnterFromLeft   { from { opacity: 0; transform: translateX(-40px); } }
@keyframes vEnterBloom      { from { opacity: 0; transform: scale(0.88); } }
@keyframes vEnterFade       { from { opacity: 0; transform: scale(1.06) translateY(10px); } }

/* ───────────────────────── 5. SIMPLE CTA BLOCK ───────────────────── */
.cta-simple { text-align: center; max-width: 720px; margin: 0 auto; }
.cta-simple h2 { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 22px; }
.cta-simple p { color: var(--bl-fg-muted); font-weight: 300; font-size: 1.08rem; line-height: 1.8; margin-bottom: 30px; }

/* soft SEO / long-copy block */
.seo-copy p { color: var(--bl-fg-muted); font-weight: 300; font-size: 0.92rem; line-height: 1.85; max-width: 90ch; margin: 0 auto; text-align: center; }

/* ───────────────────────── 6. PORTFOLIO GRID ─────────────────────── */
.pf-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.pf-pill {
  font-family: var(--bl-font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bl-fg-muted); background: transparent;
  border: 1px solid var(--bl-hairline); border-radius: var(--bl-r-pill); padding: 10px 20px;
  cursor: pointer; transition: color .25s, border-color .25s, background .25s;
}
.pf-pill:hover { border-color: var(--bl-accent); color: var(--bl-fg); }
.pf-pill.on { background: var(--bl-accent); border-color: var(--bl-accent); color: var(--bl-bg); }

.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 880px){ .pf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pf-grid { grid-template-columns: 1fr; } }
.pf-item {
  position: relative; display: block; border-radius: var(--bl-r-md); overflow: hidden;
  border: 1px solid var(--bl-hairline); background: color-mix(in srgb, var(--bl-bg-alt) 62%, transparent);
  text-decoration: none;
}
.pf-item.hide { display: none; }
.pf-figure { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.pf-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--site-ease); }
.pf-item:hover .pf-figure img { transform: scale(1.06); }
.pf-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,36,38,0) 38%, rgba(13,36,38,0.82) 100%); }
.pf-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 24px; }
.pf-title { font-family: var(--bl-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.3rem; color: #fff; }
.pf-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-tags span { font-family: var(--bl-font-display); font-weight: 700; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-sky); border: 1px solid rgba(178,212,222,0.28); border-radius: var(--bl-r-pill); padding: 3px 9px; }

/* ───────────────────────── 7. CONTACT PAGE EXTRAS ────────────────── */
.loc-grid { display: flex; flex-direction: column; gap: 22px; }
.loc-card { border: 1px solid var(--bl-hairline); border-radius: var(--bl-r-md); padding: 24px 24px; background: color-mix(in srgb, var(--bl-bg) 55%, transparent); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.loc-card h5 { font-family: var(--bl-font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bl-accent); margin-bottom: 8px; }
.loc-card p { color: var(--bl-fg); font-weight: 300; margin-bottom: 12px; }
.loc-links { display: flex; gap: 18px; flex-wrap: wrap; }
.loc-links a { color: var(--bl-fg-muted); text-decoration: none; font-size: 0.85rem; font-weight: 300; transition: color .25s; }
.loc-links a:hover { color: var(--bl-accent); }

.check-group { display: flex; flex-direction: column; gap: 10px; }
.check { display: flex; align-items: flex-start; gap: 10px; color: var(--bl-fg-muted); font-weight: 300; font-size: 0.9rem; cursor: pointer; }
.check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--bl-accent); flex: 0 0 auto; }
.check a { color: var(--bl-accent); }
.req { color: var(--bl-accent); }

/* ───────────────────────── 9. LEGAL / CONTENT PAGES ─────────────── */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-updated { font-family: var(--bl-font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bl-accent); margin-bottom: 44px; }
.legal-block { margin-bottom: 40px; }
.legal-block h2 { font-family: var(--bl-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.25rem; color: var(--bl-fg); margin-bottom: 14px; }
.legal-block p { color: var(--bl-fg-muted); font-weight: 300; line-height: 1.85; margin-bottom: 12px; }
.legal-block ul { color: var(--bl-fg-muted); font-weight: 300; line-height: 1.8; margin: 0 0 12px 22px; }
.legal-block li { margin-bottom: 6px; }
.legal-block address { color: var(--bl-fg-muted); font-weight: 300; font-style: normal; line-height: 1.8; }
.legal-link { color: var(--bl-accent); text-decoration: none; }
.legal-link:hover { text-decoration: underline; }

/* honeypot — off-screen, hidden from humans + assistive tech; only bots fill it */
.hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.cf-turnstile { margin: 4px 0; }

/* ───────────────────────── 8. PORTFOLIO DETAIL (case study) ──────── */
.project-logo { height: 75px; width: auto; margin: 0 auto 24px; filter: brightness(0) invert(1); opacity: 0.92; }
.project-title {
  font-family: var(--bl-font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.0; font-size: clamp(2.4rem, 6vw, 5.5rem);
  color: #fff; max-width: 22ch; margin: 6px auto 0;
  animation: heroFadeUp 1s var(--site-ease) 0.1s both;
}
.project-meta { margin-top: 14px; font-family: var(--bl-font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* challenge / approach */
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 800px){ .cs-grid { grid-template-columns: 1fr; gap: 34px; } }
.cs-block .eyebrow { margin-bottom: 14px; }
.cs-block p { color: var(--bl-fg-muted); font-weight: 300; line-height: 1.85; font-size: 1.22rem; }
.cs-block p.lead { color: var(--bl-fg); }

/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.gallery-grid.single { grid-template-columns: 1fr; max-width: 920px; margin: 0 auto; }
@media (max-width: 700px){ .gallery-grid { grid-template-columns: 1fr; } }
.gallery-item { border-radius: var(--bl-r-md); overflow: hidden; border: 1px solid var(--bl-hairline); background: var(--bl-bg-alt); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--site-ease); }
.gallery-item:hover img { transform: scale(1.04); }

/* services delivered pills */
.svc-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.svc-pills span { font-family: var(--bl-font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bl-accent); border: 1px solid var(--bl-hairline); border-radius: var(--bl-r-pill); padding: 8px 18px; }

/* drop the FIRST flow wave on every page — it peeked out from behind the hero images */
.flow-wave:first-child { display: none !important; }

/* stacked CTA lock-up: CREATE over "your brand" */
.cta-stack { line-height: 1.05; }
.cta-stack .b, .cta-stack .s { display: block; }
.cta-stack .s { margin-left: 0; }

/* partner-brand marquee logos ~50% larger */
.mq-row img { height: 57px; }

/* light mode: tint the partner logos a soft brand teal (instead of washed-out
   natural colours at half opacity, which read as grey). Uniform seawater-teal
   silhouette that stands out gently on the pale background. */
[data-theme="light"] .mq-logo--invert {
  filter: brightness(0) invert(42%) sepia(30%) saturate(560%) hue-rotate(140deg) brightness(0.92) contrast(0.9);
  opacity: 0.8;
}
[data-theme="light"] .mq-row img:hover { opacity: 1; filter: brightness(0) invert(28%) sepia(34%) saturate(720%) hue-rotate(140deg) brightness(0.88) contrast(0.95); }

/* ══════════════════════════════════════════════════════════════════
   SEO build (v12): service pages, expanded case studies, keyworded hero H1
   ══════════════════════════════════════════════════════════════════ */

/* keyworded, visible H1 under the hero display type (home) */
.hero-h1 {
  margin: 18px 0 0; font-family: var(--bl-font-body);
  font-size: clamp(0.95rem, 1.7vw, 1.15rem); font-weight: 600; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.86); max-width: 40ch;
}

/* service-page hero: brand gradient fallback behind the proof image (uses the default dark hero-overlay for legibility) */
.service-hero { background: linear-gradient(150deg, #164046 0%, #0F2226 56%, #0A1C1F 100%); }

/* "what's included" checklist */
.svc-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 40px; }
.svc-included li { position: relative; padding-left: 34px; font-size: 1.08rem; line-height: 1.5; }
.svc-included li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bl-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat; }
@media (max-width: 680px){ .svc-included { grid-template-columns: 1fr; } }

/* process steps */
.svc-process { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 40px; }
.proc-step { display: flex; gap: 18px; align-items: flex-start; }
.proc-n { font-family: var(--bl-font-display); font-size: 2.1rem; line-height: 1; font-weight: 800; color: var(--bl-accent); opacity: 0.55; min-width: 1.6em; }
.proc-step h3 { margin: 0 0 6px; font-size: 1.25rem; }
.proc-step p { margin: 0; color: var(--bl-fg-muted); }
@media (max-width: 680px){ .svc-process { grid-template-columns: 1fr; } }

/* proof / selected work cards on service pages */
.svc-proof { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.proof-card { display: block; text-decoration: none; color: inherit; border-radius: var(--bl-r-md); overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid var(--bl-hairline); transition: transform var(--bl-trans), border-color var(--bl-trans); }
.proof-card:hover { transform: translateY(-4px); border-color: rgba(178,212,222,0.4); }
.proof-img { aspect-ratio: 16/10; overflow: hidden; }
.proof-img img { width: 100%; height: 100%; object-fit: cover; }
.proof-cap { padding: 18px 20px 22px; }
.proof-name { font-family: var(--bl-font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; }
.proof-cap p { margin: 0 0 12px; color: var(--bl-fg-muted); font-size: 0.98rem; }
.proof-link { font-size: 0.9rem; font-weight: 700; color: var(--bl-accent); }
.proof-quote { margin: 0; padding: 24px; border-left: 3px solid var(--bl-accent); background: rgba(255,255,255,0.03); border-radius: 0 var(--bl-r-md) var(--bl-r-md) 0; }
.proof-quote blockquote { margin: 0 0 12px; font-size: 1.1rem; font-style: italic; }
.proof-quote figcaption { color: var(--bl-fg-muted); font-size: 0.92rem; }
@media (max-width: 860px){ .svc-proof { grid-template-columns: 1fr; } }

/* FAQ accordion (native details) */
.faq { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--bl-hairline); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-family: var(--bl-font-display); font-weight: 600; font-size: 1.18rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 1.6rem; font-weight: 400; color: var(--bl-accent); transition: transform var(--bl-trans); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 22px; }
.faq-a p { margin: 0; color: var(--bl-fg-muted); font-size: 1.05rem; line-height: 1.6; max-width: 70ch; }

/* case-study additions: delivered list, quote, prev/next nav */
.cs-delivered { margin-top: 34px; }
.cs-delivered ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 40px; }
.cs-delivered li { position: relative; padding-left: 22px; color: var(--bl-fg-muted); }
.cs-delivered li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--bl-accent); }
.cs-quote { margin: 40px 0 0; padding: 28px 32px; border-left: 3px solid var(--bl-accent); background: rgba(255,255,255,0.03); border-radius: 0 var(--bl-r-md) var(--bl-r-md) 0; max-width: 820px; }
.cs-quote blockquote { margin: 0 0 12px; font-size: 1.25rem; font-style: italic; line-height: 1.5; }
.cs-quote figcaption .nm { font-weight: 700; }
.cs-quote figcaption .rl { color: var(--bl-fg-muted); }
.cs-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--bl-hairline); }
.cs-related { font-weight: 700; color: var(--bl-accent); text-decoration: none; }
.cs-related:hover { text-decoration: underline; }
.cs-prevnext { display: flex; gap: 24px; flex-wrap: wrap; }
.cs-prevnext a { color: var(--bl-fg-muted); text-decoration: none; font-size: 0.95rem; }
.cs-prevnext a:hover { color: var(--bl-fg); }
@media (max-width: 680px){ .cs-delivered ul { grid-template-columns: 1fr; } }

/* language switcher (used by the localized pages) */
.lang-switch { position: relative; }
.lang-switch > .lang-btn { background: none; border: 1px solid var(--bl-hairline); color: inherit; border-radius: var(--bl-r-pill); padding: 6px 12px; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lang-switch .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; background: var(--bl-deep-teal); border: 1px solid var(--bl-hairline); border-radius: var(--bl-r-md); padding: 6px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--bl-trans); z-index: 60; }
.lang-switch:hover .lang-menu, .lang-switch:focus-within .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-switch .lang-menu a { display: block; padding: 9px 12px; border-radius: var(--bl-r-sm); color: rgba(255,255,255,0.86); text-decoration: none; font-size: 0.9rem; }
.lang-switch .lang-menu a:hover, .lang-switch .lang-menu a.active { background: rgba(255,255,255,0.08); color: #fff; }

/* descriptive service links (home seo block + services page) */
.seo-copy .seo-links, .svc-links p { margin-top: 16px; color: var(--bl-fg-muted); font-size: 1rem; }
.seo-copy .seo-links a, .svc-links a { color: var(--bl-accent); text-decoration: none; font-weight: 600; }
.seo-copy .seo-links a:hover, .svc-links a:hover { text-decoration: underline; }

/* ── nav Services dropdown (desktop) ── */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
/* frosted-glass panel that reads as a soft shadow of the background, not a solid block */
.nav-dd > .nav-dd-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 14px; min-width: 212px; padding: 0 7px; z-index: 70;
  display: flex; flex-direction: column;
  background: rgba(12, 28, 32, 0.46);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 16px;
  box-shadow: 0 28px 64px -18px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.22);
  /* accordion: reveal by animating height + padding, items stagger in */
  max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: max-height .46s cubic-bezier(.16,1,.3,1), padding .46s cubic-bezier(.16,1,.3,1), opacity .3s ease, visibility .46s;
}
.nav-dd > .nav-dd-menu::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 18px; }
.nav-dd:hover > .nav-dd-menu, .nav-dd:focus-within > .nav-dd-menu { max-height: 340px; padding: 8px 7px; opacity: 1; visibility: visible; }
.nav-dd-menu a {
  display: block; padding: 11px 16px !important; border-radius: 10px;
  color: rgba(255,255,255,0.82) !important; font-size: 0.7rem !important; letter-spacing: 0.16em; white-space: nowrap;
  opacity: 0;
  transition: background .16s ease, color .16s ease; /* hover: instant, no stagger delay */
}
.nav-dd-menu a::after { display: none !important; }
.nav-dd-menu a:hover { background: rgba(255,255,255,0.13); color: #fff !important; }
/* staggered reveal via a separate animation, so the hover highlight stays instant */
.nav-dd:hover .nav-dd-menu a, .nav-dd:focus-within .nav-dd-menu a { animation: ddIn .4s cubic-bezier(.16,1,.3,1) both; }
.nav-dd:hover .nav-dd-menu a:nth-child(1), .nav-dd:focus-within .nav-dd-menu a:nth-child(1) { animation-delay: .05s; }
.nav-dd:hover .nav-dd-menu a:nth-child(2), .nav-dd:focus-within .nav-dd-menu a:nth-child(2) { animation-delay: .10s; }
.nav-dd:hover .nav-dd-menu a:nth-child(3), .nav-dd:focus-within .nav-dd-menu a:nth-child(3) { animation-delay: .15s; }
.nav-dd:hover .nav-dd-menu a:nth-child(4), .nav-dd:focus-within .nav-dd-menu a:nth-child(4) { animation-delay: .20s; }
.nav-dd:hover .nav-dd-menu a:nth-child(5), .nav-dd:focus-within .nav-dd-menu a:nth-child(5) { animation-delay: .25s; }
.nav-dd:hover .nav-dd-menu a:nth-child(6), .nav-dd:focus-within .nav-dd-menu a:nth-child(6) { animation-delay: .30s; }
@keyframes ddIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* mobile menu: service sub-links, clearly NESTED under Services (smaller + └ connector) */
.menu-links .menu-sub {
  position: relative; font-size: 0.9rem !important; opacity: 0.62; letter-spacing: 0.07em;
  padding-left: 3.35rem; margin: 2px 0 !important; font-style: italic;
}
.menu-links .menu-sub::before {
  content: ""; position: absolute; left: 2.5rem; top: -0.3em; width: 0.52em; height: 1em;
  border-left: 1px solid color-mix(in srgb, var(--bl-fg) 38%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--bl-fg) 38%, transparent);
  border-bottom-left-radius: 3px;
}

/* services page: the 5 service pages as prominent linked pills (overrides the earlier text style) */
.svc-links { text-align: center; margin-top: 48px; }
.svc-links .lbl { display: block; color: var(--bl-fg-muted); margin-bottom: 18px; font-size: 1.02rem; }
.svc-links a { display: inline-block; margin: 5px; padding: 10px 20px; border: 1px solid var(--bl-hairline); border-radius: var(--bl-r-pill); color: var(--bl-accent) !important; text-decoration: none; font-weight: 600; font-size: 0.98rem; transition: border-color var(--bl-trans), background var(--bl-trans); }
.svc-links a:hover { border-color: var(--bl-accent); background: rgba(178,212,222,0.08); }

/* ── breadcrumbs (service + case-study pages) ── */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; font-size: 0.85rem; color: var(--bl-fg-muted); margin-bottom: 22px; }
.breadcrumb a { color: var(--bl-accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb [aria-current="page"] { color: var(--bl-fg-muted); }

/* services-page cards become links to their category pages */
a.svc { text-decoration: none; color: inherit; display: block; transition: transform var(--bl-trans), border-color var(--bl-trans); }
a.svc:hover { transform: translateY(-4px); }
a.svc h3 { display: inline-flex; align-items: center; }
/* brand arrow that draws itself out of the title AFTER the icon has drawn (delay .5s) */
.svc-cta-arrow { width: 0.92em; height: 0.92em; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: square; stroke-linejoin: miter; color: var(--bl-accent); margin-left: 4px; opacity: 0; transform: translateX(-10px); transition: opacity .26s ease .28s, transform .38s cubic-bezier(.16,1,.3,1) .28s, margin-left .38s cubic-bezier(.16,1,.3,1) .28s; }
.svc-cta-arrow > * { stroke-dasharray: 100; stroke-dashoffset: 0; }
a.svc:hover .svc-cta-arrow { opacity: 1; transform: translateX(0); margin-left: 10px; }
a.svc:hover .svc-cta-arrow > * { animation: bl-draw .42s ease .28s both; }
@media (prefers-reduced-motion: reduce) { .svc-cta-arrow { transition: none; opacity: 1; margin-left: 10px; transform: none; } .svc-cta-arrow > * { animation: none !important; } }

/* nav dropdown adapts to light mode: lighter frosted glass + darker text */
[data-theme="light"] .nav-dd > .nav-dd-menu { background: rgba(232, 245, 248, 0.72); border-color: rgba(15,34,38,0.10); box-shadow: 0 28px 64px -18px rgba(15,34,38,0.22), 0 2px 12px rgba(15,34,38,0.08); }
[data-theme="light"] .nav-dd-menu a { color: rgba(15,34,38,0.78) !important; }
[data-theme="light"] .nav-dd-menu a:hover { background: rgba(15,34,38,0.06); color: var(--bl-ink) !important; }

/* ── services-page category icons (brand bl-ic style, draw-on-hover to match the backend) ── */
.svc-ic { width: 2.3rem; height: 2.3rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: square; stroke-linejoin: miter; color: var(--bl-accent); display: block; margin-bottom: 16px; }
.svc-ic > * { stroke-dasharray: 100; stroke-dashoffset: 0; }
@keyframes bl-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
a.svc:hover .svc-ic > * { animation: bl-draw .62s ease; }
@media (prefers-reduced-motion: reduce) { .svc-ic > * { animation: none !important; stroke-dashoffset: 0 !important; } }

/* ── let the dropdown's frosted glass actually blur the page ──
   The nav has its own backdrop-filter, which makes it a "backdrop root" and confines any
   descendant's backdrop-filter (the dropdown). Removing it from the nav lets the dropdown
   blur the background behind it. The nav keeps its translucent scrolled background. */
.nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* a touch stronger blur + a hair more tint so text stays legible over any background */
.nav-dd > .nav-dd-menu { -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); background: rgba(11, 26, 30, 0.52); }
[data-theme="light"] .nav-dd > .nav-dd-menu { background: rgba(228, 243, 246, 0.62); }

/* buttons over the always-dark image hero (e.g. the 404 page) must stay light in BOTH themes,
   otherwise the ghost button's dark text/border vanishes on the dark photo in light mode */
.hero .btn--ghost, .hero-compact .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.hero .btn--ghost:hover, .hero-compact .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.12); }

/* ── language switcher (multilingual launch) ─────────────────────────── */
/* the desktop switcher REUSES the Services .nav-dd dropdown so it is visually identical */
.nav-dd--lang { margin-right: 2px; }
.nav-dd--lang .ls-trigger {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-family: var(--bl-font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--bl-fg-muted); background: transparent; border: 1px solid var(--bl-hairline);
  border-radius: var(--bl-r-pill); padding: 6px 10px; transition: color .25s, border-color .25s;
}
.nav-dd--lang:hover .ls-trigger, .nav-dd--lang:focus-within .ls-trigger { color: var(--bl-fg); border-color: var(--bl-accent); }
.ls-caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.nav-dd--lang:hover .ls-caret, .nav-dd--lang:focus-within .ls-caret { transform: rotate(180deg); }
/* right-align the frosted panel (the switcher sits at the right edge of the nav) */
.nav-dd--lang > .nav-dd-menu { left: auto; right: 0; transform: none; min-width: 178px; margin-top: 16px; }
/* the Services dropdown items inherit .nav-links a (display font, 700, uppercase, no underline);
   the switcher lives in .nav-right so replicate those so the two dropdowns look identical */
.nav-dd--lang .nav-dd-menu a { font-family: var(--bl-font-display); font-weight: 700; text-transform: uppercase; text-decoration: none; }
.nav-dd-menu a.ls-cur { color: var(--bl-accent) !important; }
/* mobile switcher: a row inside the burger menu */
.lang-switch.mobile { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 22px 0 4px; margin-top: 8px; border-top: 1px solid var(--bl-hairline); }
.lang-switch.mobile a, .lang-switch.mobile .ls-cur { font-family: var(--bl-font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-decoration: none; color: var(--bl-fg-muted); }
.lang-switch.mobile a:hover { color: var(--bl-fg); }
.lang-switch.mobile .ls-cur { color: var(--bl-accent); }
/* keep the desktop switcher out of the way on small screens (mobile uses the in-menu row) */
@media (max-width: 900px) { .nav-dd--lang { display: none; } }

/* ── case study: clearer reading hierarchy (was blending together) ───── */
/* the intro is the lead-in: make it the largest, brightest text on the page */
.cs-intro { font-size: clamp(1.3rem, 2.3vw, 1.66rem) !important; color: var(--bl-fg) !important; font-weight: 300; line-height: 1.6; letter-spacing: -0.005em; }
#overview .cs-grid { margin-top: 52px !important; }
/* stacked blocks (What we delivered, The outcome) get a divider rule + air so sections read apart */
#overview > .container > .cs-delivered,
#overview > .container > .cs-block { margin-top: 58px !important; padding-top: 42px; border-top: 1px solid var(--bl-hairline); max-width: 860px; }
.cs-block .eyebrow, .cs-delivered .eyebrow { display: block; margin-bottom: 20px; font-size: 0.72rem; letter-spacing: 0.2em; }
.cs-block p.lead { font-size: 1.1rem; line-height: 1.85; color: var(--bl-fg); }
.cs-delivered li { font-size: 1.02rem; line-height: 1.55; }
.cs-quote { margin-top: 58px; }

/* ───────────────────────── MOBILE POLISH (multilingual round) ────── */
/* nothing may widen the page beyond the viewport (killed the sideways pan gap) */
html, body { overflow-x: clip; }

/* iOS: 100vh grows/shrinks while the browser bar collapses mid-swipe, which made the
   hero photo visibly "zoom" and snap back. Small-viewport units stay stable. */
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
  .hero-compact { min-height: 62svh; }
}

/* the scrolled nav has no blur (that broke the dropdown), so its tint must be
   opaque enough that content does not ghost through behind the logo */
.nav.scrolled { background: var(--bl-bg); }

/* work-rail card titles inherited the body's tall line-height -> huge line gaps */
.work-title { line-height: 1.12; }

@media (max-width: 760px) {
  /* display headings that overflowed a phone screen */
  .hero-inner-title { font-size: clamp(2.7rem, 13vw, 4.4rem); letter-spacing: 0.05em; }
  .project-title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .rail-head { align-items: flex-start; }
  .rail-head > div { min-width: 0; }
  .rail-head .mixed { font-size: clamp(1.9rem, 8.6vw, 2.4rem) !important; }
  /* card overlays: tighter type so the category tag and title read cleanly */
  .work-cap { padding: 18px 20px; }
  .work-cat { font-size: 0.56rem; letter-spacing: 0.16em; line-height: 1.5; }
  .work-title { font-size: 1.3rem; }
}

/* mobile menu: calmer scale so long localized labels fit with air around them */
@media (max-width: 900px) {
  .menu-links a { font-size: clamp(2rem, 10vw, 3.2rem); }
}

/* ── mobile menu round 2: oversized waves, top language dropdown, icon socials ── */
/* the wave art fills its box, so on a narrow phone it rendered small — oversize the
   box well past the viewport (overlay clips it) for the same big sweep as desktop */
.menu-overlay { overflow: hidden; }
@media (max-width: 900px) {
  .menu-overlay .wavefx { left: -70vw; right: -70vw; top: -12%; bottom: -12%; }
}
/* language dropdown lives in the overlay top bar (visible even though the nav one is hidden) */
.menu-overlay .nav-dd--lang { display: inline-flex; margin-left: auto; margin-right: 14px; position: relative; z-index: 5; }
/* tap-toggled state (site.js adds .open) mirrors the hover/focus reveal */
.nav-dd--lang.open > .nav-dd-menu { max-height: 340px; padding: 8px 7px; opacity: 1; visibility: visible; }
.nav-dd--lang.open .nav-dd-menu a { animation: ddIn .4s cubic-bezier(.16,1,.3,1) both; }
.nav-dd--lang.open .ls-caret { transform: rotate(180deg); }
/* the overlay is theme-surface (not the dark hero) — let the trigger follow the theme there */
.menu-overlay .ls-trigger { color: var(--bl-fg-muted); border-color: var(--bl-hairline); }
/* menu socials as brand icons (same set as the footer) */
.menu-foot--icons { gap: 26px; }
.menu-foot--icons a { color: var(--bl-fg-muted); transition: color .25s; }
.menu-foot--icons a:hover { color: var(--bl-accent); }
.menu-foot--icons svg { width: 22px; height: 22px; display: block; }

/* section-head lockups are two spans with NO whitespace between them = an unbreakable
   line that can never wrap. On phones, stack the italic part on its own line (like the
   CTA already does) and size the row to the viewport. */
@media (max-width: 760px) {
  .section-head h2.mixed { font-size: clamp(2rem, 8.8vw, 2.6rem); }
  .section-head .mixed .s { display: block; margin-left: 0; }
}

/* the language dropdown opens over the menu links (menu-top must stack above them) */
.menu-overlay .menu-top { z-index: 6; }

/* accented capitals (Á, Ë, Ú, ñ) extend ABOVE the tight display line-height (0.92-1.0);
   on mobile the composited hero entrance animations clip that overflowing ink, so the
   accents vanished. Reserve headroom INSIDE each box and compensate the layout shift. */
.hero-create { padding-top: 0.14em; margin-top: -0.14em; }
.hero-inner-title { padding-top: 0.14em; margin-top: -0.14em; }
.project-title { padding-top: 0.14em; margin-top: calc(6px - 0.14em); }
/* the tagline keeps its designed -0.5em overlap on top of the outline word */
.hero-tagline { padding-top: 0.14em; margin-top: calc(-0.5em - 0.14em); }