/* Contact — front counter and directions board
   A page-local composition built from the shared Honest Job Board materials. */

.contact-page{
  --counter-gutter:clamp(1rem,4vw,4.25rem);
  overflow:clip;
}

.contact-page :where(.contact-hero,.shop-map,.appointment-preview,.contact-reassurance)>*{
  min-width:0;
}

/* ---------- counter intake ---------- */
.contact-page>.contact-rail{
  z-index:12;
}

.contact-page .contact-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(420px,.9fr) minmax(0,1.1fr);
  gap:0;
  align-items:start;
  min-height:clamp(590px,44vw,760px);
  padding:clamp(2.4rem,3vw,3.2rem) var(--counter-gutter) clamp(4.7rem,6.5vw,7rem);
  background:
    radial-gradient(105% 62% at 50% -8%,rgba(149,191,239,.16),rgba(149,191,239,0) 66%),
    linear-gradient(90deg,rgba(3,10,24,.28),transparent 24%,transparent 76%,rgba(3,10,24,.28)),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-back) 100%);
}

.contact-page .contact-hero>.ticket-clip{
  position:absolute;
  z-index:7;
  top:-12px;
  width:clamp(90px,7.4vw,112px);
  height:auto;
  pointer-events:none;
  filter:brightness(1.08) contrast(1.04) drop-shadow(0 7px 6px rgba(5,15,33,.58));
}

.contact-page .contact-hero>.ticket-clip--left{
  left:calc(var(--counter-gutter) + min(9vw,100px));
}

.contact-page .contact-hero>.ticket-clip--right{
  right:auto;
  left:calc(var(--counter-gutter) + min(36vw,475px));
}

.contact-page .contact-ticket{
  display:block;
  z-index:4;
  width:calc(100% + clamp(52px,5.4vw,88px));
  max-width:760px;
  min-height:clamp(500px,36vw,590px);
  margin-right:clamp(-88px,-5.4vw,-52px);
  padding:clamp(2.1rem,3.5vw,3.8rem);
  isolation:isolate;
  background-image:var(--paper-stock);
  background-position:var(--paper-stock-pos);
  background-size:var(--paper-stock-size);
  box-shadow:none;
  filter:drop-shadow(0 5px 5px rgba(5,15,33,.32)) drop-shadow(0 25px 30px rgba(5,15,33,.42));
}

.contact-page .contact-ticket::before{
  display:none;
}

.contact-page .contact-ticket::after{
  z-index:1;
  background-color:var(--paper);
  background-image:var(--paper-stock);
  background-position:var(--paper-stock-pos);
  background-size:var(--paper-stock-size);
}

.contact-page .contact-ticket .ticket__duplicate{
  inset:14px 12px -15px -18px;
  z-index:0;
  width:auto;
  border:1px solid #87a7af;
  background-color:var(--copy);
  background-image:linear-gradient(rgba(221,238,239,.7),rgba(197,220,223,.72)),url("assets/materials-v2/job-ticket-paper-tile-white-v1.webp");
  background-size:auto,920px 920px;
  box-shadow:0 12px 24px rgba(5,15,33,.32);
  transform:rotate(-.7deg);
}

.contact-page .contact-ticket .ticket__body{
  position:relative;
  z-index:3;
  display:grid;
  align-content:center;
  min-height:100%;
}

