/* ==========================================================
   Tiny Trades — tinytradesmuncie.com
   Type: Clash Display / General Sans / Martian Mono
   Color intent: orange leads, LIGHT BLUE carries structure,
   navy recedes to text and one closing band.
   ========================================================== */

:root{
  --orange:#FF8811; --orange-deep:#E5730A;
  /* --blue is sampled straight from the logo artwork (#0071AD), not the
     Coolors swatch (#067BC2) — the logo is the fixed asset, so it wins. */
  --blue:#0071AD;   --blue-deep:#005A8A; --blue-light:#4BA3D4;
  --sky:#E8F4FB;    --sky-line:#C4E2F4; --sky-deep:#D2E8F7;
  --navy:#1F2A44;   --navy-deep:#151C2E; --slate:#6B7385;
  --sand:#FDF6EC;   --sand-line:#EADCC6; --sand-deep:#F6EAD6;
  --mint:#D6F6DD;   --lime:#EAF9D9;
  --white:#FFFFFF;  --cream:#F5EFE4;

  --display:'Clash Display','Trebuchet MS',system-ui,sans-serif;
  --body:'General Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);

}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--sand);color:var(--navy);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
html.lenis{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance;}
h1{font-size:clamp(44px,7.6vw,80px);line-height:.94;}
h2{font-size:clamp(31px,5vw,58px);line-height:1.02;}
h3{font-size:clamp(20px,2.3vw,25px);line-height:1.18;letter-spacing:-.01em;}
p{margin:0;max-width:58ch;}
.lede{font-size:clamp(16px,1.75vw,19.5px);line-height:1.58;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:0;color:var(--blue-deep);}
.data{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.06em;}
.muted{opacity:.62;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.01em;
  padding:15px 30px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;display:inline-block;cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.btn-sm{padding:9px 19px;font-size:14.5px;}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px;}
.btn-primary{background:var(--orange);color:var(--navy);}
.btn-primary:hover{background:var(--orange-deep);}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:var(--blue-deep);}
.btn-outline-blue{background:transparent;color:var(--blue-deep);border-color:var(--blue-deep);}
.btn-outline-blue:hover{background:var(--blue-deep);color:#fff;}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;}


/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:var(--orange);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--pad);
  transition:transform .35s var(--ease),box-shadow .3s var(--ease);
}
.topbar.hide{transform:translateY(-170%);}
/* no divider while sitting over the orange hero; it earns one once it floats */
.topbar.floating{box-shadow:0 6px 22px rgba(31,42,68,.17);}

/* the wordmark lives large in the hero, so the nav copy only fades in
   once you have scrolled past it */
.brand{display:block;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);}
.brand img{height:36px;width:auto;display:block;}
.topbar.floating .brand{opacity:1;pointer-events:auto;}

.navlinks{display:flex;gap:10px;}
.navlinks a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;
  padding:8px 15px;border-radius:999px;
  border:2px solid rgba(31,42,68,.32);background:rgba(255,255,255,.60);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  white-space:nowrap;
}
.navlinks a:hover{background:var(--navy);border-color:var(--navy);color:var(--orange);}

/* Eight pills need more room than seven. Between the hamburger breakpoint and
   1400px the pills tighten so the row still clears the wordmark; above 1400
   there is room to spare and they go back to full size. */
@media(min-width:1181px) and (max-width:1400px){
  .navlinks{gap:7px;}
  .navlinks a{padding:8px 11px;letter-spacing:.10em;}
}
/* ---------- mobile menu ---------- */
.navtoggle{display:none;}

