.page-contact{
  background:var(--color-fog);
  color:var(--color-ink);
  overflow-x:hidden;
}

.page-contact .contact-breadcrumb{
  margin:1.25rem 1rem 0;
}

.page-contact .contact-hero{
  position:relative;
  margin:1rem;
  padding:2rem 1.25rem 2.6rem;
  background:var(--color-night);
  color:var(--color-white);
  border:var(--border-thick) solid var(--color-night);
  box-shadow:10px 10px 0 rgba(249,160,63,.25);
  overflow:hidden;
}

.page-contact .contact-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 18%, rgba(249,160,63,.28) 0 8%, transparent 8.5%),
    radial-gradient(circle at 65% 55%, rgba(28,103,88,.45) 0 16%, transparent 16.5%),
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,.035) 14px 15px);
  pointer-events:none;
}

.page-contact .contact-hero::before{
  content:"365";
  position:absolute;
  right:-1.5rem;
  bottom:-3.2rem;
  font-family:var(--font-headline);
  font-weight:700;
  font-size:clamp(7rem,28vw,18rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  pointer-events:none;
  z-index:0;
}

.page-contact .contact-hero > *{
  position:relative;
  z-index:1;
}

.page-contact .contact-hero__title{
  font-family:var(--font-headline);
  font-weight:700;
  font-size:clamp(2.8rem,12vw,6rem);
  line-height:.88;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0;
  max-width:10ch;
}

.page-contact .contact-hero__lead{
  margin:1rem 0 0;
  max-width:42ch;
  font-size:1.05rem;
  line-height:1.7;
  color:rgba(255,255,255,.86);
}

.page-contact .contact-panel{
  margin:2rem 1rem;
}

.page-contact .contact-layout{
  display:grid;
  gap:1.5rem;
  align-items:start;
}

.page-contact .contact-visual{
  margin:0;
  border:var(--border-thick) solid var(--color-night);
  background:var(--color-white);
  box-shadow:12px 12px 0 rgba(13,27,42,.12);
}

.page-contact .contact-visual img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
}

.page-contact .contact-card{
  background:var(--color-white);
  border:var(--border-thick) solid var(--color-night);
  box-shadow:12px 12px 0 rgba(13,27,42,.12);
  padding:1.25rem;
  transition:transform .2s ease, box-shadow .2s ease;
}

.page-contact .contact-card:hover,
.page-contact .contact-card:focus-within{
  transform:translate(6px,-6px);
  box-shadow:18px 18px 0 rgba(13,27,42,.2);
}

.page-contact .contact-section-title{
  font-family:var(--font-headline);
  font-weight:700;
  font-size:clamp(1.8rem,5vw,3.2rem);
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1;
  margin:0 0 1rem;
  color:var(--color-night);
  border-left:8px solid var(--color-energy);
  padding-left:.75rem;
}

.page-contact .contact-section-title--light{
  color:var(--color-white);
  border-color:var(--color-energy);
}

.page-contact .contact-channel{
  border-top:2px solid var(--color-line);
  padding:1.05rem 0;
}

.page-contact .contact-channel:first-of-type{
  border-top:0;
  padding-top:.2rem;
}

.page-contact .contact-channel__label{
  display:block;
  font-family:var(--font-headline);
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--color-primary);
}

.page-contact .contact-channel__value{
  display:block;
  font-family:var(--font-headline);
  font-weight:700;
  font-size:clamp(2rem,7vw,3.6rem);
  line-height:1;
  margin-top:.4rem;
  word-break:break-word;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

.page-contact .contact-channel__value--small{
  font-size:clamp(1.35rem,4.5vw,2.2rem);
  line-height:1.1;
}

.page-contact .contact-channel__value a{
  color:var(--color-night);
  text-decoration:none;
  border-bottom:3px solid var(--color-energy);
  transition:color .2s, border-color .2s;
}

.page-contact .contact-channel__value a:hover,
.page-contact .contact-channel__value a:focus-visible{
  color:var(--color-energy);
  border-color:var(--color-night);
}

.page-contact .contact-channel--phone .contact-channel__value{
  color:var(--color-energy);
}

.page-contact .contact-channel--phone .contact-channel__value a{
  color:inherit;
  border-color:var(--color-night);
}

.page-contact .contact-note{
  background:var(--color-fog);
  border-left:5px solid var(--color-primary);
  padding:.8rem .9rem;
  font-size:.9rem;
  line-height:1.6;
  margin:1.1rem 0 0;
}

.page-contact .contact-time-section{
  background:var(--color-wine);
  color:var(--color-white);
  border:var(--border-thick) solid var(--color-night);
  box-shadow:10px 10px 0 rgba(13,27,42,.12);
  margin:2rem 1rem;
  padding:2rem 1.25rem;
}

.page-contact .contact-time-grid{
  display:grid;
  gap:1.75rem;
  align-items:center;
}

.page-contact .service-clock{
  width:min(230px,72vw);
  height:auto;
  display:block;
  margin-inline:auto;
}

.page-contact .service-clock .clock-ring{
  fill:none;
  stroke:rgba(255,255,255,.22);
  stroke-width:3;
}

.page-contact .service-clock .clock-arc{
  fill:none;
  stroke:var(--color-energy);
  stroke-width:5;
  stroke-linecap:round;
}

.page-contact .service-clock .clock-dot{
  fill:var(--color-white);
  stroke:var(--color-energy);
  stroke-width:2;
}

.page-contact .service-clock .clock-label{
  font-family:var(--font-headline);
  font-weight:700;
  font-size:14px;
  fill:var(--color-white);
}

.page-contact .service-clock .clock-center{
  font-family:var(--font-headline);
  font-weight:700;
  font-size:15px;
  fill:var(--color-energy);
}

.page-contact .contact-time-content{
  text-align:center;
}

.page-contact .contact-time-desc{
  font-size:1rem;
  line-height:1.7;
  margin:1rem 0 0;
  max-width:52ch;
}

.page-contact .contact-time-note{
  display:inline-block;
  margin-top:.9rem;
  font-family:var(--font-headline);
  font-weight:700;
  font-size:1.4rem;
  color:var(--color-energy);
  border:2px solid rgba(249,160,63,.6);
  padding:.35rem .75rem;
}

.page-contact .contact-reasons{
  background:var(--color-fog);
  border:var(--border-thick) solid var(--color-night);
  box-shadow:10px 10px 0 rgba(13,27,42,.1);
  margin:2rem 1rem;
  padding:1.5rem 1.25rem;
}

.page-contact .contact-reasons-lead{
  margin:.6rem 0 1.2rem;
  line-height:1.6;
  max-width:60ch;
}

.page-contact .contact-reasons__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1rem;
}

