/* The Riverwoods Conference Center | concept rebuild
   One stylesheet for the whole site. Palette and type scale from the project
   design system, section 1 and section 3.

   Contrast note: the design system records river on bone at 4.6:1. Measured it
   is 4.36:1, which is below AA, so --rw-river is decorative only and
   --rw-river-ink carries every piece of river-colored text. Same reasoning for
   --rw-copper-ink and --rw-stone-ink on the sand ground. */

:root{
  --rw-ink:#16211B;
  --rw-wood:#22402F;
  --rw-river:#557A8B;
  --rw-river-ink:#486775;
  --rw-copper:#96562F;
  --rw-copper-ink:#90532D;
  --rw-sand:#E7DFD1;
  --rw-bone:#FBF8F3;
  --rw-stone:#6B6558;
  --rw-stone-ink:#686256;
  --rw-onwood:#C7B49B;
  --rw-line:rgba(22,33,27,.14);
  --rw-line-2:rgba(22,33,27,.08);

  --measure:68ch;
  --page:1280px;
  --wide:1600px;
  --gut:clamp(20px,4vw,64px);
  --s1:4px; --s2:8px; --s3:12px; --s4:20px; --s5:32px;
  --s6:52px; --s7:84px; --s8:136px;

  --ease:180ms cubic-bezier(.2,.7,.3,1);
  --display:"Cormorant Garamond","Cormorant Fallback",Georgia,"Times New Roman",serif;
  --ui:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    Helvetica,Arial,sans-serif;
}

/* Metric-matched fallbacks. display=swap is required by the brief, and without
   these the swap rewraps every heading and shifted the home page 0.026 CLS,
   over the 0.02 budget. The ratios are measured, not guessed: at 100px the same
   string sets 1103.3px in Cormorant Garamond 500 against 1264.9px in Georgia,
   and 1358.9px in Inter 400 against 1272.9px in Arial. */
@font-face{
  font-family:"Cormorant Fallback";
  src:local("Georgia"),local("Times New Roman"),local("Liberation Serif"),local("Times");
  size-adjust:87.22%;
  ascent-override:108.9%;
  descent-override:29.8%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Liberation Sans");
  size-adjust:106.75%;
  ascent-override:90.8%;
  descent-override:22.6%;
  line-gap-override:0%;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--rw-bone); color:var(--rw-ink);
  font-family:var(--ui); font-size:1.0625rem; line-height:1.65;
  font-weight:400;
}
img,picture,svg{max-width:100%}
img{display:block; height:auto}

h1,h2,h3,h4{font-family:var(--display); font-weight:500; margin:0 0 var(--s4);
  letter-spacing:-.005em; text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.05}
h2{font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.15}
h3{font-size:1.18rem; line-height:1.3; font-family:var(--ui); font-weight:600;
  letter-spacing:.005em}
h4{font-size:1rem; line-height:1.35; font-family:var(--ui); font-weight:600}
p{margin:0 0 var(--s4); max-width:var(--measure)}
ul,ol{max-width:var(--measure)}
a{color:var(--rw-river-ink)}
a:hover{color:var(--rw-copper-ink)}
b,strong{font-weight:600}
hr{border:0; border-top:1px solid var(--rw-line); margin:var(--s6) 0}

.display{font-family:var(--display); font-weight:300;
  font-size:clamp(2.6rem,6.2vw,5.2rem); line-height:.95; letter-spacing:-.02em;
  margin:0 0 var(--s4)}
.lede{font-size:1.18rem; line-height:1.6; color:var(--rw-ink)}
.small{font-size:.875rem; line-height:1.6}
.micro{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.5; color:var(--rw-stone-ink); font-weight:500}
.muted{color:var(--rw-stone-ink)}
.tnum{font-variant-numeric:tabular-nums}

:focus-visible{outline:3px solid var(--rw-copper); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--rw-wood); color:var(--rw-bone); padding:12px 20px;
  font-weight:600; text-decoration:none}
.skip:focus{left:8px; top:8px}
/* main is the skip link target. tabindex="-1" makes the jump move real focus
   rather than relying on the browser's sequential-focus starting point, and
   the ring is suppressed because the landing is programmatic, not a tab stop. */
