/* ============================================================
   Buttons
   ============================================================ */
.btn{
  font-family:var(--font-zodiak); font-size:var(--fs-btn); line-height:1.7; letter-spacing:-0.4px;
  border-radius:var(--radius-md); padding:var(--btn-pad-y) var(--btn-pad-x); display:inline-flex; align-items:center; gap:16px;
  cursor:pointer; border:none; white-space:nowrap;
  transition:background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.btn-primary{ background:var(--color-accent); color:var(--color-text-inverse); }
.btn-primary:hover{ background:var(--color-accent-hover); }
.btn-primary:focus-visible{ background:var(--color-accent-active); outline:2px solid var(--color-accent-active); outline-offset:2px; }
.btn-primary .icon{ width:24px; height:24px; flex-shrink:0; }
.btn-secondary{ background:transparent; color:var(--color-text); border:1px solid var(--color-border); }
.btn-secondary:hover{ background:var(--sandy-30); }
.btn-secondary:focus-visible{ background:var(--sandy-40); outline:2px solid var(--color-border); outline-offset:2px; }

/* ============================================================
   Nav
   ============================================================ */
.site-header{
  padding:28px 0; position:sticky; top:0; z-index:50;
  background:transparent; transition:background-color 220ms var(--ease-out);
}
.site-header.is-scrolled{ background:var(--color-bg); }
.site-header .wrap{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.nav-links{ display:flex; gap:32px; font-family:var(--font-zodiak); font-size:18px; letter-spacing:-0.36px; color:var(--color-text); }
.nav-links a{ transition:opacity 180ms var(--ease-out); }
.nav-links a:hover{ opacity:0.7; }
.nav-dropdown{ position:relative; }
.nav-dropdown::after{ content:""; position:absolute; left:-16px; right:-16px; top:100%; height:16px; }
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 16px); left:-16px; z-index:60; width:380px; padding:8px; box-shadow:0 12px 32px rgba(0,0,0,0.08);
  background:var(--color-bg); border:1px solid var(--color-border-subtle); border-radius:var(--radius-lg);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
.nav-dropdown-menu a{ display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:var(--radius-lg); letter-spacing:-0.36px; transition:background-color 180ms var(--ease-out); }
.nav-dropdown-menu a:hover{ opacity:1; background:var(--sandy-30); }
.nav-dropdown-menu strong{ font-family:var(--font-sora); font-weight:400; font-size:16px; letter-spacing:-0.32px; }
.nav-dropdown-menu span{ font-size:14px; letter-spacing:0; opacity:0.75; }
@media (prefers-reduced-motion:reduce){ .nav-dropdown-menu{ transition:none; transform:none; } }
.brand{ text-align:center; display:flex; justify-content:center; }
.brand .wordmark-logo{ height:40px; width:auto; }
.nav-actions{ display:flex; justify-content:flex-end; gap:12px; }
.nav-actions .btn{ padding:10px 22px; font-size:16px; }

.nav-toggle, .nav-sheet{ display:none; }
@media (max-width:1199px){
  .nav-links:not(.nav-back){ display:none; }
  .nav-toggle{ justify-self:start; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:0; border-radius:var(--radius-md); background:var(--sandy-15); color:var(--color-text); cursor:pointer; transition:background-color 180ms var(--ease-out); }
  .nav-toggle:hover{ background:var(--sandy-10); }
  .nav-toggle:focus-visible{ outline:2px solid var(--color-border); outline-offset:2px; }
  .nav-toggle-close{ display:none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-open{ display:none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-close{ display:inline; }
  .nav-actions{ align-items:center; gap:8px; }
  .site-header.nav-is-open{ background:var(--color-bg); }
  .nav-sheet{
    display:block; position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 100%); overflow-y:auto;
    padding:8px 16px 24px; background:var(--color-bg); border-bottom:1px solid var(--color-border-subtle);
    box-shadow:0 12px 32px rgba(0,0,0,0.08); animation:nav-sheet-in 180ms var(--ease-out);
  }
  .nav-sheet[hidden]{ display:none; }
  .nav-sheet-label{ margin:0; padding:12px; font-family:var(--font-zodiak); font-size:18px; letter-spacing:-0.36px; }
  .nav-sheet-cases{ list-style:none; margin:0 0 4px 24px; padding:0 0 0 8px; border-left:1px solid var(--sandy-30); }
  .nav-sheet-cases a{ display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:var(--radius-lg); }
  .nav-sheet-cases a:hover{ background:var(--sandy-30); }
  .nav-sheet-cases strong{ font-family:var(--font-sora); font-weight:400; font-size:16px; letter-spacing:-0.32px; }
  .nav-sheet-cases span{ font-family:var(--font-zodiak); font-size:14px; opacity:0.75; }
  .nav-sheet-link{ display:block; padding:12px; border-radius:var(--radius-lg); font-family:var(--font-zodiak); font-size:18px; letter-spacing:-0.36px; }
  .nav-sheet-link:hover{ background:var(--sandy-30); }
  .nav-sheet-cta{ display:none; margin:12px 12px 0; text-align:center; }
  body.nav-open{ overflow:hidden; }
}
@keyframes nav-sheet-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .nav-sheet{ animation:none !important; } }
@media (max-width:1199px){
  .nav-actions .btn-secondary{ display:none; }
  .nav-sheet-cta{ display:block; }
}

/* Case study pages: back link + logo + actions (logo stays centred) */
.nav-back{ display:flex; }
.back-link{ display:inline-flex; align-items:center; gap:8px; }
.back-link img{ width:24px; height:24px; }
@media (max-width:1439px){
  .site-header .wrap:has(.nav-back){ grid-template-columns:1fr auto 1fr; }
  .site-header .wrap:has(.nav-back) .brand{ text-align:center; justify-content:center; }
}
@media (max-width:809px){
  .nav-back .back-link span{ display:none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; padding:140px 0 0; overflow:hidden; }
.hero-glow{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1100px; max-width:none; opacity:0.9; pointer-events:none; z-index:0;
}
.hero-content{ position:relative; z-index:1; max-width:1100px; margin:0 auto; text-align:center; padding:0 24px; }
.hero-heading{
  font-size:var(--fs-h1); line-height:1.2; letter-spacing:var(--ls-h1); color:var(--color-text);
  min-height:2.4em;
}
.hero-heading .line{ display:block; }
.hero-sub{
  font-family:var(--font-zodiak); font-size:var(--fs-lead); line-height:1.5; color:var(--color-text);
  max-width:990px; margin:28px auto 0;
}

.word{ display:inline-block; white-space:nowrap; }
.char{ display:inline-block; }
.char.animate{
  opacity:0; filter:blur(10px); transform:translateY(10px);
  animation:charIn 700ms var(--ease-out) forwards;
}
@keyframes charIn{ to{ opacity:1; filter:blur(0); transform:translateY(0); } }

/* ---- Marquee ---- */
.marquee{
  position:relative; z-index:1; margin-top:56px; overflow:hidden;
  mask-image:linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.marquee-track{
  display:flex; gap:16px; width:max-content;
  animation:marqueeScroll 40s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track img{
  height:330px; width:400px; object-fit:cover; border-radius:var(--radius-lg); flex-shrink:0;
}
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-33.3333%); }
}

/* ---- Trust bar ---- */
.trust-bar{
  position:relative; z-index:1; max-width:900px; margin:56px auto 0;
  background:rgba(255,255,255,0.5); border-radius:999px;
  display:flex; justify-content:center; gap:0; padding:8px 0;
}
.trust-bar .item{
  flex:1; text-align:center; font-size:16px; font-weight:600; color:var(--color-accent);
  padding:14px 20px; position:relative;
}
.trust-bar .item + .item::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:20px; background:var(--color-border-subtle);
}

