/* Villadsen Construction - first look. Kit: HVAC Pro (hvacpro), pushed: Recia + Neue Haas Unica, newsprint + red cedar. */
@font-face { font-family: "Recia"; src: url("../fonts/recia-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Unica"; src: url("../fonts/unica-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Unica"; src: url("../fonts/unica-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #EEE8DD;
  --paper-2: #E3DACB;
  --paper-3: #F5F1E9;
  --ink: #1E211C;
  --ink-2: #474A41;
  --ink-3: #6E6B5F;
  --line: rgba(30, 33, 28, .16);
  --cedar: #8E3B20;
  --cedar-2: #7A321B;
  --cedar-3: #66291555;
  --fir: #182019;
  --fir-2: #222B22;
  --sawdust: #D8C29E;
  --shadow-rgb: 38 30 20;
  --shadow-1: 0 1px 2px rgb(var(--shadow-rgb) / .10), 0 1px 1px rgb(var(--shadow-rgb) / .06);
  --shadow-2: 0 2px 4px rgb(var(--shadow-rgb) / .08), 0 10px 24px rgb(var(--shadow-rgb) / .12);
  --shadow-3: 0 6px 12px rgb(var(--shadow-rgb) / .08), 0 28px 60px rgb(var(--shadow-rgb) / .18);

  --serif: "Recia", "Iowan Old Style", Georgia, serif;
  --sans: "Unica", "Helvetica Neue", Arial, sans-serif;

  /* margin tiers: nav + footer widest, hero next, body narrowest */
  --pad: clamp(16px, 2vw, 32px);
  --w-nav: 1760px;
  --w-hero: 1480px;
  --w-body: 1240px;
  --navh: 72px;
  --r: 3px;
  --ease: cubic-bezier(.5, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--navh) + 8px); }
html, body { margin: 0; background: var(--paper); }
body {
  font: 300 18px/1.55 var(--sans);
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.sc { font-family: var(--sans); font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: .09em; font-size: 1.05em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--cedar); outline-offset: 3px; }

.wrap { width: min(var(--w-body), 100% - 2 * clamp(24px, 6vw, 96px)); margin-inline: auto; }
.kicker { color: var(--cedar); margin-bottom: 18px; }
.lede { font-size: clamp(18px, 1.3vw, 20px); color: var(--ink-2); max-width: 34em; }

/* ---------- buttons: press-in physics (hover firms 1px, active seats 3px) ---------- */
.btn {
  --b: var(--cedar); --b-ink: #F7F1E6; --b-hover: var(--cedar-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 15px 28px;
  border-radius: var(--r);
  background: var(--b); color: var(--b-ink);
  border: 1px solid color-mix(in oklab, #fff 14%, var(--b));
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 3px 0 color-mix(in oklab, #000 35%, var(--b)), 0 6px 14px rgb(var(--shadow-rgb) / .22);
  font: 400 16px/1.1 var(--sans); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .btn:hover { background: var(--b-hover); transform: translateY(1px); box-shadow: 0 1px 0 rgb(255 255 255 / .14) inset, 0 2px 0 color-mix(in oklab, #000 35%, var(--b)), 0 3px 8px rgb(var(--shadow-rgb) / .22); }
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgb(255 255 255 / .1) inset, 0 0 0 color-mix(in oklab, #000 35%, var(--b)), 0 1px 2px rgb(var(--shadow-rgb) / .25); transition-duration: .07s; }
.btn:focus-visible { outline: 2px solid var(--b); outline-offset: 3px; }
.btn--sm { min-height: 44px; padding: 11px 18px; font-size: 15px; }
.btn--paper { --b: #F3EDE2; --b-ink: var(--ink); --b-hover: #E8E0D2; }
.btn--wide { width: 100%; }
.btn .ico { width: 16px; height: 16px; flex: none; }

.textlink { display: inline-flex; gap: 8px; align-items: center; color: var(--cedar); text-decoration: none; font-weight: 400; border-bottom: 1px solid color-mix(in oklab, var(--cedar) 35%, transparent); padding-bottom: 2px; transition: border-color .15s ease, gap .15s ease; }
.textlink:hover { border-color: var(--cedar); gap: 12px; }

/* ---------- wordmark ---------- */
.mark { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.mark__name { font: 700 25px/1 var(--serif); letter-spacing: -.01em; }
.mark__trade { font: 400 15px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--ink-2); }

/* ---------- nav (fixed; scroll state) ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--navh); color: var(--ink);
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.nav__in { height: 100%; width: min(var(--w-nav), 100%); margin-inline: auto; padding-inline: var(--pad); display: flex; align-items: center; gap: 28px; }
.nav__links { margin-left: auto; display: flex; gap: 30px; font-size: 15px; font-weight: 400; }
.nav__links a { text-decoration: none; position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__call-short { display: none; }
.nav.is-scrolled { background: color-mix(in oklab, var(--paper) 90%, transparent); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); box-shadow: 0 1px 0 var(--line); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; min-height: max(100svh, 720px); display: flex; overflow: clip; color: var(--ink); }
.hero__frame { position: absolute; inset: 0; z-index: -1; height: 100%; --mpar-h: 100%; }
.hero__media { position: absolute; inset: 0; }
.hero__media picture, .hero__media img { width: 100%; }
.hero__media img { object-fit: cover; object-position: 62% 50%; }
@media (max-width: 700px) { .hero__media img { object-position: 50% 50%; } }
/* light wash under the headline (sky), dark ground under the number */
.hero__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(238 232 221 / .82) 0, rgb(238 232 221 / .4) 70px, rgb(238 232 221 / 0) 140px),
    linear-gradient(180deg, rgb(238 232 221 / .35) 0%, rgb(238 232 221 / .12) 30%, rgb(238 232 221 / 0) 42%),
    linear-gradient(0deg, rgb(16 19 14 / .82) 0%, rgb(16 19 14 / .5) 24%, rgb(16 19 14 / 0) 50%); }
.hero__in { width: min(var(--w-hero), 100% - 2 * clamp(20px, 4.4vw, 72px)); margin-inline: auto;
  padding: calc(var(--navh) + clamp(28px, 6vh, 72px)) 0 clamp(24px, 4vh, 44px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 100%; }
.hero__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; max-width: 60%; }
.hero h1 { font-size: clamp(44px, 5vw, 84px); line-height: 1; letter-spacing: -.025em; }
.nw { white-space: nowrap; }
.hero__aside { font-size: 19px; line-height: 1.5; color: var(--ink); font-weight: 400; max-width: 24em; }
.hero__call { color: #F3EDE2; }
.hero__label { margin-bottom: 4px; color: var(--sawdust); }
.bignum { display: block; width: 60%; text-decoration: none; color: inherit; line-height: 1; margin-left: -.035em; }
.bignum__fit { display: inline-block; white-space: nowrap; font: 700 200px/.92 var(--serif); letter-spacing: -.035em;
  padding-bottom: .16em; transition: color .2s ease; }
@media (hover: hover) { .bignum:hover .bignum__fit { color: #fff; } }
.bignum:focus-visible { outline-color: var(--sawdust); }
.hero__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 0; padding-top: clamp(14px, 2vh, 20px); border-top: 1px solid rgb(243 237 226 / .28); }
.hero__where { font-size: 16px; font-weight: 400; color: rgb(243 237 226 / .86); }
.hero__where .sc { color: var(--sawdust); }

/* ---------- the work ---------- */
.work { padding: clamp(96px, 12vw, 176px) 0 clamp(96px, 11vw, 160px); }
.work__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.work__head { position: sticky; top: calc(var(--navh) + 40px); }
.work h2 { font-size: clamp(34px, 3.3vw, 52px); line-height: 1.05; margin-bottom: 24px; }
.lines { list-style: none; margin: 0; padding: 0; }
.line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13em); gap: 24px; align-items: baseline; padding: clamp(26px, 2.6vw, 40px) 0; }
.line__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); opacity: .55; display: block; }
.line__rule--end { top: auto; bottom: 0; }
.line h3 { font-size: clamp(36px, 3.7vw, 62px); line-height: 1; letter-spacing: -.03em; }
.line p { font-size: 17px; color: var(--ink-2); }

/* ---------- on the record ---------- */
.record { background: var(--paper-2); padding: clamp(96px, 11vw, 168px) 0; position: relative; }
.record::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgb(30 33 28 / .07) 1px, transparent 1.2px); background-size: 5px 5px; }
.record__grid { position: relative; display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.clip { margin: 0; }
.clip__frame { background: #E9E1D0; padding: clamp(10px, 1.2vw, 18px); box-shadow: var(--shadow-3); overflow: clip; }
.clip__frame img { width: 100%; height: auto; filter: sepia(.12) contrast(1.04); }
.clip figcaption { margin-top: 16px; font-size: 14px; font-weight: 400; color: var(--ink-3); }
.clip figcaption a { color: var(--ink-2); }
.ledger { margin: 0 0 32px; }
.ledger__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0 10px; border-top: 1px solid var(--line); }
.ledger__row:last-child { border-bottom: 1px solid var(--line); }
.ledger dt { color: var(--ink-3); font-size: 16px; }
.ledger dd { margin: 0; font: 700 clamp(60px, 6.6vw, 112px)/1.05 var(--serif); letter-spacing: -.03em; }
.ledger .odo { --odo-line: 1.3; margin-block: -.15em; -webkit-mask-image: linear-gradient(transparent 0, #000 12%, #000 93%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 12%, #000 93%, transparent 100%); }
.ledger__year { color: var(--ink); }
.ledger__num { color: var(--cedar); text-decoration: none; white-space: nowrap; }
.ledger__num:hover { color: var(--cedar-2); }
.record__note { font-size: 19px; color: var(--ink); font-weight: 400; max-width: 26em; margin-bottom: 28px; }
.record__quote { margin: 0; padding-left: 20px; border-left: 2px solid var(--cedar); }
.record__quote p { font-size: 17px; color: var(--ink-2); font-style: normal; }
.record__quote .record__cite { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.record__quote cite { font-style: normal; }

/* ---------- built by villadsen ---------- */
.built { background: var(--fir); color: #EFE8DB; padding: clamp(96px, 11vw, 168px) 0; position: relative; overflow: clip; }
.built::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(70% 90% at 85% 10%, rgb(216 194 158 / .10), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgb(142 59 32 / .16), transparent 65%); }
.built .wrap { position: relative; }
.built .kicker { color: var(--sawdust); }
.built__quote { margin: 0 0 clamp(40px, 5vw, 72px); }
.built__quote p { font: 700 clamp(44px, 6vw, 100px)/1 var(--serif); letter-spacing: -.03em; text-wrap: balance; max-width: 13em; margin-left: -.42em; }
.built__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: start; padding-top: 32px; border-top: 1px solid rgb(239 232 219 / .2); }
.built__detail { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: rgb(239 232 219 / .86); max-width: 30em; }
.built__spec { margin: 0; display: grid; gap: 0; }
.built__spec div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgb(239 232 219 / .14); }
.built__spec div:first-child { padding-top: 0; }
.built__spec dt { color: var(--sawdust); }
.built__spec dd { margin: 0; font-weight: 400; }
.built__src { margin-top: 40px; font-size: 14px; color: rgb(239 232 219 / .6); }
.built__src a { color: rgb(239 232 219 / .85); }

/* ---------- contact ---------- */
.contact { padding: clamp(96px, 11vw, 168px) 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.contact h2 { font-size: clamp(40px, 4.4vw, 72px); line-height: 1.02; margin-bottom: 24px; max-width: 10em; }
.contact__card { background: var(--paper-3); padding: clamp(28px, 3vw, 44px); box-shadow: var(--shadow-2); border-radius: var(--r); display: grid; gap: 28px; }
.contact__k { color: var(--ink-3); margin-bottom: 6px; }
.contact__phone { font: 700 clamp(40px, 3.8vw, 60px)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.contact__phone:hover { color: var(--cedar); }
.contact__addr { font-size: 19px; font-weight: 400; margin-bottom: 10px; }

/* ---------- finale ---------- */
.finale { position: relative; isolation: isolate; min-height: min(100svh, 920px); display: flex; align-items: flex-end; color: #F3EDE2; overflow: clip; }
.finale__frame { position: absolute; inset: 0; z-index: -1; --mpar-h: 100%; height: 100%; }
.finale__frame img { object-fit: cover; object-position: 50% 60%; }
.finale__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(14 16 12 / .72) 0%, rgb(14 16 12 / .3) 40%, rgb(14 16 12 / 0) 70%); }
.finale__in { width: min(var(--w-hero), 100% - 2 * clamp(20px, 4.4vw, 72px)); margin-inline: auto; padding: 0 0 clamp(56px, 9vh, 112px); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.finale h2 { font-size: clamp(40px, 5.4vw, 92px); line-height: 1; letter-spacing: -.03em; max-width: 11em; }

/* ---------- footer ---------- */
.foot { background: var(--fir); color: #EFE8DB; padding: clamp(64px, 7vw, 104px) 0 0; }
.foot__in { width: min(var(--w-nav), 100%); margin-inline: auto; padding-inline: var(--pad); display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 72px); padding-bottom: clamp(48px, 6vw, 88px); }
.mark--foot .mark__trade { color: rgb(239 232 219 / .7); }
.foot__brand p { margin: 18px 0 18px; color: rgb(239 232 219 / .75); max-width: 24em; font-size: 17px; }
.foot__phone { font: 700 32px/1 var(--serif); color: var(--sawdust); text-decoration: none; letter-spacing: -.02em; }
.foot__phone:hover { color: #fff; }
.foot__k { color: var(--sawdust); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 16px; font-weight: 400; }
.foot .sdl { --sdl-ink: rgb(239 232 219 / .9); --sdl-dim: rgb(239 232 219 / .32); }
.foot .sdl a { text-decoration: none; }
.foot__legal { width: min(var(--w-nav), 100%); margin-inline: auto; padding: 22px var(--pad) calc(22px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgb(239 232 219 / .14); font-size: 14px; color: rgb(239 232 219 / .6); }
.foot__legal a { color: rgb(239 232 219 / .85); }

/* ---------- sticky call pill (part: sticky-cta-pill) ---------- */
.scta { --scta-bg: var(--cedar); --scta-ink: #F7F1E6; --scta-ring: rgb(247 241 230 / .25); --scta-font: var(--sans); font-weight: 400; font-size: 15px; letter-spacing: .01em; }
.scta__chip { color: var(--cedar); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero__head { max-width: 100%; }
  .bignum { width: 100%; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__call { margin-left: auto; }
  .work__grid, .record__grid, .built__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .work__head { position: static; }
  .finale__in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  :root { --navh: 64px; }
  body { font-size: 17px; }
  .mark__name { font-size: 22px; }
  .mark__trade { font-size: 13px; letter-spacing: .12em; }
  .nav__call-long { display: none; }
  .nav__call-short { display: inline; }
  .hero { min-height: 100svh; }
  .hero__in { padding-top: calc(var(--navh) + 26px); padding-bottom: calc(18px + env(safe-area-inset-bottom)); gap: 20px; }
  .hero h1 { font-size: clamp(40px, 11.3vw, 48px); line-height: 1.02; }
  .hero__aside { font-size: 15.5px; }
  .hero__row { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero__row .btn { width: 100%; order: -1; }
  .hero__where { font-size: 14px; }
  .line { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .built__quote p { margin-left: -.4em; font-size: calc((100vw - 44px) / 11.3); line-height: 1.08; }
  .built__spec div { grid-template-columns: 6.5em minmax(0, 1fr); }
  .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__brand, .foot__col:last-child { grid-column: 1 / -1; }
  .foot__legal { flex-direction: column; gap: 6px; }
  .finale h2 { font-size: clamp(36px, 10vw, 48px); }
  .finale__in .btn { width: 100%; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .hero h1 { font-size: 44px; }
  .hero__aside { display: none; }
  .hero__in { padding-top: calc(var(--navh) + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .nav, .nav__links a::after { transition: none; }
}

/* phones: the lumber stack rides close above the number, so the ground under the number gets a deeper shade */
@media (max-width: 700px) {
  .hero__shade { background:
    linear-gradient(180deg, rgb(238 232 221 / .82) 0, rgb(238 232 221 / .4) 64px, rgb(238 232 221 / 0) 130px),
    linear-gradient(180deg, rgb(238 232 221 / .55) 0%, rgb(238 232 221 / .35) 28%, rgb(238 232 221 / 0) 44%),
    linear-gradient(0deg, rgb(16 19 14 / .9) 0%, rgb(16 19 14 / .72) 28%, rgb(16 19 14 / .25) 42%, rgb(16 19 14 / 0) 56%); }
  .finale__shade { background: linear-gradient(0deg, rgb(14 16 12 / .8) 0%, rgb(14 16 12 / .45) 45%, rgb(14 16 12 / 0) 75%); }
}
@media (max-width: 700px) { .hero__aside { text-shadow: 0 0 10px rgb(238 232 221 / .9), 0 0 2px rgb(238 232 221 / .8); } }