/* ============================================================
   P1 — "Morning" desktop layer
   ------------------------------------------------------------
   EVERY rule in this file lives inside a `min-width` media query.
   Nothing here can reach a phone. That is deliberate: index.html
   and memberships.html still carry their own inline copies of the
   design system, and those copies differ from morning.css in small
   ways (56px vs 64px add-on thumbs, fixed vs sticky header). Rather
   than reconcile them — and risk moving the mobile design — this
   file is loaded LAST on every page and only ever adds width-gated
   overrides on top of whichever base the page happens to use.

   So: link this after nav.css, and never write an unqualified rule
   in it.

   Breakpoints
     768px   tablet — the single column starts splitting in two
     1000px  desktop — full multi-column layouts
     1440px  cap — stop growing, start breathing

   Content is unchanged throughout. Type scale, colour and component
   styling are inherited; only arrangement and measure change.
   ============================================================ */


/* ============================================================
   1. TABLET — 768px
   ============================================================ */
@media (min-width:768px){

  /* The column stops being phone-width and the vertical rhythm opens
     up to match. Section padding is set on both the shared and the
     inline systems, so it needs restating rather than inheriting. */
  .wrap{max-width:46rem;padding:0 2rem}

  /* Form controls are 16px on phones to stop iOS magnifying the page on
     focus; nothing does that at this width, so they return to the size the
     design wants. */
  .field input,.field select,.field textarea,
  .addon-plan select,.billing-select select{font-size:14.5px}
  section{padding:3.4rem 0}

  /* Prose caps rise with the column — 29rem measure looks starved
     once there is 46rem of room behind it. */
  .lede,.intro p,.bldg p.calm{max-width:34rem}
  .sub{max-width:38rem}

  /* Two-up: cards that were a single stacked stream on the phone. */
  .models{grid-template-columns:repeat(2,minmax(0,1fr))}
  .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .local{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Selects were full-bleed because a phone has no width to spare.
     Left at 100% they turn into 40rem-wide controls, which reads as
     a bug rather than a choice. */
  .addon-plan select,.billing-select select{max-width:22rem}

  /* Add-on rows can afford a much larger thumbnail — these are the only
     product shots on the page and at phone size they read as icons.
     Source art is 800x450, so a 160px square crop is still native res. */
  .addon{grid-template-columns:160px minmax(0,1fr) auto;gap:1.4rem}
  .addon img{width:160px;height:160px;border-radius:16px}
}


/* ============================================================
   2. DESKTOP — 1000px
   ============================================================ */
@media (min-width:1000px){

  .wrap{max-width:64rem;padding:0 2.5rem}
  section{padding:4.4rem 0}

  .lede,.intro p,.bldg p.calm{max-width:36rem}
  .sub{max-width:42rem}


  /* ---------- header ---------- */
  /* Taller bar, and the "Vehicle Services" descriptor comes back —
     nav.css hides it in the header because a phone has no room for
     it. A desktop header does. */
  .bar{height:68px}
  header .mark span{display:inline}

  /* "SERVICES AUX AUTOMOBILES" is half again as wide as "VEHICLE
     SERVICES", and the French nav labels are longer too, so between 1000
     and 1120 the descriptor has nowhere to go: at 12px it wrapped to two
     lines inside a 68px bar, and forcing nowrap made it run 30px into the
     first nav link instead. Measured at every step from 1000 to 1440 —
     no type size small enough to clear 1000px is still readable, so it is
     hidden there, exactly as nav.css hides it on a phone, and comes back
     at the width that actually fits it. */
  html[lang="fr"] header .mark span{display:none}

  /* Inline nav replaces the hamburger. The overlay and its toggle
     still exist and still work — they are simply not shown at this
     width. To go back to the hamburger on desktop, delete this block
     and the .navlinks rules below; nothing else depends on it. */
  .navtoggle{display:none}
  .navlinks{
    display:flex;align-items:center;gap:1.6rem;
    margin-right:.4rem;
  }
  .navlinks a{
    font-size:13.5px;font-weight:600;color:var(--slate);
    white-space:nowrap;padding:.2rem 0;
    border-bottom:1.5px solid transparent;
  }
  .navlinks a:hover{color:var(--gold)}
  .navlinks a.current{border-bottom-color:var(--gold)}


  /* ---------- add-ons ---------- */
  .addon{grid-template-columns:176px minmax(0,1fr) auto;gap:1.6rem;padding:1.2rem 0}
  .addon img{width:176px;height:176px;border-radius:18px}
  .addon p{max-width:38rem}


  /* ---------- FAQ: heading beside the list ---------- */
  /* The phone stacks an eyebrow, a heading and a run of accordions.
     The desktop analog is the same list with its title moved to the
     side rather than on top. .k and .h2 are placed explicitly in
     column one; the accordions take a definite column and auto-flow
     down beside them from row one. */
  .wrap:has(> details.q){
    display:grid;
    grid-template-columns:minmax(0,17rem) minmax(0,1fr);
    column-gap:3.5rem;
    align-items:start;
  }
  .wrap:has(> details.q) > .k{grid-area:1/1}
  .wrap:has(> details.q) > .h2{grid-area:2/1;margin-top:.2rem}
  .wrap:has(> details.q) > details.q{grid-column:2}
  /* Anything else in a FAQ section (stray notes) spans the full row. */
  .wrap:has(> details.q) > :not(.k):not(.h2):not(details.q){grid-column:1/-1}


  /* ---------- icon-step cards become a row ---------- */
  /* "Virtually effortless" (index, building) and the onboarding
     sequence (for-buildings) are numbered/iconed steps stacked in a
     card. Across the width they read as a row, icon above label.

     Track counts are explicit rather than auto-fit: the headings and
     footnotes below span 1/-1, which means no track is ever empty and
     auto-fit has nothing to collapse — it would leave a ragged unused
     column beside a 3-step card. So each page states its own count. */
  #how .three,
  .card:has(> .step){
    display:grid;
    column-gap:2rem;
    padding-top:1.9rem;padding-bottom:1.9rem;
  }
  #how .three,                              /* index — 3 steps */
  body#top .card:has(> .step){              /* building — 3 steps */
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body:has(#mgrForm) .card:has(> .step){    /* for-buildings — 4 steps */
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  #how .three > :not(.step),
  .card:has(> .step) > :not(.step){grid-column:1/-1}
  #how .three .step,
  .card:has(> .step) .step{
    grid-template-columns:1fr;      /* icon above the text, not beside */
    gap:.7rem;
    border-bottom:0;                /* the row is the separator now */
    padding:1.1rem 0 .4rem;
  }
  #how .three .step p,
  .card:has(> .step) .step p{max-width:none}
  /* Restore the reading measure on the notes that follow the row. */
  #how .three > .whisper,
  .card:has(> .step) > .whisper{max-width:44rem}


  /* ---------- forms ---------- */
  /* A form is the one thing that should NOT stretch: 64rem-wide
     inputs are harder to use, not easier. Centre the card instead. */
  .form-card,
  #visit .card,
  #join .card,
  #ask .card{max-width:38rem;margin-left:auto;margin-right:auto}
  #visit .card .btn.wide,
  #join .card .btn.wide,
  #ask .card .btn.wide,
  .form-card .btn{max-width:20rem;margin-left:auto;margin-right:auto}
}


/* ============================================================
   3. PAGE — index.html
   ============================================================ */
@media (min-width:1000px){

  /* ---------- scroll-scrubbed hero ---------- */
  /* The headline was pinned to the viewport edges because on a phone
     the viewport IS the column. On desktop it aligns to the content
     column instead, and grows to hero scale — a 48px headline is
     undersized across 1440px of frame.
     transform is safe to use here: the scrub script only ever writes
     opacity and filter to this element. */
  .shero h1{
    left:50%;right:auto;
    transform:translateX(-50%);
    width:100%;max-width:64rem;
    padding:0 2.5rem;
    font-size:clamp(48px,5vw,68px);
    bottom:9svh;
  }

  /* ---------- hero tail ---------- */
  /* Heading and its supporting text sit side by side rather than
     stacked, which is the ordinary desktop reading of the pair. */
  .hero-after .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:3.5rem;
    align-items:start;
  }
  .hero-after .h2{grid-column:1;margin-top:0}
  .hero-after .lede{grid-column:2;max-width:none}
  .hero-after .row{grid-column:2;margin-top:1.4rem}

  /* ---------- plans ---------- */
  /* Four stacked cards become the conventional four-across pricing
     row. There is now room to show every feature list, so the
     "What's included +" expanders are retired at this width — the
     JS that drives them is untouched and simply has nothing to
     toggle. */
  #plans .wrap{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:1rem;
    align-items:stretch;
  }
  #plans .wrap > :not(.tier){grid-column:1/-1}
  #plans .billing-select{max-width:22rem}
  #plans .tier{
    display:flex;flex-direction:column;
    margin-bottom:0;
    padding:1.3rem 1.2rem 1.4rem;
  }
  #plans .tier ul{display:block}
  #plans .tier .more{display:none}
  #plans .tier .pick{margin-top:auto}
  /* The tier is a flex column here, which blockifies the inline-block pill
     and stretches it into a full-width bar; align-self puts it back to
     hugging its text. And .pick's auto margin bottom-aligns the four
     buttons, but collapses to zero on the tallest card — a badged one — so
     the pill ends up flush against the button. margin-bottom is the floor
     under that gap, and leaves the bottom alignment intact. */
  #plans .tier .addonoff.show{align-self:flex-start;margin-bottom:.55rem}
  /* The recommended card lifts out of the row rather than relying on
     its ring alone. */
  #plans .tier.rec{transform:translateY(-.6rem)}

  /* ---------- for the building ---------- */
  /* Pitch on the left, the four proof points on the right. */
  .bldg{margin:0;padding:3.2rem 0}
  .bldg .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:3.5rem;
    align-items:start;
  }
  .bldg .k{grid-area:1/1}
  .bldg .h2{grid-area:2/1}
  .bldg p.calm{grid-area:3/1}
  .bldg .btn{grid-area:4/1;justify-self:start;margin-top:1.4rem}
  .bldg .stats{grid-area:1/2/6/3;margin:0}
}