/* ---- Client logos ---- */
.logos-caption{
  font-family:var(--font-zodiak); font-style:normal; font-size:var(--fs-body); color:var(--color-text);
  text-align:center; margin:64px 0 32px; position:relative; z-index:1;
}
.logos-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:repeat(5, 1fr);
  gap:32px 16px; align-items:center; justify-items:center; padding-bottom:64px;
}
.logos-grid .logo-slot{ width:144px; height:64px; display:flex; align-items:center; justify-content:center; margin:0 auto; max-width:100%; }
.logos-grid img{ width:100%; height:100%; object-fit:contain; }

@media (max-width:1439px){
  .hero-sub{ max-width:600px; }
  .logos-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:809px){
  .marquee-track img{ height:220px; width:280px; }
  .logos-grid{ grid-template-columns:repeat(2, 1fr); }
  .trust-bar{ margin-inline:24px; }
  .trust-bar .item{ padding-inline:8px; font-size:15px; }
}
@media (max-width:639px){
}
/* Below 720 the three items no longer fit on one line each. */
@media (max-width:719px){
  .trust-bar{ flex-direction:column; border-radius:var(--radius-lg); }
  .trust-bar .item + .item::before{ display:none; }
  .trust-bar{ margin-inline:0; }
}

@media (prefers-reduced-motion: reduce){
  .char.animate{ animation:none; opacity:1; filter:none; transform:none; }
  .marquee-track{ animation:none; }
}

/* ============================================================
   About — "Design how I think"
   ============================================================ */
.about{ padding:96px 0; }
.about-grid{ display:grid; grid-template-columns:1fr 616px; gap:64px; align-items:center; }
.about-heading{ font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--ls-h2); color:var(--color-text); margin-bottom:24px; }
.about-content p{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); margin-top:16px;
}
.about-content p:first-of-type{ margin-top:0; }
.about-actions{ display:flex; gap:16px; margin-top:32px; }
.about-image{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:616/657; }
.about-image img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:1439px){
  .about-grid{ grid-template-columns:1fr; gap:48px; }
  .about-image{ aspect-ratio:616/500; order:-1; }
}
@media (max-width:639px){
  .about-actions{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ padding-top:96px; }
.footer-grid{
  display:grid; grid-template-columns:1fr auto auto; gap:64px; padding-bottom:64px;
}
.footer-brand .wordmark-logo{ height:40px; width:auto; }
.footer-brand p{
  font-family:var(--font-zodiak); font-size:18px; line-height:1.6; color:var(--color-text);
  max-width:320px; margin-top:16px;
}
.footer-social{ display:flex; gap:24px; margin-top:24px; }
.footer-social a{
  font-family:var(--font-zodiak); font-size:16px; color:var(--color-text); text-decoration:underline;
}
.footer-links{ display:flex; flex-direction:column; gap:16px; }
.footer-links a{
  font-family:var(--font-zodiak); font-size:16px; color:var(--color-text); text-decoration:underline;
}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:32px; border-top:1px solid var(--color-border-subtle);
}
.footer-bottom p{
  font-family:var(--font-zodiak); font-size:16px; color:var(--color-text);
}
.footer-legal{ display:flex; gap:24px; }
.footer-legal a{
  font-family:var(--font-zodiak); font-size:16px; color:var(--color-text); text-decoration:underline;
}

@media (max-width:809px){
  .footer-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:32px; }
  .footer-legal{ flex-wrap:wrap; gap:16px 24px; }
}