main:focus{outline:none}

/* The header is sticky, so anything scrolled to by id lands under it without
   this. Applies to the space anchors, the error box and the success panel. */
main [id]{scroll-margin-top:96px}

.wrap{max-width:var(--page); margin:0 auto; padding-inline:var(--gut)}
.wide{max-width:var(--wide); margin:0 auto; padding-inline:var(--gut)}
section{padding-block:clamp(64px,9vw,140px)}
section.tight{padding-block:clamp(40px,5vw,72px)}
.ground-sand{background:var(--rw-sand)}
.ground-wood{background:var(--rw-wood); color:var(--rw-bone)}
.ground-wood h1,.ground-wood h2,.ground-wood h3,.ground-wood h4{color:var(--rw-bone)}
.ground-wood .micro,.ground-wood .muted{color:var(--rw-onwood)}
/* .lede pins itself to ink, which on the wood ground is 1.45:1. */
.ground-wood .lede{color:var(--rw-bone)}
.ground-wood .tick li::before{border-color:var(--rw-onwood)}
.ground-wood a{color:var(--rw-onwood)}
.ground-wood a:hover{color:var(--rw-bone)}

/* --- concept banner ---------------------------------------------------- */
.conceptbar{background:var(--rw-ink); color:var(--rw-bone)}
.conceptbar-in{max-width:var(--wide); margin:0 auto; padding:12px var(--gut);
  display:flex; gap:var(--s4); align-items:flex-start; justify-content:space-between}
.conceptbar p{margin:0; max-width:none; font-size:.75rem; letter-spacing:.055em;
  line-height:1.6; text-transform:uppercase; font-weight:400}
.conceptbar b{font-weight:600; letter-spacing:.09em}
.conceptbar-x{flex:none; background:transparent; color:var(--rw-bone);
  border:1px solid rgba(251,248,243,.5); border-radius:2px; cursor:pointer;
  font:600 .6875rem/1 var(--ui); letter-spacing:.12em; text-transform:uppercase;
  padding:9px 12px; transition:background var(--ease)}
.conceptbar-x:hover{background:rgba(251,248,243,.14)}

/* --- header ------------------------------------------------------------ */
.site{position:sticky; top:0; z-index:40; background:rgba(251,248,243,.96);
  border-bottom:1px solid var(--rw-line); backdrop-filter:saturate(1.4) blur(6px)}
.site-in{max-width:var(--wide); margin:0 auto; padding:var(--s3) var(--gut);
  display:flex; align-items:center; gap:var(--s5)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--rw-wood); flex:none}
.brandleaf{width:30px; height:30px; color:var(--rw-wood)}
.brand-t{display:flex; flex-direction:column; line-height:1}
.brand-n{font-family:var(--display); font-weight:500; font-size:1.5rem;
  letter-spacing:.005em}
.brand-s{font-size:.5625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rw-stone-ink); font-weight:600; margin-top:3px}
.site nav{margin-left:auto}
.site nav ul{display:flex; gap:var(--s5); list-style:none; margin:0; padding:0;
  max-width:none}
.site nav a{font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; text-decoration:none; color:var(--rw-ink); padding:6px 0;
  border-bottom:2px solid transparent; transition:border-color var(--ease)}
.site nav a:hover{border-bottom-color:var(--rw-copper)}
.site nav a[aria-current="page"]{border-bottom-color:var(--rw-copper);
  color:var(--rw-copper-ink)}
.navtoggle{display:none}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 .8125rem/1 var(--ui); letter-spacing:.1em; text-transform:uppercase;
  padding:14px 22px; border-radius:2px; text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:background var(--ease), color var(--ease),
  border-color var(--ease)}
