/* ROUND 99 — Tablet + mobile navigation (doc "Sentinel Tasks - 07 Oct 2026"). Scoped to body.sh-r99; see
   inc/round99.php. Loads after home.css, r63.css and r74.css.

   Section A gives the TABLET drawer (769–1023px) the phone drawer's chrome, chevrons, nested screens, folds
   and motion — the same rules home.css keeps inside @media (max-width:768px), restated for the tablet band.
   Section B then applies the round's own changes to BOTH bands (≤1023px). Section C is desktop only. */

/* ============================================================ A. tablet = phone drawer (769–1023px) */
@media (min-width:769px) and (max-width:1023px){
  /* bar 63px, burger → X morph, drawer chrome dropped (home.css §2) */
  .sh-r99 .nav__inner{height:63px;padding:0 24px;align-items:center}
  .sh-r99 .nav.scrolled .nav__inner{padding-top:0;padding-bottom:0}
  .sh-r99 .nav__logo img,.sh-r99 .nav.scrolled .nav__logo img{height:31px}
  .sh-r99 .nav__toggle svg{display:none}
  .sh-r99 .nav__toggle{position:relative}
  .sh-r99 .nav__toggle::before,.sh-r99 .nav__toggle::after{content:"";position:absolute;left:50%;top:50%;background:currentColor} /* geometry in section B */
  html.mnav-lock .sh-r99 .nav,html.mnav-lock.sh-r99 .nav{z-index:90}
  .sh-r99 .mnav__chrome{display:none}
  .sh-r99 .mnav{padding-top:63px;overflow:hidden;max-width:100vw}

  /* open / close driven off html.mnav-lock + [hidden] (home.css round 31 + R32 clip-path circle) */
  .sh-r99 .mnav{
    display:flex!important;opacity:1;visibility:visible;
    clip-path:circle(0% at calc(100% - 34px) 31px);
    transition:clip-path .55s cubic-bezier(.22,1,.36,1),visibility 0s 0s;
  }
  .sh-r99 .mnav[hidden]{
    display:flex!important;opacity:1;visibility:hidden;pointer-events:none;
    clip-path:circle(0% at calc(100% - 34px) 31px);
    transition:clip-path .55s cubic-bezier(.22,1,.36,1),visibility 0s .6s;
  }
  html.mnav-lock .sh-r99 .mnav{clip-path:circle(150% at calc(100% - 34px) 31px)}
  .sh-r99 .mnav__screens{opacity:1;transform:none;transition:none}
  .sh-r99 .mnav__screen[data-screen="root"] .mnav__row{
    opacity:0;transform:translateX(18px);
    transition:opacity .65s var(--ease-fluid),transform .65s var(--ease-fluid);
  }
  .sh-r99 .mnav__screen[data-screen="root"] .mnav__foot,
  .sh-r99 .mnav__screen[data-screen="root"] .mnav__office{
    opacity:0;transform:translateY(32px);
    transition:opacity .75s var(--ease-fluid),transform .75s var(--ease-fluid);
  }
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row,
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__foot,
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__office{opacity:1;transform:none}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(1){transition-delay:.5s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(2){transition-delay:.58s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(3){transition-delay:.66s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(4){transition-delay:.74s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(5){transition-delay:.82s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(6){transition-delay:.9s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(7){transition-delay:.98s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__foot{transition-delay:1.06s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__office{transition-delay:1.14s}

  /* About Us: folded children, chevrons, crumbs (home.css R33 §2) */
  .sh-r99 .mnav__screen[data-screen="about-us"] .mnav__row--foldable{display:none}
  .sh-r99 .mnav__screen[data-screen="about-us"] .mnav__divider{display:none}
  .sh-r99 .mnav__row--haschild{display:flex;align-items:center;gap:12px}
  .sh-r99 .mnav__row--haschild>a{flex:1 1 auto;width:auto;min-width:0}
  .sh-r99 .mnav__row--haschild>.mnav__subopen{
    flex:0 0 36px;display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;margin:-8px -10px -8px 0;
    background:none;border:0;padding:0;cursor:pointer;color:var(--off-white);
  }
  .sh-r99 .mnav__row--haschild>.mnav__subopen svg{width:8px;height:12px;flex:0 0 8px}
  .sh-r99 .mnav__crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .sh-r99 .mnav__crumbs .mnav__crumb{
    display:inline-flex;align-items:center;border:0;border-radius:4px;padding:4px 8px;
    font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:1.32px;
    text-transform:uppercase;color:var(--charcoal);line-height:1.2;
  }
  .sh-r99 .mnav__crumbs .mnav__crumb--parent{background:var(--warm-sand);cursor:pointer;transition:opacity .3s ease}
  .sh-r99 .mnav__crumbs .mnav__crumb--parent:hover,.sh-r99 .mnav__crumbs .mnav__crumb--parent:focus-visible{opacity:.85}
  .sh-r99 .mnav__crumbs .mnav__crumb--current{background:var(--off-white)}
  .sh-r99 .mnav__crumbs .mnav__crumb-sep{display:inline-flex;background:none;border-radius:0;padding:0;color:var(--off-white)}
  .sh-r99 .mnav__crumbs .mnav__crumb-sep svg{width:8px;height:12px}
  /* Plans / Build Options restructure (home.css R36 §1) */
  .sh-r99 .mnav .mnav__r36-fold{display:none!important}
}

/* ============================================================ B. both bands (≤1023px) */
@media (max-width:1023px){
  /* 1. Cream bar at rest on tablet AND phone (the phone bar was #637468); the drawer and the bar over it go
        green the moment the menu opens (html.mnav-lock), both bands alike. */
  .sh-r99 .nav::before{background:var(--cream);box-shadow:none}
  .sh-r99 .nav.scrolled::before{background:var(--cream);box-shadow:0 4px 24px rgba(66,64,64,.14)}
  .sh-r99 .nav__logo img,.sh-r99 .nav.scrolled .nav__logo img{filter:brightness(0) invert(.26)}
  .sh-r99 .nav__toggle,.sh-r99 .nav.scrolled .nav__toggle{color:var(--sage)}
  html.mnav-lock .sh-r99 .nav::before,html.mnav-lock .sh-r99 .nav.scrolled::before{background:transparent;box-shadow:none}
  html.mnav-lock .sh-r99 .nav__logo img,html.mnav-lock .sh-r99 .nav.scrolled .nav__logo img{filter:brightness(0) invert(1)}
  html.mnav-lock .sh-r99 .nav__toggle,html.mnav-lock .sh-r99 .nav.scrolled .nav__toggle{color:var(--off-white)}

  /* 2 · 3 · 11 (+ doc 08-10 "Alignment" / "Mobile/Tablet Header"). One icon weight (1.5px, the chevrons') for
        the burger lines and the X. One right edge for everything: the burger lines, the X and every chevron end
        24px from the viewport edge, the same 24px the logo keeps on the left. The 40px toggle keeps its tap
        size; it reaches 5px into the gutter so the 29px lines end on that edge, and the X (narrower, 18px
        arms) is nudged right as it forms so its edge lands on the same line. */
  .sh-r99 .nav__toggle{margin-right:-5px;background:none}
  .sh-r99 .nav__toggle::before,.sh-r99 .nav__toggle::after{width:29px;height:1.5px;border-radius:999px;box-shadow:none;transition:transform .42s var(--ease-fluid),width .3s var(--ease-fluid)}
  .sh-r99 .nav__toggle::before{transform:translate(-50%,calc(-50% - 9px));transition:transform .5s cubic-bezier(.34,1.56,.64,1) .08s,width .3s var(--ease-fluid)}
  .sh-r99 .nav__toggle::after{transform:translate(-50%,calc(-50% + 9px));box-shadow:0 -9px 0 currentColor;transition:transform .42s var(--ease-fluid),width .3s var(--ease-fluid),box-shadow .18s ease .32s}
  .sh-r99 .nav__toggle[aria-expanded="true"]::before{width:18px;transform:translate(calc(-50% + 7px),-50%) rotate(45deg);transition:transform .5s cubic-bezier(.34,1.56,.64,1) 0s,width .3s var(--ease-fluid)}
  .sh-r99 .nav__toggle[aria-expanded="true"]::after{width:18px;transform:translate(calc(-50% + 7px),-50%) rotate(-45deg);box-shadow:0 -9px 0 transparent;transition:transform .42s var(--ease-fluid),width .3s var(--ease-fluid),box-shadow .12s ease 0s}
  .sh-r99 .mnav__close svg path{stroke-width:1.6}
  .sh-r99 .mnav__row--haschild>.mnav__subopen{margin-right:-14px} /* chevron glyph ends on the gutter like the root rows' */
  .sh-r99 .mnav__row--haschild>.mnav__subopen[hidden]{display:none}

  /* 7. The Build Options crumb pill is cream like every other screen's (round 74 made it green). */
  .sh-r99 .mnav__screen[data-screen="build-options"] .mnav__tag--crumb span{background:var(--off-white);color:var(--charcoal)}

  /* 9. "Normal Plans" (the round 36 injected row) leaves the Plans screen; the page is untouched. */
  .sh-r99 .mnav__screen[data-screen="plans"] .mnav__row--r36{display:none!important}

  /* 6. The Plans RESOURCES block is back (r99.js lifts the round 36 fold); its tag and rule take the muted
        treatment the Build Options RESOURCES block already has (round 74), as in the Figma Mobile Nav. */
  .sh-r99 .mnav__screen[data-screen="plans"] .mnav__tag:not(.mnav__tag--crumb) span{background:#637468;color:var(--white)}
  .sh-r99 .mnav__screen[data-screen="plans"] .mnav__divider{background:rgba(99,116,104,.3)}

  /* 8. House & Land screen rows reuse the drawer's own row styles; nothing to restate. */

  /* 10. Home row: a plain link row, same type as Pricing. With seven root rows the home.css stagger (which
        names rows 1 to 6) left About Us with no delay, so it popped in first while the others were still
        invisible; every row, the foot and the office card now take their turn in order. */
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(1){transition-delay:.5s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(2){transition-delay:.58s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(3){transition-delay:.66s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(4){transition-delay:.74s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(5){transition-delay:.82s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(6){transition-delay:.9s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__row:nth-child(7){transition-delay:.98s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__foot{transition-delay:1.06s}
  html.mnav-lock .sh-r99 .mnav .mnav__screen[data-screen="root"] .mnav__office{transition-delay:1.14s}
  /* The drawer screens scroll without a visible scrollbar (the desktop panels already do, round 74). */
  .sh-r99 .mnav__screen{scrollbar-width:none;-ms-overflow-style:none}
  .sh-r99 .mnav__screen::-webkit-scrollbar{width:0;height:0;display:none}
}

/* ============================================================ C. desktop: transparent-header shade (12.) */
/* The top-of-hero shade was a 96px band (31% → 0) that ended just under the link text, inside the 120px bar.
   It now runs 240px — the full bar and the same again — easing to nothing, on every hero that carries it
   (homepage .hero, the inner.css set, the round 67 pair). Same strength at the top edge, no visible edge. */
@media (min-width:1024px){
  .sh-r99 .hero::before,
  .sh-r99 .ac-hero::before,.sh-r99 .sy-hero--decor::before,.sh-r99 .ch::before,.sh-r99 .sd-hero::before,
  .sh-r99.sh-paper .hist__panel[data-hist-panel="0"]::before,
  .sh-r99.sh-r67 .dd__hero::before,.sh-r99.sh-r67 .gd__hero::before{
    height:240px;
    background:linear-gradient(180deg,
      rgba(0,0,0,.31) 0,
      rgba(0,0,0,.295) 24px,
      rgba(0,0,0,.27) 48px,
      rgba(0,0,0,.235) 72px,
      rgba(0,0,0,.195) 96px,
      rgba(0,0,0,.15) 120px,
      rgba(0,0,0,.108) 144px,
      rgba(0,0,0,.07) 168px,
      rgba(0,0,0,.038) 192px,
      rgba(0,0,0,.014) 216px,
      rgba(0,0,0,0) 240px);
  }
}