/* Mobile-first layout. Base styles target narrow viewports; min-width media
   queries layer up for larger screens. */

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.site-header__logo img { height: 44px; width: auto; }

.nav-toggle {
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--color-ink);
  border-radius: 2px;
}

.primary-nav {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-2);
}
.primary-nav.is-open { display: flex; }
.primary-nav a {
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 600;
  padding: var(--space-1) 0;
}
.primary-nav__consultancy { color: var(--color-teal); }

@media (min-width: 800px) {
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    gap: var(--space-4);
    padding-top: 0;
  }
}

/* Page sections */
.section {
  padding: var(--space-5) 0;
}
.section--muted { background: var(--color-bg-muted); }
/* Lighter-weight section: used for the enquiry form so it reads as the
   closing beat of the page, not another full-weight content block. */
.section--compact { padding: var(--space-3) 0 var(--space-4); }
.section__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.hero {
  padding: var(--space-4) 0;
  min-height: 375px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 640px) {
  .hero { min-height: 320px; }
}
#hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Hero content assembles from different directions on page load - eyebrow
   from the left, heading up from below, paragraph in from the right,
   actions up last. Pure CSS (animation: ... both sets both the pre- and
   post-animation state), so nothing depends on JS running - a blocked
   script can't leave this stuck hidden. */
.hero__inner .eyebrow { animation: heroInLeft 600ms ease both; }
.hero__inner h1 { animation: heroInUp 600ms ease 120ms both; }
.hero__inner p { animation: heroInRight 600ms ease 240ms both; }
.hero__inner .hero__actions { animation: heroInUp 600ms ease 360ms both; }
@keyframes heroInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes heroInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes heroInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__inner .eyebrow,
  .hero__inner h1,
  .hero__inner p,
  .hero__inner .hero__actions {
    animation: none;
  }
}

/* Primary hero: leads with AI positioning, dark gradient treatment */
.hero--primary {
  background: linear-gradient(135deg, var(--color-ink) 0%, #1f4a5c 55%, var(--color-teal) 130%);
  color: #fff;
  padding: var(--space-5) 0 calc(var(--space-5) * 1.3);
}
.hero--primary .hero__inner { max-width: 760px; }
.hero--primary h1,
.hero--primary p { color: #fff; }
.hero--primary p { color: rgba(255,255,255,0.86); font-size: 1.15rem; max-width: 46ch; }
.hero--primary .btn--secondary {
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.hero--primary .btn--secondary:hover,
.hero--primary .btn--secondary:focus { background: rgba(255,255,255,0.15); color: #fff; }

/* Small uppercase label above a heading, e.g. "AI & DIGITAL TRANSFORMATION" */
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-teal);
  margin-bottom: var(--space-1);
}
.hero--primary .eyebrow { color: #9be8da; }

/* Pillar cards (homepage) */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 800px) {
  .pillars--weighted { grid-template-columns: 1.6fr 1fr; align-items: start; }
}
.pillar-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.pillar-card:hover {
  box-shadow: 0 12px 28px -12px rgba(65, 69, 82, 0.25);
  transform: translateY(-2px);
}
.pillar-card h2 { margin-bottom: var(--space-1); }
.pillar-card--primary {
  border-color: var(--color-teal);
  border-width: 2px;
  background: linear-gradient(180deg, var(--color-bg-muted) 0%, var(--color-bg) 65%);
}
.pillar-card--secondary {
  background: var(--color-bg-muted);
  border-color: transparent;
}

/* Capability tiles (homepage "what we deliver" grid) — full-width: placed as
   a direct child of .section (not .section__inner) so the row spans the
   full viewport width, like Accenture's tile grid, but with real gutters
   between tiles (not edge-to-edge) and alternating light/dark treatments
   so the row doesn't read as one flat block of uniform white cards.
   Hover/focus mechanism matches Accenture's live rad-content-grid-card
   component (inspected directly on accenture.com/gb-en): the card does NOT
   invert colour — the icon blurs/dims into a backdrop and a description +
   "Explore" panel slides in over it, using their exact easing curve. */
.capability-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0 var(--space-2);
}
@media (min-width: 640px) {
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .capability-grid { grid-template-columns: repeat(4, 1fr); }
}
.capability-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-4) var(--space-3);
}
.capability-card--dark {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,153,51,0.28), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(128,155,164,0.28), transparent 55%),
    var(--color-ink-deep);
  color: #fff;
}
.capability-card h3 { margin: 0; color: inherit; position: relative; z-index: 1; }
.capability-card__media {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  margin-top: var(--space-2);
}
.capability-card__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 130px;
  width: 100%;
  height: auto;
  transition: filter 550ms cubic-bezier(0.85, 0, 0, 1),
    opacity 550ms cubic-bezier(0.85, 0, 0, 1),
    transform 550ms cubic-bezier(0.85, 0, 0, 1);
}
.capability-card__reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 550ms cubic-bezier(0.85, 0, 0, 1);
}
/* Each tile's reveal panel comes in from a different direction, rather
   than all four sliding in identically from the right. */
