@layer register {

   

  [data-register="local"] {
    --sec:       clamp(3rem, 2.2rem + 4vw, 5rem);    
    --sec-loose: clamp(4rem, 3rem + 5vw, 6.5rem);
    --maxw-text: 62ch;                                
    --r:         8px;                                 

     
    --c-bg:        var(--c-paper);
    --c-surface:   var(--c-paper-surface);
    --c-surface-2: var(--c-paper-surface-2);
    --c-line:      var(--c-paper-line);
     
    --c-line-strong: var(--c-paper-line-strong);
  }

   

   
   
  [data-register="local"] .cta-band {
    --c-text:        var(--c-text-light);
    --c-text-muted:  var(--c-text-muted-light);
    --c-line:        var(--c-paper-line);
    --c-line-strong: var(--c-paper-line-strong);
    --track-label:   0.06em;

    background: var(--c-paper-surface);
    color: var(--c-text);
  }
  [data-register="local"] .cta-band .eyebrow { color: var(--c-text); }
  [data-register="local"] .cta-band .eyebrow::before { display: block; }
  [data-register="local"] .cta-band h2,
  [data-register="local"] .cta-band h3 { color: var(--c-text); }
  [data-register="local"] .cta-band p { color: var(--c-text-muted); }

   
  [data-register="local"] .cta-band .btn-primary {
    background: var(--c-green-text);
    color: #FFFFFF;
  }
  [data-register="local"] .cta-band .btn-primary:hover { background: var(--c-green-text-hover); }
  [data-register="local"] .cta-band .btn-secondary {
    color: var(--c-blue);
    border-color: var(--c-paper-line-strong);
  }
  [data-register="local"] .cta-band .btn-secondary:hover {
    background: var(--c-bg);
    border-color: var(--c-blue);
  }

  [data-register="local"] .grid-3 { --grid-min: 16rem; }
  [data-register="local"] .grid-2 { --grid-min: 21rem; }

  [data-register="local"] .hero { padding-block: var(--sec) var(--sec-tight); }

   
  [data-register="local"] .prose > * + * { margin-block-start: var(--stack-tight); }

   

  [data-register="local"] .service-shot {
    aspect-ratio: 4 / 3;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--c-surface);
  }

   
  [data-register="local"] .service-shot picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  [data-register="local"] .service-shot img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;       
    mix-blend-mode: normal;  
  }

   

  [data-register="local"] .service-card {
    display: grid;
    gap: var(--stack-tight);
    align-content: start;
  }

   
  [data-register="local"] .service-card.is-lead { margin-block-end: var(--sec-tight); }

  [data-register="local"] .service-card.is-lead .service-shot { aspect-ratio: 16 / 9; }

  [data-register="local"] .service-card.is-lead h3 { font-size: var(--t-2xl); }

  [data-register="local"] .service-card h3 {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-variation-settings: "wdth" var(--width-display);
    margin: 0;
  }

  [data-register="local"] .service-card h3 a { color: var(--c-text); text-decoration: none; }
  [data-register="local"] .service-card h3 a:hover { color: var(--c-blue); }
  [data-register="local"] .service-card p { margin: 0; max-width: var(--maxw-text); }

   
  [data-register="local"] .service-card { border: 0; padding: 0; }

  [data-register="local"] .service-quote-only {
    font-size: var(--t-sm);
    color: var(--c-text-muted);
  }

   

  [data-register="local"] .cta-band { padding-block: var(--sec-tight); }

   

  [data-js] [data-register="local"] [data-reveal].is-in {
    transition-duration: var(--dur);
    transition-delay: 0ms;
  }

   

  .register-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-sm);
    font-weight: 600;
  }

}