.btn-copper{background:var(--rw-copper); color:var(--rw-bone)}
.btn-copper:hover{background:#7E4826; color:var(--rw-bone)}
.btn-line{background:transparent; color:var(--rw-ink); border-color:var(--rw-ink)}
.btn-line:hover{background:var(--rw-ink); color:var(--rw-bone)}
/* .ground-wood a is more specific than .btn-copper, so it repainted the button
   label onwood over copper: measured 2.84:1. */
.ground-wood .btn-copper,.ground-wood .btn-copper:hover{color:var(--rw-bone)}
.ground-wood .btn-line{color:var(--rw-bone); border-color:rgba(251,248,243,.6)}
.ground-wood .btn-line:hover{background:var(--rw-bone); color:var(--rw-ink)}
/* The hero is a dark ground too, but it is not .ground-wood, so it needs the
   same override. Without it .btn-line stayed ink on the scrim: 1.45:1. */
.hero .btn-line{color:var(--rw-bone); border-color:rgba(251,248,243,.6)}
.hero .btn-line:hover{background:var(--rw-bone); color:var(--rw-ink)}
.hdr-cta{flex:none; padding:12px 18px}
.btnrow{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}

.stickybar{display:none}

/* --- leaf marks -------------------------------------------------------- */
.leafdefs{position:absolute; width:0; height:0; overflow:hidden}
.leaf{width:22px; height:22px; flex:none; color:var(--rw-wood)}
.leaf-lg{width:40px; height:40px; flex:none; color:var(--rw-wood)}
.leaf-xl{width:132px; height:132px; flex:none; color:var(--rw-wood);
  stroke-width:.75}
.leafpair{display:inline-flex; gap:2px; vertical-align:middle; flex:none}

/* --- hero -------------------------------------------------------------- */
/* One grid cell, two layers. A fixed-height hero with absolutely positioned
   copy clipped the second button on a 390px screen, because the copy is taller
   than the picture there. Stacking them in one cell lets the row grow to the
   taller of the two and the picture stretches to match. */
.hero{display:grid; background:var(--rw-wood); color:var(--rw-bone);
  padding:0; overflow:hidden; min-height:clamp(400px,66vh,640px)}
.hero>picture{grid-area:1 / 1; align-self:stretch; display:block; overflow:hidden}
.hero>picture>img{width:100%; height:100%; object-fit:cover; opacity:.82}
/* The scrim is not decoration. Measured against the brightest pixel a window
   wall puts behind this text, bone on the graded photograph alone is about
   3:1. The gradient is what carries the hero copy over 4.5:1. */
/* position + z-index are load bearing. opacity on the image makes it a stacking
   context, which paints after the in-flow backgrounds, so an unpositioned scrim
   ends up UNDER the photograph. Measured: 1.38:1 instead of 7:1. */
.hero-in{grid-area:1 / 1; position:relative; z-index:1; display:flex;
  align-items:flex-end;
  background:linear-gradient(180deg, rgba(22,33,27,.30) 0%, rgba(22,33,27,.56) 20%,
    rgba(22,33,27,.86) 46%, rgba(22,33,27,.95) 100%)}
.hero-tx{max-width:var(--wide); margin:0 auto; width:100%;
  padding:var(--gut) var(--gut) clamp(32px,5vw,64px)}
/* Not 19ch. The ch unit is the advance of the digit zero, which the metric
   fallback does not match, so a ch-based max-width rewraps the headline on font
   swap and moved this block 57px. An em width is font-size relative only. */
.hero h1{color:var(--rw-bone); max-width:12em; margin-bottom:var(--s4)}
.hero p{color:var(--rw-bone); max-width:56ch; font-size:1.0625rem}
/* Not onwood. Measured over the hero scrim onwood lands near 2.5:1, so the
   eyebrow is bone here and separates on size and tracking instead of hue. */
.hero .micro{color:var(--rw-bone)}

/* --- generic pieces ---------------------------------------------------- */
.eyebrow{display:flex; align-items:center; gap:10px; margin:0 0 var(--s3)}
.eyebrow .leaf{width:18px; height:18px; color:var(--rw-copper)}
.head{max-width:62ch; margin-bottom:var(--s6)}
.head p:last-child{margin-bottom:0}

.grid{display:grid; gap:var(--s5)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--rw-bone); border:1px solid var(--rw-line);
  border-radius:3px; overflow:hidden; display:flex; flex-direction:column}