.capability-card:nth-child(1) .capability-card__reveal { transform: translateX(100%); }
.capability-card:nth-child(2) .capability-card__reveal { transform: translateX(-100%); }
.capability-card:nth-child(3) .capability-card__reveal { transform: translateY(100%); }
.capability-card:nth-child(4) .capability-card__reveal { transform: translateY(-100%); }
.capability-card__reveal p { margin: 0; color: inherit; font-size: 0.95rem; }
.capability-card__expand {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: var(--space-2);
}
.capability-card:hover .capability-card__icon,
.capability-card:focus-visible .capability-card__icon {
  filter: blur(14px);
  opacity: 0.35;
  transform: scale(1.25);
}
.capability-card:hover .capability-card__reveal,
.capability-card:focus-visible .capability-card__reveal { transform: translate(0, 0); }

/* Feature grid (service pages) */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (min-width: 700px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
.feature-grid__item {
  padding: var(--space-3);
  background: var(--color-bg-muted);
  border-radius: var(--radius);
  border-top: 3px solid var(--color-orange);
}
.feature-grid__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-1);
}
.feature-grid__item h3 { margin-bottom: var(--space-1); }

/* Testimonials */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 700px) {
  .testimonials { grid-template-columns: 1fr 1fr; }
}
.testimonial {
  border-left: 3px solid var(--color-slate);
  padding: 0 0 0 var(--space-2);
}
.testimonial__attribution {
  display: block;
  margin-top: var(--space-1);
  font-weight: 600;
  color: var(--color-slate);
}

/* Case study / capability blocks */
.case-study {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-top: var(--space-3);
  box-shadow: 0 16px 40px -20px rgba(65, 69, 82, 0.35);
}
.case-study h2 { margin-bottom: var(--space-1); }
.case-study__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  margin: var(--space-2) 0 0;
}
.case-study__tags li {
  background: var(--color-bg-muted);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  font-size: 0.9rem;
}

/* Story rows: alternating icon/text layout for narrative "what we built"
   sections - deliberately not a grid, so pages built from these read as a
   flowing sequence rather than another repeated card pattern. */
.story-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
@media (min-width: 800px) {
  .story-row {
    flex-direction: row;
    text-align: left;
    gap: var(--space-5);
  }
  .story-row--reverse { flex-direction: row-reverse; }
}
.story-row__media {
  flex: 0 0 auto;
  width: 100%;
  max-width: 220px;
}
.story-row__media img { display: block; width: 100%; height: auto; }
.story-row__media--video { max-width: 480px; }
.story-row__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.12);
}
.story-row__caption {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-slate);
  text-align: center;
}
.story-row__content { flex: 1 1 auto; text-align: center; }
@media (min-width: 800px) {
  .story-row__content { text-align: left; }
}
.story-row__content h3 { margin-bottom: var(--space-1); }
.story-row + .story-row { border-top: 1px solid var(--color-border); }

/* Feature showcase: large, framed product-demo moments - a genuinely
   different component from story-row/capability-card, used sparingly for
   the highest-impact evidence so the page doesn't read as one grid
   pattern repeated with different content. Frame mimics a browser window
   (chrome bar + dots) so a screen recording reads as "a real product",
   not a floating video rectangle. */
.feature-showcase { padding: var(--space-5) 0; overflow: hidden; }
.feature-showcase__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .feature-showcase__grid { flex-direction: row; gap: var(--space-5); }
  .feature-showcase--reverse .feature-showcase__grid { flex-direction: row-reverse; }
}
.feature-showcase__frame-wrap {
  position: relative;
  flex: 1 1 50%;
  max-width: 480px;
  width: 100%;
}
.feature-showcase__frame {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-ink-deep);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.65);
}
.feature-showcase__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #14151a;
}
.feature-showcase__chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.feature-showcase__video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
.feature-showcase__badge {
  position: absolute;
  top: -14px;
  right: 28px;
  background: var(--color-orange);
  color: var(--color-ink-deep);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  transform: rotate(3deg);
  box-shadow: 0 10px 24px -8px rgba(255,153,51,0.65);
  z-index: 1;
}
.feature-showcase__text { flex: 1 1 38%; text-align: center; }
@media (min-width: 900px) { .feature-showcase__text { text-align: left; } }
.feature-showcase__text h3 { margin-bottom: var(--space-1); font-size: 1.5rem; }
.feature-showcase__text p { color: rgba(255,255,255,0.82); }
.feature-showcase__caption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
}
@media (min-width: 900px) { .feature-showcase__caption { text-align: left; } }