/* ============================================================
   4. PAGE — memberships.html
   ============================================================ */
@media (min-width:1000px){

  /* The tab switcher is the interaction, so it stays. What changes is
     the selected plan: its feature list and billing panel stop being
     stacked and sit beside each other.
     .pd.on beats .pd's display:none on specificity, so plans that are
     not selected stay hidden. */
  .ttabs{margin:1.6rem 0 1.2rem}
  .pd.on{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,22rem);
    column-gap:2.5rem;
    align-items:start;
    padding:1.8rem 1.8rem 1.9rem;
  }
  .pd .head,.pd .who{grid-column:1/-1}
  .pd .feat{grid-column:1}
  .pd .feat ul{margin-bottom:0}
  .pd .billing{grid-column:2;grid-row:3/span 2;margin-top:0}
  .pd .addonoff.show{margin-top:.9rem}
  .pd .btn{grid-column:1/-1;max-width:20rem;margin-left:auto;margin-right:auto}
  .pd .regnote{grid-column:1/-1}
}


/* ============================================================
   5. PAGE — method.html
   ============================================================ */
@media (min-width:1000px){

  /* Rules that carry a photograph put the photograph beside the
     argument instead of underneath it. Rules without one keep the
     full measure. */
  .rule{padding:1.6rem 1.7rem}
  .rule:has(> .shot){
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,20rem);
    column-gap:2.2rem;
    align-items:start;
  }
  .rule:has(> .shot) > .n,
  .rule:has(> .shot) > h3,
  .rule:has(> .shot) > p,
  .rule:has(> .shot) > .why{grid-column:1}
  .rule:has(> .shot) > .shot{grid-column:2;grid-row:1/span 4;margin:0}
  .rule p,.rule .why{max-width:44rem}

  /* Wheels: the photograph and the list of disciplines side by side. */
  .card:has(> .ticks):has(> .photo){
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:2.5rem;
    align-items:start;
  }
  .card:has(> .ticks):has(> .photo) > .k,
  .card:has(> .ticks):has(> .photo) > .h2,
  .card:has(> .ticks):has(> .photo) > .sub{grid-column:1/-1}
  .card:has(> .ticks):has(> .photo) > .photo{grid-column:1;margin:0}
  .card:has(> .ticks):has(> .photo) > .ticks{grid-column:2;margin-top:0}

  /* The marquee gets the full column; the brand marks scale with it. */
  .kitpanel{padding:2.2rem 0 2rem}
  .brand{min-width:13rem}
  .brand img{max-height:52px;max-width:12rem}

  .closer{padding:3rem 2rem}
  .closer p{max-width:32rem}
}


