/* ==========================================================================
   Hinton's Berkshire Homes — site styles
   One stylesheet for every page. Edit colors in :root and the whole site
   follows. Nothing here depends on a framework or a build step.
   ========================================================================== */

/* Fonts are served from this site's own folder rather than Google's servers:
   the pages then load with no third-party requests and work even if an outside
   service is down. Barlow Condensed and Inter, both SIL Open Font License —
   see assets/fonts/OFL.txt. */
@font-face{
  font-family:"Barlow Condensed"; font-style:normal; font-weight:600;
  font-display:swap; src:url("../fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow Condensed"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("../fonts/source-serif-4.woff2") format("woff2");
}

:root{
  /* Black and white, on purpose. The buildings are black and white, so the
     site is too — which leaves the photographs as the only color on the page.
     Every value below is a neutral; there is no accent hue anywhere. */
  --ink:#0d0d0d;         /* near-black: type, dark bands, primary buttons */
  --ink-2:#171717;       /* cards on a black band */
  --ink-3:#262626;       /* icon wells on a black band */
  --paper:#ffffff;
  --stone:#f4f3f1;       /* light section band */
  --stone-2:#e7e5e2;     /* wells, chips, placeholder tiles */
  --line:#dcd9d5;
  --line-dk:#333333;
  --muted:#646464;
  --muted-lt:#a8a8a8;
  --accent:#0d0d0d;       /* the accent IS black */
  /* What a link turns on hover. The accent is black, so on a dark ground it
     would be invisible; every dark container below flips this to white. */
  --link-hover:#0d0d0d;
  --accent-dk:#000000;
  --accent-lt:#ffffff;   /* the accent inverted, for use on black */

  /* Hinton's sage, straight off the logo. Only the two below are the brand's
     own values; the accent used for type and rules is darkened from them,
     because #769687 carries 3.2:1 against white and small uppercase type needs
     4.5:1. Same hue, legible weight. */
  --sage-brand:#769687;   /* logo: BERKSHIRE HOMES, roof trim */
  --sage-lt:#8fb0a1;      /* logo: the sun and the window — for dark grounds */
  --sage:#4f6b5e;         /* 5.8:1 on white, 5.3:1 on the stone band */

  --wrap:1160px;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 28px rgba(0,0,0,.07);
  --shadow-lg:0 2px 6px rgba(0,0,0,.08), 0 22px 60px rgba(0,0,0,.16);

  --display:"Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  /* A screen serif against the condensed grotesque above it. Barlow is the
     industrial half; this is the one that has to be read at length, on a
     phone, in daylight, by somebody deciding whether to trust a builder. */
  --body:"Source Serif 4", Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
}

*,*::before,*::after{box-sizing:border-box}
/* text-size-adjust must be set unprefixed as well, or some browsers apply
   their own font boosting on narrow screens and every size set here is
   silently scaled up by a factor you did not choose. */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent-dk); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--link-hover)}
