/* ===== MUTT Barbershop: style.css =====
   Mobile first. Tokens at the top are the reference (same values as creative-direction.html). */

/* ===== Fonts (self-hosted) ===== */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* League Gothic: titles (only one weight, 400) */
@font-face {
  font-family: 'League Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/league-gothic-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Project tokens: single source of truth ===== */
:root{
  --color-bg:#F0F0F0;
  --color-bg-alt:#282828;
  --color-text:#282828;
  --color-text-muted:#595959;
  --color-text-on-alt:#F0F0F0;
  --color-text-muted-on-alt:#BDBDBD;
  --color-accent:#B11116;
  --color-accent-text:#F0F0F0;
  --color-accent-alt:#E9BB1E;
  --color-accent-alt-text:#282828;
  --color-border:rgba(40,40,40,.28);
  --color-border-on-alt:rgba(240,240,240,.28);
  --color-focus:#282828;
  --color-focus-on-alt:#E9BB1E;

  --font-display:"League Gothic","Arial Narrow",Impact,sans-serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --stretch-display:100%;  --stretch-body:80%;  --stretch-label:80%;
  --weight-regular:400;
  --weight-bold:700;
  --weight-display:400;   /* League Gothic has a single weight */
  --text-title:clamp(3.25rem,1.75rem + 4.8vw,6.25rem);
  --text-card:clamp(1.5rem,1rem + 1.4vw,2.5rem);   /* service card names and the WhatsApp/Instagram links; the sticker title is 1.5x */
  --text-body:1.125rem;
  --text-label:.875rem;
  --leading-title:.95;  --tracking-title:-.005em;
  --leading-body:1.6;
  --tracking-label:.18em;
  --measure:38em;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem;
  --space-section:clamp(5rem,2rem + 10vw,12rem);

  --container-max:1280px;  --gutter:1rem;
  --radius:6px;  --border-width:1px;

  --tap-target-min:44px;  --focus-ring-width:3px;  --focus-ring-offset:2px;

  --motion-fast:150ms;  --motion-base:250ms;  --motion-slow:400ms;  --motion-slower:700ms;
  --motion-ease-enter:cubic-bezier(.22,1,.36,1);

  --z-header:100; --z-toast:400;

  --header-h:4.5rem;
}
@media (min-width:768px){:root{--gutter:1.5rem;--header-h:5rem}}
@media (min-width:1024px){:root{--gutter:2rem}}
@media (prefers-reduced-motion:reduce){:root{--motion-fast:100ms;--motion-base:150ms;--motion-slow:150ms;--motion-slower:200ms}}

/* ===== Section themes: semantic colors per background ===== */
.theme-light{--fg:var(--color-text);--fg-muted:var(--color-text-muted);--rule:var(--color-border);--focus:var(--color-focus);background:var(--color-bg);color:var(--fg)}
.theme-dark{--fg:var(--color-text-on-alt);--fg-muted:var(--color-text-muted-on-alt);--rule:var(--color-border-on-alt);--focus:var(--color-focus-on-alt);background:var(--color-bg-alt);color:var(--fg)}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);font-stretch:var(--stretch-body);font-weight:var(--weight-regular);
  font-size:var(--text-body);line-height:var(--leading-body);
  background:var(--color-bg);color:var(--color-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--color-accent-alt);color:var(--color-accent-alt-text)}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus,var(--color-focus));outline-offset:var(--focus-ring-offset)}
p{text-wrap:pretty}

.container{width:100%;max-width:calc(var(--container-max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:fixed;left:var(--space-4);top:var(--space-4);z-index:var(--z-toast);padding:var(--space-3) var(--space-4);background:var(--color-accent-alt);color:var(--color-accent-alt-text);border-radius:var(--radius);font-weight:var(--weight-bold);transform:translateY(-200%)}
.skip:focus{transform:none}

/* ===== Type roles ===== */
.label{
  font-family:var(--font-body);font-stretch:var(--stretch-label);font-weight:var(--weight-regular);
  font-size:var(--text-label);line-height:1.4;letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--fg-muted);
}
.title{
  font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-display);font-synthesis:none;
  font-size:var(--text-title);line-height:var(--leading-title);letter-spacing:var(--tracking-title);
  text-transform:uppercase;text-wrap:balance;
}
.lead{font-size:var(--text-body);line-height:var(--leading-body);max-width:var(--measure)}