@media(max-width:1180px){
  /* no divider under the bar — a hard line across the hero reads as a seam.
     the solid navy toggle carries the visibility on its own; a soft shadow
     gives the bar depth once it lifts off the page */
  .topbar{box-shadow:0 4px 14px rgba(31,42,68,.14);}

  /* solid navy pill, not an outline — the highest-contrast shape available
     against the orange bar, and a full 44px touch target */
  .navtoggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:50px;height:44px;padding:0 11px;
    background:var(--navy);border:2px solid var(--navy);border-radius:13px;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:background-color .18s var(--ease);
  }
  .navtoggle span{
    display:block;height:3px;width:100%;background:var(--orange);border-radius:2px;
    transition:transform .26s var(--ease),opacity .18s var(--ease);
  }
  .navtoggle:focus-visible{outline:3px solid var(--navy);outline-offset:3px;}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  /* navy panel against the orange bar: the open menu can't be mistaken for
     more page, and cream-on-navy links clear AAA */
  .navlinks{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--navy);
    border-top:3px solid var(--orange);
    box-shadow:0 18px 40px rgba(31,42,68,.42);
    padding:6px var(--pad) 14px;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .32s var(--ease),visibility .32s;
  }
  .navlinks.open{max-height:70vh;visibility:visible;overflow-y:auto;}
  .navlinks a{
    border:0;background:transparent;border-radius:0;
    border-bottom:1px solid rgba(245,239,228,.30);
    color:var(--cream);
    padding:17px 2px;font-size:13.5px;letter-spacing:.14em;
  }
  .navlinks a:last-child{border-bottom:0;}
  .navlinks a:hover,.navlinks a:active,.navlinks a:focus-visible{
    background:transparent;color:var(--orange);opacity:1;
  }
}

/* ---------- bands ---------- */
.band{padding:clamp(64px,10vw,124px) var(--pad);}
.inner{max-width:var(--maxw);margin:0 auto;}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(40px,6vw,64px);}
.band-sand{background:var(--sand);}
.band-sky{background:var(--sky);}
.band-mint{background:var(--mint);}
.band-mint .eyebrow{color:var(--blue-deep);}
.band-blue{background:var(--blue-deep);color:#fff;}
.band-blue h2{color:#fff;}
.band-blue .eyebrow{color:#BFE4FA;}
.band-navy{background:var(--navy);color:var(--cream);}
.band-navy h2{color:var(--cream);}
.band-navy .eyebrow{color:var(--blue-light);}
.band-navy p{color:rgba(245,239,228,.86);}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1.24fr .76fr;
  min-height:min(92vh,780px);
  padding-top:64px;
  background:var(--orange);
}
.hero-copy{
  /* copy sits high in the panel so the excavator has real road to drive on */
  /* bottom padding reserves a full lane for the excavator, uncropped */
  padding:clamp(26px,3.2vw,44px) var(--pad) clamp(150px,16vw,205px);
  display:flex;flex-direction:column;justify-content:flex-start;gap:17px;
  position:relative;overflow:hidden;
}
.hero-copy>*{position:relative;z-index:2;}
.hero-logo{
  width:min(100%,364px);height:auto;
  margin-bottom:clamp(2px,.8vw,8px);
}
@media(max-width:900px){.hero-logo{width:min(84%,330px);}}
.hero-copy .eyebrow{color:var(--navy);opacity:.72;}
.hero-copy h1{color:var(--navy);max-width:9ch;}
.hero-copy h1 .l{display:inline-block;}
.hero-copy .lede{
  color:var(--navy);opacity:.88;max-width:60ch;
  font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.55;
}
/* the boom pivots about the cab, in SVG user units */
.exc-arm{transform-box:view-box;transform-origin:124px 100px;}

/* parked at the left of the panel; drives right toward the photo on scroll */
.hero-art{
  position:absolute;left:var(--pad);bottom:22px;width:min(48%,286px);
  color:#00537F;opacity:.26;z-index:1;pointer-events:none;
}
/* the hero photo sits in the same frame the other photos use */
.hero-photo{
  position:relative;background:var(--orange);min-height:300px;
  display:flex;align-items:stretch;
  padding:clamp(18px,2.6vw,40px) clamp(18px,2.6vw,40px) clamp(18px,2.6vw,40px) 0;
}
/* A rotated box with overflow:hidden and a radius gets jagged edges on
   mobile GPUs. Compositing it on its own layer makes the browser
   antialias the rotation properly. */
.hero-frame{
  margin:0;position:relative;flex:1;overflow:hidden;
  border:3px solid var(--navy);border-radius:20px;background:var(--white);
  transform:rotate(-1.4deg) translateZ(0);
  box-shadow:0 16px 36px rgba(31,42,68,.2);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  will-change:transform;isolation:isolate;
}
.hero-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-tag{
  position:absolute;left:0;bottom:0;z-index:3;
  background:var(--blue);color:#fff;font-size:9.5px;letter-spacing:.18em;padding:8px 13px;
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero-photo{height:min(66vw,360px);padding:0 var(--pad) clamp(18px,4vw,28px);}
  .hero-frame{transform:rotate(-1.1deg);}
  .hero-copy{padding-bottom:clamp(168px,44vw,215px);}
  .hero-art{width:min(62%,250px);left:var(--pad);bottom:18px;}
}

/* ---------- steps ---------- */
/* Five cards on a six-column track: each spans 2, so the first row holds
   three and the last row's two get pushed in by one column to sit centred
   under them instead of stranded on the left. */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(20px,3vw,36px);}
.step{grid-column:span 2;}
.step:nth-child(4){grid-column:2 / span 2;}
/* bounded at the bottom so none of this leaks past the single-column
   breakpoint, where a span-2 rule would invent a second column */
@media(max-width:1000px) and (min-width:841px){
  .steps{grid-template-columns:repeat(4,1fr);}
  .step,.step:nth-child(4){grid-column:span 2;}
  .step:nth-child(5){grid-column:2 / span 2;}
}
@media(max-width:840px){
  .steps{grid-template-columns:1fr;}
  .step,.step:nth-child(4),.step:nth-child(5){grid-column:auto;}
}
.step{
  background:var(--white);border:3px solid var(--blue);border-radius:22px;
  padding:30px 28px 32px;display:flex;flex-direction:column;gap:11px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.step:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(6,123,194,.2);}
.stepart{width:78px;height:66px;color:var(--blue);margin-bottom:6px;}
.step p{font-size:16px;color:var(--slate);}

/* ---------- play options ---------- */
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px);}
@media(max-width:900px){.options{grid-template-columns:1fr;}}
.opt{
  background:var(--white);border:3px solid var(--blue);border-radius:22px;
  padding:28px 26px 30px;display:flex;flex-direction:column;gap:11px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.opt:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,113,173,.2);}
