/* ============================================================
   Ana HM Hair Stylist · La Hoya (Lorca)
   Dirección: "Seis manos" — el sello de su rótulo a tamaño real.
   Paleta medida sobre la foto de su cartel (foto_05).
   ============================================================ */

:root{
  /* color — todo sale del rótulo */
  --tinta:#14100D;        /* el negro-marrón del sello */
  --tinta-2:#1E1815;      /* elevación sobre tinta */
  --cal:#E9EBEA;          /* blanco FRÍO (no crema: evita el default nº1) */
  --cal-2:#F3F4F3;
  --cobre:#C08A6E;        /* las líneas del monograma. Acento sobre oscuro y relleno */
  --cobre-vivo:#DFA982;
  --cobre-hondo:#7E4E33;  /* la MISMA familia, para texto sobre claro (5,8:1) */
  --carmin:#A3242B;       /* el tocado y las uñas rojas. Solo plano, nunca texto */

  --linea:rgba(20,16,13,.14);
  --linea-clara:rgba(233,235,234,.18);
  --cuerpo:#3A322C;
  --tenue:#6B6058;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,60px);
  --sec:clamp(78px,10vw,150px);
  --ease:cubic-bezier(.22,.61,.36,1);

  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--cal);color:var(--cuerpo);
  font-family:var(--f-body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--cobre);color:var(--tinta)}
:focus-visible{outline:2px solid var(--cobre-hondo);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--tinta);color:var(--cal);padding:12px 18px}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec)}