/* Principle interlude: a short, quiet, centred beat between two large
   showcase moments - deliberately smaller, so the page has a rhythm
   (big / small / big) instead of three identical blocks in a row. */
.principle-interlude {
  padding: var(--space-3) 0 var(--space-4);
  text-align: center;
}
.principle-interlude__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-2);
  display: block;
  opacity: 0.9;
}
.principle-interlude h3 { margin-bottom: var(--space-1); }
.principle-interlude p {
  max-width: 56ch;
  margin: 0 auto;
  color: rgba(255,255,255,0.75);
}

/* Scroll-reveal: fades/slides sections in as they enter view. Content is
   visible by default (no FOUC/hidden-content risk if JS fails) - the JS
   adds .reveal-pending itself before observing, so the hidden state only
   ever exists when the script is actually going to reveal it again. */
.reveal-on-scroll { transition: opacity 700ms ease, transform 700ms ease; }
.reveal-on-scroll.reveal-pending { opacity: 0; transform: translateY(28px); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Portfolio featured: one case study given real weight (browser-chrome
   framed screenshot), asymmetric against the trio below it - signals
   editorial judgement rather than listing every project as equally
   weighted, which reads as more curated/confident than a uniform grid. */
.portfolio-featured { padding: var(--space-5) 0; }
.portfolio-featured__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .portfolio-featured__grid { flex-direction: row; gap: var(--space-5); }
}
.portfolio-featured__frame-wrap {
  position: relative;
  flex: 1 1 58%;
  max-width: 640px;
  width: 100%;
}
.portfolio-featured__frame {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-ink-deep);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.65);
}
.portfolio-featured__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #14151a;
}
.portfolio-featured__chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.portfolio-featured__img { display: block; width: 100%; height: auto; }
.portfolio-featured__video-wrap { position: relative; width: 100%; padding-top: 56.25%; }
.portfolio-featured__video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.portfolio-featured__badge {
  position: absolute;
  top: -14px;
  right: 28px;
  background: var(--color-slate);
  color: var(--color-ink-deep);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  transform: rotate(3deg);
  box-shadow: 0 10px 24px -8px rgba(128,155,164,0.5);
  z-index: 1;
}
.portfolio-featured__text { flex: 1 1 38%; text-align: center; }
@media (min-width: 900px) { .portfolio-featured__text { text-align: left; } }
.portfolio-featured__text h2 { margin-bottom: var(--space-1); }
.portfolio-featured__text p { color: rgba(255,255,255,0.82); }
.portfolio-featured__link {
  display: inline-block;
  margin-bottom: var(--space-2);
  color: var(--color-orange);
  font-size: 0.9rem;
}
.portfolio-featured__caption-note {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}

/* Portfolio trio: three smaller, tighter case studies below the featured
   one - deliberately not the same frame size/treatment, so this reads as
   "the rest of the work" rather than a second identical row. */