/* blue = walk in, orange = book ahead. The color carries the distinction. */
.opt.book{border-color:var(--orange);}
.opt.book:hover{box-shadow:0 16px 34px rgba(229,115,10,.24);}
/* open play sits a shade deeper than the pale blue band behind it */
.opt.tint{background:var(--sky-deep);}
.opt-tag{
  align-self:flex-start;font-size:9.5px;letter-spacing:.18em;
  background:var(--blue);color:#fff;padding:5px 11px;border-radius:999px;
}
.opt.book .opt-tag{background:var(--orange);color:var(--navy);}
.opt.book .optlink{color:var(--orange-deep);border-bottom-color:var(--orange);}
.opt.book .optlink:hover{color:var(--blue-deep);border-bottom-color:var(--blue);}
.opt p{font-size:16px;color:var(--slate);flex:1;}
.optlink{
  font-family:var(--display);font-weight:600;font-size:16px;
  color:var(--blue-deep);text-decoration:none;
  border-bottom:2px solid var(--blue);padding-bottom:2px;align-self:flex-start;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.optlink:hover{color:var(--orange-deep);border-bottom-color:var(--orange);}

/* ---------- spec grid ---------- */
/* section headings in a blue band take the same pale blue as the eyebrow */
.band-blue .spec-title{color:#BFE4FA;}
.specgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);}
@media(max-width:820px){.specgrid{grid-template-columns:1fr;}}
.spec-title{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.3);
}
.rows{display:flex;flex-direction:column;}
.row{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.16);
  transition:background-color .2s var(--ease),padding-left .2s var(--ease);
}
.row:hover{background:rgba(255,255,255,.08);padding-left:8px;}
.row:last-child{border-bottom:0;}
.row .k{font-size:16px;}
.row .v{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.row .v .u{font-size:10.5px;opacity:.7;margin-left:3px;}
/* Wednesday is not closed, it is a different kind of open — so it reads as
   an accent rather than a greyed-out row */
.row.special .k,.row.special .v{opacity:1;}
.row.special .v{color:#FFC98A;}
.row.today{background:rgba(255,136,17,.22);padding-left:8px;border-radius:5px;}
.row.today .k,.row.today .v{color:#FFC98A;font-weight:600;}
.row.hilite .v{color:#FFC98A;}
.spec-note{margin-top:19px;font-size:14px;color:rgba(255,255,255,.82);}
.spec-cta{margin-top:clamp(34px,5vw,52px);display:flex;justify-content:center;}

/* ---------- sand split ---------- */
.split{display:grid;grid-template-columns:1fr .9fr;gap:clamp(34px,6vw,84px);align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;}}
.split .copy{display:flex;flex-direction:column;gap:19px;}
.factlist{display:flex;flex-direction:column;margin-top:6px;}
.fact{display:flex;gap:17px;align-items:flex-start;padding:17px 0;border-bottom:1px solid rgba(31,42,68,.13);}
.fact:last-child{border-bottom:0;}
.fact .fnum{font-size:11px;color:var(--blue-deep);flex:none;padding-top:5px;}
.fact b{font-family:var(--display);font-weight:600;}
.fact span:last-child{font-size:16px;}

/* ---------- photo cards ---------- */
.photo-stack{position:relative;padding:20px 0 34px;}
.pcard{
  margin:0;border-radius:18px;overflow:hidden;
  border:3px solid var(--blue);background:var(--white);
  transition:transform .4s var(--ease);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.pcard.tilt-a{transform:rotate(-2.2deg);}
.pcard.tilt-a:hover{transform:rotate(0deg) scale(1.015);}
.pcard.tilt-b{
  transform:rotate(3.4deg);position:absolute;right:-8px;bottom:0;width:45%;
  border-color:var(--orange);box-shadow:0 14px 32px rgba(31,42,68,.2);
}
.pcard.tilt-b:hover{transform:rotate(0deg) scale(1.03);}
@media(max-width:520px){.pcard.tilt-b{width:54%;}}

/* ---------- founders ---------- */
.founders{display:grid;grid-template-columns:.68fr 1fr;gap:clamp(32px,6vw,76px);align-items:center;}
@media(max-width:860px){.founders{grid-template-columns:1fr;}}
.founders .copy{display:flex;flex-direction:column;gap:19px;}
.founders .eyebrow{color:var(--orange-deep);}
.sig{font-family:var(--display);font-weight:500;font-size:18px;color:var(--orange-deep);margin-top:4px;}

/* ---------- pro trades ---------- */
.pt-wrap{display:grid;grid-template-columns:1fr .78fr;gap:clamp(32px,6vw,74px);align-items:center;}
@media(max-width:860px){.pt-wrap{grid-template-columns:1fr;}}
.pt-wrap .copy{display:flex;flex-direction:column;gap:19px;}
.pt-logo{margin:0;background:#fff;border-radius:18px;padding:28px;border:3px solid var(--blue-light);}

/* ---------- subpages ---------- */
.subpage{padding-top:62px;}
.pagehead{padding-bottom:clamp(44px,6vw,68px);}
.pagehead .inner{display:flex;flex-direction:column;gap:16px;}
.pagehead h1{font-size:clamp(40px,7.5vw,80px);max-width:12ch;}
.backlink{
  font-size:10px;letter-spacing:.2em;color:var(--blue-deep);
  text-decoration:none;align-self:flex-start;margin-bottom:6px;
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color .18s var(--ease);
}
.backlink:hover{border-bottom-color:var(--blue);}
.hoursback{margin-top:clamp(38px,5vw,60px);max-width:520px;}

/* ---------- punch cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px);align-items:start;}
@media(max-width:900px){.cards{grid-template-columns:1fr;}}
.pcardbox{
  position:relative;background:var(--white);
  border:3px solid var(--blue);border-radius:22px;
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pcardbox:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,113,173,.2);}
.pcardbox.best{border-color:var(--orange);background:var(--sky);}
.pcardbox.best:hover{box-shadow:0 16px 34px rgba(229,115,10,.26);}
.pc-flag{
  position:absolute;top:-13px;left:24px;
  background:var(--orange);color:var(--navy);
  font-size:9.5px;letter-spacing:.18em;padding:5px 12px;border-radius:999px;
}
.pc-name{font-size:10.5px;letter-spacing:.2em;color:var(--blue-deep);margin:0;}
.pcardbox.best .pc-name{color:var(--orange-deep);}
.pc-visits{
  font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,34px);
  line-height:1;color:var(--navy);margin:0;letter-spacing:-.02em;
}
.pc-prices{display:flex;flex-direction:column;margin-top:2px;}
.pc-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--sand-line);font-size:15.5px;
}
.pcardbox.best .pc-row{border-bottom-color:rgba(31,42,68,.12);}
.pc-row:last-child{border-bottom:0;}
.pc-row .data{font-size:16px;font-weight:500;color:var(--navy);}
.pc-perks{
  list-style:none;margin:4px 0 0;padding:14px 0 0;
  border-top:2px dashed var(--orange);
  display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--navy);
}
.pc-perks li{padding-left:17px;position:relative;line-height:1.45;}
.pc-perks li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--orange);}
.pc-exp{font-size:9.5px;letter-spacing:.16em;color:var(--slate);margin:6px 0 0;}

.rulesblock{
  margin-top:clamp(34px,5vw,54px);
  background:var(--white);border:3px solid var(--sand-line);border-radius:20px;
  padding:clamp(24px,3.4vw,34px);
}
.rulesblock .eyebrow{margin-bottom:16px;}
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 32px;}
@media(max-width:760px){.rules{grid-template-columns:1fr;}}
.rules li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5;color:var(--navy);}
.rules li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--blue);}

/* ---------- signup form ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.signup{display:flex;flex-wrap:wrap;gap:12px;align-items:center;max-width:620px;}
.signup input[type=email]{
  flex:1 1 260px;font-family:var(--body);font-size:16.5px;color:var(--navy);
  background:var(--white);border:3px solid var(--blue);border-radius:999px;
  padding:14px 22px;outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.signup input[type=email]::placeholder{color:var(--slate);}
.signup input[type=email]:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,136,17,.24);}
.signup input[type=email][aria-invalid="true"]{border-color:#B4321F;}
.formnote{flex:1 1 100%;font-size:11px;letter-spacing:.1em;min-height:1.2em;margin:0;color:var(--blue-deep);}
.formnote.err{color:#B4321F;}

/* Netlify honeypot — a real field that only a bot would fill in, so it has to
   stay in the DOM. Hidden from sight and from screen readers alike. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- inquiry form ---------- */
.inquiry{display:flex;flex-direction:column;gap:18px;max-width:760px;}
.inquiry .fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:680px){.inquiry .fieldrow{grid-template-columns:1fr;}}
.inquiry .field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.inquiry label{
  font-family:var(--display);font-weight:600;font-size:15px;
  color:var(--navy);letter-spacing:-.01em;
}
/* not .opt — that name is already the play-options card, and this span was
   inheriting its border, white background and padding */
.inquiry .opt-note{
  font-family:var(--body);font-weight:400;font-size:13px;
  color:var(--slate);letter-spacing:0;
}
/* the input's own required attribute carries this for screen readers, so the
   star is decorative and aria-hidden */
.inquiry .req{color:var(--blue-deep);font-size:16px;}
.inquiry input,.inquiry select,.inquiry textarea{
  font-family:var(--body);font-size:16.5px;color:var(--navy);
  background:var(--white);border:3px solid var(--blue);border-radius:14px;
  padding:13px 17px;outline:none;width:100%;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.inquiry textarea{resize:vertical;min-height:104px;line-height:1.5;}
.inquiry input::placeholder{color:var(--slate);}
.inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{
  border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,136,17,.24);
}
.inquiry [aria-invalid="true"]{border-color:#B4321F;}
.inquiry button{align-self:flex-start;}

/* ---------- hiring form extras: pill radios + resume upload ---------- */
/* The native radio is hidden rather than removed so keyboard focus and
   screen readers still work — the pill is just the label wearing its state. */
.inquiry .choices{display:flex;flex-wrap:wrap;gap:10px;}
.inquiry .choices input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;}
.inquiry .choices label{
  display:inline-flex;align-items:center;cursor:pointer;
  background:var(--white);border:3px solid var(--blue);border-radius:999px;
  padding:10px 20px;font-size:15px;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.inquiry .choices label:hover{border-color:var(--orange);}
.inquiry .choices input[type=radio]:checked + label{
  background:var(--orange);border-color:var(--orange);color:var(--navy);
}
.inquiry .choices input[type=radio]:focus-visible + label{
  outline:3px solid var(--navy);outline-offset:3px;
}
.inquiry .choices[aria-invalid="true"] label{border-color:#B4321F;}

.inquiry input[type=file]{padding:9px 12px;cursor:pointer;}
.inquiry input[type=file]::file-selector-button{
  font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--navy);
  background:var(--sand-deep);border:0;border-radius:10px;
  padding:9px 16px;margin-right:14px;cursor:pointer;
}
.inquiry input[type=file]:hover::file-selector-button{background:var(--orange);}
.inquiry .helper{
  font-family:var(--body);font-weight:400;font-size:13.5px;
  color:var(--slate);letter-spacing:0;margin:0;
}

/* ---------- footer sand easter egg ---------- */
.sandplay-wrap{position:relative;height:clamp(120px,17vw,168px);background:var(--navy-deep);overflow:hidden;}
.sandplay-under{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--navy-deep);
}
.sandplay-under .data{
  font-size:clamp(15px,3.6vw,34px);letter-spacing:.22em;color:var(--orange);
  text-align:center;padding:0 16px;
}
#footSand{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:crosshair;}
.sandplay-hint{
  position:absolute;left:50%;bottom:11px;transform:translateX(-50%);z-index:3;
  font-size:9px;letter-spacing:.2em;color:#7C6242;pointer-events:none;
  transition:opacity .5s var(--ease);white-space:nowrap;
}
.sandplay-hint.gone{opacity:0;}

/* ---------- footer ----------
   Deliberately NOT the mono face. The footer is a sign-off, so it uses the
   display and body faces in sentence case: no tracking, no all-caps. */
footer{background:var(--navy-deep);color:var(--cream);padding:58px var(--pad) 46px;}
.footgrid{display:flex;flex-wrap:wrap;gap:34px 26px;justify-content:space-between;}
.footgrid p{
  font-family:var(--body) !important;
  font-size:15.5px;font-weight:400;letter-spacing:0 !important;
  text-transform:none;line-height:1.55;margin:0 0 2px;
  color:rgba(245,239,228,.72);
}
/* .footgrid p is class+element, so these need matching weight to win */
.footgrid p.foot-lg{
  font-family:var(--display) !important;
  font-size:26px !important;font-weight:600;letter-spacing:-.02em !important;
  margin-bottom:6px !important;color:var(--orange);line-height:1.1;
}
.footgrid .muted{opacity:1;}

/* ---------- social ---------- */
.social{display:flex;flex-direction:column;gap:11px;}
.footgrid p.sociallabel{
  margin-bottom:4px !important;
  font-family:var(--display) !important;font-weight:600;
  font-size:15.5px !important;color:var(--cream) !important;
}
.socialrow{display:flex;flex-wrap:wrap;gap:10px;}
.sociallink{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:14.5px;
  color:var(--cream);background:transparent;text-decoration:none;
  border:2px solid rgba(245,239,228,.34);border-radius:999px;
  padding:9px 18px;cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.sociallink svg{flex:none;}
.sociallink:hover{background:var(--orange);color:var(--navy);border-color:var(--orange);}
.sociallink:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
.soonnote{
  font-family:var(--body) !important;font-size:13.5px !important;
  letter-spacing:0 !important;text-transform:none;
  color:var(--orange);min-height:1.3em;margin:0 !important;
}


/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);}
.no-motion .reveal{opacity:1;transform:none;}
.draw path,.draw rect,.draw circle{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);}
.no-motion .draw path,.no-motion .draw rect,.no-motion .draw circle{stroke-dashoffset:0;}

/* ---------- reduced motion ----------
   iOS Accessibility > Motion > Reduce Motion turns this on, and plenty of
   people run it permanently. The setting is about DECORATIVE and large-scale
   movement, not about interface feedback, so buttons, the menu and the FAQ
   still respond normally. What goes away: parallax, the excavator drive,
   the idle bounce, the line art drawing itself, and the sand canvas. */
@media(prefers-reduced-motion:reduce){
  /* content is simply there, no slide-up */
  .reveal{opacity:1 !important;transform:none !important;}
  .draw path,.draw rect,.draw circle{stroke-dashoffset:0 !important;}

  /* nothing drifts, bounces or pulses on its own */
  .hero-art,.exc-arm,.exc-body{transform:none !important;}
  /* the tilts are static styling, not motion — keep them */
  .pcard.tilt-a{transform:rotate(-2.2deg) !important;}
  .pcard.tilt-b{transform:rotate(3.4deg) !important;}
  .hero-frame{transform:rotate(-1.4deg) !important;}
  .statusbar.open .dot{animation:none !important;}

  /* hover lifts removed, colour feedback kept */
  .btn:hover,.step:hover,.opt:hover,.pcardbox:hover{transform:none !important;}
  .pcard.tilt-a:hover{transform:rotate(-2.2deg) !important;}
  .pcard.tilt-b:hover{transform:rotate(3.4deg) !important;}

  /* interface transitions stay, just quicker */
  .btn,.navlinks,.navlinks a,.navtoggle,.navtoggle span,
  .optlink,.faq summary,.sociallink,.row,.topbar{transition-duration:.12s !important;}
}

/* ---------- booking cards (parties page) ---------- */
.bookline{font-size:15px;color:var(--slate);line-height:1.5;margin:2px 0 6px;flex:1;}
.pcardbox .btn{align-self:flex-start;font-size:15px;padding:12px 22px;word-break:break-word;}
@media(max-width:420px){.pcardbox .btn{font-size:13.5px;padding:11px 16px;}}
.cards.two-up{grid-template-columns:1.25fr .75fr;}
@media(max-width:900px){.cards.two-up{grid-template-columns:1fr;}}

/* navy button — used where orange would be too loud (e.g. the signup form) */
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-deep);}

