/* ============================================================
   Dafoe's Barbershop — Port St. Lucie, FL
   Palette: charcoal ground · bone paper · oxblood accent · brass hairlines
   Type:    Bebas Neue (display, all caps) / Karla (body)
   ============================================================ */

:root{
  --char:      #14100F;
  --char-2:    #1C1716;
  --char-3:    #241D1B;
  --bone:      #EFE9E1;
  --bone-2:    #DFD6C9;
  --bone-3:    #C7BBAA;

  --oxblood:   #7E2B24;
  --oxblood-l: #9C3A31;
  --brass:     #B08A4A;
  --brass-l:   #CBA469;

  --ink:       #0B0908;
  --ink-2:     #4A413D;
  --ink-3:     #7A6F69;

  --on-dark:   rgba(239,233,225,.82);
  --line-d:    rgba(239,233,225,.14);
  --line-l:    #DCD3C6;

  --radius:   4px;      /* barbershop signage is square, not pill-shaped */
  --radius-s: 3px;
  --shadow:   0 2px 4px rgba(11,9,8,.18), 0 18px 40px -24px rgba(11,9,8,.7);

  --ease: cubic-bezier(.2,.65,.25,1);
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px; --s8:104px;
  --wrap: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:clip; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--char);
  color:var(--bone);
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:"Bebas Neue","Karla",system-ui,sans-serif;
  font-weight:400; letter-spacing:.012em; line-height:.92;
  margin:0; text-wrap:balance;
}
h1{ font-size:clamp(48px,9vw,96px); }
h2{ font-size:clamp(34px,5.6vw,62px); }
h3{ font-size:26px; line-height:1; }

p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s4); }

.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-l); margin:0;
}
.stars{ color:var(--brass-l); letter-spacing:.14em; font-size:13px; }
.cu{ font-variant-numeric:tabular-nums; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--oxblood); color:#fff; padding:12px 18px; }
.skip:focus{ left:0; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--brass-l); outline-offset:3px;
}

section[id], #main, #top{ scroll-margin-top:84px; }
#top{ position:absolute; top:0; height:0; }

/* ---------------- buttons ---------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 26px;
  background:var(--oxblood); color:var(--bone);
  font-family:"Bebas Neue",sans-serif; font-size:19px; letter-spacing:.06em;
  text-decoration:none; white-space:nowrap;
  border:0; border-radius:var(--radius); cursor:pointer;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background:var(--oxblood-l); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-sm{ min-height:44px; padding:0 18px; font-size:17px; }
.btn-lg{ min-height:58px; padding:0 34px; font-size:22px; }
.btn-ghost{
  background:transparent; color:var(--bone);
  box-shadow:inset 0 0 0 1.5px rgba(239,233,225,.42);
}
.btn-ghost:hover{ background:rgba(239,233,225,.1); box-shadow:inset 0 0 0 1.5px var(--bone); }

/* ---------------- nav ---------------- */

.nav{
  position:sticky; top:0; z-index:60;
  background:var(--char);
  border-bottom:1px solid var(--line-d);
}
.nav-in{
  max-width:var(--wrap); margin-inline:auto; padding:11px var(--s4);
  display:flex; align-items:center; gap:var(--s4);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; min-height:44px; }
/* a barber pole, drawn rather than pictured */
.brand-pole{
  width:13px; height:34px; flex:none; border-radius:2px;
  background:repeating-linear-gradient(
    -60deg,
    var(--oxblood) 0 5px,
    var(--bone) 5px 10px,
    var(--char-3) 10px 15px
  );
  box-shadow:inset 0 0 0 1px rgba(11,9,8,.5);
}
.brand-txt{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand-txt b{
  font-family:"Bebas Neue",sans-serif; font-size:24px; font-weight:400;
  letter-spacing:.03em; color:var(--bone);
}
.brand-txt span{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--on-dark); text-decoration:none; transition:color .18s var(--ease);
}
.nav-links a:hover{ color:var(--brass-l); }

/* ---------------- hero ---------------- */

