/* Precision Floors. Espresso field, oak stain, warm sanded paper. Krona One for the name, Mulish for everything else.
   One radius (0), one hairline (1px), 8px spacing scale. Phones first. */
:root {
  --esp: #221812; --esp2: #2C2018; --oak: #C8975F; --oakl: #E2C39A; --oakd: #85592F;
  --cream: #F3EBDF; --body-d: #D9CCBB; --paper: #F6F1EA; --panel: #EFE5D6; --ink: #1E1611; --soft: #5B4C40; --line: #DCCFBE;
  --line-d: rgba(200, 151, 95, .28);
  --f-display: "Krona One", "Arial Black", sans-serif; --f-text: "Mulish", system-ui, sans-serif; --muted: #5B4C40; --accent: #85592F;
  --fd: "Krona One", "Arial Black", sans-serif;
  --ft: "Mulish", system-ui, sans-serif;
  --g: 20px;
  --m-ease: cubic-bezier(.22, .9, .25, 1);
  --m-dur: 1s;
  --m-rise: 28px;
}
@media (max-width: 719px) { :root { --m-dur: .8s; --m-rise: 16px; } }
@media (min-width: 960px) { :root { --g: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--ft); }
@media (min-width: 960px) { body { font-size: 1.125rem; } }
h1, h2, h3, p, figure, blockquote, dl, dd, address { margin: 0; }
address { font-style: normal; }
a { color: inherit; }
svg { display: block; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--g); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--oak); color: var(--esp); font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--oak); outline-offset: 3px; }

.label { font: 700 .75rem/1.2 var(--ft); letter-spacing: .16em; text-transform: uppercase; }
.num { color: var(--oakd); }
/* Section numerals: Krona One, small, in oak. Above the heading on phones; hung in grid column 1 on desktop. */
.secno { font: 400 .875rem/1 var(--fd); letter-spacing: .04em; color: var(--oakd); margin-bottom: 16px; }

.preview { background: #160F0B; color: var(--body-d); font-size: .8125rem; line-height: 1.4; padding: 8px var(--g); text-align: center; }
.preview b { color: var(--cream); font-weight: 600; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--esp); color: var(--cream); box-shadow: 0 1px 0 var(--esp); transition: transform .5s var(--m-ease), box-shadow .3s; }
.top.is-scrolled { box-shadow: 0 1px 0 var(--line-d); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.wm { font: 400 .78rem/1 var(--fd); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 14px 0; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav .m-link { display: none; font-weight: 600; font-size: 1rem; text-decoration: none; padding: 12px 0; }
.tel { font: 700 1.0625rem/1 var(--ft); text-decoration: none; padding: 14px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tel:hover { color: var(--oakl); }
@media (min-width: 960px) {
  .top-in { min-height: 80px; }
  .wm { font-size: .86rem; }
  .nav .m-link { display: inline-block; }
  .tel { margin-left: 12px; padding: 12px 18px; border: 1px solid var(--line-d); }
  .tel:hover { border-color: var(--oak); }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; background: var(--oak); color: var(--esp); font: 700 1.0625rem/1 var(--ft); letter-spacing: .01em; text-decoration: none; font-variant-numeric: tabular-nums; --m-fill: var(--oakl); transition: background .3s, transform .2s; }
.btn:hover { background: var(--oakl); }
.btn:active { transform: translateY(1px); }
.btn-d { background: var(--esp); color: var(--cream); --m-fill: #4A3424; }
.btn-d:hover { background: #3A2a1E; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--esp); color: var(--cream); display: flex; flex-direction: column; }
.floor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.floor-d { display: none; }
.hero-space { aspect-ratio: 390 / 282; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 40px; }
.kick { color: var(--oak); }
h1 { margin-top: 14px; width: min-content; font: 400 clamp(2.6rem, 11.4vw, 6.4rem)/1.04 var(--fd); letter-spacing: .03em; text-transform: uppercase; }
.lede { margin-top: 14px; max-width: 30ch; font-size: 1.125rem; line-height: 1.5; color: var(--body-d); }
.hero-act { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 10px; }
.hero-act .btn { width: 100%; }
.hrs { font: 600 .9375rem/1.3 var(--ft); color: var(--body-d); font-variant-numeric: tabular-nums; }
.more { display: none; font-weight: 700; text-decoration: none; padding: 14px 0; }
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hw > span { display: inline-block; }
.spec { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-d); }
.spec div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-d); }
.spec div:nth-child(odd) { border-right: 1px solid var(--line-d); }
.spec div:nth-child(even) { padding-left: 14px; }
.spec dt { font: 700 .75rem/1.2 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--oak); }
.spec dd { margin-top: 4px; font-size: 1rem; line-height: 1.35; color: var(--cream); }
@media (min-width: 600px) {
  .hero-act .btn { width: auto; }
}
@media (min-width: 960px) {
  .floor-m, .hero-space { display: none; }
  .floor-d { display: block; }
  .hero { min-height: max(680px, calc(100svh - 116px)); justify-content: flex-end; }
  /* The hairlines fade into espresso at the hero's foot on the type side; the laid floor runs on into the edge band below. */
  .hero::after { content: ""; position: absolute; left: 0; bottom: 0; width: 62.5%; height: 60px; background: linear-gradient(rgba(34, 24, 18, 0), var(--esp)); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); pointer-events: none; }
  .hero-copy { padding-top: 120px; padding-bottom: 64px; }
  h1 { margin-top: 20px; font-size: clamp(3.6rem, 6.4vw, 6.4rem); }
  .lede { margin-top: 22px; max-width: 34ch; font-size: 1.375rem; line-height: 1.45; }
  .hero-act { margin-top: 32px; }
  .more { display: inline-flex; gap: 8px; }
  /* As wide as its four cells, so the top rule ends with the last one. */
  .spec { margin-top: 48px; width: fit-content; max-width: 760px; grid-template-columns: repeat(4, auto); }
  .spec div, .spec div:nth-child(even) { padding: 14px 32px 0 0; border: 0; }
  .spec div:last-child { padding-right: 0; }
  .spec div:nth-child(n+2) { padding-left: 16px; border-left: 1px solid var(--line-d); }
}