/* ============================================================
   6. PAGE — lockbox.html
   ============================================================ */
@media (min-width:1000px){

  /* Each step is a claim plus its evidence: text left, photograph
     right, rather than one above the other. */
  .stepblock:has(> .shot){
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,26rem);
    column-gap:3rem;
    align-items:start;
  }
  .stepblock:has(> .shot) > .n,
  .stepblock:has(> .shot) > h2,
  .stepblock:has(> .shot) > p{grid-column:1}
  .stepblock:has(> .shot) > .shot{grid-column:2;grid-row:1/span 3}
  .stepblock p{max-width:34rem;margin-bottom:0}
}


/* ============================================================
   7. PAGE — for-buildings.html
   ============================================================ */
@media (min-width:1000px){

  .models{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .models .model{display:flex;flex-direction:column}
  .models .model .cost{margin-top:auto;padding-top:.6rem}

  /* The reference installation shot no longer needs the full column. */
  figure:has(figcaption){max-width:44rem;margin-left:auto;margin-right:auto}

  /* Resident experience: the paragraph and the four "no ..." chips
     side by side. */
  .panel:has(> .chips){
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,16rem);
    column-gap:3rem;
    align-items:start;
    padding:2.2rem 2.2rem;
  }
  .panel:has(> .chips) > .k,
  .panel:has(> .chips) > .h2{grid-column:1}
  .panel:has(> .chips) > p{grid-column:1;max-width:36rem}
  .panel:has(> .chips) > .chips{
    grid-column:2;grid-row:1/span 3;
    flex-direction:column;align-items:flex-start;margin-top:0;
  }
}