/* ── tipografía compartida ─────────────────────────────── */
.h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(34px,5.2vw,62px);line-height:1.02;letter-spacing:-.018em;
  color:var(--tinta);text-wrap:balance;
}
.lead{font-size:clamp(17px,1.7vw,20px);line-height:1.58;color:var(--cuerpo);text-wrap:pretty}
p{text-wrap:pretty}
.tag{
  font-family:var(--f-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cobre-hondo);
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.tag::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.head2{max-width:42ch;margin-bottom:clamp(38px,5vw,64px)}
.head2 .lead{margin-top:16px}
.stars{color:var(--cobre);letter-spacing:.14em}

/* ── botones ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border:1px solid transparent;border-radius:2px;
  font-weight:600;font-size:.95rem;letter-spacing:.01em;cursor:pointer;
  transition:transform .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
/* relleno cobre + texto TINTA = 6,4:1. Con texto blanco daría 2,96:1 y no pasaría. */
.btn--fill{background:var(--cobre);color:var(--tinta);border-color:var(--cobre)}
.btn--line{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn--lg{padding:18px 32px;font-size:1rem}
.btn--block{width:100%}
.btn__label{font-weight:700}
.btn__num{font-family:var(--f-mono);font-size:.8rem;opacity:.72;letter-spacing:.02em}
@media (hover:hover){
  .btn--fill:hover{background:var(--cobre-vivo);border-color:var(--cobre-vivo);transform:translateY(-2px)}
  .btn--line:hover{border-color:var(--tinta);transform:translateY(-2px)}
}
.btn:active{transform:scale(.97)}

/* ══════════ HEADER (píldora flotante) ══════════ */
.head{position:fixed;inset:16px 0 auto;z-index:120;padding-inline:var(--gutter);pointer-events:none}
.head__pill{
  pointer-events:auto;
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;gap:18px;
  padding:10px 12px 10px 20px;border-radius:999px;
  background:rgba(20,16,13,.5);border:1px solid rgba(233,235,234,.16);
}
/* sin backdrop-filter a propósito: colapsa el menú móvil tras el scroll */
.head.scrolled .head__pill{background:var(--tinta);border-color:var(--linea-clara);box-shadow:0 12px 34px -18px rgba(0,0,0,.8)}
.mark{display:flex;align-items:center;gap:10px;color:var(--cobre);flex:none}
.mark__seal{width:26px;height:26px;flex:none}
.mark__text{font-family:var(--f-display);font-size:1.28rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cal)}
.nav{display:flex;gap:26px;margin-left:auto;font-size:.9rem;font-weight:500;color:rgba(233,235,234,.82)}
.nav a{padding:4px 0;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover){.nav a:hover{color:var(--cal)}}
.nav a.active{color:var(--cobre);border-bottom-color:var(--cobre)}
.head__cta{padding:11px 20px;font-size:.88rem;flex:none}
.burger{display:none;width:42px;height:42px;background:none;border:0;flex:none;position:relative;cursor:pointer}
.burger span{position:absolute;left:11px;width:20px;height:1.5px;background:var(--cal);transition:transform .28s var(--ease),opacity .2s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:20.5px}.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ══════════ PORTADA ══════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;isolation:isolate;background:var(--tinta)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:-3}
.hero__veil{
  position:absolute;inset:0;z-index:-2;
  /* oscurece SOLO donde cae el texto; los bordes se dejan claros para que
     se lean las tres piezas del polìptico, que es el argumento de la portada */
  background:
    radial-gradient(74% 88% at 50% 48%, rgba(20,16,13,.76) 0%, rgba(20,16,13,.52) 54%, rgba(20,16,13,.26) 100%),
    linear-gradient(180deg, rgba(20,16,13,.64) 0%, rgba(20,16,13,.05) 22%, rgba(20,16,13,.10) 60%, rgba(20,16,13,.82) 100%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;opacity:.34;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* el escenario: sello y titular ocupan la MISMA celda → oclusión */
.hero__stage{
  position:relative;display:grid;place-items:center;
  width:min(70vw,64svh,620px);aspect-ratio:1;margin:0 auto;
}
.hero__stage > *{grid-area:1/1}
.seal{width:100%;height:100%;color:var(--cobre);opacity:1}
.seal--front{opacity:.86}
.seal polygon{stroke-dasharray:100;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .seal--back polygon{animation:trazo 1.5s var(--ease) both}
  .seal--front polygon{animation:trazo 1.5s var(--ease) .25s both}
}
@keyframes trazo{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

.hero__type{text-align:center;z-index:2}
.hero__name{
  font-family:var(--f-display);font-weight:300;
  /* min(vw,svh) para que en pantallas anchas y bajas no se coma el header */
  font-size:clamp(66px,min(17vw,20svh),168px);
  line-height:.86;letter-spacing:.02em;text-transform:uppercase;
  color:var(--cal);text-wrap:nowrap;
}
.hero__role{
  margin-top:clamp(12px,1.6vw,22px);
  font-family:var(--f-mono);font-size:clamp(.75rem,1.1vw,.86rem);font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(233,235,234,.94);
}
.hero__role .sep{margin-inline:.6em;opacity:.6}

.hero__foot{
  position:relative;z-index:3;
  margin-top:clamp(18px,2.4vw,34px);
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding-inline:var(--gutter);
}
.hero__foot .btn--fill{flex-direction:column;gap:2px;padding-block:15px}
.hero__rating{font-size:.94rem;line-height:1.5;color:rgba(233,235,234,.9)}
.hero__rating .stars{margin-right:8px}
.hero__rating strong{color:var(--cal);font-weight:700}

/* ══════════ BANDA cobre: los seis oficios ══════════ */
.band{
  background:var(--cobre);color:var(--tinta);
  padding:clamp(16px,2vw,22px) var(--gutter);
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
}
.band__list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,2.4vw,34px)}
.band__list li{
  font-family:var(--f-mono);font-size:.78rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
}
.band__place{
  font-family:var(--f-display);font-size:1.16rem;letter-spacing:.16em;text-transform:uppercase;
  padding-left:clamp(16px,3vw,40px);border-left:1px solid rgba(20,16,13,.28);
}

/* ══════════ ANA ══════════ */
.ana{background:var(--cal)}
.ana__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,5vw,80px);align-items:start}
.ana__text .h2{margin-bottom:26px}
.ana__text p + p{margin-top:16px}
.ana__text strong{color:var(--tinta);font-weight:700}
.ana__sign{
  margin-top:28px;padding-top:22px;border-top:1px solid var(--linea);
  font-family:var(--f-display);font-size:1.32rem;line-height:1.32;color:var(--tinta);
}
.ana__shot{position:relative}
.ana__shot img{width:100%;border-radius:0}
.ana__shot figcaption{
  margin-top:14px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);
}