/* ===== Image-as-mask: brand SVGs use currentColor, so they are drawn as masks ===== */
.mask,.ico{display:block;background-color:currentColor;-webkit-mask:var(--m) var(--pos,center) / contain no-repeat;mask:var(--m) var(--pos,center) / contain no-repeat}
.m-primary{--m:url('../assets/brand/logo/logo-primario.svg')}
.m-pole{--m:url('../assets/brand/icons/icone-barber-pole.svg');aspect-ratio:65.63/173.33}
.m-bandeira{--m:url('../assets/brand/icons/icone-bandeira.svg');aspect-ratio:209.08/177.13}

/* ===== Grain: print texture over dark areas ===== */
.grain{position:relative;isolation:isolate;clip-path:inset(0)}
/* fixed to the screen (does not scroll with the page); clip-path keeps it inside the dark section; content sits above it */
.grain::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url('../assets/brand/textura-grao.webp') 0 0/480px 480px;opacity:.5}

/* ===== Buttons and links ===== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:calc(var(--tap-target-min) + var(--space-1));padding:0 var(--space-5);
  border:var(--border-width) solid transparent;border-radius:var(--radius);
  font-family:var(--font-body);font-stretch:var(--stretch-label);font-weight:var(--weight-bold);
  font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none;text-align:center;
  cursor:pointer;
  transition:background-color var(--motion-base) linear,color var(--motion-base) linear,border-color var(--motion-base) linear,transform var(--motion-fast) linear;
}
.btn:active{transform:scale(.97)}
/* primary: red on light, yellow on dark; hover inverts */
.btn-primary{background:var(--color-accent);color:var(--color-accent-text);border-color:var(--color-accent)}
.btn-primary:hover{background:var(--color-bg-alt);color:var(--color-text-on-alt);border-color:var(--color-bg-alt)}
.theme-dark .btn-primary,.btn-primary.on-dark{background:var(--color-accent-alt);color:var(--color-accent-alt-text);border-color:var(--color-accent-alt)}
.theme-dark .btn-primary:hover,.btn-primary.on-dark:hover{background:var(--color-text-on-alt);color:var(--color-bg-alt);border-color:var(--color-text-on-alt)}
/* secondary: outline */
.btn-line{background:transparent;color:var(--fg);border-color:currentColor}
.btn-line:hover{background:var(--fg);color:var(--color-bg)}
.theme-dark .btn-line:hover{color:var(--color-bg-alt)}
/* text that rolls on the primary button */
.btn-mask{display:block;overflow:hidden;height:1.4em;line-height:1.4}
.btn-mask>span{display:block;transition:transform var(--motion-slow) var(--motion-ease-enter)}
.btn-mask>span::after{content:attr(data-t);display:block}
@media (hover:hover){.btn:hover .btn-mask>span{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.btn-mask>span{transition:none}.btn:hover .btn-mask>span{transform:none}}

/* link with a sliding underline */
.link{position:relative;display:inline-flex;align-items:center;min-height:var(--tap-target-min);text-decoration:none}
.link::before,.link::after{content:"";position:absolute;left:0;right:0;bottom:var(--space-2);height:var(--border-width);background:currentColor}
.link::before{opacity:.35}
.link::after{transform:scaleX(0);transform-origin:right;transition:transform var(--motion-slow) var(--motion-ease-enter)}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1);transform-origin:left}
@media (prefers-reduced-motion:reduce){.link::after{transition:none}}
/* street and number inside the address: a link that opens Google Maps; the hit area grows without moving the text */
.link-address{display:inline-block;min-height:0;padding-block:var(--space-2);margin-block:calc(var(--space-2) * -1);vertical-align:top}
.link-address::before,.link-address::after{bottom:var(--space-3)}

