/* MST | Mobile Atelier 2026.10.18: Kitchen + Bathroom — phone-first refinements */
:root{--phone-ink:#15352f;--phone-sub:#435f5b}
html{width:100%;max-width:100%;-webkit-text-size-adjust:100%;scroll-padding-top:82px}
body{width:100%;max-width:100%;min-width:0;overflow-x:clip;overscroll-behavior-x:none}
body,main,section,.site-header,.container{min-width:0}
main{overflow:clip}
.container{width:min(1300px,calc(100% - 64px))}
:is(.mission,.modules,.studio-section,.planner-section,.related,.roadmap) h2,
:is(.mission,.modules,.studio-section,.planner-section,.related,.roadmap) h3{color:#122d2f}
:is(.mission,.modules,.studio-section,.planner-section,.related,.roadmap) p{color:#445b58}
:is(.mission,.modules,.studio-section,.planner-section,.related,.roadmap) .eyebrow{color:#356953}
:is(.section-heading,.mission__grid,.editorial__grid,.studio,.planner,.faq-layout,.related__grid,.module-grid,.roadmap__grid)>*{min-width:0}
a,button,input,textarea,select{touch-action:manipulation}
a,button{transition-duration:.18s!important}
img{max-inline-size:100%;height:auto}
.site-header{background:#071d27eb;border-bottom:1px solid #8bc39d4c;box-shadow:0 8px 32px #07182122}
.wordmark{min-width:0}
.wordmark__text strong{color:#f4faf6}
.wordmark__text small{color:#bed4ca}
.nav-links a,.header-cta{color:#e0eee6}
.nav-links a.active{color:var(--accent)}
/* Editorial visual language: soften panels, not text contrast */
.module,.roadmap__item,.related__grid a,.planner,.studio,.picker button,.studio__visual,.form-group input,.form-group select,.form-group textarea{border-radius:12px}
.module{box-shadow:0 9px 28px #092a1610;padding:26px;min-height:275px;border-color:#c9ddcf}
.module:nth-child(2){background:#eaf2ea}
.module:nth-child(3){background:#e4f0ec}
.module:nth-child(4){background:#eaf0e5}
.module__index{color:#315c4d}
.module h3,.module h3 *{color:#173e36}
.module p{font-size:13px;color:#425d55;line-height:1.75}
.module__icon{background:#f8fff9;border-color:#bfd7c7}
.module:hover{background:#daecdf;box-shadow:0 16px 42px #234c2420}
.mission{background:#f8faf7}
.modules{background:#f8faf7}
.mission__headline span,.section-heading h2 span{color:#52786e}
.mission__body p{color:#37554e;line-height:1.85}
.section-heading>p{color:#405f57}
.editorial__title{color:#fff}
.editorial__body{color:#d7e5e1}
.editorial__points div{color:#ebf3ed}
.studio-section{background:#eff6f1}
.studio{border-color:#28585d;box-shadow:0 18px 55px #0c372b20}
.studio__title{color:#f1faf3}
.studio__desc,.studio__summary{color:#c2dad5}
.studio__group-label{color:#effbf3}
.studio__group-label span{color:#d0e8db}
.picker button{background:#1c4250;border-color:#4c7580;color:#eff6f4}
.picker button[aria-pressed=true]{background:var(--accent);color:#132e2b;border-color:var(--accent);font-weight:850}
.studio__visual{border-radius:0}
.planner{box-shadow:0 16px 55px #0c382219;gap:0;overflow:hidden}
.planner__intro{background:linear-gradient(150deg,#0f343e,#1b4d47);color:#fff}
.planner__intro h3{color:#f8fff7}
.planner__intro p{color:#e4f1eb}
.planner__form{background:#fff}
.form-group label,.form-group legend{color:#224b40}
.form-group input,.form-group select,.form-group textarea{background:#f8fcf9;color:#15372f;border-color:#c7dacb}
.form-group input::placeholder,.form-group textarea::placeholder{color:#627a73;opacity:1}
.form-group input:focus,.form-group textarea:focus{outline:2px solid #59ac90;outline-offset:1px}
.chip span{border-radius:8px;background:#e9f4ed;color:#31554a;border-color:#cbdcd0}
.chip input:checked+span{background:#123f3b;color:#fff}
.roadmap{background:#e9f1eb}
.roadmap__item{border-color:#d0dfd4;box-shadow:0 7px 24px #2057380b}
.roadmap__item h3{color:#1c4038}
.roadmap__item p{color:#48615b}
.faq-section{background:#081f2b;color:#eff9f3}
.faq-section h2,.faq-list summary{color:#f5faf5}
.faq-section p,.faq-list details p{color:#d0e2de}
.related{background:#f8faf7}
.related__grid a{color:#21453c;border-color:#cadfd1}
.related__grid a[aria-current=page]{background:#e0f2e4}
.related__identity{min-width:0}
.related__identity>span:last-child{overflow-wrap:anywhere}
.endcap h2{color:#0c3031}
.endcap p{color:#315c51}
.footer{color:#d1dfd5}
.social-service{color:#f1f5ef}
@media(max-width:900px){
 .container{width:calc(100% - 38px)}
 .site-header__inner{gap:12px}
 .hero{min-height:0}
 .hero__inner{min-height:650px}
 .hero h1{font-size:clamp(48px,8vw,82px);letter-spacing:-.055em}
 .hero__summary{color:#e4f0eb}
 .section-heading{gap:18px}
 .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .studio__controls{padding:29px}
 .studio__visual{min-height:480px}
}
@media(max-width:780px){
 :root{font-synthesis:none}
 body{background:#f8faf7}
 html{scroll-padding-top:74px}
 .container{width:calc(100% - 32px)}
 .site-header{height:72px}
 .site-header__inner{gap:8px}
 .wordmark__symbol{width:37px;height:37px;flex:none}
 .wordmark__text strong{font-size:13px;letter-spacing:-.4px}
 .wordmark__text small{font-size:7px;letter-spacing:.55px}
 .header-cta{margin-left:auto;padding:10px 12px;min-height:42px;border-radius:9px;background:#d8fa9110;border-color:#d8fa915c}
 body[data-service="bathroom"] .header-cta{background:#9ce8dc12}
 .menu-toggle{width:43px;height:43px;flex:none;border-radius:10px;display:grid;place-items:center;margin:0;padding:9px}
 .nav-links{top:71px;left:10px;right:10px;padding:9px 14px 17px;border:1px solid #779d886a;border-radius:0 0 14px 14px;box-shadow:0 25px 35px #05172373}
 .nav-links a{color:#edf9f1;font-size:14px;min-height:47px;display:flex;align-items:center;padding:12px 8px}
 .nav-links a:hover{color:var(--accent)}
 /* On phones the photograph is a distinct panel, not a 760px desktop background. */
 .hero{display:flex;flex-direction:column;overflow:hidden;min-height:0;background:#071f2b}
 .hero__art{position:relative;inset:auto;width:100%;height:clamp(220px,58vw,390px);min-height:220px;z-index:0;order:0;overflow:hidden;flex:none}
 .hero__art img{height:100%;width:100%;object-fit:cover;object-position:50% 52%;transform:none}
 .hero__art::after{background:linear-gradient(0deg,#071f2bee 0%,#071f2b22 42%,#071f2b00 84%)}
 .hero__gridlines{display:none}
 .hero__inner{width:calc(100% - 32px);min-height:0;display:block;order:1;padding:14px 0 55px}
 .hero__content{width:100%;max-width:100%;min-width:0}
 .breadcrumbs{font-size:10px;letter-spacing:.3px;color:#d4e1dc;gap:8px;margin:0 0 17px}
 .hero__eyebrow{font-size:9px;letter-spacing:1.4px;line-height:1.8;display:block;overflow-wrap:anywhere}
 .hero h1{font-size:clamp(32px,9vw,63px);line-height:1.06;letter-spacing:-.065em;margin:14px 0 18px;overflow-wrap:anywhere;text-wrap:balance;max-width:100%}
 .hero h1 span,.hero h1 em{display:block;max-width:100%}
 .hero__summary{max-width:610px;font-size:14px;line-height:1.75;color:#e1efeb}
 .hero__actions{margin-top:23px;gap:9px}
 .hero__actions .btn{border-radius:9px;min-height:49px;flex:1 1 190px;font-size:12px;padding:12px 15px}
 .hero__fine{font-size:10px;letter-spacing:.3px;color:#cfddd7;gap:9px;margin-top:21px}
 .hero__aside{display:none}
 .hero__image-note{position:absolute;left:12px;top:14px;bottom:auto;right:12px;max-width:calc(100% - 24px);z-index:3;font-size:9px;color:#f7fff7;background:#0b2b34c9;border:1px solid #ffffff45;padding:7px 10px;border-radius:6px;text-align:left}
 .ticker{height:0;border:0;overflow:hidden}
 .ticker__track{animation:none!important}
 .mission{padding:61px 0 20px}
 .mission__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:19px}
 .mission__headline{font-size:clamp(29px,8vw,49px);letter-spacing:-.055em;line-height:1.12;margin:15px 0 8px}
 .mission__body{padding-left:17px;border-left:3px solid #80b998}
 .mission__body p{font-size:14px;line-height:1.83}
 .modules{padding:32px 0 63px}
 .section-heading{display:grid;gap:15px;margin-bottom:23px}
 .section-heading h2{font-size:clamp(29px,7.9vw,50px);letter-spacing:-.052em;line-height:1.12;margin-top:12px;max-width:100%;text-wrap:balance;overflow-wrap:anywhere}
 .section-heading>p{max-width:550px;font-size:13px;line-height:1.75}
 .eyebrow{letter-spacing:1.55px;line-height:1.7;font-size:10px;overflow-wrap:anywhere}
 .module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .module{min-height:215px;padding:20px;border-radius:14px}
 .module__index{font-size:12px}
 .module__icon{right:13px;top:12px;width:48px;height:48px;border-radius:12px}
 .module h3{font-size:18px;line-height:1.25;margin-bottom:8px}
 .module p{font-size:12px;line-height:1.6}
 .module__line{margin-bottom:11px}
 .editorial{padding:62px 0;background:#092633}
 .editorial__grid{grid-template-columns:1fr;gap:26px}
 .editorial__photo{min-height:0;aspect-ratio:1.3;border-radius:14px;overflow:hidden}
 .editorial__photo img{object-fit:cover}
 .editorial__photo-tag{left:10px;bottom:10px;border-radius:7px;padding:11px 13px;font-size:9px;letter-spacing:.65px}
 .editorial__title{font-size:clamp(30px,8vw,54px);letter-spacing:-.06em;line-height:1.14;margin:19px 0}
 .editorial__body{font-size:14px;line-height:1.8;color:#e2ece8}
 .editorial__points{margin-top:24px;gap:12px}
 .editorial__points div{font-size:13px;color:#e8f3ed}
 .studio-section{padding:60px 0}
 .studio{grid-template-columns:minmax(0,1fr);border-radius:17px;min-height:0}
 .studio__controls{order:1;padding:22px 18px 28px}
 .studio__visual{order:0;min-height:0;padding:55px 20px 24px;gap:15px}
 .studio__title{font-size:clamp(25px,7vw,38px);line-height:1.18}
 .studio__desc{font-size:13px;color:#d4e7df}
 .studio__screen-label{top:17px;left:18px}
 .room{width:min(100%,465px);border-width:6px;border-radius:8px;box-shadow:0 14px 32px #0005}
 .studio__swatches span{width:23px;height:23px}
 .studio__current{font-size:12px}
 .studio__group{margin-top:19px;padding-top:19px}
 .studio__group-label{font-size:10px;line-height:1.55;letter-spacing:.8px;color:#eff9f3}
 .studio__group-label span{color:#d3e6dd}
 .picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .picker button{width:100%;min-width:0;min-height:48px;padding:10px 11px;justify-content:flex-start;font-size:11px;line-height:1.4;white-space:normal}
 .studio__summary{font-size:12px;color:#e2eee8}
 .studio__foot{margin-top:24px}
 .planner-section{padding:60px 0}
 .planner{grid-template-columns:minmax(0,1fr);border-radius:17px}
 .planner__intro{padding:27px 20px}
 .planner__intro h3{font-size:clamp(25px,7vw,39px);margin:15px 0}
 .planner__intro p{font-size:13px;color:#e0eee7}
 .planner__status{margin-top:22px;padding-top:17px}
 .planner__status strong{font-size:15px;color:#fff}
 .planner__form{padding:25px 19px 27px;gap:19px}
 .form-group input,.form-group textarea,.form-group select{min-height:48px;border-radius:9px;font-size:16px}
 .form-group textarea{min-height:118px}
 .form-row{grid-template-columns:minmax(0,1fr);gap:17px}
 .chip-row{gap:8px}
 .chip span{min-height:43px;padding:10px 12px}
 .form-actions .btn{width:100%;min-height:49px;border-radius:9px}
 .form-actions a{padding:7px 0}
 .roadmap{padding:62px 0}
 .roadmap__grid{grid-template-columns:minmax(0,1fr);gap:11px}
 .roadmap__item{padding:21px 20px;border-radius:13px;display:grid;grid-template-columns:43px 1fr;column-gap:13px;min-width:0}
 .roadmap__item>span,.roadmap__item>.roadmap__glyph{grid-row:span 2}
 .roadmap__item h3{margin:2px 0 5px;font-size:19px;overflow-wrap:anywhere}
 .roadmap__item p{grid-column:2;line-height:1.7;font-size:13px}
 .faq-section{padding:66px 0}
 .faq-layout{grid-template-columns:1fr;gap:19px}
 .faq-section h2{font-size:clamp(30px,8vw,52px);overflow-wrap:anywhere}
 .faq-section p{color:#cbded9}
 .faq-list summary{padding:18px 31px 18px 0;color:#f2fbf4;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
 .faq-list details p{color:#dceae5;font-size:13px;line-height:1.82}
 .related{padding:62px 0}
 .related__head{align-items:flex-start;gap:16px}
 .related h2{font-size:clamp(27px,7vw,44px);letter-spacing:-.04em}
 .related__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .related__grid a{display:flex;min-width:0;padding:14px 11px;min-height:66px;border-radius:10px;font-size:11px;line-height:1.45;overflow-wrap:anywhere}
 .related__grid a svg{flex:none}
 .endcap{padding:63px 0}
 .endcap__inner{flex-direction:column;align-items:flex-start;gap:18px}
 .endcap h2{font-size:clamp(31px,8vw,56px);letter-spacing:-.06em}
 .endcap p{color:#315345}
 .endcap a{min-height:50px;border-radius:9px}
 .footer{padding-bottom:90px}
 .footer__inner{align-items:flex-start;gap:17px}
 .footer__nav{gap:14px}
 .mobile-action{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));border-color:#809b83}
 .mobile-action a{min-height:44px;border-radius:9px;display:grid;place-items:center;font-size:12px;padding:11px}
 .js .reveal{transition:opacity .25s,transform .25s;transform:translateY(9px)}
}
@media(max-width:460px){
 .container{width:calc(100% - 28px)}
 .hero__inner{width:calc(100% - 28px);padding-bottom:42px}
 .hero__art{height:clamp(215px,62vw,285px)}
 .hero__actions{display:grid;grid-template-columns:1fr}
 .hero__actions .btn{width:100%;min-height:50px}
 .hero h1{font-size:clamp(31px,8.8vw,42px);letter-spacing:-.07em}
 body[data-service="bathroom"] .hero h1{font-size:clamp(29px,8.6vw,40px)}
 .hero__summary{font-size:13.5px}
 .module-grid{grid-template-columns:1fr}
 .module{min-height:173px;padding:19px 18px}
 .module__icon{width:50px;height:50px}
 .module h3{font-size:20px;padding-right:20px}
 .section-heading h2{font-size:clamp(28px,8vw,40px)}
 .mission__headline{font-size:clamp(28px,7.9vw,40px)}
 .editorial__photo{aspect-ratio:1.08}
 .editorial__title{font-size:clamp(30px,8.2vw,42px)}
 .studio__visual{padding-inline:15px}
 .studio__controls{padding:22px 16px 27px}
 .related__grid{grid-template-columns:1fr}
 .related__grid a{padding:15px;min-height:60px}
 .planner__form{padding:24px 16px}
 .roadmap__item{grid-template-columns:37px 1fr;gap:10px}
 .faq-layout{gap:13px}
 .site-header .wordmark__text strong{font-size:12px}
 .site-header .wordmark__text small{font-size:6.4px;letter-spacing:.3px}
 .header-cta{padding:10px;min-height:40px;font-size:9px}
 .menu-toggle{width:40px;height:40px}
}
@media(max-width:355px){
 .header-cta{font-size:0;gap:0;width:39px;justify-content:center;padding:7px}
 .header-cta svg{width:18px;height:18px}
 .site-header__inner{gap:5px}
 .wordmark{gap:6px}
 .wordmark__symbol{width:32px;height:32px}
 .wordmark__text strong{font-size:11px}
 .hero h1,body[data-service="bathroom"] .hero h1{font-size:29px;letter-spacing:-.075em}
 .picker{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .ticker__track{animation:none!important}
 .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
 .module:hover{transform:none!important}
}

/* MST flagship service journeys: tactile chapter tabs on every device. */
.flagship-page-nav{position:relative;background:#0b2732;border-top:1px solid #a3c3aa30;border-bottom:1px solid #a3c3aa30;isolation:isolate}
.flagship-page-nav__inner{display:flex;align-items:center;gap:clamp(20px,3vw,45px);padding-top:16px;padding-bottom:16px}
.flagship-page-nav__intro{font:800 10px/1.5 "Sora",sans-serif;letter-spacing:1.2px;color:var(--accent);flex:0 0 230px}
.flagship-page-nav__links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1}
.flagship-page-nav a{display:flex;align-items:center;gap:11px;min-height:53px;padding:10px 13px;background:#153b43;border:1px solid #76aa9873;border-radius:10px;color:#eaf7ed;font:800 11px/1.3 "DM Sans",sans-serif;text-decoration:none;min-width:0;transition:background .2s,color .2s,transform .2s}
.flagship-page-nav a span{font:800 10px "Sora",sans-serif;letter-spacing:1px;color:var(--accent)}
.flagship-page-nav a strong{font-weight:850;letter-spacing:.4px;overflow-wrap:anywhere}
.flagship-page-nav a i{font-size:15px;font-style:normal;color:var(--accent);margin-left:auto}
.flagship-page-nav a:hover{background:var(--accent);color:#123430;transform:translateY(-2px)}
.flagship-page-nav a:hover span,.flagship-page-nav a:hover i{color:#124539}
.flagship-page-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#service-details,#design-studio,#project-planner{scroll-margin-top:85px}
/* Contrast calibration to keep all copy legible regardless of service theme. */
body[data-service="kitchen"] .planner__intro p,body[data-service="bathroom"] .planner__intro p{color:#ecf7f1}
body[data-service="kitchen"] .studio__controls p,body[data-service="bathroom"] .studio__controls p{color:#d9e9e5}
body[data-service="kitchen"] .faq-list details p,body[data-service="bathroom"] .faq-list details p{color:#d6e7df}
body[data-service="kitchen"] .section-heading p,body[data-service="bathroom"] .section-heading p{color:#3e6055}
body[data-service="kitchen"] .module p,body[data-service="bathroom"] .module p{color:#3e5e51}
body[data-service="kitchen"] .hero__summary,body[data-service="bathroom"] .hero__summary{color:#eaf5ee}
body[data-service="kitchen"] .wordmark__text strong,body[data-service="bathroom"] .wordmark__text strong{color:#f6fff8}
.module,.related__grid a,.roadmap__item{min-width:0;overflow-wrap:anywhere}
@media(max-width:980px){
 .flagship-page-nav__inner{display:grid;gap:13px;padding-top:13px;padding-bottom:13px}
 .flagship-page-nav__intro{font-size:9px}
 .flagship-page-nav a{min-height:50px}
}
@media(max-width:780px){
 .flagship-page-nav{background:#0c2b35}
 .flagship-page-nav__inner{width:calc(100% - 30px);gap:13px;padding-block:16px}
 .flagship-page-nav__intro{font:800 10px/1.6 "Sora",sans-serif;letter-spacing:1.15px}
 .flagship-page-nav__links{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .flagship-page-nav a{justify-content:center;min-height:57px;gap:6px;padding:10px 7px;flex-wrap:wrap;align-content:center;text-align:center;border-color:#73b69759}
 .flagship-page-nav a strong{font-size:9px;letter-spacing:.15px}
 .flagship-page-nav a span{font-size:9px}
 .flagship-page-nav a i{margin-left:0;font-size:13px}
 #service-details,#design-studio,#project-planner{scroll-margin-top:76px}
}
@media(max-width:450px){
 .flagship-page-nav__inner{width:calc(100% - 26px)}
 .flagship-page-nav__links{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .flagship-page-nav a{min-height:51px;justify-content:space-between;flex-wrap:nowrap;text-align:left;padding-inline:12px}
 .flagship-page-nav a:last-child{grid-column:1/-1}
 .flagship-page-nav a strong{font-size:10px}
 .flagship-page-nav a span{font-size:9px}
 .flagship-page-nav a i{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
 .flagship-page-nav a:hover{transform:none}
 .flagship-page-nav a{transition:none}
}