/* ============================================================
   Case studies — "Smarter systems and design" (a horizontal
   scroll carousel: 3 case cards + a 4th CTA slide that sits just
   off the right edge, revealed by scrolling — confirmed directly
   off the live DOM, not visible in a static screenshot)
   ============================================================ */
.case-studies{ padding:96px 0; background:var(--color-bg-alt); }
.case-heading{
  font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--ls-h2); color:var(--color-text);
}
.case-sub{
  font-family:var(--font-zodiak); font-size:var(--fs-lead); line-height:1.7; color:var(--color-text);
  max-width:640px; margin-top:16px;
}
.case-row{
  display:flex; align-items:flex-start; gap:32px; margin-top:80px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; cursor:grab; user-select:none; touch-action:pan-y;
  /* Full-bleed to the true viewport width, not just to .wrap's own
     padding — .wrap caps at 1440px and centers, so the old
     margin-inline/padding-inline bleed left dead space on either side
     on any screen wider than 1440px, capping how far the carousel
     could scroll before the real edge. */
  width:100vw; position:relative; left:50%; transform:translateX(-50%);
  padding-inline:var(--grid-margin);
}
.case-row img{ -webkit-user-drag:none; user-drag:none; pointer-events:none; }
.case-row::-webkit-scrollbar{ display:none; }
.case-row.is-dragging{ cursor:grabbing; }
.case-row.is-dragging .case-card,
.case-row.is-dragging .case-cta{ pointer-events:none; }
.case-card{
  display:block; flex:0 0 464px; height:650px;
  border-radius:var(--radius-xl); overflow:hidden; background:var(--sandy-20);
}
.case-card-image{ width:100%; height:408px; transition:filter 300ms var(--ease-out); }
.case-card-image img{ width:100%; height:100%; object-fit:cover; }
.case-card:hover .case-card-image{ filter:grayscale(0.7); }
@media (hover:none){ .case-card:hover .case-card-image{ filter:none; } }
.case-card-body{ padding:32px; height:242px; }
.case-tag{
  display:inline-flex; font-family:var(--font-zodiak); font-weight:700; font-size:12px;
  letter-spacing:-0.24px; color:var(--sandy-70);
  border:1px solid var(--sandy-30); border-radius:var(--radius-sm); padding:4px 12px;
}
.case-card-title-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; }
.case-card-body > .case-card-title-row:first-child{ margin-top:0; }
.case-card h3{ font-size:var(--fs-h4); line-height:1.3; letter-spacing:-0.96px; color:var(--color-text); }
.case-arrow{ flex-shrink:0; width:32px; height:32px; color:var(--color-text); }
.case-card p{ font-family:var(--font-zodiak); font-size:var(--fs-small); line-height:1.6; color:var(--color-text); margin-top:8px; }

.case-cta{
  flex:0 0 464px; height:650px; max-width:100%; border-radius:var(--radius-xl);
  background:var(--color-accent); position:relative;
  overflow:hidden; display:flex; align-items:flex-start; padding:32px;
}
.case-cta-bg{ position:absolute; left:36px; top:333px; width:659px; max-width:none; }
.case-cta h4{ position:relative; font-size:var(--fs-title); line-height:1.4; letter-spacing:-1.28px; color:#fff; font-weight:400; max-width:400px; }
.case-cta-arrow{ position:absolute; right:48px; bottom:48px; color:#fff; }

@media (max-width:1439px){
}
/* ============================================================
   Process — "Curiosity, empathy, intent" + testimonials
   ============================================================ */
.process{ padding:96px 0; }
.process-heading{ font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--ls-h2); color:var(--color-text); }
.process-sub{
  font-family:var(--font-zodiak); font-size:var(--fs-lead); line-height:1.7; color:var(--color-text);
  max-width:640px; margin-top:16px;
}
.process-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--grid-gutter);
  margin-top:80px;
}
.process-icon{ width:40px; height:40px; color:var(--color-accent); }
.process-item h3{
  font-size:var(--fs-h4); line-height:1.3; letter-spacing:-0.96px; color:var(--color-text); margin-top:16px;
}
.process-item p{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.6; color:var(--color-text); margin-top:8px;
}
.process-actions{ display:flex; justify-content:center; gap:16px; margin-top:64px; }

.testimonial{ margin-top:80px; }
.testimonial-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1;
  width:48px; height:48px; border-radius:var(--radius-lg); border:none;
  background:var(--sandy-40); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background-color 180ms var(--ease-out);
}
.testimonial-arrow-prev{ left:40px; }
.testimonial-arrow-next{ right:40px; }
.testimonial-arrow:hover{ background:var(--sandy-50); }
.testimonial-arrow img{ width:40px; height:40px; }
.testimonial-card{
  position:relative; background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,1);
  backdrop-filter:blur(45px); -webkit-backdrop-filter:blur(45px);
  border-radius:var(--radius-xl); padding:56px 128px; text-align:center;
}
.testimonial-quote{
  font-family:var(--font-zodiak); font-size:var(--fs-lead); line-height:1.7; color:var(--color-text);
}
.testimonial-attribution{
  display:flex; align-items:center; justify-content:center; gap:24px; margin-top:32px;
}
.testimonial-brand{ font-size:var(--fs-title); letter-spacing:-1.28px; color:var(--color-text); }
.testimonial-brand:empty{ display:none; }
.testimonial-divider{ width:1px; height:40px; background:var(--sandy-40); }
.testimonial-brand:empty + .testimonial-divider{ display:none; }
.testimonial-person{ text-align:left; }
.testimonial-person strong{
  display:block; font-family:var(--font-zodiak); font-weight:700; font-size:var(--fs-body); color:var(--color-text);
}
.testimonial-role{
  display:block; font-family:var(--font-zodiak); font-size:var(--fs-small); color:var(--sandy-80); text-decoration:none;
}

