/* ILOBO BARBER — editable colors, components and responsive layouts. */
@font-face {
  font-family:'Barlow Condensed';
  src:url('../assets/fonts/barlow-condensed-600.ttf') format('truetype');
  font-weight:600;
  font-display:swap
}


@font-face {
  font-family:'Barlow Condensed';
  src:url('../assets/fonts/barlow-condensed-700.ttf') format('truetype');
  font-weight:700;
  font-display:swap
}


@font-face {
  font-family:'DM Sans';
  src:url('../assets/fonts/dm-sans-regular.ttf') format('truetype');
  font-weight:400 500;
  font-display:swap
}


@font-face {
  font-family:'DM Sans';
  src:url('../assets/fonts/dm-sans-bold.ttf') format('truetype');
  font-weight:600 700;
  font-display:swap
}


:root {
  --bg:#171918;
  --paper:#f3f1e9;
  --ink:#1b1d1b;
  --lime:#c8ee67;
  --muted:#b4b9ae;
  --line:#3c4239;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'DM Sans',Arial,sans-serif;
  --header-height:88px;
  --gutter:clamp(24px,5.6vw,108px)
}


* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + 24px)
}

body {
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font:400 16px/1.65 var(--body)
}

body.modal-open {
  overflow:hidden
}

a {
  color:inherit;
  text-decoration:none
}

button {
  color:inherit;
  font:inherit;
  cursor:pointer
}

a,button,summary {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

button {
  border-radius:0
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #91bfff;
  outline-offset:5px
}

section:focus,main:focus {
  outline:none
}


img {
  display:block;
  max-width:100%
}

svg {
  pointer-events:none
}

h1,h2,h3,h4,p {
  margin:0
}

h1,h2,h3 {
  line-height:.98
}

h1,h2 {
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.018em
}

h2 {
  font-size:clamp(54px,5.9vw,88px)
}

[hidden] {
  display:none!important
}


.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  padding:14px 20px;
  background:var(--lime);
  color:var(--ink)
}

.skip-link:focus {
  top:10px
}

.icon {
  display:inline-block;
  width:22px;
  height:22px;
  flex:none;
  vertical-align:middle
}

.arrow-down {
  transform:rotate(180deg)
}


/* Header and navigation */
.header {
  height:var(--header-height);
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:30;
  background:var(--bg)
}

.wordmark {
  display:inline-flex;
  flex-direction:column;
  gap:8px;
  flex:none;
  font-family:var(--display);
  font-size:38px;
  font-weight:700;
  line-height:.72;
  letter-spacing:-.025em;
  padding:5px 0
}

.wordmark>span {
  font-size:14px;
  letter-spacing:.22em
}


.desktop-nav {
  display:flex;
  align-items:center;
  gap:clamp(18px,2.1vw,34px);
  font-size:13px
}

.desktop-nav a {
  padding:14px 0;
  text-underline-offset:7px
}

.desktop-nav a:hover {
  color:var(--lime);
  text-decoration:underline
}

.header-actions {
  display:flex;
  align-items:center;
  gap:12px
}


.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:52px;
  padding:15px 22px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  transition:background .18s,color .18s
}

.button-lime {
  background:var(--lime);
  color:var(--ink)
}

.button-lime:hover {
  background:#ddff87
}

.button-dark {
  background:var(--ink);
  color:var(--paper)
}

.button-dark:hover {
  background:#30362c
}

.button-outline {
  background:transparent;
  color:var(--paper);
  border-color:#7c8571
}

.button-outline:hover {
  border-color:var(--lime);
  color:var(--lime)
}


.menu-button {
  display:none;
  width:48px;
  height:48px;
  padding:10px;
  border:0;
  background:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:7px
}

.menu-button>span {
  width:24px;
  height:2px;
  background:var(--paper);
  transition:transform .18s
}

.menu-button[aria-expanded=true]>span:first-child {
  transform:translateY(4.5px) rotate(45deg)
}