/* ===== Header (fixed): appears only after the opening logo leaves the screen ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);height:var(--header-h);background:var(--color-bg-alt);color:var(--color-text-on-alt);border-bottom:var(--border-width) solid var(--color-border-on-alt);--focus:var(--color-focus-on-alt)}
.js .site-header{transform:translateY(-100%);visibility:hidden;transition:transform var(--motion-slow) var(--motion-ease-enter),visibility 0s linear var(--motion-slow)}
.js .site-header.is-visible{transform:none;visibility:visible;transition:transform var(--motion-slow) var(--motion-ease-enter),visibility 0s}
@media (prefers-reduced-motion:reduce){
  .js .site-header{transform:none;opacity:0;transition:opacity var(--motion-base) linear,visibility 0s linear var(--motion-base)}
  .js .site-header.is-visible{opacity:1;transition:opacity var(--motion-base) linear,visibility 0s}
}
.site-header__in{display:flex;align-items:center;gap:var(--space-3);height:100%}
.site-header .btn{flex:none;margin-left:auto;min-height:3rem;padding:0 var(--space-5);letter-spacing:var(--tracking-label)}
.brand{display:flex;align-items:center;height:var(--tap-target-min);width:4rem;flex:none}
.brand .mask{width:100%;height:3rem}
.site-nav{display:none}
.site-nav ul{display:flex;gap:var(--space-5)}
.link-label{font-family:var(--font-body);font-stretch:var(--stretch-label);font-weight:var(--weight-bold);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
@media (max-width:359px){.brand{display:none}.site-header .btn{flex:1}}
@media (min-width:640px){
  .brand{width:5rem}
  .brand .mask{height:3.75rem}
  .site-header__in{gap:var(--space-5)}
}
@media (min-width:900px){
  .site-nav{display:block;margin-left:auto}
  .site-header .btn{margin-left:0}
}

/* ===== 1. Opening: the logo flows between shapes; text beside it on wide screens ===== */
.opening{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.opening__in{position:relative;z-index:2;flex:1;display:grid;align-content:center;gap:var(--space-6);padding-block:var(--space-6)}
.opening__home{display:block;min-width:0;color:inherit;border-radius:var(--radius)}
.opening__logo{display:block;width:100%;aspect-ratio:7/5;color:var(--fg)}
.opening__text{display:grid;gap:var(--space-5);justify-items:start}
.opening__text .lead{max-width:24em}
/* two columns on wide screens and whenever the screen is landscape (a tall stacked logo pushes the text off a short screen);
   a portrait screen narrower than 781px (phone, tablet standing up) keeps one column with the logo across the full width */
@media (min-width:781px), (orientation:landscape) and (min-width:560px){
  .opening__in{grid-template-columns:7fr 5fr;gap:var(--space-6);align-items:center}
  .opening__logo{aspect-ratio:auto;height:min(78dvh,46rem)}
}
@media (min-width:900px){
  .opening__in{gap:var(--space-8)}
}

/* title that enters line by line */
.tl-m{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.22em .08em;margin-block:-.22em 0} /* room for accents (Ã, Í) inside the clipping mask */
.tl-w{display:inline-block}
/* a line break written in a title (br.br-m) only applies on phones from 360px to 639px; other screens wrap on their own */
.br-m{display:none}
@media (min-width:360px) and (max-width:639px){.br-m{display:inline}} /* under 360px the first line would not fit, so the title wraps on its own */
.js .tl-w{transform:translateY(108%);transition:transform 1s var(--motion-ease-enter) calc(var(--l,0)*160ms)}
.js .tl-on .tl-w{transform:none}
@media (prefers-reduced-motion:reduce){.js .tl-w{transform:none;transition:none}}

/* ===== 2. Barbers: a red strip with the title running by, then two framed black-and-white portraits mirrored around the page center ===== */
.barbers{padding-block:0}
/* strip: decorative copy of the heading (the real h2 is .sr-only), light text on red; it stops under reduced motion */
.strip{overflow:hidden;overflow:clip;background:var(--color-accent);color:var(--color-accent-text);padding-block:var(--space-4)}
.strip__track{display:flex;width:max-content}
.strip__group{display:flex;flex:none;align-items:center;gap:var(--space-5);padding-right:var(--space-5)}
.strip__group span{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-display);font-size:var(--text-card);line-height:1;letter-spacing:var(--tracking-title);text-transform:uppercase;white-space:nowrap}
.strip__group i{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
@media (prefers-reduced-motion:no-preference){.strip__track{animation:strip-run 90s linear infinite}}
@keyframes strip-run{to{transform:translateX(-50%)}}
.strip:hover .strip__track,.strip:focus-within .strip__track,.strip.is-paused .strip__track{animation-play-state:paused} /* WCAG 2.2.2: the moving text can be paused */
@media (prefers-reduced-motion:reduce){.strip__group+.strip__group{display:none}.strip__track{width:auto}}

/* each name is huge, starts at the page margin and sticks out of the photo by --out (measured so the cut falls between letters).
   It is drawn twice (red on the page, light on the photo, clipped by .barber__cover) so there is never red text over the dark image;
   the light copy is aria-hidden. The names slide in after the photo: Pedro from the left, Phiellipe from the right. */
.barbers__list{display:grid;gap:var(--space-7);padding-block:var(--space-8) 0}
.barber{--out:calc(var(--text-title) * .68);position:relative;margin:0}
.barber__name{position:absolute;z-index:0;top:calc(32% - var(--text-title) * .4);left:0;width:max-content;color:var(--color-accent);font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-display);font-size:var(--text-title);line-height:.8;letter-spacing:var(--tracking-title);text-transform:uppercase;white-space:nowrap}
.barber__photo{position:relative;z-index:1;width:calc(100% - var(--out));margin-left:auto;background:var(--color-bg-alt);border-radius:var(--radius);overflow:hidden}
.barber img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%} /* the portraits are already black and white in the file (no CSS filter: Safari blinked while repainting it) */
.barber__cover{position:absolute;z-index:2;top:0;bottom:0;right:0;width:calc(100% - var(--out));overflow:hidden;overflow:clip;pointer-events:none;isolation:isolate;clip-path:inset(0)} /* clip-path (not only overflow) so the light name, which is sliding in on its own layer, is never drawn outside the photo while it moves */
.barber__name--on{z-index:auto;left:calc(var(--out) * -1);color:var(--color-text-on-alt)}
.barbers__list>li:nth-child(even) .barber__name{top:calc(68% - var(--text-title) * .4);left:auto;right:0;text-align:right}
.barbers__list>li:nth-child(even) .barber__photo{margin-left:0;margin-right:auto}
.barbers__list>li:nth-child(even) .barber__cover{right:auto;left:0}
.barbers__list>li:nth-child(even) .barber__name--on{left:auto;right:calc(var(--out) * -1)}
.barbers{overflow:hidden;overflow:clip}
.js .barber[data-reveal].is-in{clip-path:inset(-8px -200px)}
.js .barber__name{opacity:0;transform:translateX(calc(var(--text-title) * -.6));transition:opacity 500ms linear calc(var(--d,0ms) + 1200ms),transform 900ms var(--motion-ease-enter) calc(var(--d,0ms) + 1200ms)}
.js .barbers__list>li:nth-child(even) .barber__name{transform:translateX(calc(var(--text-title) * .6));transition-delay:calc(var(--d,0ms) + 1400ms)} /* Phiellipe comes in a little after Pedro */
.js .barbers__list>li .barber.is-in .barber__name{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .barber__name,.js .barbers__list>li:nth-child(even) .barber__name{opacity:1;transform:none;transition:none}}
@media (min-width:640px){
  .barbers__list{grid-template-columns:repeat(2,1fr);gap:var(--space-6);align-items:start}
  .barber img{aspect-ratio:1/1}
}

