/* =========================================================================
   Components — the page's own styles, in one file.

   This replaces layout.css, shell.css and custom.css, which were the comp, the
   full-bleed shell and a running log of client changes. They are merged in the
   order they used to load, so the cascade is unchanged; only rules and
   declarations that never win on any element, state or width were dropped.

   Load order: tokens -> fonts -> base -> components -> responsive
   ========================================================================= */

/* =========================================================================
   THE PAGE — component styles  (was layout.css)
   ========================================================================= */
.tr-page{
  overflow: hidden;
}
.tr-utilitybar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px var(--gutter);
}
.tr-hero{position:relative;height:700px;overflow:hidden;background:var(--tr-black)}
.tr-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.26);transform-origin:center}
.tr-hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--tr-black-rgb), .7) 0%,rgba(var(--tr-black-rgb), .52) 38%,rgba(var(--tr-black-rgb), .16) 74%,rgba(var(--tr-black-rgb), .04) 100%);pointer-events:none}
.tr-header{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutter);background:var(--tr-white);border-bottom:1px solid rgba(var(--tr-black-rgb), .1)}
.tr-header__logo{
  height: auto;
  display: block;
}
.tr-header__nav{
  display: flex;
  font-weight: 700;
  color: var(--tr-black);
}
.tr-header__actions{display:flex;gap:10px;font-size:14px;font-weight:700}
.tr-header__phone{background:var(--tr-red);color:var(--tr-white);padding:11px 18px;border-radius:4px}
.tr-hero__content{position: absolute;inset: 0;display: flex;flex-direction: column;justify-content: center;gap: 24px;padding: 92px var(--gutter) 0}
.tr-hero__kicker{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tr-gold);
}
.tr-hero__title{
  margin: 0;
  font-size: clamp(34px,calc(4.1463vw + 19.073px),68px);
  line-height: 1.02;
  font-weight: 800;
  color: var(--tr-white);
  text-wrap: pretty;
}
.tr-hero__lede{display:flex;flex-direction:column;gap:14px;max-width:660px}
.tr-herosearch{display:grid;grid-template-columns:1fr 1fr auto;background:var(--tr-white);border-radius:4px;overflow:hidden;box-shadow:0 18px 44px rgba(var(--tr-black-rgb), .42)}
.tr-herosearch__field{padding:13px 16px 12px;border-right:1px solid rgba(var(--tr-black-rgb), .12);min-width:0}
.tr-herosearch__label{display: block;font-size: 13px;font-weight: 800;letter-spacing: .1em;text-transform: uppercase;color: var(--tr-red);margin-bottom: 3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.tr-control{display:block;width:100%;border:0;background:transparent;padding:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:600;line-height:1.45;color:var(--tr-black);appearance:none;cursor:pointer}
.tr-herosearch__submit{
  border: 0;
  border-radius: 0;
  align-self: stretch;
  padding: 16px 22px;
  background: var(--tr-red);
  color: var(--tr-white);
  font-family: 'Plus Jakarta Sans',sans-serif;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.tr-hero__note{margin:0}
.tr-stats{
  display: grid;
  background: var(--tr-black);
  color: var(--tr-white);
}
.tr-stats__cell--ruled{
  padding: 30px 28px;
}
.tr-stats__number{font-size: 42px;font-weight: 800;letter-spacing: -.04em;line-height: 1;text-align: center}
.tr-stats__label{
  color: var(--tr-white);
  margin-top: 5px;
  text-align: center;
}
.tr-stats__cell--plain{padding:30px 28px}
.tr-stats__number--light{font-size: 42px;font-weight: 800;letter-spacing: -.04em;line-height: 1;color: var(--tr-white);text-align: center}
.tr-intro{padding: 66px var(--gutter);display: grid;grid-template-columns: minmax(0,400px) minmax(0,1fr);gap: 56px;align-items: start;background-color: var(--tr-white)}
.tr-intro__aside{display:flex;flex-direction:column;gap:22px;min-width:0}
.tr-intro__frame{position:relative;padding:0 0 22px 22px;min-width:0}
.tr-intro__portrait{
  position: relative;
  width: 100%;
  display: block;
  border-radius: 4px;
}
.tr-intro__contact{display:flex;flex-direction:column;align-items:center;gap:10px;padding-left:22px}
.tr-intro__phone{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--tr-black);
}
.tr-icon{flex:0 0 auto}
.tr-intro__email{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--tr-black);
}
.tr-intro__body{min-width:0}
.tr-eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tr-gold);
}
.tr-intro__heading{
  margin: 14px 0 16px;
  font-size: clamp(26px,calc(1.4634vw + 20.732px),38px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--tr-black);
  text-wrap: pretty;
}
.tr-intro__p--lead{
  margin: 0 0 14px;
  font-family: Plus Jakarta Sans;
  line-height: 1.6;
  color: var(--tr-text);
  max-width: 62ch;
}
.tr-intro__p{
  margin: 0 0 12px;
  line-height: 1.65;
  color: var(--tr-text);
  max-width: 62ch;
}
.tr-intro__p--last{
  margin: 0;
  line-height: 1.65;
  color: var(--tr-text);
  max-width: 62ch;
}
.tr-creds{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.tr-creds__item{
  display: flex;
  gap: 12px;
  line-height: 1.55;
  color: var(--tr-text);
}
.tr-creds__pending{color:var(--tr-gold-deep);font-weight:700}
.tr-listings{
  padding: 60px var(--gutter);
}
.tr-listings__head{display:flex;justify-content:space-between;align-items:baseline;gap:30px;margin-bottom:24px}
.tr-sectionhead__title{
  margin: 0;
  font-size: clamp(26px,calc(1.4634vw + 20.732px),38px);
  font-weight: 800;
  color: var(--tr-black);
}
.tr-listings__more{
  white-space: nowrap;
}
.tr-cardgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.tr-card{display:flex;flex-direction:column;background:var(--tr-white);text-decoration:none;color:inherit;box-shadow:0 1px 0 rgba(var(--tr-black-rgb), .1)}
.tr-card:hover{box-shadow:0 14px 34px rgba(var(--tr-black-rgb), .18)}
.tr-card__media{position:relative;height:266px;overflow:hidden;background:var(--tr-black)}
.tr-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tr-card__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--tr-black-rgb), .78) 0%,rgba(var(--tr-black-rgb), .18) 42%,rgba(var(--tr-black-rgb), 0) 70%)}
.tr-card__badge{position: absolute;top: 12px;left: 12px;color: var(--tr-white);font-size: 10.5px;font-weight: 800;letter-spacing: .1em;text-transform: uppercase;padding: 6px 10px;background-color: var(--tr-red)}
.tr-card__pricebox{position:absolute;left:16px;right:16px;bottom:13px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tr-card__price{font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--tr-white)}
.tr-card__body{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px}
.tr-card__address{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--tr-black);text-wrap:pretty}
.tr-card__facts{display:flex;gap:16px;font-size:13.5px;color:var(--tr-text)}
.tr-card__fact{white-space:nowrap}
.tr-card__fact-value{color:var(--tr-black)}
.tr-card__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;border-top:1px solid rgba(var(--tr-black-rgb), .1);font-size:12.5px;color:var(--tr-text-muted)}
.tr-card__meta{color: var(--tr-black)}
.tr-card__cta{font-weight: 800;color: var(--tr-red);font-size: 15px}
.tr-card__badge--new{position:absolute;top:12px;left:12px;background:var(--tr-red);color:var(--tr-white);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px}
.tr-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.tr-pillars__tile{
  position: relative;
  overflow: hidden;
}
.tr-pillars__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--tr-black-rgb), .82) 0%,rgba(var(--tr-black-rgb), .55) 45%,rgba(var(--tr-black-rgb), .2) 100%);pointer-events:none}
.tr-pillars__body{position:absolute;top:0;left:0;right:0;padding:26px 26px 28px;color:var(--tr-white)}
.tr-pillars__tile-title{
  margin: 8px 0 6px;
  font-size: 25px;
  font-weight: 800;
}
.tr-pillars__text{margin:0;font-size:15px;line-height:1.5;color:var(--tr-white);max-width:32ch;text-wrap:pretty}
.tr-search{color: var(--tr-white);padding: 64px var(--gutter);background-color: var(--tr-black)}
.tr-search__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.tr-search__heading{
  margin: 14px 0 0;
  font-size: clamp(26px,calc(1.4634vw + 20.732px),38px);
  font-weight: 800;
  color: var(--tr-white);
  text-wrap: pretty;
}
.tr-search__form{display:flex;flex-direction:column;gap:14px}
.tr-search__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tr-field{background:var(--tr-white);border-radius:4px;padding:12px 15px 11px;min-width:0}
.tr-field__label{display: block;font-size: 13px;font-weight: 800;letter-spacing: .1em;text-transform: uppercase;color: var(--tr-red);margin-bottom: 4px}
.tr-search__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.tr-field__input{display:block;width:100%;border:0;background:transparent;padding:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:600;line-height:1.45;color:var(--tr-black);outline:none}
.tr-search__submit{
  border: 0;
  border-radius: 4px;
  padding: 0 34px;
  background: var(--tr-red);
  color: var(--tr-white);
  font-family: 'Plus Jakarta Sans',sans-serif;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.tr-search__submit:hover{background:var(--tr-red-dark)}
.tr-search__popular{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.tr-search__popular-label{
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tr-white);
  margin-right: 4px;
}
.tr-pill{
  padding: 9px 15px;
  border: 1px solid rgba(233,226,212,.3);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tr-reviews{
  padding: 60px var(--gutter);
}
.tr-reviews__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px;gap:30px}
.tr-reviews__all{
  white-space: nowrap;
}
.tr-review{background:var(--tr-white);padding:34px 32px;border-radius:6px;box-shadow:0 16px 40px rgba(var(--tr-black-rgb), .13),0 2px 6px rgba(var(--tr-black-rgb), .07);display:flex;flex-direction:column;gap:16px}
.tr-review__head{display:flex;align-items:center;gap:12px}
.tr-review__stars{
  display: flex;
  gap: 3px;
  font-size: 16px;
  letter-spacing: .06em;
}
.tr-review__source{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tr-text-muted)}
.tr-review__quote{margin:0;font-family:Newsreader,serif;font-size:20px;line-height:1.55;color:var(--tr-text);text-wrap:pretty}
.tr-review__author{font-size:13.5px;font-weight:700;color:var(--tr-black);margin-top:auto;padding-top:6px}
.tr-review__outcome{font-weight:500;color:var(--tr-text-muted)}
.tr-sold{padding: 60px 0 64px;background-color: var(--tr-white)}
.tr-sold__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--gutter);margin-bottom:24px}
.tr-sold__heading{
  margin: 14px 0 0;
  font-size: clamp(26px,calc(1.4634vw + 20.732px),38px);
  font-weight: 800;
  color: var(--tr-black);
}
.tr-sold__nav{display:flex;gap:10px;flex:0 0 auto}
.tr-sold__navbtn{width:44px;height:44px;border:1px solid rgba(var(--tr-black-rgb), .22);background:var(--tr-white);border-radius:50%;color:var(--tr-black);font-size:17px;font-weight:700;cursor:pointer;line-height:1}
.tr-sold__navbtn:hover{background:var(--tr-red);border-color:var(--tr-red);color:var(--tr-white)}
.tr-sold__viewport{
  padding: 6px var(--gutter) 14px;
}
.tr-sold__track{display:flex;gap:20px;will-change:transform}
.tr-sold__card{flex:0 0 318px;scroll-snap-align:start;background:var(--tr-white);border-radius:6px;overflow:hidden;box-shadow:0 12px 30px rgba(var(--tr-black-rgb), .12)}
.tr-sold__media{position:relative;height:214px;overflow:hidden;background:var(--tr-black)}
.tr-sold__badge{position:absolute;top:12px;left:12px;background:var(--tr-black);color:var(--tr-white);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px}
.tr-sold__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.tr-sold__price{font-size:24px;font-weight:800;letter-spacing:-.025em;color:var(--tr-black)}
.tr-sold__facts{font-size:13.5px;font-weight:600;color:var(--tr-text)}
.tr-sold__address{font-size:14px;line-height:1.45;color:var(--tr-text);text-wrap:pretty}
.tr-footer{background:var(--tr-black);color:var(--tr-ondark-text);font-size:14px;line-height:1.7}
.tr-footer__grid{
  display: grid;
  grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap: 48px;
  padding: 64px var(--gutter) 48px;
}
.tr-footer__brand{display:flex;flex-direction:column;gap:18px}
.tr-footer__plate{
  align-self: flex-start;
}
.tr-footer__logo{
  display: block;
}
.tr-footer__name{font-size:18px;font-weight:800;color:var(--tr-white);letter-spacing:.01em}
.tr-footer__strapline{
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}
.tr-footer__social{
  display: flex;
  gap: 10px;
}
.tr-footer__social-link{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-footer__col{display:flex;flex-direction:column;gap:10px}
.tr-footer__heading{
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tr-gold);
  margin-bottom: 6px;
}
.tr-footer__link{color: var(--tr-white);text-decoration: none}
.tr-footer__link:hover{color:var(--tr-white)}
.tr-footer__item{color: var(--tr-white)}
.tr-footer__licence{
  color: var(--tr-white);
}
.tr-subfooter{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 40px;padding:20px var(--gutter);border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:var(--tr-ondark-muted)}