/* Tablet+mobile (<1440): icon sits inline-left of the title (same row,
   48px icon, 24px gap) instead of stacked above it like desktop — and
   the description sits below, aligned with the title not the icon.
   Measured directly off the live site at both 1024px and 500px, where
   this pattern is identical. */
@media (max-width:1439px){
  .process-grid{ grid-template-columns:repeat(2, 1fr); row-gap:48px; }
  .process-item{ display:grid; grid-template-columns:48px 1fr; column-gap:24px; row-gap:8px; }
  .process-icon{ width:48px; height:48px; grid-column:1; grid-row:1; }
  .process-item h3{ grid-column:2; grid-row:1; margin-top:0; align-self:center; }
  .process-item p{ grid-column:2; grid-row:2; margin-top:0; }
  .testimonial-card{ padding:40px 56px; }
  /* Arrows move from the card's side edges to centered below it. */
  .testimonial-arrow{ top:auto; bottom:-24px; transform:none; }
  .testimonial-arrow-prev{ left:calc(50% - 53px); right:auto; }
  .testimonial-arrow-next{ left:calc(50% + 5px); right:auto; }
}
@media (max-width:809px){
  .process-grid{ column-gap:24px; }
  .testimonial-card{ padding:72px 20px 32px; }
  .testimonial-attribution{ flex-direction:column; gap:12px; }
  .testimonial-divider{ display:none; }
  .testimonial-person{ text-align:center; }
  .testimonial-arrow{ width:40px; height:40px; }
  .testimonial-arrow-prev{ left:calc(50% - 45px); }
  .testimonial-arrow-next{ left:calc(50% + 5px); }
  .testimonial-arrow img{ width:32px; height:32px; }
}

/* Mobile (<640): the carousel goes away entirely — cards stack
   vertically (block flow, no horizontal scroll) and each one is
   narrower than the viewport and centered, not edge-to-edge. Measured
   directly off the live site: display:block/overflow:visible on the
   row, card width 342px (fixed, not a percentage). Tablet (640+)
   keeps the horizontal carousel. */
@media (max-width:639px){
  .case-row{
    display:block; overflow-x:visible; width:auto; position:static; left:auto; transform:none;
    padding-inline:0; cursor:default;
  }
  .case-card, .case-cta{
    flex-basis:auto; width:100%; height:420px; margin:0 0 32px;
  }
  .case-cta{ margin-bottom:0; }
  .case-card-image{ height:175px; }
  .case-card-body{ padding:24px; height:245px; }
  .case-cta{ padding:24px; }
  .case-cta h4{ font-size:24px; letter-spacing:-0.96px; max-width:220px; }
  .case-cta-bg{ width:400px; left:22px; top:210px; }
  .case-cta-arrow{ right:24px; bottom:24px; }
}

/* ============================================================
   Feature cards — "From chaos to clarity"
   ============================================================ */
.feature-cards{ padding:96px 0; }
.feature-heading{
  font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--ls-h2); color:var(--color-text);
}
.feature-sub{
  font-family:var(--font-zodiak); font-size:var(--fs-lead); line-height:1.7; color:var(--color-text);
  max-width:640px; margin-top:16px;
}
.feature-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--grid-gutter);
  margin-top:80px;
}
.feature-card-image{
  border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:416/222;
}
.feature-card-image img{ width:100%; height:100%; object-fit:cover; }
.feature-card h3{
  font-size:var(--fs-h4); line-height:1.4; letter-spacing:-0.96px; color:var(--color-text);
  margin-top:24px;
}
.feature-card p{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text);
  margin-top:8px;
}
.feature-actions{ display:flex; justify-content:center; gap:16px; margin-top:80px; }

/* Tablet (810-1439): cards flip to a horizontal row — image left, text
   right — and stack as full-width rows, one per card. Measured directly
   off the live site at 1024px: image box 436x222 (still 24px radius),
   24px gap between image and text, 32px gap between rows. */
@media (max-width:1439px){
}
/* Desktop keeps the 3-up row down to 1200px (same cutoff as the nav). */
@media (max-width:1199px){
  .feature-grid{ grid-template-columns:1fr; gap:32px; }
  .feature-card{ display:flex; align-items:flex-start; gap:24px; }
  .feature-card:last-child{ grid-column:auto; max-width:none; }
  .feature-card-image{ flex:0 0 436px; aspect-ratio:436/222; }
  .feature-card-text{ flex:1; }
  .feature-card h3{ margin-top:0; }
}
/* Phones (<640): process items go single column; tablet keeps the 2x2 grid. */
@media (max-width:639px){
  .process-grid{ grid-template-columns:1fr; row-gap:32px; }
  .process-actions{ flex-direction:column; align-items:center; }
  .process-actions .btn{ justify-content:center; }
}
/* Small tablet (640-809): same row layout, image shrinks to fit. */
@media (max-width:809px){
  .feature-card-image{ flex-basis:42%; }
  .feature-card{ gap:20px; }
}
/* Mobile (<640): back to a vertical stack per card — image on top, text
   below — same shape as desktop, just full width and single column. */
@media (max-width:639px){
  .feature-grid{ grid-template-columns:1fr; }
  .feature-card{ display:block; }
  .feature-card-image{ aspect-ratio:416/222; }
  .feature-card h3{ margin-top:24px; }
  .feature-actions{ flex-direction:column; align-items:center; }
  .feature-actions .btn{ justify-content:center; }
}