/* ============================================================
   8. PAGE — building.html
   ============================================================ */
/* building.html is the only page with <body id="top">, which makes a
   clean scope for its hero — method.html also has a .hero .photo and
   must not be caught by these rules. */
@media (min-width:1000px){

  /* The flyer hero stacks a portrait photograph, the headline, the
     plaque, the local details and the CTAs. That is a long scroll on
     a wide screen. Side by side, the portrait finally has somewhere
     to be tall. */
  body#top .hero .wrap{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    column-gap:3.5rem;
    align-items:start;
  }
  body#top .hero .photo{grid-column:1;grid-row:1/span 4}
  body#top .hero h1{grid-column:2;margin-top:0;font-size:clamp(38px,3.4vw,50px)}
  body#top .hero .plaque{grid-column:2}
  body#top .hero .local{grid-column:2}
  body#top .hero .row{grid-column:2}

  body#top .tiers{grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
  body#top .tiers .tier{display:flex;flex-direction:column}
  body#top .tiers .tier .pick{margin-top:auto}
}


/* ============================================================
   9. PAGE — request.html
   ============================================================ */
@media (min-width:1000px){

  /* Two blocks only — the pitch and the form. Beside each other they
     make one screen instead of two. */
  body:has(#askForm) .hero{padding-bottom:0}
  body:has(#askForm) #ask .wrap{max-width:64rem}
  body:has(#askForm) #ask .card{max-width:38rem}
}


/* ============================================================
   10. CAP — 1440px
   ============================================================ */
/* Wide enough for the French descriptor: tracked tighter than the English
   so it clears the first nav link with room to spare rather than by a
   hair. Verified ~25px of daylight at 1120. */
@media (min-width:1120px){
  html[lang="fr"] header .mark span{
    display:inline;white-space:nowrap;
    font-size:10.5px;letter-spacing:.04em;
  }
}

@media (min-width:1440px){
  /* Past the wrap's widest cap there is 70px+ of daylight, so the French
     descriptor goes back to something close to the English weighting. */
  html[lang="fr"] header .mark span{font-size:11.5px;letter-spacing:.08em}

  .wrap{max-width:69rem}
  .shero h1{max-width:69rem}
  #plans .wrap{max-width:69rem}
}