/* Concept 1 + 4: a quiet editorial system for the inner pages.
   The breadcrumb scopes this layer away from the header and Home slider.
   Component visibility, state, focus, validation and sticky rules stay intact. */
@media screen {
  #main:has(> .breadcrumb) {
    --refresh-surface: #fffefa;
    --refresh-tint: #f0eee7;
    --refresh-line: #d8d5cb;
    --refresh-brass: #806333;
  }

  #main:has(> .breadcrumb) .page-hero {
    max-width: 1080px;
    padding-block: clamp(38px, 5vw, 76px) clamp(36px, 4.5vw, 64px);
  }
  #main:has(> .breadcrumb) :is(.page-hero, .legal-header) h1 {
    font-weight: 550;
    letter-spacing: -.05em;
    line-height: 1.12;
    text-wrap: balance;
  }
  #main:has(> .breadcrumb) .page-hero > p {
    max-width: 65ch;
    line-height: 1.8;
  }
  #main:has(> .breadcrumb) :is(.page-hero, .legal-header) > .eyebrow {
    color: var(--refresh-brass);
    font-weight: 600;
  }
  #main:has(> .breadcrumb) .page-hero > .eyebrow::before { width: 34px; }
  #main:has(> .breadcrumb) .page-hero .button {
    max-width: 100%;
    white-space: normal;
  }

  /* Photography and copy retain the same reading order and real image assets. */
  #main:has(> .breadcrumb) :is(.service-photograph, .editorial-banner) > img {
    border-radius: 4px;
    background: var(--refresh-tint);
  }
  #main:has(> .breadcrumb) .service-photograph > figcaption {
    border-left-color: var(--refresh-brass);
    font-size: 13px;
  }
  #main:has(> .breadcrumb) .prose > h2 {
    font-weight: 550;
    font-size: clamp(27px, 2.6vw, 36px);
    margin-top: 44px;
  }
  #main:has(> .breadcrumb) .prose > h2:first-child { margin-top: 0; }
  #main:has(> .breadcrumb) .prose > :is(p, ul, ol) { line-height: 1.85; }
  #main:has(> .breadcrumb) .aside-card {
    background: var(--refresh-surface);
    border: 1px solid var(--refresh-line);
    border-top: 3px solid var(--refresh-brass);
    border-radius: 4px;
    padding: 29px;
  }
  #main:has(> .breadcrumb) .aside-card h2 { line-height: 1.25; }
  #main:has(> .breadcrumb) .aside-card :is(p, li) { line-height: 1.8; }

  /* Service and sector catalogues share restrained borders and navy headings. */
  #main:has(> .breadcrumb) .service-grid { gap: 24px; }
  #main:has(> .breadcrumb) .service-grid > .service-card {
    padding: 27px;
    border: 1px solid var(--refresh-line);
    border-top: 2px solid var(--refresh-brass);
    border-radius: 4px;
    background: var(--refresh-surface);
  }
  #main:has(> .breadcrumb) .service-card .service-number {
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--refresh-brass);
  }
  #main:has(> .breadcrumb) .service-card h3 { font-size: clamp(25px, 2.2vw, 29px); }
  #main:has(> .breadcrumb) .cards-two > .info-card {
    background: var(--refresh-surface);
    border-color: var(--refresh-line);
    border-radius: 4px;
    padding: 30px;
  }
  #main:has(> .breadcrumb) .cards-two > .info-card > .eyebrow { color: var(--refresh-brass); }
  #main:has(> .breadcrumb) .service-shortcuts > a {
    background: var(--refresh-surface);
    border-color: var(--refresh-line);
  }
  #main:has(> .breadcrumb) :is(.service-options-grid, .vehicle-card) {
    background: var(--refresh-surface);
    border-color: var(--refresh-line);
  }
  #main:has(> .breadcrumb) .service-option > .eyebrow { color: var(--refresh-brass); }

  /* Functional tools stay light and readable; checked/error/disabled states
     remain owned by their component styles. No control borders are replaced. */
  #main:has(> .breadcrumb) :is(.delivery-advisor-form, .price-estimator-form, .form-panel, .vehicle-explorer-panel) {
    background: var(--refresh-surface);
    border-color: var(--refresh-line);
    border-radius: 4px;
  }
  #main:has(> .breadcrumb) :is(.delivery-advisor-result, .price-estimator-result, .vehicle-load-summary) {
    background: var(--refresh-tint);
    border-color: var(--refresh-line);
  }
  #main:has(> .breadcrumb) :is(.delivery-advisor-heading, .vehicle-explorer-intro, .business-account-intro) h2 {
    font-weight: 550;
    line-height: 1.2;
    text-wrap: balance;
  }
  #main:has(> .breadcrumb) :is(.collection-checklist, .advice-diagram) {
    background: var(--refresh-tint);
    border-color: var(--refresh-line);
    border-radius: 4px;
  }

  /* FAQ and long-form content use the same quiet ivory/white hierarchy. */
  #main:has(> .breadcrumb) .faq-list,
  #main:has(> .breadcrumb) .faq-list > details { border-color: var(--refresh-line); }
  #main:has(> .breadcrumb) .faq-list > details[open] { background: var(--refresh-surface); }
  #main:has(> .breadcrumb) .advice-summary { line-height: 1.65; }
  #main:has(> .breadcrumb) :is(.advice-comparison, .blog-tools, .legal-section) {
    border-color: var(--refresh-line);
  }
  #main:has(> .breadcrumb) .advice-comparison > section { background: var(--refresh-surface); }
  #main:has(> .breadcrumb) .blog-card { border-color: var(--refresh-line); }
  #main:has(> .breadcrumb) :is(.blog-card-image, .blog-hero-image img) { border-radius: 4px; }
  #main:has(> .breadcrumb) .blog-card h2 { font-weight: 550; line-height: 1.22; }
  #main:has(> .breadcrumb) :is(.blog-card-meta, .advice-read-time) { font-size: 12px; }
  #main:has(> .breadcrumb) .legal-header h1 { overflow-wrap: break-word; }

  @media (min-width: 1100px) {
    #main:has(> .breadcrumb) .content-grid { column-gap: clamp(56px, 6vw, 90px); }
    #main:has(> .breadcrumb) .blog-grid { column-gap: 36px; row-gap: 44px; }
  }
  @media (max-width: 800px) {
    #main:has(> .breadcrumb) .page-hero { padding-block: 38px 42px; }
    #main:has(> .breadcrumb) .service-grid { gap: 18px; }
    #main:has(> .breadcrumb) .service-grid > .service-card { padding: 25px; }
    #main:has(> .breadcrumb) .prose > h2 { margin-top: 36px; }
    #main:has(> .breadcrumb) .prose > h2:first-child { margin-top: 0; }
  }
  @media (max-width: 480px) {
    #main:has(> .breadcrumb) .page-hero { padding-block: 33px 36px; }
    #main:has(> .breadcrumb) .page-hero h1 { font-size: clamp(35px, 9vw, 42px); }
    #main:has(> .breadcrumb) .page-hero > p { font-size: 16px; line-height: 1.75; }
    #main:has(> .breadcrumb) :is(.aside-card, .cards-two > .info-card, .service-grid > .service-card) { padding: 23px; }
    #main:has(> .breadcrumb) .prose > h2 { font-size: 28px; }
    #main:has(> .breadcrumb) .service-card h3 { font-size: 26px; }
  }
}