@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Quick win refinements kept in a dedicated override (optional) */
.scroll-top:hover{box-shadow:0 10px 24px rgba(0,0,0,.22)}
/* Value cards: gentle lift on hover */
.value-grid article{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.value-grid article:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.28);border-color:rgba(255,255,255,0.12)}

/* Icon and link helpers */
.values .icon-service{color:var(--brand)}
.values .icon-service *{stroke-linecap:round;stroke-linejoin:round}
.values .text-link,.features .text-link,.services-summary .text-link{color:var(--brand);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;transition:color .2s ease, background-size .25s ease}
.values .text-link:hover,.features .text-link:hover,.services-summary .text-link:hover{filter:saturate(115%) brightness(105%);background-size:100% 1px}
.values .text-link:focus-visible,.features .text-link:focus-visible,.services-summary .text-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;background-size:100% 1px}

/* Canvas Unicons styling for headings */
.cards .card h4 i{font-size:20px;color:var(--brand);margin-right:8px}
.values .service-title i{font-size:24px;color:var(--brand);margin-right:10px}

/* Anchor offset for fixed header: ensure Name Ideas promo aligns at top when navigated */
#name-ideas{scroll-margin-top:88px}

/* Responsive offsets for smaller headers on narrow screens */
@media (max-width: 992px){
  #name-ideas{scroll-margin-top:76px}
}
@media (max-width: 768px){
  #name-ideas{scroll-margin-top:64px}
}
@media (max-width: 576px){
  #name-ideas{scroll-margin-top:56px}
}

