.site-shell-header,
.site-shell-footer {
  position: sticky;
  z-index: 80;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.site-shell-header {
  top: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 118px;
}

.site-shell-footer {
  position: relative;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  margin-top: 32px;
  background: #0f172a;
  color: #f8fafc;
}

.shell-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 6%;
  display: grid;
  gap: 16px;
}

/* Header spans the full viewport width; only the footer keeps the 1180px cap. */
.site-shell-header .shell-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: none;
  padding: 10px clamp(20px, 3vw, 56px);
}

.shell-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.shell-brand,
.shell-home-link,
.shell-nav a {
  text-decoration: none;
  color: var(--ww-ink);
  font-weight: 600;
}

.shell-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.shell-brand-logo {
  width: auto;
  height: 34px;
  max-width: none;
  object-fit: contain;
}

.shell-brand-logo.is-hidden {
  display: none;
}

.shell-brand-text {
  font-size: 1rem;
  letter-spacing: 0.12em;
}

.shell-brand-text.is-hidden {
  display: none;
}

.shell-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 18px;
  row-gap: 0;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.shell-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  max-width: 14rem;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
  color: #4b5563;
}

.shell-nav a.is-active,
.shell-nav a:hover,
.shell-home-link:hover {
  color: var(--ww-indigo);
}

.shell-nav a:focus-visible {
  outline: 2px solid var(--ww-indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell-header-cta {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 18px;
  font-size: 0.88rem;
  line-height: 1.1;
  color: #ffffff;
  white-space: nowrap;
}

.shell-header-cta:hover {
  color: #ffffff;
}

.shell-lang-switcher {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.shell-nav-toggle {
  display: none;
  border: 1px solid rgba(148,163,184,0.35);
  background: #ffffff;
  color: var(--ww-ink);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.shell-nav-backdrop {
  display: none;
}

.shell-footer-inner {
  display: grid;
  grid-template-columns: minmax(120px, 0.5fr) minmax(0, 4fr);
  align-items: start;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 32px;
}

.site-shell-footer .shell-brand-text {
  white-space: nowrap;
}

/* Stacked mark + wordmark; wordmark recoloured white for the dark footer */
.shell-footer-logo {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
}

/* Footer navigation: five link groups (Website Brief p. 6) */
.shell-footer-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 24px;
}

.shell-footer-heading {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.72);
}

.shell-footer-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.shell-footer-group a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0;
  color: #f8fafc;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.shell-footer-group a:hover {
  color: #66cae5;
}

.site-shell-footer a:focus-visible {
  outline: 2px solid #66cae5;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Wider footer container with slimmer side margins than the header */
.site-shell-footer .shell-inner {
  max-width: 1320px;
  padding-left: clamp(20px, 3vw, 40px);
  padding-right: clamp(20px, 3vw, 40px);
}

/* Social links sit side by side as icon buttons; names stay for assistive tech */
.shell-footer-group .shell-footer-social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(248, 250, 252, 0.12);
}

.shell-footer-group .shell-footer-social-list .shell-footer-social-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.shell-footer-group .shell-footer-social-list .shell-footer-social-card {
  padding: 0;
  min-height: 0;
}

.shell-footer-group .shell-footer-social-list .shell-footer-social-icon {
  width: 36px;
  height: 36px;
  transition: background 0.2s ease, color 0.2s ease;
}

.shell-footer-group .shell-footer-social-list .shell-footer-social-card:hover .shell-footer-social-icon {
  background: #66cae5;
  color: #0f172a;
}

.shell-footer-group .shell-footer-social-list .shell-footer-social-card:hover {
  transform: none;
}

.site-shell-footer .shell-footer-social-list a:focus-visible {
  border-radius: 999px;
}

.shell-footer-group .shell-footer-social-card {
  gap: 8px;
  padding: 2px 0;
}

.shell-footer-group .shell-footer-social-icon {
  width: 28px;
  height: 28px;
}

.shell-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding-top: 18px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(248, 250, 252, 0.12);
}