/* =========================================================================
   FULL-BLEED SHELL  (was shell.css)
   ========================================================================= */
/* =========================================================================
   Page shell — turns the 1180px artboard into a full-width page.

   The comp was a 1180px board pinned to a canvas, so the board had a hard
   width and the canvas colour showed around it. Here the section backgrounds
   run edge to edge and the CONTENT inside each one stays in a centred 1180px
   column, which is where the design put it.

   Loaded after layout.css (it overrides it) and before responsive.css.
   At viewports of 1180px and below every rule here resolves to the comp's
   own values, so nothing changes at or below the design width.
   ========================================================================= */
:root{
  --page-max: 1180px;
}
/* The board no longer caps the page. */
.tr-page{
  max-width: none;
  margin: 0;
  width: 100%;
}
/* ---- Content bands -----------------------------------------------------
   Sections that carry the comp's 36px gutter. The side padding grows to
   absorb whatever the viewport has beyond 1180px, so the text column stays
   1108px wide and centred, exactly as drawn.
   max() keeps the comp value at narrow widths, where the second term is
   negative.                                                                */
.tr-utilitybar,
.tr-header,
.tr-hero__content,
.tr-intro,
.tr-listings,
.tr-search,
.tr-reviews,
.tr-sold__head,
.tr-sold__viewport,
.tr-footer__grid,
.tr-subfooter{
  padding-inline: max(
    var(--gutter),
    calc((100% - var(--page-max)) / 2 + var(--gutter))
  );
}
/* ---- Edge-to-edge grids ------------------------------------------------
   Sections whose children run to the board edge with no gutter of their own
   (the stats cells, the three pillar tiles, the red split). Same cap, no
   gutter added, so the band bleeds and the cells stay on the 1180 column.  */
.tr-stats{
  padding-inline: max(0px, calc((100% - var(--page-max)) / 2));
}
/* The pillar tiles are the only capped band with no background of its own;
   without this the page colour reads as a gap beside them. */
.tr-pillars{
  background: var(--tr-page);
}

/* =========================================================================
   CLIENT CHANGES SINCE THE COMP  (was custom.css)
   ========================================================================= */
/* =========================================================================
   Post-comp changes — requested after the design was signed off.

   Everything here is a deliberate departure from Team Raju Home_09-23.html.
   Kept in its own file so layout.css stays a faithful record of the comp and
   anyone can see at a glance what moved since.

   Loaded after shell.css, before responsive.css.
   ========================================================================= */
/* ---- Credentials list (intro section) ----------------------------------
   Was: hairline rules above the list and under every row, with a 7px red
   dot as the marker.
   Now: no rules, and a brand-red check in the house icon style (16px,
   feather stroke, #C1121F) in place of the dot.                           */
.tr-creds{
  border-top: 0;
}
.tr-creds li{
  border-bottom: 0;
  padding: 9px 0;          /* was 12px 0 — the rules were carrying some of
                              the spacing, so it tightens slightly without
                              them */
}
.tr-creds__icon{
  flex: 0 0 auto;
  color: var(--tr-red);
}
/* ---- Footer logo --------------------------------------------------------
   Was: the full-colour lockup on the dark footer, 200px wide.
   Now: the reversed lockup supplied by the client, keyed off its black
   background so it composites on Charcoal instead of sitting in a black
   box, and sized up to 260px because this version carries the tagline
   under the wordmark, which needs the extra width to stay legible.      */
.tr-footer__plate{
  /* the comp sat the logo on a white rounded chip, because the only artwork
     was the dark full-colour lockup and it needed a light backing to read on
     the charcoal footer. The reversed lockup does not, so the plate goes. */
  background: none;
  padding: 0;
  border-radius: 0;
}
.tr-footer__logo{
  /* 260 -> 200. At 260 the lockup was the widest thing in the column by a
     long way, so the HomeSmart/HSI row read as a short, ragged line hanging
     under it. 200px puts the two within ~40px of each other and the right
     edge of the column stops looking unfinished.                          */
  width: 200px;
  height: auto;
}
/* ---- Eyebrow labels, selected ------------------------------------------
   Was: Gold on all four eyebrow kickers.
   Now: brand red on three of them — the hero kicker, "Meet the team" and
   "Recent closings". "Detailed search" keeps Gold: it is the same component
   but sits on the dark band, where red drops to 3.00:1 and gold holds
   10.82:1.

   On the two light-background labels this is a contrast GAIN: gold measures
   1.73:1 on white and was failing outright. Red is 6.22:1 — AA.
   The hero kicker is the trade-off — see the note in the handover.        */
.tr-eyebrow--red{
  color: var(--tr-red);
}
/* ---- Header navigation --------------------------------------------------
   The comp set these as <span>. They became real <a> so the mobile drawer and
   keyboard navigation work, which handed them the global link red from
   base.css. Put them back to the black the comp had them in; red is reserved
   for the phone CTA beside them, and a bar of seven red links competes with
   it. Hover takes the red instead, so the affordance is still there.      */
.tr-header__nav a{
  color: var(--tr-black);
}
.tr-header__nav a:hover,
.tr-header__nav a:focus-visible{
  color: var(--tr-red);
}
/* ---- Footer strapline ---------------------------------------------------
   Was: the on-dark body grey. Now pure white, at the client's request.
   21.0:1 on the rich black.                                              */