.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px,86svh,840px);
  display:flex; align-items:flex-end;
  padding:var(--s8) 0 var(--s7);
}
.hero-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,16,15,.78) 0%, rgba(20,16,15,.42) 32%, rgba(20,16,15,.86) 78%, rgba(20,16,15,.97) 100%),
    linear-gradient(90deg, rgba(20,16,15,.8) 0%, rgba(20,16,15,.16) 64%);
}
.hero-in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s4);
  display:flex; flex-direction:column; gap:var(--s4); align-items:flex-start;
}
.hero-in h1{ max-width:14ch; }
.hero .lede{ max-width:54ch; font-size:18px; color:var(--on-dark); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.hero-proof{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 14px;
  font-size:15px; color:var(--on-dark); padding-top:var(--s1);
}
.hero-proof b{ color:var(--bone); }
.dot{ width:4px; height:4px; border-radius:50%; background:rgba(239,233,225,.4); }

/* ---------------- section heads ---------------- */

.sec-head{ display:flex; flex-direction:column; gap:var(--s3); max-width:62ch; }
.sec-lede{ font-size:17.5px; }

/* ---------------- THE BOARD ---------------- */

.board-sec{ padding:var(--s8) 0; background:var(--char); position:relative; z-index:1; }
.board-sec .sec-lede{ color:var(--on-dark); }

.board{
  position:relative; margin-top:var(--s6);
  background:var(--bone);
  color:var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--s6) var(--s5) var(--s5);
}
/* the brass rail the board hangs from */
.board-rail{
  position:absolute; left:0; right:0; top:0; height:6px;
  background:linear-gradient(180deg, var(--brass-l), var(--brass));
  border-radius:var(--radius) var(--radius) 0 0;
}
.board-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }

.board-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline; gap:0 14px;
  padding:18px 0;
  border-bottom:1px solid var(--line-l);
}
.board-row:last-child{ border-bottom:0; }
.b-name{
  font-family:"Bebas Neue",sans-serif; font-size:29px; letter-spacing:.03em;
  line-height:1; display:flex; flex-direction:column; gap:7px;
}
.b-note{
  font-family:"Karla",sans-serif; font-size:14px; letter-spacing:0;
  line-height:1.5; color:var(--ink-2); max-width:52ch; font-weight:400;
}
.b-dots{
  border-bottom:2px dotted var(--bone-3);
  transform:translateY(-6px);
}
.b-price{
  font-family:"Bebas Neue",sans-serif; font-size:31px; letter-spacing:.03em;
  color:var(--oxblood); white-space:nowrap;
}
.board-row.is-feature .b-price{ color:var(--ink); background:var(--brass); padding:2px 10px; border-radius:var(--radius-s); }

.board-hint{ display:none; }

.board-cta{
  margin-top:var(--s5); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
}
.board-cta span{ color:var(--on-dark); font-size:15.5px; }

/* ---------------- trust band ---------------- */

.band{ background:var(--oxblood); padding:var(--s7) 0; position:relative; z-index:1; }
.band-in{
  display:grid; gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); text-align:center;
}
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat b{
  font-family:"Bebas Neue",sans-serif; font-size:clamp(46px,6.6vw,74px);
  line-height:.9; letter-spacing:.02em; color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.stat b span{ font:inherit; color:inherit; }
.stat > span{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(239,233,225,.72);
}

/* ---------------- about ---------------- */

.about{ padding:var(--s8) 0; background:var(--char-2); position:relative; z-index:1; }
.about-in{
  display:grid; gap:var(--s6);
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr); align-items:center;
}
.about-media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.about-media img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.about-txt{ display:flex; flex-direction:column; gap:var(--s3); }
.about-txt p{ color:var(--on-dark); font-size:17px; max-width:54ch; }
.about-txt blockquote{
  margin:0; padding-left:var(--s4);
  border-left:3px solid var(--brass);
  font-size:19.5px; line-height:1.5; color:var(--bone);
  max-width:52ch;
}

/* ---------------- barbers ---------------- */

.barbers{ padding:var(--s8) 0; background:var(--char); position:relative; z-index:1; }
.barbers .sec-lede{ color:var(--on-dark); }
.chairs{
  list-style:none; margin:var(--s6) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s2);
}
.chairs li{
  display:flex; align-items:baseline; gap:9px;
  border:1px solid var(--line-d);
  border-left:3px solid var(--brass);
  background:var(--char-3);
  padding:13px 18px; border-radius:var(--radius-s);
  font-family:"Bebas Neue",sans-serif; font-size:23px; letter-spacing:.03em;
}
.chairs li a{
  display:flex; align-items:baseline; gap:9px;
  color:inherit; text-decoration:none; min-height:24px;
}
.chairs li{ padding:0; transition:border-color .18s var(--ease), background-color .18s var(--ease); }
.chairs li a{ padding:13px 18px; }
.chairs li:hover{ background:var(--oxblood); border-left-color:var(--brass-l); }
.chairs li span{
  font-family:"Karla",sans-serif; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass-l);
}