/* The floor lays itself: hairlines draw, raw woods appear, then the stain goes on column by column. */
@media (prefers-reduced-motion: no-preference) {
  .floor .lines path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pf-draw 1.7s cubic-bezier(.6, 0, .3, 1) forwards; }
  .floor .raw, .floor .tex, .floor .joints, .floor .sill { opacity: 0; animation: pf-in .7s .45s ease-out forwards; }
  /* The stain, column by column left to right, the same pace on both sizes: done by about 1.8s. */
  .floor .stain > g { opacity: 0; animation: pf-in .5s var(--m-ease-io) forwards; }
  .floor .stain > g:nth-child(1) { animation-delay: .95s; }
  .floor .stain > g:nth-child(2) { animation-delay: 1.02s; }
  .floor .stain > g:nth-child(3) { animation-delay: 1.09s; }
  .floor .stain > g:nth-child(4) { animation-delay: 1.16s; }
  .floor .stain > g:nth-child(5) { animation-delay: 1.23s; }
  .floor .stain > g:nth-child(6) { animation-delay: 1.3s; }
}
/* The type follows once the hairlines are well under way: kicker, the name word by word, the line, the call, the spec.
   CSS keyframes, not the kit's reveal transitions: those never started on the first screen (no before-change style). */
@media (prefers-reduced-motion: no-preference) {
  .hero .in, .hero .spec.in > div { animation: pf-rise .9s var(--m-ease) both; }
  .hero .spec.in { animation: none; }
  .hero .kick.in { animation-delay: .64s; }
  .hero .hw > span { animation: pf-word .9s var(--m-ease) .72s both; }
  .hero .hw + .hw > span { animation-delay: .81s; }
  .hero .lede.in { animation-delay: .98s; }
  .hero .hero-act.in { animation-duration: .6s; animation-delay: 1.06s; }
  .hero .spec.in > div:nth-child(1) { animation-delay: 1.14s; }
  .hero .spec.in > div:nth-child(2) { animation-delay: 1.2s; }
  .hero .spec.in > div:nth-child(3) { animation-delay: 1.26s; }
  .hero .spec.in > div:nth-child(4) { animation-delay: 1.32s; }
}
@keyframes pf-rise { from { opacity: 0; transform: translate3d(0, var(--m-rise), 0); } to { opacity: 1; transform: none; } }
@keyframes pf-word { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes pf-draw { to { stroke-dashoffset: 0; } }
@keyframes pf-in { to { opacity: 1; } }

/* ---------- section edge: a band cut from the chevron floor, drawn 1:1 ---------- */
.edge-w { height: 24px; overflow: hidden; }
.edge { width: 100%; height: 24px; }
.edge.e-d { display: none; }
@media (min-width: 960px) { .edge-w, .edge { height: 32px; } .edge.e-m { display: none; } .edge.e-d { display: block; } }

/* ---------- services ---------- */
.services { padding: 0 0 48px; }
.services .edge-w { margin-bottom: 56px; }
.sv-head h2, .vi-head h2 { font: 600 clamp(2.375rem, 1.5rem + 3.6vw, 3.5rem)/1.04 var(--ft); letter-spacing: -.03em; }
.sv-list { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.sv-list li { border-bottom: 1px solid var(--line); }
/* Phones: no row numbers (the drawing under each row separates them); the title starts at the margin. */
.sv-list a { display: grid; grid-template-columns: 1fr; align-items: baseline; padding: 20px 0 22px; text-decoration: none; color: inherit; }
.sv-list .n { display: none; grid-row: 1 / 3; font: 500 .8125rem/1.6 var(--ft); font-variant-numeric: tabular-nums; color: var(--soft); padding-top: 4px; }
.sv-list .nm { font: 700 1.3125rem/1.25 var(--ft); letter-spacing: -.005em; transition: color .3s; }
.sv-list .ds { margin-top: 6px; color: var(--soft); font-size: 1rem; line-height: 1.5; max-width: 46ch; }
.sv-list .m-nudge { grid-row: 1; grid-column: 3; color: var(--oakd); opacity: .5; transition: opacity .3s, transform .4s var(--m-ease); }
/* Phones and touch screens: every drawing is laid full-bleed under its row, and the rows carry no arrow. */
.sv-strip { margin: 8px calc(-1 * var(--g)) 28px; }
@media (max-width: 959px), (hover: none) {
  .sv-list .m-nudge { display: none; }
  .sv-list li:last-child { border-bottom: 0; }
  .sv-list li:last-child .sv-strip { margin-bottom: 0; }
}
.sv-strip svg { width: 100%; height: auto; }
.sv-fig { display: none; margin: 0; }
.sv-fig svg { width: 100%; height: 100%; }
.dl text { font-family: var(--ft); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink); }
@media (min-width: 960px) {
  .services { padding-bottom: 144px; }
  .services .edge-w { margin-bottom: 104px; }
  .sv-strip { margin: 0 0 32px; }
  .sv-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; align-items: start; }
  .sv-head { grid-column: 1 / 13; display: grid; grid-template-columns: subgrid; align-items: start; }
  .sv-head .secno, .vi-head .secno { grid-column: 1; margin: 14px 0 0; }
  .sv-head h2 { grid-column: 2 / 10; }
  .sv-list { grid-column: 1 / 7; margin-top: 40px; }
  .sv-list a { grid-template-columns: calc((100% - 5 * 32px) / 6) 1fr 2rem; column-gap: 32px; padding: 26px 0 28px; }
  .sv-list .n { display: block; }
  .sv-list .ds { grid-column: 2; }
  .sv-list .nm { font-size: 1.625rem; }
  .sv-list .ds { font-size: 1.0625rem; }
}
/* Desktop with a mouse: the drawings sit in one sticky figure beside the list, and hover or focus picks one. */
@media (min-width: 960px) and (hover: hover) {
  .sv-strip { display: none; }
  .sv-fig { display: block; grid-column: 7 / 13; grid-row: 2; position: sticky; top: 112px; margin-top: 40px; aspect-ratio: 600 / 560; }
  .sv-fig > .dr { position: absolute; inset: 0; }
  .sv-list a.is-active .nm { color: var(--oakd); }
  .sv-list .m-nudge { opacity: 0; transition: opacity .2s, transform .4s var(--m-ease); }
  .sv-list a.is-active .m-nudge, .sv-list a:hover .m-nudge { opacity: 1; transform: translateX(6px); }
}

