/* Ardison Barber Shop: concept site in the structure of Rendezvous Barbers (myrendezvous.ca)
   Sizes follow the reference's Webflow CSS (fluid rem: html font-size scales with the viewport). */

:root {
  --accent: #ffd415;          /* Ardison signage yellow (replaces the reference orange #ff622b) */
  --accent-ink: #8c6d00;      /* accent for small text on white (AA contrast) */
  --black: #000;
  --white: #fff;
  --grey: #ebebeb;
  --radius: .75rem;
  --primary-size: 8rem;
  --small-size: 2rem;
  --serif: "Fraunces", "Georgia", serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cutive Mono", "Courier New", monospace;
  --pad: 1rem;
  --ease: cubic-bezier(.65, .05, .36, 1);
}

/* fluid root size, copied from the reference */
html { font-size: calc(-0.00222717149220486rem + 1.1135857461024499vw); -webkit-text-size-adjust: 100%; }
@media screen and (max-width: 991px) { html { font-size: calc(-0.005831473214285454rem + 2.098214285714285vw); } :root { --primary-size: 5rem; --small-size: 1.75rem; --pad: 1.5rem; } }
@media screen and (max-width: 767px) { html { font-size: 1rem; } :root { --primary-size: 3.625rem; --small-size: 1.25rem; --pad: 1rem; } }
@media screen and (max-width: 479px) { html { font-size: calc(-0.0031380753138075313rem + 5.02092050209205vw); } }

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0; background: var(--black); color: var(--black);
  font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1.2;
  overflow-x: clip;
}
html.js body { opacity: 0; transition: opacity .6s ease; }
html.js body.is-visible { opacity: 1; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
em { font-style: italic; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.section_hero :focus-visible, .section_about :focus-visible, .section_app :focus-visible,
.section_locations :focus-visible, .section_quote :focus-visible, .section_clients :focus-visible,
.section_paper :focus-visible, .menu :focus-visible { outline-color: var(--black); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 3000; background: var(--black); color: var(--white); padding: .75rem 1rem; font-weight: 700; }
.skip:focus { top: 1rem; }

.page-wrapper { padding-bottom: 100svh; }
.main-wrapper { position: relative; z-index: 10; overflow: clip; }
.padding-global { padding-left: var(--pad); padding-right: var(--pad); }
.container-large { width: 100%; max-width: 86.5rem; margin-left: auto; margin-right: auto; }

/* ---------- type ---------- */
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.2; }
.h-display {               /* .heading-style-h1 */
  font-family: var(--serif); font-size: 21.25rem; line-height: .8; letter-spacing: -.05em;
  font-weight: 400; font-style: italic; font-variation-settings: "opsz" 48;
}
.h-big {                   /* h2 in the app section */
  font-family: var(--serif); font-size: 15rem; line-height: .8; letter-spacing: -.025em;
  font-weight: 400; font-style: italic; font-variation-settings: "opsz" 48;
}
.h4 {                      /* .heading-style-h4 */
  font-family: var(--serif); font-size: 7.75rem; line-height: .95; letter-spacing: -.035em; font-weight: 400;
  font-variation-settings: "opsz" 48;
}
.h3-light {                /* .heading-style-h3.text-weight-light */
  font-family: var(--serif); font-size: 8.75rem; line-height: .95; letter-spacing: -.04em; font-weight: 300;
  font-style: italic; font-variation-settings: "opsz" 48;
}
.h5 { font-family: var(--serif); font-size: 2.5rem; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; font-variation-settings: "opsz" 36; }
.text-large { font-size: 1.25rem; line-height: 1.2; }
.ink { color: var(--accent-ink); }
.center { text-align: center; }

/* SplitText line masks get extra room so italics and descenders are not clipped */
.st-line-mask { padding: .12em .12em .24em; margin: -.12em -.12em -.24em; }

/* ---------- buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  padding: .125rem; font-size: 1.125rem; font-weight: 700; line-height: 1; text-transform: uppercase;
  color: inherit; transition: background-color .2s, color .2s;
}
.button svg { width: 1.125rem; height: 1.1875rem; flex: none; }
.button:hover { background: var(--black); color: var(--accent); }
.button.is-alternate:hover { background: var(--accent); color: var(--black); }
.button_rounded {
  display: flex; align-items: center; justify-content: center; text-align: center; flex: none;
  width: 10.375rem; height: 10.375rem; padding: 0 2rem; border-radius: 100%;
  background: var(--accent); color: var(--black);
  font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.2;
  transition: transform .2s; overflow: hidden;
}
.button_rounded:hover { transform: scale(.9); }
.button_rounded-span { display: block; transition: transform .2s; }
.button_circle {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 100%; background: var(--accent); color: var(--black);
}
.button_circle svg { width: 1.125rem; height: 1.125rem; }
.button-outline {
  display: flex; align-items: center; justify-content: center; padding: 1.125rem 3rem;
  border: 2px solid var(--black); border-radius: var(--radius);
  font-size: 1.125rem; font-weight: 700; text-transform: uppercase; transition: background-color .2s, color .2s;
}
.button-outline:hover { background: var(--black); color: var(--accent); }

/* big underlined heading button (.button_h) */
.button_h { position: relative; display: block; overflow: hidden; margin-top: -1rem; padding: 1rem 0 .125rem .7rem; cursor: pointer; }
.button_h-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; }
.button_h-line.is-2 { transform: translateX(-100%); }