/* ===== 3. Services: cards (names only) rise one by one; the home-service sticker is pressed on in the middle ===== */
.services{position:relative;z-index:1}
.services__stage{position:relative;z-index:1;padding-block:var(--space-section) 0}
.services .title{margin-bottom:var(--space-6)}
.services__body{position:relative}
.services__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
.svc{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5);min-width:0;min-height:8rem;
  padding:var(--space-4);
  background:var(--color-bg-alt);color:var(--color-text-on-alt);
  border:var(--border-width) solid var(--color-bg-alt);border-radius:var(--radius);
  --svc-muted:var(--color-text-muted-on-alt);
}
.svc .label{color:var(--svc-muted)}
.svc__name{font-weight:var(--weight-regular);font-size:var(--text-card);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}

/* the sticker: red, a little crooked */
.tag{
  position:relative;z-index:2;overflow:hidden;
  display:grid;gap:var(--space-1);justify-items:start;width:fit-content;
  margin:calc(var(--space-6) * -1) auto 0;padding:var(--space-4) var(--space-5);
  background:var(--color-accent);color:var(--color-accent-text);border-radius:var(--radius);
  transform:rotate(-4deg);
  --fg-muted:var(--color-accent-text);--focus:var(--color-accent-text);
}
.tag::before{content:"";position:absolute;inset:var(--space-2);border:var(--border-width) solid color-mix(in srgb,var(--color-accent-text) 45%,transparent);border-radius:var(--radius);pointer-events:none}
.tag .label{color:var(--color-accent-text)}
.tag .title{font-size:calc(var(--text-card) * 1.5);margin:0}
.tag__art{position:absolute;right:-12%;top:-30%;width:62%;aspect-ratio:209.08/177.13;opacity:.16;transform:rotate(10deg)}
.tag>*:not(.tag__art){position:relative}
@media (max-width:359px){.services__grid{grid-template-columns:1fr}}
@media (min-width:640px){.svc{padding:var(--space-5)}.tag{padding:var(--space-5) var(--space-6)}}