.menu-button[aria-expanded=true]>span:last-child {
  transform:translateY(-4.5px) rotate(-45deg)
}

.mobile-nav {
  display:none
}


/* Hero */
.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:1800px;
  margin:auto
}

.hero-copy {
  padding:64px var(--gutter) 44px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.6
}

.live-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lime);
  flex:none
}

.hero h1 {
  font-size:clamp(62px,7.4vw,126px);
  line-height:.93;
  margin:37px 0 27px;
  width:100%
}

.title-line {
  display:block;
  white-space:nowrap
}

.title-line.outline {
  font-size:.86em
}

.outline {
  color:transparent;
  -webkit-text-stroke:1px var(--paper)
}

.hero-description {
  font-size:15px;
  color:#c4c8bf;
  line-height:1.8
}

.hero-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-top:28px
}

.hero-actions>.button {
  min-width:265px
}

.secondary-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  min-height:44px;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:5px
}

.secondary-link:hover {
  color:var(--lime)
}


.hero-address {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  font-size:12px;
  color:#c4c8bf
}

.hero-address .icon {
  width:17px;
  height:17px;
  color:var(--lime)
}

.hero-facts {
  display:flex;
  justify-content:space-between;
  gap:18px;
  width:100%;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--line)
}

.hero-facts>div {
  display:flex;
  flex-direction:column;
  gap:5px
}

.hero-facts strong {
  font-family:var(--display);
  font-size:26px;
  line-height:1;
  font-weight:600
}

.hero-facts span {
  font-size:11px;
  color:var(--muted)
}


.hero-photo {
  position:relative;
  min-height:650px;
  overflow:hidden;
  background:#353a32
}

.hero-photo>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 43%;
  filter:saturate(.65)
}

.photo-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#000b,transparent 50%)
}

.photo-label {
  position:absolute;
  left:32px;
  top:30px;
  color:var(--ink);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.5;
  border-top:1px solid;
  padding-top:8px
}

.photo-bottom {
  position:absolute;
  left:32px;
  right:32px;
  bottom:30px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  font-family:var(--display);
  font-size:29px;
  line-height:1.05;
  font-weight:600
}

.photo-bottom a {
  width:54px;
  height:54px;
  border:1px solid #bbb;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none
}

.photo-bottom a:hover {
  background:var(--lime);
  color:var(--ink);
  border-color:var(--lime)
}

.photo-bottom .icon {
  width:28px;
  height:28px
}


.ticker {
  overflow:hidden;
  background:var(--lime);
  color:var(--ink);
  padding:13px 0
}

.ticker>div {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  white-space:nowrap;
  font-family:var(--display);
  font-size:30px;
  font-weight:600;
  line-height:1.1
}

.ticker .icon {
  width:21px;
  height:21px
}


/* Services */
.section-pad {
  padding:88px var(--gutter)
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:42px
}

.section-heading>div {
  min-width:0
}

.section-heading .eyebrow {
  margin-bottom:20px
}

.muted {
  color:var(--muted)
}

.section-intro {
  max-width:350px;
  font-size:14px;
  color:#c0c6b9;
  line-height:1.85
}

.services-layout {
  display:grid;
  grid-template-columns:.78fr 1.5fr;
  gap:64px
}


.featured-service {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:410px;
  padding:30px;
  color:var(--ink);
  background:var(--lime);
  overflow:hidden
}

.pill {
  align-self:flex-start;
  padding:6px 12px;
  border:1px solid #718540;
  border-radius:30px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em
}

.featured-icon {
  position:absolute;
  width:110px;
  height:110px;
  top:86px;
  right:18px;
  color:#8ca53e;
  transform:rotate(12deg);
  opacity:.55
}

.featured-service h3 {
  position:relative;
  font-family:var(--display);
  font-size:clamp(56px,5vw,78px);
  font-weight:700;
  margin:36px 0 18px
}

.featured-service>p {
  position:relative;
  font-size:14px
}