/* ---------- header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; pointer-events: none;
  padding: 2rem 0; color: var(--black); transition: color .3s, opacity .5s;
}
.header.is-light { color: var(--white); }
.header.is-hidden { opacity: 0; }
.header.is-hidden * { pointer-events: none !important; }
.header_inner { display: flex; justify-content: space-between; align-items: center; }
.brand { pointer-events: auto; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.brand_word { font-family: var(--sans); font-weight: 700; font-size: 2.05rem; letter-spacing: .06em; line-height: .9; }
.brand_sub { font-family: var(--mono); font-size: .62rem; letter-spacing: .42em; margin-top: .35rem; padding-left: .42em; white-space: nowrap; }
.header_links { display: flex; align-items: center; gap: .9rem; }
.header_links > * { pointer-events: auto; }
.lang { display: flex; align-items: center; gap: .3rem; font-size: 1.125rem; font-weight: 700; }
.lang button { opacity: .45; padding: .125rem; transition: opacity .2s; }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang button:hover { opacity: 1; }
.burger { display: flex; flex-direction: column; justify-content: center; gap: .375rem; padding: 1rem 0 1rem .5rem; margin-left: .6rem; }
.burger_line { display: block; width: 4rem; height: .1875rem; background: currentColor; transition: transform .4s var(--ease); }
.is-menu-open .burger_line.is-1 { transform: translateY(.28rem) rotate(45deg); }
.is-menu-open .burger_line.is-2 { transform: translateY(-.28rem) rotate(-45deg); }
.is-menu-open .header { color: var(--black); }

/* overlay menu (.header_menu) */
.menu {
  position: fixed; inset: 0; z-index: 999; background: var(--accent); color: var(--black);
  padding: 9rem 2rem 2rem; display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s;
}
.is-menu-open .menu { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.menu_links { display: flex; gap: .5rem; }
.menu_col { width: 100%; max-width: 21.25rem; }
.menu_list { margin-top: 1rem; }
.menu_link { display: inline-block; padding: .5rem 0; font-size: 1.25rem; line-height: 1.2; transition: opacity .2s; }
.menu_link:hover { opacity: .7; }
.menu_footer { margin: 0 auto; }
.menu .button_h { color: var(--black); }

/* ---------- hero ---------- */
.section_hero { background: var(--accent); padding-top: 13.5625rem; padding-bottom: var(--primary-size); position: relative; }
.hero_head { max-width: 79rem; margin: 0 auto; }
.hero_h { text-align: center; }
.hero_h em { font-weight: 300; }
.hero_video-wrapper { width: 14rem; margin: 8rem auto 0; border-radius: var(--radius); overflow: hidden; }
.hero_thumb { position: relative; display: block; aspect-ratio: 16 / 9; }
.hero_thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .6s var(--ease); }
.hero_thumb:hover img { transform: scale(1.06); }
.hero_play {
  position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 2.3rem;
  background: rgba(0,0,0,.85); color: var(--white); border-radius: .35rem;
}
.hero_play svg { width: 1.1rem; height: 1.1rem; }
.hero_buttons-mobile { display: none; }

/* ---------- about ---------- */
.section_about { position: relative; z-index: 1; background: var(--accent); padding: var(--small-size) 0; }
.about_head { display: flex; padding-left: 7.25rem; }
.about_head-p { max-width: 20.1rem; font-size: 1rem; }
.about_head-h { max-width: 50rem; margin-left: auto; }
.about_img-wrap { margin-top: 8rem; position: relative; z-index: 1; }
.about_img { width: 100%; height: 43.75rem; object-fit: cover; object-position: 50% 55%; border-radius: var(--radius); }