.tr-footer__brand p{
  color: var(--tr-white);
}
/* ---- Testimonials ------------------------------------------------------
   Was: white section, "All reviews" sitting in the head beside the heading.
   Now: the same grey band as Featured listings, which also gives the white
   testimonial cards an edge to sit against instead of white on white; and
   the link moved below the cards, right-aligned.                         */
/* (the testimonials band's colour is set further down — it is black now) */
.tr-reviews__cta{
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}
/* ---- Quick-search pills -------------------------------------------------
   Was: transparent, hairline border, on-dark grey label. Then Gold, then pure
   yellow, then solid brand red with a white label.
   Now: solid Gold, no visible border, black label — settled after seeing it
   against the new #001722.

   The reason is hierarchy, not taste. The primary action in this band is the
   red "Search listings" button. While the pills were red too, five red things
   sat in one band and the filters carried the same weight as the button that
   submits the form. Gold demotes them to what they are — shortcuts — and lets
   the button own the band.

   It is also the better pairing on the new black: Gold sits at hue 46 and
   #001722 at 199, very nearly opposite, so warm-on-cool does the separating.

   Rest is black on Gold: 10.62:1, AAA — the best this component has measured.
   Hover takes the brand red with a white label, 6.22:1, AA, which is the
   comp's own pill hover restored. Red stays in the band as the ACTION colour
   without being there at rest.

   The border is kept at 1px and set to the fill colour rather than removed, so
   the chip's box does not change size between this and any future variant.

   The "Popular" label beside them is already white (.tr-search__popular-label) and stays that
   way — a gold label next to gold chips would be a wash.

   The comp's own .tr-pill:hover was removed from layout.css. It sat at the same
   specificity as the rules below and only lost on source order, which meant two
   rules quietly competing for one component. custom.css owns the pill
   outright.                                                              */
.tr-pill{
  background: var(--tr-gold);
  border-color: var(--tr-gold);
  color: var(--tr-black);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.tr-pill:hover,
.tr-pill:focus-visible{
  background: var(--tr-red);
  border-color: var(--tr-red);
  color: var(--tr-white);
}
/* ---- Outline buttons ----------------------------------------------------
   "More listings" and "All reviews" were plain red text links. Now buttons:
   white fill, red border, red label, inverting to a solid red fill on hover.
   Red on white is 6.22:1 and white on red is 6.22:1, so both states are AA.

   The padding gives a 45px control, which clears the 44px touch minimum
   without a separate mobile rule. Type is left as each one had it — "More
   listings" is uppercase 800, "All reviews" is sentence case 700 — see the
   handover note.                                                          */
.tr-btn-outline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--tr-white);
  border: 1px solid var(--tr-red);
  border-radius: var(--tr-radius-control);
  color: var(--tr-red);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tr-btn-outline:hover,
.tr-btn-outline:focus-visible{
  background: var(--tr-red);
  border-color: var(--tr-red);
  color: var(--tr-white);
}
/* ---- Agency credit ------------------------------------------------------
   A publisher line closing the footer, below the legal row. Deliberately the
   quietest thing on the page: it should be findable, not competing with the
   client's own copyright immediately above it.

   Set in pure white at the client's request: 18.69:1 on the rich black.   */
.tr-credit{
  padding: 14px var(--gutter) 20px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12px;
  letter-spacing: .01em;
  text-align: center;
  color: var(--tr-white);
}
.tr-credit__link{
  color: var(--tr-white);
  font-weight: 700;
  text-decoration: none;
}
.tr-credit__link:hover,
.tr-credit__link:focus-visible{
  color: var(--tr-gold);
}
/* ---- CTA type size ------------------------------------------------------
   Every call-to-action on the page set to 18px, at the client's request. They
   were drawn at four different sizes — the phone link 14, the two form buttons
   16, the two outline buttons 15, the quick-search pills 13 — so this also
   makes them consistent with each other for the first time.

   Weight, case and colour are left exactly as each one had them: only the size
   moves. line-height is set to 1.2 alongside, because a couple of these
   inherited a line-height in PIXELS from the comp, which would have clipped
   the taller text instead of growing with it.

   Not included, because they are not CTAs: the carousel's back/forward arrows
   (icon controls), the footer social icons, and the listing cards, which are
   links wrapping a whole card rather than buttons.                         */
.tr-header__actions > a,          /* 720-840-7464          was 14px */
.tr-herosearch button,            /* Get started           was 16px */
.tr-search__submit,               /* Search listings       was 16px */
.tr-pill,                         /* the six quick searches was 13px */
.tr-btn-outline{                  /* More listings / All reviews was 15px */
  font-size: 18px;
  line-height: 1.2;
}
/* The two had never matched: "More listings" was uppercase 800 with .1em of
   tracking and "All reviews" was sentence-case 700 with none — one component,
   two designs. They now share the uppercase treatment. */
.tr-btn-outline{
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .1em;          /* 1.8px at 18px */
}
/* ---- Trust strip --------------------------------------------------------
   The top bar: brokerage, location, licence on the left; languages on the
   right. Was 12.5px / 600, with the items run together in one string and
   separated by middle dots.

   Now 18px / 800, and the dots are gone — each item is its own <span> and the
   separator is a real 3px white rule. The rule is exactly as tall as the text
   line rather than a floating glyph, and it stays white on the right-hand
   group even though that group's text is Gold.

   The markup changed for this: index.html now wraps each item in a <span>
   inside .tr-trust. It is the only structural edit made to the comp's markup
   for a styling request.                                                   */
