/* ==========================================================================
   REDI-HOME Canada
   Premium factory-built homes and general contracting, Ontario.

   Design notes. The motif is taken from the product itself: the exterior is
   board and batten steel siding, so the page carries thin vertical battens as
   its only decorative device, used on dark bands and section joins. Corners
   are nearly square, because the houses are. Specification data is set in a
   monospace face and ruled like an engineering drawing, which is what a buyer
   comparing two models is actually reading.

   Palette is charcoal siding, warm plaster white and oak. Deliberately not
   construction orange: this is a house purchase, not a tool hire.

   No JavaScript is used anywhere on this site. Every interaction is a link,
   a form control, or CSS. Motion is CSS only and is switched off entirely
   under prefers-reduced-motion.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Trirong';
  src: url('../fonts/trirong-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Trirong';
  src: url('../fonts/trirong-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --ink:       #1c1c1c;
  --ink-soft:  #616161;   /* brand grey */
  --graphite:  #2b2b2b;
  --graphite-2:#1e1e1e;
  --paper:     #f6f4f0;
  --panel:     #ffffff;
  --line:      #ddd7cd;
  --line-soft: #ebe6dd;
  --oak:       #87161c;   /* brand red, sampled from the logo artwork */
  --oak-dk:    #6b1116;
  --oak-tint:  #f6ecec;
  --on-dark:   #eae5dd;
  --on-dark-2: #a8b0b0;

  --wrap: 1180px;
  --gap: 1.5rem;

  --display: 'Trirong', Georgia, 'Times New Roman', serif;
  --body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'Courier New', monospace;

  --radius: 2px;
  --hdr-h: 60px;

  /* The board and batten motif was a repeating vertical gradient over the
     dark bands and the footer. David, 2026-09-07: "remove the lines". The
     definition is gone rather than unused so it cannot quietly come back. */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--oak-dk); text-underline-offset: .18em; }
a:hover { color: var(--oak); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
/* Trirong ships regular and bold only, so an italic here would be a synthetic
   slant of a high-contrast serif, which looks broken at display size. The
   emphasis is carried in colour instead, which is the deliberate choice. */
h1 em, h2 em { font-style: normal; color: var(--oak); }
ul { margin: 0 0 1em; padding-left: 1.15em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--oak);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--on-dark);
  padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
.band { padding: 3rem 0; }
.band--tight { padding: 2rem 0; }
.band--panel { background: var(--panel); border-block: 1px solid var(--line); }
.band--dark {
  background: var(--graphite);
  color: var(--on-dark);
}
.band--dark h2, .band--dark h3 { color: #fff; }
.band--dark a { color: #e6cdb4; }
.lede { font-size: 1.1875rem; color: var(--ink-soft); max-width: 60ch; }
.band--dark .lede { color: var(--on-dark-2); }
.measure { max-width: 68ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--oak-dk);
  margin: 0 0 .75rem;
}
.band--dark .eyebrow { color: #d8ad83; }

.h-xl { font-size: clamp(2.25rem, 7vw, 3.75rem); }
.h-lg { font-size: clamp(1.75rem, 4.6vw, 2.5rem); }
.h-md { font-size: clamp(1.3rem, 3vw, 1.6rem); }

/* ---------- header ---------- */
.hdr {
  background: var(--panel);
  color: var(--ink);
  border-bottom: 3px solid var(--oak);
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--hdr-h);
}
.lockup { display: block; text-decoration: none; color: inherit; padding: .55rem 0; }
.lockup img { width: 150px; height: auto; }
.callbtn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--oak); color: #fff; text-decoration: none;
  padding: .6rem .85rem; border-radius: var(--radius);
  font-weight: 600; font-size: .9375rem; white-space: nowrap;
}
.callbtn:hover { background: var(--oak-dk); color: #fff; }
.callbtn svg { width: 18px; height: 18px; fill: currentColor; }
.callbtn__lbl { display: none; }

/* ---------- nav ---------- */
.nav { background: var(--graphite-2); }
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: nowrap; gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: block;
  padding: .8rem 1rem;
  color: var(--on-dark-2);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--oak); }

/* ---------- hero ---------- */
.hero { background: var(--panel); border-bottom: 1px solid var(--line); }
.hero__media { position: relative; }
.hero__body { padding: 2.25rem 0 2.5rem; }
.hero__lede { font-size: 1.1875rem; color: var(--ink-soft); max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { width: 19px; height: 19px; fill: currentColor; }
.btn--primary { background: var(--oak); color: #fff; }
.btn--primary:hover { background: var(--oak-dk); color: #fff; }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.band--dark .btn--ghost { border-color: var(--on-dark); color: var(--on-dark); }
.band--dark .btn--ghost:hover { background: var(--on-dark); color: var(--graphite); }

/* ---------- photographs ----------
   Every picture is a real file now rather than a placeholder box, so the
   rules that matter are aspect ratio and not letting a tall portrait shot
   run away with the page.                                                  */
.hero__media img,
.split img,
.card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.hero__media img { max-height: 520px; object-fit: cover; object-position: center 42%; }
.split img.tall { max-height: 560px; object-fit: cover; }
.model img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--line);
}

/* ---------- gallery ---------- */
.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
.gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .gallery a:hover img {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(28,28,28,.14);
  }
}

/* ---------- facts strip ---------- */
.facts {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--line);
}
.facts li {
  list-style: none;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.facts__k {
  display: block;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: .15rem;
}
.facts__v { display: block; color: var(--ink-soft); font-size: .9375rem; }

/* ---------- model cards ---------- */
.models { display: grid; gap: 1.5rem; grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; }
.model {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .model:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(23,25,26,.11);
    border-color: var(--line);
  }
}
.model__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.model__name { font-size: 1.4rem; margin-bottom: .1rem; }
.model__dim {
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--oak-dk);
  margin-bottom: .75rem;
}
.model__note { color: var(--ink-soft); font-size: .96875rem; }
.model__more { margin-top: auto; padding-top: 1rem; font-weight: 600; text-decoration: none; }
.model__more::after { content: " \203A"; }

