/* t1-phones : responsive rules for this tier only. Every rule lives inside an @media block that can never match 1440x900. */
/* Range: portrait phones, (max-width:480px). Sizes perfected: 360x780, 375x667, 390x844, 393x852, 414x896, 430x932.
   Reference for the moves: the parent site's phone tier (linvilleteampartners.com), see _specs/scaling/parent-scaling-study.md Part B t1.
   Selectors mirror the page's own with an html prefix: the tier link sits in the head, but 26 of the page's <style> blocks follow it in the
   body, so equal specificity would lose on source order. One type selector settles it without !important (none used). */

@media (max-width:480px){

  /* ---- nav: the strap under the phone bar gets a real box. The page keeps it at height:0, which paints the
     zero-height overflow twice in mobile renders (baseline G3). A real 7px-padded row sits under the bar, once. ---- */
  html .mnav-sub{height:auto;padding:7px 0 0 15px}
  html .mnav-sub .plat-biz{font-size:.54rem;letter-spacing:.2em;padding:12px 0 10px;margin:-12px 0 -10px}
  html .hr-in{padding-top:calc(12px + 64px + 38px)}

  /* ---- menu sheet: the lots start under the head instead of floating mid-sheet; the 3px tick that reads
     as a stray mark at phone density stands down ---- */
  html .mnav-lots{justify-content:flex-start;margin-top:26px}
  html .mlot::before{display:none}

  /* ---- hero ---- */
  /* the instrument's breathing gap above it was a fixed 124 to 142px on phones; the hero already runs past
     the fold here (content is taller than 100svh), so the gap tightens and the submit lands above the
     consent banner at 780px and taller viewports */
  html .hr-inst{margin-top:clamp(44px,7svh,88px)}
  /* the label grammar keeps its shape but no glyph falls under 9px */
  html .hr-lab{font-size:.6rem}
  html .hr-ceye{font-size:.56rem}
  /* the trailing period follows the market select directly: the select's chevron pocket tightens by 5px */
  html #hrMkt{padding-right:15px;background-position:right 1px center;margin-right:0}

  /* ---- consent banner: compact. Title, three-line note, the three actions on ONE row at 44px ---- */
  html .sf-consent{padding:12px 14px 12px}
  html .sf-consent h2{font-size:1.05rem}
  html .sf-consent p{font-size:.78rem;line-height:1.4;margin-top:6px}
  html .sf-consent-actions{margin-top:10px;gap:6px;flex-wrap:nowrap}
  html .sf-consent-actions button{flex:1 1 0;min-width:0;padding:10px 4px;font-size:.56rem;letter-spacing:.08em;white-space:nowrap}
  html .consent-custom .sf-consent-actions{flex-wrap:wrap}
  html .consent-custom .sf-consent-actions button{flex:1 1 100%}

  /* ---- about: the 2x2 award grid gets a full hairline lattice (one vertical seam per row, one horizontal
     seam between the rows) instead of the desktop's row-only dividers ---- */
  html #sec-about.ab-elev .ab-fig2 .ab-co-marks{row-gap:0;justify-items:stretch;align-items:stretch}
  html #sec-about.ab-elev .ab-fig2 .ab-co-marks li{height:84px;padding:0 12px;justify-self:stretch}
  html #sec-about.ab-elev .ab-co-marks li+li{border-left:0}
  html #sec-about.ab-elev .ab-co-marks li:nth-child(2n){border-left:1px solid var(--hair)}
  html #sec-about.ab-elev .ab-co-marks li:nth-child(n+3){border-top:1px solid var(--hair)}
  html .hr-anim #sec-about.ab-elev .ab-co-marks li:nth-child(n+3){border-top-color:transparent}
  html .hr-anim #sec-about.ab-elev.ab-go .ab-co-marks li:nth-child(n+3){border-top-color:var(--hair);transition:border-color .4s ease 2.4s}

  /* ---- board ---- */
  /* the tab strip hangs 18px outside the frame on the left once the rail folds (its desktop margin reaches
     back across the rail gutter). Here it spans frame edge to frame edge like it does on the right. */
  html .lx-seg.r2-segtabs{margin-left:calc(-1 * var(--lxpadx))}
  /* three 100px tabs at 360: the verb and its count tighten so FOR LEASE 57 never touches the frame */
  html .r2-segtabs .pl-seg{font-size:.66rem;gap:6px;padding:8px 3px}
  html .r2-segtabs .pl-seg i{font-size:1rem}
  /* Ask Linville.ai: the wordmark takes the whole first row so ".ai" never orphans; Start over appears on
     its own row only while a conversation is running (it is invisible otherwise, and no longer reserves width) */
  html .ask-top{flex-wrap:wrap}
  html .ask-name{flex:1 1 100%;white-space:nowrap}
  html .ask-new{display:none;margin-left:0}
  html .ask.talking .ask-new{display:inline-block}
  html .ask-in{text-overflow:ellipsis}
  /* tap targets: send and the openers get padded hit areas; the drawn glyphs stay the same size */
  html .ask-send{padding:14px 14px;margin:-14px -12px -14px 0}
  html .ask-seed{position:relative}
  html .ask-seed::after{content:'';position:absolute;inset:-8px 0}
  html .pl-brokpin::after{inset:-8px}
  html .r2-ins input{min-height:44px}
  /* cards: the flag never truncates its type ("RECENTLY UPDATED | LAND" needs 216px at 360) */
  html .pl-flag{font-size:.58rem;letter-spacing:.1em}
  /* the caption's city line gets its room back from a slightly smaller Listed-by block */
  html .pl-brokby .bn{font-size:.74rem}
  html .pl-brokby .by{font-size:.58rem}
  html .pl-brokpin{width:28px;height:28px}
  html .pl-cap-meta{font-size:.68rem;letter-spacing:0}
  /* the stat units (SF, /SF/yr) fell to 7.6px beside the phone-size values: 9.8px here */
  html .pl-stats .stat .v .vu{font-size:.7em}
  /* pager: one deliberate row (Prev, numerals centred, Next) with the tally beneath; the page's wrap put NEXT
     alone on a second line at 360 and 375 */
  html .le-pager{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:6px;row-gap:6px}
  html .le-pgbtn[data-pg="prev"]{grid-column:1;grid-row:1}
  html .le-pgnums{grid-column:2;grid-row:1;justify-content:center;margin:0;min-width:0}
  html .le-pgbtn[data-pg="next"]{grid-column:3;grid-row:1;justify-self:end}
  html .le-pgof{grid-column:1 / -1;grid-row:2;flex-basis:auto;text-align:center}
  html .le-pgnum{padding:12px 7px}

  /* ---- listing dossier: the mast's "1 of 111 in view" plate plus two 44px arrows overran the 216px left of the
     CLOSE pill at 360 (the plate started 21px off the left edge). The plate tracks tighter and the arrows close up. ---- */
  html .le-drawer:not(.le-flowing) .le-navwrap{gap:6px}
  html .le-drawer:not(.le-flowing) .le-plate{font-size:.58rem;letter-spacing:.14em}

  /* ---- fixed chrome ---- */
  /* the social rail stands down on phones, the page's own device for its .soc rail (a 44px column on a 360px
     canvas sits on every card and tile; the parent accepts that overlap, Brent's brief does not) */
  html .cta-social{display:none}
  /* the back-to-top disc: 38px, 10px off the edge, clear of the 30px content margin's cards; hidden while the
     board is in view (its cards run to 8px from the frame) the way the page already hides it over About */
  html .totop{width:38px;height:38px;right:10px;bottom:calc(12px + var(--consent-clear,0px))}
  html .totop svg{width:17px;height:17px}
  html .totop::after{content:'';position:absolute;inset:-4px;border-radius:50%}
  html body.le-sec4-inview .totop{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)}

  /* ---- team: the parent's phone move, two-row portrait cards. 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 icon row, then a role slot
     reserved at two lines so every card in a row is the same height ---- */
  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}
  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}
  /* three 44px hits in a 106px column (44 + 44 + 44 - 27 of overlap = 105px); the glyphs sit 35px apart as on desktop */
  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)}
  /* an odd last card centres itself, as the desktop bench's short final row does */
  html .tb-card:last-child:nth-child(odd){grid-column:1 / -1;width:calc(50% - 6px);justify-self:center}
  html .tb-head{text-wrap:balance}

  /* ---- contact: the dark tile's head balances its two lines so "for." never stands alone (375 to 430) ---- */
  html .ct-card .ct-head{text-wrap:balance}

  /* ---- footer: the copyright takes its own line; the three links share the next with their separators;
     the separator that would dangle at the end of line one stands down ---- */
  html .ft-brand{padding:12px 0;margin:-12px 0}
  /* room under the legal row so the back-to-top disc parks below it at the page end, not beside Careers */
  html .ft{padding-bottom:calc(74px + var(--consent-clear,0px))}
}