.tr-utilitybar{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.tr-trust{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.tr-trust > span{
  display: inline-flex;
  align-items: center;
}
/* The rule is drawn INSIDE the item it follows, not as the left border of the
   next one. Same picture on a line that fits, but it matters when the strip
   wraps on a phone: the rule is glued to the end of its own item, so it can
   never fall to the start of the next line on its own. */
.tr-trust > span:not(:last-child)::after{
  content: "";
  width: 3px;
  height: 1.2em;
  margin: 0 16px;
  flex: 0 0 auto;
}
/* ---- Stats band (the trust strip below the hero) ------------------------
   20 Years in Atlanta / 8 Towns covered / 3 Languages / 5.0 Google rating.

   The LABELS go from 14px / 600 to 18px / 800, matching the trust strip at the
   top of the page. The four big numbers are left alone at 42px / 800 — they
   are the strip's headline and shrinking them to 18px would invert the
   hierarchy.

   Targeted as the last child of each cell rather than by the lifted class, so
   it holds if a cell is ever re-ordered.                                   */
.tr-stats__cell > :last-child{
  font-size: 18px;
  font-weight: 800;
}
/* ---- Stats band dividers -------------------------------------------------
   Was: a 1px hairline at 16% opacity running the full height of the cell,
   which read as faint grey on the black.
   Now: a 3px white rule, inset from the ends rather than edge to edge — the
   same weight and colour as the rules in the trust strip.

   Drawn as pseudo-elements, not borders, because a border always spans the
   whole box and cannot be shortened. Each cell carries both:

     ::after   the VERTICAL rule on its right edge, inset 26px top and bottom
     ::before  the HORIZONTAL rule on its bottom edge, inset 28px either side

   Both are hidden by default and switched on per breakpoint — vertical only at
   4-up, one of each at 2-up, horizontal only at 1-up. The per-breakpoint half
   of that lives in responsive.css.

   The comp's own 1px border is zeroed here. The fourth cell was given its own
   borderless class in the comp precisely so the band does not end in a rule at
   its right edge; :not(:last-child) preserves that.                        */
.tr-stats__cell{
  position: relative;
  border-right: 0;
}
.tr-stats__cell::before,
.tr-stats__cell::after{
  content: "";
  position: absolute;
  display: none;
  background: var(--tr-white);
}
.tr-stats__cell::after{            /* vertical rule, 78px of a 130px cell */
  top: 26px;
  bottom: 26px;
  right: 0;
  width: 3px;
}
.tr-stats__cell::before{           /* horizontal rule, inset from both sides */
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 3px;
}
/* 4-up: a vertical rule between cells, none after the last */
.tr-stats__cell:not(:last-child)::after{ display: block; }
/* ---- Header menu size ---------------------------------------------------
   The seven nav links go from 14px to 18px. Set on the nav rather than on the
   links so the drawer inherits it on mobile too.

   It was briefly 18px, but 18px does not fit: the header content column is
   capped at 1108px, and the logo (210) + seven links at 18px (728) + the phone
   button (170) come to exactly 1108. The bar filled to the millimetre and the
   only way to make room was to squeeze the gap between links from 22px to
   12px, which made the menu read as one run-on string.

   16px is the size that fits with the spacing intact: the links come to 541px,
   which leaves enough for a 20px gap — near the comp's own 22px — and still
   puts ~30px between the logo and "Buyers" and between "Market Insights" and
   the phone button.

   Below 1180px the hamburger takes over, so this size only applies to the
   desktop bar — see responsive.css.                                       */
.tr-header__nav{
  font-size: 16px;
  gap: 20px;
}
/* ---- Pillar tiles: photographs removed ----------------------------------
   The three tiles (01 Buyers / 02 Sellers / 03 Land Investment) were a
   photograph with a dark gradient scrim over it and white type on top. The
   photographs are gone at the client's request.

   The tile takes the rich black the scrim was fading from, so the white type
   keeps the same 18.69:1 it had at the top of the scrim. The scrim itself is
   switched off: a black-to-transparent gradient over black either does nothing
   or, worse, lets the page colour through at the bottom of the tile and takes
   the type with it.

   Geometry is untouched — the tiles are still 360px and the band still caps to
   the 1180 column, so nothing else on the page moves.                      */
.tr-pillars__tile{
  background: var(--tr-black);
}
.tr-pillars__tile > .tr-pillars__scrim{     /* the scrim */
  display: none;
}
/* ---- Footer columns -----------------------------------------------------
   Quick links / Services / Contact: every line in the three columns goes to
   16px, headings included. The column headings and "Licensed in Georgia"
   carried their own 13px and need saying explicitly.                       */
.tr-footer__col{
  font-size: 16px;
}
.tr-footer__col .tr-footer__licence{
  font-size: 16px;
}
/* ---- "Meet the team" body copy ------------------------------------------
   The three paragraphs go 16px -> 18px and the six credentials 15px -> 18px,
   so the whole right-hand column is one size.

   The check icon's 4px nudge was set to centre a 16px glyph on a 15px/1.55
   line. The line is 27.9px now, so the nudge goes to 6px or the icon sits
   high against the first word.                                             */
.tr-intro__body p{
  font-size: 18px;
}
.tr-creds li{
  font-size: 18px;
}
.tr-creds__icon{
  margin-top: 6px;
}
/* ---- Detailed-search lede -----------------------------------------------
   "Live FMLS data. The same feed Raju works from, no account needed." was
   removed from the markup at the client's request. Its rule is gone with it;
   the heading now stands on its own above the field grid.                  */
/* ---- Display headings: tracking -----------------------------------------
   The comp set the hero H1 at -.035em, the section H2s at -.03em and the three
   pillar H3s at -.02em. Negative tracking on all of them, and at 68px the
   headline read as squeezed.

   Now +.04em across every heading on the page, at the client's request.
   Negative letter-spacing also closes the WORD gaps — the space character
   takes the same tracking as every other glyph — so going positive opens both
   at once; the word-spacing below adds a little more on top of that.

   .tr-h1 / .tr-h2 are the semantic classes the comp put on these elements and
   never styled. .tr-pillars__tile-title is the pillar tile title, which has no semantic class.
   Together these are every h1, h2 and h3 in the document. The listing and
   review card titles are divs, not headings, and are left alone.

   One consequence had to be handled. At .04em the hero headline no longer fits
   the comp's own line break inside a 760px box: it went to three lines,
   "Know the town / before you buy / the house.", with 213px of the box unused
   because the break landed badly. 810px is the smallest width that restores
   the comp's two lines, "Know the town before / you buy the house." — 805px of
   it used, well inside the 1108px hero column. The measure grows; the design's
   line break survives.                                                     */
.tr-h1,
.tr-h2,
.tr-pillars__tile-title{
  letter-spacing: .04em;
}
.tr-h1{
  word-spacing: .04em;
  max-width: 810px;      /* was 760px — see above */
}
.tr-h2,
.tr-pillars__tile-title{ word-spacing: .03em; }
/* ---- The all-caps heading -----------------------------------------------
   "FIND YOUR HOME IN NORTH ATLANTA" is the only heading set in capitals, and
   the caps are literal in the markup rather than text-transform, so nothing in
   the cascade knows to treat it differently. It carried its own +.02em while
   the other headings were still negative. Now that every heading is at +.04em
   it no longer needs a rule of its own — capitals want the most space and
   .04em gives it that. Kept as a note rather than a declaration.

   If the caps ever need to run looser than the rest, this is where that goes:
   .tr-search .tr-h2{ letter-spacing: .06em; }                              */
/* ---- Google Reviews badge (stats strip, fourth cell) --------------------
   Supplied as assets/img/"google review.jpg" — a flat JPEG on a white field,
   which would have put a white rectangle in the middle of the black band. It
   was keyed to transparency the same way the footer logo was, but against a
   WHITE matte rather than a black one: alpha = 1 - min(R,G,B), then the colour
   un-premultiplied back out of it.

   One extra step. Google's own letterforms and the five stars are saturated
   and keep their exact brand colours, which tokens.css says they must. The
   word "Reviews" is near-neutral dark grey and would have disappeared on the
   band, so every pixel with a saturation under 45 was repainted white. The
   result is assets/img/google-reviews.webp, 348x140 with an alpha channel.

   It replaces the "Google rating" text label under the 5.0 — the badge says
   the same thing with more authority, and the alt text carries it for anyone
   who cannot see it.                                                       */
.tr-stats__badge{
  display: block;
  width: min(120px, 100%);
  height: auto;
  margin: 8px auto 0;
}
/* The badge makes its cell taller than the other three, which left them with
   their number and label pinned to the top and dead space underneath. Each
   cell now centres its own contents vertically, so every group sits in the
   middle of the band instead of hanging from the top of it.

   Centring alone would have cost the row its shared baseline: the fourth
   group is 99px tall against the others' 70px, so centring lifts its "5.0"
   15px above the rest. The three text labels therefore carry a min-height
   that makes their group the same 99px, which puts every number back on one
   line AND keeps every group centred. The extra space sits under the label,
   where there is nothing to see.

   52px = the label's own 23px plus the 29px the badge block adds. If the
   badge is ever resized, this number moves with it. */
.tr-stats__cell{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tr-stats__cell > div:last-child{   /* the text labels, not the badge <img> */
  min-height: 52px;
}
.tr-intro__aside img[class*="tr-intro__portrait"]{
  box-shadow: 0 2px 6px   rgba(var(--tr-black-rgb), .16),
    0 18px 44px rgba(var(--tr-black-rgb), .34);
}
.tr-intro__aside a{
  font-size: 18px;
}
/* ---- Eyebrow labels: size ------------------------------------------------
   The kickers are not body copy, and now that body copy is 18px they were
   sitting below it at 16px — a label reading smaller than the paragraph it
   introduces. They go to 20px:

     .tr-hero__kicker   the hero kicker, "North Fulton · Forsyth · Gwinnett"
     .tr-eyebrow   "Meet the team", "Recent closings", "Live FMLS listings"
     .tr-footer__heading   the footer column heads, Quick links / Services / Contact

   Tracking is set in em on all of them, so it scales with the size and the
   labels keep their proportions.

   "Popular" beside the quick-search pills goes to 18px rather than 20px: it
   labels a row of controls rather than heading a section, and it sits on the
   same line as the pills.

   Not changed: the listing card locality (14px) and the pillar numbers 01/02/03
   (12.5px). Both are in-card marks rather than section kickers.            */
.tr-hero__kicker,
.tr-eyebrow{
  font-size: 20px;
}
.tr-footer__col .tr-footer__heading{
  font-size: 20px;               /* was 16px, set when the columns were sized */
}
.tr-search__popular-label{
  font-size: 18px;               /* "Popular" */
}
/* ---- Header CTA ---------------------------------------------------------
   Was the bare phone number, "720-840-7464". Now "Call Raju" with the same
   phone icon the portrait block uses, and the same tel: href behind it.

   Two reasons the label reads better than the number. A number states a fact
   and leaves the visitor to work out what to do with it; "Call Raju" names the
   action, and on this site the action is the whole proposition — the copy two
   screens down promises an answer on a Saturday rather than a voicemail on
   Monday. And it is the one place on the page where the client's own name can
   do some work.

   The icon earns its place now that the number is gone: without it a red
   button could be any CTA, and the glyph says "phone" before the label is
   read. 16px, currentColor, so it inverts with the button.

   The trade-off, stated plainly: the number is no longer visible anywhere in
   the header. On a phone that costs nothing — the button dials. On a desktop
   some visitors want to read the number off the screen and dial it on their
   handset. If that matters, the number belongs in the trust strip.

   The button also gets narrower, which the header wanted: it had 22px either
   side of the nav and now has more.                                       */
.tr-header__actions > a{
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* ---- Sold rail: restore horizontal scrolling ----------------------------
   The comp's own .tr-sold__viewport sets `overflow: hidden` on this element, and it loads
   after base.css, so it was overriding the `overflow-x: auto` the marquee
   needs. Script could still write scrollLeft, but nobody could swipe or drag
   the rail — on touch it was frozen unless you used the arrows.

   Restated here so the later file wins. The scrollbar stays hidden (base.css
   handles the WebKit pseudo-element and `scrollbar-width`).               */
.tr-sold__viewport{
  overflow-x: auto;
  overflow-y: hidden;
}
/* ---- Footer: red rule removed -------------------------------------------
   The comp opened the footer with a 3px brand-red rule across the top of
   .tr-footer__grid. Removed at the client's request; the footer now meets the
   band above it on the black alone.                                        */
.tr-footer__grid{
  border-top: 0;
}
/* ---- Properties sold: band padding --------------------------------------
   Was 60px top / 64px bottom. Eased to 44 / 48 — a little tighter top and
   bottom, keeping the comp's slight bias toward the bottom so the band still
   sits down on the footer rather than floating between the two.            */
.tr-sold{
  padding-top: 44px;
  padding-bottom: 48px;
}
/* ---- Pillar tiles: 2px white borders -------------------------------------
   With the photographs gone the three tiles were three identical black
   rectangles with no gap between them, so they read as one solid band rather
   than as 01 / 02 / 03. A 2px white border round each one separates them —
   4px of white on the seams where two borders meet.

   box-sizing is set here because this project has NO global border-box: the
   comp was exported with explicit widths and heights, and switching the whole
   document to border-box would change its geometry. Without it the border
   would add to the tile's 360px height and to its grid track, pushing the band
   4px wider than the column. Scoped to the tiles, the border draws inside the
   box the comp specified and nothing moves.

   The outer edges sit against the band's own near-white (--tr-page), so in
   practice what reads is the three seams and the top and bottom edges against
   the grey bands above and below.                                          */
.tr-pillars__tile{
  box-sizing: border-box;
  border: 2px solid var(--tr-white);
}
/* ---- Pillar tiles: numbers out, band gets the listings treatment ---------
   The 01 / 02 / 03 kickers are removed, and the band now sits its tiles in a
   padded, gapped grid the way Featured listings does rather than running them
   edge to edge:

     side gutter   the same max(gutter, half the overflow + gutter) the content
                   bands use, so the row lines up with every other section
     gap           26px, the Featured listings card gap
     vertical      44px top and bottom

   The vertical padding started at 60px, matching .tr-listings. It was measured
   as symmetric — 60px from the band's top edge to the title's ink, 60px from
   the tiles to its bottom edge — so the top was reduced by taking BOTH down
   together rather than the top alone, which would have introduced the
   lopsidedness the change was meant to remove. 44px is the same figure the
   Properties sold band uses.

   shell.css had .tr-pillars in the edge-to-edge group precisely because the
   tiles had no gutter of their own; this moves it to the content-band
   treatment instead. Loaded after shell.css, so it wins on source order.

   Consequence worth knowing: the band's own colour (--tr-page, #FCFBF9) now
   shows between and around the tiles, where before the tiles covered it. The
   2px white borders added earlier are nearly invisible against it. See the
   handover note.                                                            */
.tr-pillars{
  padding-inline: max(
    var(--gutter),
    calc((100% - var(--page-max)) / 2 + var(--gutter))
  );
  padding-block: 44px;   /* was 60px — see the note below */
  gap: 26px;
}
/* the h3's 8px top margin existed to clear the number above it */
/* Buyers / Sellers / Land Investment — heading and body both centred, and the
   body's 32ch measure centred under the heading instead of starting at the
   left edge, so each tile reads as one centred block. */
.tr-pillars__tile h3{
  margin-top: 0;
  text-align: center;
}
.tr-pillars__tile p{
  text-align: center;
  margin-inline: auto;
}
/* ---- Pillar tiles: rounded corners ---------------------------------------
   --tr-radius-card, the token for cards and panels, which is what the review
   cards and the sold-rail cards already use. Now that the tiles sit in a
   gapped grid they read as cards, so they take the card radius rather than a
   value of their own.

   .tr-pillars__tile already carries overflow:hidden, so the corners clip cleanly.    */
.tr-pillars__tile{
  border-radius: var(--tr-radius-card);
}
/* ---- Pillar tiles: height ------------------------------------------------
   360px was drawn around a photograph. With the picture and the 01/02/03
   kickers gone the copy occupies 137px of it, leaving nearly two thirds of
   each tile as empty black. 220px gives the text its 26px of top padding and
   a comfortable margin below without the box looking half-empty.

   The tiles cannot size to their content: .tr-pillars__body is positioned absolute, so
   it contributes no height and the box would collapse to nothing. The height
   stays explicit.                                                          */
.tr-pillars__tile{
  height: 220px;
}
/* ---- Google Reviews badge beside the testimonials heading ---------------
   The same artwork as the stats strip, in the "What clients say" head row.
   .tr-reviews__head is already a space-between flex row, so the badge takes the right
   end on its own; align-self overrides the row's baseline alignment, which
   would otherwise try to sit an image on the heading's baseline.

   Narrower than the one in the stats strip — it is beside a 38px heading here
   rather than under a 42px number, and it should not compete with it.      */
.tr-reviews__badge{
  align-self: center;
  flex: 0 0 auto;
  width: min(132px, 40%);
  height: auto;
  margin-left: auto;   /* below 600px the head row wraps (it has to, so the
                          "More listings" button can drop under its heading);
                          this keeps the badge at the right end of whichever
                          line it lands on instead of stranding it on the left */
}
/* ---- Trust strip: languages aligned to the Call Raju button --------------
   "English" now starts on the same vertical as the button's left edge, rather
   than the group being flush right.

   The button is 135px wide and sits hard against the right of the content
   column, so its left edge is always 135px in from that edge. Giving the
   language group that same 135px width — with space-between already pushing it
   right — puts its left edge on exactly the same vertical. The group's own
   content is 236px, so it runs 101px past the column into the right gutter,
   which is empty.

   --tr-cta-width has to match the button. It is content-driven (icon + gap +
   "Call Raju" + padding), so if the label ever changes, re-measure and update
   this one value.

   Below 1310px the gutter is narrower than the 101px of overhang and the last
   word would be clipped, so responsive.css hands the group back to the normal
   right-aligned flow there. The alignment holds on every screen wide enough to
   show it.                                                                  */
:root{
  --tr-cta-width: 135px;
}
.tr-utilitybar .tr-trust--contact{
  flex-wrap: nowrap;
}
/* ---- Pillars: section head ----------------------------------------------
   The band had no heading of its own. Besides leaving the three tiles
   unintroduced, that broke the document outline: "Buyers", "Sellers" and
   "Land Investment" are h3s, so with no h2 above them a screen reader filed
   all three under "Featured listings". They now sit under their own heading.

   The head is a grid item spanning all three columns rather than a separate
   wrapper, so it inherits the band's gutter and the 26px row gap does the
   spacing down to the tiles.

   The h2 takes the same clamp as every other section heading, so it resolves
   to exactly 38px at the design width and scales down with them. .tr-h2 gives
   it the shared tracking and word-spacing.                                 */
.tr-pillars__head{
  grid-column: 1 / -1;
}
.tr-pillars__title{
  margin: 0 0 12px;
  font-size: clamp(26px, calc(1.4634vw + 20.732px), 38px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--tr-black);
  text-wrap: pretty;
}
.tr-pillars__lede{
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--tr-text);
  max-width: 78ch;
  text-wrap: pretty;
}
/* =========================================================================
   HOMESMART HAND-OVER — the client's feedback of 30 Sept 2026.
   Everything below belongs to the move from "Team Raju Real Estate" to
   "Raju Tadigiri, REALTOR®" under HomeSmart.
   ========================================================================= */
/* ---- Trust strip: the languages group is now a single email link --------
   The group used to hold English / Telugu / Hindi and was sized to the width
   of the Call Raju button so its first word lined up with the button's left
   edge. One link does not need that treatment — it is narrower than the
   button, so it simply sits flush right like everything else in the bar.   */
.tr-utilitybar .tr-trust--contact{
  flex: 0 1 auto;
  width: auto;
}
.tr-utilitybar .tr-trust--contact a{
  color: inherit;
  text-decoration: none;
}
.tr-utilitybar .tr-trust--contact a:hover,
.tr-utilitybar .tr-trust--contact a:focus-visible{
  text-decoration: underline;
}
/* ---- Stats strip: two cells ---------------------------------------------
   It has been four, then four again with different numbers. It is two now.

   "51 Homes closed" and "$633K Average sale price" were removed on 20 Oct at
   the client's instruction: five years in the business makes the count read
   as small, and an average sale price sets a ceiling in the mind of anyone
   buying or selling above it. Both were arguments against him.

   What is left says the same thing without a number anyone can measure him
   by: twenty years in the market, and five stars from the people he closed
   for.

   Worth watching: "Properties sold" further down the page still shows
   individual closings, so the count is still inferable by anyone who counts
   the cards. Raised with the client, not yet answered.                     */
.tr-stats{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* ---- Footer compliance: folded into the brand column --------------------
   This used to be a strip of its own between the footer columns and the legal
   row — a fifth band under an already tall footer. The client asked for it
   gone, so the brokerage identity now sits where it belongs, in the brand
   column under his name:

       [his logo]
       Raju Tadigiri, REALTOR®
       Helping families buy, sell and invest across Metro Atlanta, GA.
       [HomeSmart]  [HSI Commercial]
       Brokered by HomeSmart. Part of HSI Commercial, the commercial
       division of HomeSmart.
       [social icons]

   The strapline lost its trailing "Brokered by HomeSmart." — the name appeared
   three times in one column between the strapline, the logo and the
   affiliation sentence. It is said once now, in the sentence, which is also
   the only place that carries the HSI Commercial relationship.

   Equal Housing Opportunity and REALTOR® moved to the legal row. They are
   regulatory furniture rather than branding, and that is where a reader looks
   for them.

   The two marks are sized by eye rather than to a shared height: HomeSmart's
   lockup is 6.5:1 and HSI's is 1.8:1, so matching their heights would leave
   HomeSmart tiny. 160px and 96px give them comparable visual weight, and
   HomeSmart stays well above its 120px minimum.                            */
.tr-footer__brokerage{
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 18px 0 12px;
}
.tr-footer__hs{
  width: 172px;
  height: auto;
  display: block;
}
.tr-footer__hsi{
  width: 103px;
  height: auto;
  display: block;
}
.tr-footer__affil{
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  max-width: 42ch;
}
.tr-footer__affil b{
  font-weight: 700;
}
/* ---- Legal row: the two marks -------------------------------------------
   Equal Housing Opportunity keeps a small house glyph; REALTOR® is set as
   text, which is the permitted form — NAR's block-R logo has its own rules and
   is not ours to redraw.                                                    */
.tr-mark__glyph{
  flex: 0 0 auto;
  vertical-align: -2px;
  margin-right: 2px;
}
/* ---- HomeSmart mark in the trust strip ----------------------------------
   The strip used to open with the word "HomeSmart"; it now opens with the
   mark. This is what puts the brokerage on the page ABOVE the fold, which is
   what the GA advertising requirement is really about, and it costs the
   header bar nothing — that bar is already full.

   152px at the logo's 6.58:1 aspect is 23px tall. That is a little taller than
   the strip's 21.6px line box, so the bar grows by about a pixel — the trade
   for a mark that can actually be read. HomeSmart's stated minimum is 120px;
   this is comfortably above it.

   Interim: when Raju's own logo exists, the intended lockup is his mark
   "by HomeSmart" in the header. This does not pre-empt that — it is the
   brokerage identification, which belongs on every page either way.       */
.tr-trust__hs{
  height: auto;
  display: block;
}
/* ---- Header logo: smaller ------------------------------------------------
   Was 210px wide and 140px tall, and that height set the whole header bar:
   140 + 14px padding top and bottom = 169px of white before the hero began.
   170px brings it to 113px tall and the bar to about 141px — and it frees
   room in a bar that was already full, which the co-branding lockup will
   need when Raju's own mark arrives.                                       */
.tr-header__logo{
  /* 170 -> 150 with the new mark. The old lockup was horizontal at 2.00:1;
     this one is stacked — house over RAJU over TADIGIRI over REALTOR® — at
     1.49:1, so the same width would make it half as tall again and take the
     bar from 114px back to about 142px, undoing the trim the client asked
     for. 150px lands it at 101px tall and the bar at 129px.

     This is the one real trade-off in the swap: the stacked lockup needs
     height to keep "REALTOR®" legible, and the bar needs it not to have any.
     150px is the compromise — see the handover for the other two options.  */
  width: 150px;
}
/* =========================================================================
   Client review, 1 Oct 2026
   ========================================================================= */
/* ---- HomeSmart mark in the trust strip: bigger, and the real artwork -----
   Two changes at once. The file is now the official SVG from the brand kit
   rather than the raster I keyed out of the guidelines PDF, so the strokes
   are drawn at whatever size they are shown at instead of being a downscaled
   bitmap — that alone accounts for most of the "thin" look.

   And it goes 152px -> 190px. The wordmark is light by design, so weight has
   to come from size; there is no bolder cut of it, and recolouring or
   thickening the letterforms would breach their usage rules. The strip grows
   from 41px to about 46px to hold it.                                      */
.tr-trust__hs{
  width: 190px;
}
/* ---- Band rhythm: black and white, no cream -----------------------------
   The cream (#F4EDE5) came out of Featured listings and the testimonials at
   the client's request. The page now alternates the brand black and pure
   white down its whole length:

       hero · stats      black
       Meet the team     white
       Detailed search   black
       Featured listings white
       Buy / Sell /
         Invest          white   (its three tiles carry the black)
       What clients say  BLACK
       Properties sold   white
       footer            black

   Turning the testimonials black means everything sitting directly on that
   band has to be re-checked: the heading was the black type colour and would
   have vanished. The cards are white, so their own contents are untouched.  */
.tr-listings{
  background-color: var(--tr-white);
}
.tr-pillars{
  background-color: var(--tr-white);
}
.tr-reviews{
  background-color: var(--tr-black);
}
.tr-reviews .tr-h2{
  color: var(--tr-white);
}
/* ---- Pillars section head: centred --------------------------------------
   Heading and subline both, with the subline's measure centred under it
   rather than starting at the left edge of a 78ch column.                  */
.tr-pillars__head{
  text-align: center;
}
.tr-pillars__lede{
  margin-inline: auto;
}
/* ---- Listing card: interior rule ----------------------------------------
   The rule above "Single family · Listed by Raju Tadigiri" was black at 10%,
   which read as a pale grey hairline. Now the brand black itself.          */
.tr-card__foot{
  border-top-color: var(--tr-black);
}
/* ---- Listing cards: hairline border ------------------------------------
   A thin black outline with the card radius, which lifts off on hover and
   leaves the raised shadow to do the work instead.

   box-sizing is set here for the same reason it was on the pillar tiles:
   this project has no global border-box, so without it the 1px border would
   add 2px to the card's width and height and push the 2-up grid out.

   The hover takes the border to TRANSPARENT rather than to zero width. Same
   picture, but the box never changes size, so nothing shifts under the
   cursor — a border-width transition would nudge every card by a pixel as
   the mouse crossed it.

   overflow:hidden is needed once there is a radius, or the photograph's
   square corners sit outside the rounded card.                            */
.tr-card{
  box-sizing: border-box;
  border: 1px solid var(--tr-black);
  border-radius: var(--tr-radius-card);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tr-card:hover,
.tr-card:focus-visible{
  border-color: transparent;
}
/* ---- Pure white, everywhere it is white ---------------------------------
   An audit of every light surface turned up three that were not #FFFFFF:

     body          Cream     #F4EDE5  (--tr-canvas) — behind the page, seen
                                       only when a browser rubber-bands past
                                       the end of the document
     .tr-page      Off-White #F6F4F2  (--tr-page)   — the wrapper under every
                                       band, so covered, but there
     trust strip   Off-White #F6F4F2  (--tr-ondark-bright) — the TEXT on the
                                       black strip

   All three are HomeSmart values, so none of them was wrong. But the client
   asked for pure white, so pure white it is: nothing on this page is now a
   near-white pretending to be white. The strip's text also gains a little
   contrast, 15.9:1 -> 18.14:1.

   The tokens keep their own values — these are overrides at the point of use,
   not a redefinition of HomeSmart's palette.                               */
body{
  background: var(--tr-white);
}
.tr-page{
  background: var(--tr-white);
}
/* ---- Separator: Featured listings | Buy, Sell or Invest -----------------
   Both bands are pure white now, so the boundary between them vanished and
   the two read as one long white block.

   A 1px black rule at the seam, inset to the 1180 content column so it starts
   and ends on exactly the same verticals as the listing cards above it and
   the three tiles below — not edge to edge, which would cut the page in half.
   1px solid black matches the listing cards' own border rather than
   introducing a third weight.

   It hangs off .tr-listings rather than .tr-pillars because .tr-pillars is a
   grid: a pseudo-element there would become a grid item and take a column.

   The left/right expression is the same one shell.css uses for the content
   bands' padding, so the two cannot drift apart.                           */
.tr-listings{
  position: relative;
}
.tr-listings::after{
  content: "";
  position: absolute;
  bottom: 0;
  left:  max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  height: 1px;
  background: var(--tr-black);
}
/* The affiliation line sits inside .tr-footer__brand, which paints every <p>
   pure white — so it matched the strapline exactly and its <b> words, set in
   the dimmer on-dark grey, came out QUIETER than the text around them. Both
   corrected: the line one step down from the strapline, the brokerage names
   brightest. 13.12:1 and 18.14:1, AAA either way.                          */
.tr-footer__brand .tr-footer__affil{
  color: var(--tr-ondark-text);
}
.tr-footer__brand .tr-footer__affil b{
  color: var(--tr-white);
}
/* ---- Footer: the brokerage marks, resized --------------------------------
   The void to the right of the two logos was not the column being too wide —
   the page caps at 1180px, so the brand column is a fixed ~307px at every
   desktop width. The marks simply were not filling it: 160 + 26 + 96 = 282,
   leaving 25px dead on the right while the block above them ran the full
   width.

   I tried narrowing the column instead and it overflowed them by 15px, so
   the sizes move rather than the grid. 172 + 22 + 103 = 297 of 307 — the
   remaining 10px reads as a margin, not a hole. The 6.5:1 / 1.8:1 ratio
   between the two lockups is preserved, and HomeSmart stays well above the
   120px minimum its guidelines set.                                       */
/* ---- Footer: social icons ------------------------------------------------
   Moved out of the brand column and into Contact, under "Licensed in
   Georgia" — they are a way to reach him, which is what that column is for,
   and it evens up two columns that were badly mismatched in height.

   Reversed as well: white disc, Ink Black glyph. On the black footer the old
   rgba(255,255,255,.08) disc was all but invisible — the icons read as bare
   glyphs floating on the background. Solid white makes them deliberate.
   Hover keeps the red it always had, with the glyph flipping to white.     */
.tr-footer__col .tr-footer__social{
  margin-top: 16px;
}
.tr-footer__col .tr-footer__social-link{
  background: var(--tr-white);
  color: var(--tr-black);
  transition: background-color .18s ease, color .18s ease;
}
.tr-footer__col .tr-footer__social-link:hover,
.tr-footer__col .tr-footer__social-link:focus-visible{
  background: var(--tr-red);
  color: var(--tr-white);
}
/* ---- Agency credit: the pipe separator -----------------------------------
   The credit bar now opens with a copyright statement, so the two halves
   need dividing. The pipe is set at 35% white and given its own breathing
   room: at full white it reads as a character in the sentence rather than a
   rule between two of them. aria-hidden, because a screen reader announcing
   "vertical line" mid-sentence is noise.                                   */
.tr-credit__sep{
  display: inline-block;
  margin: 0 8px;
  color: rgba(255, 255, 255, .35);
}
/* The line now wraps on a phone, and at 375 it broke inside the agency name
   itself — "CROSS" on one line, "Digital" on the next. The name holds as one
   unit so the break falls in front of it instead.                          */
.tr-credit__link{
  white-space: nowrap;
}
/* ---- Search: location is a field, not a city list ------------------------
   Both search bands opened with a <select> of eight towns — Alpharetta, Johns
   Creek, Cumming, Suwanee, Roswell, Marietta, Sandy Springs, Sugar Hill, plus
   an "elsewhere in North Atlanta" catch-all. Sixteen city names across the two
   forms, which is the exact thing the client asked to remove: a visitor
   reading a fixed list concludes those are the only places he works.

   Now a free-text field placeheld with "Metro Atlanta, GA". It advertises no
   town, and it is the shape the FMLS IDX search will want anyway — those take
   a town, an address or a postcode as typed, not a fixed enumeration.

   .tr-control was written for a <select>, so an <input> inherits a pointer cursor
   it should not have.                                                      */
.tr-control--text{
  cursor: text;
}
.tr-control--text::placeholder{
  color: var(--tr-text-muted);
  opacity: 1;   /* Firefox dims placeholders by default; the token is already
                   the intended value, so let it speak for itself */
}
/* =========================================================================
   Client review, 20 Oct 2026
   ========================================================================= */
/* ---- Top strip: dark -> warm off-white ----------------------------------
   The client asked for the top strip to stop being black. It is now
   --tr-strip, the swatch they supplied, with Ink Black type on it: 16.2:1.

   Four things had to move together, because every one of them was chosen for
   a dark background and none of them survives a light one:

     1. the background and the type colour, which is the request itself
     2. the separator rules, which were 3px WHITE and would have vanished
     3. the right-hand group, which was Gold — 1.73:1 on this background, so
        it was not a style choice any more, it was illegible
     4. the HomeSmart mark, which was the white SVG. Swapped in index.html
        for the full-colour one from the same brand kit: its own red is
        #CD1935 and its black #161612, which are this palette's --tr-red and
        --tr-black exactly, so it lands on the strip already in step.

   The strip now reads light-on-light against the white header below it. The
   seam between them is the only thing that is weaker than it was; if it needs
   defining, a hairline under the strip is the move.                        */
.tr-utilitybar{
  background: var(--tr-strip);
  color: var(--tr-black);
}
.tr-utilitybar .tr-trust--contact{
  color: var(--tr-black);
}
.tr-trust > span:not(:last-child)::after{
  background: var(--tr-black);
}
/* ---- Portrait chip and the brokerage pair: both removed -----------------
   Client items 5 and 6, 20 Oct.

   The chip was the black panel over the portrait — "Raju Tadigiri /
   REALTOR® · HomeSmart". Gone; the name is in the heading beside it anyway,
   so nothing is lost but the overlay.

   The HomeSmart and HSI Commercial marks sat side by side in one plate under
   the portrait. The client does not want those two shown together, so the
   pair is removed rather than separated.

   The rules for .tr-intro__chip and .tr-brokerage* are left in place in
   layout.css and above. Nothing uses them now; they stay so the markup can
   come back without rebuilding the styling, the same way .tr-cta did when the
   contact band was dropped.

   STILL COMBINED, and not touched because it was not what was asked: the
   footer carries both marks in one row, and the copy in three places states
   that HSI Commercial IS HomeSmart's commercial division — the meta
   description, a credentials bullet, and the footer line. If the two cannot
   appear together, that sentence is the bigger problem.                    */
/* ---- Testimonial stars --------------------------------------------------
   The rating stars took --tr-gold, which since the rebrand is HomeSmart's tan
   #CC8D4F. Correct for an eyebrow label, wrong for a star: at 16px it reads as
   bronze, and a bronze star does not look like a five-star rating.

   They are the bright gold now. It also lines them up with the stars inside
   the Google Reviews badge in the stats strip, which are #FBB803 in the
   artwork — close enough that the two read as the same colour.            */
.tr-review__stars{
  color: var(--tr-gold-bright);
}

/* =========================================================================
   INNER PAGES — About, Contact, Reviews
   Shared pieces first (header variant, page hero, buttons, the red
   call-to-action band), then each page's own sections.

   Everything reads from tokens.css. Bands use --tr-band-pad, the same
   content-column gutter the homepage bands use.
   ========================================================================= */

:root{
  /* The full-bleed content gutter, written once. 100% resolves against
     whichever element it is used on, exactly as it does in the homepage's own
     padding-inline rules. */
  --tr-band-pad: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  /* The same edge, for the children of a two-column grid. There a % padding would
     measure the half-width column, not the page, and the content would sit at the
     gutter instead of lining up with the other bands. 100cqw measures the section
     (.tr-cta and .tr-contact are inline-size containers). */
  --tr-edge: max(var(--gutter), calc((100cqw - var(--page-max)) / 2 + var(--gutter)));
  /* Client-specified lilac for the About page's principles band. */
  --tr-mist: #F5F2FB;
  /* Deep card shadow for the About principle cards and the Contact step cards. */
  --tr-shadow-card: 0 14px 34px rgba(22, 22, 18, .22), 0 3px 8px rgba(22, 22, 18, .14);
  /* Client-specified cream for the Reviews gallery and Contact "what happens next" bands. */
  --tr-cream: #F5F2EB;
  /* Section-heading size: 38px at the design width, scaling down with it. */
  --tr-h2-size: clamp(26px, calc(1.4634vw + 20.732px), 38px);
}

/* ---- Header on inner pages ----------------------------------------------
   On the homepage the header floats over the hero video, so it is absolutely
   positioned. Here it sits in flow above the page hero. */

.tr-header--solid{
  position: relative;
}

.tr-header__home{
  display: block;
  line-height: 0;
}

.tr-header__nav a[aria-current="page"]{
  color: var(--tr-red);
}

/* ---- Buttons -------------------------------------------------------------
   .tr-btn-outline (white, red border) is the secondary button on light bands.
   These are the solid ones: red on light, and ink / white for use on the red
   call-to-action band, where a red button would vanish. */

.tr-btn-solid{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--tr-red);
  border: 1px solid var(--tr-red);
  border-radius: var(--tr-radius-control);
  color: var(--tr-white);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.tr-btn-solid:hover,
.tr-btn-solid:focus-visible{
  background: var(--tr-red-dark);
  border-color: var(--tr-red-dark);
  color: var(--tr-white);
}

.tr-btn-solid--ink{
  background: var(--tr-black);
  border-color: var(--tr-black);
}

.tr-btn-solid--ink:hover,
.tr-btn-solid--ink:focus-visible{
  background: var(--tr-white);
  border-color: var(--tr-white);
  color: var(--tr-red);
}

.tr-btn-solid--light{
  background: var(--tr-white);
  border-color: var(--tr-white);
  color: var(--tr-red);
}

.tr-btn-solid--light:hover,
.tr-btn-solid--light:focus-visible{
  background: var(--tr-black);
  border-color: var(--tr-black);
  color: var(--tr-white);
}

/* ---- Page hero -----------------------------------------------------------
   The dark band that opens every inner page. --image adds a photograph under
   a left-to-right scrim; --split puts a block (the rating) at the right end. */

.tr-pagehero{
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--tr-black);
}

.tr-pagehero--image{
  min-height: 420px;
}

.tr-pagehero__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tr-pagehero__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(var(--tr-black-rgb), .84) 0%,
    rgba(var(--tr-black-rgb), .60) 45%,
    rgba(var(--tr-black-rgb), .15) 100%);
}

.tr-pagehero__content{
  position: relative;
  box-sizing: border-box;   /* scoped: this project has no global border-box */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 60px var(--tr-band-pad) 54px;
}

.tr-pagehero--split .tr-pagehero__content{
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 30px;
}

.tr-pagehero__text{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.tr-pagehero__title{
  margin: 0;
  max-width: 760px;
  font-size: clamp(34px, calc(3.5vw + 17px), 58px);
  line-height: 1.04;
  font-weight: 800;
  color: var(--tr-white);
  text-wrap: pretty;
}

.tr-pagehero__lede{
  margin: 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tr-white);
}

/* ---- Call-to-action band --------------------------------------------------
   Closes every inner page. Responsive.css already stacks it below 900px. */

.tr-cta{
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--tr-red);
  color: var(--tr-white);
}

.tr-cta__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 54px 36px 54px var(--tr-edge);
}

