/* Phone-specific editorial layout. Desktop CSS remains untouched. */
@media (max-width:760px) {
  :root { --gutter:24px; --mobile-header:76px; }
  html { scroll-padding-top:92px; }
  body { text-size-adjust:100%; -webkit-text-size-adjust:100%; }

  /* One quiet brand row; the existing bottom booking bar stays in reach. */
  .site-header { height:var(--mobile-header); padding:0 16px; gap:12px; }
  .site-header .wordmark.brand-logo { width:auto; min-width:0; display:flex; align-items:center; gap:11px; }
  .site-header .wordmark.brand-logo>.brand-image { width:44px; height:44px; flex:0 0 44px; }
  .site-header .wordmark.brand-logo .brand-full-name { margin:0; font-size:10.5px; line-height:1.7; letter-spacing:.015em; }
  .site-header .brand-full-name>span:last-child { letter-spacing:.08em; }
  .site-header .header-book { display:none; }
  .site-header .menu-toggle { width:44px; height:44px; margin-left:auto; padding:13px 10px; flex:0 0 44px; }
  .mobile-nav { top:var(--mobile-header); padding:24px var(--gutter) calc(35px + env(safe-area-inset-bottom)); }
  .mobile-nav>.eyebrow { margin-bottom:14px; font-size:11px; }
  .mobile-nav>a { min-height:66px; padding:15px 0; font-size:31px; gap:16px; }
  .mobile-nav a>span { font-size:12px; line-height:1.7; text-align:right; }
  .mobile-nav .nav-phone { font-size:25px; margin-top:16px; }
  .mobile-nav .nav-phone>span { font-size:11px; }

  /* The salon photograph is uncrowded; the headline is readable on paper. */
  .hero.grooming-hero { height:auto; min-height:0; max-height:none; color:var(--ink); background:var(--paper); overflow:visible; }
  .hero .hero-photo { position:relative; inset:auto; height:clamp(216px,67vw,360px); object-position:center 57%; animation:none; }
  .hero .hero-shade { inset:0 0 auto; height:clamp(216px,67vw,360px); background:linear-gradient(180deg,#0009,transparent 45%); pointer-events:none; }
  .hero .hero-topline { top:19px; left:var(--gutter); right:var(--gutter); color:#fff; font-size:10px; line-height:1.5; letter-spacing:.08em; opacity:1; }
  .grooming-hero .hero-content { position:relative; inset:auto; max-width:none; transform:none; padding:25px var(--gutter) 28px; animation:none; }
  .grooming-hero .hero-kicker { font-size:10px; line-height:1.6; letter-spacing:.12em; margin-bottom:15px; color:var(--muted); }
  .grooming-hero .grooming-title { font-size:clamp(49px,14.5vw,80px); line-height:1.02; letter-spacing:-.04em; }
  .grooming-title .title-prefix { font-size:.37em; letter-spacing:.035em; margin-right:.15em; }
  .grooming-hero .grooming-hero-copy { font-size:16px; line-height:1.9; letter-spacing:0; margin-top:20px; }
  .grooming-hero .grooming-hero-copy>span { display:block; text-wrap:pretty; }
  .grooming-hero .hero-cta { display:flex; width:100%; min-height:52px; margin-top:22px; padding:12px 0; justify-content:space-between; gap:18px; font-size:13px; letter-spacing:.015em; border-color:var(--ink); }
  .hero .hero-bottom { position:static; padding:0 var(--gutter) 20px; gap:12px; color:var(--muted); font-size:9px; letter-spacing:.03em; }
  .hero .hero-bottom>span { display:block; line-height:1.7; }
  .hero .scroll-link { display:none; }
  .intro-strip { flex-direction:column; align-items:flex-start; gap:6px; padding:17px var(--gutter); border-top:1px solid var(--line); }
  .intro-strip>span:first-child { font-size:10px; letter-spacing:.04em; }
  .intro-strip>span:last-child { width:100%; justify-content:space-between; font-size:11px; }
  .intro-strip .strip-divider { display:none; }
  .intro-strip a { display:inline-flex; align-items:center; min-height:44px; font-size:10px; letter-spacing:.015em; }
  .intro-strip a>span { margin-left:8px; }

  /* Space between ideas, rather than a desktop composition squeezed down. */
  .section { padding:52px var(--gutter); }
  .eyebrow { font-size:11px; line-height:1.6; letter-spacing:.12em; }
  .tiny { font-size:10px; line-height:1.6; letter-spacing:.04em; }
  .section-label { align-items:flex-start; gap:8px; margin-bottom:26px; }
  .section-label .tiny { width:100%; }
  .display { font-size:clamp(36px,10.2vw,57px); line-height:1.12; }
  .section-heading { gap:17px; margin-bottom:28px; }
  .section-heading>p { font-size:14px; line-height:1.9; }
  .text-link { min-height:48px; font-size:13px; line-height:1.8; gap:20px; }
  .grooming-about .about-grid { gap:26px; }
  .grooming-about .concept-type { font-size:clamp(47px,12.8vw,67px); line-height:1; }
  .concept-type>.concept-amp { font-size:.5em; line-height:1.15; margin-left:.4em; }
  .concept-type>em { margin-left:.13em; }
  .grooming-about .about-copy { padding:0; border:0; }
  .grooming-about .about-copy h3 { font-size:24px; line-height:1.65; margin-bottom:20px; }
  .grooming-about .about-copy p { font-size:14px; line-height:2; letter-spacing:0; margin-top:17px; }
  .about .text-link { width:100%; margin-top:19px; min-width:0; }

  .grooming-menu { gap:28px; padding-top:52px; padding-bottom:52px; }
  .grooming-menu .menu-intro .display { font-size:46px; }
  .grooming-menu .menu-intro>p { font-size:14px; line-height:1.95; margin-top:20px; }
  .grooming-menu .menu-intro .text-link { min-height:48px; width:100%; margin-top:18px; font-size:13px; }
  .grooming-all-menu { margin-top:8px; min-height:44px; padding:10px 0; font-size:12px; }
  .grooming-menu .menu-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:24px 0; }
  .grooming-menu .menu-row>div { min-width:0; }
  .grooming-menu .menu-row h3,.grooming-menu .menu-row-featured h3 { font-size:clamp(22px,6.3vw,30px); line-height:1.2; }
  .grooming-menu .menu-row .price,.grooming-menu .menu-row-featured .price { font-size:27px; }
  .grooming-menu .menu-row p { font-size:13px; line-height:1.8; margin-top:9px; max-width:none; }
  .menu-row-featured .eyebrow { font-size:10px; margin-bottom:12px; }
  .service-condition { padding:18px; margin-top:24px; border-left:2px solid #a49c87; background:#efefe8; }
  .service-condition,.service-condition strong,.grooming-menu .menu-note,.menu-note { font-size:12px; line-height:1.95; }
  .service-condition strong { margin-bottom:9px; }
  .grooming-menu .menu-note { margin-top:18px; }

  /* Large, consistent photographs with a visible hint of the next style. */
  .mobile-gallery-hint { display:flex; align-items:center; justify-content:space-between; gap:16px; font:11px/1.7 system-ui,'Hiragino Kaku Gothic ProN',sans-serif; color:var(--muted); margin-bottom:15px; }
  .mobile-gallery-hint>span { font-size:20px; }
  .style-grid { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:88%; gap:16px; overflow-x:auto; padding:4px 0 16px; scroll-snap-type:x proximity; scroll-padding-inline:0; overscroll-behavior-x:contain; scrollbar-width:thin; }
  .style-card,.style-first,.style-card:nth-child(2),.style-third { grid-column:auto; max-width:none; margin:0; width:100%; scroll-snap-align:start; }
  .style-card:focus-visible { outline-offset:-3px; }
  .style-first .style-image img,.style-image img,.style-third .style-image img { aspect-ratio:1/1; height:auto; object-position:center; }
  .style-caption,.style-card:nth-child(n+2) .style-caption { font-size:12px; line-height:1.7; margin-top:12px; }
  .style-caption>span:last-child { display:block; font-size:11px; margin-left:10px; }
  .zoom { width:34px; height:34px; right:12px; bottom:12px; }
  .collection-bottom { gap:18px; margin-top:20px; }
  .collection-bottom p { font-size:12px; line-height:1.9; }
  .collection-bottom .text-link { min-width:0; width:100%; font-size:13px; }
  .salon-band { height:365px; }
  .salon-band-content { inset:16px; padding:18px; }
  .salon-band .display { font-size:38px; }
  .salon-band p { font-size:13px; line-height:1.9; letter-spacing:0; }
  .salon-band .outline-link { min-height:48px; font-size:11px; gap:20px; margin-top:23px; }
  .salon-band .eyebrow { font-size:10px; }
  .stylist-section { gap:24px; }
  .stylist-copy { padding:0; }
  .stylist-copy p { font-size:14px; line-height:2; }
  .stylist-copy .text-link { width:100%; min-width:0; font-size:13px; }

  /* A single clear reading column for the practical details. */
  .access-grid { gap:28px; margin-top:25px; }
  .access-photo img,.access-page-body .access-photo img { aspect-ratio:3/2; height:auto; object-position:center; }
  .access-photo>span { left:17px; bottom:16px; font-size:10px; }
  .access-details>h3 { font-size:17px; }
  .access-details>h2 { font-size:28px; margin-top:13px; }
  .access-details dl { margin-top:25px; }
  .access-details dl>div { grid-template-columns:1fr; gap:9px; padding:18px 0; }
  .access-details dt { font-size:10px; letter-spacing:.12em; padding:0; color:var(--muted); }
  .access-details dd { font-size:15px; line-height:1.85; }
  .access-details dd .secondary { font-size:12px; line-height:1.9; margin-top:9px; }
  .phone { display:inline-flex; align-items:center; min-height:44px; font-size:30px; }
  .access-details .button { max-width:none; width:100%; }
  .access-note { font-size:13px; line-height:1.9; }
  .copy-address { min-height:48px; font-size:13px; }
  .copy-status { font-size:12px; line-height:1.7; }

  .page-title { padding-top:22px; padding-bottom:32px; }
  .breadcrumbs { margin-bottom:25px; font-size:10px; gap:12px; }
  .breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; }
  .page-title-grid { gap:21px; }
  .page-title .display { font-size:clamp(43px,12vw,64px); line-height:1.08; margin-top:14px; }
  .page-title-grid>p { padding:0; font-size:17px; line-height:1.8; }
  .page-title-grid>p>span { font-size:12px; line-height:1.9; margin-top:12px; }
  .menu-photo-banner { height:clamp(210px,64vw,330px); }
  .menu-photo-banner img { object-position:center; }
  .menu-photo-banner>span { font-size:10px; letter-spacing:.08em; }
  .full-menu { padding-top:40px; }
  .menu-categories { grid-template-columns:1fr 1fr; margin-bottom:32px; }
  .menu-categories a { font-size:12px; padding:15px; min-height:50px; }
  .menu-categories a:first-child { grid-column:1/-1; border-bottom:1px solid var(--line); }
  .menu-categories a:nth-child(2) { border-left:0; }
  .menu-category { gap:20px; margin-top:40px; scroll-margin-top:92px; }
  .category-title h2 { font-size:36px; line-height:1.2; margin:12px 0; }
  .category-title>p { font-size:14px; line-height:1.9; }
  .detail-menu-row { display:grid; grid-template-columns:minmax(0,1fr); gap:11px; padding:21px 0; }
  .detail-menu-row h3 { font-size:14px; line-height:1.85; }
  .detail-menu-row h3 small { font-size:12px; line-height:1.9; margin-top:7px; }
  .detail-menu-row>span { justify-self:end; font-size:28px; line-height:1.1; }
  .detail-menu-featured { padding:20px 16px; }
  .category-note,.menu-disclaimer p { font-size:12px; line-height:2; }
  .grooming-note { margin:28px 0 0; padding:22px 20px; }
  .grooming-note h3 { font-size:22px; line-height:1.6; margin-top:14px; }
  .grooming-note p { font-size:13px; line-height:1.95; }
  .grooming-note .text-link { font-size:12px; line-height:1.8; }
  .menu-disclaimer { margin-top:38px; gap:22px; }
  .button,.menu-disclaimer .button,.staff-bottom .button { min-height:56px; font-size:12px; line-height:1.7; padding:16px 18px; gap:18px; }

  .team-photo { padding:0 var(--gutter); }
  .team-photo img { aspect-ratio:1567/1045; height:auto; max-height:none; object-position:center; }
  .team-photo figcaption { font-size:9px; line-height:1.7; gap:14px; }
  .staff-list-section { padding-top:40px; }
  .staff-list-intro { gap:19px; margin-bottom:28px; }
  .staff-list-intro p { font-size:14px; line-height:1.9; }
  .staff-grooming-note { font-size:13px; line-height:1.95; padding:18px; }
  .staff-grooming-note a { display:flex; align-items:center; min-height:44px; padding:6px 0; }
  .staff-row { grid-template-columns:27px minmax(0,1fr); gap:18px; padding:28px 0; }
  .staff-row[id] { scroll-margin-top:94px; }
  .staff-index { font-size:24px; }
  .staff-name h2 { font-size:25px; }
  .staff-name .roman { font-size:11px; margin-top:8px; }
  .staff-role { font-size:12px; line-height:1.8; margin-top:10px; }
  .staff-info { grid-column:1/-1; margin-top:0; }
  .staff-info p { font-size:14px; line-height:1.95; }
  .staff-specialties>span { font-size:11px; margin-bottom:7px; }
  .staff-info .text-link { width:100%; min-width:0; font-size:13px; min-height:48px; }
  .staff-info .profile-link { font-size:12px; min-height:44px; margin-top:9px; }
  .staff-warning { font-size:12px; line-height:1.9; padding:14px; }
  .staff-bottom p { font-size:12px; line-height:1.95; }
  .direction-list { gap:25px; }
  .direction-list li { grid-template-columns:28px minmax(0,1fr); gap:16px; padding-top:20px; }
  .direction-list li>span { font-size:25px; }
  .direction-list h3 { font-size:15px; line-height:1.8; }
  .direction-list p,.directions-note { font-size:13px; line-height:1.95; }
  .salon-detail-banner { height:320px; }
  .salon-detail-banner .display { font-size:40px; }

  .reserve-section { padding:50px var(--gutter); }
  .reserve-section .display { font-size:clamp(47px,13vw,65px); margin:20px 0 18px; }
  .reserve-section>p { font-size:14px; line-height:1.9; letter-spacing:0; }
  .reserve-section .eyebrow { font-size:10px; line-height:1.8; letter-spacing:.1em; }
  .reserve-actions { gap:25px; margin-top:26px; }
  .reserve-actions .light { max-width:none; min-height:72px; }
  .reserve-phone { display:block; min-height:60px; font-size:30px; }
  .reserve-phone>span,.button small { font-size:12px; }
  .reserve-section .reserve-note { font-size:12px; line-height:1.9; opacity:.85; }
  footer { padding:32px var(--gutter) calc(96px + env(safe-area-inset-bottom)); }
  .footer-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 18px; }
  .footer-links a { min-height:44px; font-size:16px; }
  .footer-bottom { font-size:9px; line-height:1.8; gap:20px; }
  .mobile-reserve { grid-template-columns:1fr 1.9fr; padding-bottom:env(safe-area-inset-bottom,0px); }
  .mobile-reserve>a { height:62px; min-height:62px; font-size:12px; gap:10px; letter-spacing:0; }
  .mobile-reserve>a:last-child { font-size:13px; }
  .mobile-reserve span { font-size:18px; }
  .lightbox { width:calc(100vw - 28px); max-height:calc(100svh - 36px); }
  .lightbox-caption { font-size:13px; line-height:1.8; padding:18px; }
  .lightbox>a { min-height:44px; align-items:center; font-size:12px; margin:0 18px; gap:14px; }
}

@media (max-width:360px) {
  :root { --gutter:20px; }
  .site-header { padding:0 12px; gap:8px; }
  .site-header .wordmark.brand-logo { gap:9px; }
  .site-header .wordmark.brand-logo .brand-full-name { font-size:10.5px; }
  .hero .hero-topline { font-size:9px; }
  .grooming-hero .grooming-title { font-size:49px; }
  .grooming-hero .grooming-hero-copy { font-size:15px; }
  .grooming-hero .hero-kicker { font-size:10px; }
  .grooming-menu .menu-row h3,.grooming-menu .menu-row-featured h3 { font-size:22px; }
  .grooming-menu .menu-row .price,.grooming-menu .menu-row-featured .price { font-size:25px; }
  .salon-band .display { font-size:34px; }
  .salon-band-content { padding:15px; }
  .salon-band .outline-link { padding:13px 14px; font-size:10px; gap:16px; }
  .mobile-reserve>a:last-child { font-size:12px; }
}

@media(max-width:760px){
 .site-header .wordmark.brand-logo .brand-full-name{font-size:12px;line-height:1.55;letter-spacing:0}
 .site-header .brand-full-name>span:first-child{font-size:12px}
 .site-header .brand-full-name>span:last-child{font-size:11px;letter-spacing:0}
}
@media(max-width:360px){
 .site-header .wordmark.brand-logo{gap:8px}
 .site-header .brand-full-name>span:first-child{font-size:11.5px}
 .site-header .brand-full-name>span:last-child{font-size:10.5px}
}