/* Dark grounds: a link may not go black on hover here. */
.section--ink, .hero, .cta-band, .site-footer, .topbar, .landing,
.callbar, .panel-dark, .unit-status{--link-hover:#ffffff}
/* A light panel sitting inside one of those dark containers inherits the white
   hover color onto its own pale ground, and its text vanishes when the mouse
   crosses it. Any light island has to hand the token back. */
.landing-sell, .form-card{--link-hover:var(--ink)}
hr{border:0; border-top:1px solid var(--line); margin:36px 0}
/* Comfortable reading tops out around 70 characters; wider and the eye loses
   its place returning to the next line. */
.section > .wrap > p, .section > .wrap > h2 + p, .wrap.narrow p{max-width:72ch}
/* Capping the measure leaves the block itself hard left, so centered text
   ends up centered inside an off-center box. Center the box too. */
p.center, .center > p, .lede.center{margin-inline:auto}

/* The parts of a page nobody designs — the selection color, the focus ring,
   the scrollbar, the numerals in a table — ship as browser defaults belonging
   to no design system. Theming them is the cheapest evidence that a page was
   built rather than assembled. */
::selection{background:var(--ink); color:#fff}
.section--ink ::selection, .hero ::selection, .site-footer ::selection,
.landing ::selection, .panel-dark ::selection{background:#fff; color:var(--ink)}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:2px;
}
.section--ink :focus-visible, .hero :focus-visible, .site-footer :focus-visible,
.landing :focus-visible, .panel-dark :focus-visible{outline-color:#fff}

/* Figures that line up in a column should line up. */
.unit-rent, .stat b, .est-range, .footer-bottom, .towns li{font-variant-numeric:tabular-nums}

html{scrollbar-color:var(--muted) var(--stone); scrollbar-width:thin}
input, textarea, select{caret-color:var(--ink)}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.03;
  letter-spacing:.005em; margin:0 0 .5em; text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,4.5rem); text-transform:uppercase; text-wrap:balance}
h2{font-size:clamp(2rem,4.2vw,3rem); text-transform:uppercase; text-wrap:balance}
h3{font-size:1.5rem; text-transform:uppercase; letter-spacing:.01em}
h4{font-size:1.15rem; text-transform:uppercase; letter-spacing:.03em}
/* small section label that needs to be an h3 for heading order, but read as a label */
.subhead{font-size:1.15rem; letter-spacing:.03em; color:var(--muted)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.narrow{max-width:760px}
.section{padding:80px 0}
.section--tight{padding:56px 0}
.section--sand{background:var(--stone)}
.section--ink{background:var(--ink); color:#ebebeb}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink p{color:#c8c8c8}
.center{text-align:center}
.lede{font-size:1.18rem; color:var(--muted); max-width:64ch}
.section--ink .lede{color:#bebebe}

/* eyebrow --------------------------------------------------------------- */
.eyebrow{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.22em;
  font-size:.9rem; font-weight:600; color:var(--accent); margin:0 0 12px;
  display:flex; align-items:center; gap:10px;
}
.center .eyebrow{justify-content:center}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); display:block}
.section--ink .eyebrow{color:#ffffff}
.section--ink .eyebrow::before{background:#ffffff}

/* buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:1.12rem;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none;
  padding:14px 26px; border-radius:var(--radius-sm); border:2px solid transparent;
  background:var(--accent); color:#fff; cursor:pointer; transition:.16s ease;
  line-height:1.1; white-space:nowrap;
}
.btn:hover{background:#000; color:#fff; transform:translateY(-1px); box-shadow:var(--shadow)}
.btn svg{width:18px;height:18px;flex:none}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:#fff}

/* A ghost button is black-on-transparent, which is invisible on a dark hero.
   Every hero on this site is dark, so ghost buttons invert inside one. */
.hero .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.65)}
.hero .btn--ghost:hover{background:#fff; color:var(--ink)}
.btn--onink{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn--onink:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn--lg{padding:17px 32px; font-size:1.25rem}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.center .btn-row{justify-content:center}

/* header ---------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.97);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
}
.header-in{display:flex; align-items:center; gap:20px; height:78px}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:52px; width:auto}
.nav{margin-left:auto; display:flex; align-items:center; gap:6px}
.nav a{
  white-space:nowrap;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.07em;
  font-weight:600; font-size:1.06rem; color:var(--ink); text-decoration:none;
  padding:9px 13px; border-radius:6px;
}
.nav a:hover{background:var(--stone-2); color:var(--ink)}
.nav a.is-active{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); border-radius:0}
.header-cta{display:flex; align-items:center; gap:12px; margin-left:10px}
.phone-link{
  font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:.02em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.phone-link:hover{color:var(--accent)}
.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; cursor:pointer;
}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0}

/* hero ------------------------------------------------------------------ */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  background-size:cover; background-position:center;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(13,13,13,.94) 0%, rgba(13,13,13,.86) 46%, rgba(13,13,13,.62) 100%);
}
.hero.has-photo::after{
  background:linear-gradient(105deg, rgba(13,13,13,.93) 0%, rgba(13,13,13,.80) 50%, rgba(13,13,13,.45) 100%);
}
.hero-in{position:relative; z-index:2; padding-block:96px 88px}
.hero-in .eyebrow{max-width:52ch}
.hero-in h1{max-width:15ch}
.hero-in .btn-row{max-width:760px}
.hero h1{color:#fff; margin-bottom:20px}
.hero h1 em{font-style:normal; color:#ffffff; box-shadow:inset 0 -.09em 0 rgba(255,255,255,.45)}
.hero p{font-size:1.22rem; color:#d1d1d1; max-width:56ch}
.hero-sub{padding-block:78px 70px}
.hero-sub h1{font-size:clamp(2.2rem,5vw,3.5rem); max-width:19ch}
/* Headlines that are a sentence rather than a phrase step down a size and
   take a wider measure, so they stop swallowing the first screen. */
.hero h1.h1--long{font-size:clamp(1.95rem,4.1vw,2.95rem); max-width:26ch}
.landing-h.h1--long{font-size:clamp(1.9rem,4.3vw,2.7rem)}

.trust-bar{position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.14)}
.trust-bar ul{
  list-style:none; margin:0; padding:20px 0; display:flex; flex-wrap:wrap;
  gap:12px 34px; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.1em; font-size:1rem; font-weight:600; color:#c8c8c8;
}
.trust-bar li{display:flex; align-items:center; gap:9px}
.trust-bar svg{width:17px; height:17px; color:#ffffff; flex:none}

/* grid + cards ---------------------------------------------------------- */
.grid{display:grid; gap:38px 32px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{background:transparent; border:0; border-radius:0; padding:0; transition:.18s ease}
.card:hover .card-head{border-top-color:var(--muted)}
.card--feature:hover .card-head{border-top-color:var(--ink)}
.card p{color:var(--muted); font-size:.99rem; margin:0}
/* Icon beside the heading, no tile. The rule above it does the separating a
   container border used to do, which reads like a spec sheet rather than a
   feature grid. */
.card-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-top:14px; margin-bottom:.6em; border-top:2px solid var(--ink);
}
.card-head h3{margin:0}
.card-ico{flex:none; color:var(--accent); line-height:0; align-self:flex-start; margin-top:3px}
.card-ico svg{width:21px; height:21px; display:block}

.card--feature .card-head{border-top-width:4px}
.tag{
  align-self:center; background:var(--accent); color:#fff;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.12em;
  font-size:.78rem; font-weight:700; padding:3px 11px; border-radius:4px;
}
.section--ink .card p{color:#b3b3b3}
.section--ink .card-head{border-top-color:#ffffff}
.section--ink .card-ico{color:#ffffff}

/* list with checks ------------------------------------------------------ */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.checks li{display:flex; gap:12px; align-items:flex-start; line-height:1.55}
.checks svg{width:21px; height:21px; color:var(--accent); flex:none; margin-top:2px}
.section--ink .checks svg{color:#ffffff}

/* numbered process ------------------------------------------------------ */
.steps{counter-reset:step; display:grid; gap:2px; margin-top:34px}
.step{
  display:grid; grid-template-columns:78px 1fr; gap:24px; align-items:start;
  padding:26px 0; border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--display); font-size:2.6rem; font-weight:700; color:var(--accent);
  line-height:1;
}
.step h3{margin-bottom:.25em}
.step p{color:var(--muted); margin:0}
.section--ink .step{border-color:var(--line-dk)}
.section--ink .step::before{color:#ffffff}

/* split ----------------------------------------------------------------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start}
.split > *{min-width:0}  /* stops form fields forcing the column wider than the screen */
.split--wide-left{grid-template-columns:1.25fr .75fr}

/* photo placeholders ---------------------------------------------------- */
.photo{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--stone-2); border:1px solid var(--line);
}
/* <picture> is only a wrapper for the WebP/JPEG choice; display:contents makes
   the <img> behave as the figure's direct child, so every rule below still
   reaches it and the flex column in .photo--cap still sees it. */
.photo picture{display:contents}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.photo--4x3{aspect-ratio:4/3}
.photo--16x9{aspect-ratio:16/9}
.photo--1x1{aspect-ratio:1/1}
/* Letterbox, for a shot cropped down to its subject with the sky trimmed off —
   a long roof plane against a ridgeline. 7:2 matches the crop exactly, so
   nothing is lost to object-fit. On a phone that band gets too shallow to read,
   so it opens to 5:2; the center crop that costs is empty field either side. */
.photo--band{aspect-ratio:7/2}
@media (max-width:760px){ .photo--band{aspect-ratio:5/2} }
/* Empty photo slot. Intentionally quiet and wordless — the owner knows which
   file to add from the HTML comment above it; a visitor just sees a plain tile. */
.photo-ph{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  color:#b8b8b8; padding:20px;
  background:var(--stone-2);
}
.photo-ph svg{width:38px; height:38px; opacity:.45}
.photo figcaption{
  padding:13px 16px; background:var(--paper); border-top:1px solid var(--line);
  font-size:.92rem; color:var(--muted);
}
/* A figure with a caption: the ratio belongs to the image, not to the figure.
   Left on the figure it fixes the total height, and overflow:hidden then cuts
   the caption off entirely. */
.photo--cap{aspect-ratio:auto; display:flex; flex-direction:column}
/* the image keeps its own ratio; height:100% would let a stretched grid row
   push the caption past the figure's edge, where overflow:hidden eats it */
.photo--cap img{height:auto; flex:none}
/* and in a grid row of unequal captions, this lines the captions up */
.photo--cap figcaption{margin-top:auto}
.photo--4x3.photo--cap img{aspect-ratio:4/3}
.photo--16x9.photo--cap img{aspect-ratio:16/9}
.photo--1x1.photo--cap img{aspect-ratio:1/1}
.photo--band.photo--cap img{aspect-ratio:7/2}
@media (max-width:760px){ .photo--band.photo--cap img{aspect-ratio:5/2} }
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.gallery figure{margin:0}

/* stat band ------------------------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.stat b{
  display:block; font-family:var(--display); font-size:3.1rem; font-weight:700;
  color:#ffffff; line-height:1;
}
.stat span{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.13em;
  font-size:.92rem; color:#bebebe;
}

/* service-area chips ---------------------------------------------------- */
.towns{display:flex; flex-wrap:wrap; gap:9px; margin-top:8px; padding:0; list-style:none}
.towns li{
  border:1px solid var(--line); border-radius:100px; padding:6px 15px;
  font-size:.93rem; color:var(--muted); background:var(--paper);
}
.section--ink .towns li{border-color:var(--line-dk); background:var(--ink-2); color:#c8c8c8}

/* FAQ ------------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line); padding:4px 0}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-family:var(--display); font-size:1.32rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:1.7rem; color:var(--accent); font-family:var(--body); line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 40px 20px 0; color:var(--muted); margin:0}
.faq details p + p{padding-top:0; margin-top:-6px}

/* callout / notes ------------------------------------------------------- */
.callout{
  background:var(--stone); border-left:4px solid var(--accent); border-radius:0 10px 10px 0;
  padding:22px 26px;
}
.callout h4{margin-bottom:.4em}
.callout p{color:var(--muted); margin:0}

/* CTA band -------------------------------------------------------------- */
.cta-band{background:var(--ink); color:#fff; padding:64px 0; text-align:center}
.cta-band h2{color:#fff; margin-bottom:.35em}
.cta-band p{color:rgba(255,255,255,.92); font-size:1.15rem; max-width:60ch; margin:0 auto}
.cta-band .btn{background:#fff; color:var(--ink)}
.cta-band .btn:hover{background:var(--stone); color:var(--ink)}
.cta-band .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.65)}
.cta-band .btn--ghost:hover{background:#fff; color:var(--ink)}

/* form ------------------------------------------------------------------ */
.form-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow); color:var(--ink);
}
/* A light card can sit inside a dark section, so every color inside it is
   stated rather than inherited — otherwise the section wins and the labels
   turn white on white. */
.form-card label, .form-card h2, .form-card h3, .form-card strong{color:var(--ink)}
.form-card p, .form-card .form-note,
.section--ink .form-card p, .section--ink .form-card .form-note{color:var(--muted)}
.field{margin-bottom:18px}
.field label{
  display:block; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.09em; font-size:.92rem; font-weight:600; margin-bottom:7px;
}
.field .req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%; min-width:0; font-family:var(--body); font-size:1rem; color:var(--ink);
  padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); transition:.15s ease;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(13,13,13,.12);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-note{font-size:.88rem; color:var(--muted); margin-top:14px}
.form-status{
  margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm);
  font-size:.95rem; display:none;
}
.form-status.show{display:block}
.form-status.ok{background:var(--stone); color:var(--ink); border:1px solid var(--ink); font-weight:500}
.form-status.err{background:#fff; color:var(--ink); border:2px solid var(--ink); font-weight:500}
.form-status.info{background:var(--stone); color:var(--muted); border:1px dashed var(--line-dk)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* contact detail list --------------------------------------------------- */
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:22px}
.contact-list li{display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start}
.contact-list .ci{
  width:44px; height:44px; border-radius:10px; background:var(--stone-2);
  display:grid; place-items:center; color:var(--accent);
}
.contact-list .ci svg{width:22px; height:22px}
.contact-list b{
  display:block; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.09em; font-size:.9rem; color:var(--muted); font-weight:600;
}
.contact-list a,.contact-list span{font-size:1.16rem; color:var(--ink); text-decoration:none; overflow-wrap:anywhere}
.contact-list a:hover{color:var(--accent)}

/* footer ---------------------------------------------------------------- */
.site-footer{background:var(--ink); color:#b0b0b0; padding:64px 0 28px; font-size:.97rem}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px}
.site-footer img.flogo{height:70px; width:auto; margin-bottom:18px}
.site-footer h3,.site-footer h4{color:#fff; font-size:1rem; letter-spacing:.13em; margin-bottom:16px}
/* A footer link is a 21px line of text. On a phone that is a target a thumb
   misses; padding takes each one past the 24px minimum without moving the
   visible text, and the row gap shrinks by the same amount so the column
   still reads at the same rhythm. */
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.site-footer li a{display:inline-block; padding:4px 0}
.site-footer a{color:#b0b0b0; text-decoration:none}
.site-footer a:hover{color:#fff}
/* The grey above out-specifies .btn and dims the footer button's label.
   Unnoticed while the button was black; on a sage fill it drops to 2.7:1. */
.site-footer a.btn{color:#fff}
.site-footer a.btn:hover{color:#fff}
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-dk);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  font-size:.88rem; color:#818181;
}

/* sticky mobile call bar ------------------------------------------------ */
.callbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--ink); border-top:1px solid var(--line-dk); padding:10px;
  gap:10px;
}
.callbar .btn{flex:1; padding:13px 10px; font-size:1.05rem}

/* skip link ------------------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; background:var(--accent); color:#fff;
  padding:10px 16px; z-index:100;
}
.skip:focus{left:12px; top:12px}

/* responsive ------------------------------------------------------------ */
@media (max-width:1300px){
  .nav a{font-size:1rem; padding:9px 10px}
  .brand img{height:48px}
}

@media (max-width:1180px){
  .header-cta .phone-link{display:none}
}

@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr; gap:36px}
  .split--wide-left{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr; gap:34px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr); gap:32px}
}

/* the header collapses to a hamburger + a fixed call bar earlier than the
   rest of the layout, because five nav items plus a phone number stop fitting
   well before the content does */
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    position:absolute; left:0; right:0; top:100%; background:var(--paper);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    gap:0; padding:8px 14px 18px; display:none; box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav a{padding:13px 8px; border-bottom:1px solid var(--line); font-size:1.15rem}
  .nav a.is-active{box-shadow:none}
  .nav a.nav-home{display:block; border-bottom:0; color:var(--muted)}
  .header-cta{display:none}
  .header-in{height:70px}
  .brand img{height:46px}
  .callbar{display:flex}
  body{padding-bottom:74px}
}

@media (max-width:760px){
  body{font-size:16px}
  .eyebrow{letter-spacing:.14em; font-size:.84rem; align-items:flex-start}
  .eyebrow::before{margin-top:.55em; width:20px}
  .section{padding:60px 0}
  .header-in{height:68px}
  .brand img{height:44px}
  .hero-in{padding-block:64px 56px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .step{grid-template-columns:56px 1fr; gap:16px}
  .step::before{font-size:2rem}
  .footer-grid{grid-template-columns:1fr}
  .form-card{padding:24px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Print: the estimate-terms page and the resident pages are the ones that get
   printed, by someone who wants the words. Chrome goes, black bands become
   plain, the hero photograph is dropped, and every link shows where it went. */
@media print{
  .site-header,.callbar,.cta-band,.nav,.topbar,.skip,.nav-toggle,.trust-bar,
  .btn-row,.form-card,.est-panel,.site-footer .btn{display:none !important}
  body{font-size:11.5pt; color:#000; background:#fff}
  .hero{background-image:none !important; background:#fff; color:#000; min-height:0; padding:24pt 0 8pt}
  .hero::after,.hero::before{display:none}
  .hero h1,.hero p,.hero h1 em,.hero .eyebrow,.section--ink h2,.section--ink h3,.section--ink p,
  .section--ink .eyebrow,.site-footer a,.site-footer h3{color:#000 !important}
  .hero h1 em{box-shadow:none}
  .section--ink,.site-footer{background:#fff !important; color:#000 !important}
  .section{padding:18pt 0; break-inside:avoid}
  .section--stone,.section--sand{background:#fff}
  .photo{border:0; box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.85em; color:#444}
  .eyebrow::before{background:#000}
  h1,h2,h3{break-after:avoid}
}

/* ==========================================================================
   PART TWO — added when the site split into two companies
   ========================================================================== */

/* the light band is called --stone now; both class names work */
.section--stone{background:var(--stone)}

/* thin bar above the header: who you are, and the way to the other company */
.topbar{background:var(--ink); color:#b0b0b0; font-size:.86rem}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:38px; padding-block:8px}
.topbar-in > span{letter-spacing:.02em}
.brand-switch{display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none;
  /* bigger thumb target, same bar height: the padding is taken back as margin */
  padding:8px 0; margin:-8px 0;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.92rem;
  font-weight:600; white-space:nowrap}
.brand-switch svg{width:15px; height:15px}
.brand-switch:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}

/* the two links on the right of the top bar: back to the chooser, and across
   to the other company. The chooser link is the way home from either side. */
.topbar-links{display:inline-flex; align-items:center; gap:20px; margin-left:auto}
.topbar-links::before{content:""}
.brand-switch--home{color:#c9c9c9}
.brand-switch--home:hover{color:#fff}
.brand-switch--home svg{width:16px; height:16px}

/* the same link inside the mobile menu, where the top bar gets tight */
.nav-home{display:none}
.nav-home svg{width:17px; height:17px; vertical-align:-3px; margin-right:7px}

.sister{font-size:.9rem; color:#818181; margin-top:14px}
.sister a{color:#fff}
.fphone{font-size:1.25rem; color:#fff; font-family:var(--display); letter-spacing:.02em}

/* a hero that carries a photograph gets a lighter scrim than a plain black one */
.hero[style]::after{
  background:linear-gradient(105deg, rgba(13,13,13,.93) 0%, rgba(13,13,13,.80) 50%, rgba(13,13,13,.46) 100%);
}

.gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* equal-housing / legal footnote line */
.eho{display:flex; gap:12px; align-items:flex-start; justify-content:center;
  max-width:70ch; margin:0 auto; font-size:.92rem; color:var(--muted); text-align:left}
.eho svg{width:22px; height:22px; flex:none; color:var(--ink); margin-top:1px}

/* --- apartment listings ------------------------------------------------- */
.listings{display:grid; gap:26px}
.listings:empty{display:none}
.unit{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--paper);
}
.unit .photo{border:0; border-radius:0; height:100%}
.unit-body{padding:32px}
.unit-body h3{margin-bottom:.3em}
.unit-meta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; list-style:none}
.unit-meta li{border:1px solid var(--line); border-radius:100px; padding:5px 14px;
  font-size:.9rem; color:var(--muted)}
.unit-rent{font-family:var(--display); font-size:2.4rem; font-weight:700; line-height:1;
  margin:0 0 6px}
.unit-rent small{font-family:var(--body); font-size:.95rem; font-weight:400; color:var(--muted)}
.unit-status{display:inline-block; background:var(--ink); color:#fff; font-family:var(--display);
  text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:700;
  padding:4px 12px; border-radius:4px; margin-bottom:14px}

/* --- landing page ------------------------------------------------------- */
.landing{
  min-height:100vh; min-height:100svh; background:var(--ink); color:#fff;
  display:flex; flex-direction:column;
}
.landing-top{padding:44px 22px 30px; text-align:center}
.landing-logo{height:92px; width:auto; margin:0 auto}
.landing-top p:not(.landing-kicker){
  color:#b0b0b0; margin:18px auto 0; max-width:52ch; font-size:1.06rem;
}
.landing-top h1{font-size:clamp(2rem,5vw,3rem)}

.doors{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#2a2a2a;
  border-block:2px solid #2a2a2a}
.door{
  position:relative; display:block; overflow:hidden; text-decoration:none; color:#fff;
  background:var(--ink); min-height:min(52vh,460px); isolation:isolate;
}
.door-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05); opacity:.42; z-index:-1;
  transition:opacity .4s ease, transform .6s ease;
}
.door::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.88) 68%, rgba(13,13,13,.96) 100%);
}
.door:hover .door-bg,.door:focus-visible .door-bg{opacity:.6; transform:scale(1.03)}
.door-in{
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:flex-end; height:100%; padding:clamp(26px,4vw,52px);
}
.door-logo{height:74px; width:auto; margin-bottom:auto}
.door-h{
  font-family:var(--display); text-transform:uppercase; font-weight:700; line-height:1.04;
  font-size:clamp(1.7rem,2.9vw,2.6rem); margin:28px 0 12px; max-width:16ch;
}
.door-p{color:#c8c8c8; max-width:46ch; font-size:1.02rem; line-height:1.6}
.door-go{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; font-size:1.06rem; border-bottom:2px solid #fff; padding-bottom:5px;
}
.door-go svg{width:18px; height:18px; transition:transform .25s ease}
.door:hover .door-go svg{transform:translateX(5px)}
.door:focus-visible{outline:3px solid #fff; outline-offset:-6px}

.doors--compact .door{min-height:220px}
.doors--compact .door-in{justify-content:center}

/* The acquisitions band. It sits under the two doors — so the companies still
   come first — but above the footer, and it is the only element on the page
   with a light ground, which is what gives it more pull than anything behind
   either door without shouting over them. */
.landing-sell{
  display:block; background:var(--paper); color:var(--ink); text-decoration:none;
  border-top:2px solid #fff; transition:background .16s ease;
}
.landing-sell:hover{background:#fff}
.landing-sell-in{
  display:flex; align-items:center; justify-content:space-between; gap:34px;
  max-width:1240px; margin:0 auto; padding:30px 22px;
}
.landing-sell .eyebrow{margin-bottom:9px}
.landing-sell-txt{display:block; max-width:74ch}
.landing-sell-h{
  display:block; font-family:var(--display); text-transform:uppercase;
  font-weight:700; font-size:clamp(1.3rem, 2.6vw, 1.9rem); line-height:1.06;
  letter-spacing:.005em; margin-bottom:9px; text-wrap:balance;
}
.landing-sell-p{display:block; color:var(--muted); font-size:.97rem; line-height:1.6}
.landing-sell-go{
  display:inline-flex; align-items:center; gap:10px; flex:none; white-space:nowrap;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; font-size:1.05rem; background:var(--ink); color:#fff;
  padding:15px 26px; border-radius:var(--radius-sm);
}
.landing-sell:hover .landing-sell-go{background:#333}
.landing-sell-go svg{width:19px; height:19px}
@media (max-width:860px){
  .landing-sell-in{flex-direction:column; align-items:flex-start; gap:20px; padding:26px 22px}
  .landing-sell-go{width:100%; justify-content:center}
}

.landing-foot{
  display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; justify-content:center;
  padding:26px 22px 34px; font-size:.95rem; color:#a8a8a8;
}
.landing-foot a{display:inline-flex; align-items:center; gap:9px; color:#a8a8a8; text-decoration:none}
.landing-foot a:hover{color:#fff}
.landing-foot svg{width:17px; height:17px}
.landing-pay{
  border:1px solid #4a4a4a; border-radius:100px; padding:9px 20px; color:#fff !important;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.09em; font-weight:600;
}
.landing-pay:hover{background:#fff; color:var(--ink) !important; border-color:#fff}

@media (max-width:960px){
  .gallery--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .unit{grid-template-columns:1fr}
  .unit .photo{aspect-ratio:16/9}
}
@media (max-width:860px){
  .doors{grid-template-columns:1fr}
  .door{min-height:auto}
  .door-in{padding:30px 24px 34px}
  .door-logo{height:58px; margin-bottom:22px}
  .landing-logo{height:70px}
  .topbar-note{display:none}
  .topbar-in{justify-content:flex-end}
  .topbar-links{gap:16px}
}
@media (max-width:760px){
  .gallery--3{grid-template-columns:1fr}
  .unit-body{padding:24px}
}

/* the landing page belongs to neither company, so it carries no logo at the
   top — type only, so nothing implies one company owns the other */
.landing-kicker{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.22em;
  font-size:.86rem; font-weight:600; color:#a8a8a8; margin:0 0 18px;
  /* Both places belong on one line, beside each other. */
  white-space:nowrap;
}
/* On a narrow phone the wide tracking is what pushes it over: at 320px the
   line needs 340px at full size but only 259px at these values, against 276px
   of room. Measured, not guessed. */
@media (max-width:420px){
  .landing-kicker{font-size:.78rem; letter-spacing:.12em}
}
.landing-h{
  font-family:var(--display); text-transform:uppercase; font-weight:700; line-height:1.02;
  font-size:clamp(2.2rem,5.4vw,3.7rem); color:#fff; margin:0 0 18px; letter-spacing:.005em;
}

/* The Hinton's homepage hero is one image that is half before, half after.
   The standard hero scrim is darkest on the left, which would bury the "before"
   half and wash out the seam — so this variant keeps the left readable for text
   while letting the finished half stay bright enough to register. */
.hero--split{background-position:center}
.hero--split::after{
  background:linear-gradient(100deg,
    rgba(13,13,13,.92) 0%, rgba(13,13,13,.86) 34%,
    rgba(13,13,13,.60) 52%, rgba(13,13,13,.34) 100%);
}
@media (max-width:760px){
  /* on a phone the two halves are too small to read side by side,
     so show the finished half and let the before live on the project page */
  .hero--split{background-position:78% center; background-size:auto 100%}
  .hero--split::after{background:linear-gradient(180deg,
    rgba(13,13,13,.86) 0%, rgba(13,13,13,.80) 55%, rgba(13,13,13,.92) 100%)}
}

/* the registered company name, small, under the footer blurb */
.legalname{font-size:.86rem; color:#818181; margin-top:12px}

/* --- instant ballpark estimator ----------------------------------------- */
.est-fields{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0 4px; margin:4px 0 18px;
}
.est-lede{font-size:.95rem; color:var(--muted); margin-bottom:16px}
.est-card{
  border:2px solid var(--ink); border-radius:var(--radius);
  padding:26px; margin-top:20px; background:var(--paper);
}
.est-card h3{margin-bottom:.4em}
.est-range{
  font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(2.2rem,5vw,3rem); margin:0 0 16px;
  font-variant-numeric:tabular-nums;
}
.est-assume{font-size:.94rem; color:var(--muted)}
.est-caveat{
  font-size:.92rem; background:var(--stone); border-left:3px solid var(--ink);
  padding:14px 16px; border-radius:0 8px 8px 0; margin:16px 0;
}

/* narrow phones: the chooser link keeps its house icon but drops its label,
   because the brand-switch beside it is the longer of the two names */
@media (max-width:620px){
  .brand-switch--home .bs-label{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .topbar-links{gap:14px}
}

/* the Equal Housing statement, carried in the footer of every Hinton's page
   rather than only on the listings page */
.foot-eho{display:flex; gap:11px; align-items:flex-start; margin-top:18px;
  font-size:.86rem; line-height:1.55; color:#9a9a9a}
.foot-eho svg{width:20px; height:20px; flex:none; color:#fff; margin-top:2px}
.foot-eho strong{color:#fff; font-weight:600}

/* a dark pull-out panel, for the one message on a page that should not be
   read as just another paragraph */
.panel-dark{
  background:var(--ink); color:#c8c8c8; padding:34px 32px;
  border-radius:var(--radius); position:sticky; top:24px;
}
.panel-dark h3{color:#fff; font-size:1.55rem; margin:0 0 14px}
.panel-dark p{color:#c8c8c8; margin:0 0 13px}
.panel-dark p:last-of-type{margin-bottom:0}
.panel-dark .eyebrow{color:#fff}
.panel-dark .eyebrow::before{background:#fff}
.panel-dark .btn{background:#fff; color:var(--ink)}
.panel-dark .btn:hover{background:var(--stone-2)}
@media (max-width:900px){
  .panel-dark{position:static; margin-top:34px; padding:30px 26px}
}

/* ---- customer reviews ---------------------------------------------------
   Real quotes, so they are set as quotes: the words lead, the attribution
   follows underneath, and the source is named because a review a visitor can
   go and verify is worth several they cannot. */
.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:34px 32px}
.review{margin:0; padding-top:15px; border-top:2px solid var(--ink); display:flex; flex-direction:column}
.stars{display:flex; gap:3px; margin-bottom:12px; color:var(--ink)}
.stars svg{width:14px; height:14px; display:block}
.review blockquote{
  margin:0 0 16px; font-size:1.04rem; line-height:1.6; text-wrap:pretty;
}
.review blockquote::before{content:"\201C"}
.review blockquote::after{content:"\201D"}
.review figcaption{
  margin-top:auto; display:flex; flex-direction:column; gap:3px;
  font-size:.88rem; color:var(--muted);
}
.review figcaption b{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.07em;
  font-size:.95rem; font-weight:700; color:var(--ink);
}
.review-where{font-family:var(--body); text-transform:none; letter-spacing:0;
  font-weight:400; font-size:.86rem; color:var(--muted)}
.review-job{font-style:italic}
.review-src{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.72rem; color:var(--muted); margin-top:4px;
}
.section--ink .review{border-top-color:#fff}
.section--ink .stars{color:#fff}
.section--ink .review figcaption b{color:#fff}

/* Hinton's accent ---------------------------------------------------------
   Scoped to .brand-hbh, so CMV keeps the black-and-white it was designed in
   and the two companies read as two brands rather than one site with two
   names. This is a token swap only — no component is redefined, so anything
   added later picks the accent up on its own. Links keep --accent-dk (black)
   at rest; the color sits on eyebrows, rules, buttons and hover. */
.brand-hbh{
  --accent:var(--sage);
  --link-hover:var(--sage);
}
.brand-hbh .btn:hover{background:#3d5449}
/* On a black band the working sage is too dark to read, so the logo's own
   light sage takes over there. */
.brand-hbh .section--ink, .brand-hbh .hero, .brand-hbh .cta-band,
.brand-hbh .site-footer, .brand-hbh .landing, .brand-hbh .panel-dark{
  --link-hover:var(--sage-lt);
}
.brand-hbh .section--ink .eyebrow, .brand-hbh .hero .eyebrow,
.brand-hbh .cta-band .eyebrow{color:var(--sage-lt)}
.brand-hbh .section--ink .eyebrow::before, .brand-hbh .hero .eyebrow::before,
.brand-hbh .cta-band .eyebrow::before{background:var(--sage-lt)}
/* Light islands inside a dark band hand the hover color back, as they already
   do for the black theme. */
.brand-hbh .landing-sell, .brand-hbh .form-card{--link-hover:var(--sage)}