/* ============================================================
   About-detail page ("Nice to e-meet you") + Awards
   Reached from the homepage About section's "Know me better"
   button — a dedicated page, not a modal (Laura's explicit call).
   ============================================================ */
.about-detail-hero{ padding:96px 0; }
.about-detail-grid{ display:grid; grid-template-columns:1fr 593px; gap:64px; align-items:center; }
.about-detail-heading{ font-size:var(--fs-h1); line-height:1.2; letter-spacing:var(--ls-h1); color:var(--color-text); margin-bottom:24px; }
.about-detail-bio{ font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); max-width:480px; }
.about-detail-collage img{ width:100%; height:auto; display:block; }

@media (max-width:1439px){
  .about-detail-grid{ grid-template-columns:1fr; gap:48px; }
  .about-detail-collage{ max-width:100%; margin:0 auto; }
}
@media (max-width:809px){
  .about-detail-hero{ padding:56px 0; }
}

.about-story{ padding:0 0 96px; }
.about-story-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--grid-gutter); }
.about-story-col{ position:relative; }
.about-story-col p{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); margin-top:24px;
}
.about-story-col p:first-child{ margin-top:0; }
.about-story-signature{ display:block; width:120px; height:auto; margin:56px 0 0 auto; }

@media (max-width:1439px){
  .about-story-grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:809px){
  .about-story{ padding:0 0 56px; }
  .about-story-signature{ width:90px; margin-top:32px; }
}

.awards{ padding:96px 0; }
.awards-heading{
  font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--ls-h2); color:var(--color-text);
  text-align:center; max-width:700px; margin:0 auto 64px;
}
.awards-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--grid-gutter); }
.awards-card{
  background:var(--color-bg-alt); border-radius:var(--radius-xl); padding:48px;
}
.awards-card h3{ font-size:var(--fs-title); line-height:1.3; letter-spacing:-1.28px; color:var(--color-text); }
.awards-card p{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); margin-top:16px;
}

@media (max-width:1439px){
  .awards-heading{ margin-bottom:48px; }
}
@media (max-width:809px){
  .awards{ padding:56px 0; }
  .awards-heading{ margin-bottom:56px; }
  .awards-grid{ grid-template-columns:1fr; gap:24px; }
  .awards-card{ padding:32px; }
  .awards-card h3{ letter-spacing:-0.96px; }
}

/* ============================================================
   Business-case detail pages (reached from the case-study cards
   — dedicated pages, not modals, per Laura's explicit call).
   Shared across case-hellofresh.html, case-kognia.html,
   case-caja.html.
   ============================================================ */
.case-hero{ padding:96px 0; }
.case-hero-grid{ display:grid; grid-template-columns:1fr 480px; gap:64px; align-items:start; }
.case-hero-heading{ font-size:var(--fs-h1); line-height:1.2; letter-spacing:var(--ls-h1); color:var(--color-text); }
.case-hero-desc{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); margin-top:24px;
}
.case-hero-meta{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:48px; max-width:480px; }
.case-hero-meta h4{ font-size:var(--fs-h5); color:var(--color-text); }
.case-hero-meta p{ font-family:var(--font-zodiak); font-size:var(--fs-body); color:var(--color-text); margin-top:8px; }
.case-hero-image img{ width:100%; height:auto; display:block; border-radius:var(--radius-xl); }

.case-stats{ padding:96px 0; background:var(--color-bg-alt); position:relative; overflow:hidden; }
.case-stats-swoosh{
  position:absolute; left:-40px; bottom:-40px; width:1700px; max-width:none; z-index:0; pointer-events:none;
}
.case-stats .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
}
.case-stats-heading{ font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--ls-h2); color:var(--color-text); }
.case-stats-desc{ font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); margin-top:16px; }
.case-stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.case-stat{
  background:var(--color-bg); border-radius:var(--radius-lg); padding:24px; text-align:center;
}
.case-stat strong{ display:block; font-weight:400; font-size:var(--fs-title); letter-spacing:-1.28px; color:var(--color-text); }
.case-stat span{ display:block; font-family:var(--font-zodiak); font-size:var(--fs-small); color:var(--color-text); margin-top:8px; }

.case-process{ padding:96px 0; }
.case-process-heading{ font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--ls-h2); color:var(--color-text); max-width:640px; }
.case-process-desc{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); max-width:640px; margin-top:16px;
}
.case-process-grid{
  display:flex; gap:var(--grid-gutter); margin-top:64px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab; user-select:none;
  touch-action:pan-y;
}
.case-process-grid::-webkit-scrollbar{ display:none; }
.case-process-grid.is-dragging{ cursor:grabbing; }
.case-process-grid.is-dragging .case-process-step{ pointer-events:none; }
.case-process-step{
  position:relative; flex:0 0 372px; background:var(--color-bg-alt); border-radius:var(--radius-xl); padding:32px;
  min-height:472px; overflow:hidden;
}
.case-process-icon{ position:relative; z-index:1; width:68px; height:68px; display:block; object-fit:contain; color:var(--color-accent); }
.case-process-step h3{ position:relative; z-index:1; font-size:var(--fs-title); line-height:1.4; letter-spacing:-1.28px; color:var(--color-text); margin-top:16px; }
.case-process-step p{ position:relative; z-index:1; font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); margin-top:8px; }
.case-process-num{
  position:absolute; left:32px; bottom:8px; font-size:216px; font-weight:600; letter-spacing:-2px;
  color:var(--color-bg); line-height:1; z-index:0;
}