/* ---------- services (reference: locations) ---------- */
.section_locations { position: relative; z-index: 2; background: var(--white); padding: var(--primary-size) 0 var(--small-size); }
.locations_head { position: relative; max-width: 86.6rem; margin: 0 auto; padding-left: 4rem; }
.locations_num {
  position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 100%; background: var(--accent); font-size: 1.25rem; font-weight: 700; line-height: 1;
}
.locations_cards { margin-top: var(--primary-size); display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: .5rem; row-gap: 4rem; }
.locations_card-head { position: relative; border-radius: var(--radius); overflow: hidden; }
.locations_card-img-wrapper { height: 37.875rem; overflow: hidden; }
.locations_card-img { width: 100%; height: 110%; object-fit: cover; will-change: transform; }
.locations_card-info {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 2.5rem; background: var(--accent); opacity: 0; visibility: hidden;
  transition: opacity .5s ease-in-out, visibility 0s .5s;
}
.locations_card.is-open .locations_card-info { opacity: 1; visibility: visible; transition: opacity .5s ease-in-out; }
.locations_card-info-list { display: flex; flex-direction: column; gap: 2.5rem; }
.locations_card-info-list-item { display: flex; flex-direction: column; gap: 1.25rem; }
.locations_card-info-label { text-align: center; font-family: var(--serif); font-size: 2rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 400; }
.locations_card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3125rem .375rem; }
.locations_card-grid.is-one-col { grid-template-columns: 1fr; }
.locations_card-grid > * { text-align: center; }
.locations_card-footer { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.plus { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 100%; background: var(--accent); flex: none; transition: transform .5s ease-in-out; }
.plus svg { width: 1.25rem; height: 1.25rem; }
.locations_card.is-open .plus { transform: rotate(45deg); }

/* ---------- quote ---------- */
.section_quote { position: relative; z-index: 3; background: var(--white); padding: var(--primary-size) 0 5.875rem; }
.quote_p { text-align: center; font-family: var(--serif); font-size: 8.75rem; line-height: .95; letter-spacing: -.02em; font-weight: 400; font-variation-settings: "opsz" 48; }
.quote_p mark { white-space: nowrap; background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); color: inherit; padding: 0 .06em; }