.portfolio-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (min-width: 700px) {
  .portfolio-trio { grid-template-columns: repeat(3, 1fr); }
}
.portfolio-trio__frame {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,0.55);
  margin-bottom: var(--space-2);
}
.portfolio-trio__img { display: block; width: 100%; height: auto; }
.portfolio-trio__item h3 { margin-bottom: 0.2em; font-size: 1.05rem; }
.portfolio-trio__item p {
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
  margin-bottom: var(--space-1);
}
.portfolio-trio__item a { color: var(--color-orange); font-size: 0.85rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-5);
}
.site-footer__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-2);
  text-align: center;
}
.site-footer__logo { margin: 0 auto var(--space-2); }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.site-footer__nav a,
.site-footer__nav .site-footer__link-button {
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.site-footer__nav a:hover,
.site-footer__nav .site-footer__link-button:hover { color: var(--color-teal); }
.site-footer__copyright {
  color: var(--color-slate);
  font-size: 0.85rem;
  margin: 0;
}

/* ==========================================================================
   Dark-primary theme (proof, homepage only via .theme-dark on <body>)
   Background: --color-ink. Orange is the primary accent/CTA colour
   (matches how the old site actually used it); slate is the secondary
   accent. Teal/blue dropped - confirmed not part of the real identity.
   ========================================================================== */
.theme-dark {
  background: var(--color-ink-deep);
  color: #fff;
}
.theme-dark .site-header {
  background: var(--color-ink-deep);
  border-bottom-color: rgba(255,255,255,0.12);
}
.theme-dark .nav-toggle__bar { background: #fff; }
.theme-dark .primary-nav a { color: #fff; }
.theme-dark .primary-nav a:hover { color: var(--color-orange); }
.theme-dark .primary-nav__consultancy { color: var(--color-orange); }

.theme-dark .hero {
  padding: var(--space-5) 0 calc(var(--space-5) * 1.2);
}
.theme-dark .hero p { color: rgba(255,255,255,0.82); max-width: 46ch; }
.theme-dark .eyebrow { color: #ffb877; }

.theme-dark .btn {
  background: var(--color-orange);
  color: var(--color-ink-deep);
  font-weight: 700;
}
.theme-dark .btn:hover, .theme-dark .btn:focus { background: #ffad5c; color: var(--color-ink-deep); }
.theme-dark .btn--secondary {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.theme-dark .btn--secondary:hover, .theme-dark .btn--secondary:focus {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.theme-dark .section--muted { background: rgba(255,255,255,0.05); }
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4 { color: #fff; }

.theme-dark .pillar-card {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
}
.theme-dark .pillar-card--primary {
  border-color: var(--color-orange);
  background: rgba(255,153,51,0.08);
}
.theme-dark .pillar-card--secondary {
  background: rgba(255,255,255,0.04);
}
.theme-dark .pillar-card p { color: rgba(255,255,255,0.82); }

.theme-dark .capability-card {
  background: var(--color-bg);
  color: var(--color-ink);
}
.theme-dark .capability-card--dark {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,153,51,0.28), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(128,155,164,0.28), transparent 55%),
    var(--color-ink-deep);
  color: #fff;
}
.theme-dark .capability-card h3 { color: inherit; }
.theme-dark .capability-card__expand { color: var(--color-orange); }

.theme-dark .testimonial {
  border-left-color: var(--color-orange);
}
.theme-dark .testimonial p { color: rgba(255,255,255,0.85); }
.theme-dark .testimonial__attribution { color: #ffb877; }

.theme-dark .story-row p { color: rgba(255,255,255,0.82); }
.theme-dark .story-row + .story-row { border-top-color: rgba(255,255,255,0.14); }
.theme-dark .case-study__tags li {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.theme-dark .feature-grid__item {
  background: rgba(255,255,255,0.04);
  border-top-color: var(--color-orange);
}
.theme-dark .feature-grid__item p { color: rgba(255,255,255,0.82); }

/* Proof banner: a full-width editorial photo with a gradient-caption
   overlay - deliberately not another browser-chrome device frame, so
   real client imagery doesn't start feeling like the same trick reused
   on every page. */
.proof-banner { padding: var(--space-4) 0; }
.proof-banner__img-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  max-height: 420px;
}
.proof-banner__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.proof-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.8) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
}
.proof-banner__caption { color: #fff; max-width: 60ch; }
.proof-banner__caption strong { display: block; margin-bottom: 0.2em; }
.proof-banner__caption a { color: var(--color-orange); font-weight: 600; }

/* Homepage showcase teaser: lighter than proof-banner (no overlay caption)
   and lighter than portfolio-featured (no browser-chrome frame) - this is
   a teaser pointing elsewhere, not the case study itself, so it shouldn't
   compete visually with either. */
.homepage-showcase-teaser__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 800px) {
  .homepage-showcase-teaser__grid { flex-direction: row; align-items: center; gap: var(--space-5); }
}
.homepage-showcase-teaser__img {
  border-radius: var(--radius);
  flex: 1 1 45%;
  min-width: 0;
  width: 100%;
  height: auto;
}
.homepage-showcase-teaser__text { flex: 1 1 55%; }
.homepage-showcase-teaser__text p { color: rgba(255,255,255,0.82); }

.theme-dark .site-footer {
  border-top-color: rgba(255,255,255,0.14);
}
.theme-dark .site-footer__logo { opacity: 0.85; }
.theme-dark .site-footer__nav a,
.theme-dark .site-footer__nav .site-footer__link-button { color: rgba(255,255,255,0.85); }
.theme-dark .site-footer__nav a:hover,
.theme-dark .site-footer__nav .site-footer__link-button:hover { color: var(--color-orange); }
.theme-dark .site-footer__copyright { color: rgba(255,255,255,0.55); }
.theme-dark .site-footer__copyright a { color: rgba(255,255,255,0.65); }

/* Enquiry forms (consultancy + website-design "get in touch" sections) */
.enquiry-form { max-width: 580px; }
.enquiry-form form { margin-top: var(--space-2); }
.enquiry-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-2);
}
@media (min-width: 560px) {
  .enquiry-form__row { grid-template-columns: 1fr 1fr; }
}
/* Honeypot spam trap: fully hidden from sighted users, and marked
   aria-hidden on the wrapper so screen reader users never land on it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.theme-dark .form-success {
  background: rgba(255,255,255,0.08);
  border-left-color: var(--color-orange);
  color: #fff;
}
.theme-dark .field-error { color: #ff8a80; }

/* Footer "Cookie preferences" trigger: a <button> styled to sit inline
   with the plain <a> links either side of it in .site-footer__nav. */
.site-footer__link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Legal content: shared prose styling for Cookie Policy / Privacy Policy
   (and any future long-form legal page). Dark-theme text colour comes from
   .theme-dark on <body>; this just adds readable measure, spacing and list/
   table treatment on top of the plain h2/h3/p/ul defaults.
   ========================================================================== */
.legal-content { max-width: 72ch; }
.legal-content h2 {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content h3 { margin-top: var(--space-3); }
.legal-content p, .legal-content li { color: rgba(255,255,255,0.85); }
.legal-content ul, .legal-content ol { padding-left: 1.3em; margin: 0 0 var(--space-2); }
.legal-content li { margin-bottom: 0.4em; }
.legal-content a { color: var(--color-orange); }
.legal-content strong { color: #fff; }
.legal-content__updated {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
}
.legal-content__table-wrap { overflow-x: auto; margin: 0 0 var(--space-3); }
.legal-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.legal-table th, .legal-table td {
  text-align: left;
  padding: 0.6em 0.8em;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  vertical-align: top;
}
.legal-table th { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ==========================================================================
   Cookie consent banner + preferences modal (site-wide, injected by
   cookie-consent.js). Self-contained dark styling so it looks consistent
   whether or not the current page also has .theme-dark on <body>.
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: transform 200ms ease;
  background: var(--color-ink-deep);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
  z-index: 200;
  padding: var(--space-2);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.cookie-banner__text { flex: 1 1 320px; margin: 0; color: rgba(255,255,255,0.85); font-size: 0.92rem; }
.cookie-banner__text a { color: var(--color-orange); }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}
.cookie-banner__actions .btn {
  padding: 0.65em 1.1em;
  font-size: 0.92rem;
}
.cookie-banner__actions .btn:not(.btn--secondary) {
  background: var(--color-orange);
  color: var(--color-ink-deep);
}
.cookie-banner__actions .btn:not(.btn--secondary):hover,
.cookie-banner__actions .btn:not(.btn--secondary):focus {
  background: #ffad5c;
}
.cookie-banner__actions .btn--secondary {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.cookie-banner__actions .btn--secondary:hover, .cookie-banner__actions .btn--secondary:focus {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.cookie-modal[hidden] { display: none; }
.cookie-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--space-2); }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.cookie-modal__dialog {
  position: relative;
  background: var(--color-ink-deep);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--space-3);
}
.cookie-modal__dialog h2 { margin-bottom: var(--space-1); }
.cookie-modal__dialog > p { color: rgba(255,255,255,0.82); font-size: 0.92rem; }
.cookie-modal__dialog > p a { color: var(--color-orange); }
.cookie-modal__category {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: var(--space-2) 0;
}
.cookie-modal__category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cookie-modal__category-header label { margin: 0; font-weight: 600; }
.cookie-modal__category-header input[type="checkbox"] { width: 1.2em; height: 1.2em; flex: none; }
.cookie-modal__category p { margin: 0.4em 0 0; font-size: 0.88rem; color: rgba(255,255,255,0.7); }
.cookie-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.cookie-modal__actions .btn:not(.btn--secondary) {
  background: var(--color-orange);
  color: var(--color-ink-deep);
}
.cookie-modal__actions .btn:not(.btn--secondary):hover,
.cookie-modal__actions .btn:not(.btn--secondary):focus { background: #ffad5c; }
.cookie-modal__actions .btn--secondary { border-color: rgba(255,255,255,0.5); color: #fff; }
.cookie-modal__actions .btn--secondary:hover, .cookie-modal__actions .btn--secondary:focus {
  background: rgba(255,255,255,0.12);
  color: #fff;
}