/* ══════════ SERVICIOS ══════════ */
.serv{background:var(--cal-2);border-block:1px solid var(--linea)}
.serv__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);background-clip:content-box}
.card{background:var(--cal-2);padding:clamp(26px,3vw,40px);position:relative;transition:background-color .25s var(--ease)}
/* el sello, en trazo y a escala pequeña: la misma figura del rótulo, no un icono */
.card__seal{
  display:block;width:34px;height:34px;margin-bottom:20px;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%237E4E33' stroke-width='1.1'%3E%3Cpolygon points='31,16 26.6,26.6 16,31 5.4,26.6 1,16 5.4,5.4 16,1 26.6,5.4'/%3E%3Cpolygon points='31,16 26.6,26.6 16,31 5.4,26.6 1,16 5.4,5.4 16,1 26.6,5.4' transform='rotate(22.5 16 16)'/%3E%3C/g%3E%3C/svg%3E");
}
.card h3{
  font-family:var(--f-display);font-weight:500;font-size:clamp(25px,2.5vw,33px);
  line-height:1.06;color:var(--tinta);margin-bottom:12px;
}
.card p{font-size:.97rem;color:var(--cuerpo)}
@media (hover:hover){.card:hover{background:var(--cal)}}
.serv__note{margin-top:clamp(30px,4vw,48px);font-size:1.02rem;color:var(--tenue);max-width:56ch}
.serv__note a{color:var(--cobre-hondo);font-weight:600;border-bottom:1px solid currentColor}

/* ══════════ TRABAJOS ══════════ */
.work{background:var(--cal)}
.work__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:clamp(10px,1.4vw,18px)}
.shot{position:relative;cursor:zoom-in;overflow:hidden;background:var(--tinta-2)}
.shot--tall{grid-row:span 2}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.shot--tall img{object-position:center 30%}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cal);
  background:linear-gradient(180deg,rgba(20,16,13,0),rgba(20,16,13,.82));
}
@media (hover:hover){.shot:hover img{transform:scale(1.04)}}
.work__hint{margin-top:22px;max-width:40ch;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}

/* ══════════ EL SALÓN (banda oscura a sangre) ══════════ */
.salon{position:relative;isolation:isolate;background:var(--tinta);padding-block:clamp(90px,12vw,170px);display:flex;align-items:center}
.salon__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:-2}
.salon__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(96deg,rgba(20,16,13,.94) 0%,rgba(20,16,13,.86) 46%,rgba(20,16,13,.52) 100%)}
.salon__text{max-width:min(100%,var(--maxw))}
.salon__text .tag{color:var(--cobre-vivo)}
.salon__text .h2{color:var(--cal);max-width:16ch}
.salon__text .lead{color:rgba(233,235,234,.84);max-width:48ch;margin-top:20px}