/* ======================= round 2 (council fixes) ======================= */
@media (max-width:480px){

  /* ---- nav ---- */
  /* the strap is a button: 44.6px hit area (8.64px type + 18 + 18), the visible 16px row unchanged */
  html .mnav-sub .plat-biz{padding:18px 0 18px;margin:-18px 0 -18px}
  /* one left edge. The bar's 14px inset put the lockup at 44 and the strap at 45 while the eyebrow, headline,
     chip, metrics and every section below share the 30px line. The sprite's L stem starts at column 0 of the
     lockup box (measured), so the box, the strap's A and the headline's R now all sit on 30; MENU's 12px inner
     padding ends its glyphs 12px inside the 330 edge as before, the hit box now reaches the edge */
  html .mnav-bar{padding:0}
  html .mnav-sub{padding-left:0}

  /* ---- hero ---- */
  /* the instrument's sentence: at 393 to 430 it broke "in" off the end of line one and left the period alone
     with the select on line two. A 300px measure sets "I'm looking to lease any property / in any market."
     and leaves 360 and 375 exactly as they were (their column is already under 300) */
  html .hr-sent{max-width:300px}

  /* ---- consent: the three action labels come up to the 9px floor (.6rem = 9.6px); still one 44px row at 360 ---- */
  html .sf-consent-actions button{font-size:.6rem}

  /* ---- board cards: the stat cells. The hero value ("$2.90M" at 20.96px) measured 70px in a 69px cell and the
     browser ellipsised it to "$2.90..." after the page's fitStatsRow had already measured (before the web font
     settled). 7px cell padding instead of 10 gives each cell 6px more; clip instead of ellipsis so a residual
     tenth of a pixel never prints as three dots while the page's JS still shrinks anything larger ---- */
  html .pl-stats .stat{padding:0 7px}
  html .pl-stats .stat:first-child{padding-left:7px}
  html .pl-stats .stat:last-child{padding-right:7px}
  html .pl-stats .stat .v{text-overflow:clip}
  /* the flag's VIEW AERIAL toggle (the page's own touch device, shown under hover:none) is a 23px-tall text button:
     a pseudo element gives it a 45px hit band over its own width; nothing drawn changes */
  html .pl-satbtn{position:relative}
  html .pl-satbtn::after{content:'';position:absolute;inset:-11px 0}

  /* ---- team: the bench grid aligned its items to start (page line 8048), so two cards in one row could end
     12px apart when their roles wrapped differently (375: Aubrey two lines, Nick three). Cards stretch to the
     row and the dark plate grows to fill, so every row has one bottom edge ---- */
  html .tb-body{align-items:stretch}
  html .tb-cap{flex:1 1 auto}

  /* ---- listing dossier ---- */
  /* the photo film: five 74px thumbs at an 8px gap needed 402px in a 312px strip, so the fourth was sliced and
     the fifth was off screen. Five equal cells (56x35 at 360, 70x44 at 430) with nothing clipped; a pseudo
     element gives each thumb a 45px-tall hit area without changing what is drawn */
  html #leDrawer .le-film{flex-wrap:nowrap}
  html #leDrawer .le-film > button{flex:0 0 calc((100% - 32px) / 5);width:auto}
  html #leDrawer .le-film > button img{width:100%;height:auto;aspect-ratio:8 / 5}
  html #leDrawer .le-film > button::before{content:'';position:absolute;inset:-5px 0;z-index:1}
  /* section 07 More to see: three 103px tabs with nowrap plus ellipsis printed MORE FROM... / MORE FROM... /
     MORE FLEX ... so two of the three were indistinguishable. Each label wraps to two centred lines and the
     cell stays a 44px target */
  html .le-drawer:not(.le-flowing) .le-morebar .pl-seg{height:auto;min-height:44px;line-height:1.25;white-space:normal;
    padding:8px 6px;font-size:.62rem;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;text-align:center}
  /* the request form's mast: "BACK TO 916 N. PAT" was hard cut mid word (the address is a nowrap <b> flex child,
     so the button's ellipsis never applied) next to "VIEW CLEMMON...". The two links take one 44px row each and
     the <b> carries the ellipsis itself in case a name is still too long */
  html #leDrawer.le-flowing .le-mast{flex-wrap:wrap;row-gap:0}
  html #leDrawer .le-back-far{max-width:100%;flex:1 1 100%;min-height:44px}
  html #leDrawer .le-viewlst{max-width:100%;margin-left:0}
  html #leDrawer .le-back-far b, html #leDrawer .le-viewlst b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

  /* ---- contact drawer: the Google Maps, Apple Maps and Waze glyphs were 18 to 20px wide targets in an 18px gap.
     Each anchor pads to 44 to 46px wide; the glyphs still sit 18px apart ---- */
  html #panel-contact .dv:has(a.dw-map){gap:0}
  html #panel-contact .dv a.dw-map{padding:0 14px;margin:0 -5px;min-height:44px}

  /* ---- footer legal: Careers measured 38px wide. 4px of padding each side, pulled back with margin, so the
     visual spacing holds and every link is at least 46px wide ---- */
}