.featured-bottom {
  display:flex;
  align-items:flex-end;
  gap:14px;
  margin-top:auto;
  padding-top:30px
}

.big-price {
  font-family:var(--display);
  font-size:72px;
  line-height:.9;
  font-weight:600
}

.big-price>span {
  font-size:38px
}

.featured-bottom>span:nth-child(2) {
  font-size:13px
}

.round-arrow {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid var(--ink);
  border-radius:50%;
  margin-left:auto
}

.featured-service:hover .round-arrow {
  background:var(--ink);
  color:var(--lime)
}

.service-action {
  display:block;
  border-top:1px solid #829b49;
  margin-top:23px;
  padding-top:15px;
  font-size:12px;
  font-weight:700
}


.service-row {
  display:grid;
  grid-template-columns:1fr auto 22px;
  align-items:center;
  gap:24px;
  min-height:100px;
  padding:20px 0;
  border-bottom:1px solid var(--line)
}

.service-row:first-child {
  border-top:1px solid var(--line)
}

.service-description {
  min-width:0
}

.service-description h3 {
  font-size:19px;
  font-weight:600;
  line-height:1.25
}

.service-description p {
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin-top:7px
}

.service-row:hover h3 {
  color:var(--lime)
}

.service-row>.icon {
  width:19px;
  height:19px
}

.service-meta {
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-end;
  min-width:80px;
  white-space:nowrap
}

.service-price {
  font-size:21px;
  line-height:1.3;
  font-weight:600
}

.service-time {
  font-size:12px;
  color:var(--muted)
}

.pricing-note {
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
  margin-top:22px;
  max-width:780px
}


/* Gallery */
.work {
  background:var(--paper);
  color:var(--ink)
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-height:44px;
  padding:10px 0;
  border-bottom:1px solid;
  font-size:13px;
  line-height:1.5
}

.text-link .icon {
  width:19px;
  height:19px
}

.text-link:hover {
  opacity:.75
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:26px
}

.filters button {
  min-height:44px;
  padding:9px 17px;
  border:1px solid #a4aa9c;
  border-radius:30px;
  background:transparent;
  color:var(--ink);
  font-size:13px
}

.filters button[aria-pressed=true] {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}


.gallery {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px
}

.gallery-item {
  display:block;
  min-width:0
}

.gallery-photo {
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#d0d0c7
}

.gallery-photo>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  transition:transform .35s
}

.gallery-item:hover img {
  transform:scale(1.04)
}

.zoom-icon {
  position:absolute;
  bottom:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:var(--paper);
  border-radius:50%
}

.zoom-icon .icon {
  width:19px;
  height:19px
}

.gallery-label {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  font-size:12px;
  line-height:1.5;
  font-weight:700
}

.gallery-label>span {
  color:#626a58;
  font-weight:400
}

.gallery-hint {
  font-size:12px;
  margin-top:24px;
  color:#555e4b
}


/* Team and booking */
.team-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px
}

.team-photo {
  aspect-ratio:4/5;
  overflow:hidden;
  background:#30362e
}

.team-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
  filter:grayscale(1);
  transition:filter .35s,transform .35s
}

.team-member:hover img {
  filter:grayscale(0);
  transform:scale(1.025)
}

.team-name {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:16px
}

.team-name h3 {
  font-family:var(--display);
  font-size:32px;
  font-weight:600
}

.team-name>span {
  display:block;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.07em;
  margin-top:10px
}

.team-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid var(--line)
}

.team-bottom p {
  font-size:15px;
  color:#c0c6b9
}


.booking-banner {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:72px;
  background:var(--lime);
  color:var(--ink)
}

.booking-heading .eyebrow {
  margin-bottom:25px
}

.booking-heading h2 {
  font-size:clamp(64px,6.5vw,100px)
}

.booking-heading h2>span {
  -webkit-text-stroke:1px var(--ink);
  color:transparent
}