.ground-sand .card{background:var(--rw-bone)}
.card picture,.card img{width:100%; aspect-ratio:3/2; object-fit:cover}
.card-b{padding:var(--s4) var(--s4) var(--s5)}
.card-b p:last-child{margin-bottom:0}
.card h3{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.card a.card-link{text-decoration:none; color:inherit}

.band{position:relative; background:var(--rw-wood)}
.band picture,.band img{width:100%; height:clamp(280px,44vh,460px); object-fit:cover}
.band-cap{max-width:var(--wide); margin:0 auto; padding:var(--s4) var(--gut);
  color:var(--rw-onwood)}

.figure{margin:0}
.figure picture,.figure img{width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:3px}
.figure figcaption{margin-top:10px; font-size:.8125rem; line-height:1.5;
  color:var(--rw-stone-ink); max-width:52ch}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,72px);
  align-items:center}
.split.top{align-items:start}

.rail{border-left:2px solid var(--rw-copper); padding-left:var(--s4)}
.rail p:last-child{margin-bottom:0}

.panel{background:var(--rw-sand); border-radius:3px; padding:var(--s5)}
.panel p:last-child,.panel ul:last-child{margin-bottom:0}
.panel h3{margin-bottom:var(--s3)}

.note{border:1px solid var(--rw-line); border-left:3px solid var(--rw-river);
  border-radius:3px; padding:var(--s4) var(--s5); background:var(--rw-bone)}
.note p:last-child{margin-bottom:0}
.note h3{margin-bottom:10px}

blockquote{margin:0 0 var(--s4); padding-left:var(--s4);
  border-left:2px solid var(--rw-line); font-family:var(--display);
  font-size:1.25rem; line-height:1.45; color:var(--rw-stone-ink); max-width:56ch}
blockquote p{margin:0}

.tick{list-style:none; padding:0; margin:0 0 var(--s4)}
.tick li{position:relative; padding-left:22px; margin-bottom:8px}
.tick li::before{content:""; position:absolute; left:0; top:.62em; width:9px;
  height:9px; border:1.5px solid var(--rw-copper); border-radius:50%}

.deck{display:grid; gap:var(--s4); grid-template-columns:repeat(4,1fr);
  margin:0; padding:0}
.deck div{border-top:2px solid var(--rw-copper); padding-top:var(--s3)}
.deck dt{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rw-stone-ink); font-weight:600; margin-bottom:6px}
.deck dd{margin:0; font-family:var(--display); font-weight:500;
  font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1;
  font-variant-numeric:tabular-nums}
.deck dd small{display:block; font-family:var(--ui); font-size:.8125rem;
  font-weight:400; line-height:1.4; letter-spacing:0; color:var(--rw-stone-ink);
  margin-top:8px}

/* --- capacity ladder --------------------------------------------------- */
.ladder{list-style:none; margin:0; padding:0; max-width:none}
.ladder li{display:grid;
  grid-template-columns:auto minmax(150px,1fr) minmax(90px,1.9fr) auto; gap:var(--s4);
  align-items:center; padding:14px 0; border-bottom:1px solid var(--rw-line-2)}
.ladder li:first-child{border-top:1px solid var(--rw-line)}
.ladder .lname{font-family:var(--display); font-size:1.35rem; font-weight:500}
.ladder .lbar{display:block; height:9px; background:var(--rw-copper);
  border-radius:1px; min-width:3px}
.ladder .lbarwrap{display:block; background:var(--rw-line-2); border-radius:1px}
.ladder .lnum{font-variant-numeric:tabular-nums; font-weight:600;
  font-size:1.0625rem; text-align:right; min-width:5ch}
.ladder .lbasis{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rw-stone-ink); display:block; font-weight:500}

/* --- tables ------------------------------------------------------------ */
.tablewrap{overflow-x:auto; margin-bottom:var(--s4);
  border:1px solid var(--rw-line); border-radius:3px}
table{border-collapse:collapse; width:100%; min-width:520px;
  background:var(--rw-bone)}
caption{text-align:left; font-size:.8125rem; color:var(--rw-stone-ink);
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--rw-line)}
th,td{padding:11px var(--s4); text-align:left; vertical-align:top;
  border-bottom:1px solid var(--rw-line-2); font-size:.9375rem}
thead th{font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rw-stone-ink); font-weight:600; background:var(--rw-sand);
  border-bottom:1px solid var(--rw-line); white-space:nowrap}