/* ══════════ RESEÑAS ══════════ */
.revs{background:var(--cal-2);border-block:1px solid var(--linea)}
.revs__score{display:flex;align-items:center;gap:clamp(18px,3vw,34px);margin-bottom:clamp(34px,4vw,56px);flex-wrap:wrap}
.revs__num{font-family:var(--f-display);font-weight:300;font-size:clamp(74px,11vw,140px);line-height:.8;color:var(--tinta);letter-spacing:-.02em}
.stars--lg{font-size:1.5rem;letter-spacing:.18em}
.revs__meta{display:flex;align-items:center;gap:9px;margin-top:8px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tenue)}
.revs__grid{columns:3;column-gap:clamp(14px,2vw,26px)}
.rev{break-inside:avoid;margin-bottom:clamp(14px,2vw,26px);background:var(--cal);border:1px solid var(--linea);padding:clamp(22px,2.4vw,30px)}
.rev p{font-size:1rem;color:var(--cuerpo)}
.rev footer{margin-top:18px;display:flex;align-items:center;gap:11px;font-size:.88rem;font-weight:600;color:var(--tinta)}
.rev__ini{
  display:grid;place-items:center;width:32px;height:32px;flex:none;
  background:var(--cobre);color:var(--tinta);font-family:var(--f-display);font-size:1.05rem;font-weight:600;
  clip-path:polygon(100% 50%,85.4% 85.4%,50% 100%,14.6% 85.4%,0% 50%,14.6% 14.6%,50% 0%,85.4% 14.6%);
}

/* ══════════ VISITA ══════════ */
.visit{background:var(--cal)}
.visit__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,4.4vw,68px);align-items:stretch}
.status{display:inline-flex;align-items:center;gap:10px;margin-block:22px 26px;font-weight:600;font-size:.98rem;color:var(--tinta)}
.status__dot{width:9px;height:9px;border-radius:50%;background:var(--tenue);flex:none}
.status.open .status__dot{background:#2E7D4F;box-shadow:0 0 0 4px rgba(46,125,79,.16)}
.status.closed .status__dot{background:var(--carmin);box-shadow:0 0 0 4px rgba(163,36,43,.14)}
.hours{width:100%;border-collapse:collapse;margin-bottom:30px}
.hours th,.hours td{padding:11px 0;border-bottom:1px solid var(--linea);font-size:.95rem;text-align:left;font-weight:400}
.hours th{color:var(--cuerpo);width:42%}
.hours td{color:var(--tenue);font-family:var(--f-mono);font-size:.84rem;letter-spacing:.02em}
.hours tr.today th{color:var(--tinta);font-weight:700}
.hours tr.today td{color:var(--cobre-hondo);font-weight:500}
.facts{display:grid;gap:18px;margin-bottom:30px}
.facts dt{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);margin-bottom:5px}
.facts dd{color:var(--tinta);font-size:1rem}
.facts a{color:var(--cobre-hondo);font-weight:600;border-bottom:1px solid currentColor}
.visit__cta{display:flex;gap:12px;flex-wrap:wrap}
.visit__map{position:relative;min-height:clamp(340px,44vw,560px);background:var(--tinta-2);border:1px solid var(--linea)}
.visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.06)}

/* ══════════ CITA ══════════ */
.ask{background:var(--tinta);color:rgba(233,235,234,.84)}
.ask__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,74px);align-items:start}
.ask .tag{color:var(--cobre-vivo)}
.ask .h2{color:var(--cal)}
.ask .lead{color:rgba(233,235,234,.8);margin-block:20px 30px}
.ask__text .btn--fill{flex-direction:column;gap:2px}
.ask__form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cobre-vivo)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--linea-clara);border-radius:2px;
  background:var(--tinta-2);color:var(--cal);font-size:1rem;
  transition:border-color .2s var(--ease);
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cobre);outline:none}
.field input::placeholder,.field textarea::placeholder{color:rgba(233,235,234,.42)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:rgba(233,235,234,.78)}
.check input{margin-top:3px;accent-color:var(--cobre);flex:none;width:16px;height:16px}
.check a{color:var(--cobre-vivo);border-bottom:1px solid currentColor}
.ask__fine{font-size:.82rem;color:rgba(233,235,234,.56)}

