/* t2-large-phones : responsive rules for this tier only. Every rule lives inside an @media block that can never match 1440x900.
   Tier range: (min-width:481px) and (max-width:767px). Sizes proven: 540x720, 600x960, 667x375, 700x1000 (plus 744 and 767 spot checks).
   Order follows the parent stylesheet's discipline: the whole-tier band first, then narrower sub-bands widest-first
   (641 to 767, 701 to 767, 721 to 767, 481 to 640), then height and orientation refinements last so they win on source order.
   Specificity: since round two the tier links are the last stylesheets in the body, so a tier rule wins every tie on source order. The
   "html " prefix from round one (one type selector, +0,0,1) is kept on every selector: harmless, and it still settles ties without
   !important. The only !important is on the consent-corner offsets, where the page itself uses it. Asset URLs are relative to this file (scale/), so _kit is three levels up. */

/* ============================================================================================
   A. WHOLE TIER 481 to 767
   ============================================================================================ */
@media (min-width:481px) and (max-width:767px){

  /* ---- nav: the family strap under the phone bar becomes a real 7px-padded row (the page keeps it at height:0, which paints
     the zero-height overflow twice in mobile renders, baseline G3) and keeps the desktop label size (was 8px). The hero's top
     clearance grows by the same 14px so the eyebrow keeps its distance from the bar. Same move as t1 for continuity at 480/481. ---- */
  html .mnav-sub{height:auto;padding:7px 0 0 0}
  html .mnav-sub .plat-biz{font-size:.56rem;letter-spacing:.22em}
  /* the strap is a button (it opens the family drawer): a 44px hit row, held visually where it was with negative margins */
  html .mnav-sub .plat-biz{min-height:44px;display:inline-flex;align-items:center;margin:-11px 0}
  /* round 2 (council must-fix 5): the bar loses the page's 14px left and 4px right padding so the lockup, the strap and every hero line
     register on the same 30px column, and the MENU hamburger ends on the content edge (its 12px button padding is pulled back) */
  html .mnav-bar{padding-left:0;padding-right:0}
  html .mnav-btn{margin-right:-12px}
  html .hr-in{padding-top:calc(12px + 64px + 38px)}
  /* the trailing period follows the market select directly: the select's chevron pocket tightens by 5px (as t1) */
  html #hrMkt{padding-right:15px;background-position:right 1px center;margin-right:0}
  /* round 2 (must-fix 3): the page's phone rule pulled the instrument 6px left (its max-width kept it 480 wide, so the negative margins
     only shifted it); it now sits flush on the column with the chip, the eyebrow and the metric rail */
  html .hr-inst{margin-left:0;margin-right:0}
  /* round 2 (should-fix 15): the drawn-frame chip hugs its text as it does on the desktop instead of stretching across the column */
  html .hr-chip{display:inline-flex;width:auto}
  html .hr-ctxt{flex:0 1 auto}

  /* ---- phone menu sheet: lots start under the head instead of floating mid-sheet; the 3px stray tick is gone ---- */
  html .mnav-lots{justify-content:flex-start;margin-top:10px}
  html .mlot::before{display:none}

  /* ---- hero instrument: touch-size selects inside the sentence (44px tall boxes, baseline kept) ---- */
  html .hr-inst select{padding-top:9px;padding-bottom:9px;margin-top:-2px;margin-bottom:-2px;min-height:44px}
  html .hr-sent{line-height:1.6}
  html .hr-ceye{font-size:.54rem}

  /* ---- consent banner: compact card, three actions on one row, so it clears the instrument's submit on short viewports ---- */
  html .consent{left:10px;bottom:10px;width:calc(100vw - 20px);padding:14px 16px 14px}
  html #consent-banner.consent-corner{left:10px!important;bottom:10px!important}
  html .consent h2{font-size:1.1rem;line-height:1.1}
  html .consent p{margin:5px 0 0;max-width:none;font-size:.82rem;line-height:1.4}
  html .consent-actions{margin-top:10px;gap:8px;flex-wrap:nowrap}
  html .consent-actions button{flex:1 1 0;min-height:44px;padding:0 10px;white-space:nowrap}
  html .consent-custom .consent-actions{flex-wrap:wrap}
  html .consent-custom .consent-actions button{flex:1 1 118px}

  /* ---- board frame: the tab strip and the closing hairline run frame edge to frame edge, never outside it ---- */
  html .lx-seg.r2-segtabs{margin:0 calc(-1 * var(--lxpadx));border-left:0}
  html .lx-left>.lx-filters::after{left:calc(-1 * var(--lxpadx));right:calc(-1 * var(--lxpadx))}
  html .lx-body{gap:28px}
  html .lx-side{margin-bottom:0}
  html .ask{margin-bottom:0}
  html .lx-left>.lx-filters .r2-selcol+.r2-selcol{margin-top:0}
  html .r2-eyebrow{font-size:.56rem;letter-spacing:.28em}

  /* ---- board controls: 44px touch targets that the page only grants under (hover:none) ---- */
  html .ask-seed{min-height:44px;padding:10px 12px;display:inline-flex;align-items:center}
  html .ask-send{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;margin-right:-10px}
  html .lf-heart::after{content:'';position:absolute;inset:-7px}
  html .pl-brokpin::after{content:'';position:absolute;inset:-6px}
  html .le-pgnum{min-width:44px;min-height:44px;padding:12px 10px;font-size:.7rem}
  html .le-pgbtn{min-height:44px;padding:12px 0}
  html .r2-track{height:44px;margin:0 10px 10px}
  html .r2-track::before{top:21px}
  html .r2-fill{top:20.5px}
  html .r2-track input[type=range]{height:44px}
  html .r2-track input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
  html .r2-track input[type=range]::-moz-range-thumb{width:26px;height:26px}
  html .r2-ins input{min-height:44px}
  html .lx-sel{min-height:44px}
  html .lx-sel.r2-per{min-height:44px}
  html .r2-msbtn{min-height:44px}
  html .lx-reset{min-height:44px}
  html .lx-flab{font-size:.7rem}
  html .pl-stats .stat .k{font-size:.7rem}
  html .pl-stats .stat .v .vu{font-size:max(.62em,.58rem)}
  html .pl-flag{font-size:.7rem}
  html .pl-acts button{min-height:44px;font-size:.64rem;letter-spacing:.12em}
  html .pl-acts{position:static;opacity:1;pointer-events:auto;display:flex;border-top:1px solid var(--hair)}
  html .lx-card:hover .pl-stats,html .lx-card:focus-within .pl-stats{opacity:1}
  html .pl-dealbar{flex-wrap:wrap;height:auto}
  html .pl-seg{height:44px}
  html .r2-segtabs{height:auto}
  html .r2-segtabs .pl-seg{min-height:44px;padding:8px 4px}
  html .r2-seeall{min-height:44px}
  html .r2-reset{min-height:44px;display:inline-flex;align-items:center;padding-bottom:0}
  html .r2-reset[hidden]{display:none}

  /* ---- team bench (round 2, council must-fix 2, 6 and 7): on 166 to 234px cards the plate row (name plus three icons) was wider than the
     card and the LinkedIn glyph was clipped on every second and third column; roles wrapped and broke the row's shared baseline. This is
     the parent's phone move, carried through the tier exactly as t1 carries it to 480 so the seam at 481 is continuous: two-row portrait
     cards, the photo at 4/5 on top, the caption on its own dark plate beneath with the green rule as its top accent; name, then the
     44px icon row, then a role slot reserved at two lines so every card in a row shares one geometry. Cards stretch to their row. ---- */
  html .tb-card{aspect-ratio:auto;display:flex;flex-direction:column}
  html .tb-face{position:relative;inset:auto;height:auto;aspect-ratio:4/5;flex:0 0 auto}
  html .tb-card::after{display:none}
  html .tb-cap{position:static;padding:0 9px 11px;background:#16210F;flex:1 1 auto}
  html .tb-rule{margin:0 -9px 9px}
  html .tb-card:hover .tb-rule,html .tb-card:focus-within .tb-rule{margin-left:-9px;margin-right:-9px}
  html .tb-headrow{flex-direction:column;align-items:flex-start;gap:5px}
  html .tb-links{margin-top:2px;gap:0}
  html .tb-links a,html .tb-links button{width:44px;height:44px;margin:-9px -9px -9px 0}
  html .tb-role{font-size:.58rem;line-height:1.3;min-height:calc(2 * 1.3 * .58rem)}
  html .tb-body{align-items:stretch}
  html .ct-cta{min-height:44px}
  html .ft-legal a,html .ft-legal button{min-height:44px;display:inline-flex;align-items:center}
  html .ft-brand{min-height:44px;display:flex;align-items:center}

  /* ---- the fixed rail and disc keep a real lane (round 2, should-fix 1): 44px cells (46px with the border) 4px off the edge (50px), and every
     card column in the board, the bench and the contact zone ends 60px from the edge (frames at 30px, an inner padding of 30px, one rhythm
     with the page's own 30px column), so the rail never touches a card or a tile: a 10px lane instead of round 1's 2px ---- */
  html .cta-social a{width:44px;height:44px}
  html .cta-social svg{width:15px;height:15px}
  html .totop{width:44px;height:44px;right:4px;bottom:calc(12px + var(--consent-clear,0px))}
  html .totop svg{width:19px;height:19px}
  html .lx-in{--lxpadx:30px}
  html .tb-in{padding-left:30px;padding-right:30px}
  html .ct-in{padding-left:30px;padding-right:30px}

  /* ---- footer: a lane on the right for the disc so the legal row never runs under it ---- */
  html .ft-wrap{padding-right:60px}
  /* round 2 close: the About copy ran to the 30px column edge and the rail's box (w-50 to w-4) sat on the last 20px of its lines at every
     tier size (540: "after i", "worked", "and" under the rail). The About column takes the same right lane the board, bench and contact
     tiles keep: content ends 60px from the edge, 10px clear of the rail; the drawing scales with the column and keeps its aspect ---- */
  html #sec-about.ab-elev .ab-in{padding-right:30px}

  /* ---- drawers open full width on every size in the tier (the parent does this to 720; 744 wide is still a phone-class sheet) ---- */
  html .le-drawer{width:100vw}
  html .sup{width:100vw;border-left:0}
  html .sup.sup-fam{width:100vw;box-shadow:none}
  html .sup-edge{right:100vw}
  html .sup-x,html .fam-x,html .le-x{min-width:44px;min-height:44px}

  /* ---- drawer action bar (round 2, must-fix 8 for portrait): the broker panel's third action (SEE ALL OF AUBREY'S 15 LISTINGS) ran past the
     drawer at 561 to 740; the page wraps the bar only to 560. The phone bar runs through the tier: the terracotta call on its own row,
     the two secondary actions (or the brochure and the heart) sharing the next ---- */
  html .le-foot{flex-wrap:wrap;gap:10px;padding-top:12px;padding-bottom:14px}
  html .le-foot .le-cta{flex:1 1 100%;justify-content:center}
  html .le-foot .le-alt{flex:1 1 auto;justify-content:center}
  html .le-foot .le-fhint{flex:1 1 100%}

  /* ---- request-form masthead (round 2, must-fix 10): the far back link is an inline-flex button, so the page's ellipsis on the button never
     reached its <b>; the label itself now ellipsises and both masthead links share the row at 50 / 40 percent ---- */
  html .le-back-far{max-width:50%}
  html .le-back-far b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---- flowing drawers (broker panel, request forms, shortlist) have no sticky masthead, so the CLOSE plate floated over scrolling text
     (round 2, should-fix 17). A sticky white band at the top of the scroll box, the page's own 46px-white-then-fade recipe, gives it ground.
     The band is an in-flow sticky pseudo-element (62px plus a 2px gap) that replaces the scroll box's 64px top padding, so the masthead
     (THE TEAM, No. 01 / 11, the broker arrows, the request form's back link) starts at 64px exactly as before. Round 2 fix: the first cut
     pulled the band up with a negative margin out of the padding, and Chrome's sticky constraint then pushed it 62px down over the masthead,
     hiding it at rest at every tier size ---- */
  html .le-drawer.le-flowing .le-scroll{padding-top:0}
  html .le-drawer.le-flowing .le-scroll::before{content:'';display:block;position:sticky;top:0;z-index:3;height:62px;margin:0 calc(-1 * var(--le-gut)) 2px;
    background:linear-gradient(to bottom,#fff 46px,rgba(255,255,255,0));pointer-events:none}
  /* the desktop masthead keeps a 104px right margin so its arrows clear the CLOSE plate beside it; here the plate sits above the masthead
     (the page's own move to 560), so the masthead and its hairline run the full column like every row beneath them */
  html .le-drawer.le-flowing .le-mast{margin-right:0}

  /* ---- contact drawer directions (round 2, should-fix 5): the Google, Apple and Waze glyph links become 44px targets ---- */
  html #panel-contact a.dw-map{display:inline-grid;place-items:center;min-width:44px;min-height:44px}
}

/* portrait only: the rail is inset with its full border (the page does this to 767.98 portrait; the 8px lane matches the disc) */
@media (min-width:481px) and (max-width:767px) and (orientation:portrait){
  html .cta-social{right:4px;border-right:1px solid var(--grey)}
}

/* ============================================================================================
   B. 641 to 767 : two-up cards, instrument row two reads count left and submit right
   ============================================================================================ */
@media (min-width:641px) and (max-width:767px){
  html .hr-submit{order:4;flex:0 0 auto;margin-left:auto;justify-content:center;padding:0 22px;min-height:44px}
  html .hr-count{order:3;flex:1 1 auto;min-height:44px;align-items:center}
  html .hr-inst{gap:10px 18px}
  /* round 2 (must-fix 1): the two grid columns were 1fr 1fr, whose auto minimum let the cards' min-content (three action buttons, three stats)
     push both columns to 275px and the right card past the frame and under the rail at 641 to 689; minmax(0,1fr) makes them share the column */
  html .lx-grid,html #lxGridWide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html .lx-card{min-width:0}
  html .pl-acts button{letter-spacing:.08em;padding:12px 4px}
  /* round 2 (must-fix 4): the lease hero value (from $14.61/SF) ellipsised in a 121px cell; the page's --fits pass never ran here, so cap it */
  html .pl-stats .stat.hero .v{font-size:min(calc(1.31rem*var(--fits,1)),1.14rem)}
  /* round 2 (should-fix 7): balanced title lines so a middot never dangles at a line end */
  html .pl-cap-addr{text-wrap:balance}
  /* round 2 (should-fix 6): eleven cards three-up leave a final pair; it closes the bench centred under the three columns
     (a transform of half a card plus half a gap, no layout change) */
  /* two-up card captions: a shorter broker name so the market never ellipsises beside it */
  html .pl-cap-meta{font-size:.7rem;letter-spacing:0}
  html .lx-grid .pl-brokpin{width:28px;height:28px}
  html .lx-grid .pl-brokpin::after{inset:-8px}
  /* round 2 close (creative director must-fix): the type flag wrapped with the pipe dangling at the end of line one and AERIAL indented 12px on
     line two, the plate running to 3px from the heart. The page's own narrow-phone flag treatment (max-width:480px) is carried into this band,
     direction A of the two the director verified: the pipe before the Aerial segment stands down, the segments wrap on a 12px column gap and a
     7px row gap, the Aerial segment loses the page's 12px indent so line two registers under line one, and the plate keeps a 21px lane to the
     heart (heart at right 11px, 32px wide; the flag starts at 12px). The touch Aerial segment stays, per Brent's 9/2 ruling.
     The freshness pipe stands down here too: on these 248 to 308px cards RECENTLY UPDATED | LAND cannot share a line, so that pipe would
     dangle at the end of line one exactly as the Aerial pipe did. With no pipes, whatever wraps, no separator is ever stranded; the green
     dot and colour keep the freshness segment distinct and the 12px column gap does the separating, as on the page's own narrow phones. */
  html .lx-grid .pl-flag{flex-wrap:wrap;row-gap:7px;column-gap:12px;max-width:calc(100% - 76px)}
  html .lx-grid .pl-fsep,html .lx-grid .pl-fsep-sat{display:none}
  html .lx-grid .pl-satbtn{padding-left:0!important}
  html .pl-ptype{white-space:normal}
  html .pl-brokby .bn,html .pl-brok2 .pl-brokby .bn{font-size:.8rem}
  html .pl-brokby .by,html .pl-brok2 .pl-brokby .by{font-size:.58rem}
  html .pl-brok2.tight .pl-brokby .bn{font-size:.74rem}
  html .pl-cap-addr{font-size:1.12rem}
  html .le-morebar .pl-seg{font-size:.7rem;letter-spacing:.06em}
  html .lf-tray{max-width:100%}
  html .tb-card:nth-child(10),html .tb-card:nth-child(11){transform:translateX(calc(50% + var(--g) / 2))}
}

/* ============================================================================================
   B2. 641 to 700 : the narrowest two-up cards (248 to 277px). The caption row (market, Listed by, two pins), the three action
       buttons and the lease hero value all need a step down that 701 to 767 does not
   ============================================================================================ */
@media (min-width:641px) and (max-width:700px){
  html .pl-cap-meta{font-size:.64rem}
  html .pl-brokby .bn,html .pl-brok2 .pl-brokby .bn{font-size:.74rem}
  html .pl-brok2.tight .pl-brokby .bn{font-size:.7rem}
  html .lx-grid .pl-brokpin{width:24px;height:24px}
  html .lx-grid .pl-brokpin::after{inset:-10px}
  html .pl-acts button{font-size:.6rem;gap:5px}
  /* round 2 close (creative director must-fix): the whole-band stat label (.7rem at .18em) made CAP RATE wrap to two lines in the 76px first
     cell at 641 to about 664 while PRICE and NOI stayed on one, so 6.85 percent sat 16px under the other two values and the row lost its
     tabular baseline. One step down on these narrowest two-up cards keeps every label on one line (labels 16/16/16, value-top spread 0 at
     641, 648, 655 and 660; no change from 667 to 767) */
  html .pl-stats .stat .k{font-size:.6rem;letter-spacing:.14em}
  /* round 2 close: at 641 to 652 the JUST LISTED | RETAIL first line no longer fits the flag's lane at .7rem and the freshness pipe dangled;
     one step down on the narrowest two-up cards keeps every first line whole (verified: no card's second line carries a pipe or the type) */
  html .lx-grid .pl-flag{font-size:.66rem}
  /* the page's own fit pass bottoms out at --fits .8 (16.77px) and the value still ran .5px over at 641; a vw cap takes it to 16px there and
     stops binding above about 650, where the .8 value fits on its own */
  html .pl-stats .stat.hero .v{font-size:min(calc(1.31rem*var(--fits,1)),calc(.4rem + 1.5vw))}
}

/* ============================================================================================
   C. 701 to 767 : the board keeps the phone treatment the page uses to 700 (no small map, stacked rail)
   ============================================================================================ */
@media (min-width:701px) and (max-width:767px){
  html .lx-side{display:block}
  html .lx-map,html .lx-maplabel,html .lx-attr{display:none}
  html .lx-count{margin:0 0 2px}
  html .lx-headband{flex-wrap:wrap;align-items:flex-start;margin-bottom:clamp(20px,3vh,34px)}
  html .lx-reset{display:none;padding-top:10px}
  html .lx-reset.show{display:block;visibility:visible}
  html .lx-left{min-width:0}
  html .lx-left .le-offmkt{margin-top:30px}
}

/* ============================================================================================
   D. 721 to 767 : the page's phone rules stop at 720, so the desktop plat would overflow here.
      Carry the phone bar, sheet, hero stack, about stack, drawers and consent through to 767 (the parent runs its phone
      composition to 767.98 for the same reason).
   ============================================================================================ */
@media (min-width:721px) and (max-width:767px){
  /* nav */
  html .nav{padding:12px var(--pad) 0}
  html .plat,html .plat-note,html .plat-sub{display:none}
  html .mnav-bar{display:flex;align-items:center;justify-content:space-between;height:64px;position:relative;border:0;padding:0}
  html .mnav-bar::before,html .mnav-bar::after{display:none}
  html .mnav-logo{display:block;text-decoration:none;overflow:hidden;width:164px;height:54px}
  html .mnav-logo .lockup{display:block;transform:scale(.82);transform-origin:left center}
  html .mnav-btn{appearance:none;background:none;border:0;min-width:44px;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--sans)}
  html .mnav-btn i{font-style:normal;font-weight:500;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.95)}
  html .mnav-ic{position:relative;width:20px;height:12px;display:block}
  html .mnav-ic::before,html .mnav-ic::after{content:'';position:absolute;left:0;right:0;height:1.6px;background:#fff}
  html .mnav-ic::before{top:0}
  html .mnav-ic::after{bottom:0}
  html .mnav-sub{display:flex;align-items:center;gap:12px;height:auto;padding:7px 0 0 0}
  html .mnav-sub .plat-biz{font-size:.56rem;letter-spacing:.22em}
  html .mnav-sheet{position:fixed;inset:0;z-index:120;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;padding:14px var(--pad) 20px;overflow-y:auto;overscroll-behavior:contain}
  html .mnav-sheet[hidden]{display:none}
  html .mnav-head{display:flex;align-items:center;justify-content:space-between;height:64px;flex:0 0 auto}
  html .mnav-head .mnav-logo{width:164px;height:54px;overflow:hidden;display:block}
  html .mnav-head .lockup{display:block;transform:scale(.82);transform-origin:left center;background-image:url('../../../_kit/logo/brokerage-logo-dark.png')}
  html .mnav-x{appearance:none;background:none;border:1px solid rgba(43,44,45,.40);color:var(--ink);cursor:pointer;min-width:44px;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
  html .mnav-x span{position:relative;width:12px;height:12px;display:inline-block}
  html .mnav-x span::before,html .mnav-x span::after{content:'';position:absolute;left:0;top:5px;width:12px;height:1.4px;background:currentColor}
  html .mnav-x span::before{transform:rotate(45deg)}
  html .mnav-x span::after{transform:rotate(-45deg)}
  html .mnav-lots{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start;border-top:1px solid rgba(43,44,45,.40);margin-top:10px}
  html .mlot{position:relative;display:flex;align-items:center;gap:18px;min-height:64px;padding:0 2px;border-bottom:1px solid rgba(43,44,45,.40);text-decoration:none}
  html .mlot::before{display:none}
  html .mlot i{font-style:normal;font-weight:500;font-size:.6rem;letter-spacing:.24em;color:var(--green-deep)}
  html .mlot b{font-weight:500;font-size:1.02rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
  html .mlot-cta{background:var(--terra);border-bottom:0;margin-top:18px;padding:0 18px}
  html .mlot-cta i{color:rgba(255,255,255,.85)}
  html .mlot-cta b{color:#fff}
  html body.mnav-open{overflow:hidden}
  html body:has(.mnav-sheet:not([hidden])) .sf-consent{opacity:0;pointer-events:none}

  /* hero: the phone stack (full-bleed still, block copy, full-width chip, stacked instrument) */
  html .hr-in{padding-top:calc(12px + 64px + 38px)}
  html .hr-still{object-position:38% 42%}
  html .hr-video{display:none}
  html .hr-scrim{background:linear-gradient(180deg,rgba(28,46,24,.46) 0%,rgba(28,46,24,.1) 26%,rgba(28,46,24,.38) 58%,rgba(28,46,24,.66) 100%)}
  html .hr-copy{display:block}
  html .hr-city,html .hr-cap{display:none}
  html .hr-h1{font-size:clamp(2.5rem,11.8vw,3.2rem)}
  /* chip and instrument geometry come from the whole-tier band (compact chip, instrument flush on the column) */
  html .hr-count{order:3}
  html .hr-submit{order:4}

  /* about: the phone stack (head, drawing, copy, three rows; marks 2x2) */
  html .ab-head{font-size:clamp(2.2rem,8.6vw,2.7rem)}
  html #sec-about.ab-elev{padding-top:52px;padding-bottom:40px}
  html #sec-about.ab-elev .ab-spread{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"head" "fig" "body" "arg";margin-top:20px}
  html #sec-about.ab-elev .ab-head{max-width:none}
  html #sec-about.ab-elev .ab-fig2{margin-top:28px}
  html #sec-about.ab-elev .ab-fig2 .ab-cap{padding-top:0;text-align:left;align-items:flex-start}
  html #sec-about.ab-elev .ab-el{margin-top:16px}
  html #sec-about.ab-elev .ab-body{padding:24px 0 0}
  html #sec-about.ab-elev .ab-argw{border-top:0;padding-top:18px}
  html #sec-about.ab-elev .ab-arg{display:block;max-width:none}
  html #sec-about.ab-elev .ab-arow{grid-template-columns:48px minmax(0,1fr);grid-template-areas:"num txt" "num amt";column-gap:10px;row-gap:7px;padding:10px 0 11px;border-left:0}
  html #sec-about.ab-elev .ab-arow+.ab-arow{padding-left:0;border-left:0}
  html #sec-about.ab-elev .ab-arow::before,html #sec-about.ab-elev .ab-arow:last-child::after{display:block}
  html #sec-about.ab-elev .ab-amt{justify-self:start;padding-top:0}
  html #sec-about.ab-elev .ab-amv{font-size:1.2rem}
  html #sec-about.ab-elev .ab-argft{border-top:0;padding:16px 0 0;flex-wrap:wrap;gap:10px 16px}
  html #sec-about.ab-elev .ab-argft .ab-link{padding-top:0}
  html #sec-about.ab-elev .ab-src{padding-top:0}
  html #sec-about.ab-elev .ab-ground{margin-top:30px}
  html #sec-about.ab-elev .ab-co{display:flex;flex-direction:column;align-items:stretch;padding-top:0}
  html #sec-about.ab-elev .ab-co-l{display:contents}
  html #sec-about.ab-elev .ab-co-lbl{order:1;padding:20px 0 14px}
  html #sec-about.ab-elev .ab-co-marks{order:2}
  html #sec-about.ab-elev .ab-board{order:3;align-items:flex-start;text-align:left;padding-top:18px}
  html #sec-about.ab-elev .ab-bd-v{font-size:.95rem}
  html #sec-about.ab-elev .ab-fig2 .ab-co-marks{display:grid;grid-template-columns:1fr 1fr;justify-items:center;row-gap:26px;margin-top:22px}
  html #sec-about.ab-elev .ab-co-marks .m-pb{height:38px}
  html #sec-about.ab-elev .ab-co-marks .m-seal{height:60px}
  html #sec-about.ab-elev .ab-co-marks .m-f50{height:54px}
  html #sec-about.ab-elev .ab-co-marks .m-cre{height:54px}

  /* drawers and consent already covered by the whole-tier band; the parent's sup paddings follow */
  html .dw-head{padding:24px 22px 16px}
  html .dw-body{padding:0 22px 60px}
}

/* ============================================================================================
   E. 481 to 640 : single-column phone board, two-column bench, stacked footer legal
   ============================================================================================ */
@media (min-width:481px) and (max-width:640px){
  /* the size slider takes the full fold width; SHOW drops to its own row below it */
  html .r2-ranges .r2-rngrow{flex:1 1 100%}
  /* round 2 (should-fix 10): SHOW closes its row at the right under No max (label left, control right, as the instrument's second row) */
  html .lx-left>.lx-filters .r2-ranges .r2-perwrap{margin-left:auto}
  /* the eleventh broker closes the bench centred under the two columns instead of stranded left */
  html .tb-grid .tb-card:last-child{grid-column:1 / -1;width:calc(50% - var(--g) / 2);justify-self:center}
  /* footer legal: copyright on its own line, the three links on the next, no dangling separators */
  html .ft-sep{display:none}
  html .ft-legal{gap:2px 22px}
  html .ft-legal>span:first-child{flex:0 0 100%}
  /* round 2 (must-fix 11): the dossier's MORE TO SEE bar ran three .7rem nowrap segments in a 480px drawer and ellipsised the third;
     the segments wrap to two lines and the bar grows, 44px touch height kept. The page's own rule carries :not(.le-flowing), so match it */
  html .le-drawer .le-morebar,html .le-drawer:not(.le-flowing) .le-morebar{height:auto}
  html .le-drawer .le-morebar .pl-seg,html .le-drawer:not(.le-flowing) .le-morebar .pl-seg{white-space:normal;text-overflow:clip;line-height:1.3;
    min-height:44px;height:auto;padding:8px 8px;font-size:.62rem;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;text-align:center}
  /* round 2 (should-fix 16): the broker panel's portrait was 210px in a 480px column; a larger set piece for the space */
  html .bkp-ph{max-width:min(300px,56vw)}
}

/* the About award marks: one clean 2x2 with no partial dividers (the page's 2x2 rules leave a single stray vertical) */
@media (min-width:481px) and (max-width:767px){
  html #sec-about.ab-elev .ab-fig2 .ab-co-marks{border:0}
  html #sec-about.ab-elev .ab-co-marks li,html #sec-about.ab-elev .ab-co-marks li+li,
  html #sec-about.ab-elev .ab-co-marks li:nth-child(even),html #sec-about.ab-elev .ab-co-marks li:nth-child(n+3){border:0}
  html #sec-about.ab-elev .ab-co-marks::before,html #sec-about.ab-elev .ab-co-marks::after{display:none}
  html.hr-anim #sec-about.ab-elev .ab-co-marks li+li,html.hr-anim #sec-about.ab-elev.ab-go .ab-co-marks li+li{border-left:0}
}

/* ============================================================================================
   F. HEIGHT: short portrait viewports (540x720 class). The air between the family chip and the instrument
      shrinks so the instrument and its submit land above the consent banner on first paint.
   ============================================================================================ */
@media (min-width:481px) and (max-width:767px) and (orientation:portrait) and (max-height:760px){
  /* round 2 (should-fix 14): the strap and the hero eyebrow were 25px apart and read as a doubled label; 14px more clearance under the bar,
     7px less air above the instrument, so the submit still lands above the consent banner (checked after the change) */
  html .hr-in{padding-top:calc(12px + 64px + 52px)}
  html .hr-inst{margin-top:clamp(24px,4svh,124px)}
  /* round 2 close: on these short portraits the rail (centred at 50 percent, 134px tall) ended 32px below the instrument's top edge and sat on
     the white plate's corner (540x720: rail 293 to 427, plate from 395). Centred at 38 percent it clears the plate by 54px at 720 and still
     sits beside the hero photo, right of the chip */
  html .cta-social{top:38%}
  html .hr-chip{margin-top:clamp(18px,2.6svh,32px)}
  html .hr-h1{font-size:clamp(2.3rem,10.4vw,2.9rem)}
  html .hr-eyebrow{margin-bottom:14px}
}

/* ============================================================================================
   G. LANDSCAPE PHONES (667x375 class): the parent's two-column landscape hero cannot host a 600px instrument,
      so the stack stays but every step is re-clamped by height; metrics return to the desktop 4-up rail;
      the menu sheet fits the fold; the consent banner becomes one low strip.
   ============================================================================================ */
@media (min-width:481px) and (max-width:767px) and (orientation:landscape) and (max-height:540px){
  /* round 2 (must-fix 9): on a 375px fold the family strap sat 17px above the hero eyebrow and read as a doubled eyebrow; the strap is
     hidden here (the drawn-frame chip carries the same line and opens the same drawer) and the hero clearance closes to 16px under the bar */
  html .mnav-sub{display:none}
  html .hr-in{padding-top:calc(12px + 64px + 16px);padding-bottom:16px}
  html .hr-eyebrow{margin-bottom:10px}
  html .hr-h1{font-size:clamp(1.9rem,6.4vh,2.4rem)}
  html .hr-chip{display:inline-flex;width:auto;margin-top:14px;min-height:44px}
  html .hr-ctxt{flex:0 1 auto}
  html .hr-inst{margin-top:22px;padding:12px 18px 14px;gap:8px 18px}
  html .hr-submit{order:4;flex:0 0 auto;margin-left:auto;justify-content:center;padding:0 22px;min-height:44px}
  html .hr-count{order:3;flex:1 1 auto;min-height:44px;align-items:center}
  html .hr-led{display:flex;margin-top:16px;padding-top:14px}
  html .hr-led::before{display:block}
  html .hr-cell,html .hr-cell:nth-child(odd){padding:0 14px;border-top:0;border-left:1px solid rgba(247,246,242,.5)}
  html .hr-cell:first-child{padding-left:0;border-left:0}
  html .hr-v{font-size:1.5rem}
  html .hr-k{font-size:.62rem}

  /* menu sheet fits 375 tall: 56 head, four 50px lots, the CTA, with the sheet still scrollable as a safety valve */
  html .mnav-sheet{padding-top:10px;padding-bottom:14px}
  html .mnav-head{height:56px}
  html .mnav-lots{margin-top:6px}
  html .mlot{min-height:50px;gap:14px}
  html .mlot b{font-size:.92rem}
  html .mlot-cta{margin-top:12px}

  /* consent: one strip, copy left, three actions right */
  html .consent{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h a" "p a";column-gap:16px;align-items:center;padding:10px 14px}
  html .consent>h2{grid-area:h;font-size:1rem}
  html .consent>p{grid-area:p;margin:3px 0 0;font-size:.76rem;line-height:1.4}
  html .consent>.consent-actions{grid-area:a;margin:0;gap:6px}
  html .consent>.consent-actions button{flex:0 0 auto;padding:0 12px;font-size:.58rem}
  html .consent>.consent-custom{grid-column:1 / -1;margin-top:10px;padding-top:10px}

  /* round 2 (must-fix 8, should-fix 12): the broker drawer's third action ran 7px past the 667px viewport; the three actions now share the
     row equally, and the sticky bar gives back 8px of the 375px fold */
  html .le-foot{flex-wrap:nowrap;padding-top:8px;padding-bottom:10px}
  html .le-foot .le-cta{flex:0 0 auto}
  html .le-foot .le-alt{flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px;font-size:.6rem;letter-spacing:.1em;white-space:nowrap}
}