/* Features cards: align style with values */
.cards .card{border:1px solid rgba(0,0,0,0.08);box-shadow:0 4px 10px rgba(0,0,0,.12);transition:transform .2s ease, box-shadow .2s ease}
.cards .card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.28)}
.cards .card h4{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.cards .card .icon-small{width:22px;height:22px;display:inline-block;color:var(--brand)}
/* Match details text style to Explore cards */
.cards .card p{color:#6b7280}
.value-grid p{color:#6b7280}

/* Additional information cards: pin "Learn more" to bottom */
.features .cards .card{display:flex;flex-direction:column;gap:8px}
.features .cards .card .text-link{margin-top:auto;align-self:flex-start}

/* Anchor offset for in-page jumps */
.cards .card[id]{scroll-margin-top:calc(var(--header-h) + 12px)}
.cards-grid .card[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(10px)}
.reveal.reveal-in{opacity:1;transform:none;transition:opacity .4s ease, transform .4s ease}

/* Fallback: subtle fade-up on load for value cards */
.value-grid article{opacity:0;transform:translateY(8px);animation:fadeUp .5s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Decorative icons for Additional information cards (no HTML changes) */
.features .card h4::before,.services-summary .cards .card h4::before{content:none}
.features .cards .card:nth-child(1) h4::before{mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='7' width='18' height='12' rx='2'/><path d='M9 7V5h6v2'/><path d='M6 16l4-4 3 3 5-5'/></svg>")}
.features .cards .card:nth-child(2) h4::before{mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 10l9-5 9 5-9 5-9-5z'/><path d='M12 12v5'/><path d='M21 10v6'/></svg>")}
.features .cards .card:nth-child(3) h4::before{mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='7' cy='12' r='3'/><circle cx='17' cy='7' r='3'/><circle cx='17' cy='17' r='3'/><path d='M9 11l6-3M9 13l6 3'/></svg>")}
.features .cards .card:nth-child(4) h4::before{mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='6' y='4' width='12' height='16' rx='2'/><path d='M9 4h6v3H9z'/><path d='M8 12l2 2 4-4'/></svg>")}
.features .cards .card:nth-child(5) h4::before{mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='7' cy='9' r='3'/><circle cx='17' cy='9' r='3'/><path d='M3 19c1.5-3 4-5 7-5s5.5 2 7 5'/></svg>")}

/* Legal pages refinements */
.legal{padding:32px 0 48px}
.legal h1,.legal h2,.legal h3,.legal h4,.legal h5,.legal h6{margin:0 0 12px;line-height:1.25;max-width:72ch;margin-left:auto;margin-right:auto}
.legal p,.legal ul,.legal ol{max-width:72ch;margin-left:auto;margin-right:auto;line-height:1.7}
.legal h3,.legal h4,.legal h5,.legal h6{font-weight:600}
.legal h1{margin-top:8px}
.legal h3{margin-top:20px}
/* Normalize minor heading sizes and prevent any float-based layouts */
.legal h5,.legal h6{display:block;float:none}
.legal h5{font-size:18px;margin-top:18px}
.legal h6{font-size:16px;margin-top:14px;color:#111}
.legal ul,.legal ol{padding-left:1.25rem;margin-bottom:16px}
.legal a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.08em}
.legal .meta{font-size:.9rem;color:var(--muted)}
.legal .legal-nav{max-width:72ch;margin:0 auto 12px}
.legal .legal-nav a{color:var(--brand);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;transition:color .2s ease, background-size .25s ease}
.legal .legal-nav a:hover{background-size:100% 1px}
/* Mobile polish: disable hover lift on touch and tighten spacing */
@media (hover: none){
  .cards .card:hover{transform:none;box-shadow:0 4px 10px rgba(0,0,0,.12)}
  .cards.cards-4 .card:hover{transform:none;box-shadow:0 4px 10px rgba(0,0,0,.12)}
}
@media (max-width:640px){
  .cards .card{padding:14px}
  .services-summary .cards.cards-4{gap:14px}
  .cards .card h4 i{font-size:18px}
}
/* Teaser alignment and image shadow to match cards */
.teaser .split-grid{justify-items:start}
.teaser .image-card{margin:0;border-color:rgba(0,0,0,0.08);box-shadow:0 4px 10px rgba(0,0,0,.12)}
.teaser .image-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.28)}
/* Ticker: continuous loop override with dynamic segment width */
.ticker-track{backface-visibility:hidden;will-change:transform;transform:translate3d(0,0,0);animation:ticker-move-segment var(--ticker-duration, 32s) linear infinite}
@keyframes ticker-move-segment{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--segment-width, 50%)),0,0)}}

/* Counters: icons & colors */
.counters .counter{position:relative;box-shadow:0 4px 10px rgba(0,0,0,.12);transition:transform .2s ease, box-shadow .2s ease}
.counters .counter:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.28)}
.counter__icon{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin:0 auto 8px;color:#fff}
.counter__icon i{font-size:20px;line-height:1}
.counter__icon.is-line{background:none;width:auto;height:auto;border-radius:0;color:inherit}
.counter__icon.is-line i{font-size:24px}
.counter__icon.is-green{background-image:linear-gradient(135deg, #10b981 0%, #059669 100%)}
.counter__icon.is-orange{background-image:linear-gradient(135deg, #f59e0b 0%, #f97316 100%)}
.counter__icon.is-blue{background-image:linear-gradient(135deg, #60a5fa 0%, #2563eb 100%)}
.counter__icon.is-purple{background-image:linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%)}

/* Gradient text utilities for line icons */
.icon-gradient-green{background-image:linear-gradient(135deg,#10b981,#059669);-webkit-background-clip:text;background-clip:text;color:transparent}
.icon-gradient-orange{background-image:linear-gradient(135deg,#f59e0b,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}
.icon-gradient-blue{background-image:linear-gradient(135deg,#60a5fa,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent}
.icon-gradient-purple{background-image:linear-gradient(135deg,#a78bfa,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Counters heading: slightly larger and bolder */
.counters .lead{font-size:20px;font-weight:600}
.counter-note{font-size:.85rem;color:#6b7280;margin-top:8px}

/* Services summary: align "Learn more" links to bottom */
.services-summary .cards .card{display:flex;flex-direction:column;gap:8px}
.services-summary .cards .card .text-link{margin-top:auto;align-self:flex-start}

/* Spacing rhythm: consistent vertical spacing across sections */
.values,.features,.services-summary,.clients,.teaser,.counters{padding:40px 0}
@media (min-width:900px){.values,.features,.services-summary,.clients,.teaser,.counters{padding:56px 0}}

/* Social proof: clients logo grid */
.clients .section-header{margin-bottom:16px}
.logo-grid{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin:0;padding:0}
@media (max-width:1024px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
.logo-grid li{display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.08);border-radius:12px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12);padding:16px}
.logo-grid img{max-width:140px;width:100%;height:auto;filter:grayscale(100%);opacity:.9;transition:filter .2s ease, opacity .2s ease, transform .2s ease}
.logo-grid li:hover img{filter:none;opacity:1;transform:translateY(-1px)}

/* Footer Get Updates card — match card shadow & hover */
.footer .footer-info{border:1px solid rgba(0,0,0,0.08);box-shadow:0 4px 10px rgba(0,0,0,.12);transition:transform .2s ease, box-shadow .2s ease}
.footer .footer-info:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.28)}
/* Brand logos grid sizing */
.brand-logos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.brand-logos-grid .logo { display:flex; align-items:center; justify-content:center; padding:16px; border:1px solid #e5e7eb; border-radius:8px; height:150px; background:#fff; }
.brand-logos-grid .logo img { max-height:120px; max-width:200px; width:auto; height:auto; object-fit:contain; }
.brand-logos-grid .logo .fallback { color:#555; font-size:0.9rem; }

/* Brand badges for services */
.brand-badge { display:inline-block; margin-left:8px; padding:2px 6px; border-radius:999px; font-size:0.75rem; line-height:1; background:#ecfdf5; color:var(--brand); border:1px solid #d1fae5; }

/* Services filter */
.services-filter { max-width:420px; }
.services-filter input { width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:6px; }

/* Services page hero: compact dark variant for text-only sections */
.hero.hero-dark { background:#0f172a; color:#fff; }
.hero.hero-dark .container { padding-top: calc(var(--header-h) + 24px); padding-bottom: 24px; }
.hero.hero-dark h1, .hero.hero-dark p { color:#fff; }
.hero.hero-dark { min-height: 220px; }

/* Solutions hero: image background + gradient overlay + focused actions */
.hero.hero--solutions{ position:relative; min-height:300px; background-image:linear-gradient(180deg, rgba(2,6,23,0.20) 0%, rgba(2,6,23,0.35) 100%), url('../images/hero-improve.webp'); background-size:cover; background-position:85% 12%; background-repeat:no-repeat; color:#fff; }
.hero.hero--solutions .overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(2,6,23,0.55) 0%, rgba(15,23,42,0.45) 40%, rgba(15,23,42,0.30) 70%, rgba(15,23,42,0.20) 100%); }
.hero.hero--solutions .hero-content{ position:relative; padding-top:calc(var(--header-h) + 28px); padding-bottom:24px; }
.hero.hero--solutions h1{ color:#fff; margin:0 0 6px; }
.hero.hero--solutions .lead{ color:#e5e7eb; max-width:72ch; }
.hero.hero--solutions .chips{ margin-top:12px; }
.hero.hero--solutions .hero-actions{ display:flex; gap:.5rem; margin-top:12px; }
.button.button-light{ background:#ffffff; color:#0f172a; border:1px solid #e5e7eb; }
.button.button-light:hover{ filter:saturate(115%) brightness(105%); }
@media (max-width:640px){ .hero.hero--solutions{ min-height:260px; background-position:center; } }

/* --- Solutions page enhancements --- */
/* Chips navigation */
.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip { display:inline-block; padding:.35rem .7rem; border-radius:8px; border:1px solid #e5e7eb; background:#f9fafb; color:#111827; text-decoration:none; font-size:.875rem; }
.chip:hover { background:#eef2ff; border-color:#c7d2fe; color:#0f172a; }
/* Active state for chips */
.chip.active { background:#e0e7ff; border-color:#93c5fd; color:#0f172a; box-shadow:0 2px 6px rgba(15,23,42,0.06); }
/* Make chips sticky under header for quick nav */
.hero .chips { position: sticky; top: calc(var(--header-h) + 8px); z-index: 25; }

/* Portfolio toolbar: chips + layout toggle */
.portfolio-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 1rem; }
.layout-toggle .button { padding:6px 10px; font-size:.85rem; }
/* Pressed state: keep gradient, slightly emphasize */
.layout-toggle .button[aria-pressed="true"] { color:#fff; filter:saturate(120%) contrast(110%) brightness(1.05); box-shadow:0 0 0 2px rgba(67,206,162,.35), 0 8px 18px rgba(0,0,0,.18); }

/* Image card overlays */
.image-card { position:relative; }
.image-card .overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,0.35); opacity:0; transition:opacity .2s ease; }
.image-card:hover .overlay { opacity:1; }
.image-card .overlay .button { box-shadow:0 6px 16px rgba(0,0,0,.25); }

/* Home split image centering and sizing */
.split .image-card{ display:flex; flex-direction:column; align-items:center; }
.split .image-card a{ display:block; }
.split .image-card img{ width:100%; max-width:420px; display:block; margin:0 auto; transform:translateX(-12px); }
.split .image-card:hover img{ transform:translateX(-12px) scale(1.02); }

/* Masonry layout option */
.gallery-grid.masonry { column-gap:1rem; }
.gallery-grid.masonry .cards-grid { display:block; }
.gallery-grid.masonry article.card { break-inside:avoid; display:inline-block; width:100%; margin:0 0 1rem; }
@media (min-width: 640px){ .gallery-grid.masonry { column-count: 2; } }
@media (min-width: 1024px){ .gallery-grid.masonry { column-count: 3; } }

/* Cards grid: enforce two columns, single column on mobile */
.cards-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width: 640px){ .cards-grid{ grid-template-columns:1fr; } }
@media (min-width: 1024px){ .cards-grid{ grid-template-columns:repeat(3,1fr); } }
/* Force single-column stack when .stack-1 is present */
.cards-grid.stack-1{ grid-template-columns:1fr !important; }

/* Uncropped thumbnails with constrained height in grid view */
.cards-grid .image-card{ height:auto; }
.cards-grid .image-card img{ width:100%; height:auto; object-fit:contain; max-height:180px; }
@media (min-width: 1024px){ .cards-grid .image-card img{ max-height:160px; } }
@media (max-width: 640px){ .cards-grid .image-card img{ max-height:160px; } }

/* Masonry view: allow natural image heights (no max-height) */
.gallery-grid.masonry .image-card img{ max-height:none; }

/* Make lightbox modal larger for viewing */
#lightbox .dialog{ max-width: min(92vw, 1200px); }
#lightbox img{ width:100%; height:auto; max-height:72vh; object-fit:contain; margin-bottom:8px; }

/* Accordion using details/summary for service lists */
details.accordion { border:1px solid #e5e7eb; border-radius:.5rem; background:#fff; }
details.accordion + details.accordion { margin-top:.5rem; }
details.accordion summary { cursor:pointer; padding:.6rem .8rem; font-weight:600; color:#0f172a; list-style:none; }
details.accordion summary::-webkit-details-marker { display:none; }
details.accordion summary::after { content:"▸"; float:right; color:#6b7280; transition:transform .2s ease; }
details.accordion[open] summary { border-bottom:1px solid #e5e7eb; }
details.accordion[open] summary::after { transform:rotate(90deg); }
/* Active accordion highlight */
details.accordion.active summary { background:#f9fafb; }
details.accordion .list { margin:0; padding:.6rem 1rem .8rem 1.75rem; list-style-position:outside; }
details.accordion .list li { margin:4px 0; }

/* Solutions cards: elevate and add gentle hover */
.cards-grid .card{ border:1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.08); transition:transform .2s ease, box-shadow .2s ease; padding:12px; }
.cards-grid .card:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.18); }
.cards-grid .card h3{ display:flex; align-items:center; gap:8px; color:#0f172a; }
.cards-grid .card h3::after{ content:''; flex:1; height:1px; background:#eef2ff; margin-left:auto; opacity:.6; }
.cards-grid .card .list{ color:#374151; }

/* Steps component */
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; align-items:stretch; }
.step { background:#ffffff; border:1px solid #e5e7eb; border-radius:.75rem; padding:.9rem; box-shadow:0 4px 10px rgba(0,0,0,.08); display:flex; flex-direction:column; height:100%; }
.step p{ margin-top:auto; }
.step .num { width:2rem; height:2rem; border-radius:999px; background:linear-gradient(135deg, #22c55e, #0ea5e9); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.7rem; letter-spacing:-0.03em; line-height:1; margin-bottom:.5rem; box-shadow:0 4px 10px rgba(14,165,233,.25); }
.step h4 { margin:0 0 .25rem 0; font-size:1rem; }
.mt-2 { margin-top:.5rem; }

/* --- Contact page styles --- */
.contact-main{ padding:32px 0 48px }
.contact-grid{ display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1fr); gap:24px; margin-top:16px }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr } }

.contact-card{ border:1px solid #e5e7eb; border-radius:12px; padding:16px; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.08); transition:transform .2s ease, box-shadow .2s ease }
.contact-card:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.18) }

.contact-details h2{ font-size:20px; margin:0 0 8px }
.contact-details p{ color:#6b7280; margin:0 0 12px }
.contact-details ul{ list-style:none; padding:0; margin:0; display:grid; gap:14px }
.contact-details li{ display:flex; align-items:center; gap:8px; line-height:1.6 }
.contact-details .icon{ font-size:1.1rem; color:var(--brand); }
.contact-details a{ color:var(--brand); text-decoration:none; border-bottom:1px solid rgba(67,206,162,.25) }
.contact-details a:hover{ filter:saturate(115%) brightness(105%); border-bottom-color:rgba(67,206,162,.4) }
.contact-note{ font-size:.85rem; color:#6b7280; margin:12px 0 0 }
/* Q&A CTA button spacing in contact details */
.contact-details .button{ margin-top:8px; border:none; color:#fff; display:inline-flex; align-items:center; gap:8px; text-decoration:none }
.contact-details .button:hover{ color:#fff }
.contact-details .button i{ font-size:1.1rem; color:inherit }

.contact-form{ display:grid; gap:12px }
.contact-form label{ font-weight:600; font-size:.95rem; color:#0f172a; display:grid; gap:6px }
.contact-form input,
.contact-form select,
.contact-form textarea{ width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:#111827; box-shadow:inset 0 1px 2px rgba(0,0,0,.03); transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{ outline:none; border-color:#93c5fd; box-shadow:0 0 0 2px rgba(67,206,162,.35) }
.contact-form textarea{ resize:vertical }
.contact-form .consent{ display:flex; align-items:center; gap:4px; font-size:.9rem; color:#374151 }
.contact-form .consent input{ margin:0 }
/* Ensure checkbox does not expand to full width */
.contact-form .consent input[type="checkbox"]{ width:auto; flex:0 0 auto; display:inline-block; margin-right:4px }
.contact-form .button{ justify-self:start }

/* Consent spacing tweak */
.contact-form .consent{ gap:0 }

/* Contact form button: solid brand gradient, no border */
.contact-form .button{
  background-image:linear-gradient(135deg, #43cea2 0%, #185a9d 100%) !important;
  border:none;
}

/* Badge palette overrides and brand variants */
.brand-badge { background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; }
.brand-badge.badge-ri { background:#ecfdf5; color:#065f46; border:1px solid #d1fae5; }
.brand-badge.badge-brandworks { background:#f5f3ff; color:#5b21b6; border:1px solid #ede9fe; }

/* Footer ad slot — reserve space, center, and ensure fit */
#ad-greenbox-footer {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
  max-width:100%; /* allow full container width */
  margin-top:12px;
  margin-left:auto;
  margin-right:auto;
  padding:8px 0;
  box-sizing:border-box;
  min-height:90px; /* standard desktop banner height */
  overflow:hidden; /* prevent overflow from ad contents */
}
#ad-greenbox-footer img,
#ad-greenbox-footer iframe,
#ad-greenbox-footer .greenbox-banner,
#ad-greenbox-footer .ad-slot,
#ad-greenbox-footer .lebox {
  max-width:100%;
  max-height:100%;
  width:100%; /* ensure placeholders and wrappers span full slot width */
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
/* Responsive banner heights for smaller viewports */
@media (max-width: 768px){
  #ad-greenbox-footer{ min-height:60px; }
}
@media (max-width: 480px){
  #ad-greenbox-footer{ min-height:50px; }
}

/* Header solid variant to keep it visible after hero */
.site-header.header--solid {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #e5e7eb;
}

/* --- Portfolio image grid helpers --- */
.cards-grid .card img {
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}
/* Optional: uniform thumbnail area using aspect-ratio; safe fallback to auto height */
.card-thumb {
  width:100%;
  aspect-ratio: 16 / 9; /* modern browsers */
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
}
.card-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Spacing for portfolio cards */
.cards-grid .card h3 { margin:10px 0 6px; }
.cards-grid .card p { color:#6b7280; }

/* --- Portfolio: button and footer compact tweaks --- */
/* Borderless gradient for layout toggle and lightbox actions */
.layout-toggle .button,
#lightbox .dialog .actions .button {
  border: none;
}
#lightbox .dialog .actions .button {
  background-image: linear-gradient(135deg, #22c55e, #0ea5e9);
  color: #fff;
  box-shadow: 0 6px 16px rgba(14,165,233,.22);
}
#lightbox .dialog .actions .button:hover {
  filter: saturate(115%) brightness(105%);
}

/* Removed portfolio-specific minimal footer overrides to keep footer consistent across pages */

/* Inline partner ads grid below portfolio grid */
.ad-inline { margin-top: var(--space-8); margin-bottom: var(--space-6); }
.ad-title { font-size: 0.95rem; font-weight: 600; opacity: 0.85; margin-bottom: 16px; }
.ad-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ad-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-4); background: var(--surface-2); min-height: 90px; }
/* Visible placeholder canvas for banners before creatives exist */
.ad-canvas { flex: 1; min-height: 80px; display:flex; align-items:center; justify-content:center; border:1px dashed #e5e7eb; border-radius:6px; background:#fff; color:#6b7280; font-size:.85rem; }
.ad-meta { display: flex; align-items: center; gap: var(--space-3); }
/* GreenBox lebox spans used for partner campaigns */
.lebox { display:block; height:80px; width:100%; border:1px dashed #e5e7eb; border-radius:6px; background:#fff; }
/* When a creative is injected, remove placeholder visuals */
.lebox.rendered { background: transparent; border: none; color: inherit; }
/* Hide the extra single banner placeholder above the footer */
#ad-greenbox-portfolio { display: none !important; }
.ad-copy { margin: 0; font-size: 0.9rem; opacity: 0.85; }
.ad-info-btn { font-size: 0.85rem; padding: 0.4rem 0.6rem; border: none; margin-top: 8px; align-self: flex-end; }

@media (max-width: 1024px) { .ad-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ad-grid { grid-template-columns: 1fr; } }

/* Half-height tuning to match portfolio thumbnails at desktop (~160px -> 80px) */
@media (min-width: 1024px){
  .ad-card{ min-height: 80px; }
  .ad-canvas{ min-height: 80px; }
}
/* Maintain half-height on small screens where thumbnails are ~160px */
@media (max-width: 640px){
  .ad-card{ min-height: 80px; }
  .ad-canvas{ min-height: 80px; }
}

/* Compact dialog variant for small info modals */
.modal .dialog.dialog--sm { max-width: 480px; }

/* GreenBox inline slot on Portfolio */
#ad-greenbox-portfolio {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
  max-width:728px;
  margin-top:12px;
  margin-left:auto;
  margin-right:auto;
  padding:8px 0;
  box-sizing:border-box;
  min-height:90px;
  overflow:hidden;
}
#ad-greenbox-portfolio img,
#ad-greenbox-portfolio iframe,
#ad-greenbox-portfolio .greenbox-banner,
#ad-greenbox-portfolio .ad-slot,
#ad-greenbox-portfolio .lebox {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
@media (max-width: 768px){
  #ad-greenbox-portfolio{ min-height:60px; max-width:468px; }
}
@media (max-width: 480px){
  #ad-greenbox-portfolio{ min-height:50px; max-width:320px; }
}

/* Generic horizontal ad slot styling (leaderboards) */
.ad-slot {
  width:100%;
  max-width:728px; /* standard desktop banner width */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid var(--border-subtle);
  border-radius: var(--radius-4);
  background: var(--surface-2);
  min-height: 90px; /* standard desktop banner height */
  box-sizing: border-box;
  overflow: hidden;
  margin:16px auto; /* center and add breathing room */
  padding:8px 0;
}
.ad-slot-leaderboard { min-height: 90px; }
.ad-slot--under-hero { margin-top:12px; }
.ad-slot--below-cards { margin-top:20px; margin-bottom:12px; }
.ad-slot--prefooter { margin-top:24px; margin-bottom:8px; }
.ad-slot .lebox { height:100%; width:100%; max-width:100%; max-height:100%; object-fit:contain; display:block; }
@media (max-width: 1024px){ .ad-slot{ max-width:468px; min-height:60px; } .ad-slot-leaderboard{ min-height: 60px; } }
@media (max-width: 480px){ .ad-slot{ max-width:320px; min-height:50px; } .ad-slot-leaderboard{ min-height: 50px; } }

/* Full-width variant: use when you want the banner to span the container */
.ad-slot.ad-slot--fullwidth {
  max-width:100%;
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
}
@media (max-width: 1024px){ .ad-slot.ad-slot--fullwidth{ max-width:100%; min-height:60px; } }
@media (max-width: 480px){ .ad-slot.ad-slot--fullwidth{ max-width:100%; min-height:50px; } }

/* Allow footer GreenBox container to stretch when flagged as fullwidth */
#ad-greenbox-footer.ad-slot--fullwidth { max-width:100%; }

/* Sticky footer helper — keeps footer at viewport bottom on short pages */
.page-sticky-footer{min-height:100vh;display:flex;flex-direction:column}
.page-sticky-footer main{flex:1}
.page-sticky-footer .footer, .page-sticky-footer .site-footer{margin-top:auto}

/* Vertical ad rails (left/right) for pages needing side ad space) */
.ad-rail{
  position:fixed;
  top:120px; /* below header */
  bottom:100px; /* above footer */
  width:160px; /* standard skyscraper width */
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.ad-rail--left{ left:12px; }
.ad-rail--right{ right:12px; }
.ad-rail .lebox{ width:100%; height:100%; }
/* Hide rails on narrower screens */
@media (max-width: 1200px){ .ad-rail{ display:none; } }

/* When rails are visible, add breathing room to main content */
@media (min-width: 1201px){
  .page-with-rails main .container,
  .page-with-rails #bdm-qna{
    margin-left: 184px;
    margin-right: 184px;
  }
}

/* Mobile menu toggle visibility on header variants */
.nav-toggle{color:var(--text)}
.site-header.header--glass-dark .nav-toggle{color:#fff}

/* Simple countdown component */
.countdown{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}
.countdown__unit{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.countdown__num{font-size:22px;font-weight:700;color:#0f172a;line-height:1}
.countdown__label{font-size:12px;color:#6b7280;margin-top:4px}
/* Dark hero context: invert unit background for contrast */
.hero-dark .countdown__unit{background:#0f172a;border-color:rgba(255,255,255,0.16)}
.hero-dark .countdown__num{color:#fff}
.hero-dark .countdown__label{color:#cbd5e1}

/* Mobile header: brand left, hamburger far right on all pages */
@media (max-width:860px){
  .header-wrap{justify-content:space-between;gap:10px}
  .brand{order:1}
  .nav{order:1}
  .nav-toggle{order:2}
}
#bdm-qna .bdm-column{max-width:860px;margin:0 auto}
#bdm-qna{padding-top:calc(var(--header-h) + 12px)}
@media (max-width: 640px){#bdm-qna{padding-bottom:96px}}