.case-experiments{ padding:96px 0; }
.case-experiments-heading{
  font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--ls-h2); color:var(--color-text);
  text-align:center; max-width:760px; margin:0 auto;
}
.case-experiments-desc{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text);
  text-align:center; max-width:760px; margin:16px auto 64px;
}
.experiment-card{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  background:var(--color-bg-alt); border-radius:var(--radius-xl); padding:48px; margin-top:32px;
}
.experiment-card:first-child{ margin-top:0; }
.experiment-image-col{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.experiment-image{ width:100%; }
.experiment-image img{ width:100%; height:auto; display:block; }
.experiment-tag{
  display:inline-flex; background:var(--amber-30); color:var(--sandy-90); font-weight:700;
  border-radius:var(--radius-sm); padding:8px 16px; font-size:14px; margin-bottom:24px;
}
.experiment-block{ margin-top:32px; }
.experiment-block:first-of-type{ margin-top:0; }
.experiment-block-head{ display:flex; align-items:center; gap:12px; }
.experiment-icon{ flex-shrink:0; width:28px; height:28px; color:var(--color-accent); }
.experiment-block h4{ font-family:var(--font-zodiak); font-weight:700; font-size:var(--fs-h5); letter-spacing:-0.5px; color:var(--color-text); }
.experiment-block p{ font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); margin-top:8px; }
.experiment-block p + p{ margin-top:16px; }

@media (max-width:1439px){
  .case-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .case-stats .wrap{ grid-template-columns:1fr; gap:40px; }
  .experiment-card{ grid-template-columns:1fr; gap:32px; }
  .experiment-image{ max-width:460px; }
}
@media (max-width:809px){
  .case-hero{ padding:56px 0; }
  .case-hero-meta{ grid-template-columns:1fr 1fr; gap:24px; }
  .case-stats{ padding:56px 0; }
  .case-stats-grid{ gap:12px; }
  .case-stat{ padding:16px; }
  .case-process{ padding:56px 0; }
  .case-process-grid{ margin-top:40px; }
  .case-process-step{ flex-basis:280px; }
  .case-experiments{ padding:56px 0; }
  .experiment-card{ padding:24px; }
  .experiment-image{ max-width:100%; }
}
@media (max-width:639px){
}

/* ============================================================
   Reusable "case story" blocks — shared across every business-
   case page for the phase-by-phase narrative sections. Built
   once, reused with different content per Laura's direction.
   ============================================================ */
.case-phase{ padding:96px 0; }
.case-phase-eyebrow{
  font-family:var(--font-zodiak); font-weight:700; font-size:var(--fs-small); color:var(--color-text); margin-bottom:16px;
}
.case-phase-heading{ font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--ls-h2); color:var(--color-text); max-width:640px; }
.case-phase-desc{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); max-width:640px; margin-top:16px;
}
.case-phase-desc + .case-phase-desc{ margin-top:24px; }
.case-phase-grid{ display:grid; grid-template-columns:640px 1fr; gap:80px; align-items:start; }
.case-phase-grid .case-phase-heading,
.case-phase-grid .case-phase-desc{ max-width:none; }

.case-quote{
  position:relative; background:var(--color-bg-alt); border-radius:var(--radius-xl);
  padding:48px; display:flex; align-items:center; gap:32px; flex-wrap:wrap;
}
.case-quote-mark{ position:absolute; top:-41px; right:0; width:132px; height:82px; }
.case-quote--solo{ overflow:visible; }
.case-quote--solo .case-quote-attribution{ justify-content:flex-end; margin-top:16px; }
.case-quote--solo .case-quote-text{ font-size:var(--fs-body); margin-top:21px; min-height:6.8em; }
.case-quote-avatar{ width:140px; height:140px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.case-quote-body{ flex:1; min-width:260px; }
.case-quote-text{ font-family:var(--font-zodiak); font-size:var(--fs-lead); line-height:1.7; color:var(--color-text); min-height:6.8em; display:flex; flex-direction:column; justify-content:center; }
.case-quote-attribution{ display:flex; align-items:center; gap:16px; margin-top:24px; }
.case-quote-name{ font-family:var(--font-zodiak); font-weight:700; font-size:var(--fs-small); color:var(--color-text); white-space:nowrap; }
.case-quote-divider{ width:1px; height:24px; background:var(--sandy-40); }
.case-quote-brand{ font-size:var(--fs-h5); color:var(--color-text); }
.case-quote-arrow{
  width:48px; height:48px; border-radius:var(--radius-lg); border:none; background:var(--sandy-40);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:background-color 180ms var(--ease-out);
}
.case-quote-arrow:hover{ background:var(--sandy-50); }
.case-quote-arrow img{ width:48px; height:48px; }
.case-quote-nav{ display:flex; justify-content:center; gap:16px; margin-top:24px; }
.case-phase--band{ background:var(--color-bg-alt); }.case-quote--band{ background:transparent; border-radius:0; padding:0; }
.case-quote--band .case-quote-attribution{ flex-basis:100%; justify-content:center; margin-top:32px; }
/* Band quote carousel, tablet + mobile (matches the Framer layout): avatar,
   quote, name + company stacked and centred, both arrows together below. */
@media (max-width:1439px){
  .case-quote.case-quote--band{
    display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:32px; align-items:center; padding:0;
    grid-template-areas:"avatar avatar" "text text" "attr attr" "prev next";
  }
  .case-quote--band > .case-quote-avatar{ grid-area:avatar; justify-self:center; }
  .case-quote--band > .case-quote-body{ grid-area:text; min-width:0; padding-inline:24px; }
  .case-quote--band > .case-quote-attribution{ grid-area:attr; margin-top:0; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 16px; }
  .case-quote--band > .case-quote-arrow:first-child{ grid-area:prev; justify-self:end; }
  .case-quote--band > .case-quote-arrow:nth-of-type(2){ grid-area:next; justify-self:start; }
  .case-quote--band .case-quote-text{ align-items:flex-start; text-align:left; }
}

.case-task-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--grid-gutter); margin-top:64px; }
.case-task-card{ background:var(--sandy-5); border-radius:var(--radius-xl); overflow:hidden; }
.case-task-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; filter:grayscale(1); }
.case-task-card-body{ padding:32px; }
.case-task-card h3{ font-size:var(--fs-title); letter-spacing:-1.28px; color:var(--color-text); }
.case-task-card-label{ font-family:var(--font-zodiak); font-weight:700; font-size:var(--fs-small); color:var(--color-text); margin-top:16px; }
.case-task-card ul{ list-style:none; margin-top:12px; }
.case-task-card li{
  font-family:var(--font-zodiak); font-size:var(--fs-small); line-height:1.6; color:var(--color-text);
  padding-left:16px; position:relative; margin-top:8px;
}
.case-task-card li::before{ content:'•'; position:absolute; left:0; color:var(--color-accent); }