.shell-footer-bottom p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(248, 250, 252, 0.78);
}

.site-shell-footer .shell-footer-endorsement {
  font-weight: 700;
  color: #f8fafc;
}

/* Clearly marked placeholder for content WE WILL still has to supply */
.content-placeholder {
  display: block;
  padding: 14px 18px;
  border: 1px dashed rgba(11, 18, 32, 0.35);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-surface);
  color: var(--ww-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
}

.legal-page-inner {
  max-width: 760px;
  display: grid;
  gap: 20px;
}

.legal-page-inner .section-title {
  margin: 0;
}

@media (max-width: 1100px) {
  .shell-footer-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tighter desktop header between the mobile breakpoint and 1100px so the
   five items and the CTA fit without truncation. */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-shell-header .shell-inner {
    gap: 16px;
  }

  .shell-nav {
    column-gap: 14px;
  }

  .shell-nav a {
    font-size: 0.86rem;
  }

  .shell-header-cta {
    padding: 8px 14px;
    font-size: 0.84rem;
  }

  .site-shell-header .shell-brand-text {
    letter-spacing: 0.06em;
  }
}

.site-shell-footer .shell-brand,
.site-shell-footer .shell-footer-socials a,
.site-shell-footer .shell-footer-top {
  color: #f8fafc;
}

.shell-footer-brand,
.shell-footer-meta {
  display: grid;
  gap: 8px;
}

.shell-footer-brand {
  max-width: 420px;
}

.site-shell-footer .shell-footer-tagline,
.site-shell-footer .shell-footer-meta p {
  margin: 0;
  color: rgba(248, 250, 252, 0.78);
  font-size: 0.92rem;
  line-height: 1.6;
}

.shell-footer-meta {
  justify-self: start;
}

.shell-footer-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.shell-footer-socials a,
.shell-footer-top {
  text-decoration: none;
  font-weight: 600;
}

.shell-footer-social-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  transition: color 0.2s ease, transform 0.2s ease;
}

.shell-footer-social-card:hover {
  transform: translateX(2px);
}

.shell-footer-social-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #1A2B47; /* = blue @0.14 over the #0f172a footer; solid for real contrast */
  color: #66cae5;
  flex: 0 0 auto;
}

.shell-footer-social-icon svg {
  width: 16px;
  height: 16px;
}

.shell-footer-social-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-footer-side {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.site-shell-footer .shell-footer-socials a:hover,
.site-shell-footer .shell-footer-top:hover {
  color: #66cae5;
}

.site-shell-footer .shell-footer-top {
  color: rgba(248, 250, 252, 0.9);
}

@media (max-width: 900px) {
  .shell-inner {
    gap: 12px;
  }

  .site-shell-header .shell-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .shell-header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-left: auto;
  }

  .shell-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .shell-nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 4px;
  }

  .shell-nav.is-open {
    display: grid;
  }

  .shell-nav a {
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  }

  .shell-footer-inner {
    grid-template-columns: 1fr;
  }

  .shell-lang-switcher {
    margin-left: 0;
  }