th.num,td.num{text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td .leaf,th .leaf{width:17px; height:17px; vertical-align:-3px; margin-right:6px}
.roomcell{white-space:nowrap; font-weight:500}

/* --- price lists ------------------------------------------------------- */
.prices{list-style:none; margin:0 0 var(--s4); padding:0; max-width:44ch}
.prices li{display:flex; align-items:baseline; gap:8px; padding:7px 0;
  border-bottom:1px solid var(--rw-line-2)}
.prices .pn{flex:1 1 auto}
.prices .pd{flex:1 1 auto; border-bottom:1px dotted var(--rw-line);
  transform:translateY(-4px); min-width:12px}
.prices .pp{font-variant-numeric:tabular-nums; font-weight:600; flex:none}

/* --- spaces page ------------------------------------------------------- */
.spacecard{background:var(--rw-bone); border:1px solid var(--rw-line);
  border-radius:3px; overflow:hidden; display:flex; flex-direction:column}
.spacecard picture,.spacecard img{width:100%; aspect-ratio:3/2; object-fit:cover}
.spacecard-b{padding:var(--s4); display:flex; flex-direction:column; flex:1}
.spacecard h3{display:flex; align-items:center; gap:8px; margin-bottom:4px;
  font-family:var(--display); font-weight:500; font-size:1.5rem}
.spacecard .cap{font-variant-numeric:tabular-nums; font-weight:600;
  margin-bottom:10px; display:block}
.spacecard .cap span{font-weight:400; color:var(--rw-stone-ink);
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  display:block; margin-top:2px}
.spacecard p{font-size:.9375rem; margin-bottom:0}
.nophoto{background:var(--rw-sand); aspect-ratio:3/2; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:var(--s3);
  text-align:center; padding:var(--s4)}
.nophoto .leaf-xl{color:var(--rw-wood)}
.nophoto p{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rw-stone-ink); margin:0; font-weight:600}

.leafkey{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s4);
  list-style:none; padding:0; margin:0; max-width:none}
.leafkey li{display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center}
.leafkey .leaf-lg{color:var(--rw-wood)}
.leafkey span{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--rw-stone-ink)}

/* --- the form ---------------------------------------------------------- */
.formwrap{display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(24px,4vw,64px); align-items:start}
.progress{position:sticky; top:96px; background:var(--rw-sand); border-radius:3px;
  padding:var(--s4)}
.progress h2{font-size:1rem; font-family:var(--ui); font-weight:600;
  margin-bottom:var(--s3)}
.pbar{height:6px; background:rgba(22,33,27,.14); border-radius:3px;
  overflow:hidden; margin-bottom:var(--s3)}
.pbar i{display:block; height:100%; width:0; background:var(--rw-copper);
  transition:width var(--ease)}
.psteps{list-style:none; margin:0; padding:0; font-size:.8125rem}
.psteps li{display:flex; gap:9px; align-items:baseline; padding:3px 0;
  color:var(--rw-stone-ink)}
.psteps li b{font-variant-numeric:tabular-nums; font-weight:600; min-width:1.4em;
  color:var(--rw-stone-ink)}
.psteps li.done{color:var(--rw-ink)}
.psteps li.done b{color:var(--rw-copper-ink)}
.psteps li.done::after{content:"\2713"; margin-left:auto; color:var(--rw-copper-ink);
  font-weight:600}

fieldset{border:0; border-top:1px solid var(--rw-line); margin:0 0 var(--s6);
  padding:var(--s5) 0 0}
legend{font-family:var(--display); font-size:1.6rem; font-weight:500; padding:0;
  display:flex; align-items:baseline; gap:10px}
legend .n{font-family:var(--ui); font-size:.6875rem; letter-spacing:.14em;
  font-weight:600; color:var(--rw-copper-ink)}
.hint{font-size:.875rem; color:var(--rw-stone-ink); margin:6px 0 var(--s4);
  max-width:58ch}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0;
  list-style:none; max-width:none}
.chip input{position:absolute; opacity:0; width:1px; height:1px}
.chip label{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--rw-line); border-radius:999px; padding:9px 18px;
  font-size:.875rem; font-weight:500; background:var(--rw-bone);
  transition:border-color var(--ease), background var(--ease), color var(--ease)}