.case-screenshot{
  background:var(--color-bg-alt); border-radius:var(--radius-xl); padding:32px; margin-top:64px;
}
.case-screenshot--plain{ background:none; }
.case-screenshot img{ width:100%; height:auto; display:block; border-radius:var(--radius-lg); }
.case-screenshot-caption{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); max-width:760px; margin-top:32px;
}

.case-screenshot-caption--full{ max-width:none; padding-inline:32px; }

.case-big-carousel{
  display:flex; gap:80px; margin-top:64px; padding:32px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-xl);
  width:calc(100% + var(--grid-margin)); margin-right:calc(var(--grid-margin) * -1);
  scrollbar-width:none; cursor:grab; user-select:none; touch-action:pan-y;
}
.case-big-carousel::-webkit-scrollbar{ display:none; }
.case-big-carousel.is-dragging{ cursor:grabbing; }
.case-big-slide{ flex:0 0 82%; pointer-events:none; }
.case-big-slide-frame{ display:block; }
.case-big-slide img{
  width:100%; aspect-ratio:4308/3156; object-fit:cover; border-radius:var(--radius-lg); display:block;
}
.case-big-slide .case-screenshot-caption{ max-width:none; }

.case-video-carousel{
  position:relative; margin-top:64px; padding:32px;
  border-radius:var(--radius-xl);
}
.case-video-viewport{ overflow:hidden; border-radius:var(--radius-lg); }
.case-video-track{ display:flex; transition:transform 500ms var(--ease-out); }
.case-video-slide{ flex:0 0 100%; min-width:0; margin:0; }
.case-video-slide video{
  width:100%; aspect-ratio:1077/789; object-fit:cover; display:block;
  background:var(--sandy-15); border-radius:var(--radius-lg);
}
.case-video-caption{
  font-family:var(--font-zodiak); font-size:var(--fs-body); line-height:1.7; color:var(--color-text); margin-top:24px;
}
.case-video-arrow{ position:absolute; top:calc(50% - 40px); z-index:1; }
.case-video-arrow--prev{ left:64px; }
.case-video-arrow--next{ right:64px; }

.case-process--fill{ padding:120px 0; }
.case-process--fill .case-process-step{ flex:1 1 0; min-width:0; }
/* Small screens: keep the swipeable carousel like the other case studies instead of squeezing the steps. */
@media (max-width:809px){
  .case-process--fill{ padding:56px 0; }
  .case-process--fill .case-process-step{ flex:0 0 280px; }
}
.case-hero-image--portrait img{ aspect-ratio:479/668; object-fit:cover; }

.case-challenge{ padding:112px 0; }
.case-challenge--alt{ background:var(--sandy-10); }
.case-challenge-grid{
  display:grid; grid-template-columns:640px 592px; justify-content:space-between; align-items:center; gap:64px;
}
.case-challenge-label{
  font-family:var(--font-zodiak); font-weight:700; font-size:var(--fs-body); color:var(--color-text); margin-bottom:16px;
}
.case-challenge-grid .case-phase-heading,
.case-challenge-grid .case-phase-desc,
.case-challenge-text .case-phase-heading,
.case-challenge-text .case-phase-desc{ max-width:640px; }
.case-challenge-media img,
.case-challenge-media video{ width:100%; display:block; }
.case-challenge-media video{ aspect-ratio:592/938; object-fit:contain; }
.case-challenge--stack{ padding-bottom:144px; }
.case-challenge--stack .case-challenge-media{ margin-top:64px; }

.case-gallery{ padding:80px 0; overflow-x:clip; }
.case-gallery-heading{ text-align:center; margin-inline:auto; }
.case-center-carousel{ --slide-gap:64px; margin-top:64px; }
.case-center-carousel--wide{ --slide-w:min(912px, calc(100vw - var(--grid-margin) * 2)); --slide-ratio:912/665; --slide-radius:24px; }
.case-center-carousel--phone{ --slide-w:min(331px, calc(100vw - var(--grid-margin) * 2)); --slide-ratio:331/716; --slide-radius:48px; }
.case-center-viewport{ width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; }
.case-center-track{ display:flex; gap:var(--slide-gap); will-change:transform; }
.case-center-track.is-animating{ transition:transform 500ms var(--ease-out); }
.case-center-slide{
  flex:0 0 var(--slide-w); aspect-ratio:var(--slide-ratio); margin:0;
  border-radius:var(--slide-radius); overflow:hidden;
}
.case-center-slide img{ width:100%; height:auto; display:block; }
.case-center-carousel .case-quote-nav{ margin-top:32px; }