/* with script (and no reduced motion), at any width: a pinned stage; cards rise one by one, then the sticker is pressed on (see main.js) */
.services.is-scroll{height:220dvh;padding:0}
.services.is-scroll .services__stage{position:sticky;top:0;overflow:hidden;padding-block:calc(var(--header-h) + var(--space-5)) 0;display:flex}
.services.is-scroll .container{display:flex;flex-direction:column;justify-content:center}
.services.is-scroll .services__grid{grid-auto-rows:clamp(7.5rem,calc((100dvh - 16rem) / 3),11rem)}
.services.is-scroll .svc{min-height:0;will-change:transform}
.services.is-scroll .tag{will-change:transform}
/* the sticker sits in the middle of the grid, over every card */
.services.is-scroll .tag{position:absolute;top:50%;left:50%;translate:-50% -50%;margin:0;width:max-content}
/* while the section is pinned the cards fill the whole screen height (equal rows: 3 on phones, 2 on wide screens), so nothing is left empty below them;
   the bottom space (32px here + 32px on the divider) adds up to the same 64px on the other side of the divider */
.services.is-scroll .services__stage{min-height:100dvh;padding-bottom:var(--space-6)}
.services.is-scroll .container{flex:1;justify-content:flex-start}
.services.is-scroll .services__body{flex:1;display:flex;min-height:0}
.services.is-scroll .services__grid{flex:1;grid-template-rows:repeat(3,1fr);grid-auto-rows:auto}
.services.is-scroll+.divider{padding-top:var(--space-6)}

@media (min-width:900px){
  .services__grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(10rem,28dvh,15rem);gap:var(--space-3)}
  .services.is-scroll .services__grid{grid-template-rows:repeat(2,1fr);grid-auto-rows:auto}
  /* first row: number and name together at the top */
  .svc:nth-child(-n+3){justify-content:flex-start;gap:var(--space-3)}
  /* second row: number and name together at the bottom, so the sticker in the middle stays clear */
  .svc:nth-child(n+4){justify-content:flex-end;gap:var(--space-3)}
  .svc:nth-child(1){grid-column:span 5}
  .svc:nth-child(2){grid-column:span 4}
  .svc:nth-child(3){grid-column:span 3}
  .svc:nth-child(4){grid-column:span 3}
  .svc:nth-child(5){grid-column:span 4}
  .svc:nth-child(6){grid-column:span 5}
  .tag{position:absolute;top:50%;left:50%;translate:-50% -50%;margin:0}
}