.chip label:hover{border-color:var(--rw-copper)}
.chip input:checked+label{background:var(--rw-copper); border-color:var(--rw-copper);
  color:var(--rw-bone)}
.chip input:focus-visible+label{outline:3px solid var(--rw-copper);
  outline-offset:3px}

label.fl{display:block; font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:var(--rw-stone-ink);
  margin-bottom:7px}
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],select,textarea{
  width:100%; font:400 1rem/1.5 var(--ui); color:var(--rw-ink);
  background:var(--rw-bone); border:1px solid var(--rw-stone);
  border-radius:2px; padding:12px 14px}
textarea{min-height:120px; resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--rw-ink)}
.fields{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
.field{min-width:0}
.field.span2{grid-column:1 / -1}
.req{color:var(--rw-copper-ink)}
.err{display:none; font-size:.8125rem; color:#8A2E1C; margin-top:6px;
  font-weight:500}
.field.bad .err,fieldset.bad .err{display:block}
fieldset.bad>legend{color:#8A2E1C}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#8A2E1C;
  border-width:2px}

.toggles{display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center}
.switch{display:inline-flex; align-items:center; gap:10px; font-size:.9375rem}
.switch input{width:20px; height:20px; accent-color:var(--rw-copper)}

.countrow{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s5);
  margin-bottom:var(--s5)}
.countrow .slider{flex:1 1 320px; min-width:240px}
.countrow input[type=range]{width:100%; accent-color:var(--rw-copper);
  height:28px}
.countbox{flex:none; width:130px}
.countnow{font-family:var(--display); font-weight:500;
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--rw-copper-ink)}

.fitwrap{background:var(--rw-sand); border-radius:3px; padding:var(--s5)}
.fitwrap h2{font-size:1.18rem; line-height:1.3; font-family:var(--ui);
  font-weight:600; letter-spacing:.005em; margin-bottom:4px}
.fitcount{font-size:.875rem; color:var(--rw-stone-ink); margin-bottom:var(--s4)}
.fitlist{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:10px; max-width:none}
.fitlist li{display:flex; align-items:center; gap:10px; background:var(--rw-bone);
  border:1px solid var(--rw-line); border-radius:3px; padding:11px 14px}
.fitlist .fn{font-weight:500; flex:1 1 auto; min-width:0}
.fitlist .fc{font-variant-numeric:tabular-nums; font-weight:600; flex:none}
.fitlist .fb{display:block; font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rw-stone-ink); font-weight:500}
.fitlist li.out{background:transparent; border-style:dashed;
  color:var(--rw-stone-ink)}
.fitlist li.out .leaf{color:var(--rw-stone-ink)}
.fitnone{background:var(--rw-bone); border:1px solid var(--rw-line);
  border-left:3px solid var(--rw-copper); border-radius:3px; padding:var(--s4)}
.fitnone p:last-child{margin-bottom:0}

.picklist{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,1fr); gap:10px; max-width:none}
.picklist li label{display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid var(--rw-line); border-radius:3px; padding:11px 14px;
  background:var(--rw-bone); transition:border-color var(--ease)}
.picklist li label:hover{border-color:var(--rw-copper)}
.picklist input{width:19px; height:19px; accent-color:var(--rw-copper); flex:none}
.picklist input:focus-visible+span{outline:3px solid var(--rw-copper);
  outline-offset:3px}
.picklist .pk{flex:1 1 auto; min-width:0}
.picklist .pkc{font-variant-numeric:tabular-nums; font-weight:600; flex:none}

.submitrow{display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center;
  border-top:1px solid var(--rw-line); padding-top:var(--s5)}
.formnote{font-size:.8125rem; color:var(--rw-stone-ink); max-width:44ch;
  margin:0}