/* ---------------- reviews ---------------- */

.reviews{ padding:var(--s8) 0; background:var(--bone); color:var(--ink); position:relative; z-index:1; }
.reviews .eyebrow{ color:var(--oxblood); }
.reviews .stars{ color:var(--oxblood); }
.rev-grid{
  margin-top:var(--s6); display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.rev{
  margin:0; padding:var(--s5) var(--s4);
  background:#fff; border:1px solid var(--line-l);
  border-top:3px solid var(--oxblood);
  border-radius:var(--radius);
  display:flex; flex-direction:column; gap:var(--s3);
}
.rev blockquote{ margin:0; font-size:17px; line-height:1.55; color:var(--ink); }
.rev figcaption{
  margin-top:auto; font-weight:700; font-size:15px;
  display:flex; align-items:baseline; gap:9px;
}
.rev figcaption span{
  font-weight:500; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.rev-all{
  display:inline-flex; align-items:center; gap:7px; min-height:46px;
  color:var(--oxblood); font-weight:700; font-size:16px;
  text-decoration:none; border-bottom:2px solid rgba(126,43,36,.3);
}
.rev-all:hover{ border-bottom-color:var(--oxblood); }
.rev-all svg{ width:15px; height:15px; flex:none; }

/* ---------------- visit ---------------- */

.visit{ padding:var(--s8) 0; background:var(--char-2); position:relative; z-index:1; }
.visit-in{
  display:grid; gap:var(--s6);
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:start;
}
.visit-txt{ display:flex; flex-direction:column; gap:var(--s3); }
.visit-txt p{ color:var(--on-dark); font-size:17.5px; }
.visit-cta{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s1); }
.visit .rev-all{ color:var(--brass-l); border-bottom-color:rgba(203,164,105,.35); }
.visit .rev-all:hover{ border-bottom-color:var(--brass-l); }

.hours{
  background:var(--char-3); border:1px solid var(--line-d);
  border-top:3px solid var(--brass);
  border-radius:var(--radius); padding:var(--s4);
}
.hours h3{ color:var(--bone); margin-bottom:var(--s3); }
.hours table{ width:100%; border-collapse:collapse; }
.hours th{
  text-align:left; font-weight:500; font-size:15px; color:var(--on-dark);
  padding:10px 0; border-bottom:1px solid var(--line-d);
}
.hours td{
  text-align:right; font-size:15px; color:var(--bone);
  font-variant-numeric:tabular-nums;
  padding:10px 0; border-bottom:1px solid var(--line-d);
}
.hours tr:last-child th, .hours tr:last-child td{ border-bottom:0; }

/* ---------------- footer ---------------- */

.foot{
  background:var(--char); border-top:1px solid var(--line-d);
  padding:var(--s6) 0 calc(var(--s6) + 74px);
  position:relative; z-index:1; font-size:15px; color:var(--on-dark);
}
.foot-in{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.foot p{ margin:0 0 6px; }
.foot a{ color:var(--bone); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.foot a:hover{ color:var(--brass-l); }
.foot-brand{
  font-family:"Bebas Neue",sans-serif; font-size:24px; letter-spacing:.03em; color:var(--bone);
}
.foot-head{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass-l); margin-bottom:8px;
}

/* ---------------- persistent CTAs ---------------- */

.floatcta{
  position:fixed; right:24px; bottom:24px; z-index:65;
  display:inline-flex; align-items:center; gap:10px;
  min-height:54px; padding:0 26px; border-radius:var(--radius);
  background:var(--oxblood); color:var(--bone);
  font-family:"Bebas Neue",sans-serif; font-size:20px; letter-spacing:.06em;
  text-decoration:none; box-shadow:var(--shadow);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), background-color .2s var(--ease);
}
.floatcta.is-on{ opacity:1; transform:none; pointer-events:auto; }
.floatcta:hover{ background:var(--oxblood-l); }

.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; gap:9px; padding:9px 13px calc(9px + env(safe-area-inset-bottom));
  background:var(--char); border-top:1px solid var(--line-d);
}
.callbar-btn{
  flex:1; min-height:47px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  background:var(--oxblood); color:var(--bone);
  font-family:"Bebas Neue",sans-serif; font-size:20px; letter-spacing:.06em;
  text-decoration:none;
}
.callbar-alt{ background:transparent; box-shadow:inset 0 0 0 1.5px rgba(239,233,225,.4); }