/* ══════════ FOOTER ══════════ */
.foot{background:var(--tinta);color:rgba(233,235,234,.72);padding-top:clamp(58px,7vw,92px)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:clamp(28px,4vw,54px);padding-bottom:clamp(40px,5vw,64px)}
.foot__seal{width:38px;height:38px;color:var(--cobre);margin-bottom:16px}
.foot__name{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cal)}
.foot__tag{margin-top:8px;font-size:.92rem;max-width:30ch}
.foot__h{font-family:var(--f-mono);font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cobre-vivo);margin-bottom:16px}
.foot__nav{display:flex;flex-direction:column;gap:9px;font-size:.94rem}
.foot__col p{font-size:.94rem}
.foot__col p + p{margin-top:12px}
.foot a{transition:color .2s var(--ease)}
@media (hover:hover){.foot a:hover{color:var(--cobre-vivo)}}
.foot__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px;border-top:1px solid var(--linea-clara)}
.foot__legal{display:flex;gap:20px;font-size:.85rem;order:1}
.foot__copy{font-size:.85rem;color:rgba(233,235,234,.56);order:2}
.demo-aviso{
  text-align:center;padding:0 var(--gutter) 26px;max-width:64ch;margin-inline:auto;
  font-size:.76rem;line-height:1.5;color:rgba(233,235,234,.42);
}

/* ══════════ CALL-BAR MÓVIL ══════════ */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:130;background:var(--cobre);border-top:1px solid rgba(20,16,13,.2)}
.callbar__a{display:block;padding:15px 16px calc(15px + env(safe-area-inset-bottom));text-align:center;font-weight:700;color:var(--tinta);letter-spacing:.02em}

/* ══════════ LIGHTBOX ══════════ */
.lightbox img{max-width:92vw;max-height:88svh;object-fit:contain}
.lightbox__close{
  position:absolute;top:18px;right:18px;width:46px;height:46px;
  background:none;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1080px){
  .serv__grid{grid-template-columns:repeat(2,1fr)}
  .revs__grid{columns:2}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .ana__grid,.visit__grid,.ask__grid{grid-template-columns:1fr}
  .ana__shot{max-width:520px}
}
@media (max-width:860px){
  .head{inset:10px 0 auto}
  .head__pill{padding:8px 8px 8px 16px;gap:10px}
  .head__cta{display:none}
  .burger{display:block;margin-left:auto}
  .nav{
    position:fixed;inset:0;margin:0;
    flex-direction:column;align-items:center;justify-content:center;gap:26px;
    background:var(--tinta);font-size:1.5rem;font-family:var(--f-display);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
  }
  .nav.open{opacity:1;visibility:visible}
  .nav a{color:var(--cal)}

  .hero{min-height:100svh;padding-block:96px 118px}
  .hero__stage{width:min(84vw,50svh)}
  /* en movil "ANA HM" parte en dos lineas DENTRO del sello: cabe mas grande
     y deja de empujar el ancho del documento (provocaba scroll horizontal) */
  .hero__name{
    font-size:clamp(56px,min(21vw,15svh),110px);
    white-space:normal;line-height:.94;max-width:6ch;margin-inline:auto;
  }
  .hero__role{letter-spacing:.15em;max-width:24ch;margin-inline:auto;text-wrap:balance;line-height:1.7}
  .band{flex-direction:column;gap:12px}
  .band__place{padding-left:0;border-left:0;padding-top:12px;border-top:1px solid rgba(20,16,13,.28)}

  .work__grid{grid-template-columns:repeat(2,1fr)}
  .shot--tall{grid-row:span 2}
  .revs__grid{columns:1}
  .visit__map{min-height:320px}
  .foot__grid{grid-template-columns:1fr;gap:34px}
  .foot__bar{justify-content:flex-start}

  .callbar{display:block}
  body{padding-bottom:58px}
}
@media (max-width:560px){
  .serv__grid{grid-template-columns:1fr}
  .work__grid{grid-template-columns:1fr}
  .shot--tall{grid-row:span 1}
  .hero__foot .btn{width:100%}
}