.errsummary{display:none; border:2px solid #8A2E1C; border-radius:3px;
  padding:var(--s4); margin-bottom:var(--s5); background:#FDF3F0}
.errsummary.on{display:block}
.errsummary h2{font-family:var(--ui); font-size:1rem; font-weight:600;
  margin-bottom:8px; color:#8A2E1C}
.errsummary ul{margin:0; padding-left:20px; font-size:.9375rem}

.receipt{display:none}
.receipt.on{display:block}
.receipt-in{border:1px solid var(--rw-line); border-top:4px solid var(--rw-copper);
  border-radius:3px; padding:clamp(24px,4vw,48px); background:var(--rw-bone)}
.receipt dl{display:grid; grid-template-columns:minmax(140px,220px) 1fr;
  gap:0; margin:var(--s5) 0; max-width:none}
.receipt dt{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--rw-stone-ink); padding:11px 0;
  border-top:1px solid var(--rw-line-2)}
.receipt dd{margin:0; padding:11px 0; border-top:1px solid var(--rw-line-2)}

/* --- footer ------------------------------------------------------------ */
.site-f{background:var(--rw-wood); color:var(--rw-bone);
  padding-block:clamp(48px,6vw,84px) var(--s5)}
.site-f a{color:var(--rw-onwood)}
.site-f a:hover{color:var(--rw-bone)}
.f-grid{display:grid; grid-template-columns:1.2fr 1fr 1.4fr; gap:var(--s6)}
.f-name{font-family:var(--display); font-size:1.5rem; font-weight:500;
  margin-bottom:var(--s3)}
.f-h{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--ui); font-weight:600; color:var(--rw-onwood);
  margin-bottom:var(--s3)}
.site-f address{font-style:normal; line-height:1.7; margin-bottom:var(--s3)}
.site-f .micro{color:var(--rw-onwood)}
.f-nav{list-style:none; margin:0; padding:0}
.f-nav li{margin-bottom:7px}
.f-nav a{text-decoration:none; font-size:.9375rem}
.f-bottom{border-top:1px solid rgba(251,248,243,.18); margin-top:var(--s6);
  padding-top:var(--s4)}
.f-bottom .micro{color:var(--rw-onwood); letter-spacing:.04em;
  text-transform:none; font-size:.8125rem; max-width:none}

/* --- motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0; transform:translateY(14px);
    transition:opacity 520ms cubic-bezier(.2,.7,.3,1),
               transform 520ms cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1; transform:none}
}

/* --- responsive -------------------------------------------------------- */
@media (max-width:1080px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .deck{grid-template-columns:repeat(2,1fr)}
  .leafkey{grid-template-columns:repeat(4,1fr)}
  .formwrap{grid-template-columns:1fr}
  .progress{position:static}
  .f-grid{grid-template-columns:1fr 1fr; gap:var(--s5)}
}
@media (max-width:820px){
  .site nav{position:absolute; left:0; right:0; top:100%;
    background:var(--rw-bone); border-bottom:1px solid var(--rw-line);
    display:none; padding:var(--s4) var(--gut)}
  .site nav.open{display:block}
  .site nav ul{flex-direction:column; gap:var(--s4)}
  .site-in{gap:var(--s4); position:relative}
  .navtoggle{display:inline-flex; margin-left:auto; background:transparent;
    border:1px solid var(--rw-line); border-radius:2px; cursor:pointer;
    font:600 .75rem/1 var(--ui); letter-spacing:.12em; text-transform:uppercase;
    padding:11px 14px; color:var(--rw-ink)}
  .hdr-cta{display:none}
  .stickybar{display:block; position:fixed; left:0; right:0; bottom:0; z-index:45;
    background:rgba(251,248,243,.97); border-top:1px solid var(--rw-line);
    padding:10px var(--gut); backdrop-filter:blur(6px)}
  .stickybar .btn{width:100%}
  body{padding-bottom:66px}
}
@media (max-width:700px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .deck{grid-template-columns:1fr 1fr}
  .fields{grid-template-columns:1fr}
  .fitlist,.picklist{grid-template-columns:1fr}
  .leafkey{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1fr}
  .conceptbar-in{flex-direction:column; gap:var(--s3)}
  .receipt dl{grid-template-columns:1fr}
  .receipt dt{padding-bottom:0; border-top:1px solid var(--rw-line-2)}
  .receipt dd{padding-top:2px; border-top:0}
  .ladder li{grid-template-columns:auto 1fr; row-gap:6px}
  .ladder .lnum{grid-column:2; text-align:left}
  table{min-width:460px}
}