/* ---------- reviews ---------- */
.proof { background: var(--esp); color: var(--cream); padding-bottom: 64px; }
.strip { position: relative; height: 150px; overflow: hidden; }
.strip > div { position: absolute; inset: 0; }
.strip .boards { width: 100%; height: 100%; }
.proof-grid { padding-top: 64px; }
.proof .num { color: var(--oak); }
.proof .secno { color: var(--oak); }
.rv-t { color: var(--oak); }
.mcols { display: none; }
.q-lead { margin-top: 40px; }
.q-lead p { font: 600 1.75rem/1.25 var(--ft); letter-spacing: -.01em; color: var(--cream); max-width: 22ch; }
figcaption { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.who { font: 700 .8125rem/1.3 var(--ft); letter-spacing: .14em; text-transform: uppercase; color: var(--oakl); }
.src { font-size: .9375rem; color: var(--body-d); }
/* Phone: the stain match as two board strips, raw woods over the same boards matched. */
.mstrips { margin-top: 36px; display: grid; gap: 12px; }
.ms-l { display: block; margin-bottom: 8px; font: 700 .75rem/1.2 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--body-d); }
.ms-b { position: relative; height: 72px; overflow: hidden; }
.ms-b svg, .ms-b > div { position: absolute; inset: 0; width: 100%; height: 100%; }
.q-more { margin-top: 64px; border-top: 1px solid var(--line-d); }
.q-more figure { padding: 28px 0 32px; border-bottom: 1px solid var(--line-d); }
.q-more figure:last-child { border-bottom: 0; padding-bottom: 0; }
.q-more p { font-size: 1.0625rem; line-height: 1.55; color: var(--body-d); max-width: 60ch; }
.q-more figcaption { margin-top: 16px; }
@media (min-width: 960px) {
  .proof { padding-bottom: 88px; }
  .strip { height: 200px; }
  .q-lead p { font-size: clamp(2.5rem, 3.6vw, 3.25rem); line-height: 1.12; letter-spacing: -.015em; text-indent: -.42em; }
  .q-lead p * { text-indent: 0; }
  .proof-grid { padding-top: 120px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; }
  .rv-head { grid-column: 1 / 13; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
  .rv-head .secno { grid-column: 1; margin: 0; }
  .rv-t { grid-column: 2 / 9; white-space: nowrap; }
  .q-lead { grid-column: 3 / 9; grid-row: 2; margin-top: 24px; }
  .mstrips { display: none; }
  /* The stain match as the section's image: raw woods beside the same boards matched, the stain wiping down. */
  .mcols { grid-column: 9 / 13; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-self: start; margin-top: 34px; }
  .mc-b { position: relative; height: clamp(340px, 30vw, 420px); }
  .mc-b svg, .mc-b > div { position: absolute; inset: 0; width: 100%; height: 100%; }
  .mc-stain { --m-dur: 1.8s; }
  .mc-l { display: block; margin-top: 12px; font: 700 .6875rem/1.2 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--body-d); }
  .q-more { grid-column: 3 / 13; margin-top: 96px; display: grid; grid-template-columns: repeat(10, 1fr); column-gap: 32px; }
  .q-more figure:first-child { grid-column: 1 / 6; }
  .q-more figure:last-child { grid-column: 6 / 11; }
  .q-more figure { padding: 32px 0 0; border-bottom: 0; }
  .q-more figure + figure { border-left: 0; }
}

