/* An editorial cover for the same shop, booking flow and full-page scenes. */
.fade-experience .hero.editorial-hero {
  --editorial-gutter:5.5%;
  position:relative;
  isolation:isolate;
  width:100%;
  height:100svh;
  min-height:760px;
  overflow:hidden;
  color:#eee6d7;
  background:linear-gradient(112deg,#111110e8,#171715e6),url('/acomply-websites/assets/fine-plaster-v3.webp') center/cover,#151513;
}
.fade-experience .editorial-hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 74% 45%,#b4a27d0a,transparent 57%);
}
.fade-experience .editorial-hero .editorial-masthead {
  position:absolute;
  z-index:5;
  top:108px;
  left:var(--editorial-gutter);
  right:var(--editorial-gutter);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#aaa69c;
  font-size:9px;
  line-height:1.5;
  letter-spacing:1.7px;
}
.fade-experience .editorial-hero .editorial-masthead>span:last-child { text-align:right; }
.fade-experience .editorial-hero .editorial-title {
  position:absolute;
  z-index:2;
  top:16.6%;
  left:var(--editorial-gutter);
  width:max-content;
  max-width:90%;
  margin:0;
  font-family:'Archivo Black',Arial Black,Arial,sans-serif;
  font-size:clamp(112px,9.55vw,170px);
  line-height:.86;
  font-weight:900;
  letter-spacing:-.065em;
  text-transform:uppercase;
  outline-offset:12px;
}
.fade-experience .editorial-hero .editorial-title-line {
  display:block;
  width:max-content;
  white-space:nowrap;
}
.fade-experience .editorial-hero .editorial-title-line+.editorial-title-line { margin-top:5px; }
.fade-experience .editorial-hero .editorial-title .letter { display:inline-block; }
.fade-experience .editorial-hero .editorial-ghost {
  position:absolute;
  white-space:nowrap;
  z-index:1;
  top:22%;
  right:2%;
  color:#bcb09a25;
  font-family:'Archivo Black',Arial Black,Arial,sans-serif;
  font-size:clamp(160px,18vw,320px);
  line-height:.8;
  letter-spacing:-.085em;
  text-align:right;
  pointer-events:none;
}
.fade-experience .editorial-hero .editorial-slogan {
  position:absolute;
  z-index:4;
  top:41.6%;
  left:calc(var(--editorial-gutter) - 4px);
  width:max-content;
  color:#c71625;
  font-family:'Permanent Marker',cursive;
  font-size:clamp(43px,3.75vw,65px);
  line-height:.96;
  letter-spacing:-.045em;
  transform:rotate(-9deg);
  transform-origin:left center;
}
.fade-experience .editorial-hero .editorial-slogan>span { display:block; }
.fade-experience .editorial-hero .editorial-slogan>span:nth-child(2) { margin-left:16px; }
.fade-experience .editorial-hero .editorial-slogan .slogan-ink {
  display:block;
  width:230px;
  height:52px;
  margin:-3px 0 0 51px;
  overflow:visible;
}
.fade-experience .editorial-hero .barber.editorial-portrait {
  position:absolute;
  z-index:3;
  top:12%;
  bottom:auto;
  left:36%;
  right:auto;
  width:65%;
  height:101%;
  max-width:none;
  margin:0;
  object-fit:contain;
  object-position:center top;
  filter:brightness(.76) contrast(1.06) saturate(.83);
  mask-image:linear-gradient(#000 0 85%,transparent 100%);
  -webkit-mask-image:linear-gradient(#000 0 85%,transparent 100%);
  pointer-events:none;
}
.fade-experience .editorial-hero .editorial-story {
  position:absolute;
  z-index:5;
  top:57.8%;
  left:var(--editorial-gutter);
  width:clamp(300px,26%,440px);
}
.fade-experience .editorial-hero .editorial-lead {
  margin:0 0 8px;
  font-size:clamp(19px,1.5vw,25px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.25;
}
.fade-experience .editorial-hero .editorial-description {
  max-width:330px;
  margin:0;
  color:#b0ada5;
  font-size:clamp(14px,1.12vw,18px);
  line-height:1.45;
}
.fade-experience .editorial-hero .editorial-links {
  margin:21px 0 17px;
  padding:0;
  list-style:none;
  border-top:1px solid #b7ad952b;
}
.fade-experience .editorial-hero .editorial-links li { border-bottom:1px solid #b7ad952b; }
.fade-experience .editorial-hero .editorial-links button {
  display:grid;
  grid-template-columns:34px 1fr 22px;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:40px;
  margin:0;
  padding:9px 3px;
  border:0;
  background:transparent;
  color:#ded9ce;
  cursor:pointer;
  text-align:left;
  font-size:12px;
  line-height:1.4;
  transition:color .2s ease,background .2s ease;
}
.fade-experience .editorial-hero .editorial-link-number { color:#eee6d7; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.fade-experience .editorial-hero .editorial-links button>svg,
.fade-experience .editorial-hero .editorial-book>svg {
  justify-self:end;
  width:21px;
  height:21px;
  flex:0 0 21px;
  transition:transform .22s ease;
}
.fade-experience .editorial-hero .editorial-links button:hover { background:#eee6d707; color:#fff8e8; }
.fade-experience .editorial-hero .editorial-links button:hover>svg { transform:translateX(3px); }
.fade-experience .editorial-hero .editorial-book {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  width:clamp(230px,70%,285px);
  min-height:48px;
  padding:13px 18px;
  border:1px solid #ded6c1a6;
  background:#1717154d;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.7px;
  transition:background .2s ease,border-color .2s ease;
}
.fade-experience .editorial-hero .editorial-book:hover { background:#ad101ddb; border-color:#c62935; }
.fade-experience .editorial-hero .editorial-book:hover>svg { transform:translateX(4px); }
.fade-experience .editorial-hero .editorial-city {
  position:absolute;
  z-index:5;
  right:var(--editorial-gutter);
  bottom:12.5%;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:clamp(130px,13vw,215px);
  gap:9px;
}
.fade-experience .editorial-hero .editorial-city>img { display:block; width:100%; height:auto; object-fit:contain; }
.fade-experience .editorial-hero .editorial-city>span { font-size:7px; line-height:1.4; letter-spacing:1.1px; white-space:nowrap; color:#b5ad9f; }
.fade-experience .editorial-hero .editorial-footnote {
  position:absolute;
  z-index:5;
  left:var(--editorial-gutter);
  right:var(--editorial-gutter);
  bottom:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#8e8c84;
  font-size:8px;
  line-height:1.5;
  letter-spacing:1.4px;
}
.fade-experience .editorial-hero .editorial-footnote button {
  min-height:32px;
  padding:5px 0 5px 15px;
  border:0;
  background:none;
  color:#b8b3a7;
  font-size:8px;
  line-height:1.5;
  letter-spacing:1.2px;
  cursor:pointer;
}
.fade-experience .editorial-hero .editorial-footnote button:hover { color:#eee6d7; }

/* Short desktop screens keep the full booking action clear of the scene bar. */
@media(min-width:1101px) and (max-height:850px) {
  .fade-experience .hero.editorial-hero { min-height:740px; }
  .fade-experience .editorial-hero .editorial-masthead { top:100px; }
  .fade-experience .editorial-hero .editorial-title { top:16.8%; font-size:min(9.55vw,18.2svh); }
  .fade-experience .editorial-hero .editorial-slogan { top:41%; font-size:min(3.75vw,6.35svh); }
  .fade-experience .editorial-hero .editorial-slogan .slogan-ink { height:39px; width:190px; }
  .fade-experience .editorial-hero .editorial-story { top:58.2%; }
  .fade-experience .editorial-hero .editorial-lead { font-size:19px; margin-bottom:6px; }
  .fade-experience .editorial-hero .editorial-description { font-size:14px; max-width:290px; }
  .fade-experience .editorial-hero .editorial-links { margin:16px 0 13px; }
  .fade-experience .editorial-hero .editorial-links button { min-height:34px; padding:7px 3px; font-size:11px; }
  .fade-experience .editorial-hero .editorial-book { min-height:43px; padding-top:10px; padding-bottom:10px; }
  .fade-experience .editorial-hero .editorial-city { bottom:14%; width:145px; }
}

/* Tablet: retain the cover composition, with room to scroll on short devices. */
@media(min-width:701px) and (max-width:1100px) {
  .fade-experience .hero.editorial-hero { --editorial-gutter:5%; height:100svh; min-height:940px; }
  .fade-experience .editorial-hero .editorial-masthead { top:105px; font-size:8px; letter-spacing:1.2px; }
  .fade-experience .editorial-hero .editorial-title { top:147px; font-size:clamp(96px,11.1vw,122px); }
  .fade-experience .editorial-hero .editorial-ghost { top:305px; right:2%; font-size:24vw; }
  .fade-experience .editorial-hero .editorial-slogan { top:351px; font-size:46px; }
  .fade-experience .editorial-hero .editorial-slogan .slogan-ink { width:180px; height:42px; margin-left:34px; }
  .fade-experience .editorial-hero .barber.editorial-portrait { top:235px; left:36%; width:71%; height:760px; object-position:center top; }
  .fade-experience .editorial-hero .editorial-story { top:520px; width:42%; }
  .fade-experience .editorial-hero .editorial-lead { font-size:21px; }
  .fade-experience .editorial-hero .editorial-description { max-width:280px; font-size:16px; }
  .fade-experience .editorial-hero .editorial-links { margin-top:22px; }
  .fade-experience .editorial-hero .editorial-links button { grid-template-columns:27px 1fr 20px; gap:5px; min-height:43px; font-size:11px; }
  .fade-experience .editorial-hero .editorial-book { width:100%; max-width:270px; min-height:49px; }
  .fade-experience .editorial-hero .editorial-city { bottom:145px; width:150px; }
  .fade-experience .editorial-hero .editorial-footnote { bottom:80px; }
}
@media(min-width:901px) and (max-width:1100px) and (max-height:850px) {
  .fade-experience .hero.editorial-hero { min-height:820px; }
  .fade-experience .editorial-hero .editorial-title { top:139px; font-size:113px; }
  .fade-experience .editorial-hero .editorial-slogan { top:332px; font-size:43px; }
  .fade-experience .editorial-hero .barber.editorial-portrait { top:134px; height:790px; left:37%; width:68%; }
  .fade-experience .editorial-hero .editorial-story { top:462px; width:34%; }
  .fade-experience .editorial-hero .editorial-lead { font-size:19px; }
  .fade-experience .editorial-hero .editorial-description { font-size:14px; }
  .fade-experience .editorial-hero .editorial-links { margin-top:15px; margin-bottom:15px; }
  .fade-experience .editorial-hero .editorial-links button { min-height:36px; padding-top:7px; padding-bottom:7px; }
  .fade-experience .editorial-hero .editorial-city { bottom:145px; width:125px; }
  .fade-experience .editorial-hero .editorial-footnote { bottom:36px; }
}

/* The phone cover follows the concept vertically: title, portrait, story, badge. */
@media(max-width:700px) {
  .fade-experience .hero.editorial-hero {
    --editorial-gutter:6%;
    height:auto;
    min-height:0;
    padding:110px var(--editorial-gutter) calc(112px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto 370px auto auto auto;
    align-content:start;
    background:linear-gradient(112deg,#111110e8,#171715e6),url('/acomply-websites/assets/fine-plaster-v3.webp') center/cover,#151513;
  }
  .fade-experience .editorial-hero .editorial-masthead {
    position:relative;
    grid-column:1;
    grid-row:1;
    top:auto;
    left:auto;
    right:auto;
    margin:0 0 19px;
    gap:15px;
    font-size:7px;
    line-height:1.4;
    letter-spacing:1.1px;
  }
  .fade-experience .editorial-hero .editorial-masthead>span:nth-child(2) { display:none; }
  .fade-experience .editorial-hero .editorial-title {
    position:relative;
    grid-column:1;
    grid-row:2;
    top:auto;
    left:auto;
    max-width:100%;
    font-size:15.4vw;
    line-height:.89;
    letter-spacing:-.065em;
    margin:0;
  }
  .fade-experience .editorial-hero .editorial-title-line+.editorial-title-line { margin-top:2px; }
  .fade-experience .editorial-hero .editorial-ghost {
    top:323px;
    right:3%;
    font-size:29vw;
    line-height:.83;
    color:#bcb09a1c;
  }
  .fade-experience .editorial-hero .editorial-slogan {
    top:calc(151px + 26.4vw);
    left:var(--editorial-gutter);
    z-index:4;
    font-size:clamp(27px,7.8vw,46px);
    line-height:.98;
    transform:rotate(-9deg);
  }
  .fade-experience .editorial-hero .editorial-slogan>span:nth-child(2) { margin-left:8px; }
  .fade-experience .editorial-hero .editorial-slogan .slogan-ink { width:129px; height:30px; margin:-2px 0 0 30px; }
  .fade-experience .editorial-hero .barber.editorial-portrait {
    position:relative;
    grid-column:1;
    grid-row:3;
    justify-self:center;
    align-self:end;
    top:auto;
    bottom:auto;
    left:26%;
    right:auto;
    width:114%;
    height:400px;
    max-width:none;
    margin:48px -7% -14px;
    object-fit:contain;
    object-position:center top;
    filter:brightness(.77) contrast(1.05) saturate(.83);
    mask-image:linear-gradient(#000 0 82%,transparent 100%);
    -webkit-mask-image:linear-gradient(#000 0 82%,transparent 100%);
  }
  .fade-experience .editorial-hero .editorial-story {
    position:relative;
    grid-column:1;
    grid-row:4;
    top:auto;
    left:auto;
    width:100%;
    margin-top:0;
  }
  .fade-experience .editorial-hero .editorial-lead { font-size:clamp(18px,4.85vw,24px); line-height:1.3; letter-spacing:-.03em; margin:0 0 7px; }
  .fade-experience .editorial-hero .editorial-description { max-width:95%; font-size:15px; line-height:1.5; }
  .fade-experience .editorial-hero .editorial-links { margin:21px 0 17px; }
  .fade-experience .editorial-hero .editorial-links button { min-height:46px; grid-template-columns:30px 1fr 21px; gap:9px; padding:10px 0; font-size:12px; }
  .fade-experience .editorial-hero .editorial-link-number { font-size:15px; }
  .fade-experience .editorial-hero .editorial-book { width:100%; max-width:none; min-height:50px; padding:13px 16px; font-size:11px; }
  .fade-experience .editorial-hero .editorial-city {
    position:relative;
    grid-column:1;
    grid-row:5;
    justify-self:center;
    top:auto;
    bottom:auto;
    left:auto;
    right:auto;
    width:140px;
    margin:29px 0 0;
    gap:7px;
  }
  .fade-experience .editorial-hero .editorial-city>span { font-size:6px; letter-spacing:.9px; }
  .fade-experience .editorial-hero .editorial-footnote {
    position:relative;
    grid-column:1;
    grid-row:6;
    top:auto;
    bottom:auto;
    left:auto;
    right:auto;
    width:100%;
    margin-top:27px;
    gap:15px;
    font-size:6px;
    letter-spacing:.75px;
  }
  .fade-experience .editorial-hero .editorial-footnote button { max-width:53%; min-height:38px; font-size:6px; letter-spacing:.75px; text-align:right; }
}
@media(min-width:431px) and (max-width:700px) {
  .fade-experience .hero.editorial-hero { grid-template-rows:auto auto 470px auto auto auto; }
  .fade-experience .editorial-hero .barber.editorial-portrait { height:510px; }
  .fade-experience .editorial-hero .editorial-slogan { top:calc(155px + 26.4vw); }
  .fade-experience .editorial-hero .editorial-story { max-width:510px; justify-self:center; }
  .fade-experience .editorial-hero .editorial-city { width:160px; }
}
@media(prefers-reduced-motion:reduce) {
  .fade-experience .editorial-hero .editorial-title .letter { will-change:auto; }
  .fade-experience .editorial-hero .editorial-links button,
  .fade-experience .editorial-hero .editorial-links button>svg,
  .fade-experience .editorial-hero .editorial-book,
  .fade-experience .editorial-hero .editorial-book>svg { transition:none; }
}