.booking-description {
  font-size:15px;
  margin-top:26px;
  line-height:1.9
}

.booking-panel {
  padding-left:40px;
  border-left:1px solid #8aa443
}

.booking-steps {
  list-style:none;
  padding:0;
  margin:0 0 30px
}

.booking-steps li {
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid #a4c456
}

.booking-steps li:first-child {
  padding-top:0
}

.booking-steps li>span {
  padding-top:1px;
  font-family:var(--display);
  font-size:25px;
  line-height:1
}

.booking-steps strong {
  font-size:15px
}

.booking-steps p {
  margin-top:5px;
  font-size:13px;
  line-height:1.7
}

.booking-panel>.button {
  width:100%
}

.call-link {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  margin-top:8px;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px
}


/* Location */
.open-badge {
  padding:10px 16px;
  border:1px solid #7b895f;
  border-radius:30px;
  color:var(--lime);
  font-size:12px;
  line-height:1.5
}

.open-badge[data-open=false] {
  color:var(--paper);
  border-color:#71796a
}

.location-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding-top:32px;
  border-top:1px solid var(--line)
}

.small-label {
  font-size:11px;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.10em
}

.address-panel h3 {
  font-family:var(--display);
  font-size:36px;
  font-weight:600;
  margin:24px 0 12px;
  line-height:1.1
}

.address-panel address {
  font-style:normal;
  font-size:14px;
  color:#c5ccbd
}

.location-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px
}

.location-actions .button {
  font-size:13px;
  padding:14px 18px;
  gap:16px
}

.copy-status {
  font-size:12px;
  color:var(--lime);
  margin-top:10px;
  min-height:20px
}

.contact-links {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-top:10px
}

.contact-links a {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  font-size:14px
}

.contact-links a:hover {
  color:var(--lime)
}

.contact-links .icon {
  width:18px;
  height:18px
}


.review-note {
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid var(--line)
}

.review-note h4 {
  font-size:17px;
  line-height:1.6;
  margin-top:12px;
  font-weight:600;
  max-width:360px
}

.review-note p {
  font-size:13px;
  color:var(--muted);
  margin-top:8px
}

.review-note>div {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-top:12px
}

.review-note .text-link {
  font-size:12px
}


.hours-list {
  margin:16px 0
}

.hours-list>div {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:14px
}

.hours-list dt {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.hours-list dd {
  display:flex;
  flex-direction:column;
  text-align:right;
  margin:0;
  white-space:nowrap
}

.hours-period {
  display:block
}

.hours-list [data-today=true] {
  color:var(--lime)
}

.today-label {
  padding:1px 6px;
  border:1px solid #6c7d4f;
  font-size:10px;
  line-height:1.7
}

.hours-note {
  max-width:400px;
  color:var(--muted);
  font-size:12px;
  line-height:1.9
}


/* FAQ and footer */
.faq {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:70px;
  padding-top:0
}

.faq h2 {
  margin-top:22px
}

.faq-list details {
  border-top:1px solid var(--line)
}

.faq-list details:last-child {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  list-style:none;
  padding:22px 0;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  line-height:1.6
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary>span {
  font-size:24px;
  line-height:1;
  color:var(--lime);
  transition:transform .15s;
  flex:none
}

.faq-list details[open] summary>span {
  transform:rotate(45deg)
}

.faq-answer {
  padding:0 30px 24px 0;
  font-size:14px;
  color:#c5ccbd;
  line-height:1.9
}

.faq-answer a {
  text-decoration:underline;
  text-underline-offset:4px
}

.faq-answer>a {
  display:inline-block;
  padding-top:10px
}


.footer {
  padding:48px var(--gutter) 22px;
  background:#10120f;
  border-top:1px solid var(--line)
}

.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding-bottom:38px
}

.footer-top>p {
  font-family:var(--display);
  font-size:28px;
  font-weight:600;
  color:var(--muted)
}

.footer-social {
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  min-height:44px
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:14px;
  color:var(--muted);
  font-size:11px
}

.footer-bottom>div {
  display:flex;
  gap:20px;
  flex-wrap:wrap
}

.footer-bottom a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}