.tr-cta__heading{
  margin: 0;
  font-size: var(--tr-h2-size);
  font-weight: 800;
  line-height: 1.1;
  color: var(--tr-white);
  text-wrap: pretty;
}

.tr-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tr-cta__media{
  position: relative;
  min-height: 240px;
  overflow: hidden;
}

.tr-cta__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tr-cta__tint{
  position: absolute;
  inset: 0;
  background: rgba(var(--tr-red-rgb), .4);
}

.tr-cta__fade{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--tr-red) 0%,
    rgba(var(--tr-red-rgb), .55) 26%,
    rgba(var(--tr-red-rgb), 0) 62%);
}

/* ---- Shared card styling: principles and steps --------------------------- */

.tr-step{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 30px 32px;
  background: var(--tr-white);
  border-radius: var(--tr-radius-card);
  box-shadow: var(--tr-shadow-card);
}

.tr-principle__title,
.tr-step__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .04em;
  word-spacing: .03em;
  color: var(--tr-black);
}

.tr-principle__text,
.tr-step__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tr-text);
  max-width: 46ch;
}

/* ---- About: story --------------------------------------------------------- */

.tr-story{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px 56px;
  align-items: start;
  padding: 66px var(--tr-band-pad);
  background: var(--tr-white);
}

.tr-story__portrait{
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--tr-radius-control);
  box-shadow:
    0 2px 6px   rgba(var(--tr-black-rgb), .16),
    0 18px 44px rgba(var(--tr-black-rgb), .34);
}