/* ---------- FAQ accordion ---------- */
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,60px);}
@media(max-width:860px){.faqgrid{grid-template-columns:1fr;}}
.faqcol{display:flex;flex-direction:column;}
.faq{
  border-bottom:1px solid var(--sky-line);
  background:transparent;
}
.faq summary{
  list-style:none;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:17.5px;
  color:var(--navy);padding:18px 34px 18px 0;position:relative;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:rotate(45deg);transition:transform .22s var(--ease);
}
.faq[open] summary::after{transform:rotate(-135deg);margin-top:-3px;}
.faq summary:hover{color:var(--blue-deep);}
.faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px;}
.faq p{
  margin:0;padding:0 34px 20px 0;
  font-size:16px;line-height:1.6;color:var(--slate);max-width:52ch;
}
.faq p a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px;}

/* inline links inside body copy — the browser default is an unbranded blue
   that disappears entirely on the navy and blue bands */
.lede a,.bookline a,.pc-perks a,.spec-note a{
  color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px;
}
.band-navy .lede a,.band-navy .bookline a{color:var(--orange);}
/* orange only clears 3:1 against the blue band, so links there take the same
   pale blue the eyebrows use */
.band-blue .lede a,.band-blue .bookline a,.band-blue .spec-note a{color:#BFE4FA;}
.lede a:hover,.bookline a:hover,.spec-note a:hover{color:var(--orange-deep);}
.band-navy .lede a:hover,.band-navy .bookline a:hover,
.band-blue .lede a:hover,.band-blue .bookline a:hover,
.band-blue .spec-note a:hover{color:var(--white);}
.faq p a:hover{color:var(--orange-deep);}

/* hours table on its own, not in a two-column spec grid */
.hourswide{max-width:520px;}

/* "Closed. Private events only." is long — let it wrap instead of overflowing */
.row.special .v{white-space:normal;text-align:right;line-height:1.35;}