.footer-bottom a:hover {
  color:var(--paper)
}

.mobile-book {
  display:none
}

.noscript-note {
  padding:24px;
  font-size:14px
}


/* Full photographs are contained, not cropped. */
dialog {
  color:var(--paper);
  background:var(--bg);
  border:1px solid #57604e;
  padding:14px;
  width:min(94vw,760px);
  max-width:94vw;
  max-height:94dvh;
  overflow:auto
}

dialog::backdrop {
  background:#000e
}

.lightbox-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:10px
}

#lightbox-counter {
  font-size:13px;
  color:var(--muted);
  padding-left:4px
}

.icon-button {
  display:inline-grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid #69735c;
  background:transparent;
  flex:none
}

.icon-button:hover {
  color:var(--ink);
  background:var(--lime);
  border-color:var(--lime)
}

.lightbox-image {
  display:flex;
  align-items:center;
  justify-content:center;
  height:min(68dvh,calc(94dvh - 160px),760px);
  background:#10120f
}

.lightbox-image img {
  width:100%;
  height:100%;
  object-fit:contain
}

.lightbox-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding-top:14px
}

#lightbox-caption {
  text-align:center;
  font-size:14px;
  line-height:1.6
}

.icon-button:disabled {
  opacity:.35;
  cursor:default
}


/* Tablet */
@media(min-width:1800px) {
  .section-pad,.header,.footer {
  padding-left:max(var(--gutter),calc((100vw - 1584px)/2));
  padding-right:max(var(--gutter),calc((100vw - 1584px)/2))
}


}


@media(max-width:1100px) {
  :root {
  --gutter:32px
}

.desktop-nav {
  gap:16px;
  font-size:12px
}

.header-book {
  padding:13px 16px;
  gap:16px;
  font-size:13px
}

.hero-copy {
  padding-top:48px
}

.hero-photo {
  min-height:610px
}

.hero-description {
  font-size:14px
}

.hero-address {
  font-size:11px
}

.services-layout {
  gap:32px;
  grid-template-columns:.8fr 1.3fr
}

.featured-service {
  padding:24px
}

.service-row {
  gap:14px
}

.service-description h3 {
  font-size:17px
}

.service-price {
  font-size:18px
}

.section-pad {
  padding-top:72px;
  padding-bottom:72px
}

.section-intro {
  max-width:300px;
  font-size:13px
}

.gallery {
  gap:14px
}

.team-grid {
  gap:16px
}

.booking-banner {
  gap:38px
}

.booking-panel {
  padding-left:28px
}

.booking-heading h2 {
  font-size:7.2vw
}

.location-grid {
  gap:44px
}

.faq {
  gap:40px;
  padding-top:0
}

.footer-bottom {
  align-items:flex-start
}

.footer-bottom>div {
  gap:8px 16px
}


}


@media(max-width:900px) {
  .desktop-nav {
  display:none
}

.menu-button {
  display:flex
}

.mobile-nav {
  position:fixed;
  top:var(--header-height);
  left:0;
  right:0;
  z-index:29;
  display:block;
  padding:18px var(--gutter) 24px;
  background:var(--bg);
  border-bottom:1px solid #727d62;
  max-height:calc(100dvh - var(--header-height));
  overflow-y:auto;
  box-shadow:0 18px 24px #0004
}

.mobile-nav>a:not(.button) {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:15px
}

.mobile-nav>.button {
  width:100%;
  margin-top:20px
}

.mobile-nav>.menu-phone {
  border-bottom:0;
  justify-content:center;
  margin-top:6px
}


}