/* ---------- about ---------- */
.about { position: relative; overflow: hidden; background: var(--oakl); color: var(--ink); padding: 80px 0 88px; --vs: clamp(2.5rem, 10.6vw, 8rem); }
.ab-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ab-grid { position: relative; }
.about .secno { color: #6E4824; }
.ab-spec { margin-top: 32px; border-top: 1px solid rgba(34, 24, 18, .3); }
.ab-spec div { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; padding: 12px 0; min-height: 48px; border-bottom: 1px solid #B88F5E; }
.ab-spec dt { font: 700 .75rem/1.2 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: #6E4824; }
.ab-spec dd { font-size: 1.125rem; line-height: 1.35; color: var(--esp); }
.vet { margin-top: 4px; font: 400 var(--vs)/1.02 var(--fd); letter-spacing: .02em; text-transform: uppercase; color: var(--esp); }
.ab-copy { margin-top: 24px; max-width: 38rem; }
.ab-copy p { font-size: 1.125rem; line-height: 1.6; color: #3B2C21; }
@media (min-width: 960px) {
  .about { padding: 144px 0 96px; }
  .ab-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; }
  .ab-grid > .secno { grid-column: 1 / 13; }
  .vet { grid-column: 1 / 13; grid-row: 2; }
  /* Under OWNED: a spec sheet in ruled rows; the copy starts level with its top rule and both columns end together. */
  .ab-spec { display: block; grid-column: 1 / 6; grid-row: 3; margin-top: 40px; align-self: start; border-top: 1px solid rgba(34, 24, 18, .3); }
  .ab-spec div { display: grid; grid-template-columns: 8.5rem 1fr; align-items: baseline; padding: 22px 0 23px; border-bottom: 1px solid #B88F5E; }
  .ab-spec dt { font: 700 .75rem/1.2 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: #6E4824; }
  .ab-spec dd { font-size: 1.25rem; line-height: 1.35; color: var(--esp); }
  .ab-copy { grid-column: 8 / 13; grid-row: 3; align-self: stretch; margin-top: 40px; padding-top: 12px; border-top: 1px solid rgba(34, 24, 18, .3); border-bottom: 1px solid #B88F5E; max-width: none; }
  .ab-copy p { font-size: 1.5rem; line-height: 1.5; max-width: 28ch; }
}

/* ---------- hours & contact ---------- */
.visit { padding: 0 0 64px; }
.visit .edge-w { margin-bottom: 56px; }
.bignum { display: inline-block; margin-top: 28px; font: 800 clamp(2.1rem, 10vw, 4.5rem)/1 var(--ft); letter-spacing: -.02em; text-decoration: none; font-variant-numeric: tabular-nums; color: var(--ink); background: linear-gradient(var(--oak), var(--oak)) 0 100% / 0 2px no-repeat; padding-bottom: 6px; transition: background-size .6s var(--m-ease); }
.bignum:hover { background-size: 100% 2px; }
/* Phones: the number is the main action, so its underline is always there. */
@media (max-width: 959px), (hover: none) { .bignum { background-size: 100% 2px; } }
.btn-o { background: transparent; color: var(--esp); box-shadow: inset 0 0 0 1px var(--esp); --m-fill: rgba(34, 24, 18, .08); }
.btn-o:hover { background: rgba(34, 24, 18, .06); }
.vi-line { margin-top: 12px; color: var(--soft); }
.vi-where { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.vi-where .label, .tt caption { color: var(--oakd); }
.vi-where address { margin-top: 10px; font-size: 1.125rem; line-height: 1.5; }
.vi-where .btn { margin-top: 20px; }
.area-l { margin-top: 32px; }
.vi-where .area-l + p { margin-top: 8px; }
.tt { margin-top: 40px; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tt caption { text-align: left; padding-bottom: 14px; }
.tt tbody { border-top: 1px solid var(--ink); }
.tt tr { border-bottom: 1px solid var(--line); }
.tt th, .tt td { padding: 11px 0; font-size: 1rem; line-height: 22px; text-align: left; vertical-align: baseline; }
.tt th { font-weight: 700; padding-right: 12px; }
.tt td { text-align: right; color: var(--soft); white-space: nowrap; }
.tt tr.off td { color: #7E6E61; }
.tt tr.is-today { background: var(--panel); }
.tt tr.is-today th { box-shadow: inset 3px 0 0 var(--oak); padding-left: 14px; }
.tt tr.is-today td { color: var(--ink); font-weight: 700; padding-right: 14px; }
.vi-room { display: none; margin: 0; }
.vi-room svg { width: 100%; height: auto; }
.today { margin-left: 8px; font: 700 .75rem/1 var(--ft); letter-spacing: .16em; text-transform: uppercase; color: var(--oakd); }
@media (min-width: 960px) {
  .visit { padding-bottom: 90px; }
  .visit .edge-w { margin-bottom: 104px; }
  .vi-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; align-items: start; }
  .vi-head { grid-column: 1 / 8; display: grid; grid-template-columns: subgrid; align-items: start; }
  .vi-head > :not(.secno) { grid-column: 2 / 8; }
  .vi-where { grid-column: 2 / 7; margin-top: 56px; }
  .tt { grid-column: 2 / 7; margin-top: 48px; }
  .vi-room { display: block; grid-column: 8 / 13; grid-row: 1 / 4; margin-top: 2px; }
  .tt th, .tt td { padding: 16px 0; font-size: 1.125rem; line-height: 1.5; }
}

/* ---------- footer ---------- */
.foot { --ffh: clamp(150px, 20vw, 280px); position: relative; overflow: hidden; background: var(--esp); color: var(--body-d); }
.foot-field { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The hairline field ends on the floor's top edge and is a whole number of 30px courses tall, so its lines run into the laid floor's joints. */
.foot > .foot-field { inset: auto 0 var(--ffh) 0; height: 3000px; }
.foot-in { position: relative; padding-top: 72px; padding-bottom: 40px; }
.foot-name { font: 400 clamp(2.2rem, 9.4vw, 7.6rem)/1.04 var(--fd); letter-spacing: .03em; text-transform: uppercase; color: var(--cream); }
.foot-vet { margin-top: 18px; color: var(--oak); }
.foot-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 32px; }
.fcol p { font-size: 1rem; line-height: 1.6; }
.fcol p + p { margin-top: 10px; }
.fcol .fh { color: var(--oak); margin-bottom: 12px; font-size: .75rem; line-height: 1.2; }
.foot-edge { position: relative; z-index: 1; }
.fcol a { text-decoration: none; color: var(--cream); display: inline-block; padding: 4px 0; }
.flinks { display: flex; flex-wrap: wrap; column-gap: 20px; }
.flinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.fine { margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; font-size: .9375rem; line-height: 1.4; }
.fine .copy { display: inline-flex; align-items: center; min-height: 44px; }
.fine a { text-decoration: none; color: var(--body-d); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.fine-links { display: flex; gap: 20px; }
.foot-floor { position: relative; height: var(--ffh); overflow: hidden; }
/* Drawn 1:1 in CSS pixels from the left edge (see footFloorPx in gen-site.mjs), never scaled. */
.foot-floor .laid { position: absolute; left: 0; top: 0; width: 2560px; height: 300px; }
.laid { width: 100%; height: 100%; }
@media (min-width: 960px) {
  .foot-in { padding-top: 120px; padding-bottom: 48px; }
  /* Fitted to the content width (cols 1-12): the name's width is about 13.48 times its font size. */
  .foot-name { font-size: calc((min(100vw, 1360px) - 80px) * .0741); white-space: nowrap; }
  .foot-grid { margin-top: 72px; grid-template-columns: repeat(12, 1fr); column-gap: 32px; }
  .fcol:nth-child(1) { grid-column: 1 / 5; }
  .fcol:nth-child(2) { grid-column: 5 / 9; }
  .fcol:nth-child(3), .foot-grid nav { grid-column: 9 / 13; }
  .fine { margin-top: 72px; }
}

/* ---------- phone action bar ---------- */
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--esp); border-top: 1px solid var(--line-d); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px; color: var(--cream); text-decoration: none; font-weight: 700; font-size: 1rem; --m-fill: rgba(200, 151, 95, .18); }
.actionbar a:first-child { background: var(--oak); color: var(--esp); --m-fill: var(--oakl); }
.actionbar a + a { border-left: 1px solid var(--line-d); }
/* Phones: the floor runs to the bottom of the page, under the action bar. */
@media (max-width: 959px) { .foot { --ffh: calc(150px + 56px + env(safe-area-inset-bottom)); } .foot-grid .fcol:nth-child(2) { display: none; } }
@media (min-width: 960px) { .actionbar { display: none; } }

/* ---------- 404 ---------- */
.lost { position: relative; overflow: hidden; background: var(--esp); color: var(--cream); min-height: calc(100svh - 100px); display: flex; align-items: flex-end; }
.lost .foot-field { opacity: .9; }
.lost .wrap { position: relative; padding-top: 120px; padding-bottom: 72px; }
.lost h1 { width: auto; font-size: clamp(2.4rem, 9vw, 6rem); }
.lost .lede { margin-top: 18px; }
.lost .hero-act .more { display: inline-flex; gap: 8px; }
@media (max-width: 379px) {
  .wm { font-size: .75rem; letter-spacing: .1em; }
  .tel { font-size: .9375rem; }
  .top-in { gap: 12px; }
}
.legal h1 { width: auto; letter-spacing: .02em; text-transform: uppercase; font-size: clamp(1.4rem, 6vw, 3.25rem); overflow-wrap: anywhere; }
.wrap.legal { padding-left: var(--g); padding-right: var(--g); max-width: calc(760px + 2 * var(--g)); }