.tr-story__heading{
  margin: 14px 0 18px;
  font-size: var(--tr-h2-size);
  font-weight: 800;
  line-height: 1.1;
  color: var(--tr-black);
  text-wrap: pretty;
}

.tr-story__p{
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--tr-text);
  max-width: 62ch;
}

.tr-story__p:last-of-type{
  margin-bottom: 0;
}

.tr-story__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---- About: principles ---------------------------------------------------- */

.tr-principles{
  padding: 64px var(--tr-band-pad);
  background: var(--tr-mist);
}

.tr-principles .tr-eyebrow{
  color: var(--tr-red);   /* the tan eyebrow is too faint on lilac */
}

.tr-principles__heading{
  margin: 14px 0 28px;
  font-size: var(--tr-h2-size);
  font-weight: 800;
  color: var(--tr-black);
}

.tr-principles__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.tr-principle__no{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--tr-red);
}

.tr-principle__title{
  font-size: 22px;
}

/* ---- Contact: form + details ---------------------------------------------- */

.tr-contact{
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tr-contact__form{
  padding: 54px var(--tr-edge) 54px 36px;
  background: var(--tr-gold);
  color: var(--tr-black);
}

.tr-contact__heading{
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 800;
  color: var(--tr-black);   /* white on the tan form panel is below 3:1 */
}

.tr-contactform{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 600px;
}

.tr-contactform__wide{
  grid-column: 1 / -1;
}

.tr-contactform__submit{
  grid-column: 1 / -1;
  justify-self: start;
}

.tr-contactform .tr-field__input::placeholder{
  color: var(--tr-text-muted);
  opacity: 1;
}

textarea.tr-field__input{
  resize: vertical;
}

.tr-contact__info{
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 54px 36px 54px var(--tr-edge);
  background: var(--tr-white);
}

.tr-contact__block{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tr-contact__block + .tr-contact__block{
  padding-top: 22px;
  border-top: 1px solid var(--tr-hairline);
}

.tr-contact__label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tr-red);
}

