/* ============================================================
   Oxfordshire AV — DESKTOP overrides.
   Applies at ≥ 1024px via media query (production-ready).
   ============================================================ */

@media (min-width: 1024px) {

  /* ── Container pattern ────────────────────────────────────── */
  .oav-page {
    font-size: 16px;
  }

  .nav,
  .hero,
  .problem,
  .services,
  .process,
  .usp,
  .where,
  .sectors,
  .why,
  .faq,
  .enquiry,
  .foot {
    padding-left: max(56px, calc((100% - 1240px) / 2));
    padding-right: max(56px, calc((100% - 1240px) / 2));
  }

  /* ── Top bar + sticky CTA ───────────────────────────────── */
  .top-bar { display: none; }
  .sticky-cta { display: none; }

  /* ── Clients strip ─────────────────────────────────────── */
  .clients-grid { grid-template-columns: repeat(5, 1fr); gap: 0 32px; }

  /* ── Nav ──────────────────────────────────────────────────── */
  .nav {
    padding-top: 22px;
    padding-bottom: 22px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .brand {
    gap: 12px;
  }
  .brand-oxford {
    font-size: 18px;
  }
  .brand-av {
    font-size: 21px;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .nav-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    border-bottom: none !important;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .nav-link:hover {
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.06);
  }
  .nav-link.is-active {
    color: rgba(255,255,255,0.95);
  }
  /* Keep old nav-about working on static sub-pages */
  .nav-about {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-bottom: none !important;
    transition: color 0.15s ease;
  }
  .nav-about:hover { color: rgba(255,255,255,0.95); }
  .nav-cta {
    font-size: 14px;
    padding: 10px 18px;
  }
  .nav-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent);
  }
  .nav-meta-loc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .nav-meta-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.5;
    flex-shrink: 0;
  }
  .nav-meta a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: none !important;
    transition: opacity 0.15s ease;
  }
  .nav-meta a:hover { opacity: 0.75; }

  /* ── Hero ─────────────────────────────────────────────────── */
  .hero {
    padding-top: 64px;
    padding-bottom: 96px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 64px;
    row-gap: 0;
    align-items: center;
    min-height: 640px;
  }
  .hero > .hero-eyebrow-row { grid-column: 1; grid-row: 1; }
  .hero > h1                { grid-column: 1; grid-row: 2; }
  .hero > .hero-sub         { grid-column: 1; grid-row: 3; }
  .hero > .hero-ctas        { grid-column: 1; grid-row: 4; }
  .hero > .hero-rig         { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .hero h1 {
    font-size: clamp(56px, 5.6vw, 88px);
    letter-spacing: -0.045em;
    margin-bottom: 28px;
    max-width: 16ch;
  }
  .hero-sub {
    font-size: 19px;
    max-width: 46ch;
    margin-bottom: 36px;
  }
  .hero-eyebrow-row {
    font-size: 12px;
    margin-bottom: 28px;
  }
  .hero-ctas {
    flex-direction: row;
    gap: 12px;
    margin-bottom: 0;
  }
  .btn-block {
    width: auto;
  }
  .enquiry .btn-block {
    width: 100%;
  }
  .hero-rig {
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: var(--m3-radius-xl);
    padding: 32px;
    background:
      radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
      var(--bg-2);
  }
  .hero-rig-meta {
    font-size: 11px;
    margin-top: 18px;
  }

  /* ── Problem ──────────────────────────────────────────────── */
  .problem {
    padding-top: 96px;
    padding-bottom: 96px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 64px;
    row-gap: 18px;
    align-items: start;
  }
  .problem {
    padding-top: 96px;
    padding-bottom: 96px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    grid-template-rows: auto auto auto auto auto;
    column-gap: 80px;
    row-gap: 0;
    align-items: start;
  }
  .problem > .eyebrow     { grid-column: 1 / -1; grid-row: 1; margin-bottom: 20px; }
  .problem > h2           { grid-column: 1; grid-row: 2 / span 4; align-self: start; }
  .problem-blocks         { grid-column: 2; grid-row: 2; margin: 0 0 24px; }
  .problem-resolution     { grid-column: 2; grid-row: 3; }
  .problem-extra          { grid-column: 2; grid-row: 4; }

  .problem h2 {
    font-size: 48px;
    letter-spacing: -0.035em;
    margin: 0;
    max-width: 14ch;
  }
  .problem-blocks {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .problem-block {
    padding: 28px;
    gap: 14px;
  }
  .problem-block h3 { font-size: 17px; }
  .problem-block p  { font-size: 14px; }
  .problem-resolution {
    font-size: 16px;
    max-width: 52ch;
    margin-bottom: 20px;
  }

  /* ── Services ─────────────────────────────────────────────── */
  .services {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .services h2 {
    font-size: 52px;
    letter-spacing: -0.035em;
    margin-bottom: 48px;
    max-width: 18ch;
  }
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .service-card {
    padding: 28px 24px;
    min-height: 220px;
    gap: 14px;
  }
  .service-card h3  { font-size: 20px; }
  .service-card p   { font-size: 14px; }
  .service-card-icon           { width: 48px; height: 48px; }
  .service-card-icon img       { width: 34px; height: 34px; }

  /* ── Process ──────────────────────────────────────────────── */
  .process {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .process h2 {
    font-size: 52px;
    letter-spacing: -0.035em;
    margin-bottom: 48px;
    max-width: 16ch;
  }
  .process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .process-step {
    display: block;
    border: 1px solid var(--rule);
    border-radius: var(--m3-radius-lg);
    padding: 28px;
    background: var(--chip-bg);
  }
  .process-step-num {
    font-size: 56px;
    letter-spacing: -0.05em;
    display: block;
    margin-bottom: 16px;
  }
  .process-step h3  { font-size: 22px; margin-bottom: 10px; }
  .process-step p   { font-size: 15px; }

  /* ── USP ──────────────────────────────────────────────────── */
  .usp {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .usp h2 {
    font-size: 64px;
    letter-spacing: -0.045em;
    max-width: 14ch;
  }
  .usp p.lede {
    font-size: 19px;
    max-width: 60ch;
    margin-bottom: 56px;
  }
  .timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 24px;
  }
  .timeline::before {
    left: 23px;
    right: 23px;
    top: 23px;
    bottom: auto;
    width: auto;
    height: 1px;
    z-index: 0;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--accent) 70%, transparent) 15%,
      var(--accent) 35%,
      var(--accent) 65%,
      color-mix(in srgb, var(--accent) 70%, transparent) 85%,
      color-mix(in srgb, var(--accent) 20%, transparent) 100%);
  }
  .timeline-row {
    position: relative;
    z-index: 1;
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 0;
  }
  .timeline-dot          { width: 46px; height: 46px; }
  .timeline-dot::before  { background: var(--bg); }
  .timeline-dot.is-live::before { background: var(--accent); }
  .timeline-body h3      { font-size: 20px; }
  .timeline-body p       { font-size: 14px; }
  .usp-outputs {
    margin-top: 56px;
    padding-top: 36px;
  }
  .usp-outputs-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .usp-output-chip       { padding: 16px 18px; font-size: 14px; }
  .usp-output-chip-count { font-size: 22px; }

  /* ── Where ────────────────────────────────────────────────── */
  .where {
    padding-top: 96px;
    padding-bottom: 96px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: auto auto auto;
    column-gap: 64px;
    row-gap: 18px;
    align-items: start;
  }
  .where > .eyebrow     { grid-column: 1 / -1; grid-row: 1; }
  .where > h2           { grid-column: 1; grid-row: 2; }
  .where > p            { grid-column: 1; grid-row: 3; }
  .where > .where-towns { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .where h2 {
    font-size: 52px;
    letter-spacing: -0.035em;
    max-width: 14ch;
    margin: 0;
  }
  .where p {
    font-size: 17px;
    max-width: 40ch;
    margin: 0;
  }
  .where-towns  { gap: 8px; }
  .town-chip    { font-size: 14px; padding: 8px 14px; }

  /* ── Sectors ──────────────────────────────────────────────── */
  .sectors {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .sectors h2 {
    font-size: 52px;
    letter-spacing: -0.035em;
    margin-bottom: 48px;
    max-width: 18ch;
  }
  .sectors-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
  .sector-row {
    display: block;
    border: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    border-radius: var(--m3-radius-lg);
    padding: 24px;
    background: var(--chip-bg);
    position: relative;
  }
  .sector-row h3  { font-size: 20px; margin-top: 8px; }
  .sector-row p   { font-size: 14px; }
  .sector-num     { position: absolute; top: 24px; right: 24px; }

  /* ── Why ──────────────────────────────────────────────────── */
  .why {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .why h2 {
    font-size: 52px;
    letter-spacing: -0.035em;
    margin-bottom: 48px;
    max-width: 18ch;
  }
  .why-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .why-card      { padding: 28px 24px; }
  .why-card h3   { font-size: 20px; }
  .why-card p    { font-size: 14px; }

  /* ── FAQ ──────────────────────────────────────────────────── */
  .faq {
    padding-top: 96px;
    padding-bottom: 96px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
  }
  .faq h2 {
    font-size: 52px;
    letter-spacing: -0.035em;
    max-width: 14ch;
    position: sticky;
    top: 100px;
  }
  .faq .eyebrow  { grid-column: 1 / -1; }
  .faq-q         { font-size: 18px; padding: 22px 36px 22px 0; }
  .faq-a         { font-size: 16px; max-width: 60ch; }

  /* ── Enquiry ──────────────────────────────────────────────── */
  .enquiry {
    padding-top: 96px;
    padding-bottom: 96px;
    text-align: center;
  }
  .enquiry > .eyebrow {
    display: inline-flex;
  }
  .enquiry h2 {
    font-size: 56px;
    letter-spacing: -0.045em;
    margin-bottom: 16px;
  }
  .enquiry-sub {
    font-size: 17px;
    max-width: 48ch;
    margin: 0 auto 36px;
  }
  .enquiry form {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
  }
  .form-success {
    max-width: 540px;
    margin: 0 auto;
    padding: 36px;
  }

  /* ── Gallery ─────────────────────────────────────────────── */
  .gallery {
    padding: 0 max(56px, calc((100% - 1240px) / 2)) 80px;
  }
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .gallery-item {
    aspect-ratio: 16/9;
  }
  /* Hero photo on desktop: remove extra rig background */
  .hero[data-layout="Split"] .hero-rig {
    background: none;
    border: none;
    padding: 0;
  }

  /* ── Footer ───────────────────────────────────────────────── */
  .foot {
    padding-top: 64px;
    padding-bottom: 36px;
  }
  .foot-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 0.8fr;
    gap: 48px;
    margin-top: 36px;
  }
  .foot .brand   { font-size: 22px; }
  .foot-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 36px;
    padding-top: 24px;
  }

} /* end @media (min-width: 1024px) */