/* ---------- clients ---------- */
.section_clients { position: relative; z-index: 6; background: var(--white); padding: var(--primary-size) 0; overflow: hidden; }
.clients_slider-wrapper { margin-top: var(--primary-size); }
.clients_slider-nav { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.clients_arrow { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 100%; background: var(--grey); transition: transform .2s, opacity .2s; }
.clients_arrow svg { width: 1.4rem; height: 1.4rem; }
.clients_arrow:hover { transform: scale(.8); }
.clients_arrow[disabled] { opacity: .5; cursor: not-allowed; }
.clients_slider { touch-action: pan-y; }
.clients_track { display: flex; gap: 3.875rem; will-change: transform; }
.clients_slide { flex: none; display: flex; align-items: center; gap: 2.5rem; width: 100%; max-width: 41.375rem; }
.clients_slide-img-wrapper { flex: none; width: 17.625rem; height: 23.875rem; border-radius: var(--radius); overflow: hidden; }
.clients_slide-img { width: 140%; max-width: none; height: 100%; margin-left: -20%; object-fit: cover; filter: saturate(0); }
.clients_slide-info { display: flex; flex-direction: column; gap: 1.5rem; padding-right: 3rem; }
.clients_name { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.25rem; color: var(--accent-ink); }
.clients_quote .q { color: var(--accent-ink); }
.rating_score { font-family: var(--serif); font-size: 4rem; line-height: 1; letter-spacing: -.03em; font-weight: 400; display: flex; align-items: baseline; gap: .5rem; }
.rating_stars { font-size: 1.5rem; letter-spacing: .1em; color: var(--accent-ink); }
.rating_link { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; text-transform: uppercase; font-size: 1rem; }
.rating_link:hover .button_circle { transform: scale(.9); }
.rating_link .button_circle { transition: transform .2s; }

/* ---------- booking (reference: app) ---------- */
.section_app { position: relative; z-index: 5; background: var(--accent); padding: var(--primary-size) 0; }
.app_head { max-width: 55rem; margin: 0 auto var(--primary-size); }
.app_body { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 8rem; margin-bottom: 15rem; }
.app_body-item { max-width: 14rem; margin-right: auto; position: relative; z-index: 2; }
.app_body-item.is-2 { margin-left: auto; margin-right: 0; }
.app_num { font-family: var(--serif); font-size: 2.5rem; line-height: 1.2; font-weight: 500; }
.app_body-item p { margin-top: 1.5rem; }
.app_phone { position: absolute; top: 0; left: 50%; margin-left: -13.7rem; width: 27.4rem; z-index: 1; will-change: transform; }
.app_footer { position: relative; z-index: 2; }
.app_footer-head { text-align: center; }
.app_footer-head h2 { display: inline; }
.app_qr { display: inline-block; vertical-align: bottom; width: 10.25rem; height: 10.25rem; margin-left: 2.125rem; }
.app_qr svg { width: 100%; height: 100%; }
.app_footer-btns { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 5rem; flex-wrap: wrap; }
.badge {
  display: flex; align-items: center; gap: .75rem; height: 3.875rem; min-width: 14rem; padding: 0 1.25rem;
  background: var(--black); color: var(--white); border-radius: .6rem; transition: transform .2s;
}
.badge:hover { transform: scale(.96); }
.badge svg { width: 1.9rem; height: 1.9rem; flex: none; }
.badge_text { display: flex; flex-direction: column; line-height: 1.05; }
.badge_small { font-size: .7rem; font-weight: 500; letter-spacing: .02em; }
.badge_big { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.badge.is-plain { background: transparent; padding: 0; min-width: 0; height: 2.875rem; gap: .55rem; }
.badge.is-plain svg { width: 1.6rem; height: 1.6rem; }
.badge.is-plain .badge_big { font-size: 1.2rem; }

/* CSS phone mockup (stands in for the reference's app screenshots) */
.phone {
  position: relative; aspect-ratio: 71.5 / 146.6; background: #0b0b0b; border-radius: 4.6rem;
  padding: .85rem; box-shadow: inset 0 0 0 .2rem #2b2b2b, 0 2.5rem 4rem -1.5rem rgba(0,0,0,.45);
}
.phone_screen { position: relative; height: 100%; border-radius: 3.8rem; background: #fff; overflow: hidden; color: #111; font-family: var(--sans); }
.phone_island { position: absolute; top: 1.1rem; left: 50%; width: 7.4rem; height: 2.1rem; margin-left: -3.7rem; background: #0b0b0b; border-radius: 2rem; }
.phone_body { padding: 5.3rem 1.6rem 1.6rem; display: flex; flex-direction: column; height: 100%; }
.phone_top { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 500; }
.phone_top svg { width: 1.4rem; height: 1.4rem; }
.phone_title { margin-top: 3.4rem; font-size: 2.35rem; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.phone_title span { color: #b48a00; }
.phone_chips { display: flex; gap: .5rem; margin-top: auto; }
.phone_chip { border: 1px solid #ddd; border-radius: 2rem; padding: .55rem .9rem; font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.phone_card { margin-top: 1rem; background: #f1f1f3; border-radius: 1.2rem; overflow: hidden; }
.phone_card img { width: 100%; height: 11.5rem; object-fit: cover; }
.phone_card-row { display: flex; align-items: center; gap: .8rem; padding: 1rem 1rem .4rem; }
.phone_logo { width: 3.2rem; height: 3.2rem; border-radius: .6rem; background: #000; color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; flex: none; }
.phone_name { font-weight: 700; font-size: 1.15rem; }
.phone_addr { font-size: .8rem; color: #666; margin-top: .2rem; }
.phone_book { margin: .6rem 1rem 1rem; background: var(--accent); border-radius: .8rem; text-align: center; padding: 1rem; font-weight: 700; font-size: 1.05rem; }
.phone_link { text-align: center; color: #9a7600; font-size: .95rem; margin-top: 1.2rem; padding-bottom: .4rem; }

/* ---------- gallery (reference: paper) ---------- */
.section_paper { position: relative; z-index: 7; background: var(--white); padding: var(--primary-size) 0 9.625rem; overflow: hidden; }
.paper_head { display: flex; justify-content: center; align-items: flex-end; gap: 2.5rem; }
.paper_body { margin-top: 10.3125rem; }
.paper_slider {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: max(var(--pad), calc(50vw - 43.25rem)); padding-right: 6rem;
}
.paper_slider::-webkit-scrollbar { display: none; }
.paper_slider.is-dragging { cursor: grabbing; }
.paper_slider.is-dragging a { pointer-events: none; }
.paper_slide { position: relative; flex: none; display: flex; width: 36.75rem; min-height: 37.875rem; margin-right: 3.5rem; transition: transform .8s ease-in-out; }
.paper_slide-img { width: 28.5rem; height: 28.5rem; margin-top: auto; margin-left: auto; border-radius: var(--radius); object-fit: cover; transition: transform .8s ease-in-out; -webkit-user-drag: none; user-select: none; }
.paper_slider-info {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; max-width: 28.5rem; min-height: 37.875rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 2.5rem 3rem; background: var(--white); border: 2px solid rgba(0,0,0,.05); border-radius: var(--radius);
}
.paper_slide-head { display: flex; align-items: center; gap: 1rem; font-size: 1rem; }
.paper_slide-body { margin-top: 2.5rem; }
.paper_slide-foot { display: flex; justify-content: flex-end; }
.paper_slide-foot .button_circle { transition: transform .3s; }
.paper_slide:hover .paper_slide-foot .button_circle { transform: rotate(-45deg); }
@media (hover: hover) and (min-width: 768px) {
  .paper_slide:hover .paper_slide-img { transform: translateX(13.25rem); }
  .paper_slide:hover ~ .paper_slide { transform: translateX(13.25rem); }
}

/* ---------- FAQ ---------- */
.section_faq { position: relative; z-index: 5; background: var(--black); color: var(--white); padding: var(--primary-size) 0; }
.section_faq .h-display { text-transform: uppercase; }
.faq_body { display: grid; grid-template-columns: 1fr 1fr; gap: 7.75rem; max-width: 64.75rem; margin: 10rem auto 0; }
.faq_dropdowns { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2.5rem; }
.dd { border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 1.25rem; }
.dd:last-child { border-bottom: 0; }
.dd_toggle { display: flex; justify-content: space-between; align-items: flex-start; gap: .625rem; width: 100%; text-align: left; font-size: 1.125rem; line-height: 1.2; }
.dd_icon { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 100%; background: var(--accent); color: var(--black); display: flex; align-items: center; justify-content: center; transition: transform .5s ease-in-out; }
.dd_icon svg { width: .9rem; height: .9rem; }
.dd_toggle:hover .dd_icon { transform: scale(.9); }
.dd.is-open .dd_icon { transform: rotate(135deg); }
.dd_list { height: 0; overflow: hidden; }
.dd_list-content { padding-top: 1.25rem; padding-right: 2.125rem; font-size: 1.125rem; line-height: 1.25; color: rgba(255,255,255,.82); }
.dd_list-content a { text-decoration: underline; text-underline-offset: .15em; }
html:not(.js) .dd_list { height: auto; }

/* ---------- CTA + visit ---------- */
.section_cta { position: relative; z-index: 8; background: var(--black); color: var(--white); padding: var(--primary-size) 0 9.625rem; }
.cta_head { display: flex; flex-direction: column; }
.cta_head-info { display: flex; justify-content: space-between; align-items: center; padding-top: 3.125rem; padding-right: 4.4375rem; }
.cta_head-p { max-width: 28.5rem; }
.cta_body { position: relative; z-index: 15; display: flex; justify-content: center; align-items: center; }
.cta_mockup { width: 21rem; will-change: transform; }
.cta_mockup .phone { border-radius: 3.6rem; padding: .7rem; }
.cta_mockup .phone_screen { border-radius: 2.95rem; font-size: .78rem; }
.cta_mockup .phone_body { padding: 4.1rem 1.25rem 1.25rem; }
.cta_mockup .phone_island { top: .85rem; width: 5.8rem; height: 1.65rem; margin-left: -2.9rem; }
.cta_mockup .phone_top { font-size: .9rem; }
.cta_mockup .phone_title { margin-top: 2.4rem; font-size: 1.8rem; }
.cta_mockup .phone_card img { height: 8.6rem; }
.cta_mockup .phone_name { font-size: .95rem; }
.cta_mockup .phone_addr { font-size: .68rem; }
.cta_mockup .phone_logo { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
.cta_mockup .phone_book { padding: .8rem; font-size: .9rem; }
.cta_mockup .phone_chip { font-size: .66rem; padding: .45rem .7rem; }
.cta_mockup .phone_link { font-size: .8rem; }
.cta_footer { position: relative; z-index: 1; }
.cta_footer-btns { display: flex; gap: 4.125rem; margin-top: 2.25rem; align-items: flex-start; }
.cta_footer-btns-wrapper { display: flex; gap: 2rem; flex: none; }
.visit { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.5rem; max-width: 40rem; }
.visit dt { color: var(--accent); }
.visit dd { margin: 0; }
.visit a { text-decoration: underline; text-underline-offset: .15em; }
.visit a:hover { color: var(--accent); }

/* ---------- footer (fixed, revealed under the page) ---------- */
.footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; height: 100svh;
  padding: 2rem 1.75rem; color: var(--white); background: #0d0b05; overflow: hidden;
}
.footer_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.footer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 26%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); }
.footer_inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.footer_menu-wrapper { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.footer .brand { color: var(--white); }
.footer_menu { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 46rem; gap: 2rem; }
.footer_menu-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.footer_link { font-size: 1.125rem; font-weight: 700; text-transform: uppercase; transition: color .2s; }
.footer_link:hover { color: var(--accent); }
.footer_title { font-style: italic; }
.footer_title-span { display: block; text-align: right; }
.by-container { position: absolute; left: 0; bottom: 3%; z-index: 2; font-size: .875rem; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; max-width: 60%; }
.by-container a { text-decoration: underline; font-weight: 700; }
.by-container a:hover { color: var(--accent); }

/* ---------- concept toast ---------- */
.toast {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 2000; display: flex; align-items: flex-start; gap: .75rem;
  max-width: 22rem; padding: .9rem 1rem; background: var(--black); color: var(--white);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); font-size: .85rem; line-height: 1.35;
  transform: translateY(140%); opacity: 0; transition: transform .6s var(--ease), opacity .6s;
}
.toast.is-in { transform: none; opacity: 1; }
.toast a { text-decoration: underline; }
.toast_close { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 100%; background: var(--accent); color: var(--black); display: flex; align-items: center; justify-content: center; }
.toast_close svg { width: .7rem; height: .7rem; }

/* Albanian 'Shërbimet' is a letter longer than 'Services': scale that one heading down */
html[lang="sq"] .locations_head .h-display { font-size: 17.25rem; }

/* ================= responsive (reference breakpoints) ================= */
@media screen and (max-width: 991px) {
  .h-display { font-size: 11.25rem; letter-spacing: -.045em; }
  .h-big { font-size: 8.75rem; letter-spacing: -.055em; }
  .h4 { font-size: 4.5rem; }
  .h3-light { font-size: 5.3125rem; }
  .h5 { font-size: 2rem; }
  .text-large { font-size: 1.125rem; }
  .button { font-size: 1rem; }
  .header { padding: 1.75rem 0; }
  .burger_line { width: 3.5rem; }
  .menu { padding-left: 1.5rem; padding-right: 1.5rem; }
  .section_hero { padding-top: 9.75rem; }
  .hero_video-wrapper { margin-top: 5rem; }
  .about_head { padding-left: 0; }
  .about_head-p { max-width: 16rem; }
  .about_head-h { max-width: 26rem; }
  .about_img-wrap { margin-top: var(--primary-size); }
  .locations_head { padding-left: 1rem; }
  html[lang="sq"] .locations_head .h-display { font-size: 9.25rem; }
  .locations_num { width: 2rem; height: 2rem; font-size: 1.125rem; }
  .locations_cards { grid-template-columns: 1fr 1fr; row-gap: 2.75rem; }
  .locations_card-info { padding-left: .7rem; padding-right: .7rem; }
  .locations_card-info-label { font-size: 1.5rem; }
  .quote_p { font-size: 5rem; letter-spacing: -.04em; line-height: .95; }
  .clients_slide { flex-direction: column; align-items: flex-start; gap: 1.5rem; max-width: 21.25rem; }
  .clients_slide-info { gap: 1rem; }
  .clients_slide-img-wrapper { width: 12.5rem; height: 15rem; }
  .app_head { max-width: 30rem; }
  .app_body { margin-bottom: var(--primary-size); }
  .app_phone { width: 15.4375rem; margin-left: -7.72rem; }
  .app_phone .phone { font-size: .56em; }
  .app_qr { width: 5.6875rem; height: 5.6875rem; }
  .app_footer-btns { margin-top: 3.625rem; }
  .paper_body { margin-top: 6.25rem; }
  .paper_slide { width: 29.8125rem; min-height: 30.375rem; margin-right: 2.5rem; }
  .paper_slider-info { max-width: 22.8125rem; min-height: 30.375rem; padding: 2rem 2.4rem; }
  .paper_slide-img { width: 22.875rem; height: 22.875rem; }
  .button_rounded { width: 7.5rem; height: 7.5rem; padding: 0 1rem; font-size: 1rem; }
  .faq_body { gap: 5rem 2.5rem; margin-top: 6.25rem; }
  .cta_mockup { width: 13.4375rem; }
  .cta_head-info { padding-top: 2rem; padding-left: 2.8125rem; padding-right: 0; font-size: .9375rem; }
  .cta_head-p { max-width: 22.3rem; }
  .cta_footer-btns { margin-top: 3.75rem; gap: 2.5rem; }
  .section_paper { padding-bottom: 6.25rem; }
  .section_cta { padding-bottom: 6.25rem; }
  .footer { height: 90svh; padding: 1.75rem 1.5rem; }
  .page-wrapper { padding-bottom: 89svh; }
  .footer_menu { flex-direction: column; align-items: flex-end; gap: 1.5rem; }
  .footer_menu-col { align-items: flex-end; gap: 1.5rem; }
  .footer_link { font-size: 1rem; }
  /* phone mockups scale down with their containers */
  .app_phone .phone, .cta_mockup .phone { border-radius: 2.6rem; padding: .5rem; }
  .app_phone .phone_screen, .cta_mockup .phone_screen { border-radius: 2.15rem; }
  .app_phone .phone_body, .cta_mockup .phone_body { padding: 3rem .9rem .9rem; }
  .app_phone .phone_island, .cta_mockup .phone_island { top: .6rem; width: 4.2rem; height: 1.2rem; margin-left: -2.1rem; }
  .app_phone .phone_top, .cta_mockup .phone_top { font-size: .65rem; }
  .app_phone .phone_title, .cta_mockup .phone_title { margin-top: 1.8rem; font-size: 1.3rem; }
  .app_phone .phone_card img, .cta_mockup .phone_card img { height: 6.3rem; }
  .app_phone .phone_card-row, .cta_mockup .phone_card-row { padding: .55rem .55rem .2rem; gap: .45rem; }
  .app_phone .phone_logo, .cta_mockup .phone_logo { width: 1.8rem; height: 1.8rem; font-size: .8rem; border-radius: .35rem; }
  .app_phone .phone_name, .cta_mockup .phone_name { font-size: .68rem; }
  .app_phone .phone_addr, .cta_mockup .phone_addr { font-size: .5rem; }
  .app_phone .phone_book, .cta_mockup .phone_book { margin: .35rem .55rem .55rem; padding: .5rem; font-size: .62rem; border-radius: .45rem; }
  .app_phone .phone_chip, .cta_mockup .phone_chip { font-size: .45rem; padding: .3rem .45rem; }
  .app_phone .phone_link, .cta_mockup .phone_link { font-size: .55rem; margin-top: .6rem; }
  .app_phone .phone_top svg, .cta_mockup .phone_top svg { width: .8rem; height: .8rem; }
}

@media screen and (max-width: 767px) {
  .h-display { font-size: 4.5rem; letter-spacing: -.06em; }
  .h-big { font-size: 4rem; letter-spacing: -.02em; }
  .h4 { font-size: 2.625rem; line-height: 1; letter-spacing: -.035em; }
  .h3-light { font-size: 3rem; line-height: 1; letter-spacing: -.035em; }
  .h5 { font-size: 1.5625rem; }
  .text-large { font-size: 1rem; }
  .header { padding: 1.25rem 0; }
  .brand_word { font-size: 1.6rem; }
  .brand_sub { font-size: .5rem; }
  .header .button.is-header { display: none; }
  .burger_line { width: 2.6rem; }
  .menu { padding: 7rem 1rem 1.5rem; }
  .menu_links { display: grid; grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .menu_list { margin-top: .375rem; }
  .section_hero { padding-top: 7.25rem; }
  .hero_video-wrapper { width: 8.8125rem; }
  .about_head { flex-direction: column; gap: 2rem; }
  .about_head-p { max-width: none; }
  .about_head-h { max-width: none; margin-left: 0; }
  .about_img { height: 18rem; }
  .locations_head { padding-left: 0; }
  html[lang="sq"] .locations_head .h-display { font-size: 3.7rem; }
  .locations_cards { grid-template-columns: 1fr; row-gap: 2rem; }
  .locations_card-img-wrapper { height: 28rem; }
  .locations_card-img { object-position: 50% 0%; }
  .locations_card-info { padding: 1.25rem; }
  .locations_card-info-list { gap: 1.5rem; }
  .locations_card-info-list-item { gap: .875rem; }
  .locations_card-grid { font-size: .875rem; }
  .section_quote { padding: 3.625rem 0 2.5rem; }
  .quote_p { font-size: 3rem; letter-spacing: -.03em; }
  .clients_slide { max-width: none; gap: .875rem; }
  .clients_slide-info { gap: .875rem; padding-right: 0; }
  .clients_slide-img-wrapper { width: 8.8125rem; height: 10.625rem; }
  .clients_arrow { width: 1.75rem; height: 1.75rem; }
  .clients_arrow svg { width: 1rem; height: 1rem; }
  .app_head { max-width: 20rem; }
  .app_body { gap: 3.625rem; }
  .app_body-item { max-width: 8.6rem; }
  .app_body-item.is-2 { margin-left: 0; margin-right: auto; }
  .app_phone { width: 8.4rem; left: auto; right: 0; margin-left: 0; }
  .app_phone .phone { border-radius: 1.6rem; padding: .3rem; }
  .app_phone .phone_screen { border-radius: 1.35rem; }
  .app_phone .phone_body { padding: 1.9rem .55rem .55rem; }
  .app_phone .phone_island { top: .35rem; width: 2.6rem; height: .75rem; margin-left: -1.3rem; }
  .app_phone .phone_top { font-size: .42rem; gap: .25rem; }
  .app_phone .phone_title { margin-top: 1.1rem; font-size: .82rem; }
  .app_phone .phone_card img { height: 3.8rem; }
  .app_phone .phone_card { border-radius: .55rem; margin-top: .5rem; }
  .app_phone .phone_card-row { padding: .35rem .35rem .1rem; gap: .3rem; }
  .app_phone .phone_logo { width: 1.15rem; height: 1.15rem; font-size: .5rem; border-radius: .25rem; }
  .app_phone .phone_name { font-size: .44rem; }
  .app_phone .phone_addr { font-size: .34rem; }
  .app_phone .phone_book { margin: .25rem .35rem .35rem; padding: .3rem; font-size: .4rem; border-radius: .3rem; }
  .app_phone .phone_chips { gap: .2rem; }
  .app_phone .phone_chip { font-size: .3rem; padding: .18rem .3rem; }
  .app_phone .phone_link { font-size: .36rem; margin-top: .35rem; }
  .app_phone .phone_top svg { width: .5rem; height: .5rem; }
  .app_qr { width: 2.5rem; height: 2.5rem; margin-left: .5rem; }
  .app_footer-btns { margin-top: 2.5rem; }
  .badge { min-width: 0; height: 3.2rem; padding: 0 .9rem; }
  .badge_big { font-size: 1.1rem; }
  .paper_head { justify-content: center; align-items: center; }
  .paper_body { margin-top: var(--primary-size); }
  .paper_slide { width: 17rem; min-height: 21.25rem; margin-right: 1.25rem; }
  .paper_slide-img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
  .paper_slider-info { max-width: none; min-height: 21.25rem; padding: 1.25rem; border-radius: .3125rem; background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 46%, rgba(255,255,255,0) 72%); border: 0; }
  .paper_slide-head { gap: .375rem; font-size: .8rem; }
  .paper_slide-body { margin-top: 1.25rem; }
  .button_rounded { width: 5rem; height: 5rem; padding: 0; font-size: .875rem; order: 1; }
  .faq_body { grid-template-columns: 1fr; row-gap: 3.625rem; }
  .faq_dropdowns { margin-top: 1.75rem; }
  .dd { padding-bottom: .875rem; }
  .dd_toggle { font-size: 1rem; }
  .dd_icon { width: 1.25rem; height: 1.25rem; }
  .dd_list-content { padding-top: .5rem; padding-right: 1.875rem; font-size: 1rem; }
  .cta_body { margin-top: -5rem; }
  .section_paper, .section_cta { padding-bottom: 4.25rem; }
  .footer::after { background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.2) 62%, rgba(0,0,0,.65) 100%); }
  .cta_head-info { flex-direction: column; align-items: flex-start; gap: 1rem; padding-top: 1.25rem; padding-left: 0; }
  .cta_footer-btns { margin-top: var(--primary-size); flex-direction: column; gap: 1.5rem; }
  .cta_footer-btns-wrapper { flex-wrap: wrap; gap: 1rem 1.5rem; }
  .visit { grid-template-columns: 1fr; gap: .2rem; }
  .visit dd { margin-bottom: .6rem; }
  .button_h { margin-right: auto; padding-left: .2rem; padding-right: .5rem; }
  .footer { height: 62svh; padding: 1.25rem 1rem; }
  .page-wrapper { padding-bottom: 61.5svh; }
  .footer_title { font-size: 2.625rem; }
  .by-container { max-width: 100%; position: static; margin-top: 1rem; }
  .footer_bottom { display: flex; flex-direction: column; }
  .toast { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
}

@media screen and (max-width: 479px) {
  .h-display { font-size: 4.4rem; letter-spacing: -.035em; }
  .h5 { font-size: 1.625rem; }
  .brand_word { font-size: 1.3rem; }
  .brand_sub { font-size: .4rem; letter-spacing: .36em; }
  .lang { font-size: .9rem; }
  .burger { padding-left: .25rem; margin-left: .25rem; }
  .burger_line { width: 2.2rem; height: .15rem; }
  .hero_video-wrapper { margin-top: 3.625rem; }
  .hero_buttons-mobile { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem; margin-top: 3.625rem; }
  .about_head-p { max-width: 15.8rem; }
  .quote_p { padding: 0 .5rem; }
  .locations_head { padding-top: .6875rem; }
  html[lang="sq"] .locations_head .h-display { font-size: 3.55rem; }
  .locations_num { width: 1.375rem; height: 1.375rem; font-size: .875rem; }
  .locations_card-footer { justify-content: space-between; gap: .5rem; }
  .clients_slider-nav { position: relative; z-index: 20; margin-bottom: -1.75rem; }
  .clients_slider-wrapper { margin-top: 3.625rem; }
  .app_body-item p { margin-top: .5rem; }
  .mono { font-size: .875rem; }
  .paper_head { gap: 1rem; }
  .faq_body { margin-top: 4.25rem; }
  .cta_body { justify-content: flex-end; }
  .cta_mockup { width: 8rem; }
  .cta_mockup .phone { border-radius: 1.4rem; padding: .28rem; }
  .cta_mockup .phone_screen { border-radius: 1.18rem; }
  .cta_mockup .phone_body { padding: 1.7rem .5rem .5rem; }
  .cta_mockup .phone_island { top: .3rem; width: 2.3rem; height: .65rem; margin-left: -1.15rem; }
  .cta_mockup .phone_top { font-size: .38rem; gap: .2rem; }
  .cta_mockup .phone_top svg { width: .45rem; height: .45rem; }
  .cta_mockup .phone_title { margin-top: 1rem; font-size: .72rem; }
  .cta_mockup .phone_card { border-radius: .5rem; margin-top: .45rem; }
  .cta_mockup .phone_card img { height: 3.3rem; }
  .cta_mockup .phone_card-row { padding: .3rem .3rem .1rem; gap: .25rem; }
  .cta_mockup .phone_logo { width: 1rem; height: 1rem; font-size: .45rem; border-radius: .2rem; }
  .cta_mockup .phone_name { font-size: .4rem; }
  .cta_mockup .phone_addr { font-size: .3rem; }
  .cta_mockup .phone_book { margin: .2rem .3rem .3rem; padding: .28rem; font-size: .36rem; border-radius: .25rem; }
  .cta_mockup .phone_chips { gap: .2rem; }
  .cta_mockup .phone_chip { font-size: .28rem; padding: .16rem .28rem; }
  .cta_mockup .phone_link { font-size: .33rem; margin-top: .3rem; }
  .footer_title { font-size: 2.5rem; }
  .footer_link { font-size: .875rem; }
  .footer_menu, .footer_menu-col { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.js body { opacity: 1; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}