/* ---------- specification table ---------- */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  margin: 0 0 1.5rem;
}
.spec caption {
  text-align: left;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--ink);
}
.spec th, .spec td {
  text-align: left;
  padding: .7rem .5rem .7rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.spec th { font-weight: 600; width: 42%; }
.spec td { font-family: var(--mono); font-size: .875rem; color: var(--ink-soft); }

/* ---------- tick lists ---------- */
.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .55rem; height: .3rem;
  border-left: 2px solid var(--oak);
  border-bottom: 2px solid var(--oak);
  transform: rotate(-45deg);
}
.band--dark .ticks li::before { border-color: #d8ad83; }

/* ---------- services and process ---------- */
.grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem;
}
.card h3 { font-size: 1.1875rem; }
.card p:last-child { margin-bottom: 0; }
.band--dark .card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.14);
}

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.5rem 3.4rem;
  border-left: 2px solid var(--line);
  margin-left: 1.05rem;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -1.05rem; top: -.15rem;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--graphite);
  color: #fff;
  font-family: var(--mono);
  font-size: .75rem;
  border-radius: 50%;
}
.steps h3 { font-size: 1.125rem; margin-bottom: .2rem; }
.steps p { color: var(--ink-soft); margin-bottom: 0; }
.band--dark .steps li { border-left-color: rgba(255,255,255,.2); }
.band--dark .steps li::before { background: var(--oak); }
.band--dark .steps p { color: var(--on-dark-2); }

/* ---------- floor plan drawings ----------
   Line art on white, so it gets a rule rather than a shadow, and it sits on
   white rather than on the warm page colour so the drawing reads true.     */
.plan {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem;
  text-decoration: none;
}
.plan img { width: 100%; height: auto; border: 0; border-radius: 0; }
.plan__z {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oak-dk);
  padding: .6rem .25rem .1rem;
}
.plan:hover .plan__z { color: var(--ink); text-decoration: underline; }

/* a value that is arithmetic from a published figure rather than published
   in its own right. Removed the moment it is confirmed.                     */
.tbc { border-bottom: 1px dotted var(--oak); }
.tbc::after {
  content: " to confirm";
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oak-dk);
  background: var(--oak-tint);
  padding: .1rem .3rem;
  border-radius: var(--radius);
  margin-left: .3rem;
  white-space: nowrap;
}

/* vertical spacing between a heading block and the grid under it */
.gap { height: 2rem; }
.gap--sm { height: 1.5rem; }
.gap--lg { height: 2.5rem; }

/* ---------- form ---------- */
.form { max-width: 40rem; }
.field { margin-bottom: 1.15rem; }
.field > label {
  display: block;
  font-weight: 600;
  font-size: .9375rem;
  margin-bottom: .35rem;
}
.field__hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: .875rem; }
.band--dark .field__hint { color: var(--on-dark-2); }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: .7rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
textarea { min-height: 8rem; resize: vertical; }
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.consent {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--oak-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin-bottom: 1.25rem;
  font-size: .9375rem;
}
.consent input { margin-top: .28rem; width: 1.05rem; height: 1.05rem; flex: none; }
.req { color: var(--oak-dk); }

/* ---------- contact panel ---------- */
.contactlist { list-style: none; padding: 0; margin: 0; }
.contactlist li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.contactlist a { font-weight: 600; }
.contactlist__k {
  display: block;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .1rem;
}

/* ---------- footer ---------- */
.ftr {
  background: var(--graphite-2);
  color: var(--on-dark-2);
  padding: 2.5rem 0 2rem;
  font-size: .9375rem;
}
.ftr h2 { color: #fff; font-size: 1.0625rem; margin-bottom: .6rem; }
.ftr a { color: var(--on-dark); }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: .4rem; }
.ftr__grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.ftr__legal {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .8125rem;
}

/* ---------- wide screens ---------- */
@media (min-width: 900px) {
  body { font-size: 1.09375rem; }
  .band { padding: 4.5rem 0; }
  .band--tight { padding: 2.5rem 0; }
  .callbtn__lbl { display: inline; }
  
  .hero__in { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3rem; }
  .hero__body { padding: 4rem 0; }

  .facts { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .facts li { border-bottom: 0; }

  .models { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .lockup img { width: 190px; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
  .split--wide { grid-template-columns: 1.15fr .85fr; }
  .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}

/* ---------- motion ----------
   House style: subtle and professional, never showy, and none of it may
   depend on JavaScript. Entrance animations move `translate`; the hover lift
   moves `transform`. Written the other way round the entrance animation holds
   its fill, wins the cascade, and silently kills the hover lift.            */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
    @keyframes reveal-in {
      from { opacity: 0; translate: 0 14px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
  img {
    transition: opacity .4s ease;
  }
  @starting-style {
    img { opacity: 0; }
  }
}

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- print ---------- */
@media print {
  .nav, .callbtn, .hero__cta { display: none; }
  body { background: #fff; font-size: 11pt; }
  .band { padding: 1rem 0; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* The closing call to action, on every page except the contact page, which is
   already the form. David, 2026-09-07: "add more call to actions". */
.endcta { background: var(--graphite); color: var(--on-dark); text-align: center; }
.endcta h2 { color: #fff; margin: 0 0 .5rem; }
.endcta p { color: var(--on-dark-2); max-width: 52ch; margin: 0 auto 1.5rem; }
.endcta .hero__cta { justify-content: center; }
.ftr__cta { margin-top: 1.25rem; }