/* ---- the narrowest phone (360). Its board column is 256px, and a card's caption row (city + Listed-by + two
   pins) has a 270px minimum, so 1fr stretched to 270 and every card ran 14px past the Ask box, the filters and
   the pager. A 15px board inset gives the column 270px: body, Ask, grid, cards and pager all sit 45 to 315
   inside the frame and the tab strip still runs frame to frame (its margin reads the same variable). ---- */
@media (max-width:374px){
  html .lx-in{--lxpadx:15px}
  /* the eyebrow ended 2px from the content edge; .17em tracking gives it about 10px */
  html .hr-eyebrow{letter-spacing:.17em}
  /* both row 1 roles wrap to three lines at 360 while the others take one or two: reserve three lines on every
     card so the whole bench keeps one row height */
  html .tb-role{min-height:calc(3 * 1.3 * .58rem)}
}

/* ---- the shortest phones (360x640 class, 660px tall or less): the strap under the bar stands down (the family chip
   200px below repeats the words) and the instrument's gap closes to 18px so the submit lands above the page's own
   one-line phone consent strip (58px). Without them a 360x640 fresh visit puts the submit bottom at 594 against a
   banner top of 572; with them 541 against 572. The iPhone SE class (375x667) no longer needs this block: with the
   nav and hero lines lifted its submit ends at 576 and the strip starts at 599, so it keeps its strap like every
   other phone. Brent may delete this block whole if the 640px class is out of scope. ---- */