.tr-contact__phone,
.tr-contact__email{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;          /* the two links a phone visitor is most likely to tap */
  color: var(--tr-black);
}

.tr-contact__phone{
  font-size: 26px;
  font-weight: 800;
}

.tr-contact__email{
  font-size: 18px;
  font-weight: 600;
}

.tr-contact__phone svg,
.tr-contact__email svg{
  flex: 0 0 auto;
  color: var(--tr-red);
}

.tr-contact__text{
  font-size: 18px;
  line-height: 1.6;
  color: var(--tr-black);
}

/* Something the client has not supplied yet, marked on the page rather than
   quietly guessed. */
.tr-pending{
  color: var(--tr-gold-deep);
  font-weight: 700;
}

/* ---- Contact: what happens next ------------------------------------------- */

.tr-steps{
  padding: 64px var(--tr-band-pad);
  background: var(--tr-cream);
}

.tr-steps__heading{
  margin: 0 0 26px;
  font-size: var(--tr-h2-size);
  font-weight: 800;
  color: var(--tr-black);
}

.tr-steps__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.tr-step__no{
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--tr-red);
}

.tr-step__title{
  font-size: 20px;
}

/* ---- Reviews: rating badge, filter, list ---------------------------------- */

.tr-ratingbadge{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--tr-radius-card);
}