/* Mobile */
@media(max-width:760px) {
:root {
  --header-height:72px;
  --gutter:24px
}

body {
  font-size:15px
}

html {
  scroll-padding-bottom:100px
}

h2 {
  font-size:clamp(38px,12vw,64px)
}

.header {
  gap:16px
}

.wordmark {
  font-size:32px;
  gap:7px
}

.wordmark>span {
  font-size:12px
}

.header-book {
  min-height:44px;
  padding:10px 13px;
  font-size:12px
}


.hero {
  grid-template-columns:1fr
}

.hero-copy {
  padding:30px var(--gutter) 27px
}

.hero .eyebrow {
  font-size:10px;
  letter-spacing:.07em
}

.hero h1 {
  margin:28px 0 20px;
  font-size:clamp(44px,16.4vw,100px);
  line-height:.95
}

.hero-description {
  font-size:14px;
  line-height:1.8
}

.hero-actions {
  width:100%;
  margin-top:23px;
  gap:4px
}

.hero-actions>.button {
  width:100%;
  min-width:0
}

.hero-address {
  margin-top:15px;
  font-size:12px
}

.hero-facts {
  margin-top:23px;
  padding-top:19px
}

.hero-facts strong {
  font-size:25px
}

.hero-facts span {
  font-size:11px
}

.hero-photo {
  min-height:0;
  height:clamp(340px,105vw,550px)
}

.hero-photo>img {
  object-position:center 42%
}

.photo-label {
  top:22px;
  left:24px;
  font-size:10px
}

.photo-bottom {
  left:24px;
  right:24px;
  bottom:24px;
  font-size:26px
}

.ticker {
  padding:12px 0
}

.ticker>div {
  font-size:26px;
  gap:24px
}

.ticker .icon {
  width:18px;
  height:18px
}


.section-pad {
  padding:58px var(--gutter)
}

.section-heading {
  display:block;
  margin-bottom:30px
}

.section-heading .eyebrow {
  margin-bottom:18px
}

.section-intro {
  margin-top:22px;
  font-size:14px;
  max-width:100%
}

.services-layout {
  grid-template-columns:1fr;
  gap:28px
}

.featured-service {
  min-height:360px;
  padding:26px
}

.featured-service h3 {
  font-size:70px;
  margin-top:30px
}

.featured-icon {
  top:65px;
  right:30px;
  width:125px;
  height:125px
}

.service-row {
  min-height:100px;
  gap:14px;
  padding:20px 0
}

.service-description h3 {
  font-size:17px
}

.service-description p {
  font-size:12px
}

.service-meta {
  min-width:72px
}

.service-price {
  font-size:18px
}

.service-time {
  font-size:12px
}

.service-row>.icon {
  width:18px;
  height:18px
}

.pricing-note {
  margin-top:20px
}


.work .section-heading>.text-link {
  margin-top:20px
}

.filters {
  gap:6px;
  margin-bottom:22px
}

.filters button {
  font-size:12px;
  padding:9px 13px
}

.gallery {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px 14px
}

.gallery-label {
  font-size:12px;
  line-height:1.5
}

.gallery-label>span {
  display:none
}

.gallery-hint {
  font-size:12px
}

.team-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 14px
}

.team-name {
  margin-top:14px;
  padding-top:13px
}

.team-name h3 {
  font-size:28px
}

.team-name>span {
  font-size:10px
}

.team-bottom {
  display:block;
  margin-top:28px
}

.team-bottom .text-link {
  margin-top:12px
}


.booking-banner {
  grid-template-columns:1fr;
  gap:34px
}

.booking-heading h2 {
  font-size:clamp(48px,14.7vw,86px)
}

.booking-description {
  font-size:14px;
  margin-top:22px
}

.booking-panel {
  border-left:0;
  border-top:1px solid #90a84f;
  padding:26px 0 0
}

.booking-steps li {
  padding:17px 0
}

.booking-steps strong {
  font-size:15px
}

.booking-steps p {
  font-size:13px
}

.open-badge {
  display:inline-block;
  margin-top:24px;
  max-width:100%
}