/* ===== 5. Contact ===== */
.contact{position:relative;z-index:1;overflow:hidden;overflow:clip;padding-block:var(--space-section)}
.contact>.container{position:relative;z-index:1}
.contact__grid{display:grid;gap:var(--space-7);margin-top:var(--space-6)}
.col{display:grid;gap:var(--space-6);align-content:start}
.col>.btn{width:auto;justify-self:start}
@media (min-width:768px){.col{align-content:center}}
.col>div{display:grid;gap:var(--space-3);justify-items:start;align-content:start} /* without align-content the taller cell stretched its first row (the label) and the gap changed */
/* each block is one line: the hours are one row with a dot between the three parts */
.hours{display:flex;flex-wrap:wrap;gap:var(--space-1) 0;font-variant-numeric:tabular-nums}
.hours div{display:flex;gap:var(--space-2)}
.hours div:not(:last-child)::after{content:"·" / "";margin-inline:var(--space-3);color:var(--fg-muted)}
.hours dt{color:var(--fg-muted)}
/* where the three parts do not fit on one line, each goes on its own line (no dots left hanging at the end of a line) */
@media (max-width:1279px){.hours{flex-direction:column;gap:var(--space-1)}.hours div:not(:last-child)::after{content:none}}
.channels{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center}
.channels p{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
/* the stamp: a big watermark that bleeds off the right edge */
.seal{position:absolute;z-index:0;right:-2rem;top:74%;width:28rem;max-width:none;height:auto;opacity:.07;--reveal-to:.07;--seal-rot:-7deg;--seal-s:1;transform:translateY(-50%) rotate(var(--seal-rot)) scale(var(--seal-s));pointer-events:none}
@media (max-width:767px){.seal{width:18rem;right:-1.5rem;top:auto;bottom:var(--space-6);transform:rotate(var(--seal-rot)) scale(var(--seal-s))}}
/* divider between services and where to find us: lines across the whole width with the barber pole in the middle */
.divider{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-5);padding-top:var(--space-8);background:var(--color-bg);color:var(--color-text)}
.divider__line{flex:1;height:var(--border-width);background:var(--color-border)}
.divider__pole{flex:none;width:1.5rem;opacity:.9}
@media (min-width:768px){.divider__pole{width:2rem}}
.divider+.contact{padding-top:var(--space-8)}
/* map: loads only after a click (Google receives the IP and may set cookies) */
.map{position:relative;min-height:18rem;border-radius:var(--radius);overflow:hidden;background:var(--color-bg-alt)}
.map__facade{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-4);padding:var(--space-6)}
.map__facade p:not(.label){max-width:26em}
.map__facade a{text-underline-offset:3px}
.map__js,.map__load{display:none}
.js .map__js{display:block}
.js .map__load{display:inline-flex}
.js .map__nojs{display:none}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
@media (min-width:768px){.contact__grid{grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:stretch}.map{min-height:20rem}}

/* ===== 6. Final + footer ===== */
.end{position:relative;z-index:1;padding-block:var(--space-6)}
.end .container{position:relative;z-index:2;display:grid;gap:var(--space-8)}
.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--space-5)}
.footer__main{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-5)}
.footer p{flex:0 0 100%;color:var(--fg-muted)}
@media (min-width:768px){.footer p{flex:0 1 auto}} /* the links stay next to the copyright; the credit goes to the right */
.footer .link{min-height:var(--tap-target-min)}

/* ===== Cookie notice ===== */
.cookie{display:none}
.js .cookie.is-open{display:block;position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:var(--z-toast);max-width:44rem;padding:var(--space-5);border:var(--border-width) solid var(--color-border-on-alt);border-radius:var(--radius);background:var(--color-bg-alt);color:var(--color-text-on-alt);--focus:var(--color-focus-on-alt);--fg:var(--color-text-on-alt)}
.cookie p{font-size:var(--text-body)}
.cookie p a{text-underline-offset:3px}
.cookie__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.cookie .btn{flex:none}
.cookie .btn-line:hover{background:var(--color-text-on-alt);color:var(--color-bg-alt)}
@media (min-width:768px){.js .cookie.is-open{left:var(--gutter);right:auto}}


/* ===== Legal and error pages ===== */
.legal{padding-block:calc(var(--header-h) + var(--space-8)) var(--space-section)}
.legal__in{display:grid;gap:var(--space-5);justify-items:start}
.legal__list{display:grid;width:100%;max-width:var(--measure);margin-top:var(--space-6);list-style:none}
.legal__list li{display:grid;gap:var(--space-2);padding-block:var(--space-5);border-top:var(--border-width) solid var(--rule)}
.legal__list .btn{justify-self:start;margin-top:var(--space-2)}
.legal__list li:last-child{border-bottom:var(--border-width) solid var(--rule)}
.legal__h{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-display);font-synthesis:none;font-size:var(--text-card);line-height:var(--leading-title);text-transform:uppercase}
.notfound{display:grid;align-content:center}
/* 404: short page, so the footer is pushed to the bottom of the screen */
.page-404{min-height:100dvh;display:flex;flex-direction:column}
.page-404 main{flex:1;display:grid}