.page-contact .reason-card{
  background:var(--color-white);
  border:2px solid var(--color-line);
  padding:1rem;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}

.page-contact .reason-card:hover{
  transform:translate(4px,-4px);
  border-color:var(--color-primary);
  box-shadow:8px 8px 0 rgba(28,103,88,.18);
}

.page-contact .reason-card__title{
  font-family:var(--font-headline);
  font-weight:700;
  font-size:1.3rem;
  margin:0 0 .35rem;
  color:var(--color-night);
}

.page-contact .reason-card__text{
  margin:0 0 .8rem;
  font-size:.96rem;
  line-height:1.65;
}

.page-contact .reason-card__link{
  font-weight:700;
  color:var(--color-primary);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.page-contact .reason-card__link:hover,
.page-contact .reason-card__link:focus-visible{
  color:var(--color-energy);
}

.page-contact .contact-footer-visual{
  position:relative;
  margin:2.5rem 1rem;
  overflow:hidden;
  border:var(--border-thick) solid var(--color-night);
  background:var(--color-night);
  box-shadow:10px 10px 0 rgba(13,27,42,.12);
}

.page-contact .contact-footer-visual img{
  display:block;
  width:100%;
  height:auto;
  max-height:400px;
  object-fit:cover;
}

.page-contact .contact-footer-visual figcaption{
  position:absolute;
  left:1rem;
  bottom:1rem;
  max-width:26ch;
  background:rgba(13,27,42,.82);
  border-left:5px solid var(--color-energy);
  color:var(--color-white);
  padding:.55rem .75rem;
  font-family:var(--font-headline);
  font-weight:700;
  font-size:1.1rem;
  line-height:1.2;
}

@media (min-width: 768px){
  .page-contact .contact-breadcrumb{
    margin:2rem 2rem 0;
  }

  .page-contact .contact-hero{
    margin:1.5rem 2rem 2.5rem;
    padding:3.5rem 3rem 4rem;
  }

  .page-contact .contact-panel,
  .page-contact .contact-time-section,
  .page-contact .contact-reasons{
    margin-left:2rem;
    margin-right:2rem;
  }

  .page-contact .contact-layout{
    grid-template-columns:minmax(250px,.85fr) minmax(0,1.15fr);
    gap:2rem;
  }

  .page-contact .contact-card{
    padding:1.75rem;
  }

  .page-contact .contact-time-grid{
    grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);
  }

  .page-contact .contact-time-content{
    text-align:left;
  }

  .page-contact .contact-reasons{
    padding:2rem;
  }

  .page-contact .contact-reasons__list{
    grid-template-columns:repeat(2,1fr);
    gap:1.25rem;
  }

  .page-contact .contact-footer-visual{
    margin-left:2rem;
    margin-right:2rem;
  }
}

@media (min-width: 1200px){
  .page-contact .contact-breadcrumb{
    max-width:var(--content-max);
    margin-left:auto;
    margin-right:auto;
  }

  .page-contact .contact-hero{
    max-width:calc(var(--content-max) + 4rem);
    margin-left:auto;
    margin-right:auto;
  }

  .page-contact .contact-panel,
  .page-contact .contact-time-section,
  .page-contact .contact-reasons,
  .page-contact .contact-footer-visual{
    max-width:var(--content-max);
    margin-left:auto;
    margin-right:auto;
  }
}