/* (the short-phone consent stopgap that hid the nav strap under 660px tall was removed 9/2: the page's one-line consent strip made it dead weight) */

/* ======================= round 2 close (creative director's head fixes) ======================= */
@media (max-width:480px){
  /* family drawer head: "One company. Three ways we / work." left "work." alone on line two at 375 to 430. The
     italic phrase is one unit, so it moves to line two whole: "One company." / "Three ways we work." */
  html #famTitle .em{display:inline-block}
  /* request drawer head (opened from the contact card): "The right property is not always on / the market."
     orphaned "on" at the end of line one. The italic phrase stays together: "The right property is not always" /
     "on the market." The owners variant "An address is enough." is a single line and is unchanged */
  html #leDrawer .rq-claim .em2{display:inline-block}
}

/* ======================= round 2 close (creative director's must fixes) ======================= */
@media (max-width:480px){
  /* (footer padding and the phone back-to-top hide were removed 9/2: Brent ruled the phone footer matches the parent exactly, disc included; the page's phone block keeps the legal line 60px clear of the disc) */

  /* ---- board cards, the badge flag on phones under 430: RECENTLY UPDATED | LAND | AERIAL needs about 242px and the
     flag has 212px at 360, so the plate wrapped with AERIAL alone at the bottom left of a full-width plate, which
     read as a wrap accident. Now a deliberate two-row tag: JUST LISTED | RETAIL over a hairline over AERIAL, 44px
     tall, the same on every badge card at a given size. The page's .pl-satbtn padding-left:12px!important keeps
     the 12px inset, so AERIAL lines up under the badge text. At 430 every flag is one line and stays so ---- */
  @media (max-width:429px){
    html #lxGrid .pl-flag:has(.pl-fresh){row-gap:0;padding-bottom:0}
    html #lxGrid .pl-flag:has(.pl-fresh) .pl-fsep-sat{display:none}
    html #lxGrid .pl-flag:has(.pl-fresh) .pl-satbtn{flex:0 0 100%;justify-content:flex-start;margin:5px 0 0;padding:7px 0;
      border-top:1px solid rgba(43,44,45,.14)}
  }

  /* ---- listing dossier hero caption at 360: "WINSTON-SALEM, NC · FORSYTH COUNTY" at 11.2px tracked 2px needs about
     300px in the 280px caption and dropped COUNTY alone on a third line. 10.56px tracked .12em is one 15px line;
     375 and up already fit and keep the page's size ---- */
  @media (max-width:374px){
    html #leDrawer .le-locline{font-size:.66rem;letter-spacing:.12em}
  }
}