/* ===== Entrance on scroll: dry and precise, only with JavaScript. Text blocks come down like a curtain while rising a little;
   buttons rise in like everything else, the map is a curtain from the top, the stamp is pressed on. Titles use the line-by-line rise.
   The hidden state keeps 2% of the element visible: browsers report an element as not intersecting when it is fully clipped, so the observer would never fire. ===== */
.js [data-reveal]{opacity:0;transform:translateY(var(--space-3));clip-path:inset(0 -8px 98% -8px);transition:opacity 500ms linear var(--d,0ms),transform 800ms var(--motion-ease-enter) var(--d,0ms),clip-path 800ms var(--motion-ease-enter) var(--d,0ms)}
.js [data-reveal].is-in{opacity:var(--reveal-to,1);transform:none;clip-path:inset(-8px)}
/* every entrance rises from the bottom: while hidden the element is invisible (opacity 0) but keeps a thin slice at the top, so the scroll observer still sees it
   (a slice at the bottom would never be seen by elements at the end of the page, like the footer); when it enters, a keyframe animation opens the clip from the bottom edge upward */
/* default entrance and curtain: while hidden the element is simply invisible (no clip, no transition, so the two can never fight on a phone);
   when it enters, only a keyframe animation runs, opening from the bottom edge upward */
.js [data-reveal]:not([data-reveal="stamp"]):not([data-reveal="divider"]){transform:none;clip-path:none;transition:none}
.js .btn[data-reveal]:not([data-reveal="stamp"]):not([data-reveal="divider"]){transition:background-color var(--motion-base) linear,color var(--motion-base) linear,border-color var(--motion-base) linear}
.js [data-reveal]:not([data-reveal="stamp"]):not([data-reveal="divider"]).is-in{animation:reveal-up 1000ms var(--motion-ease-enter) var(--d,0ms) backwards}
.js [data-reveal="curtain"].is-in{animation-name:reveal-curtain;animation-duration:1300ms}
@keyframes reveal-up{from{opacity:0;transform:translateY(var(--space-3));clip-path:inset(98% -8px 0 -8px)}to{opacity:1;transform:none;clip-path:inset(-8px)}}
@keyframes reveal-curtain{from{opacity:0;clip-path:inset(98% 0 0 0)}25%{opacity:1}to{opacity:1;clip-path:inset(-8px -200px)}}
/* the stamp lands bigger and crooked, then settles */
.js [data-reveal="stamp"]{clip-path:none;--seal-s:1.35;--seal-rot:-2deg;transform:translateY(-50%) rotate(var(--seal-rot)) scale(var(--seal-s));transition:opacity 700ms linear var(--d,0ms),transform 1100ms var(--motion-ease-enter) var(--d,0ms)}
.js [data-reveal="stamp"].is-in{--seal-s:1;--seal-rot:-7deg;transform:translateY(-50%) rotate(var(--seal-rot)) scale(var(--seal-s))}
@media (max-width:767px){.js [data-reveal="stamp"],.js [data-reveal="stamp"].is-in{transform:rotate(var(--seal-rot)) scale(var(--seal-s))}}
@media (prefers-reduced-motion:reduce){.js [data-reveal]:not([data-reveal="stamp"]){transform:none;clip-path:none;animation:none}.js [data-reveal="stamp"],.js [data-reveal="stamp"].is-in{--seal-s:1;--seal-rot:-7deg}.js [data-reveal="curtain"],.js [data-reveal="curtain"].is-in{clip-path:none}}
/* divider: the two lines grow from the pole to the edges, then the pole shows */
.js .divider[data-reveal]{opacity:1;transform:none}
.js .divider__line{transform:scaleX(0);transition:transform 900ms var(--motion-ease-enter)}
.js .divider__line:first-child{transform-origin:right}
.js .divider__line:last-child{transform-origin:left}
.js .divider__pole{opacity:0;transition:opacity var(--motion-slower) var(--motion-ease-enter) 200ms}
.js .divider.is-in .divider__line{transform:none}
.js .divider.is-in .divider__pole{opacity:.9}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{transform:none}.js .divider__line{transform:none}}