.location-grid {
  grid-template-columns:1fr;
  gap:44px;
  padding-top:28px
}

.address-panel h3 {
  font-size:34px;
  margin-top:21px
}

.location-actions {
  gap:10px
}

.location-actions .button {
  min-height:48px;
  font-size:12px;
  padding:13px 14px
}

.contact-links {
  gap:10px 24px
}

.contact-links a {
  font-size:14px
}

.hours-list>div {
  font-size:14px;
  gap:12px
}

.review-note>div {
  gap:12px 24px
}


.faq {
  display:block;
  padding-top:0
}

.faq h2 {
  margin-bottom:30px
}

.faq-list summary {
  font-size:14px;
  padding:21px 0
}

.faq-answer {
  padding-right:16px;
  font-size:14px
}

.footer {
  padding:40px var(--gutter) calc(110px + env(safe-area-inset-bottom,0px))
}

.footer-top {
  flex-wrap:wrap;
  padding-bottom:28px
}

.footer-top>p {
  order:3;
  width:100%;
  font-size:27px
}

.footer-bottom {
  display:block;
  font-size:12px
}

.footer-bottom>div {
  margin-top:10px;
  gap:0 16px
}


.mobile-book {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:25;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:20px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  border-top:1px solid #65704f;
  background:#171918
}

.mobile-call {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:48px;
  font-size:13px
}

.mobile-call .icon {
  width:19px;
  height:19px
}

.mobile-book>.button {
  min-height:48px;
  font-size:14px;
  padding:12px 18px
}

dialog {
  padding:10px
}

.lightbox-image {
  height:min(65dvh,calc(94dvh - 160px))
}

.lightbox-bottom {
  gap:12px
}

#lightbox-caption {
  font-size:13px
}



}


@media(max-width:480px) {
  .header-book {
  display:none
}


}


@media(max-width:359px) {
  :root {
  --gutter:18px
}

.hero h1 {
  font-size:16vw
}

.hero-facts {
  gap:12px
}

.hero-facts span {
  font-size:10px
}

.service-row {
  gap:10px;
  grid-template-columns:1fr auto 18px
}

.service-price {
  font-size:16px
}

.service-meta {
  min-width:65px
}

.service-description h3 {
  font-size:16px
}

.hours-list>div {
  font-size:13px
}

.today-label {
  font-size:9px
}

.filters button {
  font-size:11px;
  padding:9px 10px
}

.mobile-book {
  gap:15px
}


}


@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

*,*::before,*::after {
  transition:none!important;
  animation:none!important
}


}


@media(forced-colors:active) {
  .outline,.booking-heading h2>span {
  color:CanvasText;
  -webkit-text-stroke:0
}

.button,.filters button,.icon-button {
  border:1px solid ButtonText
}


}




/* ==============================================================================
   REGLAS WEBNIX ULTRA-LIGHT
   ============================================================================== */
[hidden] {
  display: none !important;
}
.modal-backdrop[hidden],
.modal[hidden],
.drawer[hidden] {
  display: none !important;
}

/* Modal de Solicitud de Cita / Contacto Directo */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-card {
  background: #1e211e;
  border: 1px solid var(--line);
  color: var(--paper);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 28px;
  position: relative;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8);
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover {
  color: var(--lime);
}
.modal-title {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 6px;
  color: var(--paper);
}
.modal-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.4;
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.form-control {
  width: 100%;
  padding: 12px 14px;
  background: #141614;
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--body);
  font-size: 14px;
  box-sizing: border-box;
}
.form-control:focus {
  outline: none;
  border-color: var(--lime);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-submit-btn {
  width: 100%;
  margin-top: 10px;
}
.form-alert {
  padding: 12px;
  font-size: 13px;
  margin-bottom: 16px;
  border-radius: 2px;
}
.form-alert.success {
  background: rgba(200, 238, 103, 0.15);
  border: 1px solid var(--lime);
  color: var(--lime);
}
.form-alert.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}