/* ============================================================
   REVEALS — visible by default; .js arms them
   ============================================================ */

.rv{ opacity:1; transform:none; }

.js .rv{
  opacity:0;
  transform:translate3d(0,30px,0) scale(.98);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
  transition-delay:calc((min(var(--i,1), 3) - 1) * 40ms);
}
.js .rv.in{ opacity:1; transform:translate3d(0,0,0) scale(1); }
.js .rv.out{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.985);
  transition:opacity .32s var(--ease), transform .32s var(--ease);
  transition-delay:0ms;
}
.no-js .rv, .rv.settled{ opacity:1; transform:none; transition:none; }

/* ---------------- responsive ---------------- */

@media (max-width:1000px){
  .about-in, .visit-in{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  :root{ --s7:54px; --s8:64px; }

  /* Desktop-only supporting copy. Kept in the HTML for search engines. */
  .wide-only{ display:none; }

  /* In a phone browser the usable height is the screen MINUS the address bar
     and the bottom toolbar. svh already accounts for that, but the fixed call
     bar sits on top of the page, so the hero needs its own clearance or the
     buttons end up underneath it when the chrome is showing. */
  .hero{
    min-height:clamp(400px,66svh,600px);
    padding-top:var(--s4);
    /* 74px call bar + its safe-area inset + breathing room. Measured at the
       real in-browser height (375x628), the proof line was landing 1px UNDER
       the bar — invisible when you test at the full 812px screen size. */
    padding-bottom:calc(var(--s4) + 82px + env(safe-area-inset-bottom));
  }
  .hero-in{ gap:var(--s3); }
  .hero h1{ font-size:clamp(38px,11vw,54px); }
  .hero .lede{ font-size:16.5px; }
  /* Same reason: nothing should end flush against the bar. */
  .foot{ padding-bottom:calc(var(--s6) + 74px + env(safe-area-inset-bottom)); }
  .bookpage{ padding-bottom:calc(var(--s6) + 74px + env(safe-area-inset-bottom)); }
  body{ font-size:16.5px; }
  .nav-links{ display:none; }
  .nav-in{ padding:8px 18px; }
  /* Header tucks away while reading down, returns on the way up. */
  .nav{ transition:transform .28s var(--ease); }
  .nav.is-tucked{ transform:translateY(-100%); }
  .callbar{ display:flex; }
  .floatcta{ display:none; }
  .hero{ min-height:clamp(520px,82svh,740px); }
  .hero-cta .btn{ flex:1 1 100%; }
  .wide-only{ display:none; }

  /* THE BOARD becomes a swipe deck — scroll-snap, no JS, no per-frame work */
  .board{ padding:var(--s5) 0 var(--s4); background:transparent; box-shadow:none; }
  .board-rail{ display:none; }
  .board-list{
    flex-direction:row; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    padding:0 18px 6px; margin-inline:-18px;
    scrollbar-width:none;
  }
  .board-list::-webkit-scrollbar{ display:none; }
  .board-row{
    flex:0 0 78%; scroll-snap-align:center;
    background:var(--bone); color:var(--ink);
    border:0; border-top:5px solid var(--brass);
    border-radius:var(--radius);
    grid-template-columns:1fr; align-content:start; gap:14px;
    padding:22px 20px; min-height:200px;
    box-shadow:var(--shadow);
  }
  .board-row.is-feature{ border-top-color:var(--oxblood); }
  .b-dots{ display:none; }
  .b-price{ font-size:40px; }
  .board-hint{
    display:block; text-align:center; margin-top:var(--s3);
    font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-3);
  }
  .board-cta{ margin-top:var(--s4); }
  .chairs li{ font-size:21px; padding:11px 15px; }
}