.shell-footer-socials {
  width: 100%;
  grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .site-shell-header .shell-inner {
    gap: 10px;
  }

  .shell-header-actions {
    gap: 8px;
  }

  .shell-lang-switcher {
    display: none;
  }

  .shell-brand-text {
    display: none;
  }

  .shell-header-cta {
    min-height: 38px;
    max-width: 128px;
    padding: 7px 11px;
    font-size: 0.75rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  .shell-nav-toggle {
    min-height: 38px;
    padding: 8px 11px;
  }

  .shell-footer-socials {
    grid-template-columns: 1fr;
  }

  .shell-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  /* Legal & Social spans both columns so the four social icons stay on one row */
  .shell-footer-group:last-child {
    grid-column: 1 / -1;
  }

  .shell-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.blog-hero,
.blog-listing,
.blog-article {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.blog-hero .section-inner,
.blog-listing .section-inner,
.blog-article .section-inner {
  max-width: var(--ww-content-max);
  margin: 0 auto;
  padding: 56px var(--ww-gutter);
}

.blog-hero .section-inner {
  padding-top: 28px;
  padding-bottom: 28px;
}

.blog-title {
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 12ch;
}

.blog-subtitle {
  max-width: 66ch;
  font-size: 1.05rem;
  color: #64748b;
  margin-top: 18px;
}

.blog-search {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.blog-search-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
}

.blog-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px auto auto;
  gap: 12px;
  align-items: end;
}

.blog-search-input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  font: inherit;
  color: #0f172a;
}

.blog-search-button {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: var(--ww-indigo);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.blog-sort-field {
  display: grid;
  gap: 8px;
}

.blog-sort-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
}

.blog-sort-select {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  font: inherit;
  color: #0f172a;
}

.blog-search-reset {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #475467;
  font-weight: 700;
  background: #fff;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.blog-card {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}

.blog-card-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 18px;
  background: linear-gradient(180deg, #f8fafc 0%, #e8edf6 100%);
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.blog-card-body {
  padding: 22px;
  display: grid;
  gap: 12px;
}

.blog-card-meta {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.blog-card-title {
  font-size: 1.3rem;
  line-height: 1.2;
}

.blog-card-excerpt {
  color: #667085;
}

.blog-empty {
  color: #667085;
  font-size: 1rem;
}

.blog-card-link {
  color: var(--ww-orange-dark);
  font-weight: 700;
}

.blog-article-header {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.blog-article-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 28px;
  background: linear-gradient(180deg, #f8fafc 0%, #e8edf6 100%);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

.blog-article-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Logo cover: the WE WILL logo on a white tile, centred on the cover panel. */
.blog-article-media .blog-article-logo {
  box-sizing: border-box;
  width: 50%;
  max-width: 420px;
  height: auto;
  padding: clamp(18px, 3vw, 32px) clamp(24px, 4vw, 44px);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 28px -12px rgba(66, 120, 187, 0.35);
}

.blog-article-body {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.9;
}

.blog-article-body h2,
.blog-article-body h3 {
  margin: 2rem 0 0.8rem;
  line-height: 1.4;
}

.blog-article-body p,
.blog-article-body ul,
.blog-article-body ol,
.blog-article-body blockquote {
  margin: 0 0 1rem;
}

.blog-article-body blockquote {
  border-left: 4px solid var(--ww-orange);
  padding-left: 18px;
  color: #475467;
}

.blog-article-body a {
  color: var(--ww-indigo);
  text-decoration: underline;
}

body.lang-ar .blog-hero,
body.lang-ar .blog-listing,
body.lang-ar .blog-article {
  text-align: right;
}

body.lang-ar .blog-article-body {
  direction: rtl;
  text-align: right;
}

@media (max-width: 980px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-search-row {
    grid-template-columns: 1fr;
  }

  .blog-card-media {
    padding: 14px;
  }

  .blog-article-media {
    padding: 16px;
    border-radius: 24px;
  }

  .blog-hero .section-inner,
  .blog-listing .section-inner,
  .blog-article .section-inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .blog-hero .section-inner {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* About › Quality philosophy: the approach paragraph and closing line sit in one
   panel under the cards, so they read as the section's conclusion rather than
   loose text pressed against the grid. */
.about-philosophy-note {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding: 26px 30px;
  background: #ffffff;
  border: var(--ww-border);
  border-radius: var(--ww-radius);
  box-shadow: var(--ww-shadow-soft);
}

.about-philosophy-approach {
  margin: 0;
  max-width: 78ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ww-ink);
}

.about-philosophy-close {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ww-indigo);
}

/* About › Credibility: a white band, so it separates clearly from the grey
   philosophy section above. The client strip and its Talk to Us CTA read as one
   block, with the CTA centred under the logo wall. */
.about-credibility {
  background: var(--ww-bg);
  padding-bottom: 72px;
}

.about-credibility .section-clients {
  background: transparent;
  padding-top: 72px;
  padding-bottom: 0;
}

.about-cta {
  display: flex;
  justify-content: center;
  padding: 32px var(--ww-gutter) 0;
}

.about-cta .btn {
  min-width: 200px;
  padding: 14px 32px;
  font-size: 0.98rem;
}

@media (max-width: 640px) {
  .about-philosophy-note {
    padding: 20px;
  }

  .about-credibility {
    padding-bottom: 48px;
  }

  .about-credibility .section-clients {
    padding-top: 48px;
  }

  .about-cta {
    padding-top: 24px;
  }

  .about-cta .btn {
    width: 100%;
    min-width: 0;
  }
}

/* Home › Vibe Test: copy and video share the top row (video fills its column);
   the three capability cards and the sample receipt share the row below. */
.section-sara .sara-section-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px 36px;
}

/* If the video is hidden (no valid YouTube link), the copy takes the full row. */
.section-sara .sara-section-inner:has(.sara-video:not(.is-ready)) .sara-section-copy {
  grid-column: 1 / -1;
}

.section-sara .sara-video {
  grid-column: auto;
  margin-top: 0;
}

.section-sara .sara-video-facade {
  width: 100%;
}

.section-sara .sara-capability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
  align-items: stretch;
  margin-top: 0;
}

/* Compact receipt so it sits level with the capability cards: two-column
   checklist and tighter vertical rhythm. */
.section-sara .sara-capability-grid .sara-visual-card {
  padding: 16px 18px;
}

.section-sara .sara-capability-grid .sara-sample-label {
  margin-bottom: 8px;
}

.section-sara .sara-capability-grid .sara-verdict-top {
  margin-bottom: 10px;
}

.section-sara .sara-capability-grid .sara-verdict-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}

.section-sara .sara-capability-grid .sara-verdict-list li {
  padding: 6px 0;
  font-size: 0.8rem;
}

.section-sara .sara-capability-grid .sara-verdict-conf {
  margin-top: 6px;
  padding-top: 8px;
}

.section-sara .sara-capability-grid .sara-verdict-conf b {
  font-size: 1.15rem;
}

@media (max-width: 1100px) {
  .section-sara .sara-capability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .section-sara .sara-capability-grid .sara-visual-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .section-sara .sara-section-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .section-sara .sara-capability-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-sara .sara-capability-grid .sara-visual-card {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .section-sara .sara-capability-grid .sara-verdict-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Home › Vibe Test capability cards: content centred in the card (the row is as
   tall as the sample receipt), with a larger index and title to fill it. */
.section-sara .sara-capability-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 22px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, var(--ww-indigo-tint-06), transparent 70%),
    #ffffff;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.section-sara .sara-capability-card:hover {
  transform: translateY(-3px);
  border-color: rgba(66,120,187, 0.35);
  box-shadow: var(--ww-shadow-strong);
}

.section-sara .sara-capability-index {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  font-size: 0.9rem;
}

.section-sara .sara-capability-card h3 {
  margin: 0;
  font-size: 1.08rem;
}

.section-sara .sara-capability-card p {
  margin: 0;
  max-width: 30ch;
  line-height: 1.6;
}

/* Equal description height keeps the index and title level across the row
   when one description runs a line longer. */
@media (min-width: 961px) {
  .section-sara .sara-capability-card p {
    min-height: 6.4em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-sara .sara-capability-card,
  .section-sara .sara-capability-card:hover {
    transition: none;
    transform: none;
  }
}

@media (max-width: 640px) {
  .shell-brand-logo {
    height: 28px;
  }
}