.case-filmstrip{
  display:flex; gap:16px; margin-top:24px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; cursor:grab; user-select:none; touch-action:pan-y;
}
.case-filmstrip::-webkit-scrollbar{ display:none; }
.case-filmstrip.is-dragging{ cursor:grabbing; }
.case-filmstrip img{ flex:1 1 0; min-width:0; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); display:block; pointer-events:none; }

.case-tactic-grid{
  display:flex; gap:24px; margin-top:64px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; cursor:grab; user-select:none; touch-action:pan-y;
}
.case-tactic-grid::-webkit-scrollbar{ display:none; }
.case-tactic-grid.is-dragging{ cursor:grabbing; }
.case-tactic-item{ flex:0 0 320px; }
.case-tactic-item img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); display:block; pointer-events:none; }
.case-tactic-item p{ font-family:var(--font-zodiak); font-size:var(--fs-small); color:var(--color-text); margin-top:12px; }

.case-mini-process{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--grid-gutter); margin-top:64px; }
.case-mini-process h3{ font-size:var(--fs-h4); letter-spacing:-0.96px; color:var(--color-text); }
.case-mini-process p{ font-family:var(--font-zodiak); font-size:var(--fs-small); line-height:1.6; color:var(--color-text); margin-top:8px; }

@media (max-width:1439px){
  .case-challenge-grid{ grid-template-columns:1fr; gap:32px; }
  .case-challenge-media{ max-width:592px; width:100%; margin-inline:auto; }
  .case-phase-grid{ grid-template-columns:1fr; gap:32px; }
  .case-quote{ padding:40px; }
  .case-task-grid{ grid-template-columns:1fr; gap:24px; }
  .case-mini-process{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:809px){
  .case-phase{ padding:56px 0; }
  .case-challenge{ padding:80px 0; }
  .case-center-carousel{ --slide-gap:24px; margin-top:40px; }
  .case-quote{ padding:32px 24px; flex-direction:column; align-items:flex-start; }
  .case-quote-mark{ top:24px; right:24px; width:40px; }
  .case-quote-attribution{ flex-wrap:wrap; }
  .case-screenshot{ padding:16px; margin-top:40px; }
  .case-screenshot-caption--full{ padding-inline:16px; }
  .case-video-carousel{ padding:16px; margin-top:40px; }
  .case-video-arrow{ top:calc(50% - 32px); }
  .case-video-arrow--prev{ left:24px; }
  .case-video-arrow--next{ right:24px; }
  .case-video-caption{ margin-top:16px; }
  .case-tactic-grid, .case-task-grid{ margin-top:40px; }
}

/* ---- Legal modals (Privacy / Terms / Cookie policy), opened from the footer ---- */
.legal-modal{
  position:fixed; inset:0; z-index:200; background:var(--color-bg);
  overflow-y:auto; overscroll-behavior:contain; animation:legal-in 200ms var(--ease-out);
}
@keyframes legal-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .legal-modal{ animation:none; } }
.legal-close{
  position:fixed; top:64px; left:min(calc(50% + 481px), calc(100% - 96px)); z-index:1;
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--radius-lg); background:var(--sandy-30); color:var(--color-text); cursor:pointer;
  transition:background-color 180ms var(--ease-out);
}
.legal-close:hover{ background:var(--sandy-40); }
.legal-close svg{ width:24px; height:24px; }
.legal-body{ width:min(664px, calc(100% - 48px)); margin:0 auto; padding:112px 0 160px; font-family:var(--font-zodiak); color:var(--color-text); }
.legal-title{ font-family:var(--font-sora); font-size:40px; line-height:48px; letter-spacing:-1.6px; font-weight:400; }
.legal-body > * + *{ margin-top:20px; }
.legal-body p,
.legal-body li{ font-family:var(--font-zodiak); font-size:18px; line-height:1.7; }
.legal-body ul,
.legal-body ol{ padding-left:25px; }
.legal-body ul{ list-style:disc; }
.legal-body ol{ list-style:decimal; }
.legal-body a{ overflow-wrap:anywhere; }
.legal-h{ font-family:var(--font-zodiak); font-size:22px; line-height:1.7; font-weight:700; margin-top:32px; }
.legal-num{ display:inline-block; width:31px; }
.legal-sub{ font-family:var(--font-zodiak); font-size:18px; line-height:1.7; font-weight:700; margin-top:32px; }
.legal-body > .legal-h + *,
.legal-body > .legal-sub + *{ margin-top:8px; }
@media (max-width:1439px){
  .legal-close{ top:24px; left:auto; right:24px; }
}
@media (max-width:809px){
  .legal-body{ padding:96px 0 120px; }
  .legal-title{ font-size:32px; line-height:40px; letter-spacing:-1.28px; }
  .legal-close{ top:16px; right:16px; width:48px; height:48px; }
}

/* ---- Cookie consent banner ---- */
.consent-banner{
  position:fixed; z-index:90; left:16px; right:16px; bottom:16px;
  max-width:440px; padding:20px;
  background:var(--color-surface); color:var(--color-text);
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; gap:12px;
}
.consent-title{ margin:0; font-size:18px; line-height:1.2; }
.consent-text{ margin:0; font-size:14px; line-height:1.5; }
.consent-text a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.consent-actions{ display:flex; gap:12px; }
.consent-actions .btn{ flex:1; justify-content:center; }
@media (min-width:640px){ .consent-banner{ left:24px; right:auto; bottom:24px; } }