@media (max-width:520px){
  .wrap{ padding-inline:18px; }
  .hero-in{ padding-inline:18px; }
  .board-row{ flex-basis:84%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv,.rv.in,.rv.out{ opacity:1 !important; transform:none !important; }
  .board-hint{ display:none; }
}

/* ============================================================
   BOOK PAGE — request an appointment
   ============================================================ */

.bookpage{ padding:var(--s6) 0 var(--s7); background:var(--char); }
.book-head{ display:flex; flex-direction:column; gap:var(--s2); max-width:62ch; }
.book-head h1{ font-size:clamp(42px,7.5vw,74px); }
.book-head .lede{ color:var(--on-dark); font-size:18px; }

.walkin{
  margin-top:var(--s2); padding:var(--s3) var(--s4);
  background:var(--char-3); border:1px solid var(--line-d);
  border-left:3px solid var(--brass);
  border-radius:var(--radius);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
}
.walkin > div{ flex:1 1 300px; display:flex; flex-direction:column; gap:5px; }
.walkin b{ color:var(--bone); font-size:16.5px; }
.walkin span{ color:var(--on-dark); font-size:15px; }

.bookform{ margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s4); max-width:820px; }

.fs{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2); }
.fs legend{
  font-family:"Bebas Neue",sans-serif; font-size:24px; letter-spacing:.03em;
  color:var(--bone); padding:0;
}
.fs-note{ color:var(--ink-3); font-size:14.5px; margin-top:-6px; }

/* ---- barber picker ---- */

.pickers{ display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.picker{ position:relative; display:block; cursor:pointer; }
.picker input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; margin:0; cursor:pointer;
}
.picker-in{
  display:flex; flex-direction:column; gap:5px; justify-content:center;
  min-height:66px; padding:11px 14px;
  background:var(--char-3); border:1px solid var(--line-d);
  border-left:3px solid transparent;
  border-radius:var(--radius);
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.picker-in b{
  font-family:"Bebas Neue",sans-serif; font-size:23px; letter-spacing:.03em; color:var(--bone);
}
.picker-in span{ font-size:13.5px; color:var(--ink-3); line-height:1.4; }
.picker:hover .picker-in{ border-color:rgba(203,164,105,.5); }
.picker input:checked + .picker-in{
  background:var(--oxblood); border-color:var(--brass); border-left-color:var(--brass);
}
.picker input:checked + .picker-in span{ color:rgba(239,233,225,.8); }
.picker input:focus-visible + .picker-in{ outline:3px solid var(--brass-l); outline-offset:3px; }
.picker.is-preset .picker-in::after{
  content:"Chosen"; position:absolute; top:9px; right:11px;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brass-l);
}

/* ---- fields ---- */

.fields{ display:grid; gap:var(--s3); grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-wide{ grid-column:1/-1; }
.field label{ font-size:13.5px; font-weight:600; letter-spacing:.03em; color:var(--on-dark); }
.field label .opt{ font-weight:400; color:var(--ink-3); }
.field input,
.field select,
.field textarea{
  width:100%; min-height:50px; padding:13px 15px;
  font-family:inherit; font-size:16px; color:var(--bone);
  background:var(--char-3);
  border:1px solid rgba(239,233,225,.2);
  border-radius:var(--radius-s);
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.field textarea{ resize:vertical; min-height:96px; }
.field select{
  appearance:none; cursor:pointer; padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBA469' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:19px 19px;
}
.field select option{ color:var(--bone); background:var(--char-2); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(239,233,225,.38); }
.field input:focus, .field select:focus, .field textarea:focus{ background:var(--char-2); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.hint{ font-size:13px; color:var(--ink-3); }
.err{ font-size:13px; color:#E08A78; }
.field.is-bad input{ border-color:#E08A78; }

.btn-full{ width:100%; }
.form-note{ font-size:13.5px; color:var(--ink-3); text-align:center; }
.form-status{ font-size:15.5px; color:var(--brass-l); text-align:center; }

.book-foot{
  margin-top:var(--s5); padding-top:var(--s4);
  border-top:1px solid var(--line-d);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
}
.book-foot > div{ flex:1 1 320px; }
.book-foot p{ color:var(--on-dark); font-size:15.5px; }

@media (max-width:860px){
  /* Two-up on phones. These controls are short — stacking every one of them
     turned the form into nearly four screens of scrolling. */
  .pickers{ grid-template-columns:1fr 1fr; gap:9px; }
  .picker-in{ min-height:62px; }
  .picker-in b{ font-size:20px; }
  .picker-in span{ font-size:12px; }
  .fields{ grid-template-columns:1fr 1fr; gap:12px; }
  .bookpage{ padding-top:var(--s5); }
  .book-head h1{ font-size:clamp(38px,10vw,52px); }
  .walkin{ gap:12px; }
  .walkin .btn{ width:100%; }
}