.tr-ratingbadge__score{
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--tr-white);
}

.tr-ratingbadge__stars{
  font-size: 20px;
  letter-spacing: .06em;
  color: var(--tr-gold-bright);
}

.tr-ratingbadge__label{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tr-white);
}

.tr-filterbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 34px var(--tr-band-pad) 0;
  background: var(--tr-white);
}

.tr-filterbar[hidden]{
  display: none;
}

.tr-filterbar__label{
  margin-right: 4px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tr-black);
}

.tr-filter{
  min-height: 44px;          /* the touch minimum; 16px type alone gave 41px */
  padding: 0 18px;
  background: var(--tr-white);
  border: 1px solid var(--tr-black);
  border-radius: var(--tr-radius-pill);
  color: var(--tr-black);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.tr-filter:hover,
.tr-filter:focus-visible{
  border-color: var(--tr-red);
  color: var(--tr-red);
}

.tr-filter[aria-pressed="true"]{
  background: var(--tr-red);
  border-color: var(--tr-red);
  color: var(--tr-white);
}

.tr-reviewlist{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 26px;
  padding: 26px var(--tr-band-pad) 60px;
  background: var(--tr-white);
}

.tr-review[hidden]{
  display: none;
}

.tr-review__foot{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.tr-review__foot .tr-review__author{
  margin-top: 0;
  padding-top: 0;
}

.tr-review__tag{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tr-red);
}

/* ---- Reviews: photo gallery ------------------------------------------------
   Reuses the sold rail's script through the same data-sold-* hooks, so it
   slides endlessly and swipes the same way, with no extra JavaScript. */

.tr-gallery{
  padding: 60px 0 64px;
  background: var(--tr-cream);
}

.tr-gallery .tr-eyebrow{
  color: var(--tr-red);   /* the tan eyebrow is too faint on cream */
}

.tr-gallery__head{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 0 var(--tr-band-pad);
  margin-bottom: 24px;
}

.tr-gallery__heading{
  margin: 14px 0 0;
  font-size: var(--tr-h2-size);
  font-weight: 800;
  color: var(--tr-black);
}

.tr-gallery__nav{
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.tr-gallery__btn{
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--tr-black);
  border-radius: 50%;
  color: var(--tr-black);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.tr-gallery__btn:hover,
.tr-gallery__btn:focus-visible{
  background: var(--tr-red);
  border-color: var(--tr-red);
  color: var(--tr-white);
}

.tr-gallery__viewport{
  padding: 6px var(--tr-band-pad) 14px;
}

.tr-gallery__track{
  display: flex;
  gap: 20px;
  will-change: transform;
}

.tr-gallery__card{
  flex: 0 0 280px;
  height: 360px;
  margin: 0;
  overflow: hidden;
  background: var(--tr-text);
  border-radius: var(--tr-radius-card);
}

.tr-gallery__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- About: principle cards that flip ------------------------------------
   Front: number and title. Back: number, title and the line beneath.
   The back face holds the real content (the front is aria-hidden), so the
   cards read the same to a screen reader and with no hover at all. Only a
   hovering pointer gets the flip; touch screens and anyone who prefers
   reduced motion see the full card, or a plain cross-fade. */
.tr-principle__face{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 30px 32px;
  background: var(--tr-white);
  border-radius: var(--tr-radius-card);
  box-shadow: var(--tr-shadow-card);
}
.tr-principle__face--front{
  display: none;
  justify-content: center;   /* front only: number and title centred, both ways */
  align-items: center;
  text-align: center;
}
@media (hover: hover){
  .tr-principle{
    outline-offset: 4px;
  }
  .tr-principle__inner{
    display: grid;
    height: 100%;
  }
  .tr-principle__face{
    grid-area: 1 / 1;
    transition: opacity .25s ease;
  }
  .tr-principle__face--front{
    display: flex;
  }
  .tr-principle__face--back{
    opacity: 0;
  }
  .tr-principle:hover .tr-principle__face--front,
  .tr-principle:focus .tr-principle__face--front,
  .tr-principle:focus-within .tr-principle__face--front{
    opacity: 0;
  }
  .tr-principle:hover .tr-principle__face--back,
  .tr-principle:focus .tr-principle__face--back,
  .tr-principle:focus-within .tr-principle__face--back{
    opacity: 1;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .tr-principle{
    perspective: 1000px;
  }
  .tr-principle__inner{
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.4, .2, .2, 1);
  }
  .tr-principle__face{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: none;
    opacity: 1;
  }
  .tr-principle__face--back{
    transform: rotateY(180deg);
  }
  .tr-principle:hover .tr-principle__inner,
  .tr-principle:focus .tr-principle__inner,
  .tr-principle:focus-within .tr-principle__inner{
    transform: rotateY(180deg);
  }
  .tr-principle:hover .tr-principle__face--front,
  .tr-principle:focus .tr-principle__face--front,
  .tr-principle:focus-within .tr-principle__face--front,
  .tr-principle:hover .tr-principle__face--back,
  .tr-principle:focus .tr-principle__face--back,
  .tr-principle:focus-within .tr-principle__face--back{
    opacity: 1;
  }
}

/* ---- Footer: the HSI mark links out ------------------------------------- */
.tr-footer__hsi-link{
  display: block;
  line-height: 0;
}