/* Mobile UI additions; original desktop geometry and assets are retained. */
.menu-panel-head,.menu-brand,.menu-number,.menu-overlay,.hero-scroll{display:none}
@media(max-width:768px){
  html{scroll-padding-top:76px}
  body{padding-bottom:calc(59px + env(safe-area-inset-bottom,0px))}
  .site-header,.site-header.is-scrolled{position:sticky;top:0;height:64px;padding:0 15px;background:#fff;color:#232323;box-shadow:none;z-index:200}
  .site-header .logo img{filter:invert(1)}
  .menu-button{display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid #b7b7b7;border-radius:50%;background:#fff;color:#232323;font:400 11px/1 sans-serif;letter-spacing:.15em;cursor:pointer}
  .menu-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.23);opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;z-index:1}
  .site-header #nav{position:fixed;inset:0 0 0 auto;display:flex;flex-direction:column;gap:0;width:76vw;height:100vh;height:100dvh;max-height:none;padding:24px 22px max(28px,env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;background:#fff;box-shadow:none;color:#232323;transform:translateX(100%);visibility:hidden;transition:transform .48s cubic-bezier(.22,.7,.3,1),visibility .48s;z-index:2}
  .site-header #nav.open{transform:translateX(0);visibility:visible;max-height:none;transition:transform .48s cubic-bezier(.22,.7,.3,1)}
  .menu-open .menu-overlay{opacity:1;visibility:visible}
  body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  .menu-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:30px;flex-shrink:0}
  .menu-panel-head > span{font:400 10px/1 sans-serif;letter-spacing:.2em;color:#777}
  .menu-close{display:flex;align-items:center;gap:9px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:400 10px/1 sans-serif;letter-spacing:.12em;cursor:pointer}
  .menu-close > span{display:grid;place-items:center;width:40px;height:40px;border:1px solid #bbb;border-radius:50%;font:300 24px/1 sans-serif;letter-spacing:0}
  .site-header #nav > a{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;min-height:59px;padding:17px 0;border:0;border-top:1px solid #d5d5d5;font:400 clamp(18px,5.1vw,25px)/1.2 "Josefin Sans",sans-serif;letter-spacing:.1em}
  .site-header #nav > a:last-of-type{border-bottom:1px solid #d5d5d5}
  .menu-number{display:block;font:400 10px/1 serif;letter-spacing:.15em;color:#888}
  .menu-brand{display:block;margin-top:auto;padding-top:40px;font-size:12px;letter-spacing:.08em}
  .menu-brand small{display:block;margin-top:5px;font-size:9px;letter-spacing:.12em}
  .mobile-contact-cta{inset:auto 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-bottom:env(safe-area-inset-bottom,0px);background:#fff;border-top:1px solid #d8d8d8;z-index:100}
  .mobile-contact-cta a{display:flex;flex-direction:column;gap:4px;min-height:57px;padding:6px 4px;border:0;border-radius:0;box-shadow:none;background:#fff;color:#232323;font:400 11px/1.2 sans-serif;letter-spacing:.06em}
  .mobile-contact-cta a+a{border-left:1px solid #ddd}
  .mobile-contact-cta svg{width:23px;height:23px}
  .mobile-contact-cta a:focus-visible,.menu-button:focus-visible,.menu-close:focus-visible,.site-header #nav a:focus-visible{outline:2px solid var(--navy);outline-offset:-4px}
  .hero-scroll{display:flex;position:absolute;z-index:3;right:2px;top:auto;bottom:28px;align-items:center;flex-direction:column;gap:10px;padding:8px 4px;background:rgba(255,255,255,.8);color:#232323;pointer-events:none}
  .hero-scroll span{writing-mode:vertical-rl;font:400 9px/1 sans-serif;letter-spacing:.25em;opacity:.65;animation:scroll-drift 2.8s ease-in-out infinite}
  .hero-scroll i{display:block;width:1px;height:28px;margin-top:22px;background:currentColor;opacity:.55}
  .mail-address a{overflow-wrap:anywhere}
}
@keyframes scroll-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(22px)}}
/* v4: tighten only the mobile section boundaries highlighted in review. */
@media(max-width:768px){
  .menu-button{font-size:9px;letter-spacing:.1em}
  #section2,#section3,#section5{padding-bottom:32px}
  #section3,#section4,#section6{padding-top:32px}
  #section3 .feature{margin-bottom:0}
  #section3 .heading,#section4 .heading,#section6 .heading{margin-bottom:32px}
}
@media(prefers-reduced-motion:reduce){
  .hero-scroll span{animation:none}
  .site-header #nav,.menu-overlay{transition:none}
}
/* Mobile scroll-linked card stack: the next service slides over the previous. */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){
  .service-deck.is-stacking{position:relative;isolation:isolate;padding-bottom:0}
  .service-deck.is-stacking .feature-grid,.service-deck.is-stacking .cards{display:contents}
  .service-deck.is-stacking .service-stack-card{position:sticky;top:var(--stack-top,76px);z-index:var(--stack-order);opacity:1;transform:scale(var(--stack-scale,1)) rotate(var(--stack-rotate,0deg));transform-origin:center top;transition:none;box-shadow:0 -10px 30px #0002;margin:0 0 30px;width:100%}
}
@media(max-width:768px){
  .service-deck .cards > article:last-child{margin-bottom:0}
}

/* Dark palette shared across devices; original desktop geometry is retained. */
@media screen{
  body{background:#050505;color:#fff;isolation:isolate}
  body::before{
    content:"";position:fixed;inset:-18px;z-index:-1;pointer-events:none;
    background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('../images/background-camera.jpg?v=20261016-images') 50% bottom/cover no-repeat;
    transform:scale(1.04) translate3d(0,-12px,0);
    animation:studio-background-drift 24s ease-in-out infinite;
  }
  .site-header,.site-header.is-scrolled{background:rgba(5,5,5,.88);color:#fff;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:none}
  .site-header .logo img,.site-header.is-scrolled .logo img{filter:none}
  .menu-button{background:rgba(12,12,12,.8);color:#fff;border-color:rgba(255,255,255,.65)}
  .menu-overlay{background:rgba(0,0,0,.55)}
  .site-header #nav{background:#0b0b0b;color:#fff}
  .site-header #nav > a,.site-header #nav > a:last-of-type{border-color:rgba(255,255,255,.15)}
  .menu-close{color:#fff}
  .menu-close > span{border-color:rgba(255,255,255,.65)}
  .menu-panel-head > span,.menu-brand small{color:#fff}
  .menu-number{color:#fff}
  .menu-brand{color:#fff}
  .mobile-contact-cta{background:#080808;border-color:rgba(255,255,255,.16)}
  .mobile-contact-cta a{background:#080808;color:#fff}
  .mobile-contact-cta a+a{border-color:rgba(255,255,255,.16)}
  .mobile-contact-cta a:focus-visible,.menu-button:focus-visible,.menu-close:focus-visible,.site-header #nav a:focus-visible{outline-color:#fff}
  .hero{background:#050505}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.35) 58%,#050505 100%)}
  .hero-copy{color:#fff}
  .hero-scroll{background:rgba(5,5,5,.5);color:#fff}
  .hero-scroll span,.hero-scroll i{opacity:1}
  .concept{background:rgba(5,5,5,.32);color:#fff}
  .section{background:rgba(5,5,5,.2);color:#fff}
  #section3,#section5,#section7{background:rgba(5,5,5,.25)}
  #section4{background:rgba(11,11,11,.9)}
  #section8{background:rgba(8,8,8,.9);color:#fff}
  .heading h2,.heading b,.feature h3,.cards h3,.voices h3,dt{color:#fff}
  .heading > span,.strengths-label,.craftsmanship-title > span{color:#fff}
  .service-benefits li,.service-benefits li+li,.service-benefits li:nth-child(even),.service-benefits li:nth-child(n+3){background:#111;border-color:rgba(255,255,255,.12);color:#fff}
  .benefit-number{color:#fff}
  .benefit-lead{color:#fff}
  .service-benefits strong{color:#fff}
  .craftsmanship{background:rgba(17,17,17,.93);color:#fff;border-color:rgba(255,255,255,.14)}
  .craftsmanship-title{border-color:rgba(255,255,255,.14)}
  .craftsmanship h3{color:#fff}
  .service .feature,.service .cards article{background:#111;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .service-deck.is-stacking .service-stack-card{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .service .feature h3,.service .cards h3{color:#fff;background:linear-gradient(transparent,#111)}
  .feature h3,.voices article{border-color:rgba(255,255,255,.14)}
  .feature small,.voices small{color:#fff}
  .faq details{background:#111;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  .faq summary{background:#161616;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  .faq summary:focus-visible{outline:2px solid #fff;outline-offset:-3px}
  .pricebox{background:rgba(11,11,11,.96);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff}
  .pricebox > p{border-color:rgba(255,255,255,.12)}
  .pricebox > p:nth-of-type(even){background:#111}
  .pricebox > p span{color:#fff}
  .pricebox > small{color:#fff}
  dl,dt,dd{border-color:rgba(255,255,255,.14)}
  #section7 dl,#section7 dt,#section7 dd{border-color:#fff}
  .contact-guide,#section8 .line-guide{background:#111;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
  .contact-guide h3{color:#fff}
  .contact-guide p,.contact-guide ol,.contact-guide li,.contact-guide .mail-address,.contact-guide .mail-address a{color:#fff}
  .contact-guide small,#section8 .line-guide small{color:#fff}
  .line-primary,.mail-primary{background:#242424;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
  .line-primary:focus-visible,.mail-primary:focus-visible{outline:2px solid #fff;outline-offset:3px}
  body > footer{background:rgba(5,5,5,.88);color:#fff;border-color:rgba(255,255,255,.12)}
  body > footer p{color:#fff}
}
/* At tablet widths keep the full lens in view, with black at either side. */
@media(min-width:769px){
  body::before{
    background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('../images/background-camera.jpg?v=20261016-images');
    background-size:100% 100%,auto 100%;
    background-position:center,center bottom;
  }
}
@media(min-width:600px) and (max-width:768px){
  body::before{background-size:100% 100%,auto 100%;background-position:center}
}
@keyframes studio-background-drift{
  0%,100%{transform:scale(1.04) translate3d(0,-12px,0)}
  50%{transform:scale(1.04) translate3d(0,12px,0)}
}
/* More noticeable mobile motion, while retaining a slow, steady rhythm. */
@media(max-width:768px){
  body::before{animation:studio-mobile-background-drift 12s ease-in-out infinite}
}
@keyframes studio-mobile-background-drift{
  0%,100%{transform:scale(1.14) translate3d(-24px,-36px,0)}
  25%{transform:scale(1.14) translate3d(24px,0,0)}
  50%{transform:scale(1.14) translate3d(12px,36px,0)}
  75%{transform:scale(1.14) translate3d(-24px,12px,0)}
}
@media(prefers-reduced-motion:reduce){
  body::before{animation:none;transform:scale(1.04)}
}

/* Tablet navigation and hero. Keep the 1100px menu limit in sync with main.js. */
@media screen and (min-width:769px){
  .site-header .logo{flex-shrink:0}
}
@media screen and (min-width:769px) and (max-width:1100px){
  html{scroll-padding-top:88px}
  body{padding-bottom:calc(59px + env(safe-area-inset-bottom,0px))}
  .site-header,.site-header.is-scrolled{
    position:sticky;top:0;height:76px;padding:0 28px;
    background:rgba(5,5,5,.96);color:#fff;z-index:200;
  }
  .site-header .logo img{width:140px}
  .menu-button{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:50px;height:50px;padding:0;border:1px solid rgba(255,255,255,.65);
    border-radius:50%;background:rgba(12,12,12,.8);color:#fff;
    font:400 10px/1 sans-serif;letter-spacing:.1em;cursor:pointer;
  }
  .menu-overlay{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);
    opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;z-index:1;
  }
  .site-header #nav{
    position:fixed;inset:0 0 0 auto;display:flex;flex-direction:column;gap:0;
    width:min(420px,78vw);height:100vh;height:100dvh;max-height:none;
    padding:24px 28px max(28px,env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;background:#0b0b0b;color:#fff;
    transform:translateX(100%);visibility:hidden;
    transition:transform .48s cubic-bezier(.22,.7,.3,1),visibility .48s;z-index:2;
  }
  .site-header #nav.open{
    transform:translateX(0);visibility:visible;max-height:none;
    transition:transform .48s cubic-bezier(.22,.7,.3,1);
  }
  .menu-open .menu-overlay{opacity:1;visibility:visible}
  body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  .menu-panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin-bottom:24px;flex-shrink:0;
  }
  .menu-panel-head > span{font:400 10px/1 sans-serif;letter-spacing:.2em;color:#fff}
  .menu-close{
    display:flex;align-items:center;gap:9px;min-height:44px;padding:0;
    border:0;background:none;color:#fff;font:400 10px/1 sans-serif;
    letter-spacing:.12em;cursor:pointer;
  }
  .menu-close > span{
    display:grid;place-items:center;width:44px;height:44px;
    border:1px solid rgba(255,255,255,.65);border-radius:50%;
    font:300 26px/1 sans-serif;letter-spacing:0;
  }
  .site-header #nav > a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    flex-shrink:0;min-height:59px;padding:17px 0;border:0;
    border-top:1px solid rgba(255,255,255,.15);
    font:400 25px/1.2 "Josefin Sans",sans-serif;letter-spacing:.1em;
  }
  .site-header #nav > a:last-of-type{border-bottom:1px solid rgba(255,255,255,.15)}
  .menu-number{display:block;font:400 10px/1 serif;letter-spacing:.15em;color:#fff}
  .menu-brand{display:block;margin-top:auto;padding-top:36px;font-size:12px;letter-spacing:.08em}
  .menu-brand small{display:block;margin-top:5px;font-size:9px;letter-spacing:.12em}

  .hero{
    height:calc(100vh - 135px);height:calc(100svh - 135px);
    min-height:620px;max-height:900px;
  }
  .hero-copy{
    top:auto;bottom:36px;left:32px;right:32px;width:auto;max-width:820px;
    padding:0;background:none;box-shadow:none;
  }
  .hero h1{font-size:clamp(38px,4.8vw,54px);line-height:1.4;letter-spacing:.03em;overflow-wrap:anywhere}
  .hero h2{font-size:clamp(17px,1.9vw,20px);line-height:1.7}
  .hero-copy p{max-width:670px;font-size:14px;line-height:1.9}
  .heading{flex-wrap:wrap;gap:12px 18px}

  /* Reuse the existing three contact actions without covering the hero copy. */
  .floating-line{display:none}
  .mobile-contact-cta{
    position:fixed;inset:auto 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;padding-bottom:env(safe-area-inset-bottom,0px);
    background:#080808;border-top:1px solid rgba(255,255,255,.16);z-index:100;
  }
  .mobile-contact-cta a{
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
    min-height:57px;padding:6px 4px;border:0;border-radius:0;box-shadow:none;
    background:#080808;color:#fff;font:400 11px/1.2 sans-serif;letter-spacing:.06em;
  }
  .mobile-contact-cta a+a{border-left:1px solid rgba(255,255,255,.16)}
  .mobile-contact-cta svg{width:23px;height:23px}
  .mobile-contact-cta a:focus-visible,.menu-button:focus-visible,.menu-close:focus-visible,.site-header #nav a:focus-visible{
    outline:2px solid #fff;outline-offset:-4px;
  }
}
@media screen and (min-width:769px) and (max-width:1100px) and (prefers-reduced-motion:reduce){
  .site-header #nav,.menu-overlay{transition:none}
}

/* Desktop contact shortcut: reserve room beside copy at narrower PC widths. */
@media screen and (min-width:1101px){
  body{--pc-contact-gutter:clamp(0px,calc(1280px - 100vw),100px)}
  .section,.concept{padding-right:var(--pc-contact-gutter)}
  body > footer{padding-right:calc(20px + var(--pc-contact-gutter))}
  .floating-line{left:auto;right:24px;bottom:24px;width:84px;height:84px}
  .floating-line img{border-radius:18px}
  .floating-line:focus-visible{outline:2px solid #fff;outline-offset:4px}
}