@layer register {

   
  [data-register="local"] .service-card {
    display: flex;
    flex-direction: column;
  }

  [data-register="local"] .service-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--stack-tight) var(--stack);
    margin-block-start: auto;
    padding-block-start: var(--stack);
  }

  [data-register="local"] .service-actions .btn {
     
    gap: 0.45rem;
  }

  [data-register="local"] .service-actions .btn svg {
    inline-size: 1.05em;
    block-size: 1.05em;
    flex: none;
  }

  [data-register="local"] .service-more {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    text-decoration: none;
    text-underline-offset: 3px;
  }

  [data-register="local"] .service-more:hover {
    color: var(--c-blue);
    text-decoration: underline;
  }

  [data-register="local"] .service-more svg {
    inline-size: 1em;
    block-size: 1em;
    transition: transform var(--dur-fast) var(--ease);
  }

  [data-register="local"] .service-more:hover svg { transform: translateX(2px); }

   
  [data-register="local"] .service-card.is-lead .service-actions .btn {
    padding: 0.95rem 1.6rem;
    font-size: var(--t-base);
  }

   
  [data-register="local"] .service-shot .img-slot {
    inline-size: 100%;
    block-size: 100%;
  }

}

@layer register {

   

   
  [data-register="local"] .hero {
    background: var(--c-paper-surface-2);
    border-block-end: var(--bw) solid var(--c-paper-line-strong);
  }

   
  [data-register="local"] .hero h1,
  [data-register="local"] .hero-offer h1 { font-size: var(--t-2xl); }

  [data-register="local"] .hero .lede {
    font-size: var(--t-lg);
    max-inline-size: 46ch;
  }

   
  [data-register="local"] .hero .eyebrow::before { background: var(--c-green-text); }

   
  [data-register="local"] .btn-primary {
    background: var(--c-green-text);
    color: #FFFFFF;
  }

  [data-register="local"] .btn-primary:hover {
    background: var(--c-green-text-hover);
    color: #FFFFFF;
  }

   

   
  [data-register="local"] .sticky-mobile-cta {
    background: color-mix(in srgb, var(--c-paper) 94%, transparent);
    border-block-start-color: var(--c-paper-line-strong);
  }

   
  [data-register="local"] .ground-surface::before { background: var(--c-green-text); }

   
  [data-register-preview="local"] .btn-primary {
    background: var(--c-green-text);
    color: #FFFFFF;
  }

}

@layer register {

   

   
  [data-register="local"] .svc-card h3 {
    font-family: var(--font-display);
    font-size: var(--t-display-4);
    font-weight: var(--weight-display);
    font-variation-settings: "wdth" var(--width-display-text);
    letter-spacing: var(--track-d4);
    line-height: var(--lead-tight);
    text-wrap: balance;
  }

  /* THE BOUNDED STOCK PLATE ON THE THREE WASH CARDS.
     V1b 5.1: stock sits in a bounded plate, a fixed-ratio box with a hairline,
     inset, no caption. All three wash photographs are licensed stock, Tanya
     asked for them specifically, and check 2 fails the build on all three in
     production, deliberately.

     THE PICTURE IS SIZED AND SO IS THE IMG, AND THAT IS NOT BELT AND BRACES.
     partials/img.php emits a <picture> wrapper with a plain <img> inside it.
     An aspect-ratio box on the wrapper alone silently fails the moment a
     photograph's own ratio differs from the box, which is how a card set goes
     ragged without anything reporting it.

     C3 partials/plate.php IS DELIBERATELY NOT USED HERE. It takes a path and
     bypasses img.php entirely, and every state guard in this build lives in
     img.php: stock renders on staging and in draft and becomes absent in
     production, and verify check 2 reads data/images.php. Routing these three
     through plate.php would put three licensed stock photographs into
     production and make check 2 blind to them.

     object-fit: cover IS NOT A C-R3 BREACH. C-R3 protects a manufacturer
     product photograph, which must never crop. These are scene photographs of
     a wash method, the frame is the slot's own 3/2, and no crop can make a
     number plate readable that was not already. */
  [data-register="local"] .svc-card > :is(picture, .img-slot, .img-stock) {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: clip;
    border: var(--bw) solid var(--c-line);
  }
  [data-register="local"] .svc-card > picture > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

   
  [data-register="local"] .cta-band .closing-line {
    color: var(--c-text);
    font-weight: var(--weight-display);
  }

}