.contact-ticket__meta,
.appointment-form__header{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:clamp(1.4rem,2.4vw,2.2rem);
  padding-bottom:.65rem;
  border-bottom:2px solid rgba(24,80,130,.38);
  color:var(--blue-ink);
  font-family:"Barlow Condensed",sans-serif;
  font-size:.875rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.contact-page .contact-ticket h1{
  max-width:none;
  margin-bottom:1.1rem;
  white-space:nowrap;
  text-wrap:nowrap;
  font-size:clamp(3.5rem,5.8vw,5.8rem);
  line-height:.88;
}

.contact-page .contact-ticket__intro{
  max-width:54ch;
  margin-bottom:1.5rem;
  color:var(--ink);
  font-size:clamp(1.05rem,1.35vw,1.2rem);
  line-height:1.55;
}

.contact-page .contact-ticket .button-group{
  display:grid;
  grid-template-columns:1fr;
  gap:.8rem;
  align-items:stretch;
}

.contact-page .contact-ticket .button{
  width:100%;
  min-width:0;
  margin-top:0;
}

.contact-page .contact-ticket .button--secondary{
  width:auto;
  justify-self:start;
  color:var(--navy-deep);
  border-color:var(--navy-deep);
  background:rgba(244,245,245,.58);
}

.contact-page .contact-ticket .button--secondary:hover,
.contact-page .contact-ticket .button--secondary:focus-visible{
  color:var(--navy-deep);
  border-color:var(--yellow);
  background:var(--yellow);
}

.contact-page .contact-hero__email{
  display:inline-block;
  margin-top:1.25rem;
  color:var(--blue-deep);
  font-size:clamp(1rem,1.2vw,1.1rem);
  font-weight:700;
  text-underline-offset:.22em;
  overflow-wrap:anywhere;
}

.contact-page .contact-ticket__note{
  max-width:58ch;
  margin:1.4rem 0 0;
  padding-top:1rem;
  border-top:1px solid rgba(24,80,130,.28);
  color:var(--ink-soft);
}

.contact-page .contact-arrival{
  position:relative;
  z-index:3;
  min-height:clamp(510px,36vw,630px);
  margin-left:0;
  overflow:visible;
  transform:rotate(.18deg);
  box-shadow:var(--counter-shadow);
}

.contact-page .contact-arrival>img{
  position:absolute;
  inset:0;
  object-position:center 58%;
}

.contact-page .contact-arrival__sign{
  position:absolute;
  z-index:8;
  top:calc(clamp(9px,1.1vw,17px) * -1.35);
  right:2%;
  display:grid;
  justify-items:center;
  gap:.25rem;
  width:min(92%,680px);
  padding:.58rem clamp(2.1rem,3.4vw,3.5rem) .7rem;
  border:clamp(9px,.78vw,12px) clamp(16px,1.35vw,22px) solid transparent;
  border-image-source:url("assets/materials-v2/deep-blue-enamel-service-plate-v2.webp");
  border-image-slice:150 260 fill;
  border-image-repeat:stretch;
  color:var(--paper-light);
  background:var(--navy);
  filter:drop-shadow(0 8px 9px rgba(5,15,33,.55));
  font-family:"Barlow Condensed",sans-serif;
  line-height:1;
  text-align:center;
}

.contact-page .contact-arrival__sign::before,
.contact-page .contact-arrival__sign::after{
  position:absolute;
  z-index:2;
  top:.18rem;
  width:clamp(17px,1.45vw,22px);
  aspect-ratio:1;
  content:"";
  background:url("assets/materials-v2/rail-screw-v2.webp") center/contain no-repeat;
  filter:drop-shadow(0 1px 1px rgba(5,15,33,.72));
}

.contact-page .contact-arrival__sign::before{left:clamp(1.5rem,2vw,2rem)}
.contact-page .contact-arrival__sign::after{right:clamp(1.5rem,2vw,2rem)}

.contact-page .contact-arrival__sign>span{
  margin:0;
  color:var(--yellow);
  font-size:clamp(1rem,1.3vw,1.2rem);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-page .contact-arrival__sign>strong{
  color:var(--paper-light);
  font-size:clamp(1.3rem,2vw,1.85rem);
  line-height:1.05;
}

.contact-page .contact-arrival__sign>a{
  margin-top:.12rem;
  color:var(--paper-light);
  font-size:1rem;
  font-weight:800;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:2px;
  text-underline-offset:.22em;
  text-transform:uppercase;
}

.contact-page .contact-arrival__sign>a:hover,
.contact-page .contact-arrival__sign>a:focus-visible{
  color:var(--yellow);
}

.contact-page .contact-arrival__sign>a:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:4px;
}

.contact-page .contact-arrival__hours{
  position:absolute;
  z-index:8;
  right:clamp(.7rem,1.5vw,1.2rem);
  bottom:clamp(-2rem,-2.1vw,-1.3rem);
  display:grid;
  grid-template-columns:auto auto;
  gap:.2rem 1.25rem;
  width:min(82%,550px);
  min-width:0;
  padding:1rem 1.45rem 1.05rem;
  border:6px solid #879196;
  border-radius:2px;
  color:var(--paper-light);
  background:linear-gradient(180deg,#263c4d,var(--navy-deep));
  box-shadow:0 12px 20px rgba(5,15,33,.5),inset 0 1px 0 rgba(255,255,255,.2);
  font-family:"Barlow Condensed",sans-serif;
}

.contact-page .contact-arrival__hours::before,
.contact-page .contact-arrival__hours::after{
  position:absolute;
  top:50%;
  width:8px;
  height:8px;
  border:1px solid #555f64;
  border-radius:50%;
  content:"";
  background:#d8dcdb;
  box-shadow:inset 0 1px 1px #fff,0 1px 2px rgba(0,0,0,.6);
  transform:translateY(-50%);
}

.contact-page .contact-arrival__hours::before{left:.35rem}
.contact-page .contact-arrival__hours::after{right:.35rem}

.contact-page .contact-arrival__hours>span{
  grid-column:1/-1;
  color:var(--yellow);
  margin-bottom:.15rem;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.contact-page .contact-arrival__hours>strong,
.contact-page .contact-arrival__hours>b{
  font-size:clamp(1.08rem,1.45vw,1.32rem);
  line-height:1.2;
}

.contact-page .contact-arrival__hours>b{
  text-align:right;
}

/* ---------- framed directions board ---------- */
.contact-page .shop-map{
  position:relative;
  display:grid;
  grid-template-columns:minmax(330px,.68fr) minmax(0,1.32fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
  padding:clamp(4.5rem,7vw,7rem) var(--counter-gutter);
  color:var(--navy-deep);
  background-color:var(--wall);
  background-image:
    radial-gradient(110% 80% at 50% 0,rgba(255,255,255,.28),transparent 65%),
    linear-gradient(180deg,var(--wall),var(--wall-warm));
  box-shadow:inset 0 18px 26px -20px rgba(0,0,0,.8),inset 0 -18px 26px -20px rgba(0,0,0,.8);
}

.contact-page .shop-map__content{
  position:relative;
  isolation:isolate;
  padding:clamp(2.5rem,4vw,4rem) clamp(1.6rem,3.2vw,3rem) clamp(2rem,3.5vw,3.25rem);
  border:1px solid rgba(12,32,49,.2);
  background-color:var(--paper);
  background-image:var(--paper-stock);
  background-position:var(--paper-stock-pos);
  background-size:var(--paper-stock-size);
  box-shadow:var(--card-edge),0 7px 10px rgba(5,15,33,.2),0 24px 38px rgba(5,15,33,.22);
  transform:rotate(-.25deg);
}

.contact-page .shop-map__content::before{
  position:absolute;
  z-index:-1;
  inset:12px -11px -14px 13px;
  border:1px solid #8daab2;
  content:"";
  background-color:var(--copy);
  background-image:
    linear-gradient(rgba(185,207,212,.76),rgba(201,220,223,.84)),
    url("assets/materials-v2/job-ticket-paper-tile-white-v1.webp");
  background-position:center;
  background-size:auto,920px 920px;
  box-shadow:0 15px 25px rgba(5,15,33,.18);
  transform:rotate(.7deg);
}

.contact-page .route-marker{
  position:relative;
  z-index:2;
  display:grid;
  width:calc(100% + clamp(1.4rem,3vw,2.5rem));
  max-width:none;
  margin:calc(clamp(2.5rem,4vw,4rem) * -.82) auto clamp(1.7rem,2.8vw,2.4rem);
  border:5px solid #b4babd;
  background:radial-gradient(120% 62% at 50% -6%,rgba(149,191,239,.16),rgba(149,191,239,0) 64%),linear-gradient(90deg,rgba(3,10,24,.3),transparent 24%,transparent 76%,rgba(3,10,24,.3)),linear-gradient(180deg,oklch(.292 .06 252) 0%,var(--navy) 44%,oklch(.216 .055 257) 100%);
  box-shadow:0 7px 12px rgba(5,15,33,.42),inset 0 1px 0 rgba(255,255,255,.24);
}

.contact-page .route-marker::before,
.contact-page .route-marker::after{
  position:absolute;
  top:50%;
  width:9px;
  height:9px;
  border:1px solid #555f64;
  border-radius:50%;
  content:"";
  background:#d8dcdb;
  box-shadow:inset 0 1px 1px #fff,0 1px 2px rgba(0,0,0,.55);
  transform:translateY(-50%);
}

.contact-page .route-marker::before{left:.5rem}
.contact-page .route-marker::after{right:.5rem}

.contact-page .route-marker span{
  padding:.48rem .75rem;
  color:var(--white);
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(1rem,1.25vw,1.15rem);
  font-weight:800;
  letter-spacing:.11em;
  text-align:center;
  text-transform:uppercase;
}

.contact-page .route-marker span+span{
  border-top:1px solid rgba(255,255,255,.32);
  color:var(--yellow);
}

.contact-page .shop-map__content h2{
  max-width:11ch;
  margin-bottom:1.15rem;
  color:var(--navy-deep);
  white-space:normal;
  text-wrap:balance;
  font-size:clamp(3.2rem,5.5vw,5.65rem);
}

.contact-page .shop-map__content>p{
  max-width:56ch;
  color:var(--ink);
  font-size:clamp(1rem,1.25vw,1.125rem);
  line-height:1.62;
}

.contact-page .shop-map__actions{
  display:grid;
  gap:.75rem;
  margin-top:1.35rem;
}

.contact-page .shop-map__content .button{
  width:100%;
  margin:0;
}

.contact-page .shop-map__call{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  color:var(--navy-deep);
  font-weight:800;
  text-decoration-thickness:2px;
  text-underline-offset:.22em;
}

.contact-page .shop-map__call img{
  width:18px;
  height:18px;
}

.contact-page .shop-map__frame{
  position:relative;
  min-height:clamp(360px,35vw,520px);
  overflow:hidden;
  border:clamp(9px,1.1vw,17px) solid #a9b0b3;
  border-image-source:url("assets/materials-v2/brushed-aluminum-photo-frame-v2.webp");
  border-image-slice:120;
  border-image-repeat:stretch;
  background:var(--navy-lift);
  box-shadow:0 3px 5px rgba(5,15,33,.4),0 24px 42px rgba(5,15,33,.48);
}

.contact-page .shop-map__status{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  gap:.45rem;
  padding:2rem;
  color:#dce7eb;
  background:
    repeating-linear-gradient(0deg,transparent 0 42px,rgba(255,255,255,.035) 42px 43px),
    var(--navy-lift);
  text-align:center;
}

.contact-page .shop-map__status strong{
  color:var(--yellow);
  font-family:"Barlow Condensed",sans-serif;
  font-size:1.7rem;
  text-transform:uppercase;
}

.contact-page .shop-map__frame iframe{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  min-height:clamp(360px,35vw,520px);
  background:transparent;
}

/* ---------- original + carbon-copy appointment sheet ---------- */
.contact-page .appointment-preview{
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,.67fr) minmax(0,1.33fr);
  gap:0;
  align-items:stretch;
  padding:clamp(5rem,8vw,7.5rem) var(--counter-gutter) clamp(3.2rem,5vw,4.5rem);
  color:var(--paper-light);
  background-color:var(--navy-deep);
  background-image:radial-gradient(120% 70% at 50% 0,rgba(133,177,219,.13),transparent 64%),linear-gradient(180deg,var(--navy),var(--navy-deep));
  background-position:center;
  background-size:auto;
  background-blend-mode:normal;
}

.contact-page .appointment-clip{
  position:absolute;
  z-index:8;
  top:-12px;
  width:clamp(90px,7.4vw,112px);
  height:auto;
  pointer-events:none;
  filter:brightness(1.08) contrast(1.04) drop-shadow(0 7px 6px rgba(5,15,33,.58));
}

.contact-page .appointment-clip--left{left:44%}
.contact-page .appointment-clip--right{left:72%}

.contact-page .appointment-preview__intro{
  position:relative;
  top:auto;
  z-index:1;
  align-self:center;
  min-height:calc(100% - clamp(2rem,5vw,5rem));
  margin:0 -1px 0 0;
  padding:clamp(1.7rem,3.3vw,3.2rem);
  border:1px solid #86a8af;
  background-color:var(--copy);
  background-image:linear-gradient(rgba(218,235,236,.72),rgba(196,219,222,.7)),url("assets/materials-v2/job-ticket-paper-tile-white-v1.webp");
  background-size:auto,1000px 1000px;
  box-shadow:var(--card-edge),0 4px 7px rgba(5,15,33,.28),0 18px 32px rgba(5,15,33,.25);
  transform:rotate(-.35deg);
}

.contact-page .appointment-preview__intro::before{
  position:absolute;
  z-index:3;
  top:-13px;
  left:50%;
  width:clamp(78px,7vw,104px);
  height:28px;
  content:"";
  background:var(--tape);
  box-shadow:var(--tape-shadow);
  clip-path:polygon(1% 8%,8% 1%,17% 7%,28% 2%,41% 6%,53% 1%,67% 5%,79% 0,91% 6%,99% 2%,97% 92%,89% 98%,78% 93%,66% 99%,54% 94%,42% 100%,29% 94%,17% 99%,7% 93%,1% 97%);
  transform:translateX(-50%) rotate(-1.7deg);
}

.contact-page .appointment-preview__copy-label{
  margin:0 0 clamp(1.3rem,2.4vw,2rem);
  padding-bottom:.6rem;
  border-bottom:2px solid rgba(24,80,130,.34);
  color:var(--blue-ink);
  font-family:"Barlow Condensed",sans-serif;
  font-size:.875rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.contact-page .appointment-preview__intro h2{
  margin-bottom:1rem;
  color:var(--navy-deep);
  white-space:normal;
  text-wrap:balance;
  font-size:clamp(2.8rem,4.5vw,4.8rem);
}

.contact-page .appointment-preview__intro>p:not(.appointment-preview__copy-label){
  color:var(--ink-soft);
  font-size:1.0625rem;
  line-height:1.58;
}

.contact-page .appointment-preview__call{
  position:relative;
  z-index:2;
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin:.2rem 0 1.2rem;
  padding:0;
  border:0;
  color:var(--yellow);
  background:transparent;
  box-shadow:none;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(1.4rem,2vw,1.75rem);
  font-weight:800;
  letter-spacing:.045em;
  text-decoration:none;
  text-transform:uppercase;
}

.contact-page .appointment-preview__call:hover,
.contact-page .appointment-preview__call:focus-visible{
  color:var(--navy-deep);
}

.contact-page .appointment-preview__call:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
}

.contact-page .owner-review-note{
  margin:1.5rem 0 0;
  padding:1rem 0 0;
  border:0;
  border-top:2px solid rgba(24,80,130,.3);
  color:var(--blue-ink);
  background:transparent;
}

.contact-page .owner-followup-note{
  margin:.9rem 0 0;
  color:var(--ink-soft);
}

.contact-page .appointment-form{
  position:relative;
  z-index:2;
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(1.5rem,3vw,2.8rem);
  background-color:var(--paper);
  background-image:var(--paper-stock);
  box-shadow:var(--card-edge),0 4px 8px rgba(5,15,33,.32),0 24px 42px rgba(5,15,33,.3);
}

.contact-page .appointment-form__header{
  margin-bottom:1.2rem;
}

.contact-page .appointment-form fieldset{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.2rem;
}

.contact-page .appointment-form legend{
  margin-bottom:.75rem;
  color:var(--navy-deep);
  font-size:clamp(1.7rem,2.5vw,2.25rem);
}

.contact-page .form-field label{
  color:var(--ink);
}

.contact-page .field-optional{
  margin-left:.35rem;
  padding:0;
  color:var(--yellow-deep);
  background:transparent;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.contact-page .form-field input,
.contact-page .form-field select,
.contact-page .form-field textarea{
  width:100%;
  min-width:0;
  min-height:50px;
  padding:.75rem;
  color:#40515d;
  border:2px solid #71828a;
  border-radius:0;
  background:rgba(255,255,255,.55);
  font:inherit;
}

.contact-page .form-field select{
  cursor:pointer;
}

.contact-page .form-field textarea{
  min-height:128px;
  resize:none;
}

.contact-page .appointment-form :disabled{
  cursor:not-allowed;
  opacity:.72;
}

.contact-page .appointment-form .button{
  justify-self:start;
  margin-top:.6rem;
}

.contact-page .appointment-form>p{
  max-width:70ch;
  margin:1.25rem 0 0;
  padding-top:1rem;
  border-top:1px solid rgba(24,80,130,.28);
  color:var(--ink-soft);
  font-weight:600;
}

.contact-page .form-honeypot{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

.contact-page .appointment-form>.form-status{
  display:none;
  margin-top:1rem;
  padding:.85rem 1rem;
  border:2px solid currentColor;
  font-weight:800;
}

.contact-page .appointment-form>.form-status.is-visible{
  display:block;
}

.contact-page .appointment-form>.form-status.is-success{
  color:#174d37;
  background:#dcefe4;
}

.contact-page .appointment-form>.form-status.is-error{
  color:#7a1f1f;
  background:#f6dddd;
}

/* ---------- closing counter strip ---------- */
.contact-page>.contact-section-divider{
  position:relative;
  z-index:10;
  width:100%;
  max-width:none;
  margin:0;
  height:clamp(28px,2.8vw,42px);
}

.contact-page .contact-reassurance{
  position:relative;
  display:grid;
  grid-template-columns:minmax(250px,.9fr) minmax(330px,1.25fr) auto;
  gap:0;
  align-items:center;
  min-height:0;
  padding:clamp(2.8rem,4.6vw,4.2rem) var(--counter-gutter);
  color:var(--navy-deep);
  background-color:var(--paper-light);
  background-image:linear-gradient(90deg,rgba(169,181,188,.14),transparent 25%,transparent 75%,rgba(169,181,188,.14));
}

.contact-page .contact-reassurance>div,
.contact-page .contact-reassurance>p{
  align-self:stretch;
  border-top:6px solid #9aa3a7;
  border-bottom:6px solid #7d898e;
  background-color:var(--navy-deep);
  background-image:
    radial-gradient(120% 90% at 50% 0,rgba(149,191,239,.12),transparent 64%),
    linear-gradient(180deg,var(--navy),var(--navy-deep));
}

.contact-page .contact-reassurance>div{
  display:grid;
  align-items:center;
  padding:clamp(1.5rem,2.8vw,2.4rem) 1rem clamp(1.5rem,2.8vw,2.4rem) clamp(1.5rem,2.8vw,2.6rem);
  border-left:6px solid #9aa3a7;
}

.contact-page .contact-reassurance h2{
  margin:0;
  color:var(--paper-light);
  white-space:normal;
  text-wrap:balance;
  font-size:clamp(2rem,3.2vw,3.25rem);
}

.contact-page .contact-reassurance>p{
  display:flex;
  align-items:center;
  max-width:none;
  margin:0;
  padding:clamp(1.5rem,2.8vw,2.4rem) clamp(1.5rem,2.8vw,2.6rem) clamp(1.5rem,2.8vw,2.4rem) 1rem;
  border-right:6px solid #7d898e;
  color:#e7eef1;
  font-size:1.0625rem;
  line-height:1.55;
}

.contact-page .contact-reassurance>.button{
  margin-left:clamp(1.5rem,3vw,3rem);
  white-space:nowrap;
}

@media(prefers-reduced-motion:no-preference) and (pointer:fine){
  @keyframes contact-counter-settle{
    0%{filter:blur(1px) drop-shadow(0 5px 5px rgba(5,15,33,.22)) drop-shadow(0 14px 18px rgba(5,15,33,.28));transform:translateY(-16px) rotate(-1.2deg)}
    52%{filter:blur(0) drop-shadow(0 5px 5px rgba(5,15,33,.32)) drop-shadow(0 25px 30px rgba(5,15,33,.42));transform:translateY(0) rotate(.45deg)}
    78%{transform:translateY(0) rotate(-.18deg)}
    100%{filter:drop-shadow(0 5px 5px rgba(5,15,33,.32)) drop-shadow(0 25px 30px rgba(5,15,33,.42));transform:translateY(0) rotate(0)}
  }
  .contact-page .contact-hero.is-entering>.contact-ticket{
    transform-origin:50% 0;
    animation:contact-counter-settle 880ms cubic-bezier(.16,1,.3,1) both;
  }
}

@media(max-width:1050px){
  .contact-page .contact-hero{
    grid-template-columns:1fr;
    padding-top:3rem;
  }

  .contact-page .contact-hero>.ticket-clip--left{
    left:16%;
  }

  .contact-page .contact-hero>.ticket-clip--right{
    right:16%;
    left:auto;
  }

  .contact-page .contact-ticket{
    width:min(100%,760px);
    min-height:auto;
    margin-right:auto;
    margin-left:auto;
  }

  .contact-page .contact-arrival{
    width:min(100%,720px);
    min-height:0;
    aspect-ratio:4/3;
    margin:2.5rem auto 0;
    justify-self:center;
  }

  .contact-page .shop-map{
    grid-template-columns:1fr;
  }

  .contact-page .shop-map__content{
    display:grid;
    grid-template-columns:minmax(220px,.6fr) minmax(0,1.4fr);
    gap:0 clamp(2rem,5vw,4rem);
    align-items:start;
    transform:none;
  }

  .contact-page .shop-map__content .route-marker{
    grid-row:1/4;
  }

  .contact-page .shop-map__content h2,
  .contact-page .shop-map__content>p,
  .contact-page .shop-map__content .shop-map__actions{
    grid-column:2;
  }

  .contact-page .appointment-preview{
    grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);
  }

  .contact-page .appointment-clip--left{left:41%}
  .contact-page .appointment-clip--right{left:70%}

  .contact-page .contact-reassurance{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .contact-page .contact-reassurance>p{
    grid-column:1;
  }

  .contact-page .contact-reassurance>.button{
    grid-column:2;
    grid-row:1/3;
  }
}

@media(max-width:768px){
  .contact-page .contact-hero,
  .contact-page .shop-map{
    padding-right:1.15rem;
    padding-left:1.15rem;
  }

  .contact-page .contact-ticket{
    padding:2.2rem 1.6rem;
  }

  .contact-page .contact-hero>.ticket-clip{
    top:-12px;
    width:88px;
  }

  .contact-page .contact-ticket h1{
    font-size:clamp(3.1rem,12vw,4.5rem);
  }

  .contact-page .contact-ticket .button-group{
    grid-template-columns:1fr;
  }

  .contact-page .shop-map__content{
    display:block;
    padding:3.2rem 1.35rem 2rem;
  }

  .contact-page .route-marker{
    width:100%;
    margin-top:-4rem;
  }

  .contact-page .appointment-clip{display:none}

  .contact-page .appointment-preview{
    grid-template-columns:1fr;
    padding-right:1.15rem;
    padding-left:1.15rem;
  }

  .contact-page .appointment-preview__intro{
    min-height:0;
    margin:0 .7rem -1px;
    transform:rotate(-.25deg);
  }

  .contact-page .appointment-form fieldset{
    grid-template-columns:1fr;
  }

  .contact-page .contact-reassurance{
    grid-template-columns:1fr;
    padding:2.5rem 1.15rem 3rem;
  }

  .contact-page .contact-reassurance>div{
    border-right:6px solid #7d898e;
    border-bottom:0;
  }

  .contact-page .contact-reassurance>p{
    padding:0 1.5rem 1.5rem;
    border-top:0;
    border-left:6px solid #9aa3a7;
  }

  .contact-page .contact-reassurance>p,
  .contact-page .contact-reassurance>.button{
    grid-column:1;
    grid-row:auto;
  }

  .contact-page .contact-reassurance>.button{
    width:100%;
    margin:1.1rem 0 0;
  }
}

@media(max-width:420px){
  .contact-ticket__meta,
  .appointment-form__header{
    display:grid;
    gap:.25rem;
  }

  .contact-page .contact-hero{
    padding:2.3rem .65rem 3.8rem;
  }

  .contact-page .contact-ticket{
    padding:2rem 1.2rem;
  }

  .contact-page .contact-ticket h1{
    font-size:clamp(2.8rem,15vw,3.7rem);
  }

  .contact-page .contact-ticket .button{
    padding-right:.75rem;
    padding-left:.75rem;
    font-size:.94rem;
    letter-spacing:.035em;
  }

  .contact-page .contact-arrival{
    width:97%;
    aspect-ratio:4/3;
    margin-top:.25rem;
  }

  .contact-page .contact-arrival__sign{
    right:2%;
    width:96%;
    padding-right:1.7rem;
    padding-left:1.7rem;
  }

  .contact-page .contact-arrival__sign>strong{
    font-size:clamp(1.15rem,5vw,1.55rem);
  }

  .contact-page .contact-arrival__hours{
    right:.45rem;
    bottom:-1.25rem;
    width:min(94%,340px);
  }

  .contact-page .shop-map{
    padding:3.8rem 1rem;
  }

  .contact-page .shop-map__content h2{
    font-size:clamp(2.65rem,13vw,3.5rem);
  }

  .contact-page .shop-map__frame,
  .contact-page .shop-map__frame iframe{
    min-height:330px;
  }

  .contact-page .shop-map__frame::before{
    overflow:hidden;
    padding:0 .5rem;
    font-size:.75rem;
    white-space:nowrap;
  }

  .contact-page .appointment-preview{
    padding:4.5rem .7rem 4rem;
  }

  .contact-page .appointment-preview__intro{
    margin:0 .4rem -1px;
    padding:1.4rem 1.1rem;
  }

  .contact-page .appointment-preview__intro h2{
    font-size:clamp(2.55rem,13vw,3.3rem);
  }

  .contact-page .appointment-form{
    padding:1.35rem 1rem;
  }

  .contact-page .appointment-form .button{
    width:100%;
    padding-right:.65rem;
    padding-left:.65rem;
    font-size:.9rem;
  }
}

@media(max-width:340px){
  .contact-page .contact-ticket{
    padding-right:1rem;
    padding-left:1rem;
  }

  .contact-page .contact-ticket .button{
    font-size:.86rem;
  }

  .contact-page .contact-arrival__sign>span,
  .contact-page .route-marker span,
  .contact-page .appointment-preview__copy-label,
  .contact-page .appointment-form__header{
    font-size:.75rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .contact-page *,
  .contact-page *::before,
  .contact-page *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}