/* Waymark Maps — round 5 shared base. The system every direction shares: six type sizes (token names here, values
   per direction), the 8 px spacing scale, layout, accessible components (header, phone menu, buttons, FAQ, notice,
   sticky phone bar, footer), the holiday switch and the motion guards. a.css / b.css / c.css set the token values and
   the look; they never add a seventh size or an off-scale space. */

:root{
  /* type: six sizes (directions override the values, never the count) */
  --fs-1:clamp(14px,13.6px + .1vw,15px);          /* captions, small print */
  --fs-2:clamp(17px,16.6px + .1vw,18px);          /* body, buttons, nav */
  --fs-3:clamp(20px,18.5px + .4vw,24px);          /* lead, card titles */
  --fs-4:clamp(26px,21px + 1.3vw,36px);           /* h3, step titles */
  --fs-5:clamp(38px,27px + 2.8vw,68px);           /* h2 */
  --fs-6:clamp(54px,32px + 5.6vw,128px);          /* display */
  --w-1:400; --w-2:600; --w-3:800;
  --lh-body:1.55; --lh-head:1.08; --lh-display:.92;
  --display-track:-.02em;
  /* spacing: the 8 px scale, nothing else */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --s9:160px;
  --gutter:20px; --max:1280px; --section:clamp(80px,56px + 6vw,160px); --head-h:64px;
  --stick-top:var(--head-h);      /* where sticky scenes pin (the preview builder adds the 40 px review strip) */
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.45,.64,1);
  --radius:8px; --btn-radius:999px;
  /* colour token names (directions set the values) */
  --bg:#fff; --surface:#f4f4f2; --text:#111; --muted:#5c5c5c; --line:#e4e4e1; --accent:#c8402b; --accent-hover:#a93420; --accent-text:#fff;
  --notice-bg:var(--text); --notice-text:var(--bg); --mark-top:#c8402b;
}
@media (min-width:768px){ :root{ --gutter:32px; } }
@media (min-width:1200px){ :root{ --gutter:48px; --head-h:72px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}   /* Safari ignores body's clip for the viewport */
body{margin:0;background:var(--bg);color:var(--text);font:var(--w-1) var(--fs-2)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
b,strong{font-weight:var(--w-2)}
button,input{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;background:var(--bg);color:var(--text)}
.skip:focus{left:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph{background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:3px;padding:0 3px}

html.menu-open{overflow:hidden}
.tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* layout */
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter)}
@media (min-width:1024px){ .grid{grid-template-columns:repeat(12,minmax(0,1fr))} }
.measure{max-width:34em}
.stack-3>*+*{margin-top:var(--s3)}
.stack-4>*+*{margin-top:var(--s4)}

/* type roles (directions set families, weights and tracking through tokens) */
.t-display{font:var(--w-3) var(--fs-6)/var(--lh-display) var(--font-display);letter-spacing:var(--display-track)}
.t-h2{font:var(--w-3) var(--fs-5)/1 var(--font-display);letter-spacing:var(--display-track)}
.t-h3{font:var(--w-2) var(--fs-4)/var(--lh-head) var(--font-display)}
.t-lead{font-size:var(--fs-3);line-height:1.42}
.t-small{font-size:var(--fs-1);line-height:1.45}
.t-muted{color:var(--muted)}

/* buttons + links: one primary, one secondary, one text link */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 var(--s4);border:0;border-radius:var(--btn-radius);
  background:var(--accent);color:var(--accent-text);font:var(--w-2) var(--fs-2)/1 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s,color .2s,box-shadow .2s,transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .btn:hover{background:var(--accent-hover)} .btn-2:hover{background:color-mix(in srgb,currentColor 10%,transparent)} }
.btn:active{transform:scale(.97)}
.btn-2{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.link{font-weight:var(--w-2);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.28em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:currentColor}

/* holiday notice */
.notice{background:var(--notice-bg);color:var(--notice-text);font-size:var(--fs-1);line-height:1.4;text-align:center;padding:10px var(--gutter)}
.notice a{font-weight:var(--w-2)}

/* header + phone menu */
.head{position:sticky;top:0;z-index:40;height:var(--head-h);background:var(--head-bg,var(--bg));color:var(--head-text,var(--text));transition:background-color .3s,color .3s,box-shadow .3s}
.head.scrolled{box-shadow:0 1px 0 var(--line)}
.head .wrap{display:flex;align-items:center;gap:var(--s3);height:100%}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;text-decoration:none;font:var(--w-2) var(--fs-2)/1 var(--font-body);letter-spacing:-.01em}
.logo svg{width:28px;height:28px;flex:none}
.nav{display:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:var(--fs-2);opacity:.78;transition:opacity .2s}
.nav a:hover{opacity:1}
.head .btn{min-height:44px;padding:0 var(--s3);display:none}
.menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-10px;border:0;background:none;color:inherit;cursor:pointer}
.menu-btn svg{width:24px;height:24px}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .bars{display:none}
.menu{position:fixed;left:0;right:0;top:var(--menu-top,var(--head-h));bottom:0;z-index:39;display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
  background:var(--bg);color:var(--text);overflow:auto}
.menu[hidden]{display:none}
.menu a:not(.btn){display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--line);font:var(--w-2) var(--fs-4)/1 var(--font-display);text-decoration:none}
.menu .btn{margin-top:var(--s4);align-self:stretch}
html.js:not(.reduce) .menu:not([hidden]) a{animation:menu-in .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes menu-in{from{transform:translateY(12px);opacity:0}}
@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:2px}
  .head .btn{display:inline-flex}
  .menu-btn,.menu{display:none!important}
}

/* FAQ */
.faq-list{border-bottom:1px solid var(--line)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:64px;padding-block:var(--s2);font:var(--w-2) var(--fs-3)/1.3 var(--font-body);cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .25s var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding-bottom:var(--s3);max-width:40em;color:var(--muted)}

/* sticky phone bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:var(--s2);padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:var(--bg);color:var(--text);box-shadow:0 -1px 0 var(--line);transform:translateY(110%);transition:transform .35s var(--ease-out)}
.mbar.on{transform:none}
.mbar p{flex:1;font-size:var(--fs-1);color:var(--muted)}
.mbar .btn{min-height:48px}
@media (min-width:1024px){ .mbar{display:none} }

/* footer */
.foot{padding-block:var(--s7) calc(var(--s6) + 80px)}
@media (min-width:1024px){ .foot{padding-block:var(--s8) var(--s6)} }
.foot .wrap{display:grid;gap:var(--s5)}
@media (min-width:768px){ .foot .wrap{grid-template-columns:2fr 1fr 1fr} }
.foot nav{display:flex;flex-direction:column}
.foot nav a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.foot .legal{grid-column:1/-1;font-size:var(--fs-1);color:var(--muted)}

/* the holiday switch: copy blocks swap; directions swap the accent */
html:not([data-season="holiday"]) [data-season-show="holiday"],html[data-season="holiday"] [data-season-hide="holiday"]{display:none!important}

/* masked line reveal for hero headlines: <span class="ln"><span>words</span></span> (transform only, so the paint is instant) */
.ln{display:block;overflow:hidden;padding-block:.04em .1em;margin-block:-.04em -.1em}
.ln>span{display:block}
html.js:not(.reduce) .ln>span{animation:ln-up .95s var(--ease-out) both;animation-delay:calc(var(--i,0) * 100ms + 80ms)}
@keyframes ln-up{from{transform:translateY(108%)}}

/* motion guards: with reduced motion everything sits in its final state */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html.reduce *,html.reduce *::before,html.reduce *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}